At the top level of the ncids mono-repository we are using Lerna (npm: lerna) to manage sub-packages. This allows us to more easily reference dependencies within the design system.

These are the packages that are used in the various sub-packages. Not all of these are needed by every one of the sub-packages, but if the sub-package needs to use that "type" of package, it should use that one.

Name	NPM	Description
ESLint	eslint	Javascript static analysis
Prettier	prettier	Style formatter for JS/JSX/SCSS/MD files

Name	NPM	Description
Sass	sass	Pure JS based SASS processor. (node-sass is no longer supported)
PostCSS	postcss	CSS Transformers
Babel	babel	JS Transpiler
Webpack	webpack	Javascript packager

The following are the testing tools used across many of the packages.

Name	NPM	Description
Jest	jest	Unit Test Framework
React Testing Library	@testing-library/react	React Component Testing
Cypress	cypress / cypress-cucumber-preprocessor	Behavioral testing framework with Gherkin/Cucumber features
Istanbul	nyc / istanbul-lib-coverage	Code coverage tool
Pa11y	pa11y-ci	Accessibility Testing

Storybook(storybook.js.org) is being used as a demonstration tool for components and other UI pieces for the design system. We will be using Storybook v6(allowing composition of stories from various repos) and a few add-ons.

Name	NPM	Description
addon-a11y	@storybook/addon-a11y	Show possible accessibility violations with components
addon-jest	@storybook/addon-jest	Show unit testing results for components
addon-controls	@storybook/addon-controls	Adds graphical UI to interact with a component's arguments dynamically, allowing live edit of components

The design system is set up as a monorepo and Lerna(lerna.js.org) is a tool that optimizes the workflow around managing multi-package repositories with git and yarn. We will be managing the repo as a fixed/locked repository, meaning that all of the versions of the design system subpackages are all tied together under the overall design system version.

The static site generation uses Gatsby, however, Gatsby is made up of many different packages.

Name	NPM	Description
Gatsby	gatsby-core	The main Gatsby package for static site publishing
Gatsby Filesystem Source Plugin	gatsby-source-filesystem
PrismJS	prismjs	Code syntax highlighting for code examples