vega-design-system

Rehau Storybook Design System (SDS) is a reusable component library that helps developers Vue build Rehau branded

Tech stack

Building components

• 📚 Storybook for UI component development
• 💚 Vue declarative component-centric UI
• 🗃️ rollup-plugin-vue

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library.

Maintaining the system

• 📦 NPM for packaging and distribution
• ✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)

Installation

Clone the vega-design-system project, then start storybook to preview available components and develop locally:

Install the dependencies and devDependencies and start the server.

yarn
yarn storybook

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

Start Vue project for developing

yarn serve

The local will be running at: http://localhost:8080/

Chromatic

To show your changes to git branch in Chromatic

yarn chromatic

Usage Of Components Built

As Component

  import { DsButton } from 'rehau-eae-vega-ds';
  ...
  components:{
    DsButton
  }

As Plugin

  import rehauDs from 'rehau-eae-vega-ds';
  ...
  app.use(rehauDs);

Use css

  import 'rehau-eae-vega-ds/dist/vega-design-system.min.css';

License

MIT