The design system is set up as a monorepo using the PNPM package manager and Lerna. Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and pnpm. 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.

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. The configurations should all use the various @nciocpl/eslint-config-X packages we have in https://github.com/NCIOCPL/cgov-standards-xt
Prettier	prettier	Style formatter for JS/JSX/SCSS/MD files
Stylelint	stylelint	Scss linter like ESLint

The build toolchains are specific to each package, there are even differences between the versions. Below is the list of all the ones in use with descriptions, but check the package.json in each package to see what is in use. We are not going to include the webpack loaders or babel plugins here.

Name	NPM	Description
Sass	sass	Pure JS based SASS processor. (node-sass is no longer supported)
PostCSS	postcss	CSS Transformers. This handles auto-prefixing of classes through the autoprefixer package.
Typescript	typescript	The typescript transpiler
Babel	babel	JS Transpiler
Rollup	rollup	A newer Javascript packager
Webpack	webpack	An older Javascript packager, but used by Gatsby and Storybook

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

Name	NPM	Description
Jest	jest	Unit Test Framework with Code Coverage tool
React Testing Library	@testing-library/react	React Component Testing
BackstopJS	backstopjs	Visual regression testing for components
Cypress	cypress / cypress-cucumber-preprocessor	Behavioral testing framework with Gherkin/Cucumber features. ** This has been put on hold for now **
Pa11y	pa11y-ci	Accessibility Testing. (This is only running against the example site for now until we setup storybook-pa11y)

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
Storybook React	@storybook/react	React version of Storybook for testing React components

Name	NPM	Description
Twig	twig	Twig template parser used by storybook and Gatsby that is used to generate component HTML in order to keep HTML in sync.

The static site generation uses Gatsby (version 5 as of 9/11/2024). However, Gatsby is made up of many different packages.

Name	NPM	Description
Gatsby	gatsby	The main Gatsby package for static site publishing
Gatsby Image Processing	gatsby-plugin-sharp gatsby-transformer-sharp	This uses the Sharp library to transform image files and make them usable within content
Gatsby Filesystem Source Plugin	gatsby-source-filesystem	This finds files on the file system and ingests the content (usually using another plugin)
Gatsby MDX plugin	gatsby-plugin-mdx	This allows us to write our documentation using MDX, which is Markdown with React
Gatsby Image Remark Plugin	gatsby-remark-images	This is a Remark plugin for gatsby-plugin-mdx to handle images in our markdown content
Gatsby Sass plugin	gatsby-plugin-sass	You know – for Sass!
PrismJS	prismjs and prism-react-renderer	Code syntax highlighting for code examples
Github Slugger	github-slugger	Allows for unique ids for <h*> headings using the text of the headings.
Remark Github Flavored Markdown (GFM) plugin	remark-gfm	It does what it says, it allows us to use GFM (which means table support) in our markdown files.