Create Drawer Component

[mdalaminbey]

📝Requirement: Custom Drawer Component (React + styled-components)

🎯 Goal

Develop a reusable Custom Drawer Component (like Ant Design’s Drawer) in React (TSX) using styled-components, supporting customizable header/footer via callbacks and a fixed footer at the bottom.

---

✅ Features

1. Basic Drawer

   • Open/close state (visible or open prop)
   • Overlay mask (optional)
   • Configurable width/height

2. Placement Options

   • left, right, top, bottom

3. Close Options

   • Close on overlay click (maskClosable)
   • Close on ESC key
   • Close button (X icon, optional)

4. Custom Header/Footer

   • renderHeader?: () => ReactNode → callback for custom header
   • renderFooter?: () => ReactNode → callback for custom footer
   • Footer should stick to bottom with proper padding

5. Customizable

   • Props for title, closable, maskClosable
   • Props for zIndex, placement, animationDuration

6. Animation

   • Smooth slide-in/out using styled-components keyframes
   • Placement-specific animation

7. Accessibility

   • role="dialog"
   • aria-modal="true"
   • Trap focus inside drawer
   • Close with ESC

8. Responsive

   • On mobile: full width (100vw)
   • On desktop: configurable width (default 400px)

---

📂 Technical Requirements

• Language: TypeScript (TSX)
• Styling: styled-components (with theme support)
• Animation: styled-components keyframes

---

📌 Tasks (Issues)

Backlog

• Research Ant Design Drawer API for reference
• Define prop types in TypeScript

To Do

• Setup base Drawer component structure (TSX + styled-components)
• Implement open/close state with props (open, onClose)
• Add overlay with mask click support
• Add placements (left/right/top/bottom) with animations
• Add close button & ESC support
• Implement renderHeader and renderFooter callbacks
• Make footer sticky/fixed at bottom
• Add responsive breakpoints (mobile full-width)
• Add accessibility features (focus trap, ARIA)

Review

• PR review & test coverage
• Cross-browser + mobile testing

Done

• Merge into master
• Update documentation & usage examples