0.3.20-beta.11 中文文档教程

Question

synapse-ui

Synapse 的可重用 UI 组件

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.
2. If you are not logged in. Run npm login. Make sure to count with a npm account.
3. Run the npm publish command.
4. !Done¡.