Universal Storybook

A unified storybook and component structure for both React and HTML components, which enables:

• a universal storybook.
• a uniform component structure.
• a shared style.
• a shared story control configuration.
• a unified testing framework.

Features

• Unit testing both components using Jest and Enzyme.
• LESS for styling.
• Design tokens, using Storybook plugin for design tokens and CSS variables as tokens.
• Maintain code quality using ESLint, Prettier, and Family. Ensure no code with bad linting and formatting go past, using lint-staged.
• Already configured ESLint and VS code editor settings. Use recommended VS Code extensions to better developer experience.

Storybook add-ons for:

• Controls
• Actions
• Design tokens
• Test coverage and status
• Story source
• Component documentation
• Light/dark mode
• Viewport and grid

Getting started

Prerequisite

Make sure you have Yarn installed

yarn -v

If not, then instal it globally.

npm install yarn -g

Develop

To start the development environment for storybook:

yarn storybook

To test the components

yarn test
yarn test -u // to re-generate snapshots
yarn test:output // generate test results for storybook

To lint and format

yarn lint
yarn lint --fix // to fix linting issues
yarn format // format unformatted code

Publish

To build the storybook for production

yarn storybook:build

Component and story structures

React version

Example: Heading component

├── src/
│   └── components/
│     └── atoms/
│       └── Button/
│           ├── Button.story.config.js
│           ├── Button.less
│           ├── Button.js
│           ├── Button.stories.js
│           └── Button.test.js
│     └── molecules/
│     └── organisms/
│   └── pages/
│   └── globals/

HTML version

Example: Text Component

├── src/
│   └── components/
│     └── atoms/
│       └── Button/
│           ├── Button.story.config.js
│           ├── Button.less
│           ├── Button.html.js
│           ├── Button.html.stories.mdx
│           └── Button.html.test.js
│     └── molecules/
│     └── organisms/
│   └── pages/
│   └── globals/

Both React and HTML versions

Example: Button Component

├── src/
│   └── components/
│     └── atoms/
│       └── Button/
│           ├── Button.story.config.js
│           ├── Button.less
│           ├── Button.js
│           ├── Button.stories.js
│           ├── Button.test.js
│           ├── Button.html.js
│           ├── Button.html.stories.mdx
│           └── Button.html.test.js
│     └── molecules/
│     └── organisms/
│   └── pages/
│   └── globals/