@moreapp/storybook

Getting Started

• yarn to install dependencies
• yarn start to start Storybook dev environment, with live-reload

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time.

How this project is set up:

• Vite is used to start and build this project
• Typescript was added
• Storybook was added using npx sb init
• TailwindCSS was configured using their own guide
• Prettier is added with max width 100 (as usual)
• This guide was used to set up Babel to compile our Component Library for release to NPM

Because TailwindCSS is using PostCSS, we updated .storybook/main.ts to run tailwindcssand autoprefixer

CI - Chromatic

Our bitbucket-pipelines.yml builds the storybook and submits it to Chromatic.

Chromatic automates gathering UI feedback, visual testing, and documentation. It also hosts our Storybook as documentation.

Login to chromatic.com using your Bitbucket Cloud credentials.

Available Scripts

In the project directory, you can run:

yarn start

Runs the Storybook app in the development mode.
Open http://localhost:6000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn watch

Compiles the typescript library to the dist folder. This is very useful when Linking your local Storybook to an application that uses it (like the app2 project).