@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/Drawer/ai-documentation.md

@@ -1,417 +0,0 @@
-# Drawer - AI Documentation
-
-> Auto-generated AI agent documentation for Drawer component system
-> Part of @pushwoosh/dumb-components library
-
-## Overview
-
-**Components:** Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs
-**Import Path:** `import { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from '@pushwoosh/dumb-components'`
-**Files:** Complex nested structure with Drawer, DrawerContent, and DrawerDocs components
-**Type:** Layout Component / Overlay Component
-**Description:** Slide-out drawer component system for side panels, documentation, and additional content areas
-
-## TypeScript Interfaces
-
-```typescript
-// Main Drawer component
-interface DrawerProps {
-  readonly size: 'small' | 'medium' | 'large' | 'full';
-  readonly isOpen: boolean;
-  readonly zIndex?: number;
-  readonly onClose?: () => any;
-  readonly withoutLockScreen?: boolean;
-  readonly closeOnClickOutside?: boolean;
-  readonly padding?: ContentPadding;
-  readonly children: ReactNode;
-}
-
-// Content padding configuration
-interface ContentPadding {
-  top?: string;
-  right?: string;
-  bottom?: string;
-  left?: string;
-}
-
-// Drawer size mapping
-const drawerSizes = {
-  small: '380px',
-  medium: '640px', 
-  large: '980px',
-  full: '100%',
-};
-```
-
-## Import & Usage
-
-**Import:**
-```typescript
-import { 
-  Drawer, 
-  DrawerHeader, 
-  DrawerTitle, 
-  DrawerBody, 
-  DrawerDocs,
-  useDocs 
-} from '@pushwoosh/dumb-components';
-```
-
-**Basic Usage:**
-```tsx
-function App() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
-      
-      <Drawer 
-        size="medium"
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-      >
-        <DrawerHeader>
-          <DrawerTitle>Drawer Title</DrawerTitle>
-        </DrawerHeader>
-        <DrawerBody>
-          <p>Drawer content goes here</p>
-        </DrawerBody>
-      </Drawer>
-    </>
-  );
-}
-```
-
-## Advanced Examples
-
-```tsx
-// Settings drawer with form
-function SettingsDrawer() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [settings, setSettings] = useState({});
-
-  return (
-    <Drawer 
-      size="large"
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      closeOnClickOutside={true}
-    >
-      <DrawerHeader>
-        <DrawerTitle>Application Settings</DrawerTitle>
-        <Button 
-          color="secondary" 
-          onClick={() => setIsOpen(false)}
-        >
-          Close
-        </Button>
-      </DrawerHeader>
-      
-      <DrawerBody>
-        <form>
-          <div>
-            <label>Theme:</label>
-            <Select 
-              value={settings.theme}
-              onChange={(theme) => setSettings(prev => ({ ...prev, theme }))}
-              options={[
-                { value: 'light', label: 'Light' },
-                { value: 'dark', label: 'Dark' }
-              ]}
-            />
-          </div>
-          
-          <div>
-            <Checkbox 
-              label="Enable notifications"
-              isChecked={settings.notifications}
-              onChange={(checked) => setSettings(prev => ({ ...prev, notifications: checked }))}
-            />
-          </div>
-          
-          <Button type="submit" color="primary">
-            Save Settings
-          </Button>
-        </form>
-      </DrawerBody>
-    </Drawer>
-  );
-}
-
-// Documentation drawer
-function ComponentDocumentation() {
-  const { isOpen, open, close } = useDocs();
-
-  return (
-    <>
-      <Button onClick={() => open('button-docs')}>
-        View Button Docs
-      </Button>
-      
-      <DrawerDocs 
-        isOpen={isOpen}
-        onClose={close}
-        size="large"
-      >
-        <h1>Button Component Documentation</h1>
-        <p>Detailed documentation content...</p>
-      </DrawerDocs>
-    </>
-  );
-}
-
-// Filter drawer for data tables
-function FilterDrawer({ filters, onFiltersChange }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [localFilters, setLocalFilters] = useState(filters);
-
-  const applyFilters = () => {
-    onFiltersChange(localFilters);
-    setIsOpen(false);
-  };
-
-  return (
-    <Drawer 
-      size="small"
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      padding={{ top: '0', right: '0', bottom: '0', left: '0' }}
-    >
-      <DrawerHeader>
-        <DrawerTitle>Filter Results</DrawerTitle>
-      </DrawerHeader>
-      
-      <DrawerBody>
-        <div style={{ padding: '16px' }}>
-          {/* Date range filter */}
-          <div>
-            <h4>Date Range</h4>
-            <DatePickerField 
-              value={localFilters.startDate}
-              onChange={(date) => setLocalFilters(prev => ({ ...prev, startDate: date }))}
-            />
-            <DatePickerField 
-              value={localFilters.endDate}
-              onChange={(date) => setLocalFilters(prev => ({ ...prev, endDate: date }))}
-            />
-          </div>
-          
-          {/* Status filter */}
-          <div>
-            <h4>Status</h4>
-            {['active', 'inactive', 'pending'].map(status => (
-              <Checkbox 
-                key={status}
-                label={status}
-                isChecked={localFilters.statuses?.includes(status)}
-                onChange={(checked) => {
-                  const newStatuses = checked 
-                    ? [...(localFilters.statuses || []), status]
-                    : localFilters.statuses?.filter(s => s !== status) || [];
-                  setLocalFilters(prev => ({ ...prev, statuses: newStatuses }));
-                }}
-              />
-            ))}
-          </div>
-          
-          <div style={{ marginTop: '24px', display: 'flex', gap: '8px' }}>
-            <Button color="primary" onClick={applyFilters}>
-              Apply Filters
-            </Button>
-            <Button color="secondary" onClick={() => setIsOpen(false)}>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </DrawerBody>
-    </Drawer>
-  );
-}
-
-// Full-size drawer for detailed views
-<Drawer 
-  size="full"
-  isOpen={showDetails}
-  onClose={() => setShowDetails(false)}
-  withoutLockScreen={false}
->
-  <DrawerHeader>
-    <DrawerTitle>User Profile Details</DrawerTitle>
-  </DrawerHeader>
-  <DrawerBody>
-    {/* Full user profile interface */}
-  </DrawerBody>
-</Drawer>
-
-// Custom padding drawer
-<Drawer 
-  size="medium"
-  isOpen={isOpen}
-  onClose={closeDrawer}
-  padding={{ 
-    top: '24px', 
-    right: '32px', 
-    bottom: '24px', 
-    left: '32px' 
-  }}
->
-  <h2>Custom Padded Content</h2>
-</Drawer>
-```
-
-## Props Reference
-
-### Drawer
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| size | 'small' \| 'medium' \| 'large' \| 'full' | required | Drawer width size |
-| isOpen | boolean | required | Whether drawer is visible |
-| onClose | () => any | undefined | Close callback function |
-| zIndex | number | 10000 | Z-index for drawer overlay |
-| withoutLockScreen | boolean | false | Whether to prevent body scrolling |
-| closeOnClickOutside | boolean | true | Whether clicking outside closes drawer |
-| padding | ContentPadding | undefined | Custom padding for drawer content |
-| children | ReactNode | required | Drawer content |
-
-### Size Reference
-| Size | Width | Best Used For |
-|------|-------|---------------|
-| small | 380px | Filters, simple forms, navigation |
-| medium | 640px | Settings, detailed forms, content |
-| large | 980px | Complex interfaces, documentation |
-| full | 100% | Full-screen experiences, editors |
-
-## Drawer Content Components
-
-### DrawerHeader
-Container for drawer title and header actions
-```tsx
-<DrawerHeader>
-  <DrawerTitle>Title</DrawerTitle>
-  <Button onClick={closeDrawer}>Close</Button>
-</DrawerHeader>
-```
-
-### DrawerTitle
-Styled title component for drawer headers
-```tsx
-<DrawerTitle>Settings</DrawerTitle>
-```
-
-### DrawerBody
-Main content area of the drawer
-```tsx
-<DrawerBody>
-  <p>Main content goes here</p>
-</DrawerBody>
-```
-
-## AI Agent Guidelines
-
-### ✅ Recommended Patterns
-- Use appropriate size for content complexity (small for filters, large for detailed interfaces)
-- Include proper header with title and close action
-- Set `closeOnClickOutside={true}` for better UX
-- Handle keyboard escape for accessibility
-- Use DrawerBody for main content with proper padding
-- Include loading states for async content
-
-### ❌ Common Mistakes to Avoid
-- Don't forget onClose handler - drawer won't be closable
-- Don't use full size unless absolutely necessary
-- Avoid nesting drawers within each other
-- Don't put critical actions only in click-outside areas
-- Avoid very complex content in small drawers
-
-### Integration Tips
-- Works well for settings panels and configuration UIs
-- Good for detailed views that don't need full modals
-- Effective for documentation and help content
-- Can contain forms, lists, and complex interfaces
-- Use with consistent animation and z-index management
-
-## Common Use Cases
-
-### 1. User Settings Panel
-```tsx
-function UserSettings() {
-  const [settingsOpen, setSettingsOpen] = useState(false);
-
-  return (
-    <Drawer 
-      size="medium"
-      isOpen={settingsOpen}
-      onClose={() => setSettingsOpen(false)}
-    >
-      <DrawerHeader>
-        <DrawerTitle>User Settings</DrawerTitle>
-      </DrawerHeader>
-      <DrawerBody>
-        <UserSettingsForm onSave={() => setSettingsOpen(false)} />
-      </DrawerBody>
-    </Drawer>
-  );
-}
-```
-
-### 2. Navigation Menu
-```tsx
-function MobileNavigation() {
-  const [navOpen, setNavOpen] = useState(false);
-
-  return (
-    <Drawer 
-      size="small"
-      isOpen={navOpen}
-      onClose={() => setNavOpen(false)}
-    >
-      <DrawerBody>
-        <nav>
-          <Link to="/dashboard" onClick={() => setNavOpen(false)}>Dashboard</Link>
-          <Link to="/users" onClick={() => setNavOpen(false)}>Users</Link>
-          <Link to="/settings" onClick={() => setNavOpen(false)}>Settings</Link>
-        </nav>
-      </DrawerBody>
-    </Drawer>
-  );
-}
-```
-
-### 3. Documentation Panel
-```tsx
-function HelpDrawer() {
-  const { isOpen, close } = useDocs();
-
-  return (
-    <DrawerDocs 
-      isOpen={isOpen}
-      onClose={close}
-      size="large"
-    >
-      <DrawerHeader>
-        <DrawerTitle>Help Documentation</DrawerTitle>
-      </DrawerHeader>
-      <DrawerBody>
-        <div>
-          {/* Documentation content */}
-        </div>
-      </DrawerBody>
-    </DrawerDocs>
-  );
-}
-```
-
-## Accessibility Features
-- **Keyboard Navigation**: Escape key closes drawer
-- **Focus Management**: Traps focus within drawer when open
-- **Screen Reader Support**: Proper ARIA attributes
-- **Body Lock**: Prevents background scrolling when open
-
-## Related Components
-- Modal - for blocking interactions requiring immediate attention
-- Popover - for smaller contextual content
-- Tabs - for organizing content within drawers
-- Button - for drawer triggers and actions
-
----