lib-testingt v0.0.0

BambooRose

br-components

br-components is a component library built on Nx and Storybook that provides reusable react components for building and developing front end applications.

Documentation Changelogs

This project was generated using Nx.

Nx provides a fast and extensible build system along with monorepo support and generators for much of the required boilerplate.

You can use either terminal commands or the VS Code extension.

Setup

It is recommended to use nvm to ensure a compatible version of Node is used.

nvm use
npm install

Generating a component

Each component has some boilerplate code, such as the default and exported functions, imports, styles, unit and e2e tests. We can leverage Nx to generate these automatically.

npx nx generate @nrwl/react:component <your-component-name> --project=br-components --style=styled-components --export --no-interactive

This will create a component inside br-components/src/lib, with a basic unit test, and export this component. We will also want to generate a Storybook story and Cypress e2e test.

npx nx generate @nrwl/react:stories --project=br-components --generateCypressSpecs --no-interactive

Running Storybook

We can serve a local version of Storybook.

npx nx run br-components:storybook or npm run storybook

Building Storybook

We can build a static version of Storybook for publishing. This will be placed at dist/storybook.

npx nx run br-components:build-storybook

You can view the latest version of Storybook here.

Running tests

Unit tests

Unit tests use the Jest test runner and React Testing Library.

npx nx test br-components

End to End Tests

E2E tests use Cypress. It will build a Storybook instance and headlessly run e2e tests against this. This ensures the tests are running on the same components we build and work on.

npx nx run br-components-e2e:e2e

Linting

Nx provides several linting setups such as EsLint and Prettier to ensure consistent code styles.

npx nx lint br-components

Building the library

Building the library will bundle everything into a single dist folder for easy distribution. Formats supported are ESM, CJS, and UMD.

npx nx build br-components --parallel --format=esm

Publishing the library

The intention of publishing the library is so other applications can import the reusable components. This is published to NPM as the @bamboorose/br-components package. You will need appropriate permissions for the Bamboorose NPM org.

This should be handled by the CI process after confirming all tests have passed and the code has been approved and merged. You should not publish manually.

nx publish br-components --ver=<required-version> --tag=[custom-tag]

Auto Build SVG Component

SVG components are built using SVGR.

Adding an SVG component to the icon library:

• First copy the raw SVG code from the Figma wireframe i.e., right click on the required SVG, select copy/paste as > save as SVG.
• Within the br-components/src/lib/icons/svgs folder create a new .svg file (Ensure you follow the naming convention of all other SVG files). paste the raw SVG code into this file and save.
• From the VScode console cd into libs/br-components an run the below command.

nx npm run build:icons

• A new SVG icon component will be generated and placed in icons/components.
• To add this to the storybook documentation, import it into icon-list.tsx.
• Finally, add the new icon reference to the icons object into icon-list.tsx (follow the naming convention of all other icons)

icon-list.tsx Example

import { IconNewIcon } from '@bamboorose/br-components';

export const IconList = ({ ...props }: IconsProps) => {
  return [
    {
      component: <IconNewIcon className="icon-new-icon" />,
      title: 'IconNewIcon',
    },
  ];
};