@crabas0npm/officia-amet-delectus v1.0.0
:art: NICE Design System
Lerna-managed monorepo for the NICE Design System
- :art: NICE Design System - What is it? - Development - Quick start - Slow start - Storybook - Tests - Documentation - Commands - Publishing to npm - Upgrading to 1.x from 0.x
What is it?
The NICE Design System (NDS) is a pattern library, front-end toolkit and set of guidelines for rapidly building modern, accessible digital services that are consistent with the NICE brand guidelines.
Development
We recommend using vscode as the IDE when developing with the NICE Design System. We have a set of recommended extensions you should install to make development easier. You should be prompted to install these when opening the folder in vscode.
Quick start
TL;DR:
1. `volta install node`
2. `npm i`
3. `npm start`
4. http://localhost:3000/Slow start
To run the design system site and tests locally, first install Node. We use Volta to manage Node versions; you may need to install that first.
Then before you can run any tasks, run npm i from the command line to install dependencies from npm. This will also link local packages together and install remaining package dependencies.
Next, run npm start from the command line to run a server for local development, and view http://localhost:3000/ in a browser.
Help! I'm getting complaints about icons!
You may need to generate the icon packages first. Change to the components/icons
folder, run npm i and then npm start. You should then be able to return to
the root folder and run npm start again without any issues.
NextJS
The NDS docs site is built using NextJS. It can be found in the docs folder.
Tests
All the components have tests, written with Jest and
React Testing Library.
Run test:unit:watch to run unit tests and watch for changes.
To run tests for a just a single component, run the following:
npm run test:unit:watch -- breadcrumbsCommands
Run npm start and test:unit:watch for development. However, there are other npm scripts available to be run for other tasks - here are some useful ones:
| Task | Description |
|---|---|
npm start | Runs a server for local development and watches for changes |
npm run lerna | Runs lerna under the hood |
npm run release:alpha | Runs lerna publish under the hood for an alpha release |
npm run release:latest | Runs lerna publish under the hood for the latest full release |
npm test | Lints JS and SCSS and runs JS unit tests |
npm run test:unit | Runs JS unit tests |
npm run test:unit:watch | Runs JS test tests and watches for changes to re-run tests |
npm run test:unit:coverage | Runs JS test tests and generates a coverage report |
npm run lint | Lints both JS and SCSS |
npm run lint:js | Lints just JS |
npm run lint:scss | Lints just SCSS |
npm run clean:ts | Cleans the Typescript output |
npm run build:ts | Compiles all Typescript components |
npm run docs:dev | Starts the Next.js documentation site in development mode |
npm run docs:build | Builds the Next.js documentation site for production |
Check package.json for a complete list of scripts.
Note: because lerna is installed locally, you can use
npm run lerna --to run lerna commands, for examplenpm run lerna -- add @nice-digital/icons --scope=@nice-digital/nds-filters
Publishing to npm
First, make sure you're logged in to npm on the command line by running npm whoami.
Please make sure 2FA is enabled on your account for at least auth, and preferably writes as well.
Next, check you have access to the @nice-digital org on npm by running npm org ls nice-digital USERNAME. It should list your username and role. You should have at least the developers role, which wiLl give you write access.
Then run npm run release to publish to npm. This runs lerna publish under the hood, which means you can pass in additional command arguments. For example to release to npm with an alpha dist tag, run the following:
npm run release:alpha21 days ago