استخدام مكوّنات shadcn (Using shadcn Components)

الدرس 15 من 21 · دورة TanStack Form الكاملة · 6 دقيقة و27 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع شيفرة هذا الدرس

الفرع: shadcn-components

[00:00] إذًا الآن وقد أصبحنا على معرفة بواجهات TanStack Form البرمجية (APIs)، فلنرَ الآن كيف سنستخدم TanStack Form في الواقع في الإنتاج (production). ففي العادة، في الإنتاج، قد تكون تستخدم شيئًا مثل مكتبة مكوّنات (components)، أو قد تكون لديك

[00:13] مكوّناتك الخاصة. غير أنّك على الأرجح لن تستخدم مجرد حقل input عادي هنا وتنسّقه كلّما احتجت إلى استخدامه وهلمّ جرا. فأنت على الأرجح تملك مكوّنًا تستخدمه، أو أنّك تستخدم إحدى

[00:24] مكتبات المكوّنات. في حالتنا لدينا shadcn مثبّتًا. فلنحاول إذًا دمج shadcn مع TanStack Form واستخدام مكوّن الحقل (field) الذي نحصل عليه من shadcn. فإذًا في shadcn لدينا هذا مكوّن Field حيث يمكننا أن نمتلك حقلًا

[00:37] ويمكن أن يكون مجرد حقل input نصّي، أو قائمة منسدلة (dropdown)، ويمكن أن يكون checkbox، ويمكن أن يكون أي شيء، وبالإضافة إلى ذلك لدينا أيضًا مكوّنات لأخطاء التحقق من الصحة (validation errors) مثلًا. فإذا تمرّرنا إلى الأسفل هنا، فسنجد في مكانٍ ما هنا هذا

[00:51] مكوّن FieldError مثلًا الذي يمكننا استخدامه لعرض الأخطاء بدلًا من ما نفعله هنا في هذه اللحظة. فلنحاول إذًا الآن استخدام مكوّن الحقل هذا. فما يتعين علينا فعله أولًا هو أن نضيف مكوّن

[01:05] shadcn هذا الذي نحتاجه إلى مشروعنا. فإذًا سأذهب هنا في الطرفية (terminal) لديّ. سأشغّل هذا: `npx shadcn@latest` ثم add، ثم سأضيف مكوّن الحقل، وinput، وselect، وcheckbox، ومكوّن

[01:19] button أيضًا. والآن إذا شغّلت هذا، فينبغي أن تتوفّر لدينا هذه المكوّنات في مجلدنا في المشروع. فبعد أن ينتهي هذا، إن عدنا إلى هنا، فينبغي أن نجد مجلد components بكل المكوّنات التي

[01:35] ثُبِّتت. والآن فلنحاول استخدام ذلك للاسم الأول لدينا أولًا ربما. فهكذا في هنا لدينا الحقل الخاص بالاسم الأول. والآن عندما نصيّر أبناءنا (children)، فلنزِل ربما كل ذلك. والآن فلنستخدم مكوّن shadcn لدينا. فإذًا

[01:50] في هنا سأستورد الحقل من مجلد UI لدينا — مجلد مكوّنات واجهة المستخدم (UI) — مكوّن الحقل. ثم لإضافة وسم label نستخدم مكوّن FieldLabel.

[02:01] ثم فلنضيف First name. وهنا فلنضيف htmlFor. فلنقل firstName أيضًا. وأظنّ أنّني لم أستورد الحقل. فلنستورده.

[02:12] والآن بعد حقلنا، نحتاج إلى استيراد input من مجلد components لدينا. وفي input لدينا، سيلزمنا — مماثلين لما فعلناه مع حقل input من HTML — تمرير أشيائنا. فنحتاج إلى id هنا بقيمة firstName.

[02:25] وفقط من أجل توفير بعض الوقت، سيكون هذا مباشرًا جدًا. فسألصق الأشياء التي نحتاجها.

[02:30] فقط أن نضيف type بقيمة text، وplaceholder، وأن نحتاج أيضًا إلى تمرير القيمة من حقلنا التي نحصل عليها هنا في دالتنا onBlur وonChange، مماثلين لما فعلناه مع حقل input من HTML.

[02:41] وفي shadcn أيضًا لدينا مكوّن وصف (description) — FieldDescription — يمكننا استخدامه. فربما يمكنك أن تضيف هنا بعض الوصف. وأخيرًا نحتاج إلى عرض أخطائنا. فتذكّر أنّ طريقة عرضنا للأخطاء هي أنّنا نفحص

