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

Core Technologies

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

Development & Configuration

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

Installation

pnpm install 
pnpm storybook

Component usage

import { Badge } from "sate-lib";

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

Tree shakable

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

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

Optional CSS imports

import from "sate-lib/reset.css";
import from "sate-lib/tokens.css";
import from "sate-lib/typography.css";

Commit etiquette

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

Version Triggering

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.

Run the Font Subset Script

pnpm subset

Figma download icons

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

CHROMATIC_PROJECT_TOKEN