monorepo میں توسیع پذیر ڈیزائن کا نظام کیسے بنایا جائے۔

جب آپ یہ جملہ سنتے ہیں کہ "منوریپو ماحولیاتی نظام کے ساتھ ایکسٹینسیبل ڈیزائن سسٹم”، تو ایسا لگ سکتا ہے کہ اس کے ساتھ جارجن کا ایک گروپ جڑا ہوا ہے۔ آئیے آسان بناتے ہیں:

• ڈیزائن کے نظام: پروڈکٹ کے اجزاء (بٹن، ان پٹ، اسٹائل، ٹوکن، پیٹرن)۔

• monorepo: ایک بڑا ذخیرہ جہاں متعدد پیکجز ایک ساتھ موجود ہیں اور ٹولز اور ورک فلو کا اشتراک کرتے ہیں۔

اب یہاں جادو ہے. دونوں کو ملانے سے آپ کو ماڈیولرٹی، مستقل مزاجی اور تیز تر ترقی کے چکر ملتے ہیں۔ بنیادی طور پر، یہ ویب، موبائل اور مزید پر کام کرنے والی ٹیموں کے لیے ایک خوابیدہ سیٹ اپ ہے۔

اس آرٹیکل میں، آپ React اور Turborepo کا استعمال کرتے ہوئے ایک ماڈیولر، توسیع پذیر ڈیزائن سسٹم بنانے کا طریقہ سیکھیں گے، جو مائیکروسافٹ، IBM اور Shopify کے ذریعے استعمال کیا جاتا ہے۔

انڈیکس

شرطیں

آگے بڑھنے سے پہلے، آپ کو کچھ چیزیں تیار کرنے کی ضرورت ہے۔

• React اور TypeScript کا عملی علم: آپ کو اجزاء بنانے اور قدیم قسم کی تشریحات پڑھنے میں ماہر ہونا چاہئے۔

• کمانڈ لائن کا علم: آپ چلائیں گے npx, npmاور اسی طرح کے احکامات بھر میں۔

• Node.js انسٹال ہوا (v18 یا اس سے زیادہ): چیک کریں۔ node -v. اگر آپ کے پاس نہیں ہے تو اسے nodejs.org سے انسٹال کریں۔

• پیکیج مینیجر: اس گائیڈ میں npmلیکن pnpm یا yarn یہ معمولی کمانڈ ٹویکس کے ساتھ کام کرتا ہے۔

• کوڈ ایڈیٹر اپنا انتخاب کریں (VS کوڈ بڑے پیمانے پر ٹائپ اسکرپٹ کے ساتھ کام کرنے کے لیے استعمال ہوتا ہے)۔

monorepos یا Turborepo کے ساتھ کسی پیشگی تجربے کی ضرورت نہیں ہے۔ ہم نے شروع سے سب کچھ ترتیب دیا ہے۔

یہ پہلے سے کون کر رہا ہے؟

یہ پتہ چلتا ہے کہ کچھ سب سے بڑے ڈیزائن سسٹمز جن کے بارے میں آپ نے کبھی سنا ہے کہ monorepos کے اندر چلتے ہیں۔

1. Microsoft Fluent UI: ایک ملٹی پیکج واحد ذخیرہ جو React اجزاء، ویب اجزاء، اور یہاں تک کہ ڈیزائن ٹوکن بھی فراہم کرتا ہے۔

2. IBM کاربن: کئی پیکجز، بشمول: @carbon/ibm-products سیدھے کاربن مونوریپو سے۔

3. Shopify Polaris: کھلے عام خود کو ایک monorepo، پیکیجنگ ری ایکٹ اجزاء، دستاویزات، اور یہاں تک کہ VS کوڈ کی توسیع کے طور پر بیان کرتا ہے۔

4. Atlassian Atlaskit: عوامی @atlaskit/* پیکجز ایک بڑے اندرونی monorepo سے شائع کیے گئے ہیں۔

5. میٹریل UI (MUI): React اجزاء، ٹولز اور دستاویزات کو مربوط کرنے کے لیے ایک واحد ذخیرہ کے طور پر برقرار رکھا جاتا ہے۔

6. لچکدار EUI: سنگل ریپوزٹری پبلش فلو کی بحث کے ساتھ ایک واحد ذخیرہ پر تیار اور جاری کیا گیا۔

یہ کیوں کام کرتا ہے۔

اپنے ڈیزائن سسٹم کے تمام حصوں کو ایک ریپوزٹری میں ڈالنے سے کچھ مخصوص فوائد حاصل ہوتے ہیں جن کو اسپلٹ ریپوزٹری سیٹ اپ میں نقل کرنا مشکل ہوتا ہے۔ ان میں سے ہر ایک دوسرے کو تقویت دیتا ہے، لہذا جو ٹیمیں ان نمونوں کو اپناتی ہیں وہ شاذ و نادر ہی واپس جاتی ہیں۔

یہاں یہ ہے کہ یہ کیسے کام کرتا ہے:

• مستقل مزاجی: ٹوکنز، سٹائلز، اور پرائمیٹوز ایک بار بیان کیے جاتے ہیں اور ہر جگہ بہہ جاتے ہیں۔

• تیز تکرار: جب ہم بٹن میں ایک بگ کو ٹھیک کرتے ہیں، تو اپ ڈیٹ فوری طور پر موبائل، ڈیسک ٹاپ اور دستاویزات پر لاگو ہو جائے گی۔

• اشتراک کے اوزار: لنٹنگ، ٹیسٹنگ، CI پائپ لائن کو ترتیب دیں، اور ورک فلو کو ایک بار جاری کریں اور تمام پیکیجز پر لاگو کریں۔

• ورژن کنٹرول: Changesets یا Lerna جیسے ٹولز آپ کو سیدھ کو برقرار رکھتے ہوئے آزادانہ طور پر پیکجز جاری کرنے کی اجازت دیتے ہیں۔

• کراس پلیٹ فارم لچک: وہی بلڈنگ بلاکس React ویب ایپس، React Native، Electron apps، SDKs اور دستاویزات کی سائٹس کو طاقت دے سکتے ہیں۔

اسے سیڑھی کی طرح سوچو

monorepo ڈیزائن سسٹم کو ظاہر کرنے کا سب سے صاف طریقہ یہ ہے کہ اسے اسٹیک شدہ تہوں کی ایک سیریز کے طور پر دیکھا جائے۔ ہر پرت اس کے نیچے کی پرت پر بنتی ہے، اور ہر پرت کا ایک واضح کام ہوتا ہے۔

پیکجوں کے درمیان تعلقات قابل قیاس ہیں، نئے شراکت داروں کو تیزی سے کام کرنے کی اجازت دیتے ہیں۔ یعنی، ٹوکن پرائمیٹوز میں بہہ جاتے ہیں، پرائمیٹو کو ترتیب میں ترتیب دیا جاتا ہے، اور لے آؤٹ کو اسکرینوں میں جمع کیا جاتا ہے۔

نیچے دیا گیا خاکہ اس اسٹیک کی بصری نمائندگی فراہم کرتا ہے۔

بنیاد ہے: primitives (ٹوکن، انداز)

مزید: plugins (یوٹیلٹی اسسٹنٹ)۔

پھر آؤ layoutsپلگ ان + پرائمیٹوز کے ساتھ بنایا گیا ہے۔

پھر screensترتیب کے ساتھ بنایا گیا ہے۔

آخر کار navigators اسکرینوں کو ایک ساتھ باندھیں۔

اوپر: آپ کی ایپ صرف ایک پیکیج اور بوم درآمد کرتی ہے! UI ماحولیاتی اجناسٹک ہے۔

ہر جگہ ایک ہی ڈیزائن کا نظام

اس سیڑھی کا اصل فائدہ یہ ہے کہ ایک بار جب آپ اس پر چڑھ جائیں تو آپ تمام پلیٹ فارمز پر ہر چیز کو دوبارہ استعمال کر سکتے ہیں۔

آپ کا primitives پیکیجز کو ویب ایپ، ری ایکٹ مقامی موبائل ایپ، الیکٹران ڈیسک ٹاپ ایپ، یا دستاویزات کی سائٹ میں ہر ماحول کے لیے دوبارہ لکھے بغیر پیش کیا جا سکتا ہے۔

نیچے دیا گیا خاکہ تین مختلف ایپ کی اقسام میں ایک ہی ڈیزائن سسٹم کو دکھاتا ہے۔ ہر ماحول ایک جیسے پیکجوں کو کھینچتا ہے اور پہلے سے طے شدہ طور پر مستقل طرز، طرز عمل اور رسائی حاصل کرتا ہے۔

چاہے ویب ہو، ڈیسک ٹاپ، یا موبائل، ڈیزائن کے نظام ایک ہی سطح پر اٹھتے ہیں۔

کیا مجھے مونورپو کے لیے جانا چاہیے؟

ہر ٹیم کو اس کی ضرورت نہیں ہے۔ لیکن اگر آپ ایک سے زیادہ ایپس ڈیلیور کرنے، پلیٹ فارمز پر مستقل مزاجی کو برقرار رکھنے، اور بہت سے تعاون کنندگان کی مدد کرنے کے لیے ایک ڈیزائن سسٹم بنا رہے ہیں، تو ایک monorepo ایک بز ورڈ کم اور سنٹی سیور زیادہ بن جاتا ہے۔

جب ایک monorepo آپ کے لئے صحیح نہیں ہے۔

Monorepos بعض اوقات دوسری بحثوں میں الجھ جاتے ہیں، اس لیے میں پہلے ان کی مختصر وضاحت کروں گا۔ "monorepo بمقابلہ polyrepo” سوال یہ ہے: ~ نہیں "مونولیتھ بمقابلہ مائیکرو سروسز” سوال جیسا ہی۔ آپ مکمل طور پر مائیکرو سروسز کو منورپو پر چلا سکتے ہیں (گوگل اور فیس بک یہ پیمانے پر کرتے ہیں)۔

دونوں انتخاب مختلف محوروں پر ہیں۔ monorepo اور polyrepo جہاں کوڈ رہتا ہے۔مونولیتھ بمقابلہ مائیکرو سروسز رن ٹائم کی قسم.

اس کو ایک طرف رکھتے ہوئے، یہاں کچھ نشانیاں ہیں کہ ایک monorepo آپ کی صورت حال کے لیے بہترین فٹ نہیں ہو سکتا:

• آپ ایک چھوٹی ٹیم ہیں جو ایک پروڈکٹ فراہم کرتی ہے۔ ایک ہی ریپوزٹری کا ٹولنگ اوور ہیڈ (ورک اسپیس کنفیگریشن، پائپ لائن کی تعمیر، پیکج کی حدود) چیزوں کو اس سے کہیں زیادہ سست کر سکتا ہے جو اس کی مدد کرتا ہے۔ مشترکہ لائبریریوں کے بغیر ایک واحد رد عمل ایپ کو شاید اس پرت کی ضرورت نہیں ہے۔

• پیکجز میں بہت مختلف ریلیز سائیکل اور مختلف اسٹیک ہولڈرز ہوتے ہیں۔ اگر کوڈبیس کے دو حصے ایسی ٹیموں کی ملکیت ہیں جن کے لیے بہت مختلف تعیناتی پائپ لائنز، گورننس، یا سیکیورٹی پوزیشنز کی ضرورت ہوتی ہے، تو علیحدہ ریپوزٹریز کا استعمال رگڑ کو کم کر سکتا ہے۔

• آپ monorepo ٹولنگ میں سرمایہ کاری نہیں کر سکتے۔ Turborepo، Nx، اور Changesets جیسے ٹولز بہت زیادہ کام کرتے ہیں، لیکن ان میں سیکھنے کا وکر ہوتا ہے۔ اگر آپ کی ٹیم اسے ترتیب دینے اور اسے برقرار رکھنے کے لیے وقت نہیں لے سکتی ہے، تو اسے نقصان ہو سکتا ہے۔

• آپ ایسی زبان یا رن ٹائم استعمال کر رہے ہیں جو اچھی طرح سے شیئر نہیں کی گئی ہے۔ جب زیادہ تر پیکجز ایک ہی ٹول چین میں ہوتے ہیں تو Monorepos چمکتے ہیں۔ نوڈ، گو، رسٹ، اور ازگر کو ایک ذخیرہ میں ملانا ممکن ہے، لیکن بلڈ ٹول کی کہانی زیادہ مشکل ہو جاتی ہے۔

سنجیدہ ڈیزائن سسٹم بنانے والی زیادہ تر ٹیموں کے لیے، ان میں سے کوئی بھی ڈیل بریکر نہیں ہے۔ لیکن عہد کرنے سے پہلے چیزوں کو چیک کرنا ضروری ہے۔

آئیے ایک ڈیزائن سسٹم بنائیں

ٹربورپو پروجیکٹ بنائیں

ایک نیا Turborepo پروجیکٹ بنا کر شروع کریں۔ یہ توسیع پذیر مونوریپو کے لیے بہترین بنیاد فراہم کرتا ہے۔

# Create a new Turborepo project
npx create-turbo@latest my-design-system

# Navigate to the project
cd my-design-system

# Install dependencies
npm install

Turborepo استعمال کرتے ہوئے ایک ورک اسپیس بناتا ہے: apps/ اور packages/ فولڈرز، مشترکہ ٹول آرگنائزیشن، اور آپٹمائزڈ بلڈ پائپ لائن۔

پیکیج ڈھانچہ ڈیزائن

اگلا، ہم اپنے ڈیزائن سسٹم پیکجوں کے لیے ایک منطقی درجہ بندی بناتے ہیں۔ جیسا کہ اوپر ذکر کیا گیا ہے، اسے سیڑھی کی طرح سوچیں۔ ہر سطح نیچے کی سطح پر بنتی ہے۔

my-design-system/
├── packages/
│   ├── tokens/          # Design tokens (colors, spacing, typography)
│   ├── primitives/      # Base components (Button, Input, Card)
│   ├── layouts/         # Layout components (Grid, Stack, Container)
├── apps/
│   ├── web/            # Example web app
│   └── docs/           # Documentation site
└── turbo.json          # Turborepo configuration

تفصیلی فائل کا ڈھانچہ

my-design-system/
├── packages/
│   ├── tokens/
│   │   ├── src/
│   │   │   ├── colors.ts
│   │   │   ├── spacing.ts
│   │   │   ├── typography.ts
│   │   │   └── index.ts
│   │   ├── package.json
│   │   └── tsconfig.json
│   ├── primitives/
│   │   ├── src/
│   │   │   ├── Button/
│   │   │   │   └── Button.tsx
│   │   │   ├── Input/
│   │   │   │   └── Input.tsx
│   │   │   └── index.ts
│   │   ├── package.json
│   │   └── tsconfig.json
│   ├── layouts/
│   │   ├── src/
│   │   │   ├── Grid/
│   │   │   ├── Stack/
│   │   │   └── index.ts
│   │   └── package.json
├── apps/
│   ├── web/
│   │   ├── src/
│   │   │   ├── App.tsx
│   │   │   └── main.tsx
│   │   ├── index.html
│   │   └── package.json
│   └── docs/
│       ├── src/
│       └── package.json
├── turbo.json
├── package.json
└── README.md

ڈیزائن ٹوکن پیکج بنانا

بنیادی باتوں کے ساتھ شروع کریں: ڈیزائن ٹوکن. ٹوکنز ڈیزائن سسٹم میں سب سے چھوٹی، سب سے زیادہ دوبارہ قابل استعمال اکائیاں ہیں: رنگ کی قدریں، وقفہ کاری کی جگہ، فونٹ کے سائز، بارڈر ریڈی، وغیرہ۔ ہارڈ کوڈنگ کے بجائے padding: 16px یا color: #3b82f6 ہر جگہ آپ اس طرح ٹوکن کا حوالہ دیتے ہیں: spacing.md یا colors.primary[500].

فوائد بہت زیادہ ہیں۔

• ایک جگہ جہاں آپ قدر تبدیل کر سکتے ہیں: ٹوکن کو ایک بار اپ ڈیٹ کریں اور اسے استعمال کرنے والے تمام اجزاء خود بخود اپ ڈیٹ ہو جائیں گے۔

• تھیم سیٹ اپ آسان ہو گیا ہے۔ کیا آپ ڈارک موڈ چاہتے ہیں؟ تبدیل کریں کہ کون سا ٹوکن کس قدر کو حل کرتا ہے۔

• کراس پلیٹ فارم کی مستقل مزاجی: وہی ٹوکن نام ویب سی ایس ایس، ڈیفالٹ اسٹائلز اور یہاں تک کہ فگما میں بھی کام کرتا ہے۔

ٹوکن ڈیزائن سسٹم کا ڈی این اے ہیں۔ آئیے انہیں بناتے ہیں۔

# Create the tokens package
mkdir -p packages/tokens/src
cd packages/tokens

براہ کرم یہاں اپ ڈیٹ کریں: packages/tokens/package.json. یہ فائل پیکیج کے نام، ورژن، اسکرپٹ کی تعمیر، اور ترقی کے انحصار کا اعلان کرتی ہے جو ٹوکن سورس فائل کو قابل اشاعت پیکیج میں مرتب کرنے کے لیے درکار ہے۔

{
  "name": "@yourds/tokens",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
  },
  "devDependencies": {
    "tsup": "^8.0.0",
    "typescript": "^5.0.0"
  }
}

براہ کرم یہاں اپ ڈیٹ کریں: packages/tokens/src/colors.ts. یہ فائل ہے۔ رنگ ٹوکن: ارادے (مین، گرے) اور شیڈ (50 سب سے ہلکا، 900 گہرا ہے) کے ذریعے ترتیب دیا گیا رنگ کی قدروں کا ایک نامزد پیلیٹ۔ ہیکساڈیسیمل کوڈ کو ہارڈ کوڈ کرنے کے بجائے، اجزاء اسے نام سے حوالہ دیتے ہیں۔

export const colors = {
  primary: {
    50: '#f0f9ff',
    100: '#e0f2fe',
    500: '#3b82f6',
    600: '#2563eb',
    900: '#1e3a8a'
  },
  gray: {
    50: '#f9fafb',
    100: '#f3f4f6',
    500: '#6b7280',
    900: '#111827'
  }
} as const;

براہ کرم یہاں اپ ڈیٹ کریں: packages/tokens/src/spacing.ts. یہ فائل ہے۔ وقفہ پیمانہ: سائز کے مراحل کا ایک معیاری سیٹ جسے جزو پیڈنگ، مارجن، اور اسپیسنگ اقدار کے لیے استعمال کرتا ہے۔ ایک مقررہ پیمانہ (xs, sm, md, lg، وغیرہ) کا استعمال اس بات کو یقینی بناتا ہے کہ وقفہ کاری آپ کے پورے UI میں یکساں رہے۔

export const spacing = {
  xs: '0.25rem',    // 4px
  sm: '0.5rem',     // 8px
  md: '1rem',       // 16px
  lg: '1.5rem',     // 24px
  xl: '2rem',       // 32px
  '2xl': '3rem'     // 48px
} as const;

براہ کرم یہاں اپ ڈیٹ کریں: packages/tokens/src/typography.ts. یہ فائل ہے۔ نوع ٹائپ ٹوکن: فونٹ کا سائز اور فونٹ وزن جسے جزو اپنے متن کے لیے استعمال کرتا ہے۔ وقفوں کی طرح، ان کا نام بے ترتیب پکسل ویلیو کے بجائے قدم رکھا گیا ہے۔

export const typography = {
  fontSizes: {
    xs: '0.75rem',
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem'
  },
  fontWeights: {
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700
  }
} as const;

براہ کرم یہاں اپ ڈیٹ کریں: packages/tokens/src/index.ts. یہ فائل ہے۔ پبلک انٹری پوائنٹ پیکیج: صارف کے لیے ہر چیز کو تین ٹوکن فائلوں میں واپس ایکسپورٹ کریں۔ import { colors, spacing, typography } from "@yourds/tokens" ایک لائن میں:

export * from './colors';
export * from './spacing';
export * from './typography';

بنیادی اجزاء بنائیں

بنیادی اجزاء بنائیں جو ڈیزائن ٹوکن استعمال کرتے ہیں۔

# Create the primitives package
mkdir -p packages/primitives/src
cd packages/primitives

# Install dependencies
npm install react react-dom

براہ کرم یہاں اپ ڈیٹ کریں: packages/primitives/package.json:

{
  "name": "@yourds/primitives",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts --external react",
    "dev": "tsup src/index.ts --format cjs,esm --dts --external react --watch"
  },
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "tsup": "^8.0.0",
    "typescript": "^5.0.0"
  }
}

براہ کرم یہاں اپ ڈیٹ کریں: packages/primitives/src/Button/Button.tsx:

import React from 'react';
import { colors, spacing } from '@yourds/tokens';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

export const Button: React.FC = ({
  variant="primary",
  size="md",
  children,
  disabled = false,
  ...props
}) => {
  const baseStyles = {
    border: 'none',
    borderRadius: '0.5rem',
    cursor: disabled ? 'not-allowed' : 'pointer',
    fontWeight: 500,
    transition: 'all 0.2s ease',
    opacity: disabled ? 0.6 : 1
  };

  const variants = {
    primary: {
      backgroundColor: colors.primary[500],
      color: 'white',
      ':hover': { backgroundColor: colors.primary[600] }
    },
    secondary: {
      backgroundColor: colors.gray[100],
      color: colors.gray[900],
      ':hover': { backgroundColor: colors.gray[200] }
    },
    outline: {
      backgroundColor: 'transparent',
      color: colors.primary[500],
      border: `1px solid ${colors.primary[500]}`,
      ':hover': { backgroundColor: colors.primary[50] }
    }
  };

  const sizes = {
    sm: { padding: `({spacing.xs} ){spacing.sm}`, fontSize: '0.875rem' },
    md: { padding: `({spacing.sm} ){spacing.md}`, fontSize: '1rem' },
    lg: { padding: `({spacing.md} ){spacing.lg}`, fontSize: '1.125rem' }
  };

  const buttonStyle = {
    ...baseStyles,
    ...variants[variant],
    ...sizes[size]
  };

  return (
    
      {children}
    
  );
};

براہ کرم یہاں اپ ڈیٹ کریں: packages/primitives/src/index.ts:

export { Button } from './Button/Button';
export type { ButtonProps } from './Button/Button';

ٹربورپو پائپ لائن کنفیگریشن

اب اپنی تعمیراتی پائپ لائن ترتیب دیں۔ turbo.json یقینی بناتا ہے کہ پیکجز صحیح ترتیب میں بنائے گئے ہیں۔

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "type-check": {
      "dependsOn": ["^build"]
    }
  }
}

بلڈنگ @yourds پیکیج

ایک بار ٹوکن اور بیس پیکج کی وضاحت ہو جانے کے بعد، اگلا مرحلہ انہیں اپنی ایپ میں استعمال کے لیے مرتب کرنا ہے۔

چل رہا ہے npm install جڑ تمام ورک اسپیس انحصار کو حل کرتی ہے، بشمول اندرونی روابط۔ @yourds/tokens اور @yourds/primitives. پھر npm run build تمام پیکجوں کے ذریعے جائیں اور ہر ایک کو چلائیں۔ build ٹربورپو آرڈر کو صحیح طریقے سے بنانے کے لیے اسکرپٹ tokens پہلے مرتب کیا گیا۔ primitives (کیونکہ قدیم چیزیں ٹوکن پر منحصر ہیں)۔ حتمی npm install پھر بلٹ پیکج کو رجسٹر کریں۔ apps/web ایپس کو نام سے امپورٹ کیا جا سکتا ہے۔

# Go to the root of the monorepo
npm install

# Compile every package in the right order
npm run build

# Register the built packages for the apps to use
npm install @yourds/tokens @yourds/primitives

اگر سب کچھ کامیابی سے چلتا ہے۔ dist/ دونوں فولڈرز اندر packages/tokens اور packages/primitivesمرتب کردہ JavaScript اور TypeScript ڈیکلریشن فائلوں پر مشتمل ہے۔

اپنی ایپس میں ڈیزائن سسٹم استعمال کریں۔

اب آپ کسی بھی React ایپلیکیشن میں ڈیزائن سسٹم استعمال کر سکتے ہیں۔

ذیل کی مثال ہے۔ apps/web/src/App.tsx ایک چھوٹے ہوم پیج والی فائل جو ایک ساتھ دو چیزیں دکھاتی ہے: بنیادی عناصر حاصل کریں ( Button جزو) @yourds/primitivesاور ٹوکن حاصل کریں (colors, spacing) براہ راست سے @yourds/tokens اسٹائل معیاری HTML عناصر جیسے ریپرز۔

import { Button } from "@yourds/primitives";
import { colors, spacing } from "@yourds/tokens";

export default function Home() {
  return (
    

      
      
        Get Started
      
      
        Learn More
      
    
  );
}

npx turbo dev --filter=web