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';exportdefault{title: 'Common components/Datepicker'};exportconstSimpleDatePicker=()=>{return<DatePickervariant="single"value={newDate()}/>;};

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:

1. main.js

   constdefaultConfig=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 extendingaddons: [...defaultConfig.addons,'storybook-addon-performance/register'],// need to customise webpack config because we use custom resolvers for helpers/utilwebpackFinal: (webpackConfig)=>{webpackConfig.resolve.plugins=[newTsconfigPathsPlugin({baseUrl: './src/client'})];returnconfig;}};

2. preview.js

   // step 1: export defaultsexport*from'@primer/react-toolchain/storybook/preview';// (optional) step 2: customise and overwriteimport{decorators}from'@primer/react-toolchain/storybook/preview';import{withPerformance}from'storybook-addon-performance';decorators.push(withPerformance);export{decorators};