sate-lib/README.md

A lightweight and modular React component library designed for modern web interfaces. **SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.

# SATE - Design System

A lightweight and modular React component library designed for modern web interfaces.  
**SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.

- [Demo](https://sate-lib.vercel.app/)
- [NPM](https://www.npmjs.com/package/sate-lib)

## Tech Stack

#### Core Technologies

- [React](https://react.dev/)
- [Typescript](https://www.typescriptlang.org/)
- [Storybook](https://storybook.js.org/)
- [CSS Modules](https://github.com/css-modules/css-modules)
- [Radix UI](https://www.radix-ui.com/)

#### Development & Configuration

- [RSLib](https://rslib.rs/)
- [Biome](https://biomejs.dev/)
- [Husky](https://typicode.github.io/husky/)
- [Commit Lint](https://commitlint.js.org/)
- [Semantic Release](https://github.com/semantic-release/semantic-release)
- [Subset Font](https://www.npmjs.com/package/subset-font)
- [SVGO](https://svgo.dev/docs/introduction/)

## Installation

```bash
  pnpm install
  pnpm storybook
```

## Component usage

```bash
import { Badge } from "sate-lib";

function App() {
  return <Badge>New</Badge>;
}
```

## Tree shakable

```bash
import { Badge } from "sate-lib/Badge";

function App() {
  return <Badge>New</Badge>;
}
```

## Optional CSS imports

```bash
import from "sate-lib/reset.css";
import from "sate-lib/tokens.css";
import from "sate-lib/fonts.css";
```

## Commit etiquette

```bash
  [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] : message
```

#### Version Triggering

| Commit Type       | Release Type         | Version Bump Example |
| ----------------- | -------------------- | -------------------- |
| `feat`            | Minor release        | 1.1.0 → 1.2.0        |
| `fix`             | Patch release        | 1.1.0 → 1.1.1        |
| `BREAKING CHANGE` | Major release        | 1.1.0 → 2.0.0        |
| `chore`           | No release triggered |                      |
| `docs`            | No release triggered |                      |
| `style`           | No release triggered |                      |
| `refactor`        | No release triggered |                      |
| `test`            | No release triggered |                      |

## Fonts compression

Optimize and subset fonts using the `subset-fonts.js` script to reduce file size and improve loading performance.

#### Run the Font Subset Script

```bash
pnpm subset
```