# @primer/react-scripts

> Toolchain to help build React components with Primer

Latest version **0.0.2** (published 2022-06-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @primer/react-scripts
pnpm add @primer/react-scripts
yarn add @primer/react-scripts
bun add @primer/react-scripts
```

Provides the commands `prc`, `primer-react-scripts`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-06-01 |
| First published | 2022-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | primer |
| Maintainers | camertron, hectahertz, broccolini, jonrohan, joelhawksley, primer-css, colebemis, manuelpuyol, smockle, simurai, khiga8 |

## Links

- npm: https://www.npmjs.com/package/@primer/react-scripts
- npm.io page: https://npm.io/package/@primer/react-scripts

## Dependencies (14)

- [execa](https://npm.io/package/execa.md) ^5.1.1
- [pkg-dir](https://npm.io/package/pkg-dir.md) ^5.0.0
- [common-path](https://npm.io/package/common-path.md) ^1.0.1
- [@storybook/react](https://npm.io/package/@storybook/react.md) ^6.5.0-alpha.64
- [@storybook/addon-a11y](https://npm.io/package/@storybook/addon-a11y.md) ^6.5.0-alpha.64
- [@storybook/addon-links](https://npm.io/package/@storybook/addon-links.md) ^6.5.0-alpha.64
- [@storybook/addon-actions](https://npm.io/package/@storybook/addon-actions.md) ^6.5.0-alpha.64
- [@storybook/testing-library](https://npm.io/package/@storybook/testing-library.md) ^0.0.11
- [@storybook/addon-essentials](https://npm.io/package/@storybook/addon-essentials.md) ^6.5.0-alpha.64
- [@storybook/builder-webpack5](https://npm.io/package/@storybook/builder-webpack5.md) ^6.5.0-alpha.64
- [@storybook/manager-webpack5](https://npm.io/package/@storybook/manager-webpack5.md) ^6.5.0-alpha.64
- [storybook-addon-performance](https://npm.io/package/storybook-addon-performance.md) ^0.16.1
- [storybook-addon-turbo-build](https://npm.io/package/storybook-addon-turbo-build.md) ^1.1.0
- [@storybook/addon-interactions](https://npm.io/package/@storybook/addon-interactions.md) ^6.5.0-alpha.64

## Recent versions

- 0.0.2 (latest) — 2022-06-01
- 0.0.0-20220601134101 (canary) — 2022-06-01
- 0.0.0-20220601134002 — 2022-06-01
- 0.0.0-20220601133818 — 2022-06-01
- 0.0.0-20220601133127 — 2022-06-01
- 0.0.0-20220601132958 — 2022-06-01
- 0.0.0-20220601132841 — 2022-06-01
- 0.0.0-20220601132626 — 2022-06-01
- 0.0.0-20220601132141 — 2022-06-01
- 0.0.0-20220530132703 — 2022-05-30
- 0.0.1 — 2022-05-25
- 0.0.0-20220525125528 — 2022-05-25
- 0.0.0-20220525124951 — 2022-05-25
- 0.0.0-20220525124903 — 2022-05-25
- 0.0.0-20220525124654 — 2022-05-25
- … 39 more at https://npm.io/package/@primer/react-scripts/versions

## README

<p align="center">
  <img src="https://octodex.github.com/images/manufacturetocat.png" height="200px"/>
  <br><br>
  <b>Toolchain to help build React components with Primer</b>
  <br><br>
  <img src="https://img.shields.io/badge/maturity-proof--of--concept-d85151?style=flat-square"/>
  <img src="https://img.shields.io/github/package-json/v/primer/react-scripts?style=flat-square"/>
</p>

&nbsp;

### Requirements

- webpack 5+

&nbsp;

## Setup

```
npm install @primer/react-scripts --save-dev
```

### Storybook

Step 1. Add this script to your `package.json`:

```diff
{
  scripts: {
    "start": "webpack",
    "test": "jest",
+   "storybook": "prc storybook"
  }
}
```

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 <DatePicker variant="single" value={new Date()} />
}
```

[Learn more about stories from the Storybook docs](https://storybook.js.org/docs/react/get-started/whats-a-story)

&nbsp;

You're good to go! Run `npm run storybook`.


<details>
  <summary><h4>Customise storybook</h4></summary>

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-scripts/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-scripts/storybook/preview';

   // (optional) step 2: customise and overwrite
   import { decorators } from '@primer/react-scripts/storybook/preview';
   import { withPerformance } from 'storybook-addon-performance';

   decorators.push(withPerformance);
   export { decorators };
   ```
</details>

---
_Source: https://npm.io/package/@primer/react-scripts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._