Repos Packages Organization - NCIOCPL/ncids GitHub Wiki

Design System Repos, Packages and Publishing

Repository: ncids

This is the main NCI Design System repository and contains the CSS, React Components and documentation web site. This is a monorepo using Lerna to manage the sub-packages. This is being setup as a Lerna monorepo in order to help with dependency management, easier issue tracking, allowing cross package updates in a single commit and easier versioning.

ncids-css

This is the main CSS. This is the basis for all NCI Design System implementations, e.g. React, VanillaJS, etc. The npm package will be published to the NCIOCPL organization's GitHub registry. The storybook output will be published to a subdirectly under the designsystem.cancer.gov site. This repository depends on the USWDS package.

There are 3 use cases for this lerna package:

  1. The ncids-css published as a minified CSS file to a CDN so that simple sites can include the css file directly in their HTML.
  2. Installing the npm package locally and just pulling in all the CSS
  3. Installing the npm package locally and using the SASS partials directly in other projects to selectively import needed items. (Such as what we may do in other packages)

ncids-js

This is the implementation for VanillaJS components. Any site/application built using these components must also include ncids-css. The npm package will be published to the NCIOCPL organization's GitHub registry. The storybook output will be published to a subdirectly under the designsystem.cancer.gov site.

There are 2 use cases for this lerna package:

  1. The ncids-js published as a minified js file to a CDN (along with unminified or with source maps?) so that simple sites can include the js file directly in their HTML.
  2. Installing the npm package and importing the various modules individually as needed. (See the note below as to how this may change)

NOTE: We are currently discussing if this should be a sub-lerna and each individual component should be its own lerna/npm package. This way you only npm install those packages you need. If this occurs, we would still keep this package for those without build systems they could still download the entire JS collection.

ncids-react

Note

For the foreseeable future there will not be a ncids-react package.

This is the implementation for React components. The npm package will be published to the NCIOCPL organization's GitHub registry. Any site/application built using these components must also include ncids-css. The storybook output will be published to a subdirectly under the designsystem.cancer.gov site.

NOTE: We are currently discussing if this should be a sub-lerna and each individual component should be its own lerna/npm package. This way you only npm install those packages you need. If this occurs, we would most likely remove this package. (Although we may keep it to easily publish out the Storybook files from all of the sub-packages)

docs

This is a Gatsby generated site containing the guidance, background, and technical information for the elements of the design system. Documentation should cover overall CSS, VanillaJS and React components. Documentation pages will be written in MDX (Markdown + JSX Components) format. The web site will be published to the future designsystem.cancer.gov.

Repository: ncids-drupal-theme-base

This is a Drupal 8 base theme that uses the css & vanilla js packages and provides common field templates and blocks. This is not contained in the monorepo. This will parallel the USWDS Drupal base theme in its setup.

⚠️ **GitHub.com Fallback** ⚠️