Add local development guidance and improvements (#376)

* Only use `NODE_ENV=production` for production builds

* Log warnings without throwing errors during development

* Separate build and clean scripts for Windows

* Upgrade Yarn using `yarn set version stable`

* Update documentation to include running locally

Author: colinrotherham

.github/dependabot.yml

@@ -53,6 +53,7 @@ updates:
       tools:
         patterns:
           - '@storybook/*'
+          - 'del-cli'
           - 'outdent'
           - 'sass-embedded'
           - 'storybook'

.github/workflows/ci.yml

@@ -41,11 +41,15 @@ jobs:
       - name: Jest Tests
         run: yarn test --coverage
 
-      - name: Typescript build
+      - name: Package build
         run: yarn build
+        env:
+          NODE_ENV: production
 
       - name: Storybook build
         run: yarn build-storybook
+        env:
+          NODE_ENV: production
 
       - name: Switch to PR branch
         if: ${{ github.event_name == 'pull_request' && env.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/release.yml

@@ -36,8 +36,10 @@ jobs:
       - name: Jest Tests
         run: yarn test --coverage
 
-      - name: Typescript build
+      - name: Package build
         run: yarn build
+        env:
+          NODE_ENV: production
 
       - name: Publish npm package
         if: ${{ !github.event.release.prerelease }}

README.md

@@ -8,9 +8,9 @@ This repository contains the code for NHS.UK React components - a port of the [N
 
 [View documentation and examples](https://nhsdigital.github.io/nhsuk-react-components)
 
-## Installation
+## Install package
 
-You can install this package using either `npm` or `yarn`.
+You can install this package into your service using either `npm` or `yarn`.
 
 ```bash
 npm install --save nhsuk-react-components
@@ -41,6 +41,30 @@ import { DateInput, Form } from 'nhsuk-react-components';
 </Form>;
 ```
 
+## Development
+
+To run this project locally, set up Yarn using [Node.js corepack](https://github.com/nodejs/corepack#readme)
+
+```bash
+npm install -g corepack
+corepack enable
+yarn install
+```
+
+Then run the following:
+
+1. **Build and watch package**
+
+   ```bash
+   yarn build --watch
+   ```
+
+2. **Open documentation and examples**
+
+   ```bash
+   yarn storybook
+   ```
+
 ## Upgrading
 
 - [Upgrading to 1.0](/docs/upgrade-to-1.0.md)

babel.config.cjs

@@ -1,6 +1,4 @@
-// Node.js environment with default
-// https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production
-const { NODE_ENV = 'development' } = process.env;
+const { NODE_ENV } = process.env;
 
 /**
  * Babel config
@@ -27,7 +25,7 @@ module.exports = {
     [
       '@babel/preset-react',
       {
-        development: NODE_ENV === 'test' || NODE_ENV === 'development',
+        development: NODE_ENV !== 'production',
         runtime: 'automatic',
         useBuiltIns: true,
       },

package.json

@@ -48,8 +48,8 @@
     "!**/*.test.*"
   ],
   "scripts": {
-    "cleanup": "rm -rf dist/ > /dev/null",
-    "build": "NODE_ENV=production yarn cleanup && rollup -c",
+    "clean": "del-cli dist/*",
+    "build": "rollup --config",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "jest --color",
@@ -92,6 +92,7 @@
     "babel-plugin-module-resolver": "^5.0.3",
     "babel-plugin-replace-import-extension": "^1.1.5",
     "classnames": "^2.5.1",
+    "del-cli": "^7.0.0",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
@@ -125,7 +126,7 @@
     "react-dom": ">=18.2.0",
     "tslib": ">=2.8.0"
   },
-  "packageManager": "yarn@4.10.3",
+  "packageManager": "yarn@4.14.1",
   "publishConfig": {
     "access": "public"
   }

rollup.config.js

@@ -11,6 +11,8 @@ import preserveDirectives from 'rollup-preserve-directives';
 import packageJson from './package.json' with { type: 'json' };
 import tsBuildConfig from './tsconfig.build.json' with { type: 'json' };
 
+const { NODE_ENV } = process.env;
+
 const { outDir } = tsBuildConfig.compilerOptions;
 const external = Object.keys(packageJson.peerDependencies);
 
@@ -73,7 +75,13 @@ export default defineConfig(
 
       // Handle warnings as errors
       onwarn(warning) {
-        throw new Error(warning.message, { cause: warning });
+        if (NODE_ENV === 'production') {
+          throw new Error(warning.message, {
+            cause: warning,
+          });
+        }
+
+        console.warn(warning.message);
       },
     }),
   ),

stories/Welcome.mdx

@@ -9,12 +9,13 @@ NHS.UK Frontend ported to React
 [![CD Build and Publish to NPM](https://github.com/NHSDigital/nhsuk-react-components/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/NHSDigital/nhsuk-react-components/actions/workflows/release.yml)
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/nhsuk-react-components.svg)](https://bundlephobia.com/result?p=nhsuk-react-components)
 
-## Installation
+## Install package
 
-You can install this package using either `yarn` or `npm`.
+You can install this package into your service using either `npm` or `yarn`.
 
 ```bash
 npm install --save nhsuk-react-components
+
 # Or
 yarn add nhsuk-react-components
 ```