# tlm-stencil

> Component Library using Figma's design tokens

Latest version **0.0.16** (published 2022-12-09) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tlm-stencil
pnpm add tlm-stencil
yarn add tlm-stencil
bun add tlm-stencil
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.16 |
| Published | 2022-12-09 |
| First published | 2022-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 533.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fuasmattn, m-m-mic |

## Links

- npm: https://www.npmjs.com/package/tlm-stencil
- Repository: https://github.com/MaibornWolff/tlm-components
- Homepage: https://github.com/MaibornWolff/tlm-components#readme
- Issues: https://github.com/MaibornWolff/tlm-components/issues
- npm.io page: https://npm.io/package/tlm-stencil

## Dependencies (7)

- [prettier](https://npm.io/package/prettier.md) ^2.7.1
- [@emotion/css](https://npm.io/package/@emotion/css.md) ^11.10.0
- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.13.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.4
- [@stencil/vue-output-target](https://npm.io/package/@stencil/vue-output-target.md) ^0.6.2
- [@stencil/react-output-target](https://npm.io/package/@stencil/react-output-target.md) ^0.3.1
- [@stencil/angular-output-target](https://npm.io/package/@stencil/angular-output-target.md) ^0.4.0

## Recent versions

- 0.0.16 (latest) — 2022-12-09
- 0.0.15 — 2022-12-09
- 0.0.14 — 2022-10-12
- 0.0.13 — 2022-10-06
- 0.0.12 — 2022-10-06
- 0.0.11 — 2022-10-06
- 0.0.10 — 2022-10-06
- 0.0.3 — 2022-10-06
- 0.0.2 — 2022-08-25
- 0.0.1 — 2022-08-25

## README

[![npm](https://img.shields.io/npm/v/tlm-stencil?color=blue)](https://www.npmjs.com/package/tlm-stencil)

# The Liberation Machine - Stencil

`tlm-stencil` houses the component library of the Liberation Machine and is built using [StencilJs](https://stenciljs.com/). 
Stencil provides WebComponents as well as framework-specific integrations to leverage usage of WebComponents in React, Vue and Angular.

### Creation

To create new components, run:

```bash
npm run generate
```

Alternatively you can manually create components by adding them to `src/components`.

Custom Element names are written in kebab-case, prefixed with `tlm-` (e.g. `tlm-button`).

### Structure

Name, stylesheet and whether a shadow-dom should be created is defined within `@component`.

Individual props get defined within by using `@Prop()`,
followed by the name of the prop and its type or the default value.
Operators such as `!` or `?` can be used to mark a prop as optional or required.

The HTML structure of the component is defined within the `render()` function. You can define `slots`
which can be inserted into the component.

### Testing

To run the unit tests for the components, run:

```bash
npm test
```

Check stencil docs [here](https://stenciljs.com/docs/my-first-component) for additional help.

---
_Source: https://npm.io/package/tlm-stencil · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._