فایل components.json

FarsiUI از این فایل برای درک ساختار پروژه و تولید کامپوننت‌هایی استفاده می‌کند که با تنظیمات و مسیرهای پروژه شما هماهنگ باشند.

برای ساخت این فایل می‌توانید CLI را اجرا کنید:

npmpnpmyarnbun
npx farsiui@latest init
Copy

برای اطلاعات بیشتر، بخش CLI را ببینید.

$schema#

می‌توانید Schema مربوط به components.json را در پروژه مشخص کنید.

Copy{
  "$schema": "https://farsiui.ir/schema.json"
}

style#

سبک مورد استفاده برای کامپوننت‌ها را مشخص می‌کند.

Copy{
  "style": "default"
}

این مقدار هنگام راه‌اندازی پروژه تنظیم می‌شود.

tailwind#

تنظیمات مربوط به Tailwind CSS که CLI برای شناخت ساختار استایل پروژه استفاده می‌کند.

tailwind.config#

مسیر فایل تنظیمات Tailwind CSS.

در Tailwind CSS v4 معمولاً نیازی به تعیین این مقدار نیست.

Copy{
  "tailwind": {
    "config": ""
  }
}

tailwind.css#

مسیر فایل CSS اصلی پروژه که Tailwind CSS در آن وارد شده است.

Copy{
  "tailwind": {
    "css": "styles/globals.css"
  }
}

tailwind.cssVariables#

مشخص می‌کند که تم پروژه با CSS Variables مدیریت شود یا از کلاس‌های رنگی Tailwind استفاده شود.

Copy{
  "tailwind": {
    "cssVariables": true
  }
}

در FarsiUI استفاده از CSS Variables برای مدیریت تم توصیه می‌شود.

برای اطلاعات بیشتر، به تم‌دهی مراجعه کنید.

tailwind.prefix#

پیشوند مورد استفاده برای کلاس‌های utility در Tailwind CSS.

Copy{
  "tailwind": {
    "prefix": "tw-"
  }
}

rsc#

مشخص می‌کند که پروژه از React Server Components پشتیبانی می‌کند یا خیر.

Copy{
  "rsc": true
}

وقتی این گزینه فعال باشد، CLI در صورت نیاز "use client" را به کامپوننت‌های Client اضافه می‌کند.

tsx#

نوع فایل کامپوننت‌هایی که CLI تولید می‌کند را مشخص می‌کند.

برای استفاده از TypeScript:

Copy{
  "tsx": true
}

با قرار دادن مقدار false، کامپوننت‌ها با پسوند .jsx ایجاد می‌شوند.

aliases#

مسیرهایی را مشخص می‌کند که CLI برای قرار دادن فایل‌ها و بازنویسی importها استفاده می‌کند.

Copy{
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "utils": "@/lib/utils"
  }
}

aliases.components#

مسیر کامپوننت‌های پروژه.

Copy{
  "aliases": {
    "components": "@/components"
  }
}

aliases.ui#

مسیر کامپوننت‌های UI.

Copy{
  "aliases": {
    "ui": "@/components/ui"
  }
}

aliases.lib#

مسیر فایل‌های کمکی و utilityهای پروژه.

Copy{
  "aliases": {
    "lib": "@/lib"
  }
}

aliases.hooks#

مسیر Hookهای پروژه.

Copy{
  "aliases": {
    "hooks": "@/hooks"
  }
}

aliases.utils#

مسیر توابع utility پروژه.

Copy{
  "aliases": {
    "utils": "@/lib/utils"
  }
}

نمونه کامل#

یک فایل components.json می‌تواند به شکل زیر باشد:

Copy{
  "$schema": "https://farsiui.ir/schema.json",
  "style": "default",
  "tailwind": {
    "config": "",
    "css": "styles/globals.css",
    "cssVariables": true,
    "prefix": ""
  },
  "rsc": true,
  "tsx": true,
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "utils": "@/lib/utils"
  }
}