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