# Pyxis plugin

This project is a plugin to be integrated in clay-kiln to manage assets along with [Pyxis Backend](https://github.com/clay/pyxis)

## Requirements

The Kiln project that is going to use this plugin should set the following environment variables:

```
PYXIS_HOST=http://localhost:3010 // Where pyxis backend is running
PYXIS_KEY=key // Token for every request
```

Minimum [clay-kiln](https://github.com/clay/clay-kiln) version required: `8.9.0`

## Setup

1) Install the package as a dependency

`$ npm install --save pyxis-frontend`

2) Create a folder for your plugin inside the kiln folder in the services section

`$ mkdir PROJECT_FOLDER/app/services/kiln/plugins/PLUGIN_NAME`

3) Create an `index.js` file in the previous directory created, importing main components for the plugin and setting them in the specific `window.kiln` object.

```js
const {
  NavButton,
  NavContent,
  Input,
  Modal
} = require('pyxis-frontend');

// Used to export components to the window element
module.exports = () => {
  window.kiln.navButtons['pyxis'] = NavButton;
  window.kiln.navContent['pyxis'] = NavContent;
  window.kiln.inputs['pyxis-picker'] = Input;
  window.kiln.modals['pyxis-picker'] = Modal;
};
```

**NavButton**: Required component to set the button into the drawer.

**NavContent**: Component dedicated to show the content of the plugin.

**Input**: Component to open the `Modal` for the image picker.

**Modal**: Component to show the image picker.

4) At `app/services/kiln/index.js` require the previous component created.

```js
 require('./plugins/pyxis')();
```

### CUSTOM CONFIGURATION

To add custom configuration for the plugin:

1) Create  a global config if it doesn't exist

```js
window.kiln.config = window.kiln.config || {};
```

2) Set a config object in the clay kiln window object.

**IMPORTANT**: Custom configuration should be set before calling the plugin.

```js
window.kiln.config['pyxis'] = {
  promotionalBaseWidth: 200,
  displayBaseHeight: 100
};
```

3) Set a config file in [Pyxis Backend](https://github.com/clay/pyxis/blob/master/app/config/previews.yml).

### OPTIONAL CONFIGURATION KEYS
**displayBaseHeight**: Base height required to calculate the ratio for display renditions.

**promotionalBaseWidth**: Base width required to calculate the ratio for promotional renditions.

Check how this value help to calculate the ratios in [config file.](src/config/index.js)