Creating a component

Bits you need to add a component to the design system

So you're looking to create a new component for the design system? If you haven't used them before, Lerna and the monorepo structure can be a bit intimidating at first so this guide will hopefully just give you the bits you need.

Scaffold your component

There are three ways to do this. You can either:

  • Copy an existing component and go through systematically renaming everything (MOST POPULAR), or
  • Create the folder and npm init a new package yourself inside a new component folder, or
  • use the lerna create command which will do the basic scaffolding for you.

Either way, the structure you want to end up with is roughly this:

Info!

A checklist of parts that make up one of our components would look like this:

  • package.json
  • Component
  • Types
  • Tests
  • Stories
  • Documentation page (stub it out at least)
  • readme.md
Once you've scaffolded your component, you need to do a few bits to get the rest of the design system packages aware of it.

There are two ways to do this. You can either:

  • Manually add your new component as a dependency to the packages/docs, packages/storybook, packages/dev-app and components/design-system packages and run npm run bootstrap from the root to link everything together, or
  • Use the lerna add command to add the dependency one by one as you need to.

Whichever way you go you need to remember to add any SCSS dependency to the design-system SCSS imports! otherwise it won't get rolled into the package that gets built and deployed to the CDN, and the non-React CMS won't be able to use it.

Either way, when you're done, you should be able to import your new component into the documentation, Storybook, or dev-app packages as expected.

        import { MyComponent } from "@nice-digital/nds-my-component";

Coming soon

Looking at details of a component's:

  • Types
  • Stories
  • Tests
  • Docs
  • Readme
  • Package.json