@app-studio/web 0.9.39 → 0.9.43

package/docs/components/Drawer.mdx

@@ -1,6 +1,6 @@
 # Drawer
 
-A drawer is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.
+A slide-out panel component that appears from the edge of the screen, with support for different placements, sizes, and content sections.
 
 ### **Import**
 ```tsx
@@ -10,155 +10,456 @@ import { Drawer } from '@app-studio/web';
 ### **Default**
 ```tsx
 import React, { useState } from 'react';
-import { Drawer } from '../Drawer';
-import { Button } from '../Button';
-import { Vertical } from 'app-studio';
+import { Drawer } from '@app-studio/web';
+import { Button, Text } from 'app-studio';
 
 export const DefaultDrawer = () => {
   const [isOpen, setIsOpen] = useState(false);
-
+  
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <Drawer.Header>Drawer Title</Drawer.Header>
-        <Drawer.Body>
-          <p>This is the content of the drawer.</p>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <Button onClick={() => setIsOpen(false)}>Close</Button>
-        </Drawer.Footer>
+      
+      <Drawer>
+        <Drawer.Overlay isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <Drawer.Container>
+            <Drawer.Header onClose={() => setIsOpen(false)}>
+              <Text>Drawer Title</Text>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Text>Drawer content goes here</Text>
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Button onClick={() => setIsOpen(false)}>Close</Button>
+            </Drawer.Footer>
+          </Drawer.Container>
+        </Drawer.Overlay>
       </Drawer>
     </>
   );
 };
 ```
 
-### **Placement**
-The `placement` prop determines which side of the screen the drawer will appear from. It can be `top`, `right`, `bottom`, or `left`.
+### **isOpen**
+Controls the visibility of the drawer.
+
+- **Type:** `boolean`
+- **Required:** `true`
 
 ```tsx
 import React, { useState } from 'react';
-import { Drawer } from '../Drawer';
-import { Button } from '../Button';
-import { Horizontal } from 'app-studio';
+import { Drawer } from '@app-studio/web';
+import { Button, Text } from 'app-studio';
 
-export const PlacementDrawer = () => {
-  const [placement, setPlacement] = useState('right');
+export const ControlledDrawer = () => {
   const [isOpen, setIsOpen] = useState(false);
+  
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open</Button>
+      <Drawer>
+        <Drawer.Overlay isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <Drawer.Container>
+            <Drawer.Body>
+              <Text>Controlled Drawer</Text>
+            </Drawer.Body>
+          </Drawer.Container>
+        </Drawer.Overlay>
+      </Drawer>
+    </>
+  );
+};
+```
 
-  const openDrawer = (p) => {
-    setPlacement(p);
-    setIsOpen(true);
-  };
+### **onClose**
+Callback function executed when the drawer closes.
+
+- **Type:** `() => void`
+- **Required:** `true`
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '@app-studio/web';
+import { Button, Text } from 'app-studio';
 
+export const CloseCallbackDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  
   return (
-    <Horizontal gap={10}>
-      <Button onClick={() => openDrawer('top')}>Top</Button>
-      <Button onClick={() => openDrawer('right')}>Right</Button>
-      <Button onClick={() => openDrawer('bottom')}>Bottom</Button>
-      <Button onClick={() => openDrawer('left')}>Left</Button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} placement={placement}>
-        <Drawer.Header>Drawer Title</Drawer.Header>
-        <Drawer.Body>
-          <p>This is the content of the drawer.</p>
-        </Drawer.Body>
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open</Button>
+      <Drawer>
+        <Drawer.Overlay 
+          isOpen={isOpen} 
+          onClose={() => {
+            console.log('Drawer closing');
+            setIsOpen(false);
+          }}
+        >
+          <Drawer.Container>
+            <Drawer.Body>
+              <Text>Click outside to close</Text>
+            </Drawer.Body>
+          </Drawer.Container>
+        </Drawer.Overlay>
       </Drawer>
-    </Horizontal>
+    </>
   );
 };
 ```
 
-### **Size**
-The `size` prop controls the width or height of the drawer, depending on the placement.
+### **placement**
+The placement of the drawer.
+
+- **Type:** `Placement`
+- **Default:** `'right'`
+- **Possible Values:** `'left' | 'right' | 'top' | 'bottom'`
 
 ```tsx
 import React, { useState } from 'react';
-import { Drawer } from '../Drawer';
-import { Button } from '../Button';
-import { Horizontal } from 'app-studio';
+import { Drawer } from '@app-studio/web';
+import { Button, Text, Horizontal } from 'app-studio';
 
-export const SizeDrawer = () => {
-  const [size, setSize] = useState('md');
-  const [isOpen, setIsOpen] = useState(false);
+export const PlacementDrawers = () => {
+  const [placement, setPlacement] = useState<string | null>(null);
+  
+  return (
+    <>
+      <Horizontal gap={10}>
+        {['left', 'right', 'top', 'bottom'].map((pos) => (
+          <Button key={pos} onClick={() => setPlacement(pos)}>
+            {pos}
+          </Button>
+        ))}
+      </Horizontal>
+      
+      <Drawer>
+        <Drawer.Overlay 
+          isOpen={!!placement} 
+          onClose={() => setPlacement(null)}
+        >
+          <Drawer.Container placement={placement as any}>
+            <Drawer.Header onClose={() => setPlacement(null)}>
+              <Text>Drawer from {placement}</Text>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Text>Content</Text>
+            </Drawer.Body>
+          </Drawer.Container>
+        </Drawer.Overlay>
+      </Drawer>
+    </>
+  );
+};
+```
+
+### **size**
+The size of the drawer.
 