[02:54] ما إذا كان حقلنا غير صالح. فنعرض هذا div. فلنسخ ذلك مرة أخرى ونضعه هنا بعد الوصف لدينا.

[03:02] غير أنّه الآن بدلًا من استخدام هذا div، فلنستخدم في الواقع مكوّنًا من shadcn وهو FieldError. هذا.

[03:11] فلنغلق هذا هكذا. ونضع الخطأ فقط داخل هذا المكوّن. والآن إذا حفظت هذا، وكما ترى، نحصل على مكوّننا هنا. وإذا كانت لدينا أخطاء فيجب أن يُعرض هكذا. ويلزمنا أيضًا أن نلفّ كل شيء بـ

[03:28] مكوّن FieldGroup. وسيساعد هذا في التنسيق (styling). فربما — داخل نموذجنا وقبل حقولنا — فلنلفّ كل حقولنا بمكوّن FieldGroup وهو مثبّتٌ في الواقع من shadcn أيضًا. فإذًا

[03:45] فلنغلق هذا في هنا هكذا.

[03:51] فإذًا الآن سيكون لدينا بعض الفراغ (spacing) بعد حقلنا. والآن يمكننا ببساطة أن نفعل الأمر نفسه مع بقيّة حقولنا. سأفعل ذلك وأمرّ معك عليه بسرعة لأنّه من غير المفيد فعلُ هذا على الشاشة. فإذًا الآن لقد

[04:04] غيّرتُ جميع مكوّناتنا إلى تلك المكوّنات من shadcn. فالاسم الأول — انتهينا منه بالفعل. والاسم الأخير هو في الواقع أيضًا حقل input نصّي. فهو مماثل تمامًا. فلنغلق ذلك. وأمّا street فهذا

[04:23] هو أيضًا حقل نصّي (text field). تمامًا مماثل لكلمة السر. وهي أيضًا حقل نصّي. الاختلاف الوحيد هو ربما type بقيمة password هنا. والمثل بالنسبة إلى تأكيد كلمة السر أيضًا. أمّا هذه المصفوفة — مصفوفة المهارات (skills) — فاستخدمتُ فقط

[04:38] بعض المكوّنات هنا من shadcn أيضًا.

[04:40] FieldSet، وFieldLegend، ثم FieldGroup آخر يلفّ كل شيء داخل حلقتنا (loop)، ثم سأعرض حقلًا فقط. لكن الآن في هذه الحالة لدينا قائمة منسدلة (dropdown) لا حقل input نصّي. فاستخدمتُ مجرد مكوّن Select هذا من

[04:55] shadcn. غير أنّه ربما يكون ما قد يختلف من مكتبة مكوّنات إلى أخرى هو هذه الأحداث (events). فعلى سبيل المثال لمكوّن Select هذا، نمرّر له القيمة هنا. كذلك نمرّر له onValueChange عندما

[05:07] تتغيّر القيمة. إذًا نحتاج إلى استدعاء handleChange في هذا النداء (callback). غير أنّه onBlur في هذا المكوّن يُمرَّر إلى SelectTrigger هذه ولا إلى Select. فربما يكون هذا مجرد شيء عليك أن تنتبه له بحسب أيّ

[05:21] مكتبة مكوّناتٍ تستخدمها. ثم لدينا SelectContent هذه حيث نضع خيارات (options) القائمة المنسدلة.

[05:28] فسيكون لدينا beginner وintermediate وexpert هكذا. وبالطبع استخدمتُ مكوّن button من shadcn أيضًا.

[05:36] إذًا الآن نستخدم مكوّن button من shadcn لا الزر button العادي من HTML. وأخيرًا لدينا أيضًا هذا حقل accept terms حيث استخدمتُ مكوّن checkbox هذا من shadcn وأمرّر له أشيائنا. فربما بالنسبة إلى checkbox

[05:53] فستكون القيمة في خاصية checked هذه، إذًا نحتاج إلى تمرير قيمنا من حالة حقلنا إلى خاصية checked. وكذلك عندما تتغيّر القيمة فسيُعالَج هذا بواسطة onCheckedChange. إذًا نحتاج إلى

[06:05] استدعاء handleChange في هذا النداء، والتركيز (blur) هو ببساطة onBlur. وهذا في الأساس كل شيء؛ وفي ما يخص أزرار الإرسال أيضًا، فقط أزلتُ أزرار HTML مع التنسيق الذي كنّا نستخدمه واستخدمتُ مكوّن button من shadcn

[06:23] أيضًا. فإذًا سأضع لك شيفرة هذا إن أردت إلقاء نظرة عليها كذلك. فإذًا الآن باستخدام shadcn