‏Shadcn Admin Kit: ساخت پنل ادمین با shadcn/ui

Shadcn Admin Kit یه کیت کامپوننتی متن‌بازه که ساخت پنل‌های ادمین با shadcn/ui رو خیلی راحت‌تر می‌کنه. اگه تا حالا از ابزارهایی مثل react-admin استفاده کردی، این پروژه برات آشنا به نظر می‌رسه چون دقیقاً روی همون هسته یعنی ra-core ساخته شده، ولی با ظاهر و تجربه‌ی shadcn/ui.

از نظر استک فنی، این کیت از shadcn/ui و Radix UI برای رابط کاربری، Tailwind CSS برای استایل‌دهی، React Router برای مسیریابی، TanStack Query برای کال‌های API، و React Hook Form برای فرم‌ها و اعتبارسنجی استفاده می‌کنه. همه‌چیز هم با TypeScript تایپ‌سیف شده.

مهم‌ترین قابلیت‌هایی که داره اینان: صفحات کامل CRUD (لیست، نمایش، ویرایش، ایجاد)، جدول داده با مرتب‌سازی، فیلتر، اکسپورت، انتخاب ستون و صفحه‌بندی، کامپوننت‌های فرم با data binding و اعتبارسنجی، پشتیبانی از روابط one-to-many و many-to-one، منوی سایدبار، لاگین و کنترل دسترسی، داشبورد، پشتیبانی از i18n، حالت روشن/تاریک، و ریسپانسیو بودن.

نقطه‌ی شروع استفاده از این کیت، کامپوننت `` هست. این کامپوننت به عنوان ریشه‌ی اپلیکیشن عمل می‌کنه و باهاش می‌شه Data Provider، مسیرها، و رابط کاربری رو تنظیم کرد. بیش از ۵۰ Data Provider آماده وجود داره که با انواع APIها سازگارن.

import { Admin } from "@/components/admin/admin";
import simpleRestProvider from 'ra-data-simple-rest';

const dataProvider = simpleRestProvider('http://path.to.my.api');

export const App = () => (
  <Admin dataProvider={dataProvider}>
    {/* Resources go here */}
  </Admin>
);

بعد از تعریف ``، باید منابع (Resource) اپلیکیشنت رو مشخص کنی. هر Resource به یه endpoint در API مپ می‌شه و می‌تونی کامپوننت‌های list، edit، create و show رو بهش بدی.

یکی از جذاب‌ترین ویژگی‌های این کیت، Guesserهاست. اگه نمی‌دونی از کجا شروع کنی، می‌تونی از ListGuesser، EditGuesser و ShowGuesser استفاده کنی تا کیت به‌طور خودکار بر اساس داده‌های برگشتی از API، کد صفحات رو برات تولید کنه:

import { Resource } from "ra-core";
import { Admin } from "@/components/admin/admin";
import { ListGuesser } from "@/components/admin/list-guesser";
import { ShowGuesser } from "@/components/admin/show-guesser";
import { EditGuesser } from "@/components/admin/edit-guesser";

export const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource
      name="posts"
      list={ListGuesser}
      edit={EditGuesser}
      show={ShowGuesser}
    />
  </Admin>
);

این کیت با محیط‌های مختلف مثل Vite.js، Remix، و Next.js هم سازگاره، پس محدودیتی از نظر ابزار بیلد نداری. در مجموع اگه دنبال یه راه‌حل سریع، زیبا، و قابل تنظیم برای ساخت پنل ادمین در اکوسیستم React هستی، Shadcn Admin Kit گزینه‌ی قابل توجهیه.

نکات کلیدی:

• کیت کامپوننتی برای ساخت پنل ادمین بر پایه shadcn/ui و ra-core
• پشتیبانی از CRUD کامل با جدول داده پیشرفته، فرم، و اعتبارسنجی
• سازگار با هر API (REST، GraphQL و غیره) و بیش از ۵۰ Data Provider آماده
• ویژگی Guesser برای تولید خودکار کد بر اساس پاسخ API
• پشتیبانی از احراز هویت، کنترل دسترسی، i18n، حالت تاریک/روشن و ریسپانسیو
• قابل استفاده با Vite، Remix، Next.js و TypeScript