design react kit
v5.5.0
اقرأ هذا بلغات أخرى: اللغة الإنجليزية ؟؟.
Design React Kit هي مجموعة من مكونات React التي تنفذ Bootstrap Italia والأنماط على تصميم مجموعة واجهة المستخدم. للتنقل في المكتبة وعرض المكونات ، تم استخدام Storybook. النسخة العامة من Storybook متوفرة هنا لأحدث إصدار مستقر تم نشره. تتوفر مجموعة React Playground للعب مع المكتبة.
لاستخدام React Design كإدمان على التطبيق ، يمكنك تثبيته من NPM. نقترح استخدام create vite لإنشاء رد فعل جديد لـ WebApp ، على النحو التالي:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --saveمزيد من المعلومات لإنشاء تطبيق جديد مع React:
لا يتضمن design-react-kit ملفات CSS وملفات الخطوط ، وبالتالي فمن الضروري تثبيتها بشكل منفصل:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save في هذه المرحلة ، ما عليك سوى الاستيراد بشكل صريح إلى تطبيق CSS و FONT إذا كنت تستخدم create vite داخل ملف ./src/App.js :
import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;
function App ( ) {
return < Alert > This is an Alert </ Alert > ;
}
export default App ;يمكنك استشارة قالب الويب هذا باستخدام StackBlitz: قوالب الويب
يستخدم سمة Bootstrap Italia مجموعة محددة من خط المحرف: titillium-web و roboto-mono و lora . يتم ترك تحميل هذه الخطوط إلى المتصفح ، ولكن إذا رغبت في ذلك ، يمكن التحكم فيها من خلال مكون FontLoader المناسب. ما عليك سوى إعلان مكون FontLoader في الجزء العلوي من تطبيق React للسماح بالتحميل.
بدلاً من ذلك ، من الضروري إدارة تحميل الخطوط يدويًا من خلال حزمة webfontloader :
const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
custom : {
families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
}
} ) ; لا تتضمن المكتبة react و react-dom ، وتجنب صدام الإصدارات وزيادة عديمة الفائدة في حجم الحزمة. لهذا السبب ، للتنمية المحلية ، سيكون من الضروري تثبيت الإدمان يدويًا.
الأمر الذي سيتم تنفيذه هو
yarn install --peersأو بدلاً من ذلك يدويًا
yarn install react react-dom؟ من الممكن المساهمة في المكتبة بطرق مختلفة:
هل ترغب في المساعدة في Design React Kit؟ أنت في المكان المناسب!
إذا لم تكن قد قمت بذلك بالفعل ، فابدأ بقضاء بضع دقائق لتعميق معرفتك في إرشادات التصميم الخاصة بخدمات الويب PA ، والرجوع إلى المؤشرات حول كيفية المساهمة في Design React Kit.
يجب أن يكون الحد الأدنى من متطلبات بيئتك المحلية:
استنساخ المستودع وأداء yarn لتثبيت الإدمان. ثم أداء
yarn storybook:serveلبدء خادم التطوير.
ستتوفر Storybook بعد ذلك على http: // localhost: 9001/
تم إثراء القصص القصيرة مع بعض addons التي تجعلها أكثر الحديث.
سيوجه هذا القسم إنشاء مكونات جديدة في المستودع. توجد جميع المكونات في مجلد src : يحتوي كل مكون على مجلد مع كل ما هو ضروري لجعله يعمل. قصص Storybook بدلاً من ذلك تحت stories . اختبارات الوحدة الموجودة في مجلد test . على سبيل المثال ، يوجد مكون Button تحت مسار src/Button وهيكله كما يلي:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
بعض القواعد الأساسية لتنظيم المكونات:
.stories.tsx فقط على ما يتعلق بالمكون نفسه..mdx على وثائق تتعلق بالمكون نفسه فقط.test.tsx على اختبارات تتعلق بالمكون نفسه فقط.بمجرد إنشاء مكون جديد ، مع قصته ، سيكون بدء Storybook يمكن التحقق من أن كل شيء يعمل كما ينبغي.
الوثائق:
يوفر نظام الاختبار تحكمًا في القصص الموجودة ، من خلال تقنية تسمى اختبار "Snapshot": سيتم نسخ محتوى قصة القصص في ملف خاص والحفاظ عليه لإخطار أي تغييرات في المستقبل. هذا يعني أن إضافة قصص جديدة يمكن أن تكون في فشل مهمة "الاختبار" في العلاقات العامة. إذا تمت إضافة قصة جديدة أو قصة موجودة بالفعل ، فسيكون من الضروري تحديث ملف اللقطة على النحو التالي:
yarn test -uفي هذه المرحلة ، قم بإنشاء عمولة جديدة وقم بتحديث العلاقات العامة باستخدام ملف اللقطة المحدثة. تأكد من تصحيح التغييرات التي تم إجراؤها قبل تحديث العلاقات العامة.
لملء المكتبة وإنشاء الملفات في مجلد dist ، ما عليك سوى تشغيل الأمر المخصص:
yarn build تتبع المجموعة المؤشرات الموضحة في إرشادات التصميم الخاصة بخدمات الويب الخاصة بالإدارة العامة ، القسم 6.3.1.2.1. دعم المتصفح من خلال استخدام حزمة browserslist-config-design-italia .
تم إحضار المكتبة إلى TypeScript وتم تصدير الأنواع معها.
شكر خاص لأولئك الذين جعلوا تطوير هذه المكتبة ممكنة!
 |  |  |  |
|---|---|---|---|
| سباتينو غالاسو | ماركو ليبراتي | ماتيو أفيساني | فيديريكو توربينو |
ومساهمة مختبرات الأوبنة
جميع المساهمين ( المصنوعون مع المساهمين-IMG )
