@ontario-digital-service/react-components

ODS React Components

Javascript package that contains various React components and can be used in projects. The components are built as part of the covid-19 portfolio. The package itself is built on top of Create-React-App and features Storybook and CypressJS for end-to-end testing. It also features styled-components library allowing for CSS-in-JS styling.

We are using the start-server-and-test package to programatically run the development server for the Cypress scripts. It spins up a development server and waits until it responds before running Cypress. Once the command runs through, the development server instance is killed.

The CI for this project automatically publishes the npm package to Gitlab npm registry.

Adding components to NPM package

Ensure you add your imports to dist-index.js and to index.js so they are correctly imported on package level. Note that dist-index.js is what gets added to dist folder on build and index.js is the main entry file for the package.

Running

1. npm i - Installs project dependencies.
2. npm start - Runs the app in the development mode. Output can be viewed locally at http://localhost:3000
3. npm run build - Builds the npm package for production and outputs to the dist folder.
4. npm run test - Starts up a development server and runs the CI version of CypressJS
5. npm run local-test - Starts up a development server and runs the GUI version of CypressJS locally
6. npm run storybook - Starts up a Storybook instance where components can be interacted with

NOTE: The DynamicMenu component is not implemented with styled-components. It will be converted to use styled-components and the CSS file will be subsequently removed.