SATE - Design System

A lightweight and modular React component library designed for modern web interfaces.
SATE Lib powers the sate.menu platform with reusable, scalable, and themeable UI components.

- Demo
- NPM

Tech Stack

$3

- React
- Typescript
- Storybook
- CSS Modules
- Radix UI - Portal
- Radix UI - Radio-Group
- React Remove Scroll

$3

- RSLib
- RSTest
- Chromatic
- React Testing Library
- Biome
- Husky
- Commit Lint
- Semantic Release
- Subset Font
- SVGO

Installation

``bash
pnpm install
pnpm storybook
`

Component usage

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

function App() {
return New;
}
`

Tree shakable

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

function App() {
return New;
}
`

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
`

$3

`yaml
GH_TOKEN
NPM_TOKEN
`

GH_TOKEN - needs repo and worflow access
NPM_TOKEN - needs read and write access

| 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.

$3

`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

Chromatic setup

`yaml
CHROMATIC_PROJECT_TOKEN
``