@primer/react-toolchain

0.2.0 • Public • Published



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

Readme

Keywords

none

Package Sidebar

Install

npm i @primer/react-toolchain

Weekly Downloads

13

Version

0.2.0

License

MIT

Unpacked Size

11.2 kB

Total Files

14

Last publish

Collaborators

  • lesliecdubs
  • lukasoppermann
  • joshblack
  • siddharthkp
  • camertron
  • hectahertz
  • broccolini
  • jonrohan
  • joelhawksley
  • primer-css
  • colebemis
  • manuelpuyol
  • smockle
  • simurai
  • khiga8