@monkey-mini-app/ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -0
- package/dist/globals.css +1 -1
- package/dist/manifest.json +3 -3
- package/dist/src/blocks/bar-chart.tsx +4 -1
- package/dist/src/blocks/donut-chart.tsx +12 -2
- package/dist/src/blocks/gauge.tsx +22 -6
- package/dist/src/blocks/progress-ring.tsx +13 -2
- package/dist/src/blocks/radar-chart.tsx +11 -1
- package/dist/src/blocks/sparkline.tsx +5 -3
- package/dist/src/styles/globals.css +6 -7
- package/package.json +5 -2
package/README.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# @monkey-mini-app/ui
|
|
2
|
+
|
|
3
|
+
`react` component library for mini-apps. **It's a reference / convenience, not a spec** —
|
|
4
|
+
use it to save reimplementing common components (tables, forms, charts, dialogs, editors),
|
|
5
|
+
but you're free to build custom UI with raw HTML elements + Tailwind classes instead
|
|
6
|
+
(and the two mix freely). It's the **only** UI **package** a mini-app may import.
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
pnpm add @monkey-mini-app/ui
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## The base stylesheet
|
|
15
|
+
|
|
16
|
+
The Tailwind theme, tokens and component styles live in a single `globals.css` subpath
|
|
17
|
+
export. It is the app/base stylesheet served by the host:
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
@import "@monkey-mini-app/ui/globals.css";
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
It carries the `@theme` tokens (`--primary`, `--background`, …), the `dark` custom
|
|
24
|
+
variant, Geist/TW-Animate/shadcn layers and the repo-scanned utilities. Theme tokens
|
|
25
|
+
survive so light/dark + palettes keep working.
|
|
26
|
+
|
|
27
|
+
## What it exports
|
|
28
|
+
|
|
29
|
+
- **Components** — shadcn-style primitives (`Button`, `Card`, `Dialog`, `DataGrid`, …) in
|
|
30
|
+
`components/`, `composites/` and `products/`.
|
|
31
|
+
- **Blocks** — higher-level page blocks (`StatCard`, `RadarChart`, `PageHeader`,
|
|
32
|
+
`ActivityFeed`, `Terminal`, …) in `blocks/`.
|
|
33
|
+
- **`Icon`** — namespace re-export of `lucide-react`, so you write
|
|
34
|
+
`import { Icon } from "@monkey-mini-app/ui"` then `<Icon.HelpCircle />`. Do **not**
|
|
35
|
+
import `lucide-react` directly.
|
|
36
|
+
- **`Illu*`** — empty-state / illustration SVG scenes (`IlluEmpty`, `IlluAccessDenied`,
|
|
37
|
+
…). Accent and grayscale are tokenized (`--primary`, `--muted`) — no hard-coded hex.
|
|
38
|
+
- **`cn`** — the `clsx` + `tailwind-merge` classname helper (`lib/utils`).
|
|
39
|
+
|
|
40
|
+
## Build & contract
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
node scripts/build-ui.mjs # → dist (flat named re-exports + compiled globals.css)
|
|
44
|
+
pnpm skill:gen # sync the component contract into the ui skill
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Constraints:
|
|
48
|
+
|
|
49
|
+
- The dist `index.js` must stay a **flat named re-export** (the ui-compiler only
|
|
50
|
+
understands these). Rebuild after changing export names.
|
|
51
|
+
- Mini-apps may only import `react`, `@monkey-mini-app/ui`, `@monkey-agent/host` and
|
|
52
|
+
relative `./lib`. No other npm packages (there is no `node_modules` in a runtime app).
|