عن المشروع

Sketchbook UI هي مكتبة مكونات React مصمّمة لتبدو كرسومات يدوية، موجهة للمشاريع الجانبية وصفحات الهبوط التي يكون فيها المظهر الدفتري المُسطّر هو الغاية. ما تقدمه المكتبة - 20 مكوناً مكتوبة بـTypeScript مع واجهات Prop مُصدَّرة. - عناصر النماذج: Button وInput وTextarea وCheckbox وSwitch وSelect وRadioGroup وSlider. - عرض البيانات: Badge وAvatar وCard وDivider وProgress وSkeleton (بالإضافة إلى SkeletonText وSkeletonCard) وSpinner وTooltip. - الملاحظات: Toast (مع ToastContainer ودالة useToast) وModal. - التنقل: Dropdown وAccordion (مع AccordionItem). النهج البصري ينبع المظهر من حدود SVG مُرسومة يدوياً، ونسيج الورق، والرسوم المتحركة الدقيقة وليس من مجموعة تصميم ثابتة. expose المكونات خصائص `colors` و`typography` للتخصيص، بحيث يمكن إعطاء الزر خلفيته الخاصة، وخطه، ولون النص، وحجم الخط، وعائلته (يستخدم المثال في ملف README خطاً كُتبياً مثل Caveat). يلتف `SketchProvider` حول التطبيق لتوفير سياق تنسيق موحد. التثبيت والإعداد يثبَّت باستخدام npm أو yarn أو pnpm (`npm install sketchbook-ui`)، مع اعتبار react وreact-dom تبعيات صديقة. يوصي ملف README باستيراد الملفStylesheet مرة واحدة في الملف الرئيسي: `import "sketchbook-ui/style.css";` ثم استيراد المكونات من الحزمة ووضعها داخل `SketchProvider`. وبسبب كون استيراد stylesheet خطوة منفصلة، فإن نسيانه يمثل خطأ أول تشغيل محتملاً. ملاحظات الحزمة والتشغيل يذكر ملف README أن المكتبة لا تعتمد وقتياً على شيء سوى React، وتُبنى بدعم من قص الشجرة بحيث لا تصل إلى الحزمة إلا المكونات المستوردة فعلياً، ويبلغ حجمها أقل من 70 كيلوبايت مضغوطة. ويُوضَّح قص الشجرة باستيراد مُسَمّى لمكون واحد. هذه ادعاءات خاصة بالمشروع؛ يجب التحقق منها مقابل bundler الخاص بك والإصدار قبل الاعتماد على الأرقام. التوثيق والترخيص جميع المكونات وتفرعاتها قابلة للاستعراض في Storybook مستضاف. تعيش تعليمات المساهمة في CONTRIBUTING.md، ويُصدَر المشروع تحت ترخيص MIT. مدى الملاءمة تناسب المكتبة المشروع إذا أردت واجهة ذات طابع يدوي مميز لنموذج أولي أو موقع شخصي أو منتج مرح، وكنت تعمل بالفعل في React مع TypeScript. وهي أقل ملاءمة للأنظمة الإدارية المكثفة، أو الجداول كثيفة البيانات، أو الفرق التي تحتاج مجموعة مكونات واسعة وخاضعة لاختبارات إمكانية الوصول ومعروفة منذ فترة طويلة — فلم يصف ملف README اختبار إمكانية الوصول، ولا system تخصيص يتجاوز خصائص كل مكون، ولا اتساع مكونات يقارن بأنظمة التصميم الرئيسية.