precise ui

مكتبة مكونات React Componnt Componity مع الحد الأدنى من التبعيات مدعومة من Zeiss.

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

انظر https://precise-ui.io للاطلاع على حوض المطبخ لدينا (أي ، صفحة تجريبية توضح جميع المكونات بما في ذلك وثائقها).

ابدء

في الأساس ، يجب أن يكون الاستخدام الشائع ضمنيًا بينما يتم توفير المرونة من خلال بيانات صريحة. على هذا النحو ، فإننا نهدف إلى البساطة (الرأي) ، مع التمكن من تخصيص أكبر قدر ممكن. على الرغم من أن التصميم القياسي تم تعيينه إلى حد كبير لهدفنا الأساسي ، إلا أننا نريد تحقيق الحرية الكاملة في هذا المجال. لهذا السبب ، نتحسن باستمرار من كيفية قيامنا بذلك وكيفية فضح المكونات لتمكين أي نوع من التخصيص الذي قد يكون مرغوبًا فيه.

يمكن دمج واجهة المستخدم الدقيقة بسهولة في مشروع الواجهة الأمامية باستخدام NPM أو الغزل. لبدء استخدامه ، يرجى اتباع التعليمات أدناه:

تثبيت

1. أولاً ، عليك تثبيته:

npm i precise-ui

أو بدلاً من ذلك ، باستخدام الغزل

yarn add precise-ui

2. ثم ، تأكد من تثبيت جميع تبعيات الأقران:

npm i react styled-components

الاستخدام

كل شيء جاهز ، يمكنك الآن البدء في استيراد مآسي بدقة-UI.

 import { TextField } from 'precise-ui' ;

< TextField label = "Label" />

يمكنك رؤية قائمة بجميع المكونات المتاحة على موقعنا.

المساهمة

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

إذا كنت تشعر بعدم اليقين فيما إذا كان يجب عليك المساهمة أم لا ، فربما يمكن أن تساعدك مدونة قواعد سلوكنا.

القضايا والدعم

إذا كان لديك أي استخدام وأسئلة عامة ، فنحن نرحب بك لطرح سؤال حول سعة مكدس باستخدام العلامة precise-ui ، وستتلقى المساعدة في أقرب وقت ممكن.

أيضًا ، عند إنشاء مشكلة جديدة هنا ، يرجى استخدام أحد القوالب المقدمة:

• تقرير الأخطاء
• ميزة الاقتراح

تطوير

توجهك الأقسام التالية خلال عملية تطوير واجهة المستخدم الدقيقة.

تثبيت

للتنمية ، ستحتاج إلى NPM و Node.js 8+. بعد استنساخ المستودع قم بتثبيت جميع التبعيات عبر

npm install

فيما يلي مثال سريع لتبدأ. كل ما تحتاجه هو التشغيل:

npm start

نتيجة لذلك ، سيبدأ هذا خادم التطوير الذي يعمل على تشغيل المطبخ (تطبيقنا التجريبي) ، والذي يعمل محليًا ويمكن الوصول إليه عبر LocalHost: 6060. ملاحظة: يمكن تغيير هذا المنفذ. تحتوي الصفحة المتاحة على جميع المكونات المضمنة وبعض الوثائق المفيدة لهذه.

الإصدار

يمكن زيادة الإصدار عبر npm كذلك.

npm version

سيظهر هذا الإصدار الحالي وطلب إصدارًا جديدًا. نتيجة لذلك ، يتم تحديث المعلومات الواردة في الحزمة. json. بالإضافة إلى ذلك ، يتم إنشاء علامة GIT مع المعلومات (تلقائيًا بادئة باستخدام "V"). يمكن أيضًا أن تكون العملية آلية ، على سبيل المثال ، من خلال تحديد الإصدار الجديد مباشرة. لذلك ، على سبيل المثال ، إذا كان الإصدار الجديد هو "1.2.3" ، فنحن فقط نستخدم الأمر التالي:

npm version --new-version 1.2.3

الاتفاقيات

نحن لا نستخدم الصادرات الافتراضية. بدلاً من ذلك ، يجب تسمية كل تصدير بشكل صحيح. بالنسبة للمكونات ، يساوي اسم التصدير اسم ملفه أو مجلده.

المجلدات

يجب وضع كل مكون رئيسي مكشوف في مجلده الخاص components . تعتبر المكونات الموضوعة في *.part.tsx مكونات داخلية تم إنشاؤها فقط لتوفير بعض الهيكل الداخلي (الضروري).

يجب وضع كل مكون مساعد للتصميم المكشوف في ملف في مجلد quarks . يبدأ مساعدو التصميم ببادئة Styled ، تمامًا مثل المكونات التي تم تصميمها.

يجب أن يكون أي مكون عالي الترتيب (HOC) موجودًا في المجلد hoc . اتفاقية التسمية هي فضح المخصص with بادئة.

