# Responsive Design Checklist

Quick reference for making your components responsive.

---

## 🎯 Quick Wins

### 1. Replace Fixed Grids
```typescript
// ❌ Before
<div className="grid grid-cols-4 gap-6">

// ✅ After
<Grid cols={{ xs: 1, sm: 2, md: 3, lg: 4 }} gap="md">
```

### 2. Responsive Text Sizes
```typescript
// ❌ Before
<h1 className="text-3xl font-bold">

// ✅ After
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold">
```

### 3. Responsive Padding
```typescript
// ❌ Before
<div className="p-6">

// ✅ After
<div className="p-4 md:p-5 lg:p-6">
```

### 4. Responsive Spacing
```typescript
// ❌ Before
<div className="space-y-6">

// ✅ After
<div className="space-y-4 md:space-y-5 lg:space-y-6">
```

### 5. Stack on Mobile, Inline on Desktop
```typescript
// ❌ Before
<div className="flex gap-4">

// ✅ After
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
```

---

## 📱 Component Patterns

### Buttons
```typescript
// Full width on mobile, auto on desktop
<Button className="w-full sm:w-auto">
  حفظ
</Button>

// Responsive button group
<div className="flex flex-col sm:flex-row gap-3">
  <Button className="w-full sm:w-auto">إلغاء</Button>
  <Button className="w-full sm:w-auto">حفظ</Button>
</div>
```

### Cards
```typescript
<div className="bg-white p-4 sm:p-5 md:p-6 rounded-lg shadow">
  {/* Content */}
</div>
```

### Forms
```typescript
<form className="space-y-4 md:space-y-6">
  <Grid cols={{ xs: 1, md: 2 }} gap="md">
    <FormField label="الاسم" name="name" />
    <FormField label="البريد" name="email" />
  </Grid>
</form>
```

### Images
```typescript
<img 
  src={url}
  alt="description"
  className="w-full h-auto object-cover rounded-lg"
  loading="lazy"
/>
```

### Modals
```typescript
<div className="w-full sm:max-w-md md:max-w-lg lg:max-w-xl">
  {/* Modal content */}
</div>
```

---

## 🎨 Typography Scale

```typescript
// Headings
h1: "text-xl sm:text-2xl md:text-3xl lg:text-4xl"
h2: "text-lg sm:text-xl md:text-2xl lg:text-3xl"
h3: "text-base sm:text-lg md:text-xl lg:text-2xl"
h4: "text-sm sm:text-base md:text-lg"

// Body
large:  "text-base sm:text-lg"
normal: "text-sm sm:text-base"
small:  "text-xs sm:text-sm"
```

---

## 📏 Spacing Scale

```typescript
// Padding
xs: "p-2 sm:p-3"
sm: "p-3 sm:p-4"
md: "p-4 sm:p-5 md:p-6"
lg: "p-5 sm:p-6 md:p-7 lg:p-8"

// Gap
xs: "gap-2 sm:gap-2.5 md:gap-3"
sm: "gap-3 sm:gap-4"
md: "gap-4 sm:gap-5 md:gap-6"
lg: "gap-6 sm:gap-7 md:gap-8"

// Space-y
xs: "space-y-2 sm:space-y-3"
sm: "space-y-3 sm:space-y-4"
md: "space-y-4 sm:space-y-5 md:space-y-6"
lg: "space-y-6 sm:space-y-7 md:space-y-8"
```

---

## 🎯 Common Layouts

### Dashboard Stats Grid
```typescript
<Grid cols={{ xs: 1, sm: 2, lg: 4 }} gap="md">
  <StatCard />
  <StatCard />
  <StatCard />
  <StatCard />
</Grid>
```

### Two-Column Form
```typescript
<Grid cols={{ xs: 1, md: 2 }} gap="md">
  <FormField />
  <FormField />
</Grid>
```

### Three-Column Content
```typescript
<Grid cols={{ xs: 1, sm: 2, lg: 3 }} gap="md">
  <Card />
  <Card />
  <Card />
</Grid>
```

### Sidebar + Content
```typescript
<Grid cols={{ xs: 1, lg: 12 }} gap="md">
  <div className="lg:col-span-3">
    {/* Sidebar */}
  </div>
  <div className="lg:col-span-9">
    {/* Main content */}
  </div>
</Grid>
```

---

## ✅ Testing Checklist

### Visual Testing
- [ ] Test at 375px (iPhone)
- [ ] Test at 768px (iPad)
- [ ] Test at 1024px (Laptop)
- [ ] Test at 1920px (Desktop)
- [ ] No horizontal scrolling
- [ ] All text is readable
- [ ] Images scale properly
- [ ] No overlapping elements

### Interaction Testing
- [ ] All buttons are tappable (44x44px min)
- [ ] Forms work on mobile
- [ ] Dropdowns don't overflow
- [ ] Modals fit on screen
- [ ] Navigation menu works
- [ ] Links are easy to tap

### Accessibility Testing
- [ ] Tab through all interactive elements
- [ ] Escape closes menus/modals
- [ ] Focus indicators visible
- [ ] Screen reader announces changes
- [ ] Color contrast meets WCAG AA
- [ ] Text can be zoomed to 200%

---

## 🚫 Common Mistakes to Avoid

### ❌ Don't Use Fixed Widths
```typescript
// Bad
<div className="w-[500px]">

// Good
<div className="w-full max-w-md">
```

### ❌ Don't Forget Mobile-First
```typescript
// Bad - Desktop first
<div className="text-lg md:text-base">

// Good - Mobile first
<div className="text-base md:text-lg">
```

### ❌ Don't Use Absolute Positioning Without Responsive Adjustments
```typescript
// Bad
<div className="absolute top-4 right-4">

// Good
<div className="absolute top-2 right-2 sm:top-4 sm:right-4">
```

### ❌ Don't Forget Touch Targets
```typescript
// Bad
<button className="p-1 text-xs">

// Good
<button className="min-h-[44px] px-4 py-2 text-sm">
```

---

## 🎨 Breakpoint Reference

```
xs:  320px  →  639px   (Mobile)
sm:  640px  →  767px   (Large Mobile)
md:  768px  →  1023px  (Tablet)
lg:  1024px →  1279px  (Laptop)
xl:  1280px →  1535px  (Desktop)
2xl: 1536px →  1919px  (Large Desktop)
3xl: 1920px+           (Ultra-wide)
```

---

## 🔧 Useful Hooks

```typescript
import { useIsMobile, useIsTablet, useIsDesktop } from '~/hooks/useMediaQuery';

function MyComponent() {
  const isMobile = useIsMobile();    // < 768px
  const isTablet = useIsTablet();    // 768px - 1023px
  const isDesktop = useIsDesktop();  // >= 1024px
  
  if (isMobile) {
    return <MobileView />;
  }
  
  return <DesktopView />;
}
```

---

## 📚 Resources

- [Tailwind Responsive Design](https://tailwindcss.com/docs/responsive-design)
- [WCAG Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [Touch Target Sizes](https://web.dev/accessible-tap-targets/)
- [Mobile-First Design](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Mobile_first)

---

**Print this checklist and keep it handy while coding! 📋**