# Ui Plugin Slots

> Reusable Vue components for creating UI plugin slots.

## Getting Started

### [Installing](https://docs.github.com/en/free-pro-team@latest/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages#installing-a-package)

1. Create `.npmrc` file in the root directory of your Project project and fill with:

    ```bash
    @intuitivewebsolutions:registry=https://npm.pkg.github.com/
    //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
    ```

    make sure you create a Github access token with packages permissions and export it as GITHUB_TOKEN

2. Install by running:

    ```bash
    yarn add @intuitivewebsolutions/bc-ui-plugins-slots
    # or: npm install -s @intuitivewebsolutions/bc-ui-plugins-slots
    ```

### Usage

#### With a webpack bundler

in the component you want to add the slot to:
import the component and register it in the components object.

```js
import BcPluginSlot from "@intuitivewebsolutions/bc-ui-plugin-slots";

...
  components: {
    'bc-plugin-slot': BcPluginSlot,
  }
...
```

Now you can use it in the template:

```vue
<template>
  <div id="app">
    <bc-plugin-slot
      :plugin-methods="{sayHi: (name) => $message('Hi! ' + name)}"
      plugin-slot-name="my-app:header:button-row"
      handler-component="bc-plugin-button-row"
      plugins-url="https://some.url/plugins"
      integrations-url="https://integrations.engineering-dev.britecore.com"
    />
  </div>
</template>
```

now the `sayHi` method will be exposed to any plugins if they are initialized on this slot.

#### Attributes

required attributes are marked with `*`

1. `* plugin-slot-name`
   a unique name to distinguish the slot.
2. `* handler-component`
   defines which slot type to render, you have three options:
   `bc-plugin-button-row`, `bc-plugin-auto-complete` and `bc-plugin-markup`
3. `* plugins-url`
   The endpoint to fetch the plugins list from, the json response must be JSON:API compliant, [sample](./dev/plugins/plugins.json)
4. `* integrations-url`
   Url of BriteCore Integrations, this is used for making requests from plugins to our integrations.
5. `access-token`
    If the plugins api requires an `Authorization` header this value should be passed to authenticate the request, if your plugin sends requests to BriteCore integration services then this attribute is required.
6. `context`
   a json object that the plugin will have access to, it can be any json serializable data
7. `plugin-slot-disabled`
   if set to true all inputs and buttons inside that slot will be disabled.
8. `disabled-message`
   if `plugin-slot-disabled` is set to true then `disabled-message` will be used in the pop up message to indicate why an input is disabled.
9. `plugin-methods`
   an object that contains the methods to be exposed to the plugin when the connection is initialized between a plugin and a plugin slot, there are already some methods that are exposed by default and can be used in all plugins like:
   - `getSlotInfo`
   - `displayErrors`
   - `displayMessage`
   - `displayInfoPopUp`
   - `getAccessToken`

   and there are other exposed methods based on the type of the slot,
   for instance `ButtonRow` slot type has:
     - `updateButtons`
     - `showLoadingIndicator`
  `Markup` slot type has:
     - `setData`
     - `getData`
     - `showLoadingIndicator`

#### Running locally

Start by running the mock plugins server to serve some static plugins, run:

```bash
cd dev/plugins
# install dependencies and run server.
yarn && yarn start
```

Now you will have a node express server running on port 3000, now you can start webpack dev server, open another terminal tab and run the server using this command on the root directory of this project.

```bash
yarn && yarn serve
```

Now open <http://localhost:8000> and you should see the plugins rendering on the page.

#### Testing

Run tests by using

```bash
yarn test:unit
```