Technical Tutorials

Güçlü bir tasarım sistemi oluşturmak artık modern web uygulamaları için bir lüks değil, bir zorunluluktur. Tasarım ile mühendislik arasındaki boşluğu doldurarak tutarlılık, ölçeklenebilirlik ve sürdürülebilirlik sağlar. Ancak, bir tasarım sistemini modern utility-first çerçeveler olan Tailwind CSS ve sıkı erişilebilirlik standartlarıyla entegre etmek karmaşık olabilir. Bu rehber, Storybook, Tailwind CSS ve otomatik erişilebilirlik testi kullanarak temel bir tasarım sistemi oluşturmanıza adım adım yardımcı olur.

Neden Bu Yığın (Stack)?

Storybook, UI bileşenlerini geliştirmek için izole bir ortam sağlar; böylece bileşenleri ana uygulamanızdan bağımsız olarak oluşturabilir, test edebilir ve belgeleyebilirsiniz. Tailwind CSS, bu bileşenleri stilize etmenin hızlı bir yolunu sunar ve JavaScript ile CSS dosyaları arasında geçiş yapma ihtiyacını ortadan kaldırır. Son olarak, otomatik erişilebilirlik testi, bileşenlerinizin ilk günden itibaren kapsayıcı olmasını sağlar; üretim ortamına ulaşmadan önce eksik etiketler veya yetersiz renk kontrastı gibi sorunları tespit eder.

Proje Kurulumu ve Yapılandırması

Yeni bir Storybook projesi başlatarak başlayın. Belirli bir çerçeve (React veya Vue gibi) kullanıyorsanız, kurulum süreci biraz farklılık gösterebilir ancak temel prensipler aynı kalır. Kurulum tamamlandıktan sonra, Tailwind CSS'i Storybook önizleme başlığı (preview head) içinde yapılandırmanız gerekir.

Storybook yapılandırma dizininizde preview-head.html adında bir dosya oluşturun. Bu dosya, her hikaye önizlemesine global stiller veya betikler eklemenize olanak tanır. Derlenmiş Tailwind CSS stil sayfanızı buraya ekleyin.

<link href="/path/to/your/dist/tailwind.css" rel="stylesheet">

Alternatif olarak, Vite veya Webpack gibi bir derleme aracı kullanıyorsanız, Tailwind'i preview.js veya preview.ts dosyanızda içe aktarabilirsiniz:

import './styles.css';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Erişilebilir Bileşenler Oluşturma

Basit bir Düğme (Button) bileşeni oluşturalım. Erişilebilirliğin anahtarı semantik HTML'dir. Düğme öğelerinizin <div> veya olay dinleyicileri olan <span> değil, gerçek <button> etiketleri olduğundan emin olun. Odaklanma ve üzerine gelme gibi durumları yönetmek için Tailwind sınıflarını kullanın.

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 sınıfına dikkat edin. Bu, Tab tuşları üzerinden gezinen klavye kullanıcıları için hayati önem taşır. Görünür bir odak göstergesi olmadan kullanıcı deneyimi ciddi şekilde bozulur.

Otomatik Erişilebilirlik Testi

Erişilebilirlik kontrollerini otomatikleştirmek için @storybook/addon-a11y'i axe-core ile birlikte kullanacağız. Bu eklenti, her hikayede WCAG 2.1 AA uyumluluk kontrollerini çalıştırır.

Eklentiyi paket yöneticiniz kullanarak yükleyin:

npm install -D @storybook/addon-a11y

Bunu main.js veya main.ts yapılandırma dosyanıza ekleyin:

module.exports = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-a11y",
    // diğer eklentiler...
  ],
};

Yapılandırıldıktan sonra, Storybook otomatik olarak önizlemeye bir erişilebilirlik paneli enjekte edecektir. Bu panel, bileşeninizin oluşturulması sırasında bulunan ihlalleri vurgulayacaktır. Örneğin, bir simge düğmesine aria-label sağlamayı unutursanız, axe-core bunu hemen işaretleyecektir.

Tailwind Tipografi ile Entegrasyon

Tailwind düzen ve yardımcı stilleri yönetirken, @tailwindcss/typography eklentisi tasarım sisteminizdeki makaleler veya dokümantasyon gibi içerik açısından zengin bileşenler için temel öneme sahiptir. Her etikete ayrı ayrı yardımcı sınıf uygulamak yerine, HTML içeriğini otomatik olarak stilize eden bir dizi prose sınıfı sağlar.

Eklentiyi yükleyin:

npm install -D @tailwindcss/typography

Ardından tailwind.config.js içinde etkinleştirin:

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

Böylece, tutarlı ve erişilebilir tipografi stillerini anında uygulamak için herhangi bir içerik bloğunu <div className="prose"> içinde sarabilirsiniz.

Sonuç

Sıfırdan bir tasarım sistemi oluşturmak önemli bir çaba gerektirir, ancak Storybook, Tailwind CSS ve otomatik erişilebilirlik testinden yararlanmak sağlam bir temel sağlar. Bu yığın, bileşen yeniden kullanılabilirliğini teşvik eder, tutarlı stil uygulamayı zorunlu kılar ve kapsayıcılığı önceliklendirir. Bu araçları geliştirme iş akışınızın erken aşamalarında entegre ederek uzun vadede zaman kazanır ve daha sürdürülebilir, erişilebilir bir ürün oluşturursunuz. Unutmayın, erişilebilirlik bir sonradan düşünce değildir; iyi mühendisliğin temel bir parçasıdır.