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.
npm install sate-libA 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.
- React
- Typescript
- Storybook
- CSS Modules
- Radix UI - Portal
- Radix UI - Radio-Group
- React Remove Scroll
- RSLib
- RSTest
- Chromatic
- React Testing Library
- Biome
- Husky
- Commit Lint
- Semantic Release
- Subset Font
- SVGO
``bash`
pnpm install
pnpm storybook
`bash
import { Badge } from "sate-lib";
function App() {
return
}
`
`bash
import { Badge } from "sate-lib/Badge";
function App() {
return
}
`
`bash`
import from "sate-lib/reset.css";
import from "sate-lib/tokens.css";
import from "sate-lib/typography.css";
`bash`
[build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] : message
`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 | |
Optimize and subset fonts using the subset-fonts.js script to reduce file size and improve loading performance.
`bash`
pnpm subset
`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
`yaml``
CHROMATIC_PROJECT_TOKEN