# synapse-ui
Reusable ui components for Synapse 

## Adding a new component
1. Create your new component inside the `src/` folder. 
   You could place your component into any of the existing folders or create a new one.
2. Create your style files inside its respective component folder.
3. Create index.js file in the root of the new folder like so `src/_your_folder/index.js`.
4. Import and export the new components inside index.js like so
   ```
   import Component1 from './Component1/Component1;
   import Component2 from './Component2/Component2;
   import Component3 from './Component3/Component3;

   export {
      Component1,
      Component2,
      Component3,
      {... moreComponents}
   };
   ``` 

## Testing your new components
1. Go to the `package.json` of synapse-ui and change the `name` attribute for `synapse-ui-v2`.
2. Run `yarn install`.
3. Run `yarn build`.
4. Run `yarn link`.
5. Then go to the project directory where you will use synapse-ui and run `yarn link synapse-ui-v2`.

## Testing your components with Storybook
1. Create a stories.jsx file along with your component
2. Run `yarn install`
3. Run `yarn storybook`
4. Navigate to your component in Storybook dashboard
5. For additional context, please refer to official Storybook documentation at https://www.learnstorybook.com/

## Publishing
1. Run `yarn install`.
3. If you are not logged in. Run `npm login`. Make sure to count with a npm account.
4. Run the `npm publish` command.
5. !Done¡.