React Design System

Installation

NPM packages

$ npm i -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p
$ npx sb init --builder @storybook/builder-vite --use-npm

VS Code Plugins

• Tailwind CSS Intellisense
• PostCSS Language Support
• MDX

Storybook documentation with Github Pages

• https://mhayk.github.io/react-design-system/

Jest

$ npm run test-storybook -- --watch

MSW

https://mswjs.io - Mock Service Worker

• mswj - storybook addon

  $ npm i msw msw-storybook-addon -D
  $ npx msw init public/
  

It is required to append the following codes into the files above: .storybook/main.cjs:

...,
"staticDirs": [
    "../public"
  ],
...

.storybook/preview.cjs

...
import { initialize, mswDecorator } from 'msw-storybook-addon';

initialize();

export const decorators = [mswDecorator];