A template for creating design systems with Storybook.

Built with the following:

• Babel v7
• Storybook v6
• Webpack v5

After downloading this repository, install all the package dependencies:

npm install

Most of the dependencies are only used to develop or compile code and will not be included in the final bundle.

There are a few different build scripts included in this project.

Build the static files for distribution (potentially as an NPM package):

npm run build

Create the SVG icon sprite based on the icon files located in ./src/assets/svg:

npm run build-icons

Build the Storybook library as a static site deployable to a server:

npm run build-storybook

Generate the Sass variables and mixins based off the design token system:

npm run build-tokens

Generate template files for a new component using PlopJS

npm run generate component-name

Build components in the Storybook development environment:

npm start

This will open your browser at http://localhost:6006

Lint and format code to standard conventions:

npm run lint

This runs the code through ESlint, Stylelint, and Prettier.

The default "tsl-" classname prefix can be updated with a script:

npm run prefix <NEW_PREFIX>

To get a new project up and running, first install the Think Company Application Starter CLI.

Once you have the CLI tool installed, follow these steps to be up and running in under two minutes:

1. think new-library
2. cd <PROJECT_NAME>
3. npm install
4. npm run prefix <NEW_PREFIX>
5. npm start