پایان دردسرهای فرم چندمرحله‌ای توی ریکت

SmartStepper: پایان دردسرهای فرم چندمرحله‌ای تو React

توسعه فرم‌های چندمرحله‌ای تو React شاید در نگاه اول ساده به‌نظر برسه، اما اگه تجربه‌ش کرده باشی، احتمالاً می‌دونی که تبدیل می‌شه به یه کابوس واقعی.

سه تا قدم ساده داریم:
اطلاعات کاربر → آدرس → تایید نهایی.
اما اجراش؟! 😵

😩 واقعاً چرا اینقد پیچیده‌ست؟

برای ساخت یه فرم چندمرحله‌ای تو React معمولاً این سناریو تکرار می‌شه:

• کلی useState برای مدیریت قدم‌ها

• شرط‌هایی مثل if (currentStep === 'user') که همه‌جا پخش شدن

• Validation برای هر مرحله باید دستی هندل شه

• UI و Logic قاطی می‌شن؛ هر تغییری تو یکی، اون یکی رو خراب می‌کنه

• مدیریت مقدار پیش‌فرض، ریست، بازگشت به مرحله قبل؟ وای به حالت 😵‍💫

تا وقتی تعداد مراحل کمه، با زور و زحمت می‌شه هندلش کرد. اما به محض اینکه فرم بزرگ‌تر یا داینامیک‌تر بشه، کدت پر از شرط و شرط‌بندی می‌شه و دیگه قابل نگهداری نیست.

🤔 یعنی باید همیشه با این دردسرها سر کنیم؟

نه لزوماً!

منم مثل خیلی از شما، بارها تو پروژه‌هام مجبور شدم فرم چندمرحله‌ای بسازم.
هر بار هم مجبور بودم همون الگوی تکراری رو از اول بسازم.
واسه همین تصمیم گرفتم یه ابزار کوچیک بسازم که این زجر رو برای همیشه تموم کنه.

💡 SmartStepper چیه؟

SmartStepper یه کتابخونه‌ی کم‌حجم برای ساخت فرم‌های چندمرحله‌ای تو React هست که از فلسفه‌ی "همه‌چیز رو دکلراتیو و کانفیگی کن" پیروی می‌کنه.

به‌جای اینکه بری سراغ useState و شرط‌های if/else و هزار جور مدیریت دستی، توی SmartStepper فقط یه کانفیگ ساده می‌نویسی و خودش همه‌چیز رو هندل می‌کنه.

🧠 چه قابلیت‌هایی داره؟

✔️ تعریف ترتیب قدم‌ها با تابع (حتی داینامیک)
✔️ پشتیبانی از Yup و Zod برای اعتبارسنجی هر مرحله
✔️ مقدار پیش‌فرض برای هر فیلد
✔️ امکان تعیین wrapper برای هر View (مثل Card یا Stepper UI)
✔️ جداسازی کامل Logic از UI
✔️ هماهنگ با React Hook Form

🧪 یه مثال واقعی

orchestration: {
  user: { next: () => 'address' },
  address: {
    next: (data) => data.city === 'Tehran' ? 'special' : 'confirm',
    previous: () => 'user',
  },
  confirm: { previous: () => 'address' }
}

تو همین چند خط، منطق رفت و برگشت بین مراحل فرم رو کنترل کردی. بدون حتی یه خط useState یا شرط تودرتو.

🔗 لینک‌ها

📦 نصب از npm:

npm install smartstepper

🌍 صفحه گیت‌هاب:
https://github.com/Miladxsar23/smartstepper

🎯 دموی زنده (بدون نیاز به نصب):
https://codesandbox.io/p/sandbox/g8g8c7

✅ برای کی مناسبه؟

اگه تو هم مثل من، فرم‌هایی می‌سازی که بیش از ۱ مرحله دارن
و از مدیریت دستی و باگ‌های ناشی از کدهای پراکنده خسته شدی،
SmartStepper ممکنه همون چیزی باشه که لازم داشتی.

⭐️ یه لطف: اگه به دردت خورد...

به پروژه یه ستاره تو گیتهاب بزن که بدونم مفید بوده برات
یا اگه سوال یا پیشنهادی داشتی، خوشحال می‌شم تو Issues یا Discussion بهم بگی.

🧵 پ.ن:

تجربه تو از ساخت فرم‌های چندمرحله‌ای چطور بوده؟
تا حالا از کتابخونه خاصی استفاده کردی؟
توی کامنت‌ها بنویس، خوشحال می‌شم بخونم.