@parto-system-design/ui

Persian-first / RTL-native React component library for افکارسنجی (public-opinion monitoring), social listening, and influencer analytics. Supabase-style design language adapted for Farsi typography.

What's inside

• 170+ component entries — primitives, layout, forms, charts, data viz
• Domain-aware for افکارسنجی: 5 audience-stance tokens, 9-emotion scale, 4-level severity, status pulse, 10 platform tokens (incl. TV / Radio / Press), action types, score tiers
• Two themes: Light + Dark, both production-grade with full token coverage
• RTL native: CSS Logical Properties throughout — no physical left/right
• Trilingual: Persian (canonical), Arabic, English labels for every domain primitive
• Charts: 8 wrappers over Recharts + custom Visx heatmap and word-cloud, all locale-aware (Persian-digit ticks, theme-resolved colors)
• Tables: DataTable v2 with multi-column sort, sticky footer, column resize, virtualization, infinite scroll, expansion, pinning, column visibility, comparison view, CSV export

Install

pnpm add @parto-system-design/ui
# Peer deps:
pnpm add react react-dom
# Optional — only if you want next-themes integration:
pnpm add next-themes

The library externalizes its own dependencies (recharts, @radix-ui/*, @visx/*, etc.) so they install transparently via npm. No manual peer-dep wiring required.

Setup

1. Import the stylesheet

// app/layout.tsx (Next.js) or main.tsx (Vite)
import '@parto-system-design/ui/styles.css'

2. Tailwind theme (optional, recommended)

If your app uses Tailwind, extend the config so utility classes resolve the Parto tokens:

// tailwind.config.ts
import partoConfig from '@parto-system-design/ui/tailwind.config'

export default {
  ...partoConfig,
  content: [
    ...(partoConfig.content as string[]),
    './app/**/*.{ts,tsx}',
    './node_modules/@parto-system-design/ui/dist/**/*.{js,cjs}',
  ],
}

3. Next.js — transpile the package

// next.config.mjs
export default {
  transpilePackages: ['@parto-system-design/ui'],
}

Tree-shake-friendly subpath imports

For bundle-conscious apps, import each primitive from its own subpath. A single Button import drops from ~343 KB (full barrel) to ~11 KB — a 97% reduction:

// Bundle-conscious — each component pays for itself only
import { Button } from '@parto-system-design/ui/button'
import { Input } from '@parto-system-design/ui/input'
import { IranProvinceHeat } from '@parto-system-design/ui/iran-province-heat'
import { PartoLineChart } from '@parto-system-design/ui/line-chart'

// Or ergonomic barrel — works as before, fine if you import many components
import { Button, Input, Card, Avatar, Badge } from '@parto-system-design/ui'

Subpaths are exported for the 25 highest-traffic components (primitives, big surfaces, charts, domain cards, hooks). See package.json exports for the full list. Less common components remain available via the barrel import.

Quick start

import { Button, IranProvinceHeat, FilterProvider } from '@parto-system-design/ui'

export default function Page() {
  return (
    <FilterProvider initialState={{ q: '', province: null }}>
      <Button variant="primary">شروع</Button>
      <IranProvinceHeat
        data={{ tehran: 4820, isfahan: 2140, fars: 1480 }}
        valueSuffix=" نظر"
        topN={8}
        hideMissing
        showRank
      />
    </FilterProvider>
  )
}

Documentation

Full docs (Fumadocs v16) run locally on port 4200:

pnpm dev

The component manifest at component-manifest.md is auto-generated and lists every public export with its variants and data-slots — handy for AI agents.

License

MIT