@urbint/cl 1.0.1

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,446 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ToastProvider, useToast } from './Toast';
+import { Button } from '../Button';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { Box } from '../Box';
+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 = {
+  title: 'Feedback/Toast',
+  decorators: [
+    (Story) => (
+      <ToastProvider>
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
+      </ToastProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const ToastDemo = () => {
+  const toast = useToast();
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Toast Notifications</Text>
+      <VStack space={spacing.md}>
+        <Button
+          onPress={() =>
+            toast.show({
+              title: 'Info',
+              description: 'This is an informational message',
+              status: 'info',
+            })
+          }
+        >
+          Show Info Toast
+        </Button>
+        <Button
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'Success!',
+              description: 'Your action was completed successfully',
+              status: 'success',
+            })
+          }
+        >
+          Show Success Toast
+        </Button>
+        <Button
+          variant="outline"
+          onPress={() =>
+            toast.show({
+              title: 'Warning',
+              description: 'Please review before proceeding',
+              status: 'warning',
+            })
+          }
+        >
+          Show Warning Toast
+        </Button>
+        <Button
+          variant="danger"
+          onPress={() =>
+            toast.show({
+              title: 'Error',
+              description: 'Something went wrong. Please try again.',
+              status: 'error',
+            })
+          }
+        >
+          Show Error Toast
+        </Button>
+      </VStack>
+    </VStack>
+  );
+};
+
+export const Default: Story = {
+  render: () => <ToastDemo />,
+};
+
+const StatusToasts = () => {
+  const toast = useToast();
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Toast Status Types</Text>
+      <HStack space={spacing.sm} wrap>
+        <Button
+          size="sm"
+          onPress={() =>
+            toast.show({
+              title: 'Information',
+              description: 'Here is some helpful information',
+              status: 'info',
+            })
+          }
+        >
+          Info
+        </Button>
+        <Button
+          size="sm"
+          onPress={() =>
+            toast.show({
+              title: 'Success',
+              description: 'Operation completed successfully',
+              status: 'success',
+            })
+          }
+        >
+          Success
+        </Button>
+        <Button
+          size="sm"
+          onPress={() =>
+            toast.show({
+              title: 'Warning',
+              description: 'This action may have consequences',
+              status: 'warning',
+            })
+          }
+        >
+          Warning
+        </Button>
+        <Button
+          size="sm"
+          onPress={() =>
+            toast.show({
+              title: 'Error',
+              description: 'An error occurred during the operation',
+              status: 'error',
+            })
+          }
+        >
+          Error
+        </Button>
+      </HStack>
+    </VStack>
+  );
+};
+
+export const Statuses: Story = {
+  render: () => <StatusToasts />,
+};
+
+const TitleOnlyToasts = () => {
+  const toast = useToast();
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Title Only Toasts</Text>
+      <VStack space={spacing.sm}>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'File uploaded successfully',
+              status: 'success',
+            })
+          }
+        >
+          Short Success
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'Connection lost',
+              status: 'error',
+            })
+          }
+        >
+          Short Error
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'New update available',
+              status: 'info',
+            })
+          }
+        >
+          Short Info
+        </Button>
+      </VStack>
+    </VStack>
+  );
+};
+
+export const TitleOnly: Story = {
+  render: () => <TitleOnlyToasts />,
+};
+
+const CustomDurationToasts = () => {
+  const toast = useToast();
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Custom Durations</Text>
+      <VStack space={spacing.sm}>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'Quick toast',
+              description: 'Disappears in 2 seconds',
+              status: 'info',
+              duration: 2000,
+            })
+          }
+        >
+          2 Second Toast
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'Standard toast',
+              description: 'Disappears in 5 seconds (default)',
+              status: 'info',
+              duration: 5000,
+            })
+          }
+        >
+          5 Second Toast (Default)
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'Long toast',
+              description: 'Disappears in 10 seconds',
+              status: 'info',
+              duration: 10000,
+            })
+          }
+        >
+          10 Second Toast
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'Persistent toast',
+              description: 'Will not auto-dismiss',
+              status: 'warning',
+              duration: 0,
+            })
+          }
+        >
+          Persistent Toast
+        </Button>
+      </VStack>
+    </VStack>
+  );
+};
+
+export const CustomDuration: Story = {
+  render: () => <CustomDurationToasts />,
+};
+
+const ClosableToasts = () => {
+  const toast = useToast();
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Closable vs Non-Closable</Text>
+      <VStack space={spacing.sm}>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'Closable toast',
+              description: 'Click the X to dismiss',
+              status: 'info',
+              isClosable: true,
+            })
+          }
+        >
+          Closable (Default)
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onPress={() =>
+            toast.show({
+              title: 'Non-closable toast',
+              description: 'Wait for it to auto-dismiss',
+              status: 'info',
+              isClosable: false,
+              duration: 3000,
+            })
+          }
+        >
+          Non-Closable
+        </Button>
+      </VStack>
+    </VStack>
+  );
+};
+
+export const Closable: Story = {
+  render: () => <ClosableToasts />,
+};
+
+const MultipleToasts = () => {
+  const toast = useToast();
+
+  const showMultiple = () => {
+    toast.show({
+      title: 'First notification',
+      status: 'info',
+    });
+    setTimeout(() => {
+      toast.show({
+        title: 'Second notification',
+        status: 'success',
+      });
+    }, 300);
+    setTimeout(() => {
+      toast.show({
+        title: 'Third notification',
+        status: 'warning',
+      });
+    }, 600);
+  };
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Multiple Toasts</Text>
+      <VStack space={spacing.sm}>
+        <Button onPress={showMultiple}>Show Multiple Toasts</Button>
+        <Button variant="secondary" onPress={() => toast.closeAll()}>
+          Close All Toasts
+        </Button>
+      </VStack>
+    </VStack>
+  );
+};
+
+export const Multiple: Story = {
+  render: () => <MultipleToasts />,
+};
+
+const RealWorldExamples = () => {
+  const toast = useToast();
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Real World Examples</Text>
+      <Box p={spacing.lg} bg={colors.background.secondary} rounded="lg">
+        <VStack space={spacing.md}>
+          <Button
+            onPress={() =>
+              toast.show({
+                title: 'Changes saved',
+                description: 'Your profile has been updated',
+                status: 'success',
+              })
+            }
+          >
+            Save Profile
+          </Button>
+          <Button
+            variant="danger"
+            onPress={() =>
+              toast.show({
+                title: 'Item deleted',
+                description: 'The item has been permanently removed',
+                status: 'success',
+              })
+            }
+          >
+            Delete Item
+          </Button>
+          <Button
+            variant="secondary"
+            onPress={() =>
+              toast.show({
+                title: 'Copied to clipboard',
+                status: 'info',
+                duration: 2000,
+              })
+            }
+          >
+            Copy Link
+          </Button>
+          <Button
+            variant="outline"
+            onPress={() =>
+              toast.show({
+                title: 'Network error',
+                description: 'Please check your connection and try again',
+                status: 'error',
+              })
+            }
+          >
+            Simulate Error
+          </Button>
+        </VStack>
+      </Box>
+    </VStack>
+  );
+};
+
+export const RealWorld: Story = {
+  render: () => <RealWorldExamples />,
+};
+
+/**
+ * Styles using design system tokens
+ */
+const styles = StyleSheet.create({
+  container: {
+    padding: spacing.lg,
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+  },
+});
+

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,221 @@
+/**
+ * Toast Component and Provider
+ * Non-blocking notifications
+ */
+
+import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
+import { View, Text, Pressable, Animated, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography, elevation, zIndex } from '../../styles/tokens';
+
+export interface ToastConfig {
+  id?: string;
+  title: string;
+  description?: string;
+  status?: 'info' | 'success' | 'warning' | 'error';
+  duration?: number;
+  isClosable?: boolean;
+  position?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+}
+
+interface ToastContextValue {
+  show: (config: ToastConfig) => string;
+  close: (id: string) => void;
+  closeAll: () => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+
+const statusIcons = {
+  info: 'M12 16v-4m0-4h.01M22 12a10 10 0 11-20 0 10 10 0 0120 0z',
+  success: 'M9 12l2 2 4-4m6 2a10 10 0 11-20 0 10 10 0 0120 0z',
+  warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+  error: 'M12 8v4m0 4h.01M22 12a10 10 0 11-20 0 10 10 0 0120 0z',
+};
+
+const statusColors = {
+  info: colors.feedback.info.content,
+  success: colors.feedback.success.content,
+  warning: colors.feedback.warning.content,
+  error: colors.feedback.error.content,
+};
+
+interface ToastItemProps {
+  config: ToastConfig & { id: string };
+  onClose: (id: string) => void;
+}
+
+const ToastItem = ({ config, onClose }: ToastItemProps) => {
+  const translateY = useRef(new Animated.Value(-100)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    Animated.parallel([
+      Animated.spring(translateY, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 50,
+        friction: 8,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    if (config.duration !== 0) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, config.duration || 5000);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  const handleClose = () => {
+    Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: -100,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      onClose(config.id);
+    });
+  };
+
+  const statusColor = statusColors[config.status || 'info'];
+
+  return (
+    <Animated.View
+      style={[
+        styles.toast,
+        { transform: [{ translateY }], opacity },
+        { borderLeftColor: statusColor },
+      ]}
+    >
+      <View style={styles.iconContainer}>
+        <Svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+          <Path
+            d={statusIcons[config.status || 'info']}
+            stroke={statusColor}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </Svg>
+      </View>
+      <View style={styles.content}>
+        <Text style={styles.title}>{config.title}</Text>
+        {config.description && (
+          <Text style={styles.description}>{config.description}</Text>
+        )}
+      </View>
+      {config.isClosable !== false && (
+        <Pressable onPress={handleClose} style={styles.closeButton}>
+          <Svg width={16} height={16} 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>
+      )}
+    </Animated.View>
+  );
+};
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = useState<(ToastConfig & { id: string })[]>([]);
+  const idCounter = useRef(0);
+
+  const show = useCallback((config: ToastConfig) => {
+    const id = config.id || `toast-${idCounter.current++}`;
+    setToasts((prev) => [...prev, { ...config, id }]);
+    return id;
+  }, []);
+
+  const close = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const closeAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ show, close, closeAll }}>
+      {children}
+      <View style={styles.container} pointerEvents="box-none">
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} config={toast} onClose={close} />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 60,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: zIndex.toast,
+    paddingHorizontal: spacing['4x'],
+  },
+  toast: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.md,
+    borderLeftWidth: 4,
+    padding: spacing['3x'],
+    marginBottom: spacing['2x'],
+    maxWidth: 400,
+    width: '100%',
+    ...elevation['30'],
+  },
+  iconContainer: {
+    marginRight: spacing['3x'],
+    marginTop: 2,
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: typography.fontSize.body,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+  },
+  description: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+    marginTop: spacing.base,
+  },
+  closeButton: {
+    marginLeft: spacing['2x'],
+    padding: spacing.base,
+  },
+});

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast, type ToastConfig, type ToastProviderProps } from './Toast';
+