Groove Storybook Design System

Groove Storybook Design System (SDS) is a reusable component library that helps developers build Groove branded, consistent UIs faster. It's an SSOT (single source of truth) for all UI components used across various Groove applications.

Running and developing SDS locally

Clone the Groove SDS project, then start storybook to preview available components and develop locally:

yarn
yarn start

The storybook will be running at: http://localhost:9009

To avoid NPM package release process and test things locally in your application:

yarn build-pkg
yarn link

# In your app:
yarn link "@groovehq/design-system"

Building and deploying

To build and preview static version of the storybook, run:

yarn build

To deploy storybook:

bundle install
yarn deploy

Releasing a new version

Every time you want to release a new version of Groove SDS, run:

yarn login
yarn release

Note:

We use auto to generate a changelog and push it to GitHub. In order for this to work correctly, an environment variable called GH_TOKEN is needed that references a GitHub personal access token with the appropriate permissions to update the repo.

Using in your application

To use Groove Storybook Design System (SDS) in your React applications, follow the storybook Design System > Getting Started Guide.

Resources

• Intro to Storybook
• Design System for Developers
• Component Story Format
• Storybook Docs
• Original Storybook Design System