rocket ui

؟ تم إهماله

تم إهمال هذه المكتبة. تم إعادة تكوين المكونات باستخدام أحدث إصدارات Materi-Ui و React ويمكن العثور عليها هنا: Rocket-Ui

للوثائق والأمثلة ذات مغزى تسجيل الخروج من وثائق gitbook

---

الصاروخ-UI (تم إهماله)

مجموعة بت

مجموعة من مكونات Reactable القابلة لإعادة الاستخدام وقابلة للتكامل مبنية على قمة المواد الأساسية للمواد لتطوير واجهات تطبيقات الويب السريعة والودية.

؟

؟ تثبيت

NPMRC هو ملف تكوين NPM ومن أجل استخدام مكتبتنا ، تحتاج إلى تكوين هذا الملف.

‼ تخطي هذه الخطوة إذا تم إنشاء المشروع باستخدام WebApp Rocket Generator. تم تكوين ملف .npmrc بالفعل

يجري

npm config set @totalsoft_oss:registry https://node.bit.cloud

سيضيف هذا الأمر إدخالًا في ملف .npmrc لجذرك. إذا لم يكن موجودًا ، فسيخلق واحدة.

- تثبيت مكون واحد

انتقل إلى الصفحة الرئيسية للمكون ثم حدد الأمر لمدير الحزمة الذي تستخدمه. يمكنك أيضًا اختيار الإصدار الذي تريد تثبيته.

قم بتشغيل الأمر في المحطة الخاصة بك وستكون مستعدًا لاستخدامه!

npm i @totalsoft_oss/rocket-ui.components.data-display.typography

- تثبيت جميع المكونات بحزمة واحدة

إذا كنت ترغب في الحصول على جميع المكونات في مشروعك في حزمة واحدة فقط. انتقل إلى مكون أساسي في Bit Cloud.

قم بتثبيت الحزمة core عن طريق التشغيل

npm i @totalsoft_oss/rocket-ui.core

الاستخدام

    import React from 'react'
    import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography'
    /* example using core package
    import { Typography } from '@totalsoft_oss/rocket-ui.core'
    */

    const App = ( ) => {
        return (
            < Typography variant = 'body2' emphasis = 'bold' >
                "Text"
            </ Typography >
        )
    } 

؟ بنية المكونات

كل مكون موجود في قسم مناسب لغرضه. على سبيل المثال ، توجد جميع الأزرار ذات الصلة في مجلد buttons . جميع المكونات لديها نفس بنية الملفات. نقوم بتنفيذ ونفرض هذا الهيكل من خلال إنشاء مولد المكون الخاص بنا ، وهي وظيفة توفرها BIT. كما سترى ، سيكون لجميع المكونات والمكونات التي سيتم إنشاؤها باستخدام قالب rocket-generator الهيكل التالي

• ملف الإدخال index.js .
• MyComponent.js الملف الرئيسي.
• MyComponent.test.js ملف اختبار.
• ملف مستندات MyComponent.docs.mdx للمكون.
• مجلد compositions .
  • MyComponent.composition.js التراكيب لمحاكاة المكون في حالات وسياقات مختلفة.

؟ دليل المساهمة

نستخدم بت لإدارة المكونات والمساهمة. BIT هي أداة مفتوحة المصدر لتأليف البرامج التي يحركها المكون.

- تثبيت بت

يوصى باستخدام موجه الأوامر بدلاً من PowerShell بسبب بعض مشكلات التوافق.

npm i -g @teambit/bvm

bvm install

في حالة حدوث أي خطأ عند التثبيت ، يرجى التحقق من قسم استكشاف الأخطاء وإصلاحها.

- بدء الخادم المحلي

بعد تثبيت BIT بنجاح ، يمكنك استنساخ المستودع واستخدام وظائف البت على أكمل وجه.

للبدء على الفور ، تشغيل في موجة الأوامر bit start وفتح LocalHost: 3000. قد يستغرق الأمر بعض الوقت لبناء أول مرة تقوم فيها بتشغيل هذا الأمر لأنه يقوم ببناء واجهة المستخدم بأكملها لبيئة التطوير الخاصة بك. عندما يتم تشغيل الخادم المحلي وتشغيله ، سترى جميع المكونات ويمكنك التفاعل معها.

bit start

- تعديل المكونات الحالية

بعد تغيير/إصلاح المكون وفقًا لاحتياجاتك ، يجب عليك تشغيل bit test للتأكد من أن جميع الاختبارات تمر وتضيف المزيد إذا كانت التغييرات تتطلب ذلك.

bit test

أيضًا ، إذا تمت إضافة ميزة جديدة ، بالإضافة إلى الاختبارات ، يجب أيضًا إضافة مثال مع الوظائف الجديدة. توجد ملفات الأمثلة في كل دليل مكون داخل دليل compositions .

بعد تغيير المكون ، تحتاج إلى تشغيل bit status للتحقق من المشكلات ذات الصلة بت ، ثم bit compile من أجل الحصول على أحدث التعديلات في واجهة المستخدم الخاصة بك.

bit status

bit compile

- إضافة مكون جديد

لإنشاء مكون جديد ، يجب عليك استخدام مولد المكون الخاص بنا ، rocket-generator ، والذي يوفر قالبًا مفيدًا في تنفيذ مكون جديد.

bit create rocket-generator components/buttons/my-component

- طلب سحب مفتوح

عند الانتهاء من التغيير/الميزة/الإصلاح وتريد وضع علامة على المكونات التي يتم نشرها ، فإن الإصدار التالي واستخدام رسالة changelog -soft.

bit tag -m " my message " --soft

بعد تشغيل الأمر أعلاه ، يجب أن ترى ملف bitmap تم تغييره وبعد ذلك يمكنك إنشاء طلب السحب الخاص بك.

يمكنك قراءة المزيد عن Bit وغيرها من الوظائف التي يقدمها هنا.

رخصة

Rocket-UI مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. totalsoft