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 - Portal](https://www.radix-ui.com/primitives/docs/utilities/portal)
- [Radix UI - Radio-Group](https://www.radix-ui.com/primitives/docs/components/radio-group)
- [React Remove Scroll](https://www.npmjs.com/package/react-remove-scroll?activeTab=readme)

### 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/typography.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
```

## Figma download icons

```yaml
FIGMA_TOKEN
FIGMA_FILE_ID
FIGMA_NODE_ID
```

FIGMA_TOKEN: Your Figma personal access token. file_content:read & file_metadata:read
FIGMA_FILE_ID: The ID of the Figma file containing the icons.
FIGMA_NODE_ID: The ID of the node (e.g., a frame or group) containing the icons. format is 1111:111 and not 1111-111