@bcgov/design-system-react-components 0.5.2-pr → 0.5.2-pr575

package/README.md

@@ -95,7 +95,7 @@ export default function App() {
 
 ## Supported React versions
 
-This package has a peer dependency on `react` and `react-dom` at these versions: `"^16.14.0 || ^17.0.0-rc.1 || ^18.0.0"`
+This package has a peer dependency on `react` and `react-dom` at these versions: `"^16.14.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"`
 
 By targeting v16.14.0 as a minimum, we get to use [React's modern JSX transformation](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in `tsconfig.json`:
 
@@ -115,9 +115,9 @@ This project follows semantic versioning. See [CHANGELOG.md](./CHANGELOG.md) for
 
 Components live in `./src/components` and are targeted by the build process with an export in `./src/index.ts`.
 
-#### Testing components with Jest
+#### Testing components with Vitest
 
-Unit tests can be run with Jest using `npm run test`.
+Unit tests can be run with Vitest using `npm run test`. Use `npm run test:watch` to run Vitest in watch mode.
 
 ### Storybook
 
@@ -137,9 +137,9 @@ oc tag ed91fb-tools/design-system-react-components-storybook:develop ed91fb-tool
 oc tag ed91fb-tools/design-system-react-components-storybook:develop ed91fb-tools/design-system-react-components-storybook:production
 ```
 
-#### Testing with Storybook Test Runner
+#### Testing Storybook with Vitest
 
-With Storybook running locally, use the `npm run test-storybook` script to run `@storybook/test-runner` using the configuration defined in `./.storybook/test-runner.ts`. [Learn more about Storybook Test Runner](https://storybook.js.org/docs/writing-tests/test-runner).
+With Storybook running locally, use the `npm run test-storybook` script to test Storybook with Vitest's browser mode. This script uses the configuration defined in `./vite.config.ts`. [Learn more about Storybook's Vitest addon.](https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon).
 
 ### Vite kitchen sink application
 
@@ -147,6 +147,36 @@ Vite uses the components code directly from `./src/components` in groups of cont
 
 Run `npm run vite-dev` to access the Vite React demo app.
 
+### Build library code for publishing
+
+#### Build scripts
+
+Scripts are included in `package.json` for building the component library for publishing:
+
+- `clean` removes any existing local `dist` directory
+- `build:js` uses Rollup to create ESM and CJS versions of the components in `dist/esm` and `dist/cjs`
+- `build:types` uses the TypeScript compiler `tsc` to generate type declarations in `dist/types`
+- `build:dts` uses Rollup to bundle the `.d.ts` files from `dist/types` into a single `dist/index.d.ts` file
+- `build` runs all of the scripts above in sequence
+
+The files that get published are specified in the `files` section of `package.json`. The `dist/types` folder isn't included in this bundle in favor of publishing just the single aggregated `dist/index.d.ts` file.
+
+#### Check files to be published
+
+Use `npm pack --dry-run` to see the files that will be published in the package tarball. See [npm-pack documentation](https://docs.npmjs.com/cli/v11/commands/npm-pack).
+
+#### Testing a local build
+
+Use `npm link` to test a build of the component library locally. See [npm-link documentation](https://docs.npmjs.com/cli/v11/commands/npm-link).
+
+In your `./packages/react-components` folder, run `npm link`.
+
+Then in a local React project folder, use `npm link @bcgov/design-system-react-components` to link the test build into your test project.
+
+### Linting
+
+ESLint is used for linting. See configuration file `eslint.config.js`.
+
 ### Publish new versions
 
 #### npm package
@@ -156,7 +186,7 @@ Publishing new versions of the package to npm is done via GitHub Actions.
 GitHub Actions are located in `/.github/workflows` in the project root. Actions are included to:
 
 - Build the Storybook and Vite applications on merge to `main`
-- Test (Jest and Playwright) on pull request
+- Test (Vitest and Playwright) on pull request
 - Publish new versions of the library on npm (`next` tag) on merge to `main`
 - Publish new versions of the library on npm (`latest` tag) when a GitHub release is published