@urbint/cl 1.0.1

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,414 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Drawer, DrawerHeader, DrawerBody, DrawerFooter } from './Drawer';
+import { Button } from '../Button';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { Input } from '../Input';
+import { Divider } from '../Divider';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+/**
+ * Story container with design system tokens
+ */
+const StoryContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <View style={styles.container}>{children}</View>
+);
+
+const meta: Meta<typeof Drawer> = {
+  title: 'Overlay/Drawer',
+  component: Drawer,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: ['left', 'right', 'top', 'bottom'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl', 'full'],
+    },
+    closeOnOverlayClick: { control: 'boolean' },
+    showCloseButton: { control: 'boolean' },
+  },
+  args: {
+    placement: 'left',
+    size: 'md',
+    closeOnOverlayClick: true,
+    showCloseButton: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Drawer>;
+
+const DrawerDemo = ({ placement = 'left', size = 'md' }: any) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Button onPress={() => setIsOpen(true)}>Open Drawer</Button>
+      <Drawer
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        placement={placement}
+        size={size}
+      >
+        <DrawerHeader>Drawer Title</DrawerHeader>
+        <DrawerBody>
+          <Text>
+            This is the drawer content. You can put any content here including
+            forms, navigation menus, or detailed information.
+          </Text>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button variant="ghost" onPress={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+          <Button onPress={() => setIsOpen(false)}>Save</Button>
+        </DrawerFooter>
+      </Drawer>
+    </VStack>
+  );
+};
+
+export const Default: Story = {
+  render: () => <DrawerDemo />,
+};
+
+const PlacementDemo = () => {
+  const [placement, setPlacement] = useState<'left' | 'right' | 'top' | 'bottom'>('left');
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Drawer Placement</Text>
+      <HStack space={spacing.sm} wrap>
+        {(['left', 'right', 'top', 'bottom'] as const).map((p) => (
+          <Button
+            key={p}
+            variant={placement === p ? 'primary' : 'secondary'}
+            size="sm"
+            onPress={() => {
+              setPlacement(p);
+              setIsOpen(true);
+            }}
+          >
+            {p.charAt(0).toUpperCase() + p.slice(1)}
+          </Button>
+        ))}
+      </HStack>
+      <Drawer
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        placement={placement}
+      >
+        <DrawerHeader>{placement.charAt(0).toUpperCase() + placement.slice(1)} Drawer</DrawerHeader>
+        <DrawerBody>
+          <Text>
+            This drawer slides in from the {placement}.
+          </Text>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button onPress={() => setIsOpen(false)}>Close</Button>
+        </DrawerFooter>
+      </Drawer>
+    </VStack>
+  );
+};
+
+export const Placement: Story = {
+  render: () => <PlacementDemo />,
+};
+
+const SizeDemo = () => {
+  const [size, setSize] = useState<'sm' | 'md' | 'lg' | 'xl' | 'full'>('md');
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Drawer Sizes</Text>
+      <HStack space={spacing.sm} wrap>
+        {(['sm', 'md', 'lg', 'xl', 'full'] as const).map((s) => (
+          <Button
+            key={s}
+            variant={size === s ? 'primary' : 'secondary'}
+            size="sm"
+            onPress={() => {
+              setSize(s);
+              setIsOpen(true);
+            }}
+          >
+            {s.toUpperCase()}
+          </Button>
+        ))}
+      </HStack>
+      <Drawer
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        size={size}
+      >
+        <DrawerHeader>Size: {size.toUpperCase()}</DrawerHeader>
+        <DrawerBody>
+          <Text>
+            This drawer has size "{size}".
+          </Text>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button onPress={() => setIsOpen(false)}>Close</Button>
+        </DrawerFooter>
+      </Drawer>
+    </VStack>
+  );
+};
+
+export const Sizes: Story = {
+  render: () => <SizeDemo />,
+};
+
+const NavigationDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const menuItems = [
+    { icon: '🏠', label: 'Home' },
+    { icon: '📊', label: 'Dashboard' },
+    { icon: '📁', label: 'Projects' },
+    { icon: '👥', label: 'Team' },
+    { icon: '📅', label: 'Calendar' },
+    { icon: '⚙️', label: 'Settings' },
+  ];
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Navigation Drawer</Text>
+      <Button onPress={() => setIsOpen(true)}>Open Navigation</Button>
+      <Drawer
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        placement="left"
+        size="sm"
+      >
+        <DrawerBody>
+          <VStack space={spacing.xs}>
+            <Box py={spacing.lg}>
+              <Text weight="bold">My App</Text>
+            </Box>
+            <Divider />
+            <VStack space={spacing.xs} style={{ marginTop: spacing.lg }}>
+              {menuItems.map((item) => (
+                <Box
+                  key={item.label}
+                  p={spacing.md}
+                  rounded="md"
+                  bg={colors.background.secondary}
+                >
+                  <HStack space={spacing.md}>
+                    <Text>{item.icon}</Text>
+                    <Text>{item.label}</Text>
+                  </HStack>
+                </Box>
+              ))}
+            </VStack>
+          </VStack>
+        </DrawerBody>
+      </Drawer>
+    </VStack>
+  );
+};
+
+export const Navigation: Story = {
+  render: () => <NavigationDrawer />,
+};
+
+const FormDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Form in Drawer</Text>
+      <Button onPress={() => setIsOpen(true)}>Add New User</Button>
+      <Drawer
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        placement="right"
+        size="md"
+      >
+        <DrawerHeader>Add New User</DrawerHeader>
+        <DrawerBody>
+          <VStack space={spacing.lg}>
+            <Input label="First Name" placeholder="Enter first name" />
+            <Input label="Last Name" placeholder="Enter last name" />
+            <Input label="Email" placeholder="user@example.com" keyboardType="email-address" />
+            <Input label="Phone" placeholder="+1 (555) 000-0000" keyboardType="phone-pad" />
+          </VStack>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button variant="ghost" onPress={() => setIsOpen(false)}>
+            Cancel
+          </Button>
+          <Button onPress={() => setIsOpen(false)}>
+            Add User
+          </Button>
+        </DrawerFooter>
+      </Drawer>
+    </VStack>
+  );
+};
+
+export const WithForm: Story = {
+  render: () => <FormDrawer />,
+};
+
+const FilterDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Filter Drawer (Bottom)</Text>
+      <Button onPress={() => setIsOpen(true)}>Show Filters</Button>
+      <Drawer
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        placement="bottom"
+        size="md"
+      >
+        <DrawerHeader>Filters</DrawerHeader>
+        <DrawerBody>
+          <VStack space={spacing.lg}>
+            <Text weight="medium">Category</Text>
+            <HStack space={spacing.sm} wrap>
+              {['All', 'Electronics', 'Clothing', 'Home', 'Sports'].map((cat) => (
+                <Box key={cat} p={spacing.sm} bg={colors.feedback.info.background} rounded="full">
+                  <Text variant="small">{cat}</Text>
+                </Box>
+              ))}
+            </HStack>
+            <Divider />
+            <Text weight="medium">Price Range</Text>
+            <HStack space={spacing.sm}>
+              <Input placeholder="Min" style={{ flex: 1 }} />
+              <Text>-</Text>
+              <Input placeholder="Max" style={{ flex: 1 }} />
+            </HStack>
+            <Divider />
+            <Text weight="medium">Rating</Text>
+            <HStack space={spacing.sm}>
+              {['⭐', '⭐⭐', '⭐⭐⭐', '⭐⭐⭐⭐', '⭐⭐⭐⭐⭐'].map((rating, i) => (
+                <Box key={i} p={spacing.xs} bg={colors.feedback.warning.background} rounded="md">
+                  <Text variant="small">{rating}</Text>
+                </Box>
+              ))}
+            </HStack>
+          </VStack>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button variant="ghost" onPress={() => setIsOpen(false)}>
+            Clear All
+          </Button>
+          <Button onPress={() => setIsOpen(false)}>
+            Apply Filters
+          </Button>
+        </DrawerFooter>
+      </Drawer>
+    </VStack>
+  );
+};
+
+export const Filters: Story = {
+  render: () => <FilterDrawer />,
+};
+
+const DetailDrawer = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Detail Panel</Text>
+      <Button onPress={() => setIsOpen(true)}>View Details</Button>
+      <Drawer
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        placement="right"
+        size="lg"
+      >
+        <DrawerHeader>Order Details</DrawerHeader>
+        <DrawerBody>
+          <VStack space={spacing.lg}>
+            <Box p={spacing.lg} bg={colors.background.secondary} rounded="lg">
+              <VStack space={spacing.sm}>
+                <HStack justifyContent="space-between">
+                  <Text color={colors.text.secondary}>Order ID</Text>
+                  <Text weight="medium">#ORD-12345</Text>
+                </HStack>
+                <HStack justifyContent="space-between">
+                  <Text color={colors.text.secondary}>Date</Text>
+                  <Text weight="medium">Jan 15, 2024</Text>
+                </HStack>
+                <HStack justifyContent="space-between">
+                  <Text color={colors.text.secondary}>Status</Text>
+                  <Box px={spacing.sm} py={spacing.xs} bg={colors.feedback.success.background} rounded="full">
+                    <Text variant="small" color={colors.feedback.success.content}>Completed</Text>
+                  </Box>
+                </HStack>
+              </VStack>
+            </Box>
+            <Divider />
+            <Text weight="semiBold">Items</Text>
+            {[
+              { name: 'Product A', qty: 2, price: '$25.00' },
+              { name: 'Product B', qty: 1, price: '$45.00' },
+              { name: 'Product C', qty: 3, price: '$15.00' },
+            ].map((item, i) => (
+              <HStack key={i} justifyContent="space-between" alignItems="center">
+                <VStack space={2}>
+                  <Text>{item.name}</Text>
+                  <Text variant="small" color={colors.text.secondary}>Qty: {item.qty}</Text>
+                </VStack>
+                <Text weight="medium">{item.price}</Text>
+              </HStack>
+            ))}
+            <Divider />
+            <HStack justifyContent="space-between">
+              <Text weight="semiBold">Total</Text>
+              <Text weight="bold">$140.00</Text>
+            </HStack>
+          </VStack>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button variant="ghost" onPress={() => setIsOpen(false)}>
+            Close
+          </Button>
+          <Button onPress={() => setIsOpen(false)}>
+            Print Receipt
+          </Button>
+        </DrawerFooter>
+      </Drawer>
+    </VStack>
+  );
+};
+
+export const DetailPanel: Story = {
+  render: () => <DetailDrawer />,
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+