-  const openDrawer = (s) => {
-    setSize(s);
-    setIsOpen(true);
-  };
+- **Type:** `Size`
+- **Default:** `'md'`
+- **Possible Values:** `'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`
 
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '@app-studio/web';
+import { Button, Text, Horizontal } from 'app-studio';
+
+export const SizedDrawers = () => {
+  const [size, setSize] = useState<string | null>(null);
+  
   return (
-    <Horizontal gap={10}>
-      <Button onClick={() => openDrawer('xs')}>xs</Button>
-      <Button onClick={() => openDrawer('sm')}>sm</Button>
-      <Button onClick={() => openDrawer('md')}>md</Button>
-      <Button onClick={() => openDrawer('lg')}>lg</Button>
-      <Button onClick={() => openDrawer('xl')}>xl</Button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} size={size}>
-        <Drawer.Header>Drawer Title</Drawer.Header>
-        <Drawer.Body>
-          <p>This is the content of the drawer.</p>
-        </Drawer.Body>
+    <>
+      <Horizontal gap={10}>
+        {['sm', 'md', 'lg', 'xl', 'full'].map((s) => (
+          <Button key={s} onClick={() => setSize(s)}>
+            {s}
+          </Button>
+        ))}
+      </Horizontal>
+      
+      <Drawer>
+        <Drawer.Overlay isOpen={!!size} onClose={() => setSize(null)}>
+          <Drawer.Container size={size as any}>
+            <Drawer.Header onClose={() => setSize(null)}>
+              <Text>Size: {size}</Text>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Text>Drawer content</Text>
+            </Drawer.Body>
+          </Drawer.Container>
+        </Drawer.Overlay>
       </Drawer>
-    </Horizontal>
+    </>
   );
 };
 ```
 
-### **Prevent Closing**
-The `isClosePrevented` prop prevents the drawer from closing when the overlay is clicked.
+### **isClosePrevented**
+Prevents the drawer from closing when clicking the overlay.
+
+- **Type:** `boolean`
+- **Default:** `false`
 
 ```tsx
 import React, { useState } from 'react';
-import { Drawer } from '../Drawer';
-import { Button } from '../Button';
+import { Drawer } from '@app-studio/web';
+import { Button, Text } from 'app-studio';
 
 export const PreventCloseDrawer = () => {
   const [isOpen, setIsOpen] = useState(false);
+  
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open</Button>
+      <Drawer>
+        <Drawer.Overlay 
+          isOpen={isOpen} 
+          onClose={() => setIsOpen(false)}
+          isClosePrevented
+        >
+          <Drawer.Container>
+            <Drawer.Header onClose={() => setIsOpen(false)}>
+              <Text>Must use close button</Text>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Text>Click outside won't close this drawer</Text>
+            </Drawer.Body>
+          </Drawer.Container>
+        </Drawer.Overlay>
+      </Drawer>
+    </>
+  );
+};
+```
+
+### **blur**
+The degree of blurriness applied to the overlay.
 
+- **Type:** `number`
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '@app-studio/web';
+import { Button, Text } from 'app-studio';
+
+export const BlurredDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  
   return (
     <>
-      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
-      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} isClosePrevented>
-        <Drawer.Header>Drawer Title</Drawer.Header>
-        <Drawer.Body>
-          <p>This drawer cannot be closed by clicking the overlay.</p>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <Button onClick={() => setIsOpen(false)}>Close</Button>
-        </Drawer.Footer>
+      <Button onClick={() => setIsOpen(true)}>Open Blurred Drawer</Button>
+      <Drawer>
+        <Drawer.Overlay 
+          isOpen={isOpen} 
+          onClose={() => setIsOpen(false)}
+          blur={10}
+        >
+          <Drawer.Container>
+            <Drawer.Body>
+              <Text>Background is blurred</Text>
+            </Drawer.Body>
+          </Drawer.Container>
+        </Drawer.Overlay>
       </Drawer>
     </>
   );
 };
 ```
 
