وقتی که با پروژه های بزرگ سمت کاربر طرفیم، مدل کار کردنمون و نگاهمون به انجام دادن کار باید فرق کنه. اصلا یه طور دیگه ای باید ببینیم. دیگه بحث یه صفحه و دو صفحه و ... نیست! صحبت از یه چیز خیلی بزرگه. تو این مطلب میخوام استوری بوک رو بررسی کنم و بهتون بگم که چطور میتونه توی پروژه های بزرگ به دادمون برسه.
استوری بوک به صورت خیلی خلاصه٬ ابزاریه که به شما اجازه میده همه کامپوننت های خودتون رو یکجا ببینید، داکیومنت کنید، تست کنید، حالت های مختلف اش رو بررسی کنید و مطمئن بشید که همه اندازه ها دقیقه و خیلی کارای دیگه.
پروژه های بزرگ، معمولا از یه دیزاین سیستم طراحی شده برای اون محصول یا از یه دیزاین سیستم آماده ولی کاستوم شده استفاده میکنن. در هر صورت وجود این دیزاین سیستم برای پروژه های بزرگ ضروریه. حتی میتونم بگم هر پروژه ای چه بزرگ و چه کوچیک، ولی پروژه های بزرگ اگر چنین چیزی رو نداشته باشن به مرور زمان پیاده سازی و هزینه ایجاد تغییرات توشون به طور چشمگیری بالاتر میره.
حالا چی هست این دیزاین سیستم؟ یه ساختمون رو تصور کنید، از کلی اجزای مختلف تشکیل شده. در و پنجره و آجر و کلید و پریز و آسانسور و کابینت و ... هر کدوم این اجزا جزییات و رفتار خودشون رو دارن. بعضی هاشون کار خاصی انجام نمیدن ولی نمیشه که نباشن، مثل بلوک های سیمان یا آجر ها. بعضی ها هم که بیشتر جلوی چشم هستن مثل در و پنجره و کلید و پریز ها، یه رفتار هم دارن، مثلا در حالت باز و بسته و قفل داره. کلید ها حالت خاموش و روشن دارن، ممکنه ۲پل باشن یا تک پل و ...
ایده رو گرفتید دیگه؟ هر کدوم اینا رو تنها تنها و تک تک اگه ببینید یا بریزید روی زمین شکلشون شبیه یه ساختمون نمیشه ولی اگه درست کنار همدیگه قرار بگیرن و همه این اجزا کنار هم درست کار کنن میتونن تبدیل به یه خونه خوب بشن.
تعریف بهتر و کامل تر رو میتونید اینجا بخونید.
هر کدوم اون آجر ها، هر کدوم اون دکمه ها و در و پنجره و ... رو میشه برای ساختن هر خونه ای استفاده کرد! پس قابلیت استفاده مجدد دارند! البته متریال فیزیکی داستانش خیلی متفاوته ها ولی میخوام ایده رو بگیرید. تو یه صفحه وب مثال بزنیم.
یه دکمه یا یه لینک رو تصور کنید، اگر طراحی های پروداکت به صورتی باشه که توی همه صفحات شما ظاهر این دکمه و لینک یک شکل باشه پس عملا پیاده سازی این لینک و دکمه باید طوری انجام بشه که بشه همه جا ازش استفاده کرد.
اینطوری اگر نیاز به تغییری هم شد شما خیلی ساده کافیه یک فایل و یک کامپوننت رو تغییر بدید به جای اینکه ۱۰ جا رو عوض کنید. حجم کدتون خیلی کمتر میشه، تست کردنش خیلی راحت تر میشه و کلی چیزای دیگه.
توسعه یک اپلیکیشن به صورت Reusable یک هنره! یک کار خیلی خفنه! این همون چیزیه که باعث میشه شما از بقیه متمایز باشید.
در مورد بحث Reusablitiy صحبت زیاده ولی این مطلب قرار نیست روی این موضوع تمرکز داشته باشه اما قول میدم حتما در آینده بیشتر در موردش بنویسم.
استوری بوک یه ابزاره که بهتون کمک میکنه کامپوننت های دیزاین سیستم تون رو تک به تک تو یک صفحه پیاده سازی کنید و به صورت کاملاً ایزوله حالت هاش رو ببینید و تست کنید.
خب سوال اینه که مگه نمیشد قبلا اینکارو کرد؟ خب چرا ولی با استوری بوک اینکار خیلی راحت تر انجام میشه، علاوه بر این ها میشه کلی کار دیگه هم کنارش انجام بدیم. بریم جلو تر بیشتر آشنا میشیم باهاش.
دستور نصب کامل از روی صفحه داکیومنت خودش رو میتونید اینجا بخونید ولی خلاصه اش اینه:
npx storybook init
که یه پروژه با استوری بوک میسازه براتون. بعد اینکه پروژه ایجاد شد میتونید با این دستور اجراش کنید:
yarn storybook
این دستور توی پروژه تون رو می‌گرده و هر فایلی که این فرمت رو داشته باشه رو توی لیست نمایش میده
*.stories.[js | ts | jsx | tsx]
اسمشون باید با stories. تموم بشه. البته میتونید این موارد رو از فایل کانفیگ که تو این مسیره تغییر بدید
.storybook/main.js
به علاوه میتونید نحوه نمایش اولیه رو هم توی این فایل دستکاری کنید:
.storybook/preview.js
خب بعد اینکه پروژه استوری بوک اومد بالا، میتونید شروع کنید به پیاده سازی. من فرض میکنم شما آشنایی اولیه با موضوع Atomic Design دارید ولی این تعریف خلاصه اش هست:
کوچکترین المان های صفحه مثل دکمه ها، متن ها، عکس ها و ... هر کدوم یک اتم هستن. از کنار هم قرار گرفتن این اتم ها مولکول ها ساخته میشن، مثلا یک کارت برای محصول یک مولکول به حساب میاد. از کنار هم قرار گرفتن مولکول ها ارگانیسم ها ساخته میشن، مثلا فیلتر های صفحه لیست محصولات و از کنار هم قرار گرفتن ارگانیسم ها template ها ساخته میشن و در نهایت به page میرسیم.
اگه در مورد Atomic Design میخواید بیشتر یاد بگیرید اینو ببینید.
بنا بر این مدلی که تعریف کردم، اولین قدم پیاده سازی صفحات برای ما میشن اتم ها. کوچکترین اجزای صفحه. میتونید هر طور که دوست دارید فولدر بندی تون رو انجام بدید، من وارد اون بحث نمیشم ولی این مثال رو ببینید:
هر فولدر شامل اجزای کامل یک اِلِمان میشه به همراه یه فایل stories که داخلش استوری های مربوط بهش قرار گرفته.
تو ساده ترین حالت ممکن صفحه story شما این ساختار رو داره
اول کامپوننت مرتبط با استوری رو import می‌کنید که میشه همون Button اینجا.
تو قسمت export default عنوان استوری رو قرار میدید، اینجا Button استفاده شده ولی میتونید طبقه بندی هم داشته باشید که با / از هم جدا بشن، مثلا Atoms/Button. اینطوری توی استوری بوک یک فولدر نمایش داده میشه که یه Button داخلشه.
در نهایت varient ها مختلف رو میتونید تک تک export کنید. اینجا از Primary استفاده شده و مقادیر مربوط بهش پاس داده شده.
یه قدم ببریم جلوتر این مثال رو:
میتونید از Template ها استفاده کنید برای زمانی که میخواید پارامتر های مختلف رو به شکل آپشن به کامپوننت پاس بدید. استوری بوک این قابلیت رو به شما میده که توی runtime این مقادیر رو (شبیه یه داشبورد) تغییر بدید و نتیجه رو فوری روی صفحه ببینید.
نتیجه کار تا اینجا:
هر کدوم از varient های Button به کمک args هندل میشن. انگار دارید چندتا المان میزارید تو صفحه با prop های متفاوت. تو پایین صفحه هم کنترل دارید روی انواع ورودی ها و prop هایی که این کامپوننت دریافت میکنه.
برای درک عمیق وتر و مطالعه بیشتر ساختار استوری ها میتونید اینجا رو ببینید
پیشنهادم اینه که حتما از typescript برای ایجاد story ها استفاده کنید (و البته اگر در کل پروژه هم تایپسکریپت دارید که چه بهتر و شما از بهشتیان هستید).
از این طریق استوری بوک به صورت خودکار میتونه تمام prop هایی که کامپوننت ها دریافت میکنن به همراه تایپ شون رو متوجه بشه و لیست کنه. اگر هم هر کدوم رو نخواستید میتونید مخفیش کنید.
ریلود و ابزار های زوم که مشخصه ولی بقیه اش:
میتونید به کمک این ابزار کامپوننت تون رو تو حالت dark mode هم بررسی کنید. اگه نیاز بود رنگ های پس زمینه بیشتری داشته باشید میتونید تو فایل preview خود استوری بوک کانفیگ کنید. اینجا رو ببینید.
تو این حالت میتونید خیلی راحت alignment ها رو ببینید و بر اساس اونا طراحی ها رو پیاده کنید.
با اندازه های مختلف حالت responsive رو میتونید از اینجا کنترل کنید، این سایز ها رو میتونید هر طور که دوست دارید کانفیگ کنید.
یه حالت شبیه inspector کروم دارید که میتونید تک تک فواصل و المان ها رو ببینید و inspect کنید.
قسمت های دیگه
میتونید به کمک interactions و actions برای استوری ها interaction تعریف کنید، یه جورایی شبیه cypress میمونه. مثلا یه فرم طراحی کردید میخواید حالات مختلف اش رو ببینید.
توی قسمت docs میتونید همه حالت های استوری رو document کنید. من شخصا خیلی از این استفاده نکردم ولی چیز خوبیه. با فرمت mdx کار میکنه.