توجد المكونات المتعلقة بالسياق في مجلد contexts .

يجب وضع المرافق الوظيفية العادية في مجلد utils . على الرغم من راحة جميع محتويات utils ، يجب الرجوع إلى وحداتها مباشرة من أي مكونات. يجب أن تكون المرافق مستدامة ذاتيا إلى حد كبير ، أي أن مكونات الظهر ممنوع.

الأشرطة

بينما يجب إنشاء مكونات عديمة الجنسية كوحدة const ، يجب إنشاء مكونات statefull class . في الحالة السابقة ، يجب إنشاء واجهة فقط تحمل اسم المكون مع Props (لإعلان طباعة الدعائم). في الحالة الأخيرة ، يجب إنشاء واجهة إضافية تحمل اسم المكون مع State أيضًا. تحمل هذه الواجهة معلومات النوع للحالة الداخلية للمكون.

يجب دائمًا اللاحقة مكونات حقل الإدخال مع Field . يجب على الدعائم تمديد واجهة InputProps .

يجب أن تسبق الدعائم الحدث مع on ويجب أن يكون لها حجة واحدة فقط. يجب أن تكون هذه الوسيطة كائنًا يتبع واجهة ، والتي لها اسم مناسب للحدث ، وعادة ما يتكون من اسم المكون ، ونوع الحدث ، ويكون اللاحقة مع Event ، على سبيل المثال ، من أجل onChange من TextField لدينا TextFieldChangeEvent .

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

• *Control ، المكونات الوظيفية الحكومية
• *Panel ، تخطيط لاستخدامه
• *Field ، حقل إدخال

يمكن أن تحدث استثناءات من هذه الاتفاقية لأسباب مختلفة (تاريخية ، جمالية ، ...) ، ولكن ينبغي دائمًا أن تُناقش ومناقشة بشكل صحيح.

تنسيق الكود

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

npm run prettier

إذا كنت تشك في أن تغييرات الكود الخاصة بك تناسب التنسيق المطلوب.

اختبارات الوحدة

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

npm run test

هذا سوف يدير أيضا linter. تتوفر اختبارات الوحدة المستقلة عبر test:unit . وبالمثل ، يمكننا أيضًا الإبلاغ بسهولة عن تغطية الكود:

npm run test:unit --coverage

لاختبارات الوحدة نستخدم Jest. نوصي باستخدام اختبارات لقطة (والتي تتم عن طريق الإنزيم وبعض لقطات JSON Serializer).

الاختبار البصري

توجد لقطات مرئية في /integration/__image_snapshots__ .

عند تشغيل الاختبار ، يقوم بإعداد مكونات من [componentName]/Example.md ، ويقوم بتصنيع لقطات الشاشة ويقارنها مع لقطات الإصدار السابقة.

لتشغيل الاختبار يجب تثبيت Docker محليًا.

npm run test:visual

بمجرد تغيير المكون أو إضافته أو إزالته ، يجب تحديث اللقطات. لتحديث اللقطات:

npm run test:visual -- -u

في بعض الحالات (أي مكونات مع الرسوم المتحركة) ، هناك حاجة لتخطي الاختبار. يمكن أن يتم ذلك في الطريق التالي: تحديث مثال.

 ```js { "props": { "data-skip": true } }

<Component />

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

 ```js { "props": { "data-wait": 500 } }

<Component />

إضافة أيقونات جديدة

قائمة جميع الرموز المستوردة هي في /tools/icongen.config . بعد تعديل القائمة ، يجب تشغيل npm run icongen أو سيتم تشغيله على Prepush.

إصدار

يتم تجميع جميع التعليمات البرمجية القابلة لإقامة في فرع develop . لإصدار إصدار ببساطة قم بإنشاء إصدار github (عادةً ما يتم نسخ الإدخالات الحالية من ملف CHANGELOG.md ).

وهكذا يشبه سير العمل القياسي:

1. استنساخ المستودع
2. اصنع فرعًا
3. هل العمل
4. ادفع التغييرات الخاصة بك
5. اصنع العلاقات العامة لشوكة / فرعك develop
6. بمجرد "ما يكفي" الميزات التي تم تجميعها في develop ، قم بإصدار جيثب
7. للتغييرات التالية develop ، تأكد من تغيير / زيادة رقم الإصدار

لمعرفة الإصدار الذي تم إصداره حاليًا ، لديك خياران. إما أن تذهب إلى صفحة NPM أو يمكنك استخدام إصدارات GitHub. كلاهما مرتبط على رأس README.MD أيضًا.

رخصة

يتم إصدار واجهة المستخدم الدقيقة باستخدام ترخيص MIT. لمزيد من المعلومات ، انظر ملف الترخيص.

نحن نستخدم بعض الرموز من أيقونات واجهة المستخدم. يتم تغطية الكود والتصميم الخاص بهم من خلال ترخيص المواد (MIT) المعنية.