0.3.20-beta.11
v0.3.19
Published
Synapse Reusable components library v2
Downloads
6
Readme
synapse-ui
Reusable ui components for Synapse
Adding a new component
- Create your new component inside the
src/
folder. You could place your component into any of the existing folders or create a new one. - Create your style files inside its respective component folder.
- Create index.js file in the root of the new folder like so
src/_your_folder/index.js
. - 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
- Go to the
package.json
of synapse-ui and change thename
attribute forsynapse-ui-v2
. - Run
yarn install
. - Run
yarn build
. - Run
yarn link
. - Then go to the project directory where you will use synapse-ui and run
yarn link synapse-ui-v2
.
Testing your components with Storybook
- Create a stories.jsx file along with your component
- Run
yarn install
- Run
yarn storybook
- Navigate to your component in Storybook dashboard
- For additional context, please refer to official Storybook documentation at https://www.learnstorybook.com/
Publishing
- Run
yarn install
. - If you are not logged in. Run
npm login
. Make sure to count with a npm account. - Run the
npm publish
command. - !Done¡.