primer / react-toolchain

Toolchain to help in building React components with @primer/react

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:

1. 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;
     }
   };

2. 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 };

react-toolchain's Issues

running list

features:

• default viewports from primer
• primer theme switcher
• set storyStoreV7: true
• include .mdx by default
• prc generate to scaffold a component structure based on file structure ADR

customistation

• customisable preview.js

dx

• should we just use .storybook if it exists?
• is the name and bin commands good?
• automatically scope down to story files to make it fast
• detect missing .storybook/preview if .storybook/main exists and add it
• "customise" command to scaffold .storybook with defaults

misc

• pass cli flags through
• test with primer/react
• test with react-shared

Update peer dependency after primer/react#2044 is released

• PR: primer/react#2044
• Release tracking: primer/react#2056