-### **Props**
-
-#### **Drawer**
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `placement` | `top` \| `right` \| `bottom` \| `left` | `right` | The placement of the drawer. |
-| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | The size of the drawer. |
-| `isOpen` | `boolean` | - | If `true`, the drawer will be open. |
-| `onClose` | `() => void` | - | Callback fired when the drawer closes. |
-| `isClosePrevented` | `boolean` | `false` | If `true`, the drawer will not close when clicking the overlay. |
-| `children` | `React.ReactNode` | - | The children of the drawer. |
-
-#### **Drawer.Header**
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `onClose` | `() => void` | - | Callback fired when the close button is clicked. |
-| `buttonPosition` | `left` \| `right` | `right` | The position of the close button. |
-| `children` | `React.ReactNode` | - | The content of the drawer header. |
-
-#### **Drawer.Body**
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `children` | `React.ReactNode` | - | The content of the drawer body. |
-
-#### **Drawer.Footer**
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `children` | `React.ReactNode` | - | The content of the drawer footer. |
+### **buttonPosition**
+Position of the close button in the header.
+
+- **Type:** `CloseButtonPosition`
+- **Possible Values:** `'left' | 'right' | 'none'`
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '@app-studio/web';
+import { Button, Text } from 'app-studio';
+
+export const ButtonPositionDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open</Button>
+      <Drawer>
+        <Drawer.Overlay isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <Drawer.Container>
+            <Drawer.Header 
+              onClose={() => setIsOpen(false)}
+              buttonPosition="left"
+            >
+              <Text>Close button on left</Text>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Text>Drawer content</Text>
+            </Drawer.Body>
+          </Drawer.Container>
+        </Drawer.Overlay>
+      </Drawer>
+    </>
+  );
+};
+```
+
+### **Navigation Drawer**
+A common use case for navigation menus.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '@app-studio/web';
+import { Button, Text, Vertical } from 'app-studio';
+
+export const NavigationDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  const menuItems = [
+    'Dashboard',
+    'Profile',
+    'Settings',
+    'Analytics',
+    'Help',
+  ];
+  
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>☰ Menu</Button>
+      <Drawer>
+        <Drawer.Overlay isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <Drawer.Container placement="left" size="sm">
+            <Drawer.Header onClose={() => setIsOpen(false)}>
+              <Text fontSize={20} fontWeight="bold">Menu</Text>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Vertical gap={0}>
+                {menuItems.map((item) => (
+                  <Button
+                    key={item}
+                    variant="ghost"
+                    onClick={() => {
+                      console.log('Navigate to:', item);
+                      setIsOpen(false);
+                    }}
+                  >
+                    {item}
+                  </Button>
+                ))}
+              </Vertical>
+            </Drawer.Body>
+          </Drawer.Container>
+        </Drawer.Overlay>
+      </Drawer>
+    </>
+  );
+};
+```
+
+### **Form Drawer**
+Using drawer for forms and data entry.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '@app-studio/web';
+import { Button, Text, Vertical } from 'app-studio';
+import { TextField } from '@app-studio/web';
+
+export const FormDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Add User</Button>
+      <Drawer>
+        <Drawer.Overlay isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <Drawer.Container placement="right" size="md">
+            <Drawer.Header onClose={() => setIsOpen(false)}>
+              <Text fontSize={18} fontWeight="bold">Add New User</Text>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Vertical gap={15}>
+                <TextField label="Name" placeholder="Enter name" />
+                <TextField label="Email" placeholder="Enter email" />
+                <TextField label="Role" placeholder="Enter role" />
+              </Vertical>
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Horizontal gap={10} justifyContent="flex-end">
+                <Button 
+                  variant="outline" 
+                  onClick={() => setIsOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button 
+                  variant="filled"
+                  onClick={() => {
+                    console.log('Save user');
+                    setIsOpen(false);
+                  }}
+                >
+                  Save
+                </Button>
+              </Horizontal>
+            </Drawer.Footer>
+          </Drawer.Container>
+        </Drawer.Overlay>
+      </Drawer>
+    </>
+  );
+};
+```
+
+### **Details Drawer**
+Showing detailed information in a drawer.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer } from '@app-studio/web';
+import { Button, Text, Vertical, Horizontal } from 'app-studio';
+
+export const DetailsDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>View Details</Button>
+      <Drawer>
+        <Drawer.Overlay isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <Drawer.Container placement="right" size="lg">
+            <Drawer.Header onClose={() => setIsOpen(false)}>
+              <Text fontSize={20} fontWeight="bold">Product Details</Text>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Vertical gap={20}>
+                <div>
+                  <Text fontSize={14} color="#6b7280">Name</Text>
+                  <Text fontSize={16}>Premium Widget</Text>
+                </div>
+                <div>
+                  <Text fontSize={14} color="#6b7280">Price</Text>
+                  <Text fontSize={16}>$99.99</Text>
+                </div>
+                <div>
+                  <Text fontSize={14} color="#6b7280">Description</Text>
+                  <Text fontSize={16}>
+                    A high-quality widget with advanced features
+                    and premium materials.
+                  </Text>
+                </div>
+              </Vertical>
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Button onClick={() => setIsOpen(false)}>
+                Add to Cart
+              </Button>
+            </Drawer.Footer>
+          </Drawer.Container>
+        </Drawer.Overlay>
+      </Drawer>
+    </>
+  );
+};
+```