The Liberation Machine - Component Library

A web component library which uses Figma's token plugin to create easily modifiable design systems.

Related Docs

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

The Design System Pipeline

All the Components are developed based on the TLM 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 WebComponent.

You can find all relevant build steps in the GitHub Workflow.

Publishing and usage in frameworks

NOT YET PUBLISHED

0. Versioning

Prior to publishing every update needs to be versioned based on these guidelines:

All tlm packages need to be on the same version, meaning if tlm-stencil's version increases the versions of tlm-react, tlm-vue and tlm-angular need to be updated as well.

1. Publish WebComponent Library

To convert the component library into an NPM package, run:

npm run build

Then, publish to NPM by running:

npm version major | minor | patch
npm publish

2. Publish framework-specific WebComponent Libraries

Perform step 1) and update version of tlm-components in tlm-react.

# in framework-specific directory, e.g. tlm-react
npm run build

Then, publish to NPM by running:

# in framework-specific directory, e.g. tlm-react
npm version major | minor | patch
npm publish

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 TLM Components accordingly:

npm i tlm-react     # in React

npm i tlm-vue       # in Vue

npm i tlm-angular   # in Angular

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

Alternative: Import pure WebComponents

To install the library within the chosen framework, run:

npm i tlm-stencil

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

import { defineCustomElements } from "tlm-stencil/loader";
defineCustomElements(window);

All available components should now be usable within the framework.