@parto-system-design/ui 1.1.5 → 1.1.7
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/AGENTS.md +233 -0
- package/LICENSE +21 -0
- package/README.md +96 -43
- package/dist/chunk-2UD3LGVX.cjs +316 -0
- package/dist/chunk-2UD3LGVX.cjs.map +1 -0
- package/dist/chunk-34JUCX2G.cjs +43 -0
- package/dist/chunk-34JUCX2G.cjs.map +1 -0
- package/dist/chunk-3AIJKXBV.cjs +242 -0
- package/dist/chunk-3AIJKXBV.cjs.map +1 -0
- package/dist/chunk-4SVQNEVH.js +173 -0
- package/dist/chunk-4SVQNEVH.js.map +1 -0
- package/dist/chunk-53QY4PD3.js +908 -0
- package/dist/chunk-53QY4PD3.js.map +1 -0
- package/dist/chunk-5JJSRGJD.js +31 -0
- package/dist/chunk-5JJSRGJD.js.map +1 -0
- package/dist/chunk-5K6E4ZSW.cjs +77 -0
- package/dist/chunk-5K6E4ZSW.cjs.map +1 -0
- package/dist/chunk-5NY26ULO.js +89 -0
- package/dist/chunk-5NY26ULO.js.map +1 -0
- package/dist/chunk-7RVPG3LE.cjs +231 -0
- package/dist/chunk-7RVPG3LE.cjs.map +1 -0
- package/dist/chunk-7Y4V3R3Y.cjs +120 -0
- package/dist/chunk-7Y4V3R3Y.cjs.map +1 -0
- package/dist/chunk-AXAY64KL.js +39 -0
- package/dist/chunk-AXAY64KL.js.map +1 -0
- package/dist/chunk-AYEK3WOM.js +207 -0
- package/dist/chunk-AYEK3WOM.js.map +1 -0
- package/dist/chunk-BRMBLIQG.js +53 -0
- package/dist/chunk-BRMBLIQG.js.map +1 -0
- package/dist/chunk-CAJKSTXX.cjs +54 -0
- package/dist/chunk-CAJKSTXX.cjs.map +1 -0
- package/dist/chunk-CKFWMHQU.js +401 -0
- package/dist/chunk-CKFWMHQU.js.map +1 -0
- package/dist/chunk-CV3N3HVK.js +672 -0
- package/dist/chunk-CV3N3HVK.js.map +1 -0
- package/dist/chunk-D2EBLE2B.cjs +220 -0
- package/dist/chunk-D2EBLE2B.cjs.map +1 -0
- package/dist/chunk-D5XCQDFS.js +92 -0
- package/dist/chunk-D5XCQDFS.js.map +1 -0
- package/dist/chunk-GDHRYKVM.js +45 -0
- package/dist/chunk-GDHRYKVM.js.map +1 -0
- package/dist/chunk-GKRAZGDI.cjs +84 -0
- package/dist/chunk-GKRAZGDI.cjs.map +1 -0
- package/dist/chunk-HEYMLQOV.cjs +94 -0
- package/dist/chunk-HEYMLQOV.cjs.map +1 -0
- package/dist/chunk-HF6XU5NI.js +84 -0
- package/dist/chunk-HF6XU5NI.js.map +1 -0
- package/dist/chunk-HJPDZOMJ.cjs +87 -0
- package/dist/chunk-HJPDZOMJ.cjs.map +1 -0
- package/dist/chunk-HUCC3QH5.cjs +53 -0
- package/dist/chunk-HUCC3QH5.cjs.map +1 -0
- package/dist/chunk-HYZ6BQPS.cjs +425 -0
- package/dist/chunk-HYZ6BQPS.cjs.map +1 -0
- package/dist/chunk-IQHKJ4SS.js +213 -0
- package/dist/chunk-IQHKJ4SS.js.map +1 -0
- package/dist/chunk-ISCSZMYW.cjs +106 -0
- package/dist/chunk-ISCSZMYW.cjs.map +1 -0
- package/dist/chunk-IXFEFIDO.js +82 -0
- package/dist/chunk-IXFEFIDO.js.map +1 -0
- package/dist/chunk-JUBHQAA2.js +53 -0
- package/dist/chunk-JUBHQAA2.js.map +1 -0
- package/dist/chunk-KCWRCSI7.js +62 -0
- package/dist/chunk-KCWRCSI7.js.map +1 -0
- package/dist/chunk-L2L5CKC2.js +291 -0
- package/dist/chunk-L2L5CKC2.js.map +1 -0
- package/dist/chunk-LLJR7FV3.js +135 -0
- package/dist/chunk-LLJR7FV3.js.map +1 -0
- package/dist/chunk-LZMCMZZF.js +118 -0
- package/dist/chunk-LZMCMZZF.js.map +1 -0
- package/dist/chunk-M5CHZ5BA.js +124 -0
- package/dist/chunk-M5CHZ5BA.js.map +1 -0
- package/dist/chunk-MBCTRNTG.js +89 -0
- package/dist/chunk-MBCTRNTG.js.map +1 -0
- package/dist/chunk-MEK4RSGC.js +65 -0
- package/dist/chunk-MEK4RSGC.js.map +1 -0
- package/dist/chunk-MFTX2DDQ.js +27 -0
- package/dist/chunk-MFTX2DDQ.js.map +1 -0
- package/dist/chunk-MKYVQQBV.cjs +114 -0
- package/dist/chunk-MKYVQQBV.cjs.map +1 -0
- package/dist/chunk-MQGQVI3W.cjs +950 -0
- package/dist/chunk-MQGQVI3W.cjs.map +1 -0
- package/dist/chunk-NEFZJHE4.cjs +157 -0
- package/dist/chunk-NEFZJHE4.cjs.map +1 -0
- package/dist/chunk-NEML6RCV.js +405 -0
- package/dist/chunk-NEML6RCV.js.map +1 -0
- package/dist/chunk-NV4JOKWL.cjs +197 -0
- package/dist/chunk-NV4JOKWL.cjs.map +1 -0
- package/dist/chunk-O2JG7WY5.cjs +121 -0
- package/dist/chunk-O2JG7WY5.cjs.map +1 -0
- package/dist/chunk-OEVMKFFL.cjs +140 -0
- package/dist/chunk-OEVMKFFL.cjs.map +1 -0
- package/dist/chunk-ONO2FTV4.cjs +68 -0
- package/dist/chunk-ONO2FTV4.cjs.map +1 -0
- package/dist/chunk-OS6CMYAS.cjs +79 -0
- package/dist/chunk-OS6CMYAS.cjs.map +1 -0
- package/dist/chunk-P5XHPNJG.cjs +430 -0
- package/dist/chunk-P5XHPNJG.cjs.map +1 -0
- package/dist/chunk-QJ7UB2ZQ.js +98 -0
- package/dist/chunk-QJ7UB2ZQ.js.map +1 -0
- package/dist/chunk-RA5KZNG5.js +269 -0
- package/dist/chunk-RA5KZNG5.js.map +1 -0
- package/dist/chunk-RJ3HYZ7S.js +44 -0
- package/dist/chunk-RJ3HYZ7S.js.map +1 -0
- package/dist/chunk-RZNRIOLT.js +128 -0
- package/dist/chunk-RZNRIOLT.js.map +1 -0
- package/dist/chunk-S5IPJQZ3.cjs +161 -0
- package/dist/chunk-S5IPJQZ3.cjs.map +1 -0
- package/dist/chunk-SB5DSYR5.js +211 -0
- package/dist/chunk-SB5DSYR5.js.map +1 -0
- package/dist/chunk-SCGW2BH4.cjs +69 -0
- package/dist/chunk-SCGW2BH4.cjs.map +1 -0
- package/dist/chunk-SCX6AR53.cjs +108 -0
- package/dist/chunk-SCX6AR53.cjs.map +1 -0
- package/dist/chunk-SFXV2DUH.js +106 -0
- package/dist/chunk-SFXV2DUH.js.map +1 -0
- package/dist/chunk-SXEPGD4Z.cjs +152 -0
- package/dist/chunk-SXEPGD4Z.cjs.map +1 -0
- package/dist/chunk-SZMVOHT7.cjs +107 -0
- package/dist/chunk-SZMVOHT7.cjs.map +1 -0
- package/dist/chunk-U5FLLCGC.cjs +151 -0
- package/dist/chunk-U5FLLCGC.cjs.map +1 -0
- package/dist/chunk-VO3B75F6.cjs +111 -0
- package/dist/chunk-VO3B75F6.cjs.map +1 -0
- package/dist/chunk-YAJWTNOX.js +106 -0
- package/dist/chunk-YAJWTNOX.js.map +1 -0
- package/dist/chunk-YC5KLN6I.js +139 -0
- package/dist/chunk-YC5KLN6I.js.map +1 -0
- package/dist/chunk-YE477L2H.cjs +272 -0
- package/dist/chunk-YE477L2H.cjs.map +1 -0
- package/dist/chunk-Z2TY4A75.cjs +700 -0
- package/dist/chunk-Z2TY4A75.cjs.map +1 -0
- package/dist/chunk-Z56O7UEU.cjs +136 -0
- package/dist/chunk-Z56O7UEU.cjs.map +1 -0
- package/dist/chunk-ZZFNJR2E.js +71 -0
- package/dist/chunk-ZZFNJR2E.js.map +1 -0
- package/dist/components/charts/PartoAreaChart.cjs +15 -0
- package/dist/components/charts/PartoAreaChart.cjs.map +1 -0
- package/dist/components/charts/PartoAreaChart.d.cts +51 -0
- package/dist/components/charts/PartoAreaChart.d.ts +51 -0
- package/dist/components/charts/PartoAreaChart.js +6 -0
- package/dist/components/charts/PartoAreaChart.js.map +1 -0
- package/dist/components/charts/PartoBarChart.cjs +15 -0
- package/dist/components/charts/PartoBarChart.cjs.map +1 -0
- package/dist/components/charts/PartoBarChart.d.cts +55 -0
- package/dist/components/charts/PartoBarChart.d.ts +55 -0
- package/dist/components/charts/PartoBarChart.js +6 -0
- package/dist/components/charts/PartoBarChart.js.map +1 -0
- package/dist/components/charts/PartoLineChart.cjs +15 -0
- package/dist/components/charts/PartoLineChart.cjs.map +1 -0
- package/dist/components/charts/PartoLineChart.d.cts +49 -0
- package/dist/components/charts/PartoLineChart.d.ts +49 -0
- package/dist/components/charts/PartoLineChart.js +6 -0
- package/dist/components/charts/PartoLineChart.js.map +1 -0
- package/dist/components/charts/PartoPieChart.cjs +15 -0
- package/dist/components/charts/PartoPieChart.cjs.map +1 -0
- package/dist/components/charts/PartoPieChart.d.cts +44 -0
- package/dist/components/charts/PartoPieChart.d.ts +44 -0
- package/dist/components/charts/PartoPieChart.js +6 -0
- package/dist/components/charts/PartoPieChart.js.map +1 -0
- package/dist/components/ui/alert-rule-card.cjs +15 -0
- package/dist/components/ui/alert-rule-card.cjs.map +1 -0
- package/dist/components/ui/alert-rule-card.d.cts +38 -0
- package/dist/components/ui/alert-rule-card.d.ts +38 -0
- package/dist/components/ui/alert-rule-card.js +6 -0
- package/dist/components/ui/alert-rule-card.js.map +1 -0
- package/dist/components/ui/avatar.cjs +21 -0
- package/dist/components/ui/avatar.cjs.map +1 -0
- package/dist/components/ui/avatar.d.cts +18 -0
- package/dist/components/ui/avatar.d.ts +18 -0
- package/dist/components/ui/avatar.js +4 -0
- package/dist/components/ui/avatar.js.map +1 -0
- package/dist/components/ui/badge.cjs +17 -0
- package/dist/components/ui/badge.cjs.map +1 -0
- package/dist/components/ui/badge.d.cts +16 -0
- package/dist/components/ui/badge.d.ts +16 -0
- package/dist/components/ui/badge.js +4 -0
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/button.cjs +18 -0
- package/dist/components/ui/button.cjs.map +1 -0
- package/dist/components/ui/button.d.cts +37 -0
- package/dist/components/ui/button.d.ts +37 -0
- package/dist/components/ui/button.js +5 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/calendar.cjs +15 -0
- package/dist/components/ui/calendar.cjs.map +1 -0
- package/dist/components/ui/calendar.d.cts +17 -0
- package/dist/components/ui/calendar.d.ts +17 -0
- package/dist/components/ui/calendar.js +6 -0
- package/dist/components/ui/calendar.js.map +1 -0
- package/dist/components/ui/card.cjs +37 -0
- package/dist/components/ui/card.cjs.map +1 -0
- package/dist/components/ui/card.d.cts +18 -0
- package/dist/components/ui/card.d.ts +18 -0
- package/dist/components/ui/card.js +4 -0
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/concept-card.cjs +18 -0
- package/dist/components/ui/concept-card.cjs.map +1 -0
- package/dist/components/ui/concept-card.d.cts +5 -0
- package/dist/components/ui/concept-card.d.ts +5 -0
- package/dist/components/ui/concept-card.js +9 -0
- package/dist/components/ui/concept-card.js.map +1 -0
- package/dist/components/ui/data-table.cjs +18 -0
- package/dist/components/ui/data-table.cjs.map +1 -0
- package/dist/components/ui/data-table.d.cts +181 -0
- package/dist/components/ui/data-table.d.ts +181 -0
- package/dist/components/ui/data-table.js +9 -0
- package/dist/components/ui/data-table.js.map +1 -0
- package/dist/components/ui/dialog.cjs +49 -0
- package/dist/components/ui/dialog.cjs.map +1 -0
- package/dist/components/ui/dialog.d.cts +22 -0
- package/dist/components/ui/dialog.d.ts +22 -0
- package/dist/components/ui/dialog.js +4 -0
- package/dist/components/ui/dialog.js.map +1 -0
- package/dist/components/ui/filter-provider.cjs +20 -0
- package/dist/components/ui/filter-provider.cjs.map +1 -0
- package/dist/components/ui/filter-provider.d.cts +49 -0
- package/dist/components/ui/filter-provider.d.ts +49 -0
- package/dist/components/ui/filter-provider.js +3 -0
- package/dist/components/ui/filter-provider.js.map +1 -0
- package/dist/components/ui/input.cjs +22 -0
- package/dist/components/ui/input.cjs.map +1 -0
- package/dist/components/ui/input.d.cts +16 -0
- package/dist/components/ui/input.d.ts +16 -0
- package/dist/components/ui/input.js +5 -0
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/iran-province-heat.cjs +13 -0
- package/dist/components/ui/iran-province-heat.cjs.map +1 -0
- package/dist/components/ui/iran-province-heat.d.cts +64 -0
- package/dist/components/ui/iran-province-heat.d.ts +64 -0
- package/dist/components/ui/iran-province-heat.js +4 -0
- package/dist/components/ui/iran-province-heat.js.map +1 -0
- package/dist/components/ui/page-card.cjs +16 -0
- package/dist/components/ui/page-card.cjs.map +1 -0
- package/dist/components/ui/page-card.d.cts +6 -0
- package/dist/components/ui/page-card.d.ts +6 -0
- package/dist/components/ui/page-card.js +7 -0
- package/dist/components/ui/page-card.js.map +1 -0
- package/dist/components/ui/popover.cjs +25 -0
- package/dist/components/ui/popover.cjs.map +1 -0
- package/dist/components/ui/popover.d.cts +9 -0
- package/dist/components/ui/popover.d.ts +9 -0
- package/dist/components/ui/popover.js +4 -0
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/saved-query-card.cjs +15 -0
- package/dist/components/ui/saved-query-card.cjs.map +1 -0
- package/dist/components/ui/saved-query-card.d.cts +41 -0
- package/dist/components/ui/saved-query-card.d.ts +41 -0
- package/dist/components/ui/saved-query-card.js +6 -0
- package/dist/components/ui/saved-query-card.js.map +1 -0
- package/dist/components/ui/separator.cjs +13 -0
- package/dist/components/ui/separator.cjs.map +1 -0
- package/dist/components/ui/separator.d.cts +9 -0
- package/dist/components/ui/separator.d.ts +9 -0
- package/dist/components/ui/separator.js +4 -0
- package/dist/components/ui/separator.js.map +1 -0
- package/dist/components/ui/sheet.cjs +45 -0
- package/dist/components/ui/sheet.cjs.map +1 -0
- package/dist/components/ui/sheet.d.cts +44 -0
- package/dist/components/ui/sheet.d.ts +44 -0
- package/dist/components/ui/sheet.js +4 -0
- package/dist/components/ui/sheet.js.map +1 -0
- package/dist/components/ui/sparkline.cjs +13 -0
- package/dist/components/ui/sparkline.cjs.map +1 -0
- package/dist/components/ui/sparkline.d.cts +36 -0
- package/dist/components/ui/sparkline.d.ts +36 -0
- package/dist/components/ui/sparkline.js +4 -0
- package/dist/components/ui/sparkline.js.map +1 -0
- package/dist/components/ui/tooltip.cjs +25 -0
- package/dist/components/ui/tooltip.cjs.map +1 -0
- package/dist/components/ui/tooltip.d.cts +17 -0
- package/dist/components/ui/tooltip.d.ts +17 -0
- package/dist/components/ui/tooltip.js +4 -0
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/concept-card-CcOBb2Nz.d.ts +83 -0
- package/dist/concept-card-RwPbqJ06.d.cts +83 -0
- package/dist/hooks/use-hotkey-registry.cjs +21 -0
- package/dist/hooks/use-hotkey-registry.cjs.map +1 -0
- package/dist/hooks/use-hotkey-registry.d.cts +65 -0
- package/dist/hooks/use-hotkey-registry.d.ts +65 -0
- package/dist/hooks/use-hotkey-registry.js +4 -0
- package/dist/hooks/use-hotkey-registry.js.map +1 -0
- package/dist/hooks/use-hotkeys.cjs +16 -0
- package/dist/hooks/use-hotkeys.cjs.map +1 -0
- package/dist/hooks/use-hotkeys.d.cts +66 -0
- package/dist/hooks/use-hotkeys.d.ts +66 -0
- package/dist/hooks/use-hotkeys.js +3 -0
- package/dist/hooks/use-hotkeys.js.map +1 -0
- package/dist/i18n-ArS3mqj0.d.ts +344 -0
- package/dist/i18n-CAd9wGOr.d.cts +344 -0
- package/dist/index.cjs +7383 -10955
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +157 -0
- package/dist/index.d.cts +726 -1144
- package/dist/index.d.ts +726 -1144
- package/dist/index.js +6735 -10912
- package/dist/index.js.map +1 -1
- package/dist/page-card-CO92oXkc.d.ts +100 -0
- package/dist/page-card-DOl50DqJ.d.cts +100 -0
- package/dist/utils-DlXWmDZ-.d.cts +35 -0
- package/dist/utils-DlXWmDZ-.d.ts +35 -0
- package/package.json +160 -4
package/AGENTS.md
ADDED
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
# @parto-system-design/ui — AI Reference
|
|
2
|
+
|
|
3
|
+
RTL-first React component library for Persian social listening platforms. Built on Radix UI + Tailwind CSS + Next.js.
|
|
4
|
+
|
|
5
|
+
## Package
|
|
6
|
+
|
|
7
|
+
```ts
|
|
8
|
+
// All imports from main entry — no subpath exports
|
|
9
|
+
import { Button, Card, DataTable, EngagementRate } from '@parto-system-design/ui'
|
|
10
|
+
|
|
11
|
+
// CSS imported separately — once in layout.tsx
|
|
12
|
+
import '@parto-system-design/ui/styles.css'
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Next.js Setup (Required — all 4 steps)
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
// next.config.mjs
|
|
21
|
+
const nextConfig = {
|
|
22
|
+
transpilePackages: ['@parto-system-design/ui'], // REQUIRED — build fails without this
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
// tailwind.config.ts
|
|
28
|
+
const config: Config = {
|
|
29
|
+
darkMode: ['class', '[data-theme*="dark"]'],
|
|
30
|
+
content: [
|
|
31
|
+
'./app/**/*.{ts,tsx}',
|
|
32
|
+
'./components/**/*.{ts,tsx}',
|
|
33
|
+
'./node_modules/@parto-system-design/ui/dist/**/*.{js,mjs}', // REQUIRED
|
|
34
|
+
],
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
// app/layout.tsx
|
|
40
|
+
import { ThemeProvider } from 'next-themes'
|
|
41
|
+
import '@parto-system-design/ui/styles.css'
|
|
42
|
+
|
|
43
|
+
export default function RootLayout({ children }) {
|
|
44
|
+
return (
|
|
45
|
+
<html lang="fa" dir="rtl" suppressHydrationWarning> {/* dir="rtl" is required */}
|
|
46
|
+
<body>
|
|
47
|
+
<ThemeProvider attribute="class" defaultTheme="light" themes={['light', 'dark']}>
|
|
48
|
+
{children}
|
|
49
|
+
</ThemeProvider>
|
|
50
|
+
</body>
|
|
51
|
+
</html>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## RTL Rules — Non-negotiable
|
|
59
|
+
|
|
60
|
+
NEVER use physical CSS properties. Use CSS Logical Properties:
|
|
61
|
+
|
|
62
|
+
| ❌ Wrong | ✅ Right |
|
|
63
|
+
|---|---|
|
|
64
|
+
| `ml-4` | `ms-4` |
|
|
65
|
+
| `mr-4` | `me-4` |
|
|
66
|
+
| `pl-4` | `ps-4` |
|
|
67
|
+
| `pr-4` | `pe-4` |
|
|
68
|
+
| `text-left` | `text-start` |
|
|
69
|
+
| `text-right` | `text-end` |
|
|
70
|
+
| `border-l-*` | `border-s-*` |
|
|
71
|
+
| `border-r-*` | `border-e-*` |
|
|
72
|
+
| `rounded-l-*` | `rounded-s-*` |
|
|
73
|
+
| `rounded-r-*` | `rounded-e-*` |
|
|
74
|
+
|
|
75
|
+
**Exception:** `left-1/2 -translate-x-1/2` for absolute centering — this is geometric, not directional.
|
|
76
|
+
|
|
77
|
+
Directional icons: `<Icons.arrowRight className="rtl:rotate-180" />`
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## Colors — Semantic Tokens Only
|
|
82
|
+
|
|
83
|
+
NEVER hardcode Tailwind colors. Use Parto semantic tokens:
|
|
84
|
+
|
|
85
|
+
| ❌ Wrong | ✅ Right |
|
|
86
|
+
|---|---|
|
|
87
|
+
| `text-gray-900` | `text-foreground` |
|
|
88
|
+
| `text-gray-500` | `text-light` |
|
|
89
|
+
| `text-gray-400` | `text-lighter` |
|
|
90
|
+
| `text-gray-300` | `text-muted` |
|
|
91
|
+
| `bg-white` | `bg-background` |
|
|
92
|
+
| `bg-gray-50` | `bg-surface-75` |
|
|
93
|
+
| `bg-gray-100` | `bg-surface-100` |
|
|
94
|
+
| `bg-gray-200` | `bg-surface-200` |
|
|
95
|
+
| `border-gray-200` | `border-default` |
|
|
96
|
+
| `bg-blue-600` | `bg-brand` |
|
|
97
|
+
| `style={{ color: '#...' }}` | `className="text-[hsl(var(--token))]"` |
|
|
98
|
+
|
|
99
|
+
**Full token list:**
|
|
100
|
+
- Text: `text-foreground` `text-light` `text-lighter` `text-muted` `text-contrast` `text-brand` `text-warning` `text-destructive`
|
|
101
|
+
- Surface: `bg-background` `bg-surface-75` `bg-surface-100` `bg-surface-200` `bg-surface-300` `bg-surface-400`
|
|
102
|
+
- Border: `border-default` `border-strong`
|
|
103
|
+
- Brand: `bg-brand` `text-brand` `bg-interactive`
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
## Component Selection Guide
|
|
108
|
+
|
|
109
|
+
| Need | Use |
|
|
110
|
+
|---|---|
|
|
111
|
+
| Interactive table with sort/filter/pagination | `DataTable` |
|
|
112
|
+
| Simple static table | `Table` |
|
|
113
|
+
| KPI / metric dashboard card | `MetricCard` |
|
|
114
|
+
| User or influencer profile card | `ProfileCard` |
|
|
115
|
+
| Empty state (no data) | `Empty` |
|
|
116
|
+
| Loading placeholder | `Skeleton` |
|
|
117
|
+
| Page title + actions bar | `PageHeader` |
|
|
118
|
+
| Status label / tag | `Badge` |
|
|
119
|
+
| Toast notifications | `Sonner` + `toast()` |
|
|
120
|
+
| Delete/destructive confirmation | `ConfirmDialog` |
|
|
121
|
+
| Generic modal | `Dialog` |
|
|
122
|
+
| Tab panels | `Tabs` |
|
|
123
|
+
| Collapsible sections | `Accordion` |
|
|
124
|
+
| App sidebar navigation | `Sidebar` |
|
|
125
|
+
| Slide-in panel | `Sheet` |
|
|
126
|
+
| Full-section error | `ErrorState` |
|
|
127
|
+
| Inline error/warning | `Alert` |
|
|
128
|
+
| Page navigation | `Pagination` |
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## Domain Components (Social Listening)
|
|
133
|
+
|
|
134
|
+
### EngagementRate — ALWAYS pass `category`
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
// ✅ Correct
|
|
138
|
+
<EngagementRate value={4.5} category="micro" />
|
|
139
|
+
|
|
140
|
+
// ❌ Wrong — thresholds are category-specific
|
|
141
|
+
<EngagementRate value={4.5} />
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Categories: `nano` (1K-10K) | `micro` (10K-100K) | `macro` (100K-1M) | `mega` (1M+)
|
|
145
|
+
|
|
146
|
+
### SentimentBadge
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
<SentimentBadge sentiment="positive" /> // positive | negative | neutral
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### SocialPlatformBadge
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
<SocialPlatformBadge platform="instagram" />
|
|
156
|
+
// platforms: instagram | telegram | youtube | tiktok | linkedin | twitter | threads
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### PostCard — canonical post across all 7 platforms
|
|
160
|
+
|
|
161
|
+
```tsx
|
|
162
|
+
<PostCard
|
|
163
|
+
post={{
|
|
164
|
+
id: 'p1',
|
|
165
|
+
source: 'instagram', // instagram | twitter | telegram | youtube | tiktok | linkedin | threads
|
|
166
|
+
author: { name: 'سارا احمدی', handle: 'sara.ahmadi', verified: true },
|
|
167
|
+
timestamp: Date.now(),
|
|
168
|
+
body: { type: 'text', text: 'متن پست #دیجیکالا' },
|
|
169
|
+
sentiment: 'positive',
|
|
170
|
+
metrics: { views: 12400, likes: 876, comments: 124 },
|
|
171
|
+
}}
|
|
172
|
+
density="comfortable" // or 'compact' for triage
|
|
173
|
+
onOpenDetails={(p) => openDetailsModal(p)}
|
|
174
|
+
/>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
Icon-only actions on hover. Images of any aspect ratio letterbox with blurred backdrop.
|
|
178
|
+
|
|
179
|
+
### PostDetailsModal — full drill-down (comments + AI analysis + OCR + platform metadata)
|
|
180
|
+
|
|
181
|
+
```tsx
|
|
182
|
+
<PostDetailsModal
|
|
183
|
+
open={open}
|
|
184
|
+
onOpenChange={setOpen}
|
|
185
|
+
post={post}
|
|
186
|
+
details={{ comments, aiAnalysis, ocrText, transcript, platformMeta }}
|
|
187
|
+
/>
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
## Charts
|
|
193
|
+
|
|
194
|
+
All charts: `isLoading` prop shows Skeleton, `width="100%"` for responsive.
|
|
195
|
+
|
|
196
|
+
```tsx
|
|
197
|
+
// Line chart — row-oriented data, one key per series
|
|
198
|
+
<PartoLineChart
|
|
199
|
+
data={[{ name: 'فروردین', instagram: 4.2, telegram: 2.1 }]}
|
|
200
|
+
dataKeys={['instagram', 'telegram']}
|
|
201
|
+
xAxisKey="name"
|
|
202
|
+
isLoading={loading}
|
|
203
|
+
height={300}
|
|
204
|
+
/>
|
|
205
|
+
|
|
206
|
+
// Bar chart
|
|
207
|
+
<PartoBarChart
|
|
208
|
+
data={[{ platform: 'اینستاگرام', posts: 45 }]}
|
|
209
|
+
keys={['posts']}
|
|
210
|
+
indexBy="platform"
|
|
211
|
+
height={300}
|
|
212
|
+
/>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
Available: `PartoLineChart` `PartoBarChart` `PartoPieChart` `PartoAreaChart` `PartoHeatMap` `PartoWordCloud` `PartoRadarChart`
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
## Themes
|
|
220
|
+
|
|
221
|
+
Two themes: `light` (`:root`) | `dark` (`.dark` class / `[data-theme="dark"]`)
|
|
222
|
+
|
|
223
|
+
Tailwind dark mode uses dual selectors: `['class', '[data-theme*="dark"]']`
|
|
224
|
+
|
|
225
|
+
---
|
|
226
|
+
|
|
227
|
+
## MCP Server (for AI tools)
|
|
228
|
+
|
|
229
|
+
```bash
|
|
230
|
+
npx @parto-system-design/mcp-server
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
Exposes tools: `parto_search`, `parto_component`, `parto_setup`, `parto_rtl_rules`, `parto_colors`, `parto_review`
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Parto Design System contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,68 +1,121 @@
|
|
|
1
1
|
# @parto-system-design/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> Persian-first / RTL-native React component library for **افکارسنجی** (public-opinion monitoring), social listening, and influencer analytics. Supabase-style design language adapted for Farsi typography.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@parto-system-design/ui)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
|
|
8
|
+
## What's inside
|
|
9
|
+
|
|
10
|
+
- **170+ component entries** — primitives, layout, forms, charts, data viz
|
|
11
|
+
- **Domain-aware** for افکارسنجی: 5 political flow tokens, 9-emotion scale, 4-level severity, status pulse, 10 platform tokens (incl. TV / Radio / Press), action types, score tiers
|
|
12
|
+
- **Two themes**: Light + Dark, both production-grade with full token coverage
|
|
13
|
+
- **RTL native**: CSS Logical Properties throughout — no physical left/right
|
|
14
|
+
- **Trilingual**: Persian (canonical), Arabic, English labels for every domain primitive
|
|
15
|
+
- **Charts**: 8 wrappers over Recharts + custom Visx heatmap and word-cloud, all locale-aware (Persian-digit ticks, theme-resolved colors)
|
|
16
|
+
- **Tables**: DataTable v2 with multi-column sort, sticky footer, column resize, virtualization, infinite scroll, expansion, pinning, column visibility, comparison view, CSV export
|
|
17
|
+
|
|
18
|
+
## Install
|
|
6
19
|
|
|
7
20
|
```bash
|
|
8
21
|
pnpm add @parto-system-design/ui
|
|
22
|
+
# Peer deps:
|
|
23
|
+
pnpm add react react-dom
|
|
24
|
+
# Optional — only if you want next-themes integration:
|
|
25
|
+
pnpm add next-themes
|
|
9
26
|
```
|
|
10
27
|
|
|
11
|
-
|
|
28
|
+
The library externalizes its own dependencies (`recharts`, `@radix-ui/*`, `@visx/*`, etc.) so they install transparently via npm. No manual peer-dep wiring required.
|
|
12
29
|
|
|
13
|
-
|
|
14
|
-
import { Button, Card, PartoLineChart } from '@parto-system-design/ui';
|
|
15
|
-
import '@parto-system-design/ui/styles.css';
|
|
30
|
+
## Setup
|
|
16
31
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
32
|
+
### 1. Import the stylesheet
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
// app/layout.tsx (Next.js) or main.tsx (Vite)
|
|
36
|
+
import '@parto-system-design/ui/styles.css'
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 2. Tailwind theme (optional, recommended)
|
|
40
|
+
|
|
41
|
+
If your app uses Tailwind, extend the config so utility classes resolve the Parto tokens:
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
// tailwind.config.ts
|
|
45
|
+
import partoConfig from '@parto-system-design/ui/tailwind.config'
|
|
46
|
+
|
|
47
|
+
export default {
|
|
48
|
+
...partoConfig,
|
|
49
|
+
content: [
|
|
50
|
+
...(partoConfig.content as string[]),
|
|
51
|
+
'./app/**/*.{ts,tsx}',
|
|
52
|
+
'./node_modules/@parto-system-design/ui/dist/**/*.{js,cjs}',
|
|
53
|
+
],
|
|
23
54
|
}
|
|
24
55
|
```
|
|
25
56
|
|
|
26
|
-
|
|
57
|
+
### 3. Next.js — transpile the package
|
|
27
58
|
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
|
|
59
|
+
```ts
|
|
60
|
+
// next.config.mjs
|
|
61
|
+
export default {
|
|
62
|
+
transpilePackages: ['@parto-system-design/ui'],
|
|
63
|
+
}
|
|
64
|
+
```
|
|
31
65
|
|
|
32
|
-
|
|
33
|
-
pnpm build
|
|
66
|
+
## Tree-shake-friendly subpath imports
|
|
34
67
|
|
|
35
|
-
|
|
36
|
-
|
|
68
|
+
For bundle-conscious apps, import each primitive from its own subpath. A
|
|
69
|
+
single `Button` import drops from ~343 KB (full barrel) to **~11 KB** —
|
|
70
|
+
a 97% reduction:
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
// Bundle-conscious — each component pays for itself only
|
|
74
|
+
import { Button } from '@parto-system-design/ui/button'
|
|
75
|
+
import { Input } from '@parto-system-design/ui/input'
|
|
76
|
+
import { IranProvinceHeat } from '@parto-system-design/ui/iran-province-heat'
|
|
77
|
+
import { PartoLineChart } from '@parto-system-design/ui/line-chart'
|
|
78
|
+
|
|
79
|
+
// Or ergonomic barrel — works as before, fine if you import many components
|
|
80
|
+
import { Button, Input, Card, Avatar, Badge } from '@parto-system-design/ui'
|
|
37
81
|
```
|
|
38
82
|
|
|
39
|
-
|
|
83
|
+
Subpaths are exported for the 25 highest-traffic components (primitives,
|
|
84
|
+
big surfaces, charts, domain cards, hooks). See `package.json` `exports`
|
|
85
|
+
for the full list. Less common components remain available via the
|
|
86
|
+
barrel import.
|
|
40
87
|
|
|
41
|
-
|
|
42
|
-
- Input
|
|
43
|
-
- Card
|
|
44
|
-
- Badge
|
|
45
|
-
- Tabs
|
|
46
|
-
- Dialog
|
|
47
|
-
- Select
|
|
48
|
-
- Tooltip
|
|
49
|
-
- Popover
|
|
50
|
-
- Alert
|
|
51
|
-
- Separator
|
|
52
|
-
- PartoLineChart
|
|
53
|
-
- PartoBarChart
|
|
54
|
-
- PartoPieChart
|
|
88
|
+
## Quick start
|
|
55
89
|
|
|
56
|
-
|
|
90
|
+
```tsx
|
|
91
|
+
import { Button, IranProvinceHeat, FilterProvider } from '@parto-system-design/ui'
|
|
57
92
|
|
|
58
|
-
|
|
93
|
+
export default function Page() {
|
|
94
|
+
return (
|
|
95
|
+
<FilterProvider initialState={{ q: '', province: null }}>
|
|
96
|
+
<Button variant="primary">شروع</Button>
|
|
97
|
+
<IranProvinceHeat
|
|
98
|
+
data={{ tehran: 4820, isfahan: 2140, fars: 1480 }}
|
|
99
|
+
valueSuffix=" نظر"
|
|
100
|
+
topN={8}
|
|
101
|
+
hideMissing
|
|
102
|
+
showRank
|
|
103
|
+
/>
|
|
104
|
+
</FilterProvider>
|
|
105
|
+
)
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Documentation
|
|
110
|
+
|
|
111
|
+
Full docs (Fumadocs v16) run locally on port 4200:
|
|
59
112
|
|
|
60
|
-
|
|
113
|
+
```bash
|
|
114
|
+
pnpm dev
|
|
115
|
+
```
|
|
61
116
|
|
|
62
|
-
|
|
117
|
+
The component manifest at [`component-manifest.md`](./component-manifest.md) is auto-generated and lists every public export with its variants and data-slots — handy for AI agents.
|
|
63
118
|
|
|
64
|
-
|
|
65
|
-
- ✅ همه کامپوننتها از `src/index.ts` export میشوند
|
|
66
|
-
- ✅ در production، فایلهای build شده (`dist/`) منتشر میشوند
|
|
67
|
-
- ✅ هیچ تفاوتی بین کامپوننتهای داک و کامپوننتهای قابل نصب وجود ندارد
|
|
119
|
+
## License
|
|
68
120
|
|
|
121
|
+
[MIT](./LICENSE)
|