Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nice-digital/nice-design-system
:star2: Your source for creating beautiful, consistent experiences across NICE :star2:
https://github.com/nice-digital/nice-design-system
design-system
Last synced: 5 days ago
JSON representation
:star2: Your source for creating beautiful, consistent experiences across NICE :star2:
- Host: GitHub
- URL: https://github.com/nice-digital/nice-design-system
- Owner: nice-digital
- License: mit
- Created: 2016-07-19T10:47:52.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-11-19T14:09:49.000Z (3 months ago)
- Last Synced: 2025-01-22T17:08:15.518Z (13 days ago)
- Topics: design-system
- Language: TypeScript
- Homepage: https://design-system.nice.org.uk/
- Size: 37.8 MB
- Stars: 16
- Watchers: 20
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# :art: NICE Design System
> Lerna-managed monorepo for the NICE Design System
[](https://www.npmjs.com/package/@nice-digital/design-system)
[](https://github.com/nice-digital/nice-design-system)
[](https://github.com/nice-digital/nice-design-system/blob/master/LICENSE)
[](https://lerna.js.org/)
Table of contents
- [:art: NICE Design System](#art-nice-design-system)
- [What is it?](#what-is-it)
- [Development](#development)
- [Quick start](#quick-start)
- [Slow start](#slow-start)
- [Storybook](#storybook)
- [Tests](#tests)
- [Documentation](#documentation)
- [Commands](#commands)
- [Publishing to npm](#publishing-to-npm)
- [Upgrading to 1.x from 0.x](#upgrading-to-1x-from-0x)
## 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](.vscode/extensions.json) 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](https://nodejs.org/en/download/). We use [Volta](https://volta.sh/) to manage Node versions; you may need to [install that first](https://docs.volta.sh/guide/getting-started).
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](https://nextjs.org/). It can be found in the **docs** folder.
### Tests
All the components have tests, written with [Jest](https://jestjs.io/) and
[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
Run `test:unit:watch` to run unit tests and watch for changes.
To run tests for a just a single component, run the following:
```sh
npm run test:unit:watch -- breadcrumbs
```
### Commands
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](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 example `npm 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](https://github.com/lerna/lerna/tree/master/commands/publish#readme). For example to release to npm with an alpha [dist tag](https://docs.npmjs.com/cli/dist-tag), run the following:
```sh
npm run release:alpha
```