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.
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"
To build and preview static version of the storybook, run:
yarn build
To deploy storybook:
bundle install
yarn deploy
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.
To use Groove Storybook Design System (SDS) in your React applications, follow the storybook Design System > Getting Started Guide.