mymedmen-web-storybook

MedMen Web Storybook

Scripts

• npm run storybook - starts Storybook in dev mode with hot reloading
• npm run storybook:build - statically build Storybook
• npm run build - builds npm package with rollup.js
• npm test - runs all tests
• npm run test:watch - runs tests in watch mode

Using package

Until it will be published use npm link mentioned bellow.

Local development

Writing components

Storybook can run in dev mode with hot-reloading - use npm run storybook. Than you can write components in same way as in CRA.

All components are in ./src folder and than separated by Atomic Design methodology.

Don't forget to list new components in ./src/index.js.

// Atoms
export Button from './atoms/button';
export Loader from './atoms/loader';

Writing stories

Files with stories live next to components and have *.stories.js extension.

└─┬ src
  └─┬ atoms
    ├── button.js
    └── button.stories.js

You can see example of stories in official docs.

Some basic rules:

• use .addWithJSX instead of .add - this function generates JSX preview,
• if there are several versions of component modified by props, each should have own story,
• for more complicated props use knobs.

npm link

npm link is CLI tool that allows to link local folder as npm package.

How to use it:

• call npm link in mymedmen-web-storybook folder (where is package.json located),
• in project where you want to use package call npm link mymedmen-web-storybook.

Testing

Jest with react-testing-library and custom-jest-matchers is used for testing.

Try to write tests for every component.

npm test runs in pre-push host.

For imports from react-testing-library use test-utils that provides theme:

import { render, fireEvent } from 'test-utils';
import Button from './button';

describe('Button', () => {
  test('click on button', () => {
    const handleClick = jest.fn();
    const { getByText } = render(
      <Button onClick={handleClick}>Some button</Button>,
    );
  })
})

Deploy Storybook as web site

Storybook produces static html files, which can be served as any website.

Storybook is listed as devDependencies (to prevent installing it with package), therefore run npm install without NODE_ENV=production or --production.

Than call npm run build, static website is located in ./storybook-static.