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

Neetoui هي المكتبة التي تدفع التجربة في جميع منتجات Neeto التي تم بناؤها في BigBinary.

تثبيت 

 yarn add @bigbinary/neetoui

هذا من شأنه تثبيت حزمة neetoui داخل التطبيق الخاص بك. بدءًا من 3.0.x ، تم فصل ورقة الأنماط Neetoui عن الحزمة. للحصول على الأنماط التي تعمل ، يرجى استيراد ورقة أنماط Neetoui إلى نقطة دخول scss الرئيسية. 

 @import " @bigbinary/neetoui " ;

التبعيات

لدى Neetoui القليل من التبعيات الأقران المطلوبة لاستخدام Neetoui بشكل صحيح. تأكد

react-toastify

يعتمد Neetoui على react-toastify للمحامص ، لذلك يجب استيراد أنماط المحمصة إلى نقطة دخول scss الرئيسية. 

 @import " react-toastify/dist/ReactToastify.min.css " ;

تأكد أيضًا من تضمين <ToastContainer /> في التطبيق الخاص بك. 

 import React from "react" ;

import { ToastContainer } from "react-toastify" ;

const App = ( ) => {
  return (
    < >
      < ToastContainer />
      // Other children
    </ >
  ) ;
} ;

formik

لجعل التعامل مع النماذج أسهل مع Neetoui ، نحن نقدم Formik ملزمة مع مكونات neetoui. لمعرفة Formik ، المرجع الوثائق الرسمية.

الاستخدام

Neetoui يصدر كل مكونها كصادرات مسموحة. يمكنك استيراد المكونات اللازمة بشكل فردي بالطريقة التالية: 

 import { Button , Tooltip } from "@bigbinary/neetoui" ;

إذا كنت بحاجة إلى إمكانية الوصول إلى كائن يحتوي على إشارات إلى جميع المكونات التي يمكنك القيام بها لاستيراد بطاقة Wildcard. بهذه الطريقة ، يمكنك تقديم مكونات ديناميكية من Neetoui. 

 import React from "react" ;
import * as NeetoUI from "@bigbinary/neetoui" ;

export default function index ( ) {
  const Button = NeetoUI . Button ;

  // get a random component
  const componentName = Math . random ( ) > 0.5 ? "Badge" : "Avatar" ;
  const MyDynamicComponent = NeetoUI [ componentName ] ;

  return (
    < div >
      < Button />
      < MyDynamicComponent />
    </ div >
  ) ;
}

Formik

Neetoui formik تصدير جميع مكوناتها كصادرات مسماة. يمكنك استيراد المكونات اللازمة بشكل فردي بالطريقة التالية: 

 import { Input } from "@bigbinary/neetoui/formik" ;

المكونات المتاحة في Neetoui formik:

  • مدخل
  • راديو
  • زر
  • استمارة
  • Actionblock
  • يختار
  • يُحوّل
  • Textarea
  • مربع الاختيار
  • الانفصال
  • TreesElect
  • شريط التمرير

يمكنك إحالة مجلد Formik للتحقق من أحدث مكونات Formik.

من أجل استخدام مكونات neetoui formik ، تحتاج إلى لف النموذج الخاص بك مع مكون Form . 

 import * as Yup from "yup" ;
import { Form } from "@bigbinary/neetoui/formik" ;

< Form
  formikProps = { {
    initialValues : {
      name : "" ,
      email : "" ,
    } ,
    onSubmit : ( values , formikBag ) => {
      console . log ( values , formikBag ) ;
    } ,
    validationSchema : Yup . object ( {
      name : Yup . string ( ) . required ( "Name is required" ) ,
      email : Yup . string ( ) . email ( "Invalid email" ) . required ( "Email is required" ) ,
    } ) ,
  } }
  className = "w-full space-y-6"
>
  { props => {
    return (
      < >
        < Input { ... props } label = "Name" name = "name" />
        < Input { ... props } label = "Email" name = "email" />
        < Button label = "Submit" type = "submit" style = "primary" />
      </ >
    ) ;
  } }
</ Form > ;

