React

تغلِّف الحزمة @tanrei/react كل عنصر مخصص من @tanrei/web بمكوّن React حقيقي له خصائص محدَّدة الأنواع ومعالجات أحداث. تُولَّد هذه الأغلفة من بيان العناصر المخصصة (custom elements manifest)، فتطابق دائمًا العناصر التي تغلِّفها.

إصدار تمهيدي

نُشر 0.1.0-next.0 على npm تحت وسم التوزيع (dist-tag) next: وحتى 0.1.0، ثبِّت @tanrei/react@next و@tanrei/web@next. لا يُحافَظ على التوافق مع الإصدارات السابقة طوال الإصدارات التمهيدية 0.x: قد يكسر أي إصدار تمهيدي أي شيء دون أن يُعلَن شيء مهمَلًا قبله، ويذكر الـ changeset الخاص به ما الذي انكسر.

التثبيت

link

يلزم React 18 أو أحدث.

من npm

link

npm install @tanrei/react @tanrei/web

من الشيفرة المصدرية

link

لاستعمال الشيفرة المصدرية كما هي على main، افعل كما في حزمة الويب (Git، و Node 22.22 أو أحدث، و pnpm 12): ابنِ الحزمتين كلتيهما في نسخة مستنسخة من المستودع واحزمهما،

git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/web --filter @tanrei/react build
pnpm --filter @tanrei/web --filter @tanrei/react pack --pack-destination ../tanrei-packages

ثم ثبِّت الملفين المحزومين كليهما في مشروعك بأمر واحد، حتى تجد حزمة React حزمة الويب بجانبها:

npm install path/to/tanrei-packages/tanrei-web-*.tgz path/to/tanrei-packages/tanrei-react-*.tgz

الاستخدام

link

حمِّل أوراق الأنماط مرة واحدة، قبل أن تُعرض المكوّنات: الملف tanrei.css يضم أساس الصفحة والرموز وكل أوراق الأنماط الأخرى في الحزمة في ملف واحد. ولتحميلها واحدة واحدة، انظر دليل الويب.

import '@tanrei/web/tanrei.css';
import '@tanrei/web/words/en';
import { Button } from '@tanrei/react';

export function Toolbar({ onDeploy }: { onDeploy: () => void }) {
  return (
    <>
      <Button variant="filled" onClick={onDeploy}>
        نشر
      </Button>
      <Button variant="text" size="small" disabled>
        تراجع
      </Button>
    </>
  );
}

تحمل الخصائص أسماء خصائص HTML للعنصر نفسها (variant و size و disabled). والأحداث معالجات React عادية. ويُستمع إلى الحدث الخاص بالعنصر باسم يبدأ بـ on ويليه اسم الحدث بصيغة camel case، كما يسمّي React أحداثه (onKeyDown): يُطلق درج التنقل الحدث expandedchange، ويُستمع إليه بـ onExpandedChange.

تعطي @tanrei/web/words/en كلمة بإنجليزية بسيطة لكل تسمية ورسالة ترسمها المكوّنات أو تقولها، مثل وسم المطلوب أو اسم زر الإغلاق؛ ويمكنك الاستغناء عنها وإعطاء كلماتك بالدالة setWords() من @tanrei/react. انظر الكلمات.

مدخل لكل نظام تصميم

link

للحزمة مدخل لكل نظام تصميم يشحنه Tanrei، فلا يقترح محرّرك، ولا يقبل فحص الأنواع، إلا ما يملكه نظامك:

المدخل	ما يصدّره
@tanrei/react	مكوّنات النظام الافتراضي، Tanrei. ليست فيه قائمة FAB، التي تعيش في طبقة m3-like، ولا الزر المقسَّم الذي يستبعده Tanrei، والمتغيّر الذي يستبعده Tanrei ليس قيمةً للخاصية: لا يجتاز <TextField variant="outlined"> فحص الأنواع
@tanrei/react/m3-like و@tanrei/react/m3-expressive-like و@tanrei/react/cupertino	مكوّنات ذلك الإعداد المسبق، بمتغيّراته
@tanrei/react/advanced	المكوّنات المتقدّمة، أي الأجزاء التي تُبنى منها مكوّنات أخرى: TextInput وModalLayer وCombobox وغيرها. وعادةً ما يكتب المنتج المكوّن المبني من أحدها: TextField وDialog وComboboxField
@tanrei/react/all	كل المكوّنات، أيًّا كان النظام الذي يملكها: لنظام تصميم خاص بك، ولبناء نظام

import '@tanrei/web/tokens.css';
import '@tanrei/web/systems/m3-like.css';
import { FabMenu, FabMenuItem, TextField } from '@tanrei/react/m3-like';

المكوّن هو نفسه في كل مدخل، فلا تُبقي أداة التجميع إلا ما تستورده. ويصدّر كل مدخل أيضًا setWords وmissingWords والنوع TanreiEvent. تُولَّد المداخل من قائمة مكوّنات كل نظام، @tanrei/web/systems/<id>.components.json، التي تذكر مدخل كل مكوّن (react.import)؛ وقائمة نظامك الخاص، التي يكتبها tanrei build، تذكر @tanrei/react/all.

التصيير على الخادم

link

تُخرج المكوّنات وسم العنصر المخصص على الخادم، ثم يُرقّى العنصر في المتصفح. في إطارات العمل التي تفصل بين الخادم والعميل، استورد المدخل الذي تستخدمه من مكوّن عميل حتى تُسجَّل تعريفات العناصر في المتصفح.

ملاحظة

السمة والتباين والرموز (tokens) والخطوط تعمل تمامًا كما في دليل Web؛ ولا تضيف حزمة React شيئًا من عندها فوق ذلك.