Kumo: اقرأ وثائق المكوّنات أولاً ثم صل واجهة Cloudflare

لمن يناسب

Kumo موجّه لمن يبني واجهات تطبيقات ويب حديثة، خاصة الواجهة الأمامية التي تستخدم React أصلًا وتريد معالجة أقل لتفاصيل لوحة المفاتيح والتركيز وARIA بنفسها. هي مكتبة مكوّنات Cloudflare، مبنية على Base UI. الصفحة المقابلة هي https://base-ui.com/ الشرح يقول إنها تعالج تنقل لوحة المفاتيح وإدارة التركيز وسمات ARIA لتبني واجهة وفق نظام تصميم.

الاستخدام الأقرب: تستعد لإدخال @cloudflare/kumo في مشروع React، أكّد أولاً أن الاعتماديات النظيرة react وreact-dom و@phosphor-icons/react يمكن تثبيتها، ثم استورد Button وInput وDialog والأنماط حسب الحاجة. لا تناسب كمهارة شرطة مائلة لمساعد ترميز، ولا مشروعًا بلا React.

المستودع لا يكتب أوامر مكافئة لمديري حزم آخرين، لذا المسار الرئيس يتبع فقط pnpm الذي يعطيه. إن لم يستخدم مستودعك pnpm، فالشرح القائم يتوقف هنا؛ لا تعِد كتابة هذا الأمر إلى مثبّت غير مسجّل.

إنهاء المحاولة الأولى في 3 دقائق

أمر التثبيت الرسمي هو: pnpm add @cloudflare/kumo. عنوان المستودع هو https://github.com/cloudflare/kumo اعمل فقط بحسب هذه الصفحة. أمر الاعتماديات النظيرة الرسمي هو: pnpm add react react-dom @phosphor-icons/react. إن كان المشروع يحتوي React أصلًا فافحص أولاً إن كان الإصدار ما زال يحتاج طبقة تثبيت أخرى؛ لا تُعِد التثبيت على عمى.

شرط مسبق: هذا الجهاز لديه pnpm، ولديك تطبيق محلي يمكن رميه أو يستخدم React أصلًا. موضع التثبيت هو اعتماديات ذلك التطبيق لا دليل مهارة عام.

أول مهمة منخفضة المخاطر: لا تغيّر صفحة بعد. في دليل المشروع نفّذ npx @cloudflare/kumo ls، سرد كل المكوّنات فقط. إشارة النجاح: تطبع الطرفية قائمة مكوّنات ولم تُغيَّر صفحتك. لملاحظة إضافية استخدم npx @cloudflare/kumo doc Button لعرض وثائق Button للقراءة فقط؛ npx @cloudflare/kumo docs يجلب كل الوثائق ويمكن تخطيه أول مرة.

بعد تأكيد القائمة، إن لزم الوصل فعلًا، ضع هذا في صفحة تجريب لن تُرفع: استورد Button وInput وDialog من @cloudflare/kumo، وimport "@cloudflare/kumo/styles". قبل الكتابة انظر إلى الفرق وأكّد أن صفحة التجريب وقائمة الاعتماديات فقط تحركتا. الشرح لا يكتب تخصيص موضوع ولا خطوات رسم على الخادم، لذا في المرة الأولى قف عند «يمكن سرد المكوّنات، وصفحة التجريب تستطيع رسم Button واحد».

حالات الاستخدام

الحالة الأولى: أدخل مكوّنات شائعة في تطبيق React. أولاً pnpm add @cloudflare/kumo، أكمل الاعتماديات النظيرة، ثم import { Button, Input, Dialog } from "@cloudflare/kumo" وحمّل @cloudflare/kumo/styles. يناسب عندما يكون لديك هيكل صفحة أصلًا وتريد فقط التحويل إلى هذه المجموعة الميسّرة. الشرح يسمّي هذه المكوّنات الثلاثة فقط كأمثلة؛ أسماء المكوّنات الأخرى تتبع npx @cloudflare/kumo ls — لا تخمّن.

الحالة الثانية: استخدم CLI للنظر في الوثائق للقراءة فقط. npx @cloudflare/kumo ls يسرد كل المكوّنات، npx @cloudflare/kumo doc Button يجلب وثائق مكوّن واحد، npx @cloudflare/kumo docs يجلب الكل. يناسب عندما لم تقرر بعد أي صفحة تغيّر وتريد أولاً مقابلة API. الشرح لا يكتب صيغة خرج الوثائق ولا ذاكرة مؤقتة دون اتصال؛ يكفي النظر ولا يلزم تغيير الشفرة فورًا. إن فشل أمر فعد إلى https://github.com/cloudflare/kumo وقابل؛ لا تنتقل إلى طريقة تثبيت غير مسجّلة.

حدود الاستخدام

حد التثبيت: الرسمي يكتب فقط pnpm add @cloudflare/kumo والاعتماديات النظيرة react وreact-dom و@phosphor-icons/react؛ لا تستخدم مثبّتًا لم يُسجَّل. حد التشغيل: المثال مكوّنات React ومدخل أنماط؛ لا يكتب استخدامًا بلا React. حد القدرة: تعالج تنقل لوحة المفاتيح وإدارة التركيز وARIA وتدّعي مطابقة نظام تصميم؛ لا تكتب أن الموضوع البصري يجب أن يساوي كل صفحة موقع Cloudflare. حد CLI: يمكن مقابلة ls وdoc Button وdocs. المكتبة الأساس هي Base UI، انظر https://base-ui.com/ لكن الشرح لا يقابل كل مكوّنات Kumo وBase UI واحدًا بواحد.