feat: Design system foundation — Storybook + design tokens

[SNAPKITTYWEST]

Design System Foundation for StormCom

What's included:

• Storybook Setup — Next.js preset, global theme provider, dark mode toggle
• Design Tokens Export Layer — Centralized TypeScript tokens for colors, spacing, typography, shadows, animations
• 5 Component Stories — Button, Card, Input, Select, Dialog (with all variants and states)
• Documentation — Design tokens system guide with usage examples

Why this matters:

This unblocks Phase 2 → Phase 3 UI development. All downstream UI work depends on this foundation.

Files Changed:

• — 3 config files
• — 6 token modules (820 lines)
• — 5 story files (500+ lines)
• — Design tokens documentation

How to use:

1. Run Storybook: npm run storybook
2. Import tokens: import { colors, spacing } from '@/lib/design-tokens'
3. Browse component stories at http://localhost:6006

---

Built by SnapKitty Design System | Author: Ahmad Ali Parr

[github-actions]

👋 Thanks for opening your first pull request in StormCom!

A maintainer will review your PR soon. Please make sure:

• Your PR follows our
  Contributing Guidelines
• All CI checks pass
• You've added appropriate tests
• Documentation has been updated (if needed)

We appreciate your contribution to making StormCom better! 🚀

[afsan123]

@SNAPKITTYWEST
Kindly describe all the changes in the PR

[SNAPKITTYWEST]

English

Thanks for taking a look!

Here's a breakdown of the changes included in this PR.

Summary

This PR establishes the initial design system foundation for StormCom. The goal is to provide a shared visual language and component development environment before additional UI features are built.

Changes

1. Storybook configuration

• Added Storybook configuration using the Next.js preset.
• Configured global theme support.
• Added dark mode switching for component previews.

2. Design tokens

• Introduced centralized design tokens for:
  • Colors
  • Typography
  • Spacing
  • Border radius
  • Shadows
  • Animation values

These tokens are intended to become the single source of truth for UI styling.

3. Component stories
Added Storybook stories covering:

• Button
• Card
• Input
• Select
• Dialog

Each story demonstrates common variants and interaction states.

4. Documentation

• Added documentation describing the design token structure and how components consume those tokens.

Purpose

This PR focuses on project infrastructure rather than introducing end-user features. It establishes the foundation for building future UI components consistently and allows contributors to develop and review components in isolation using Storybook.

If there are repository-specific conventions or architectural changes you'd like me to follow, I'm happy to update the PR accordingly.

---

العربية

شكرًا لكم على مراجعة طلب السحب.

فيما يلي ملخص للتغييرات التي يتضمنها هذا الطلب.

الملخص

يؤسس هذا الطلب البنية الأساسية لنظام التصميم الخاص بـ StormCom، بهدف توفير لغة تصميم موحدة وبيئة لتطوير المكونات قبل البدء في تطوير واجهات المستخدم الأخرى.

التغييرات

1. إعداد Storybook

• إضافة إعدادات Storybook باستخدام إعداد Next.js.
• تهيئة دعم السمات (Themes) بشكل عام.
• إضافة إمكانية التبديل إلى الوضع الداكن لمعاينة المكونات.

2. رموز التصميم (Design Tokens)
تمت إضافة مجموعة مركزية من رموز التصميم تشمل:

• الألوان
• الخطوط والطباعة
• المسافات
• أنصاف أقطار الحواف
• الظلال
• قيم الحركة والانتقالات

وتهدف هذه الرموز إلى أن تكون المصدر الموحد لتنسيق واجهة المستخدم.

3. قصص المكونات (Component Stories)
تمت إضافة أمثلة للمكونات التالية:

• Button
• Card
• Input
• Select
• Dialog

وتغطي هذه الأمثلة الحالات والاستخدامات المختلفة لكل مكون.

4. التوثيق
تمت إضافة توثيق يشرح بنية Design Tokens وكيفية استخدامها داخل المكونات.

الهدف

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

إذا كانت هناك معايير خاصة بالمستودع أو تعديلات معمارية تفضلون اتباعها، فسيسعدني تحديث طلب السحب بما يتوافق مع تلك التوجيهات.