TaavUI Lab
Consumption Contract

چگونه TaavUI را مصرف کنیم

قرارداد رسمی برای استفاده از TaavUI در اپ‌های DastRanj و VahedYek — بدون مهاجرت در این commit.

import { TaavInput, TaavFormField } from "@repo/ui/taav";

۱. Import توکن‌های CSS (الزامی)

در app/globals.css (یا entry CSS لودشده از root layout):

@import "@repo/ui/taav-tokens.css";
اگر import نکنید:

متغیرهای --taav-* تعریف نمی‌شوند و ارتفاع، رنگ، border و focus ring کامپوننت‌ها درست render نمی‌شوند.

۲. Import کامپوننت‌ها (توصیه‌شده)

import {
  TaavButton,
  TaavInput,
  TaavFormField,
} from "@repo/ui/taav";

در Next.js App Router از @repo/ui/taav استفاده کنید تا bundle کامل legacy (date picker، dev-doc و ...) وارد server component نشود.

// Server components — primitives only
import { TaavButton, TaavCard } from "@repo/ui/taav/primitives";

// Client form fields
import { TaavInput, TaavFormField } from "@repo/ui/taav/forms";

// Overlays & navigation (client)
import { TaavDialog } from "@repo/ui/taav/overlays";
import { TaavTabs } from "@repo/ui/taav/navigation";

// Data display (mostly server-safe; interactive: ChipGroup, Pagination, FilterBar)
import { TaavChip, TaavTableShell } from "@repo/ui/taav/data-display";

۳. Tailwind @source

@source "../../../packages/ui/src/**/*.{js,ts,jsx,tsx}";

۴. Legacy — برای کار TaavUI جدید استفاده نکنید

  • • `Input`, `PersianDatePicker`, `formStyles`
  • • کامپوننت‌های business/rule/contract
  • • `DevDocThreadsBoard`

این‌ها همچنان از `@repo/ui` export می‌شوند برای backward compatibility.