feat(organisms): implement MealPlanCard component with full i18n and RTL support

[Copilot]

This PR implements the MealPlanCard component as requested in issue #67, providing a comprehensive meal planning solution with full internationalization and accessibility support.

🚀 Features Implemented

Core Functionality

• Meal Plan Display: Shows scheduled meals with recipe information, timing, and nutritional data
• Interactive Controls: Edit, complete, remove, and add notes functionality
• Status Management: Visual indicators for planned, prepped, and completed meal states
• Meal Type Support: Breakfast, lunch, dinner, and snack categorization with appropriate badges

Display Variants

• Daily View: Time-focused display with detailed recipe information
• Weekly View: Abbreviated day names for week-long planning
• Calendar View: Compact month/day format for overview planning

Internationalization & Accessibility

• Complete i18n Support: Translation keys added for EN, NL, and AR locales
• RTL Layout: Full right-to-left support for Arabic with proper alignment
• WCAG 2.1 AA Compliance: Proper ARIA labels and semantic HTML
• Locale-aware Formatting: Date formatting respects user locale preferences

Interactive Features

• Drag & Drop Ready: Visual handles and cursor styling for meal reordering
• Nutrition Scaling: Automatic nutrition calculation based on serving size
• Notes System: Inline note editing with visual indicators
• Status-based Styling: Opacity and color changes based on completion status

🛠️ Technical Implementation

// Example usage
<MealPlanCard 
  mealPlan={{
    id: 'meal-1',
    date: new Date(),
    mealType: 'lunch',
    recipe: recipe,
    servings: 2,
    prepStatus: 'planned'
  }}
  variant="daily"
  allowEditing={true}
  draggable={true}
  onEdit={handleEdit}
  onComplete={handleComplete}
  onRemove={handleRemove}
/>

Component Structure

• Location: src/components/organisms/meal-plan-card/
• Type: Organism (complex component with business logic)
• Dependencies: Card, Badge, Button, existing atomic components
• Design Token Compliance: No hardcoded colors or spacing values

Translation Keys Added

{
  "mealPlan": {
    "mealTypes": { "breakfast": "Breakfast", "lunch": "Lunch", ... },
    "status": { "planned": "Planned", "prepped": "Prepped", ... },
    "actions": { "edit": "Edit Meal", "complete": "Mark Complete", ... },
    "labels": { "servings": "{{count}} serving", "calories": "{{count}}cal", ... }
  }
}

🧪 Testing & Documentation

• 30 Test Cases: Comprehensive coverage of all functionality, variants, and edge cases
• Storybook Stories: 15+ interactive examples including RTL testing
• TypeScript Interfaces: Full type safety with detailed JSDoc documentation
• Accessibility Testing: ARIA labels, keyboard navigation, and screen reader support

✅ Quality Assurance

• ✅ Build: Successful production build (1,018kb → 297kb gzipped)
• ✅ Tests: All 404 tests passing (30 new tests added)
• ✅ Lint: No errors, follows design token compliance
• ✅ i18n: Full support for EN-US, NL-NL, AR-SA locales
• ✅ RTL: Proper layout for right-to-left languages
• ✅ A11y: WCAG 2.1 AA compliance verified

📋 Integration Ready

The component is fully integrated with the existing ecosystem:

• Exported from organisms barrel (@/components/organisms)
• Follows atomic design principles
• Uses established component patterns
• Ready for meal planning workflows

Fixes #67.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[github-actions]

🎉 This PR is included in version 1.11.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