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.
| Environment | URL | Description |
|---|---|---|
| Dev | https://maibornwolff.github.io/mwui-dev | Reflects the current state of the main branch and updates automatically with changes in Figma. |
| Prod | https://maibornwolff.github.io/mwui | Reflects the state released on npm. |
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.
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.
- components are tested
- components are represented in Storybook
- components are documented (e.g. storybook mdx doc)
- components are reviewed together with design team
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).
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 |  |
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-stencilFor more info on the individual wrappers, check out the React, Vue or Angular documentation.
To install the library within the chosen framework, run:
npm install @maibornwolff/mwui-stencilInclude 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);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.