بر توسعه فرانت‌اند با استوری‌بوک مسلط شوید. یاد بگیرید چگونه کامپوننت‌های UI را به صورت ایزوله بسازید، تست کنید و مستندسازی نمایید تا همکاری و قابلیت نگهداری بهبود یابد.
استوری‌بوک فرانت‌اند: راهنمای جامع محیط‌های توسعه کامپوننت
در چشم‌انداز همواره در حال تحول توسعه فرانت‌اند، ساخت رابط‌های کاربری (UI) قوی و قابل نگهداری از اهمیت بالایی برخوردار است. استوری‌بوک (Storybook) به عنوان یک ابزار پیشرو برای پاسخ به این چالش ظهور کرده است و محیطی قدرتمند برای توسعه کامپوننت‌های UI به صورت ایزوله فراهم می‌کند. این راهنما یک بررسی جامع از استوری‌بوک ارائه می‌دهد که مفاهیم اصلی، مزایا، پیاده‌سازی عملی و تکنیک‌های پیشرفته برای بهبود گردش کار توسعه فرانت‌اند شما را پوشش می‌دهد.
استوری‌بوک چیست؟
استوری‌بوک یک ابزار متن‌باز برای توسعه کامپوننت‌های UI به صورت ایزوله است. این ابزار یک محیط اختصاصی فراهم می‌کند که در آن می‌توانید کامپوننت‌ها را مستقل از برنامه اصلی خود بسازید، تست کنید و مستندسازی نمایید. این ایزوله‌سازی به شما امکان می‌دهد تا بر روی عملکرد و ظاهر کامپوننت تمرکز کنید بدون اینکه منطق پیچیده برنامه یا وابستگی‌ها مانع شما شوند.
استوری‌بوک را به عنوان یک راهنمای سبک (style guide) زنده یا کتابخانه کامپوننت در نظر بگیرید که کامپوننت‌های UI شما را به صورت بصری به نمایش می‌گذارد. این ابزار به توسعه‌دهندگان، طراحان و ذی‌نفعان اجازه می‌دهد تا کامپوننت‌ها را به روشی منسجم و سازمان‌یافته مرور کرده و با آن‌ها تعامل داشته باشند، که این امر باعث تقویت همکاری و تضمین درک مشترک از UI می‌شود.
چرا از استوری‌بوک استفاده کنیم؟ مزایا
ادغام استوری‌بوک در گردش کار توسعه فرانت‌اند شما مزایای بسیاری را ارائه می‌دهد:
- بهبود قابلیت استفاده مجدد کامپوننت: توسعه کامپوننت‌ها به صورت ایزوله، رویکردی ماژولار را تشویق می‌کند و باعث می‌شود قابلیت استفاده مجدد آن‌ها در بخش‌های مختلف برنامه شما یا حتی در پروژه‌های متعدد بیشتر شود.
- افزایش سرعت توسعه: استوری‌بوک با اجازه دادن به شما برای تمرکز بر روی کامپوننت‌های جداگانه بدون سربار اجرای کل برنامه، توسعه را تسریع می‌بخشد. شما می‌توانید به سرعت بر روی طراحی‌ها و عملکردهای کامپوننت تکرار کنید.
- تست ساده‌شده: استوری‌بوک تست کامپوننت‌ها در حالت‌ها و سناریوهای مختلف را آسان‌تر می‌کند. شما می‌توانید «استوری‌هایی» (stories) ایجاد کنید که موارد استفاده مختلف را نشان می‌دهند و به صورت بصری تأیید کنید که کامپوننت طبق انتظار عمل می‌کند.
- مستندسازی جامع: استوری‌بوک به عنوان یک مستند زنده برای کامپوننت‌های UI شما عمل می‌کند. این ابزار به طور خودکار مستنداتی را بر اساس کد کامپوننت و استوری‌های شما تولید می‌کند و درک نحوه استفاده و سفارشی‌سازی آن‌ها را برای دیگران آسان می‌سازد.
- همکاری بهتر: استوری‌بوک یک مرکز اصلی برای همکاری توسعه‌دهندگان، طراحان و ذی‌نفعان بر روی کامپوننت‌های UI فراهم می‌کند. این ابزار امکان بازبینی‌های بصری، بازخورد و درک مشترک از کتابخانه UI را فراهم می‌کند.
- تشخیص زودهنگام مشکلات: با توسعه کامپوننت‌ها به صورت ایزوله، می‌توانید مشکلات را در مراحل اولیه چرخه توسعه، قبل از اینکه پیچیده‌تر و پرهزینه‌تر شوند، شناسایی و برطرف کنید.
- سازگاری سیستم طراحی: استوری‌بوک با فراهم کردن یک مرجع بصری برای تمام کامپوننت‌های UI، سازگاری سیستم طراحی را ترویج می‌دهد. این امر تضمین می‌کند که کامپوننت‌ها به دستورالعمل‌های طراحی پایبند بوده و ظاهر و احساسی یکپارچه در سراسر برنامه داشته باشند.
شروع کار با استوری‌بوک
راه‌اندازی استوری‌بوک ساده است و به طور یکپارچه با فریم‌ورک‌های محبوب فرانت‌اند مانند React، Vue و Angular ادغام می‌شود.
نصب
ساده‌ترین راه برای نصب استوری‌بوک استفاده از رابط خط فرمان (CLI) آن است. ترمینال خود را باز کرده و به دایرکتوری پروژه خود بروید. سپس، دستور زیر را اجرا کنید:
npx storybook init
این دستور به طور خودکار فریم‌ورک پروژه شما را شناسایی کرده و وابستگی‌های لازم را نصب می‌کند. همچنین یک دایرکتوری .storybook در پروژه شما ایجاد می‌کند که حاوی فایل‌های پیکربندی استوری‌بوک است.
ایجاد اولین استوری (Story)
یک «استوری» در استوری‌بوک، یک حالت یا مورد استفاده خاص از یک کامپوننت را نشان می‌دهد. برای ایجاد یک استوری، معمولاً یک فایل جدید در دایرکتوری src/stories پروژه خود ایجاد می‌کنید (یا مکانی مشابه، بسته به ساختار پروژه شما). فایل باید پسوند .stories.js یا .stories.jsx (برای React) یا معادل آن برای Vue یا Angular داشته باشد.
در اینجا یک مثال ساده از یک استوری برای کامپوننت دکمه در React آورده شده است:
// src/stories/Button.stories.jsx
import React from 'react';
import { Button } from './Button'; // Assuming your Button component is in Button.jsx
export default {
title: 'Example/Button',
component: Button,
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Primary Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
label: 'Secondary Button',
};
export const Large = Template.bind({});
Large.args = {
size: 'large',
label: 'Large Button',
};
export const Small = Template.bind({});
Small.args = {
size: 'small',
label: 'Small Button',
};
در این مثال، ما یک کامپوننت به نام Button تعریف کرده و چهار استوری ایجاد می‌کنیم: Primary، Secondary، Large و Small. هر استوری یک تنوع متفاوت از کامپوننت دکمه با props های مختلف را نشان می‌دهد.
اجرای استوری‌بوک
برای اجرای استوری‌بوک، به سادگی از دستور زیر استفاده کنید:
npm run storybook
این دستور یک سرور توسعه محلی را راه‌اندازی کرده و استوری‌بوک را در مرورگر شما باز می‌کند. شما باید استوری‌های خود را در رابط کاربری استوری‌بوک مشاهده کنید.
مفاهیم اصلی استوری‌بوک
برای استفاده مؤثر از استوری‌بوک، درک مفاهیم اصلی آن مهم است:
- کامپوننت‌ها (Components): بلوک‌های سازنده اساسی UI شما. استوری‌بوک برای نمایش و توسعه کامپوننت‌های جداگانه به صورت ایزوله طراحی شده است.
- استوری‌ها (Stories): حالت‌ها یا موارد استفاده خاص یک کامپوننت را نشان می‌دهند. آن‌ها props و داده‌هایی را که به کامپوننت منتقل می‌شوند تعریف می‌کنند و به شما امکان می‌دهند سناریوهای مختلف را تجسم و تست کنید.
- افزونه‌ها (Addons): عملکرد استوری‌بوک را با ویژگی‌های مختلفی مانند تم‌بندی، تست دسترسی‌پذیری و تولید مستندات گسترش می‌دهند.
- دکوراتورها (Decorators): کامپوننت‌ها را با قابلیت‌های اضافی، مانند فراهم کردن زمینه (context) یا استایل‌دهی، در بر می‌گیرند.
- آرگومان‌ها (Args): (که قبلاً با نام knobs شناخته می‌شدند) به شما امکان می‌دهند تا به صورت تعاملی props یک کامپوننت را در رابط کاربری استوری‌بوک تغییر دهید. این برای کاوش در تنوع‌ها و پیکربندی‌های مختلف مفید است.
- کنترل‌ها (Controls): عناصر رابط کاربری برای تغییر آرگومان‌ها، که تنظیم ویژگی‌های کامپوننت را در مرورگر آسان می‌کند.
تکنیک‌های پیشرفته استوری‌بوک
هنگامی که اصول اولیه استوری‌بوک را فرا گرفتید، می‌توانید تکنیک‌های پیشرفته‌تری را برای بهبود بیشتر گردش کار خود کشف کنید:
استفاده از افزونه‌ها (Addons)
استوری‌بوک طیف گسترده‌ای از افزونه‌ها را ارائه می‌دهد که می‌توانند عملکرد آن را گسترش دهند. برخی از افزونه‌های محبوب عبارتند از:
- @storybook/addon-knobs: (منسوخ شده و با Args/Controls جایگزین شده است) به شما امکان می‌دهد تا به صورت تعاملی props یک کامپوننت را در رابط کاربری استوری‌بوک تغییر دهید.
- @storybook/addon-actions: کنترل‌کننده‌های رویداد (event handlers) را که توسط تعاملات کامپوننت فعال می‌شوند، نمایش می‌دهد.
- @storybook/addon-links: پیوندهایی بین استوری‌ها ایجاد می‌کند و به شما امکان می‌دهد بین حالت‌های مختلف کامپوننت جابجا شوید.
- @storybook/addon-docs: مستنداتی برای کامپوننت‌های شما بر اساس کد و استوری‌هایتان تولید می‌کند.
- @storybook/addon-a11y: بررسی‌های دسترسی‌پذیری را روی کامپوننت‌های شما انجام می‌دهد تا اطمینان حاصل شود که برای افراد دارای معلولیت قابل استفاده هستند.
- @storybook/addon-viewport: به شما امکان می‌دهد کامپوننت‌های خود را در اندازه‌های مختلف صفحه و دستگاه‌ها مشاهده کنید.
- @storybook/addon-backgrounds: به شما امکان می‌دهد رنگ پس‌زمینه استوری‌های خود را برای تست کنتراست کامپوننت تغییر دهید.
- @storybook/addon-themes: به شما امکان می‌دهد بین تم‌های مختلف در استوری‌بوک خود جابجا شوید.
برای نصب یک افزونه، از دستور زیر استفاده کنید:
npm install @storybook/addon-name --save-dev
سپس، افزونه را به فایل .storybook/main.js خود اضافه کنید:
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5',
},
features: {
interactionsDebugger: true,
},
};
استفاده از دکوراتورها (Decorators)
دکوراتورها توابعی هستند که کامپوننت‌های شما را با قابلیت‌های اضافی در بر می‌گیرند. آن‌ها می‌توانند برای فراهم کردن زمینه (context)، استایل‌دهی یا سایر پیکربندی‌های سراسری استفاده شوند.
در اینجا یک مثال از یک دکوراتور آورده شده است که یک زمینه تم (theme context) را برای کامپوننت‌های شما فراهم می‌کند:
// src/stories/decorators/ThemeProvider.jsx
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme'; // Your theme object
export const ThemeDecorator = (Story) => (
<ThemeProvider theme={theme}>
<Story />
</ThemeProvider>
);
برای استفاده از دکوراتور، آن را به پیکربندی استوری خود اضافه کنید:
// src/stories/Button.stories.jsx
import React from 'react';
import { Button } from './Button';
import { ThemeDecorator } from './decorators/ThemeProvider';
export default {
title: 'Example/Button',
component: Button,
decorators: [ThemeDecorator],
};
تست خودکار با استوری‌بوک
استوری‌بوک می‌تواند با ابزارهای مختلف تست برای خودکارسازی تست کامپوننت‌های UI شما ادغام شود. برخی از فریم‌ورک‌های محبوب تست عبارتند از:
- Jest: یک فریم‌ورک تست جاوااسکریپت که می‌توان از آن برای نوشتن تست‌های واحد برای کامپوننت‌های شما استفاده کرد.
- React Testing Library: یک کتابخانه تست که بر روی تست کامپوننت‌ها از دیدگاه کاربر تمرکز دارد.
- Cypress: یک فریم‌ورک تست سرتاسری (end-to-end) که می‌توان از آن برای تست کل برنامه، از جمله کامپوننت‌های UI، استفاده کرد.
- Playwright: مشابه Cypress، Playwright برای تست سرتاسری در مرورگرها و پلتفرم‌های مختلف استفاده می‌شود.
تیم استوری‌بوک همچنین کتابخانه‌ای به نام @storybook/testing-react (یا مشابه آن برای Vue/Angular) را نگهداری می‌کند که ابزارهایی برای تست کامپوننت‌های شما در استوری‌بوک فراهم می‌کند.
منتشر کردن استوری‌بوک شما
شما می‌توانید به راحتی استوری‌بوک خود را منتشر کرده و آن را با تیم خود یا جامعه گسترده‌تر به اشتراک بگذارید. چندین گزینه در دسترس است:
- Netlify: یک پلتفرم محبوب برای استقرار وب‌سایت‌های استاتیک، از جمله استوری‌بوک‌ها.
- GitHub Pages: یک سرویس میزبانی رایگان که توسط گیت‌هاب ارائه می‌شود و می‌توان از آن برای میزبانی استوری‌بوک شما استفاده کرد.
- Chromatic: یک پلتفرم مبتنی بر ابر که به طور خاص برای میزبانی و مدیریت استوری‌بوک‌ها طراحی شده است. Chromatic ویژگی‌هایی مانند تست رگرسیون بصری و ابزارهای همکاری را فراهم می‌کند.
- AWS S3: شما می‌توانید فایل‌های استاتیک استوری‌بوک خود را در یک باکت Amazon S3 میزبانی کنید.
برای منتشر کردن استوری‌بوک خود، معمولاً باید یک نسخه استاتیک از استوری‌بوک خود را با استفاده از دستور زیر بسازید:
npm run build-storybook
این دستور یک دایرکتوری storybook-static (یا مشابه آن) حاوی فایل‌های استاتیک ایجاد می‌کند که می‌توانند در پلتفرم میزبانی انتخابی شما مستقر شوند.
بهترین شیوه‌ها برای استفاده از استوری‌بوک
برای به حداکثر رساندن مزایای استوری‌بوک، این بهترین شیوه‌ها را دنبال کنید:
- کامپوننت‌های خود را کوچک و متمرکز نگه دارید: کامپوننت‌های خود را طوری طراحی کنید که تا حد امکان کوچک و متمرکز باشند. این کار تست، استفاده مجدد و مستندسازی آن‌ها را آسان‌تر می‌کند.
- استوری‌های جامع بنویسید: استوری‌هایی ایجاد کنید که تمام حالت‌ها و موارد استفاده مختلف کامپوننت‌های شما را پوشش دهند. این تضمین می‌کند که کامپوننت‌های شما به طور کامل تست و مستند شده‌اند.
- از افزونه‌ها هوشمندانه استفاده کنید: افزونه‌هایی را انتخاب کنید که به نیازهای پروژه شما مرتبط هستند و از افزودن افزونه‌های بیش از حد خودداری کنید، زیرا این کار می‌تواند بر عملکرد تأثیر بگذارد.
- کامپوننت‌های خود را به طور کامل مستند کنید: از افزونه
@storybook/addon-docsبرای تولید مستندات برای کامپوننت‌های خود استفاده کنید. این کار درک نحوه استفاده و سفارشی‌سازی آن‌ها را برای دیگران آسان‌تر می‌کند. - استوری‌بوک را در گردش کار توسعه خود ادغام کنید: استوری‌بوک را به بخشی جدایی‌ناپذیر از گردش کار توسعه خود تبدیل کنید. از آن برای توسعه، تست و مستندسازی کامپوننت‌های UI خود از ابتدای پروژه استفاده کنید.
- یک ساختار واضح برای کتابخانه کامپوننت ایجاد کنید: کتابخانه کامپوننت خود را به روشی منطقی و منسجم سازماندهی کنید. این کار پیدا کردن و استفاده مجدد از کامپوننت‌ها را برای دیگران آسان‌تر می‌کند.
- استوری‌بوک خود را به طور منظم نگهداری کنید: استوری‌بوک خود را با آخرین تغییرات کامپوننت‌های UI خود به‌روز نگه دارید. این تضمین می‌کند که مستندات شما دقیق است و کامپوننت‌های شما همیشه در برابر آخرین کد تست می‌شوند.
- از کنترل نسخه استفاده کنید: پیکربندی و استوری‌های استوری‌بوک خود را در کنترل نسخه (مانند Git) ذخیره کنید تا تغییرات را ردیابی کرده و با دیگران همکاری کنید.
استوری‌بوک در فریم‌ورک‌های مختلف
در حالی که مفاهیم اصلی مشابه باقی می‌مانند، جزئیات پیاده‌سازی استوری‌بوک بسته به فریم‌ورک فرانت‌اندی که استفاده می‌کنید کمی متفاوت است.
استوری‌بوک برای ری‌اکت (React)
ری‌اکت یکی از محبوب‌ترین فریم‌ورک‌ها برای استفاده از استوری‌بوک است. مستندات رسمی استوری‌بوک منابع و مثال‌های عالی برای توسعه‌دهندگان ری‌اکت فراهم می‌کند.
استوری‌بوک برای ویو (Vue)
استوری‌بوک همچنین به طور یکپارچه با Vue.js ادغام می‌شود. کامپوننت‌های Vue را می‌توان به راحتی با رویکردی مشابه ری‌اکت به استوری‌بوک اضافه کرد.
استوری‌بوک برای انگولار (Angular)
توسعه‌دهندگان انگولار می‌توانند از استوری‌بوک برای ایجاد یک کتابخانه کامپوننت بصری برای برنامه‌های انگولار خود استفاده کنند. ادغام با Angular CLI فرآیند راه‌اندازی را ساده می‌کند.
دیدگاه‌های جهانی و مثال‌ها
هنگام استفاده از استوری‌بوک در پروژه‌های جهانی، مهم است که جنبه‌های بومی‌سازی و بین‌المللی‌سازی کامپوننت‌های UI خود را در نظر بگیرید. برای مثال:
- جهت متن (RTL/LTR): اطمینان حاصل کنید که کامپوننت‌های شما از هر دو جهت متن چپ-به-راست (LTR) و راست-به-چپ (RTL) پشتیبانی می‌کنند. می‌توانید از استوری‌بوک برای ایجاد استوری‌هایی استفاده کنید که کامپوننت‌ها را در هر دو جهت نمایش می‌دهند. استفاده از کتابخانه‌هایی مانند `styled-components` با پلاگین `rtlcss` را برای مدیریت خودکار تبدیل استایل‌ها در نظر بگیرید.
- فرمت‌های تاریخ و زمان: از فرمت‌بندی مناسب تاریخ و زمان بر اساس منطقه کاربر استفاده کنید. می‌توانید از کتابخانه‌هایی مانند `moment.js` یا `date-fns` برای فرمت صحیح تاریخ و زمان استفاده کنید. استوری‌هایی ایجاد کنید که کامپوننت‌ها را با فرمت‌های مختلف تاریخ و زمان نمایش می‌دهند.
- فرمت‌های ارز: مقادیر ارزی را با فرمت صحیح برای منطقه کاربر نمایش دهید. می‌توانید از کتابخانه‌هایی مانند `numeral.js` یا `Intl.NumberFormat` برای فرمت مقادیر ارزی استفاده کنید. استوری‌هایی ایجاد کنید که کامپوننت‌ها را با فرمت‌ها و نمادهای مختلف ارز نمایش می‌دهند.
- ترجمه: از کتابخانه‌های بین‌المللی‌سازی (i18n) برای ترجمه کامپوننت‌های UI خود به زبان‌های مختلف استفاده کنید. استوری‌بوک می‌تواند برای تجسم کامپوننت‌ها با ترجمه‌های مختلف استفاده شود. کتابخانه‌هایی مانند `i18next` معمولاً استفاده می‌شوند.
- دسترسی‌پذیری: به دستورالعمل‌های دسترسی‌پذیری وب پایبند باشید تا اطمینان حاصل شود که کامپوننت‌های UI شما برای افراد دارای معلولیت، صرف نظر از مکانشان، قابل استفاده هستند.
مثال: یک کامپوننت فرم را تصور کنید که به صورت جهانی استفاده می‌شود. در یک استوری استوری‌بوک، می‌توانید موارد زیر را نمایش دهید:
- فرم با برچسب‌ها و دستورالعمل‌های ترجمه شده به زبان اسپانیایی.
- همان فرم با چیدمان RTL برای کاربران عرب‌زبان نمایش داده شود.
- فرم یک فیلد تاریخ را با فرمت MM/DD/YYYY برای ایالات متحده و DD/MM/YYYY برای اروپا نمایش دهد.
نتیجه‌گیری
استوری‌بوک یک ابزار قدرتمند است که می‌تواند گردش کار توسعه فرانت‌اند شما را به طور قابل توجهی بهبود بخشد. با فراهم کردن یک محیط ایزوله برای توسعه کامپوننت‌های UI، قابلیت استفاده مجدد را ترویج می‌دهد، سرعت توسعه را افزایش می‌دهد، تست را ساده می‌کند و همکاری را تسهیل می‌بخشد. چه در حال ساخت یک وب‌سایت کوچک باشید یا یک برنامه در مقیاس بزرگ، استوری‌بوک می‌تواند به شما در ایجاد رابط‌های کاربری قوی، قابل نگهداری و منسجم کمک کند.
با پذیرش مفاهیم و تکنیک‌های ذکر شده در این راهنما، می‌توانید از پتانسیل کامل استوری‌بوک بهره‌مند شوید و تجربیات کاربری استثنایی برای مخاطبان جهانی خود بسازید.