Skip to content

Lab49 TechTalk: Creating, Using, and Maintaining a Design System

Notifications You must be signed in to change notification settings

lab49/tech-talk-design-systems

Repository files navigation

Lab49 TechTalk: Creating, Using, and Maintaining a Design System

This is a companion repository to the Lab49 tech talk of the same name.

There is a video recording of the talk on YouTube. Further discussion can be found at LinkedIn.


The purpose of this codebase is to illustrate what's possible when using Storybook to maintain a living style guide.

There are a handful of React components that are in the src/components directory, and all of those components have Stories co-located with them. There are also other stories in the stories directory, that do not map 1:1 with components. These stories are style guide stories, and demonstrate globally available styles.

Most components have Sass files co-located with them as well, but there are more global styles including mixins and variables in the src/styles directory.

Getting started

  1. Clone this repository
  2. npm install
  3. npm start

The start script will start up Storybook locally.

Development

Scripts

Name Purpose
ci Run all tasks for a CI pipeline
lint Run eslint
start Start up Storybook
storybook Also starts up Storybook
stylelint Run Stylelint
test Runs tests
types Run Typescript, but don't emit any files