الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

Gumdrops

يحتوي هذا المشروع على مكونات رد فعل JavaScript القابلة لإعادة الاستخدام والتي يمكنك استيرادها إلى مشروعك.

المتطلبات الأساسية

يجب استخدام GumDrops مع نظام تصميم Gumgum (الخرسانة) ، الذي يتولى جميع الأنماط ، وكذلك Sass.

أضف Gumgum-Design و Sass إلى مشروعك.

راجع وثائق نظام التصميم الملموسة للموضوعات ، ومرافق CSS والمزيد.

الوثائق

راجع وثائق هذه المكتبة ومكوناتها.

تثبيت

لإضافة إصدار معين ، يمكنك استخدام yarn add [email protected] (استبدل 1.0.0 بأي إصدار تريده ، أو حذفه للحصول على أحدث إصدار)

يمكن العثور على الإصدارات الحالية والسابقة في changelog.md

الاستخدام

تقوم المكتبة بتصدير مكوناتها كوحدات ES ، بحيث يمكنك استيراد فقط ما تحتاجه ، على سبيل المثال: 

 import Button from 'gumdrops/Button';
import Badge from 'gumdrops/Badge';
import Toggle from 'gumdrops/Toggle';

اتبع المستندات لاستخدام المكون الخاص بك مع الدعائم الصحيحة.

لإعادة التوافق ، يتم توفير حزمة CommonJS. أنه يحتوي على المكتبة بأكملها ويمكن استخدامها مع: 

 const gumdrops = require('gumdrops');
// Or
import gumdrops from 'gumdrops';

للراحة والاستخدام مباشرة في المتصفح ، هناك أيضًا UMD المقدمة في: 

 node_modules/gumdrops/gumdrops.umd.js

اختبار استكشاف الأخطاء وإصلاحها

لسوء الحظ ، لا تتوفر ESM على نطاق واسع لبعض الأدوات الحالية ، ويمكن أن يقوم إجراء الاختبارات باستخدام مكونات من هذه المكتبة بإلقاء الأخطاء بسبب بناء جملة ES. لمنع هذا ، جرب ما يلي:

  • بالنسبة لـ Jest : يستخدم Jest تنفيذها الخاص لـ Equistr ، وسوف يحاول تحليل الملفات معها و Babel-Jest ، بشكل افتراضي ، يتجاهل Node_Modules مما سيؤدي إلى أخطاء بناء الجملة من عبارات الاستيراد. أضف السطر التالي إلى تكوين Jest بحيث يتجاهل كل شيء في Node_Modules ، باستثناء هذه المكتبة: 

     "transformIgnorePatterns": ["/node_modules/(?!gumdrops)"]

  • بالنسبة إلى Mocha + WebPack : من المحتمل جدًا أن تتجاهل تكوينات Mocha و WebPack أيضًا دليل Node_Modules ، لمنع أي أخطاء في بناء الجملة ، وتحميل بابل من خلال ملف تكوين بدلاً من الاتصال --compilers js:babel-register أو- --require babel-register مباشرة.

يمكن أن تكون محتويات الملف بسيطة مثل: 

 // testSetup.js
require('babel-register')({
    ignore: /node_modules/(?!gumdrops)/
});

// Import it into mocha or mocha-webpack:
--require ./testSetup.js

المتطلبات الأساسية لتشغيل المشروع محليا

  • تدفق الجيت و GIT
  • Nodejs/NPM & Yarn: الحد الأدنى للإصدارات المطلوبة - لقد اختبرنا الإصدارات التالية - node: ^16.16.0, npm: ^5.5.1, yarn ^1.2.1
  • قم بتثبيت صحة ESLINT وأجمل على المحرر المفضل لديك. لدينا ملفات التكوين على جذر المشروع ، .eslinrc و .prettierrc . هناك خطاف precommit لتشغيل البرامج النصية أجمل على الملفات.

تشغيل القصص القصيرة محليا 

 yarn # install dependencies
yarn run storybook

ثم افتح http://localhost:6006 على متصفحك. لمزيد من المعلومات ، قم بزيارة React Storybook Repo.

المساهمة

يرجى الاطلاع على المساهمة. md للحصول على معلومات حول المساهمة في هذا المشروع.

المساهمين

شكر خاص لجميع مساهمينا! بالإضافة إلى ما يلي الذين ساهموا قبل أن ننتقل إلى جيثب: ديفيد ميجرادو ، خوسيه سانتوس ، مايك وات

رخصة

Apache 2.0

ملاحظة مهمة: لا يقوم هذا المشروع بإعادة توزيع مكتبات الطرف الثالث ولكنه يحدد توفرها. تخضع المكتبات التي يطلق عليها هذا المشروع لتراخيص المبدعين. تذكر استشارة جميع التراخيص في استخداماتك والامتثال لها.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل