@veritone-ce/design-system

Veritone CE Design System

Welcome to the Veritone CE Design System. This project uses Storybook to preview components.\

Getting Started

Type the following commands into the terminal.

yarn

yarn start

Available Scripts

In the project directory, you can run:

yarn start

Runs storybook in development mode. Opens storybook in a new browser tab.

yarn test

Launches the test runner. See the section about running tests for more information.

yarn build

Builds the for production to the dist folder.

yarn build-storybook

Builds storybook for production to the storybook-static folder.

yarn build-docs

Builds the documentation for production to the storybook-static folder.

Learn More

You can learn more in the Storybook Design System for Developers. Chromatic

To learn React, check out the React documentation.

Using yalc to Develop Design System Locally

Why use yalc?

• Rapid iteration: Publish changes to your design system locally without going through a full release cycle.
• Isolation: Maintain a separate local copy of Design System, preventing conflicts with other projects.

Steps

• Publish Design System locally

  In this repo, run:

  yarn publish:local
  

  • If this is your first time, you may need be prompted to install yalc, proceed with y to install it.

  This will create a local version of Design System in your yalc directory.

• Add Design System to your consuming project

  In your consuming project, run:

  npx yalc add @veritone-ce/design-system
  

  • This will replace the @veritone-ce/design-system in the package.json with the local version.

• Use Design System in consuming project

  Import components or use Design System's API as you would normally.

Unlinking Design System with Yalc

If you need to unlink Design System from your consuming project, run:

npx yalc remove @veritone-ce/design-system

This will remove the local link and revert to the version specified in your package.json.

Important: You must unlink your local builds before you commit your code.

Important notes

• Updating Design System: When you make changes to Design System and publish it locally again, you'll need to run npx yalc update @veritone-ce/design-system in your consuming project to get the latest version.

Additional Tips

For more advanced usage, refer to the yalc documentation: https://www.npmjs.com/package/yalc