Technical Tutorials

لم يعد إنشاء نظام تصميم قوي رفاهية، بل أصبح ضرورة للتطبيقات الحديثة. يربط هذا النظام بين التصميم والهندسة، مما يضمن الاتساق والقابلية للتوسع وسهولة الصيانة. ومع ذلك، فإن دمج نظام التصميم مع أطر عمل حديثة تعتمد على الأدوات مثل Tailwind CSS والمعايير الصارمة لإمكانية الوصول يمكن أن يكون معقداً. يوضح لك هذا الدليل كيفية بناء نظام تصميم أساسي باستخدام Storybook و Tailwind CSS واختبار إمكانية الوصول تلقائياً.

لماذا هذه المجموعة التقنية؟

يوفر Storybook بيئة معزولة لتطوير مكونات واجهة المستخدم، مما يتيح لك بناء واختبار وتوثيق المكونات بشكل مستقل عن التطبيق الرئيسي الخاص بك. يوفر Tailwind CSS طريقة سريعة لتنسيق هذه المكونات دون الحاجة إلى التبديل بين ملفات JavaScript وملفات CSS. وأخيراً، يضمن اختبار إمكانية الوصول تلقائياً أن تكون مكوناتك شاملة منذ اليوم الأول، حيث يكشف عن مشكلات مثل العناوين المفقودة أو تباين الألوان غير الكافي قبل وصولها إلى بيئة الإنتاج.

إعداد المشروع والتكوين

ابدأ بإنشاء مشروع Storybook جديد. إذا كنت تستخدم تنفيذًا خاصًا بإطار عمل معين (مثل React أو Vue)، فإن عملية التثبيت تختلف قليلاً، لكن المبادئ الأساسية تظل كما هي. بمجرد التثبيت، تحتاج إلى تكوين Tailwind CSS داخل رأس معاينة Storybook.

أنشئ ملفاً باسم preview-head.html في دليل تكوين Storybook الخاص بك. يسمح لك هذا الملف بحقن الأنماط أو النصوص البرمجية العالمية في معاينة كل قصة. أضف ملف الأنماط الخاص بـ 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",
    // other addons...
  ],
};

بمجرد التكوين، سيقوم Storybook بحقن لوحة إمكانية الوصول تلقائياً في المعاينة. ستسلط هذه اللوحة الضوء على أي انتهاكات يتم العثور عليها أثناء عرض مكونك. على سبيل المثال، إذا نسيت توفير aria-label على زر أيقونة، فسيشير axe-core إلى ذلك على الفور.

التكامل مع Tailwind Typography

بينما يتعامل Tailwind مع التخطيط والأنماط المساعدة، فإن إضافة @tailwindcss/typography ضرورية للمكونات الغنية بالمحتوى مثل المقالات أو التوثيق داخل نظام التصميم الخاص بك. فهي توفر مجموعة من فئات "prose" التي تنسق محتوى HTML تلقائياً دون الحاجة إلى فئات مساعدة فردية على كل وسم.

قم بتثبيت الإضافة:

npm install -D @tailwindcss/typography

ثم قم بتمكينها في ملف tailwind.config.js:

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

الآن، يمكنك تغليف أي كتلة محتوى في <div className="prose"> لتطبيق أنماط طباعية متسقة وقابلة للوصول على الفور.

الخاتمة

إن بناء نظام تصميم من الصفر هو مهمة كبيرة، ولكن الاستفادة من Storybook و Tailwind CSS واختبار إمكانية الوصول تلقائياً توفر أساساً متيناً. تشجع هذه المجموعة التقنية على إعادة استخدام المكونات، وتفرض أنماطاً متسقة، وتعطي الأولوية للشمولية. من خلال دمج هذه الأدوات مبكراً في سير عمل التطوير الخاص بك، توفر الوقت على المدى الطويل وتنتج منتجاً أكثر قابلية للصيانة وإمكانية الوصول. تذكر، إمكانية الوصول ليست فكرة لاحقة؛ بل هي جزء أساسي من الهندسة الجيدة.