ایجاد یک سیستم طراحی قدرتمند دیگر یک لوکس نیست، بلکه برای برنامههای وب مدرن ضروری است. این سیستم شکاف بین طراحی و مهندسی را پر میکند و ثبات، مقیاسپذیری و قابلیت نگهداری را تضمین میکند. با این حال، یکپارچهسازی یک سیستم طراحی با چارچوبهای مدرن اولویتدهی به utility مانند Tailwind CSS و استانداردهای سختگیرانه دسترسیپذیری میتواند پیچیده باشد. این راهنما شما را در ساخت یک سیستم طراحی پایهای با استفاده از Storybook، Tailwind CSS و تست خودکار دسترسیپذیری راهنمایی میکند.
چرا این استک؟
Storybook یک محیط ایزوله برای توسعه اجزای رابط کاربری فراهم میکند که به شما امکان میدهد اجزا را به صورت مستقل از برنامه اصلی خود بسازید، آزمایش کنید و مستندسازی نمایید. Tailwind CSS راهی سریع برای استایلدهی به این اجزا بدون نیاز به سوییچ کردن بین فایلهای JavaScript و CSS ارائه میدهد. در نهایت، تست خودکار دسترسیپذیری تضمین میکند که اجزای شما از روز اول فراگیر باشند و مشکلاتی مانند برچسبهای مفقود یا کنتراست رنگی ناکافی را قبل از رسیدن به محیط تولید شناسایی کند.
راهاندازی و پیکربندی پروژه
ابتدا یک پروژه Storybook جدید را راهاندازی کنید. اگر از پیادهسازیهای خاص چارچوب (مانند React یا Vue) استفاده میکنید، فرآیند نصب کمی متفاوت خواهد بود، اما اصول اصلی یکسان باقی میمانند. پس از نصب، باید Tailwind CSS را در هدر پیشنمایش Storybook پیکربندی کنید.
فایلی به نام preview-head.html را در دایرکتوری پیکربندی Storybook خود ایجاد کنید. این فایل به شما امکان میدهد سبکها یا اسکریپتهای سراسری را در هر پیشنمایش داستان تزریق کنید. فایل استایل compiled Tailwind CSS خود را اینجا اضافه کنید.
<link href="/path/to/your/dist/tailwind.css" rel="stylesheet">در عوض، اگر از ابزاری مانند Vite یا Webpack استفاده میکنید، میتوانید Tailwind را در فایل preview.js یا preview.ts خود ایمپورت کنید:
import './styles.css';
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};ساخت اجزای دسترسیپذیر
بیایید یک کامپوننت دکمه ساده ایجاد کنیم. کلید دسترسیپذیری، HTML معنایی است. مطمئن شوید که عناصر دکمه شما تگهای واقعی <button> هستند، نه <div>ها یا <span>هایی با شنوندگان رویداد. از کلاسهای Tailwind برای مدیریت حالتهایی مانند فوکوس و هاور استفاده کنید.
import React from 'react';
export const Button = ({ variant = 'primary', children, ...props }) => {
const baseStyles = "px-4 py-2 rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
const variants = {
primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500",
};
return (
<button className={`${baseStyles} ${variants[variant]}`} {...props}>
{children}
</button>
);
};به کلاس focus:ring-2 توجه کنید. این مورد برای کاربران کیبورد که از کلیدهای Tab برای پیمایش استفاده میکنند، حیاتی است. بدون نشانگر فوکوس قابل مشاهده، تجربه کاربری به شدت کاهش مییابد.
تست خودکار دسترسیپذیری
برای خودکارسازی بررسیهای دسترسیپذیری، ما از @storybook/addon-a11y ترکیب شده با axe-core استفاده خواهیم کرد. این افزونه بررسیهای انطباق WCAG 2.1 AA را روی هر داستان اجرا میکند.
افزونه را با استفاده از مدیر بسته خود نصب کنید:
npm install -D @storybook/addon-a11yآن را به فایل پیکربندی main.js یا main.ts خود اضافه کنید:
module.exports = {
stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-a11y",
// سایر افزونهها...
],
};پس از پیکربندی، Storybook به طور خودکار یک پنل دسترسیپذیری را در پیشنمایش تزریق میکند. این پنل هر نقضی را که در حین رندر کامپوننت شما پیدا شود، برجسته میکند. به عنوان مثال، اگر فراموش کنید یک aria-label روی یک دکمه آیکون ارائه دهید، axe-core بلافاصله آن را پرچمگذاری میکند.
یکپارچهسازی با Tailwind Typography
در حالی که Tailwind مدیریت چیدمان و سبکهای utility را بر عهده دارد، پلاگین @tailwindcss/typography برای اجزای غنی از محتوا مانند مقالات یا مستندات در سیستم طراحی شما ضروری است. این پلاگین مجموعهای از کلاسهای prose را فراهم میکند که به طور خودکار محتوای HTML را استایلدهی میکنند و نیازی به استفاده از کلاسهای utility جداگانه برای هر تگ ندارند.
پلاگین را نصب کنید:
npm install -D @tailwindcss/typographyسپس آن را در tailwind.config.js خود فعال کنید:
module.exports = {
// ...
plugins: [
require('@tailwindcss/typography'),
],
}اکنون میتوانید هر بلوک محتوا را در <div className="prose"> قرار دهید تا سبکهای تایپوگرافی سازگار و دسترسیپذیر را به سرعت اعمال کنید.
نتیجهگیری
ساخت یک سیستم طراحی از صفر کار بزرگی است، اما بهرهگیری از Storybook، Tailwind CSS و تست خودکار دسترسیپذیری پایهای محکم فراهم میکند. این استک استفاده مجدد از اجزا را تشویق میکند، سبکدهی سازگار را اعمال میکند و اولویت را به فراگیری میدهد. با یکپارچهسازی این ابزارها در مراحل اولیه گردش کار توسعه خود، در بلندمدت زمان صرفهجویی میکنید و محصولی قابل نگهداریتر و دسترسیپذیرتر ایجاد میکنید. به یاد داشته باشید، دسترسیپذیری یک فکر اضافی نیست؛ بلکه بخشی اساسی از مهندسی خوب است.