@urbint/cl 1.0.1

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,342 @@
+/**
+ * Drawer Component
+ * Slide-in panel from screen edges
+ */
+
+import React, { forwardRef, useRef, useEffect } from 'react';
+import {
+  View,
+  ViewProps,
+  Modal,
+  Pressable,
+  Text,
+  Animated,
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+export interface DrawerProps extends ViewProps {
+  /** Is open */
+  isOpen: boolean;
+  /** On close handler */
+  onClose: () => void;
+  /** Drawer title */
+  title?: string;
+  /** Placement */
+  placement?: 'left' | 'right' | 'top' | 'bottom';
+  /** Drawer size */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Close on overlay click */
+  closeOnOverlayClick?: boolean;
+  /** Show close button */
+  showCloseButton?: boolean;
+}
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+const sizeConfig = {
+  sm: { width: 280, height: 280 },
+  md: { width: 320, height: 320 },
+  lg: { width: 400, height: 400 },
+  xl: { width: 480, height: 480 },
+  full: { width: SCREEN_WIDTH, height: SCREEN_HEIGHT },
+};
+
+export const Drawer = forwardRef<View, DrawerProps>(
+  (
+    {
+      style,
+      isOpen,
+      onClose,
+      title,
+      placement = 'left',
+      size = 'md',
+      closeOnOverlayClick = true,
+      showCloseButton = true,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const translateAnim = useRef(new Animated.Value(0)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+
+    const config = sizeConfig[size];
+    const isHorizontal = placement === 'left' || placement === 'right';
+    const drawerSize = isHorizontal ? config.width : config.height;
+
+    const getInitialTranslate = () => {
+      switch (placement) {
+        case 'left':
+          return -drawerSize;
+        case 'right':
+          return drawerSize;
+        case 'top':
+          return -drawerSize;
+        case 'bottom':
+          return drawerSize;
+      }
+    };
+
+    useEffect(() => {
+      if (isOpen) {
+        translateAnim.setValue(getInitialTranslate());
+        Animated.parallel([
+          Animated.spring(translateAnim, {
+            toValue: 0,
+            useNativeDriver: true,
+            tension: 65,
+            friction: 11,
+          }),
+          Animated.timing(opacityAnim, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      } else {
+        Animated.parallel([
+          Animated.timing(translateAnim, {
+            toValue: getInitialTranslate(),
+            duration: 200,
+            useNativeDriver: true,
+          }),
+          Animated.timing(opacityAnim, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      }
+    }, [isOpen, placement, drawerSize]);
+
+    const getDrawerStyle = () => {
+      const base: any = {
+        position: 'absolute',
+        backgroundColor: colors.background.default,
+        ...elevation['40'],
+      };
+
+      switch (placement) {
+        case 'left':
+          return {
+            ...base,
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: config.width,
+            transform: [{ translateX: translateAnim }],
+          };
+        case 'right':
+          return {
+            ...base,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            width: config.width,
+            transform: [{ translateX: translateAnim }],
+          };
+        case 'top':
+          return {
+            ...base,
+            left: 0,
+            right: 0,
+            top: 0,
+            height: config.height,
+            transform: [{ translateY: translateAnim }],
+          };
+        case 'bottom':
+          return {
+            ...base,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: config.height,
+            borderTopLeftRadius: borderRadius.xl,
+            borderTopRightRadius: borderRadius.xl,
+            transform: [{ translateY: translateAnim }],
+          };
+      }
+    };
+
+    return (
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="none"
+        onRequestClose={onClose}
+      >
+        <View style={styles.container}>
+          <Animated.View style={[styles.overlay, { opacity: opacityAnim }]}>
+            <Pressable
+              style={styles.overlayPressable}
+              onPress={closeOnOverlayClick ? onClose : undefined}
+            />
+          </Animated.View>
+          <Animated.View ref={ref} style={[getDrawerStyle(), style]} {...props}>
+            {/* Only show built-in header when title is provided */}
+            {title ? (
+              <View style={styles.drawerHeader}>
+                <Text style={styles.titleText}>{title}</Text>
+                {showCloseButton && (
+                  <Pressable onPress={onClose} style={styles.closeButton}>
+                    <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
+                      <Path
+                        d="M18 6L6 18M6 6l12 12"
+                        stroke={colors.text.secondary}
+                        strokeWidth={2}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </Svg>
+                  </Pressable>
+                )}
+              </View>
+            ) : (
+              /* When no title, show floating close button (user may use DrawerHeader) */
+              showCloseButton && (
+                <Pressable onPress={onClose} style={styles.floatingCloseButton}>
+                  <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
+                    <Path
+                      d="M18 6L6 18M6 6l12 12"
+                      stroke={colors.text.secondary}
+                      strokeWidth={2}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </Svg>
+                </Pressable>
+              )
+            )}
+            <ScrollView 
+              style={styles.content} 
+              contentContainerStyle={title ? styles.contentContainer : styles.contentContainerNoTitle}
+            >
+              {children}
+            </ScrollView>
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+
+Drawer.displayName = 'Drawer';
+
+export interface DrawerHeaderProps extends ViewProps {}
+export interface DrawerBodyProps extends ViewProps {}
+export interface DrawerFooterProps extends ViewProps {}
+
+export const DrawerHeader = forwardRef<View, DrawerHeaderProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.header, style]} {...props}>
+        {typeof children === 'string' ? (
+          <Text style={styles.headerText}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+
+DrawerHeader.displayName = 'DrawerHeader';
+
+export const DrawerBody = forwardRef<View, DrawerBodyProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.body, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+DrawerBody.displayName = 'DrawerBody';
+
+export const DrawerFooter = forwardRef<View, DrawerFooterProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.footer, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+DrawerFooter.displayName = 'DrawerFooter';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  overlayPressable: {
+    flex: 1,
+  },
+  drawerHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing['4x'],
+    paddingTop: spacing['4x'],
+    paddingBottom: spacing['3x'],
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  titleText: {
+    fontSize: typography.fontSize.h3,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+    flex: 1,
+  },
+  closeButton: {
+    padding: spacing.base,
+  },
+  floatingCloseButton: {
+    position: 'absolute',
+    top: spacing['3x'],
+    right: spacing['3x'],
+    zIndex: 10,
+    padding: spacing.base,
+  },
+  content: {
+    flex: 1,
+  },
+  contentContainer: {
+    paddingTop: spacing['2x'],
+  },
+  contentContainerNoTitle: {
+    paddingTop: spacing['12x'],
+  },
+  header: {
+    padding: spacing['4x'],
+    paddingBottom: spacing['2x'],
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+  },
+  headerText: {
+    fontSize: typography.fontSize.h3,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  body: {
+    padding: spacing['4x'],
+    flex: 1,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    padding: spacing['4x'],
+    gap: spacing['2x'],
+    borderTopWidth: 1,
+    borderTopColor: colors.border.disabled,
+  },
+});

package/src/components/Drawer/index.ts

@@ -0,0 +1,11 @@
+export {
+  Drawer,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  type DrawerProps,
+  type DrawerHeaderProps,
+  type DrawerBodyProps,
+  type DrawerFooterProps,
+} from './Drawer';
+

package/src/components/Fab/Fab.stories.tsx

@@ -0,0 +1,360 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fab } from './Fab';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+const meta: Meta<typeof Fab> = {
+  title: 'Action/Fab',
+  component: Fab,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    colorScheme: {
+      control: 'select',
+      options: ['primary', 'secondary', 'danger'],
+    },
+    placement: {
+      control: 'select',
+      options: ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left'],
+    },
+    isExtended: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+  },
+  args: {
+    size: 'md',
+    colorScheme: 'primary',
+    placement: 'bottom-right',
+    isExtended: false,
+    isLoading: false,
+    isDisabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Fab>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Box h={200} position="relative">
+      <Fab {...args} onPress={() => console.log('FAB pressed')} />
+    </Box>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">FAB Sizes</Text>
+      <HStack space={spacing.lg} alignItems="center">
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab size="sm" style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Small</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab size="md" style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Medium</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab size="lg" style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Large</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const ColorSchemes: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Color Schemes</Text>
+      <HStack space={spacing.lg} alignItems="center">
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab colorScheme="primary" style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Primary</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab colorScheme="secondary" style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Secondary</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab colorScheme="danger" style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Danger</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const CustomIcons: Story = {
+  render: () => {
+    const EditIcon = (
+      <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+          stroke="white"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+
+    const MessageIcon = (
+      <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+          stroke="white"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+
+    const DeleteIcon = (
+      <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          stroke="white"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+
+    return (
+      <VStack space={spacing.lg}>
+        <Text weight="semiBold">Custom Icons</Text>
+        <HStack space={spacing.lg} alignItems="center">
+          <VStack space={spacing.xs} alignItems="center">
+            <Fab icon={EditIcon} style={{ position: 'relative' }} />
+            <Text size="sm" color={colors.text.secondary}>Edit</Text>
+          </VStack>
+          <VStack space={spacing.xs} alignItems="center">
+            <Fab icon={MessageIcon} style={{ position: 'relative' }} />
+            <Text size="sm" color={colors.text.secondary}>Message</Text>
+          </VStack>
+          <VStack space={spacing.xs} alignItems="center">
+            <Fab icon={DeleteIcon} colorScheme="danger" style={{ position: 'relative' }} />
+            <Text size="sm" color={colors.text.secondary}>Delete</Text>
+          </VStack>
+        </HStack>
+      </VStack>
+    );
+  },
+};
+
+export const Extended: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Extended FAB</Text>
+      <VStack space={spacing.md}>
+        <Fab isExtended label="Create" style={{ position: 'relative' }} />
+        <Fab isExtended label="Add Item" colorScheme="secondary" style={{ position: 'relative' }} />
+        <Fab isExtended label="Delete" colorScheme="danger" style={{ position: 'relative' }} />
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const ExtendedWithCustomIcon: Story = {
+  render: () => {
+    const PlusIcon = (
+      <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M12 5v14M5 12h14"
+          stroke="white"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+
+    return (
+      <VStack space={spacing.lg}>
+        <Text weight="semiBold">Extended FAB with Custom Icon</Text>
+        <Fab
+          isExtended
+          label="New Project"
+          icon={PlusIcon}
+          style={{ position: 'relative' }}
+        />
+      </VStack>
+    );
+  },
+};
+
+export const States: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">FAB States</Text>
+      <HStack space={spacing.lg} alignItems="center">
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Normal</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab isLoading style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Loading</Text>
+        </VStack>
+        <VStack space={spacing.xs} alignItems="center">
+          <Fab isDisabled style={{ position: 'relative' }} />
+          <Text size="sm" color={colors.text.secondary}>Disabled</Text>
+        </VStack>
+      </HStack>
+    </VStack>
+  ),
+};
+
+export const Placement: Story = {
+  render: () => (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">FAB Placement (in container)</Text>
+      <Box h={300} bg={colors.background.secondary} rounded="lg" position="relative" overflow="hidden">
+        <Fab
+          placement="top-left"
+          size="sm"
+          colorScheme="secondary"
+        />
+        <Fab
+          placement="top-right"
+          size="sm"
+          colorScheme="secondary"
+        />
+        <Fab
+          placement="bottom-left"
+          size="sm"
+          colorScheme="secondary"
+        />
+        <Fab
+          placement="bottom-right"
+          size="sm"
+        />
+        <Fab
+          placement="bottom-center"
+          size="sm"
+          colorScheme="secondary"
+        />
+      </Box>
+    </VStack>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">FAB in Context</Text>
+      <Box h={400} bg="#f8fafc" rounded="lg" position="relative" overflow="hidden">
+        <Box p={16}>
+          <VStack space={12}>
+            <Text weight="semiBold" size="lg">My Tasks</Text>
+            {['Complete project proposal', 'Review pull requests', 'Update documentation', 'Team meeting at 3pm'].map((task, i) => (
+              <Box key={i} p={12} bg="#ffffff" rounded="md" shadow="5">
+                <HStack space={8} alignItems="center">
+                  <Box w={20} h={20} rounded="sm" borderWidth={2} borderColor="#cbd5e1" />
+                  <Text>{task}</Text>
+                </HStack>
+              </Box>
+            ))}
+          </VStack>
+        </Box>
+        <Fab
+          placement="bottom-right"
+          isExtended
+          label="Add Task"
+          onPress={() => console.log('Add task')}
+        />
+      </Box>
+    </VStack>
+  ),
+};
+
+export const ScrollingContent: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">FAB with Scrolling Content</Text>
+      <Box h={350} bg="#f8fafc" rounded="lg" position="relative" overflow="hidden">
+        <Box p={16} style={{ height: '100%', overflow: 'scroll' }}>
+          <VStack space={8}>
+            {Array.from({ length: 15 }, (_, i) => (
+              <Box key={i} p={16} bg="#ffffff" rounded="md">
+                <Text>Item {i + 1}</Text>
+              </Box>
+            ))}
+          </VStack>
+        </Box>
+        <Fab placement="bottom-right" />
+      </Box>
+    </VStack>
+  ),
+};
+
+export const ChatApplication: Story = {
+  render: () => {
+    const MessageIcon = (
+      <Svg width={24} height={24} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+          stroke="white"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+
+    return (
+      <VStack space={16}>
+        <Text weight="semiBold">Chat Application</Text>
+        <Box h={400} bg="#f8fafc" rounded="lg" position="relative" overflow="hidden">
+          <Box p={16}>
+            <VStack space={8}>
+              {[
+                { user: 'John', message: 'Hey, how are you?' },
+                { user: 'You', message: 'I\'m good, thanks!' },
+                { user: 'John', message: 'Great! Want to grab lunch?' },
+              ].map((msg, i) => (
+                <Box
+                  key={i}
+                  p={12}
+                  bg={msg.user === 'You' ? '#3b82f6' : '#ffffff'}
+                  rounded="lg"
+                  shadow="5"
+                  alignSelf={msg.user === 'You' ? 'flex-end' : 'flex-start'}
+                  maxW="80%"
+                >
+                  <Text
+                    size="sm"
+                    weight="medium"
+                    style={{ color: msg.user === 'You' ? 'white' : '#64748b' }}
+                  >
+                    {msg.user}
+                  </Text>
+                  <Text style={{ color: msg.user === 'You' ? 'white' : undefined }}>
+                    {msg.message}
+                  </Text>
+                </Box>
+              ))}
+            </VStack>
+          </Box>
+          <Fab
+            placement="bottom-right"
+            icon={MessageIcon}
+            onPress={() => console.log('New message')}
+          />
+        </Box>
+      </VStack>
+    );
+  },
+};
+