في حالة عدم رغبتك في عدم تمرير children كدالة ، يمكنك استخدام بناء الجملة التالي: 

 import * as Yup from "yup" ;
import { Form } from "@bigbinary/neetoui/formik" ;

< Form
  formikProps = { {
    initialValues : {
      name : "" ,
      email : "" ,
    } ,
    onSubmit : ( values , formikbag ) => {
      console . log ( values , formikbag ) ;
    } ,
    validationSchema : Yup . object ( {
      name : Yup . string ( ) . required ( "Name is required" ) ,
      email : Yup . string ( ) . email ( "Invalid email" ) . required ( "Email is required" ) ,
    } ) ,
  } }
  className = "w-full space-y-6"
>
  < >
    < Input { ... props } label = "Name" name = "name" />
    < Input { ... props } label = "Email" name = "email" />
    < Button label = "Submit" type = "submit" style = "primary" />
  </ >
</ Form > ;

يقبل مكون Form الدعائم التالية:

  • formikProps : كائن الدعائم Formik. يمكنك تمرير initialValues ، validationSchema ، و onSubmit ، إلخ. كدعائم لمكون Form .
  • children : يمكنك تمرير وظيفة children إلى مكون Form . ستتلقى الوظيفة كائن Props Formik كوسيطة. أو يمكنك تمرير children مباشرة داخل مكون Form .
  • className : يمكنك استخدام هذا الدعامة لتوفير فئة مخصصة للنموذج.
  • formProps : شكل كائن الدعائم. يمكنك تمرير className ، style ، إلخ. كدعائم إلى مكون Form .
  • scrollToErrorField : لتحديد ما إذا كان يتم تمكين زر التمرير إلى النقر فوق زر إرسال أو لا. القيمة الافتراضية خاطئة.

تطوير

تثبيت جميع التبعيات من خلال تنفيذ الأمر التالي. 

 yarn

يمكنك إنشاء مكونات جديدة في src/components وتصديرها من src/index.js .

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

  • لمعرفة ما إذا كانت الاختبارات المرتبطة بمكوناتك تمرير yarn test .

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

  • لمعرفة ما إذا كان يتم بناء Neetoui وتجميعها بعد تغييرات yarn bundle .
  • لمعرفة ما إذا كان يتم بناء القصة القصيرة yarn build .

لاحظ أنه لن يتم تجميع أي شيء في مجلد stories مع Neetoui .

بناء والإفراج.

يتم نشر حزمة @bigbinary/neetoui إلى NPM عندما ندمج العلاقات العامة مع patch أو minor أو الملصق major للفرع main . يتم استخدام ملصق patch لإصلاحات الأخطاء ، ويتم استخدام الملصقات minor للميزات الجديدة ويتم استخدام الملصقات major لكسر التغييرات. يمكنك الخروج من سير عمل Create and publish releases في إجراءات GitHub للحصول على تحديث مباشر.

في حالة فاتتك إضافة الملصق ، يمكنك نشر الحزمة يدويًا. لذلك ، تحتاج أولاً إلى إنشاء PR لتحديث رقم الإصدار في ملف package.json ودمجه على الفرع main . بعد دمج العلاقات العامة ، تحتاج إلى إنشاء إصدار GitHub جديد من الفرع الرئيسي. كلما تم إنشاء إصدار جديد برقم إصدار جديد ، ستنشر إجراءات GitHub تلقائيًا الحزمة المدمجة إلى NPM. يمكنك الخروج من Publish to npm في إجراءات GitHub للحصول على تحديث مباشر.

يرجى ملاحظة أنه قبل نشر الحزمة ، تحتاج إلى التحقق من الوظيفة في بعض تطبيقات الويب NEETO محليًا باستخدام yalc Package Manager. تم شرح استخدام YALC في هذا الفيديو: https://youtu.be/f4zzfnrntq8

الوثائق

اقرأ المستندات هنا

https://neeto-ui.neeto.com

مكتبات أخرى

  • Neetoicons: Neetoicons هي مكتبة الرموز الرسمية من BigBinary.
  • Neetoeditor: NeetoEditor هو محرر نص Rich-Text الذي يعتمد على النثر يستخدم في BigBinary.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل