Setup for Development

Setting Up for Development

react-image-annotate uses react storybook to view different states of each component.

After cloning the project, run yarn install, then yarn storybook. Your browser should automatically open to http://localhost:9090 showing you all the different component states we test. To build a feature/bug, edit or create a *.story.js file that uses the component in a way that replicates the bug or could demonstrate the feature. Then edit the regular *.js files until things are working.

If you're PRing a new feature, you should have a story that demonstrates the feature so maintainers can easily test it.

Scripts

Run npm run <SCRIPT_NAME> to run a script. In development we're running npm run storybook (or yarn storybook) most of the time.

script	description
start	Run demo site on port 3000
storybook	Run storybook on port 9090
build	Build the library in to the dist directory
build:babel	Transpile the src directory into dist
build:gh-pages	Build the website into build
gh-pages	Build and deploy the website to github
dist	Build and publish the library