The Liberation Machine - Component Library

A web component library as part of the MW Design System project The Liberation Machine. Using Figma Token Studio plugin, we create modifiable Design Systems connected to a ready-to-use Web Component Library.

Storybook

The Design System Pipeline

All the Components are developed based on the mwui Design System in Figma. We use Design Tokens to version and synchronize design decisions between the Design and the WebComponents.

The Token-Farm module transforms any changes in the Design Tokens into Style Dictionary outputs which are linked to the respective Web Component.

Related Docs

• Token-Farm
• Stencil Library
• React Library
• Vue Library
• Angular Library
• Setup Figma Token Plugin

Contributing

Note

Adding a new Web Component should always be discussed with the Design Team to have the right Tokens and Designs in place. We prefer component-specific tokens over semantic or core tokens. Missing tokens are discussed with Design Team.

We use Github Projects to organize tasks and issues linked to this Repository.

Follow this checklist to comply with our definition of done.

• [x] components are tested
• [x] components are represented in Storybook
• [x] components are documented (e.g. storybook mdx doc)
• [x] components are reviewed together with design team

Documentation

A stencil component ideally is created using the CLI command npm run generate inside the mwui-stencil directory. Each component should be represented in various states and variants in a Storybook *.stories.ts file. If there is more complex documentation needed, both a stories file and a customized *.docs.mdx file (e.g. mw-button.docs.mdx) can and should be provided.

To further improve automated component docs, make sure to correctly type Properties and provide comments to each prop (those will show up in the Storybook ArgTypes in addition to the default output generated).

Build & Release Libraries

We maintain several packages, including the core (mwui-stencil), token transformation and framework specific component libraries. Learn more about the build and release process.

Package	Status
@maibornwolff/mwui-stencil
@maibornwolff/mwui-token-farm
@maibornwolff/mwui-react
@maibornwolff/mwui-vue
@maibornwolff/mwui-angular

Usage in React, Vue and Angular

To leverage the usage of our WebComponents we provide framework-specific wrappers for React, Vue and Angular. You can install and use the mwui Components accordingly:

npm install @maibornwolff/mwui-react # in React
npm install @maibornwolff/mwui-vue # in Vue
npm install @maibornwolff/mwui-angular # in Angular

# you might also need the core package to have access to global stylings, see [React](mwui-react/README.md) for more information.
npm install @maibornwolff/mwui-stencil

For more info on the individual wrappers, check out the React, Vue or Angular documentation.

Use as Web Components

To install the library within the chosen framework, run:

npm install @maibornwolff/mwui-stencil

Include the following in the main.js (e.g. Angular, Vue) or index.js (e.g. React):

import { defineCustomElements } from "@maibornwolff/mwui-stencil/loader";
defineCustomElements(window);

Styling

To ensure CSS variables are available, import the global stylesheet in your Application root.

import "@maibornwolff/mwui-stencil/dist/mwui-stencil/mwui-stencil.css";

The CSS variables are used within the Web Components and you can also refer to them styling your own layout and elements.