تمپلیت شروع

یک اپ Next.js کامل و آماده روی دیزاین‌سیستم پرتو — کپی کنید و شروع کنید

معرفی

تمپلیت شروع (apps/starter در ریپوی دیزاین‌سیستم) یک اپ Next.js کامل است که همه‌ی سیم‌کشی مصرف پرتو در آن از قبل و به روش رسمی انجام شده است. به‌جای آنکه برای هر اپ جدید از صفر تصمیم بگیرید «کدام import، کدام تنظیم، فونت چطور، شل چطور»، این پوشه را کپی می‌کنید و مستقیم سراغ ساختن محصول می‌روید.

آنچه از پیش آماده است:

تم تاریک + RTL + فونت یکان بخ (فونت داخل خود پکیج است — هیچ تنظیم اضافه‌ای لازم نیست)
رسپی رسمی مصرف: فقط @import '@partodata/ui/tailwind.css' بعد از tailwindcss (راهنمای نصب)
شل کامل استودیو-سبک (AppShell) با سایدبار، هدر و ناوبری
سه صفحه‌ی واقعی با کامپوننت‌های کلیدی: داشبورد (MetricCard + نمودار میله‌ای + جدول)، گزارش‌ها (Tabs + نمودار ناحیه‌ای + جدول کمپین‌ها) و تنظیمات (فرم کامل با Input و Select و Switch)
importهای subpath در همه‌جا (tree-shaking — باندل فقط هزینه‌ی چیزی را می‌دهد که استفاده شده)

پیش‌نمایش زنده

پیش‌نمایش، خودِ اپ است — تمام‌صفحه و در یک برگه‌ی جدا باز می‌شود تا تجربه‌ی واقعی شل و ناوبری را ببینید. بین سه صفحه از سایدبار جابه‌جا شوید.

مشاهده پیش‌نمایش در برگه جدید

چرا در برگه جدید؟

این پیش‌نمایش یک اپ کامل با شل تمام‌صفحه است. رندر آن داخل صفحه‌ی مستندات، هم پیش‌نمایش را کوچک و ناخوانا می‌کند و هم با لی‌آوت مستندات تداخل دارد — پس همیشه در صفحه‌ی مستقل خودش باز می‌شود.

اجرا داخل مونوریپو

pnpm install
pnpm --filter @partodata/ui build       # اول پکیج DS ساخته شود
pnpm --filter @partodata/starter dev    # http://localhost:4300

pnpm dev در ریشه‌ی مونوریپو عمداً starter را اجرا نمی‌کند (فقط docs + ui) تا محیط توسعه سبک بماند. starter را همیشه با فیلتر بالا اجرا کنید.

ساخت اپ جدید از روی تمپلیت

۱. پوشه را به بیرون از ریپو کپی کنید:

cp -r apps/starter ~/my-new-app && cd ~/my-new-app

۲. در package.json وابستگی workspace را به نسخه‌ی npm تغییر دهید:

- "@partodata/ui": "workspace:*",
+ "@partodata/ui": "^2.9.0",

۳. نصب و اجرا:

npm install
npm run dev

ساختار فایل‌ها

app/
  globals.css      ← رسپی مصرف (دو @import)
  layout.tsx       ← html با lang="fa" dir="rtl" و هر دو نشانگر تیره
  page.tsx         ← سه صفحه: داشبورد / گزارش‌ها / تنظیمات
  icon.svg         ← favicon برند
next.config.mjs    ← transpilePackages: ['@partodata/ui'] (اجباری)
postcss.config.js  ← @tailwindcss/postcss

بهترین روش‌ها

بکنید

از همین تمپلیت برای هر اپ جدید شروع کنید — سیم‌کشی آن همان «مسیر طلایی» مستندات است.
importهای subpath را نگه دارید (@partodata/ui/button نه barrel) تا باندل کوچک بماند.
داده‌ی نمونه را با داده‌ی واقعی محصول جایگزین کنید؛ ساختار صفحه‌ها (شل، PageHeader، گرید) را نگه دارید.

نکنید

فونت را جداگانه self-host نکنید — یکان بخ داخل پکیج است و خودکار بارگذاری می‌شود.
transpilePackages را حذف نکنید — بدون آن build با SyntaxError شکست می‌خورد.
رنگ hardcode نکنید — همه‌ی رنگ‌ها از توکن‌های معنایی (رنگ‌ها).

صفحات مرتبط

نصب و راه‌اندازی — اگر می‌خواهید پرتو را به اپ موجود اضافه کنید (نه اپ نو از تمپلیت).
الگوی AppShell — جزئیات کامل شل استودیو-سبک که تمپلیت استفاده می‌کند.
MetricCard و Table — کامپوننت‌های اصلی صفحه‌ی داشبورد تمپلیت.