التثبيت

أضف الحزمة وحمّل أنماطها وخطوطها، وستكون جاهزًا لاستخدام أي مكوّن.

المتطلبات

React 18 أو 19، مع react-dom و react-is بنفس الإصدار.
أي أداة تجميع: Next.js أو Vite أو Electron أو Remix أو webpack.

التثبيت

pnpm add @truvar-ai/design-system

باستخدام npm: npm install @truvar-ai/design-system. وباستخدام Yarn: yarn add @truvar-ai/design-system.

أضف الأنماط

استورد ملف الأنماط مرة واحدة في جذر التطبيق. وهو يتضمن رموز التصميم.

main.jsx

import "@truvar-ai/design-system/styles.css";

الأجزاء التي لها شكل خاص لها ملف أنماط خاص. استورد فقط ما تستخدمه:

jsx

import "@truvar-ai/design-system/charts/styles.css";
import "@truvar-ai/design-system/voice/styles.css";
import "@truvar-ai/design-system/os/styles.css";
import "@truvar-ai/design-system/crm/styles.css";
import "@truvar-ai/design-system/widget/styles.css";

حمّل الخطوط

الخطوط الأربعة تأتي مع الحزمة: ‏Poppins و DM Sans للإنجليزية، و Alexandria و IBM Plex Sans Arabic للعربية. استوردها مرة واحدة قبل الأنماط، وسيقدّمها تطبيقك بنفسه دون أي طلب إلى Google.

main.jsx

import "@truvar-ai/design-system/fonts.css";
import "@truvar-ai/design-system/styles.css";

تحمّل الصفحة فقط الملفات التي يحتاجها نصها: الخطوط الإنجليزية للنص الإنجليزي، والعربية عند ظهور نص عربي. والأربعة برخصة SIL Open Font المرفقة مع الحزمة.

أول مكوّن

SignUp.jsx

import { Button, TextField, PhoneField } from "@truvar-ai/design-system";

export function SignUp() {
  return (
    <form>
      <TextField label="Name" />
      <PhoneField label="Mobile" defaultCountry="EG" />
      <Button type="submit">Create account</Button>
    </form>
  );
}

الأجزاء الثقيلة (الرسوم البيانية والخرائط ومشغل الصوت) لها مسار استيراد خاص، وتحذف أداة التجميع المكونات غير المستخدمة. فالتطبيق الذي يستخدم الزر فقط لا يحمّل الرسوم البيانية.