Toolchain to help build React components with Primer
Requirements
- webpack 5+
Setup
npm install @primer/react-toolchain --save-dev
Storybook
Step 1. Add this script to your package.json
:
{
scripts: {
"start": "webpack",
"test": "jest",
+ "storybook": "toolchain storybook",
+ "storybook:build": "toolchain storybook:build"
}
}
Step 2. Create a ComponentName.stories.tsx
file
We recommend putting this file next to the component.
import { DatePicker } from './date-picker';
export default {
title: 'Common components/Datepicker'
};
export const SimpleDatePicker = () => {
return <DatePicker variant="single" value={new Date()} />;
};
Learn more about stories from the Storybook docs
You're good to go! Run npm run storybook
.
Customise storybook
If you need to customize your storybook config, create .storybook
directory in the root of your repository with the following files:
-
main.js
const defaultConfig = require('@primer/react-toolchain/storybook/main'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); module.exports = { // extend default config ...defaultConfig, // remember to include default properties while extending addons: [...defaultConfig.addons, 'storybook-addon-performance/register'], // need to customise webpack config because we use custom resolvers for helpers/util webpackFinal: (webpackConfig) => { webpackConfig.resolve.plugins = [new TsconfigPathsPlugin({ baseUrl: './src/client' })]; return config; } };
-
preview.js
// step 1: export defaults export * from '@primer/react-toolchain/storybook/preview'; // (optional) step 2: customise and overwrite import { decorators } from '@primer/react-toolchain/storybook/preview'; import { withPerformance } from 'storybook-addon-performance'; decorators.push(withPerformance); export { decorators };