🗺️ الخريطة السؤال اللي بدأ كل ده: أنا بعرف React، عايز أبني الـ component library بتاعتي، أستخدم إيه؟ الإجابة مش مكتبة واحدة، دي طبقات: أساس للـ behavior، و styling، و build، و docs، و animation.
🏗️ تشبيه المذكرة كلها: عمارة على المحارة
الـ headless library زي عمارة متسلّمة على المحارة : الأساسات والسباكة والكهربا (الـ accessibility والكيبورد والـ focus) متعملة صح ومتختبرة.
انت اللي بتختار الدهان والسيراميك والإضاءة (الـ design system).
وانت اللي بتختار الباب بيتفتح إزاي، بهدوء ولا بسرعة (الـ animation).
أما مكتبة زي rc-* فهي شقة متشطبة : أسرع تسكن فيها، بس لو عايز تغيّر الديكور هتكسّر وتعيد.
💡 هتطلع من المذكرة بإيه؟
الـ stack الكامل لبناء lib: Base UI أو React Aria، Tailwind و cva، tsdown، Storybook، Vitest، Changesets.
الفرق الحقيقي بين Base UI و React Aria و Radix و rc-* ومتى تختار كل واحدة.
إزاي تكتب animation بتاعتك للـ modal والـ drawer والـ select والـ toast بـ CSS بس.
جدول تقييم من ١٠٠ يحسم القرار.