# frontend-participant-components

## Setup
frontend-participant-components uses packages that is located in our private npm registry hosted by packagecloud.io.
To be able to install it you need to add the registry to your npm configuration.

```bash
# add registry to your .nmprc file
curl -s https://6bd4037e86b46b80283617ab4a2d836cde73271b342a357d:@packagecloud.io/install/repositories/orchardit/npm/script.node.sh | bash
```

This project requires a specific `python` version and Node managed via nvm:

```sh
nvm use
npm install -g yarn
pyenv install 2.7.18
```

# once that is done, you can install the dependencies using regular yarn commands.
yarn install
```


### To run the components:
In order to see a component in the playground you have to:
- Create a file under your component folder following this pattern: `{name-of-your-component}.example.md`.
- Provide data to you component (if connected to apollo). To do so, you have a mock client at your disposal in `lib/apolloMock.js` that you can update regarding your needs.

- Finally `yarn start` to start the playground

Note: You can find in this repo multiple files as example (e.g.`artist-dropdown.example.md`).

### To test the components:
- `yarn test` tests the library and runs the linter
- `yarn test:unit --watch` runs the tests and re-runs them on any change

### Export the component from the index file
To make a component available for use externally, add an export statement in `src/index.js`. Components should be thematically organized within the file and placed in alphabetical order for improved readability.

```js
export { default as HelpPopover } from './components/help-popover';
```

### Component usage:
After you've set up the component library, you're ready to use the components in your project. To do this, import the component as you would from any other third party repository with an import statement like so:

```js
import { HelpPopover } from 'frontend-participant-components';
```