bmb-react-components v1.1.0

Zodaka React Components Library

Welcome to the React components library for the Zodaka ecosystem. Reusable components for all our clients live in this repo.

Before jumping into development, please read these docs.

Design

Any component going into this library will first need to be designed. Generally, this process is - get designs from designer, iterate and approve designs, turn designs into stories.

If you are here because you are assigned a story, chances are the heavy lifting on the design front has been completed for you.

However, please note, that you as the engineer / developer will need to carefully consider what states your component should maintain, what subcomponents they should have, and what props they should receive. Please use existing components in this library for guidance.

Develop

Once the design work is firm, we can begin development. This developement process is an iterative one. Please refer to existing components for style as well as instructive guidance as you develop.

Once you're in the folder, run npm run storybook in a terminal window to fire up the Storybook Component Explorer.

Then, you can begin to build your component.

1. Create the component inside the src/components folder.

2. Follow naming convention shown in existing components. E.g. the login component will be called Login.js

3. Code up component.

4. Add a file called <component_name>.stories.js. E.g. Login.stories.js.

5. Add your stories (component states), and necessary addons inside the <component_name>.stories.js file. Please look at existing stories to grok how to do this step. It's not too bad!

6. Once the component is done and stories are looking good, it's time for testing. Testing is very easy in Storybook. Just run npm test. It'll create snapshots for you that you then need to commit to this repo.

7. If you need to update snapshots for a component you wrote, please run npm run update-snapshots. Please don't do this for components which are not in your work statement. This is to maintain the integrity of our snapshots. The only way to do this would be to edit a component outside the work statement and update the snapshots, so chances are slim this'll actually happen.

Deploy

Once the component has been built and the stories have been added and visually tested in the Storybook Explorer, you are ready to deploy.

1. First, please update the minor version of the package. Run npm run update-minor version to do so.

2. Then, simply run npm run build:publish and the package will be published to the npm module @zodaka/react-components

Integrate

Finally, with the package developed, one can pull it in their client and integrate it. To do so, simply import it.

For example: import { Login } from '@zodaka/react-components'

To end, plug in the component into the codebase and see if it's working.

Integration Iteration

Chances are, your component won't work perfectly the first time around. If it does, you're a genius. Congratulations.

If you're like the rest of us, you'll need to move between the client you're working on and the Storybook development environment. When you make changes to the component library after you have published it, please:

1. Update the patch version by running npm run update-patch-version

2. Then run npm run build:publish

Now you're ready to try again to integrate to the client, with your discovered bug resolved. Repeat this process until you have developed and integrated the component, and it is working well.

The end.