https://github.com/primer/react-toolchain
Toolchain to help in building React components with @primer/react
https://github.com/primer/react-toolchain
Last synced: 12 months ago
JSON representation
Toolchain to help in building React components with @primer/react
- Host: GitHub
- URL: https://github.com/primer/react-toolchain
- Owner: primer
- License: mit
- Created: 2022-04-21T10:52:49.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-06-24T05:18:06.000Z (about 1 year ago)
- Last Synced: 2025-06-27T02:38:59.267Z (about 1 year ago)
- Language: JavaScript
- Size: 2.66 MB
- Stars: 8
- Watchers: 4
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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`:
```diff
{
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.
```jsx
import { DatePicker } from './date-picker';
export default {
title: 'Common components/Datepicker'
};
export const SimpleDatePicker = () => {
return ;
};
```
[Learn more about stories from the Storybook docs](https://storybook.js.org/docs/react/get-started/whats-a-story)
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`
```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`
```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 };
```