https://github.com/maibornwolff/mwui
Storybook (dev): https://maibornwolff.github.io/mwui-dev
https://github.com/maibornwolff/mwui
angular component-library components design-system react stencil storybook vue web-components
Last synced: 8 days ago
JSON representation
Storybook (dev): https://maibornwolff.github.io/mwui-dev
- Host: GitHub
- URL: https://github.com/maibornwolff/mwui
- Owner: MaibornWolff
- License: mit
- Created: 2022-08-16T12:10:23.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-21T09:52:20.000Z (4 months ago)
- Last Synced: 2025-04-19T21:51:37.553Z (13 days ago)
- Topics: angular, component-library, components, design-system, react, stencil, storybook, vue, web-components
- Language: TypeScript
- Homepage: https://maibornwolff.github.io/mwui
- Size: 30.2 MB
- Stars: 9
- Watchers: 5
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# The Liberation Machine - Component Library
[](https://www.npmjs.com/package/@maibornwolff/mwui-stencil)
[](https://maibornwolff.github.io/mwui-dev)
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
| 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](https://www.npmjs.com/search?q=%40maibornwolff%2Fmwui). |
## 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](mwui-token-farm/README.md) module transforms any changes in the Design Tokens into Style Dictionary outputs which are linked to the respective Web Component.
## Related Docs
- [Token-Farm](mwui-token-farm/README.md)
- [Stencil Library](mwui-stencil/README.md)
- [React Library](mwui-react/README.md)
- [Vue Library](mwui-vue/README.md)
- [Angular Library](mwui-angular/README.md)
- [Setup Figma Token Plugin](token-plugin.md)
## 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](https://github.com/orgs/MaibornWolff/projects/4/views/1) 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](https://github.com/MaibornWolff/mwui/blob/main/mwui-stencil/src/components/mw-button/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](./release.md).
| Package | Status |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| @maibornwolff/mwui-stencil | [](https://www.npmjs.com/package/@maibornwolff/mwui-stencil) |
| @maibornwolff/mwui-token-farm | [](https://www.npmjs.com/package/@maibornwolff/mwui-token-farm) |
| @maibornwolff/mwui-react | [](https://www.npmjs.com/package/@maibornwolff/mwui-react) |
| @maibornwolff/mwui-vue | [](https://www.npmjs.com/package/@maibornwolff/mwui-vue) |
| @maibornwolff/mwui-angular | [](https://www.npmjs.com/package/@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:
```bash
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](mwui-react/README.md), [Vue](mwui-vue/README.md) or [Angular](mwui-angular/README.md) documentation.
### Use as Web Components
To install the library within the chosen framework, run:
```bash
npm install @maibornwolff/mwui-stencil
```
Include the following in the `main.js` (e.g. Angular, Vue) or `index.js` (e.g. React):
```JavaScript
import { defineCustomElements } from "@maibornwolff/mwui-stencil/loader";
defineCustomElements(window);
```
### Styling
To ensure CSS variables are available, import the global stylesheet in your Application root.
```javascript
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.