amber components
v1.2 - still work in progress(bar)
تنفيذ مكونات الويب لنظام تصميم العنبر.
يهدف هذا المستودع بشكل أساسي إلى المطورين والمساهمين ، من أجل الوثائق والأناقة المناسبة ، يرجى الرجوع إلى https://amber.bitrock.it.
يمكنك معاينة/تجربة المكونات على كتاب القصص المباشر.
$ yarn add @amber-ds/components
--- or ---
$ npm install @amber-ds/componentsاختياريا ، قد ترغب في إضافة ملفيات مكونات الويب لدعم الإصدارات السابقة من Firefox و Edge.
$ yarn add @webcomponents/webcomponentsjs
--- or ---
$ npm install @webcomponents/webcomponentsjsيمكنك استيراد المكونات في مشروعك بطريقة مختلفة حسب البيئة:
كملفات JavaScript مع Bundler (مثل WebPack)
// myfile.js
// import the whole components library
import AmberComponents from '@amber-ds/components' ;
// import a single component (button for instance)
import '@amber-ds/components/button' ,كملفات JavaScript من HTML بدون حزم
<!-- mypage.html -->
<!-- import the whole components library -->
< script type =" module " src =" ./node_modules/@amber-ds/components/index.js " > </ script >
<!-- import a single component (button for instance) -->
< script type =" module " src =" ./node_modules/@amber-ds/components/button.js " > </ script > ثم في ملف .html ، أو القدر الذي ينتج إخراج HTML:
<!-- myfile.html -->
< amber-button priority =" primary " >
Get ready!
< amber-button > وصف موجز لعمارة التطوير ، المكدس وكيفية العمل على الرمز:
مواصفات WebComponents هي مصطلح مظلة لتجميع مواصفات العناصر المخصصة V1 و Shadow DOM V1. تتيح لك واجهات برمجة تطبيقات المتصفح كتابة علامات HTML المخصصة المخصصة لـ W3C مع وظائفها الخاصة ، والأساليب الناطمية والعلامات التي تعمل عبر المتصفحات وأطر الواجهة الأمامية.
لتحقيق مرونة أفضل في الكود ، تتم كتابة جميع المكونات في TypeScript للاستفادة بشكل أساسي من فحص النوع الثابت وبناء جملة Decorators. كما أنه يستخدم لنقل التعليمات البرمجية إلى ES-2015.
نظرًا لأن مكونات الويب كمعيار لا تتعامل مع ميكانيكا التقديم وربط البيانات ، فإننا نعتمد HTML LIT و Fliment Component Class كطبقة أساس لكل مكون من هذه المكتبة.
triggerEvent(element, name, ?detail) - غلاف لإنشاء حدث مخصص جديد وإرساله باستخدام كائن detail اختياري. تم تشغيل الفقاعات بالفعل.لإنشاء لوحة غلاية مطلوبة (ولكن الحد الأدنى) لمكون العنبر الجديد ، قمنا بتضمين أداة CLI صغيرة:
$ yarn create:component [name]
--- or ---
$ npm run create:component [name] سيؤدي ذلك إلى إنشاء مقلع فرعي ضمن مجلد ./src/components مع اثنين من ملفات بداية index.ts و style.scss .
ستحتاج فقط إلى استيراد المكون الجديد داخل ملف ./src/components/library.ts لسلسلة ذلك في عملية Dev & Build.
يمكنك تحديد أنماط كل مكون باستخدام SASS ، يتم معالجة ملف index.scss الرئيسي داخل المجلد المكون بواسطة المترجم ثم يتم حقنه في الظل DOM.
إذا كنت بحاجة إلى مشاركة الأنماط أو الاختلاط أو أي شيء آخر بين المكونات ، فيجب عليك إنشاء ملف منفصل ثم استيراده عند الحاجة.
في الوقت الحالي ، يتم اختبار المكتبات الأساسية فقط ( ملفات .ts العادية داخل مجلد src/libs ) عبر Jest.
ابدأ المشروع في وضع التطوير مع كتاب قصص إعادة التحميل المباشر
$ yarn startابدأ المشروع في وضع التطوير مع صفحة HTML بسيطة
$ yarn dev إنشاء كتاب قصص ثابت في المجلد ./dist Dist
$ yarn build:storybookقم بتشغيل اختبارات الوحدة
$ yarn test:unitيتبع هذا المشروع سياسة تفرع بسيطة:
master على رمز مستقر فقط ، ويجب عدم تحديثه مباشرةdevelopment حيث يتم كتابة الكود الفقير أو التجريبيgh-pages حيث يتم نشر ملفات بناء القصص القصيرة الثابتة القابلة للتشكيل لا تندمج مباشرة development في master ( إنه مقفلة للمسؤول ... ) ، أرسل دائمًا العلاقات العامة لإجراء مراجعة.
قبل محاولة نشر إصدار جديد من الحزمة على NPM ، تشغيل أولاً من خلال قائمة المراجعة هذه:
package.json بعد إرشادات Semverإذا كان الإصدار يتضمن مكونًا جديدًا :
webpack.config.js ، هذا مطلوب لإنشاء الوحدة المستقلة/src/components/library.ts components/library.ts ، وبهذه الطريقة سيكون متاحًا عندما يستورد المستخدم المكتبة بأكملها/src/elements.ts ، يمكن أن يساعد ذلك في توافق vue.js في بعض الحالات عندما يتم دفع نسخة جديدة مصطبة إلى الفرع master ، فإنه سيؤدي تلقائيًا إلى تشغيل النشر على NPM ( بعد جميع تمريرات الشيكات الآلية ) باستخدام حساب Bitrock-Admin.
يتم توزيع رمز في هذا الشباك وشعار Amber Design Sytem بواسطة فريق Bitrock UI Engineering ، الذي تم إصداره تحت رخصة معهد ماساتشوستس للتكنولوجيا.
