mvst-storybook-web v1.0.0

MVST UI Lib - React JS

Read before any change

• The project will install and run this lib needs to support Typescript
• The entrypoint file for the lib is src/index.ts
• This project uses Rollup.js as a module bundler.
• This project uses Tailwind.js to ensure the common naming of the CSS classes
• This is a lib but also a runnable app for our design system
• Feel free to contribute and enrich the project as much as possible
• While adding animation classes, let's keep the same naming convention ( it always starts with mvst-)
• Avoid data manipulation inside this project, this a lib focused on UI components
• The version management is very important. Ensure to release semantic versions after your changes (npm explanation)

Custom animations and transitions

This package provides a set of animations and transitions to use as a CSS classes. For example: mvst-animation-fade-in

Running Storybook locally

1. Install dependencies with yarn
2. Run the commands below

yarn storybook

It opens a browser where you can navigate between the components, but you will only be able to see it in your simulator. You can also play around with the different variables of the components through the Storybook controls

Next steps

• Create a config file to define the different variables of the theme when using the lib externally
• Integrate Figma with Storybook
• Integrate the missing components
• Add other animations and transitions to use
• Document all components inside Storybook
• Create functional tests for each component
• Double check every single component used in our mobile apps is inside this lib
• Start to use the lib inside apps already in production
• Create a pipeline to manage the version and publish the package
• (Optional) Make the lib private in npmjs.com

Installing

yarn install mvst-ui-web

Developing locally

To use this project locally, we need to link it to the root project using the yarn link command:

• Inside the local package: yarn link
• Inside the root project: yarn link mvst-storybook-web

Figma Integration

When running the storybook in your browser you will be able to see the tab Figma and see the desired design following the design system for each component.

Dependencies

• tailwind.js (theming)