Bootstrap a developer-friendly NextJS app configured with:
- Typescript for type safety
- ESLint for linting
- Prettier for formatting
- husky for linting, typechecking and formatting with commit hooks
- Jest and react-testing-library for testing
- Styled Components for CSS-in-JS styling and theming
- Storybook with a "theme getter" (
t("colors.white.1000")
) - Google Fonts setup in NextJS app and Storybook
- Conventional Commits for easy commits that follow conventional standard.
- Semantic Release for automated app versioning
Deploy the example using Vercel:
- Clone project:
git clone git@github.com:whoisryosuke/next-styled-storybook-starter.git
- Install dependencies:
yarn
Now you have 2 main options:
- Run Storybook:
yarn storybook
- Run the NextJS app:
yarn dev
Storybook is used for developing components in isolation, providing integration testing, and creating documentation for components. It comes setup with Storybook Essentials (including MDX docs), as well Storybook a11y addon for accessibility testing.
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
import { Checkbox } from './Checkbox'
<Meta title="MDX/Checkbox" component={Checkbox} />
# Checkbox
With `MDX` we can define a story for `Checkbox` right in the middle of our Markdown documentation.
<Canvas>
<Story name="all checkboxes">
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>
</Story>
</Canvas>
yarn test
This project is setup with Jest, Jest Snapshots, and react-testing-library. This means you can snapshot test (save codified representation of components for comparison) and unit test component functionality (like clicking a button and verifying a result).
Test utilities are provided for convenience (see: test/testUtils.ts
), like a custom render function to allow you to wrap tests in "providers" (like a theme for CSS-in-JS).
yarn type-check
Runs the Typescript CLI for type checking. This also runs as a pre-push
git hook to ensure code quality before pushing to remote servers.
Git commits are "linted" (or checked) to ensure they follow conventional commit standards. To make this process easier, a commit script is included:
- Stage some files using
git add
(or VSCode UI) yarn commit
This runs the Commitzen CLI and walks you through writing a conventional commit (e.g. feat(button): new focus ref
). It's much easier than remembering every type of commit (feat, build, bug, etc) and the right syntax.
This project is setup with a Circle CI configuration for testing commits to any branch, and releasing only commits to master
and beta
branches.
Sample release flow:
- Clone your repo (a fork of this one most likely)
- Create a new feature/bug/etc branch
- Make commits and push them to Github
- This triggers a test in CI
- Open a PR and merge the branch to
beta
branch for testing - This triggers a test and release in CI
- Force push branch changes to master
- This triggers a test and release in CI