formscn: فرم‌ساز بصری برای shadcn/ui
فرانتاند
ریاکتخلاصهٔ کامل‌تر
formscn یه فرم‌ساز بصری و متن‌بازه که مخصوص پروژه‌هایی ساخته شده که از shadcn/ui استفاده می‌کنن. ایده‌ش ساده‌ست: به‌جای این‌که مثال‌های فرم رو از مستندات کپی کنید و دستی تغییرشون بدید، فیلدها رو با drag-and-drop می‌چینید، پیش‌نمایش زنده رو می‌بینید و همزمان کد TypeScript فرم جلوتون آپدیت میشه. خروجی هم از همون کامپوننت‌های موجود shadcn مثل Button، Input و Select استفاده می‌کنه.
به گفتهٔ سازنده‌ها، کد خروجی مال خودتونه و می‌تونید بین React Hook Form و TanStack Form جابه‌جا شید؛ ظاهر و ساختار فرم یکیه و فقط کد تولیدشده فرق می‌کنه. برای هر فرم یه اسکیمای Zod (یعنی کتابخونه‌ای که شکل داده‌ها رو تعریف و چک می‌کنه) خودکار ساخته میشه و تایپ داده‌های فرم هم از روش استنتاج میشه. پس لازم نیست تایپ و اعتبارسنجی رو جدا بنویسید.
فرم‌های چندمرحله‌ای (wizard) هم پشتیبانی می‌شن، مثلاً برای onboarding یا checkout، و مدیریت state و اعتبارسنجی هر مرحله خودکار انجام میشه. یه یکپارچگی اختیاری با Better Auth هم داره که باهاش میشه 2FA، Passkey، Magic Link و ورود با OAuth رو به فرم‌ها اضافه کرد. ابزارهایی که تو صفحه‌ش اسم برده شده شامل Next.js، Tailwind، Drizzle و Prisma هم هست.
یه کتابخونهٔ قالب هم داره که به گفتهٔ سایت هر هفته به‌روز میشه: فرم ثبت‌نام، ورود، راه‌اندازی 2FA، دعوت به سازمان، مدیریت Passkey و تنظیمات پروفایل. هر کدوم رو میشه باز کرد و تو همون ادیتور بصری تغییر داد. کد پروژه روی GitHub منتشر شده و مشارکت جامعه رو هم قبول می‌کنه.
نکات کلیدی:
- فقط برای shadcn/ui ساخته شده و از کامپوننت‌های موجود پروژه استفاده می‌کنه.
- خروجی رو میشه برای React Hook Form یا TanStack Form گرفت.
- اسکیمای Zod و تایپ‌های TypeScript برای هر فرم خودکار ساخته میشه.
- فرم چندمرحله‌ای با اعتبارسنجی جداگانهٔ هر مرحله پشتیبانی میشه.
- یکپارچگی اختیاری با Better Auth برای 2FA، Passkey، Magic Link و OAuth داره.
- شش قالب آماده مثل ثبت‌نام، ورود و تنظیمات پروفایل داره.
