@exhibition-time/ds

مكتبة Design System مبنية على React 19 و TypeScript و Tailwind CSS v4. المشروع مستقل عن Next.js حتى يبقى قابلاً للاستهلاك من التطبيق الأساسي لاحقاً.

التثبيت

pnpm add @exhibition-time/ds

أو للتطوير المحلي من مجلد مجاور:

pnpm add file:../ds

الاستخدام في Next.js

في ملف CSS الخاص بالتطبيق (مثلاً app/globals.css):

@import "tailwindcss";
@import "@exhibition-time/ds/styles.css";
/* Required: scan DS class names inside the published package (both apps use Tailwind,
   but utilities are generated only from files listed in @source / content). */
@source "../node_modules/@exhibition-time/ds/dist";

استيراد styles.css يفعّل توكينز التصميم (ألوان، مسافات، زوايا، تايبوغرافي) كمتغيرات CSS وكمرافق Tailwind. الوضع الداكن عبر class .dark على html أو عنصر أب.

ثم في المكونات:

import { Button, FormField, Heading, Text } from "@exhibition-time/ds";

export function Example() {
  return (
    <div className="bg-bg-default-primary text-text-default-primary p-md rounded-lg">
      <Heading as="h2">Welcome</Heading>
      <FormField label="Email" />
      <Button>Continue</Button>
    </div>
  );
}

Button و Form يحملان "use client" لأنهما تفاعليان. Typography آمن في Server Components.

التوكينز

استخدم التوكينز من الـ DS مباشرة بدل تعريف قيم محلية:

Tailwind utilities (بعد استيراد styles.css):

<div className="bg-bg-brand-primary text-text-on-brand p-lg rounded-md text-h3" />

CSS variables:

.panel {
  background: var(--color-bg-default-secondary);
  color: var(--color-text-default-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
}

TypeScript API:

import { tokens, color, spacing } from "@exhibition-time/ds";
// أو: import { tokens } from "@exhibition-time/ds/tokens";

const brand = color.primary[500]; // "#776788"
const gap = spacing.md; // "16px"
const panelBg = tokens.semanticColor.bg.defaultPrimary; // "var(--color-bg-default-primary)"

ملفات Figma JSON (للأدوات والتكامل):

import valueTokens from "@exhibition-time/ds/tokens/Value.tokens.json";

للتخصيص، أعد تعريف المتغيرات الحقيقية للـ DS:

:root {
  --color-primary-500: #5b4a6a;
  --color-bg-brand-primary: var(--color-primary-500);
  --radius-md: 0.75rem;
}

التطوير

pnpm install
pnpm storybook

Storybook يعمل على http://localhost:6006. من شريط الأدوات يمكن التبديل بين Light/Dark و LTR/RTL.

pnpm check-types
pnpm build