@urbint/cl 1.0.1

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,330 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { AlertDialog } from './AlertDialog';
+import { Button } from '../Button';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { colors, spacing, borderRadius, elevation } from '../../styles/tokens';
+
+const meta: Meta<typeof AlertDialog> = {
+  title: 'Overlay/AlertDialog',
+  component: AlertDialog,
+  argTypes: {
+    isDestructive: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    closeOnOverlayClick: { control: 'boolean' },
+  },
+  args: {
+    title: 'Confirm Action',
+    description: 'Are you sure you want to proceed with this action?',
+    isDestructive: false,
+    isLoading: false,
+    closeOnOverlayClick: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AlertDialog>;
+
+const AlertDialogDemo = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Button onPress={() => setIsOpen(true)}>Open Alert Dialog</Button>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Confirm Action"
+        description="Are you sure you want to proceed with this action? This cannot be undone."
+        onConfirm={() => console.log('Confirmed')}
+        onCancel={() => console.log('Cancelled')}
+      />
+    </VStack>
+  );
+};
+
+export const Default: Story = {
+  render: () => <AlertDialogDemo />,
+};
+
+const DestructiveDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Destructive Action</Text>
+      <Button variant="danger" onPress={() => setIsOpen(true)}>
+        Delete Account
+      </Button>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Delete Account"
+        description="Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone."
+        confirmText="Delete"
+        cancelText="Cancel"
+        isDestructive
+        onConfirm={() => {
+          console.log('Account deleted');
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const Destructive: Story = {
+  render: () => <DestructiveDialog />,
+};
+
+const CustomButtonsDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Button Text</Text>
+      <Button onPress={() => setIsOpen(true)}>Publish Post</Button>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Publish Post"
+        description="Your post will be visible to all users. Are you ready to publish?"
+        confirmText="Publish Now"
+        cancelText="Save as Draft"
+        onConfirm={() => {
+          console.log('Published');
+          setIsOpen(false);
+        }}
+        onCancel={() => {
+          console.log('Saved as draft');
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const CustomButtons: Story = {
+  render: () => <CustomButtonsDialog />,
+};
+
+const LoadingDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleConfirm = () => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsOpen(false);
+    }, 2000);
+  };
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">With Loading State</Text>
+      <Button onPress={() => setIsOpen(true)}>Process Payment</Button>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Confirm Payment"
+        description="You are about to charge $99.99 to your card ending in 4242."
+        confirmText="Pay Now"
+        isLoading={isLoading}
+        onConfirm={handleConfirm}
+      />
+    </VStack>
+  );
+};
+
+export const Loading: Story = {
+  render: () => <LoadingDialog />,
+};
+
+const DeleteItemDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState('');
+
+  const items = ['Document.pdf', 'Image.png', 'Report.xlsx'];
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Delete Items</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="lg">
+        <VStack space={spacing.sm}>
+          {items.map((item) => (
+            <HStack key={item} justifyContent="space-between" alignItems="center">
+              <Text>{item}</Text>
+              <Button
+                size="sm"
+                variant="danger"
+                onPress={() => {
+                  setSelectedItem(item);
+                  setIsOpen(true);
+                }}
+              >
+                Delete
+              </Button>
+            </HStack>
+          ))}
+        </VStack>
+      </Box>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title={`Delete ${selectedItem}?`}
+        description={`Are you sure you want to delete "${selectedItem}"? This file will be moved to trash.`}
+        confirmText="Delete"
+        isDestructive
+        onConfirm={() => {
+          console.log(`Deleted ${selectedItem}`);
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const DeleteItem: Story = {
+  render: () => <DeleteItemDialog />,
+};
+
+const DiscardChangesDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Discard Changes</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="lg">
+        <VStack space={spacing.md}>
+          <Text size="sm" color={colors.text.secondary}>You have unsaved changes</Text>
+          <Button variant="ghost" onPress={() => setIsOpen(true)}>
+            Leave Page
+          </Button>
+        </VStack>
+      </Box>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Discard changes?"
+        description="You have unsaved changes. If you leave now, your changes will be lost."
+        confirmText="Discard"
+        cancelText="Keep Editing"
+        isDestructive
+        onConfirm={() => {
+          console.log('Changes discarded');
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const DiscardChanges: Story = {
+  render: () => <DiscardChangesDialog />,
+};
+
+const LogoutDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Logout Confirmation</Text>
+      <Button variant="outline" onPress={() => setIsOpen(true)}>
+        Sign Out
+      </Button>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Sign out"
+        description="Are you sure you want to sign out? You will need to enter your credentials again to access your account."
+        confirmText="Sign Out"
+        cancelText="Stay Signed In"
+        onConfirm={() => {
+          console.log('Signed out');
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const Logout: Story = {
+  render: () => <LogoutDialog />,
+};
+
+const SubscriptionDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Cancel Subscription</Text>
+      <Box p={spacing.lg} bg={colors.white} rounded="lg" shadow="10">
+        <VStack space={spacing.sm}>
+          <Text weight="semiBold">Pro Plan</Text>
+          <Text size="sm" color={colors.text.secondary}>$9.99/month</Text>
+          <Button
+            variant="ghost"
+            size="sm"
+            onPress={() => setIsOpen(true)}
+          >
+            Cancel Subscription
+          </Button>
+        </VStack>
+      </Box>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Cancel Subscription?"
+        description="If you cancel now, you'll lose access to premium features at the end of your current billing period. You can always resubscribe later."
+        confirmText="Cancel Subscription"
+        cancelText="Keep Subscription"
+        isDestructive
+        onConfirm={() => {
+          console.log('Subscription cancelled');
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const CancelSubscription: Story = {
+  render: () => <SubscriptionDialog />,
+};
+
+const MultipleOptionsDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Save Before Closing</Text>
+      <Button onPress={() => setIsOpen(true)}>Close Document</Button>
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Save changes?"
+        description="Do you want to save changes to your document before closing?"
+        confirmText="Save"
+        cancelText="Don't Save"
+        onConfirm={() => {
+          console.log('Document saved');
+          setIsOpen(false);
+        }}
+        onCancel={() => {
+          console.log('Document closed without saving');
+          setIsOpen(false);
+        }}
+      />
+    </VStack>
+  );
+};
+
+export const SaveChanges: Story = {
+  render: () => <MultipleOptionsDialog />,
+};
+

package/src/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,234 @@
+/**
+ * AlertDialog Component
+ * Confirmation dialog for critical actions
+ */
+
+import React, { forwardRef, useRef, useEffect } from 'react';
+import {
+  View,
+  ViewProps,
+  Modal,
+  Pressable,
+  Text,
+  Animated,
+  StyleSheet,
+} from 'react-native';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+export interface AlertDialogProps extends ViewProps {
+  /** Is open */
+  isOpen: boolean;
+  /** On close handler */
+  onClose: () => void;
+  /** Close on overlay click */
+  closeOnOverlayClick?: boolean;
+  /** Title */
+  title: string;
+  /** Description */
+  description?: string;
+  /** Cancel button text */
+  cancelText?: string;
+  /** Confirm button text */
+  confirmText?: string;
+  /** On confirm handler */
+  onConfirm?: () => void;
+  /** On cancel handler */
+  onCancel?: () => void;
+  /** Is destructive action */
+  isDestructive?: boolean;
+  /** Is loading */
+  isLoading?: boolean;
+}
+
+export const AlertDialog = forwardRef<View, AlertDialogProps>(
+  (
+    {
+      style,
+      isOpen,
+      onClose,
+      closeOnOverlayClick = true,
+      title,
+      description,
+      cancelText = 'Cancel',
+      confirmText = 'Confirm',
+      onConfirm,
+      onCancel,
+      isDestructive = false,
+      isLoading = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const scaleAnim = useRef(new Animated.Value(0.9)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      if (isOpen) {
+        Animated.parallel([
+          Animated.spring(scaleAnim, {
+            toValue: 1,
+            useNativeDriver: true,
+            tension: 50,
+            friction: 7,
+          }),
+          Animated.timing(opacityAnim, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      } else {
+        scaleAnim.setValue(0.9);
+        opacityAnim.setValue(0);
+      }
+    }, [isOpen]);
+
+    const handleCancel = () => {
+      onCancel?.();
+      onClose();
+    };
+
+    const handleConfirm = () => {
+      onConfirm?.();
+      if (!isLoading) {
+        onClose();
+      }
+    };
+
+    return (
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={onClose}
+      >
+        <Pressable
+          style={styles.overlay}
+          onPress={closeOnOverlayClick ? onClose : undefined}
+        >
+          <Animated.View
+            ref={ref}
+            style={[
+              styles.dialog,
+              {
+                transform: [{ scale: scaleAnim }],
+                opacity: opacityAnim,
+              },
+              style,
+            ]}
+            {...props}
+          >
+            <Pressable>
+              <View style={styles.header}>
+                <Text style={styles.title}>{title}</Text>
+              </View>
+              {description && (
+                <View style={styles.body}>
+                  <Text style={styles.description}>{description}</Text>
+                </View>
+              )}
+              {children}
+              <View style={styles.footer}>
+                <Pressable
+                  onPress={handleCancel}
+                  style={[styles.button, styles.cancelButton]}
+                  disabled={isLoading}
+                >
+                  <Text style={styles.cancelButtonText}>{cancelText}</Text>
+                </Pressable>
+                <Pressable
+                  onPress={handleConfirm}
+                  style={[
+                    styles.button,
+                    styles.confirmButton,
+                    isDestructive && styles.destructiveButton,
+                  ]}
+                  disabled={isLoading}
+                >
+                  <Text style={[styles.confirmButtonText, isDestructive && styles.destructiveButtonText]}>
+                    {isLoading ? 'Loading...' : confirmText}
+                  </Text>
+                </Pressable>
+              </View>
+            </Pressable>
+          </Animated.View>
+        </Pressable>
+      </Modal>
+    );
+  }
+);
+
+AlertDialog.displayName = 'AlertDialog';
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: spacing['4x'],
+  },
+  dialog: {
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+    width: '100%',
+    maxWidth: 400,
+    ...elevation['40'],
+  },
+  header: {
+    padding: spacing['4x'],
+    paddingBottom: spacing['2x'],
+  },
+  title: {
+    fontSize: typography.fontSize.h4,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  body: {
+    paddingHorizontal: spacing['4x'],
+    paddingBottom: spacing['4x'],
+  },
+  description: {
+    fontSize: typography.fontSize.body,
+    color: colors.text.secondary,
+    lineHeight: typography.fontSize.body * typography.lineHeight.normal,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    padding: spacing['3x'],
+    gap: spacing['2x'],
+    borderTopWidth: 1,
+    borderTopColor: colors.border.disabled,
+  },
+  button: {
+    paddingVertical: spacing['2x'],
+    paddingHorizontal: spacing['4x'],
+    borderRadius: borderRadius.md,
+    minWidth: 80,
+    alignItems: 'center',
+  },
+  cancelButton: {
+    backgroundColor: colors.secondary.default,
+  },
+  cancelButtonText: {
+    fontSize: typography.fontSize.body,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.text.default,
+  },
+  confirmButton: {
+    backgroundColor: colors.brand.blue,
+  },
+  confirmButtonText: {
+    fontSize: typography.fontSize.body,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.white,
+  },
+  destructiveButton: {
+    backgroundColor: colors.danger.default,
+  },
+  destructiveButtonText: {
+    color: colors.white,
+  },
+});

package/src/components/AlertDialog/index.ts

@@ -0,0 +1,2 @@
+export { AlertDialog, type AlertDialogProps } from './AlertDialog';
+