CONTRIBUTING.md

Contribution

• Directory structure
• Setup
• Lint and format
• Build
  • Build all packages
  • Build a specific package
• Unit test
  • Test all packages
  • Test a specific package
• E2E test
  • All Storybook versions
  • Single Storybook
• Update documents' ToC and CLI usage section

Directory structure

This repository adopts mono-repo structure using Lerna.

Each package has the following role:

• packages/storycap : Contains Storycap's main application source code. This packages has a responsibility for capturing screenshots and depends on storycrawler.
• packages/storycrawler : Contains basic utilities source to build a crawler for Storybook. This package should have functions to connect Storybook, launch Puppeteer processes, and manage parallel asynchronous tasks.

Setup

Clone this repository and execute the following:

$ yarn --frozen-lockfile
$ yarn bootstrap

Lint and format

$ yarn lint     # runs eslint
$ yarn format   # runs prettier --write

Build

Build all packages

$ yarn build

Build a specific package

$ cd packages/<package-name>
$ yarn build
# or
$ yarn run tsc -p tsconfig.build.json

Unit test

Test all packages

$ yarn test

Test a specific package

$ cd packages/<package-name>
$ yarn test
# or
$ yarn run jest

E2E test

All Storybook versions

$ ./e2e.sh

When the command exit successfully, check __screenshots__ dir. There should be captured PNG files.

Single Storybook

And e2e.sh also accepts a specific storybook example's name. For example:

$ ./e2e.sh examples/v4-simple

Update documents' ToC and CLI usage section

We insert ToC and CLI usage section to some Markdown files(e.g. README.md) using script. If you touch *.md files or add an option to CLI, please exec the following command when you stage the changes:

$ yarn doc