Sparkbox React Storybook Starter

This project utilizes Next.js, TypeScript, and Storybook to create React components.

The Next-based website can be either a documentation page for a Storybook-based design system, or a full production site with component documentation. For Storybook projects without the requirement of a full app, Next may be unnecessary, thanks to the robust capabilities of Storybook.

An excellent free option for deploying this finished site is Netlify.

Quick Start

To begin development:

1. npm i to install dependencies.
2. npm run build:next to build the Next app.
3. npm run start:dev to start a development server.

To view the Storybook Components:

1. npm run storybook to start the Storybook server.
2. Navigate to localhost:6006

To build a "production" site with a published version of Storybook:

1. npm run build to build both the Next app and compile static Storybook pages to /public/storybook/
2. npm start to start the server without a watch task.
3. Alternatively, npm run start:prod to do both.
4. Navigate to localhost:3000 to see the Pages index.
5. Head to localhost:3000/storybook/index.html to see your static Storybook.

Note: Your project can with or without a deployed Storybook instance (/storybook/index.html from the Next App). If you'd like to remove the static Storybook from your deploy, update the build task to be:

 "build": "npm run build:next",

Storybook Add-ons

This project comes with two add-ons, Storybook Docs and Storybook Backgrounds (with black and white by default). These powerful add-ons should be enough to get you started with most projects.

Styles

As your CSS solution is likely to be tied to individual preference, at this time, this repository does not come with a way to style components. In the future we plan to offer scripts for installing either a SCSS or CSS-in-JS option. For now, you are on your own.

Code Quality

Tests

This project utilizes Jest with React Testing Library to run unit tests.

• To run the tests, npm test.
• To run only the unit tests, npm run test:unit.
• If you'd like to see code coverage, npm run test:coverage.
• If you want to run the tests with a server, npm run test:watch.
• To update any Snapshots, npm run test:update.

Linting

We use ESLint with the Sparkbox ESLint config for JavaScript linting.

• By default, the linter(s) run with our test script, npm test.
• To run just the linter(s), npm run lint.

Continuous Integration

This template comes with a starter config for CircleCI in .circleci/config.yml. You may wish to modify this to suit your own needs.