@urbint/cl 1.0.1

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from './Modal';
+import { Button } from '../Button';
+import { VStack } from '../VStack';
+import { Text } from '../Text';
+import { Input } from '../Input';
+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 Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  decorators: [
+    (Story) => (
+      <StoryContainer>
+        <Story />
+      </StoryContainer>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    
+    return (
+      <VStack>
+        <Button onPress={() => setIsOpen(true)}>Open Modal</Button>
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <ModalHeader>Modal Title</ModalHeader>
+          <ModalBody>
+            <Text>
+              This is the modal content. You can add any content here including
+              forms, images, or other components.
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant="ghost" onPress={() => setIsOpen(false)}>Cancel</Button>
+            <Button onPress={() => setIsOpen(false)}>Confirm</Button>
+          </ModalFooter>
+        </Modal>
+      </VStack>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [size, setSize] = React.useState<'sm' | 'md' | 'lg' | 'xl' | null>(null);
+    
+    return (
+      <VStack space={spacing.sm}>
+        <Text weight="semiBold">Modal Sizes</Text>
+        <VStack space={spacing.sm}>
+          <Button size="sm" onPress={() => setSize('sm')}>Small</Button>
+          <Button size="sm" onPress={() => setSize('md')}>Medium</Button>
+          <Button size="sm" onPress={() => setSize('lg')}>Large</Button>
+          <Button size="sm" onPress={() => setSize('xl')}>Extra Large</Button>
+        </VStack>
+        <Modal isOpen={size !== null} onClose={() => setSize(null)} size={size || 'md'}>
+          <ModalHeader>{size?.toUpperCase()} Modal</ModalHeader>
+          <ModalBody>
+            <Text>This is a {size} sized modal.</Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button onPress={() => setSize(null)}>Close</Button>
+          </ModalFooter>
+        </Modal>
+      </VStack>
+    );
+  },
+};
+
+export const FormModal: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    
+    return (
+      <VStack>
+        <Button onPress={() => setIsOpen(true)}>Create Account</Button>
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="md">
+          <ModalHeader>Create New Account</ModalHeader>
+          <ModalBody>
+            <VStack space={spacing.lg}>
+              <Input label="Full Name" placeholder="Enter your name" />
+              <Input label="Email" placeholder="Enter your email" />
+              <Input label="Password" placeholder="Enter password" isPassword />
+            </VStack>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant="ghost" onPress={() => setIsOpen(false)}>Cancel</Button>
+            <Button onPress={() => setIsOpen(false)}>Create Account</Button>
+          </ModalFooter>
+        </Modal>
+      </VStack>
+    );
+  },
+};
+
+export const ScrollableContent: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    
+    return (
+      <VStack>
+        <Button onPress={() => setIsOpen(true)}>Terms & Conditions</Button>
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          scrollBehavior="inside"
+        >
+          <ModalHeader>Terms and Conditions</ModalHeader>
+          <ModalBody>
+            <VStack space={spacing.md}>
+              {Array.from({ length: 10 }).map((_, i) => (
+                <Text key={i}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                  enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+                </Text>
+              ))}
+            </VStack>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant="ghost" onPress={() => setIsOpen(false)}>Decline</Button>
+            <Button onPress={() => setIsOpen(false)}>Accept</Button>
+          </ModalFooter>
+        </Modal>
+      </VStack>
+    );
+  },
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,280 @@
+/**
+ * Modal Component
+ * Overlay dialog for content
+ */
+
+import React, { forwardRef, useRef, useEffect } from 'react';
+import {
+  View,
+  ViewProps,
+  Modal as RNModal,
+  Pressable,
+  Text,
+  Animated,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+export interface ModalProps extends ViewProps {
+  /** Is open */
+  isOpen: boolean;
+  /** On close handler */
+  onClose: () => void;
+  /** Close on overlay click */
+  closeOnOverlayClick?: boolean;
+  /** Modal size */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Show close button */
+  showCloseButton?: boolean;
+  /** Scroll behavior */
+  scrollBehavior?: 'inside' | 'outside';
+  /** Is centered */
+  isCentered?: boolean;
+  /** Motion preset */
+  motionPreset?: 'slideInBottom' | 'scale' | 'none';
+}
+
+export const Modal = forwardRef<View, ModalProps>(
+  (
+    {
+      style,
+      isOpen,
+      onClose,
+      closeOnOverlayClick = true,
+      size = 'md',
+      showCloseButton = true,
+      scrollBehavior = 'outside',
+      isCentered = true,
+      motionPreset = 'scale',
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const scaleAnim = useRef(new Animated.Value(motionPreset === 'scale' ? 0.9 : 1)).current;
+    const translateYAnim = useRef(new Animated.Value(motionPreset === 'slideInBottom' ? 100 : 0)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      if (isOpen) {
+        Animated.parallel([
+          ...(motionPreset === 'scale'
+            ? [
+                Animated.spring(scaleAnim, {
+                  toValue: 1,
+                  useNativeDriver: true,
+                  tension: 50,
+                  friction: 7,
+                }),
+              ]
+            : []),
+          ...(motionPreset === 'slideInBottom'
+            ? [
+                Animated.spring(translateYAnim, {
+                  toValue: 0,
+                  useNativeDriver: true,
+                  tension: 50,
+                  friction: 7,
+                }),
+              ]
+            : []),
+          Animated.timing(opacityAnim, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      } else {
+        scaleAnim.setValue(motionPreset === 'scale' ? 0.9 : 1);
+        translateYAnim.setValue(motionPreset === 'slideInBottom' ? 100 : 0);
+        opacityAnim.setValue(0);
+      }
+    }, [isOpen, motionPreset]);
+
+    const sizeStyles = {
+      sm: { maxWidth: 320 },
+      md: { maxWidth: 448 },
+      lg: { maxWidth: 512 },
+      xl: { maxWidth: 640 },
+      full: { maxWidth: '100%', margin: 0, borderRadius: 0, height: '100%' },
+    };
+
+    const ModalContent = (
+      <Animated.View
+        ref={ref}
+        style={[
+          styles.modal,
+          sizeStyles[size],
+          {
+            transform: [
+              { scale: scaleAnim },
+              { translateY: translateYAnim },
+            ],
+            opacity: opacityAnim,
+          },
+          style,
+        ]}
+        {...props}
+      >
+        {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>
+        )}
+        {scrollBehavior === 'inside' ? (
+          <ScrollView contentContainerStyle={styles.scrollContent}>
+            {children}
+          </ScrollView>
+        ) : (
+          children
+        )}
+      </Animated.View>
+    );
+
+    return (
+      <RNModal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={onClose}
+      >
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.keyboardView}
+        >
+          {scrollBehavior === 'outside' ? (
+            <ScrollView
+              contentContainerStyle={[
+                styles.overlay,
+                isCentered && styles.centered,
+              ]}
+            >
+              <Pressable
+                style={StyleSheet.absoluteFillObject}
+                onPress={closeOnOverlayClick ? onClose : undefined}
+              />
+              {ModalContent}
+            </ScrollView>
+          ) : (
+            <Pressable
+              style={[styles.overlay, isCentered && styles.centered]}
+              onPress={closeOnOverlayClick ? onClose : undefined}
+            >
+              <Pressable>{ModalContent}</Pressable>
+            </Pressable>
+          )}
+        </KeyboardAvoidingView>
+      </RNModal>
+    );
+  }
+);
+
+Modal.displayName = 'Modal';
+
+export interface ModalHeaderProps extends ViewProps {}
+export interface ModalBodyProps extends ViewProps {}
+export interface ModalFooterProps extends ViewProps {}
+
+export const ModalHeader = forwardRef<View, ModalHeaderProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.header, style]} {...props}>
+        {typeof children === 'string' ? (
+          <Text style={styles.headerText}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+
+ModalHeader.displayName = 'ModalHeader';
+
+export const ModalBody = forwardRef<View, ModalBodyProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.body, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+ModalBody.displayName = 'ModalBody';
+
+export const ModalFooter = forwardRef<View, ModalFooterProps>(
+  ({ style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} style={[styles.footer, style]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+ModalFooter.displayName = 'ModalFooter';
+
+const styles = StyleSheet.create({
+  keyboardView: {
+    flex: 1,
+  },
+  overlay: {
+    flexGrow: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    padding: spacing['4x'],
+  },
+  centered: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modal: {
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+    width: '100%',
+    ...elevation['40'],
+  },
+  closeButton: {
+    position: 'absolute',
+    top: spacing['3x'],
+    right: spacing['3x'],
+    zIndex: 1,
+    padding: spacing.base,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  header: {
+    padding: spacing['4x'],
+    paddingBottom: spacing['2x'],
+    paddingRight: spacing['12x'],
+  },
+  headerText: {
+    fontSize: typography.fontSize.h3,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  body: {
+    padding: spacing['4x'],
+    paddingTop: spacing['2x'],
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    padding: spacing['4x'],
+    paddingTop: spacing['2x'],
+    gap: spacing['2x'],
+  },
+});

package/src/components/Modal/index.ts

@@ -0,0 +1,11 @@
+export {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  type ModalProps,
+  type ModalHeaderProps,
+  type ModalBodyProps,
+  type ModalFooterProps,
+} from './Modal';
+