@urbint/cl 1.0.1

package/src/components/Portal/Portal.stories.tsx

@@ -0,0 +1,376 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Portal, PortalProvider, PortalHost } from './Portal';
+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';
+
+const meta: Meta<typeof Portal> = {
+  title: 'Utility/Portal',
+  component: Portal,
+  decorators: [
+    (Story) => (
+      <PortalProvider>
+        <Story />
+      </PortalProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Portal>;
+
+const BasicPortalDemo = () => {
+  const [showPortal, setShowPortal] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Basic Portal</Text>
+      <Text size="sm" color={colors.text.secondary}>
+        Portals render content outside the normal component hierarchy.
+      </Text>
+      <Button onPress={() => setShowPortal(!showPortal)}>
+        {showPortal ? 'Hide Portal' : 'Show Portal'}
+      </Button>
+      {showPortal && (
+        <Portal>
+          <Box
+            position="absolute"
+            style={{ top: 100, right: 20 }}
+            p={spacing.lg}
+            bg={colors.brand.blue}
+            rounded="lg"
+            shadow="20"
+          >
+            <Text style={{ color: 'white' }}>I'm rendered in a Portal!</Text>
+          </Box>
+        </Portal>
+      )}
+    </VStack>
+  );
+};
+
+export const Default: Story = {
+  render: () => <BasicPortalDemo />,
+};
+
+const OverlayDemo = () => {
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Portal Overlay</Text>
+      <Text size="sm" color={colors.text.secondary}>
+        Portals are commonly used for overlays, modals, and dropdowns.
+      </Text>
+      <Button onPress={() => setShowOverlay(true)}>Show Overlay</Button>
+      {showOverlay && (
+        <Portal>
+          <Box
+            position="absolute"
+            style={{ top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)' }}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Box p={24} bg={colors.white} rounded="lg" shadow="40" m={spacing.lg}>
+              <VStack space={spacing.lg}>
+                <Text weight="semiBold" size="lg">Overlay Content</Text>
+                <Text color={colors.text.secondary}>
+                  This content is rendered through a Portal,
+                  appearing above all other content.
+                </Text>
+                <Button onPress={() => setShowOverlay(false)}>Close</Button>
+              </VStack>
+            </Box>
+          </Box>
+        </Portal>
+      )}
+    </VStack>
+  );
+};
+
+export const Overlay: Story = {
+  render: () => <OverlayDemo />,
+};
+
+const MultiplePortalsDemo = () => {
+  const [portals, setPortals] = useState<number[]>([]);
+
+  const addPortal = () => {
+    setPortals([...portals, Date.now()]);
+  };
+
+  const removePortal = (id: number) => {
+    setPortals(portals.filter((p) => p !== id));
+  };
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Multiple Portals</Text>
+      <Text size="sm" color={colors.text.secondary}>
+        You can have multiple portals rendered simultaneously.
+      </Text>
+      <HStack space={8}>
+        <Button onPress={addPortal}>Add Portal</Button>
+        <Button variant="secondary" onPress={() => setPortals([])}>
+          Clear All
+        </Button>
+      </HStack>
+      <Text size="sm">Active portals: {portals.length}</Text>
+      {portals.map((id, index) => (
+        <Portal key={id}>
+          <Box
+            position="absolute"
+            style={{
+              top: 100 + index * 60,
+              right: 20 + index * 20,
+            }}
+            p={spacing.md}
+            bg={[colors.brand.blue, colors.feedback.success.content, colors.feedback.warning.content, colors.feedback.error.content, colors.badge.purple][index % 5]}
+            rounded="lg"
+            shadow="20"
+          >
+            <HStack space={spacing.sm} alignItems="center">
+              <Text style={{ color: 'white' }}>Portal {index + 1}</Text>
+              <Button
+                size="sm"
+                variant="ghost"
+                onPress={() => removePortal(id)}
+              >
+                <Text style={{ color: 'white' }}>×</Text>
+              </Button>
+            </HStack>
+          </Box>
+        </Portal>
+      ))}
+    </VStack>
+  );
+};
+
+export const Multiple: Story = {
+  render: () => <MultiplePortalsDemo />,
+};
+
+const ToastNotificationDemo = () => {
+  const [toasts, setToasts] = useState<{ id: number; message: string; type: 'success' | 'error' | 'info' }[]>([]);
+
+  const addToast = (type: 'success' | 'error' | 'info') => {
+    const messages = {
+      success: 'Operation completed successfully!',
+      error: 'Something went wrong.',
+      info: 'Here is some information.',
+    };
+    const newToast = { id: Date.now(), message: messages[type], type };
+    setToasts([...toasts, newToast]);
+    setTimeout(() => {
+      setToasts((current) => current.filter((t) => t.id !== newToast.id));
+    }, 3000);
+  };
+
+  const toastColors = {
+    success: colors.feedback.success.content,
+    error: colors.feedback.error.content,
+    info: colors.brand.blue,
+  };
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Toast Notifications with Portal</Text>
+      <Text size="sm" color={colors.text.secondary}>
+        Portals are perfect for toast notifications that need to appear above everything.
+      </Text>
+      <HStack space={spacing.sm}>
+        <Button onPress={() => addToast('success')}>Success</Button>
+        <Button variant="danger" onPress={() => addToast('error')}>Error</Button>
+        <Button variant="secondary" onPress={() => addToast('info')}>Info</Button>
+      </HStack>
+      {toasts.map((toast, index) => (
+        <Portal key={toast.id}>
+          <Box
+            position="absolute"
+            style={{
+              top: 20 + index * 60,
+              left: 20,
+              right: 20,
+            }}
+            p={spacing.lg}
+            bg={toastColors[toast.type]}
+            rounded="lg"
+            shadow="30"
+          >
+            <Text style={{ color: 'white' }}>{toast.message}</Text>
+          </Box>
+        </Portal>
+      ))}
+    </VStack>
+  );
+};
+
+export const Toasts: Story = {
+  render: () => <ToastNotificationDemo />,
+};
+
+const DropdownDemo = () => {
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Dropdown with Portal</Text>
+      <Text size="sm" color={colors.text.secondary}>
+        Dropdowns use portals to escape overflow hidden containers.
+      </Text>
+      <Box
+        p={spacing.lg}
+        bg={colors.background.secondary}
+        rounded="lg"
+        overflow="hidden"
+        style={{ maxHeight: 100 }}
+      >
+        <Text size="sm" color={colors.text.secondary} style={{ marginBottom: spacing.sm }}>
+          Container with overflow: hidden
+        </Text>
+        <Box position="relative">
+          <Button
+            variant="outline"
+            onPress={() => setShowDropdown(!showDropdown)}
+          >
+            Open Dropdown ▼
+          </Button>
+          {showDropdown && (
+            <Portal>
+              <Box
+                position="absolute"
+                style={{ top: 180, left: 36 }}
+                bg={colors.white}
+                rounded="lg"
+                shadow="20"
+                w={200}
+              >
+                {['Option 1', 'Option 2', 'Option 3', 'Option 4'].map((opt, i) => (
+                  <Box
+                    key={opt}
+                    p={spacing.md}
+                    borderBottomWidth={i < 3 ? 1 : 0}
+                    borderColor={colors.border.default}
+                  >
+                    <Text>{opt}</Text>
+                  </Box>
+                ))}
+              </Box>
+            </Portal>
+          )}
+        </Box>
+      </Box>
+      {showDropdown && (
+        <Button variant="ghost" onPress={() => setShowDropdown(false)}>
+          Close Dropdown
+        </Button>
+      )}
+    </VStack>
+  );
+};
+
+export const Dropdown: Story = {
+  render: () => <DropdownDemo />,
+};
+
+const LoadingOverlayDemo = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const simulateLoading = () => {
+    setIsLoading(true);
+    setTimeout(() => setIsLoading(false), 2000);
+  };
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Loading Overlay</Text>
+      <Text size="sm" color={colors.text.secondary}>
+        Use portals for full-screen loading states.
+      </Text>
+      <Button onPress={simulateLoading}>Start Loading (2s)</Button>
+      {isLoading && (
+        <Portal>
+          <Box
+            position="absolute"
+            style={{ top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(255,255,255,0.9)' }}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <VStack space={spacing.lg} alignItems="center">
+              <Box
+                w={48}
+                h={48}
+                rounded="full"
+                bg={colors.brand.blue}
+                alignItems="center"
+                justifyContent="center"
+              >
+                <Text style={{ color: 'white', fontSize: 20 }}>⏳</Text>
+              </Box>
+              <Text weight="semiBold">Loading...</Text>
+              <Text size="sm" color={colors.text.secondary}>Please wait</Text>
+            </VStack>
+          </Box>
+        </Portal>
+      )}
+    </VStack>
+  );
+};
+
+export const Loading: Story = {
+  render: () => <LoadingOverlayDemo />,
+};
+
+const ConfirmationDialogDemo = () => {
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  return (
+    <VStack space={spacing.lg}>
+      <Text weight="semiBold">Confirmation Dialog</Text>
+      <Text size="sm" color={colors.text.secondary}>
+        Portals ensure dialogs appear above all content.
+      </Text>
+      <Button variant="danger" onPress={() => setShowConfirm(true)}>
+        Delete Item
+      </Button>
+      {showConfirm && (
+        <Portal>
+          <Box
+            position="absolute"
+            style={{ top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.5)' }}
+            alignItems="center"
+            justifyContent="center"
+            p={16}
+          >
+            <Box p={24} bg={colors.white} rounded="lg" shadow="40" w="100%" maxW={400}>
+              <VStack space={spacing.lg}>
+                <Text weight="semiBold" size="lg">Confirm Delete</Text>
+                <Text color={colors.text.secondary}>
+                  Are you sure you want to delete this item? This action cannot be undone.
+                </Text>
+                <HStack space={spacing.md} justifyContent="flex-end">
+                  <Button variant="ghost" onPress={() => setShowConfirm(false)}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onPress={() => setShowConfirm(false)}>
+                    Delete
+                  </Button>
+                </HStack>
+              </VStack>
+            </Box>
+          </Box>
+        </Portal>
+      )}
+    </VStack>
+  );
+};
+
+export const ConfirmDialog: Story = {
+  render: () => <ConfirmationDialogDemo />,
+};
+

package/src/components/Portal/Portal.tsx

@@ -0,0 +1,100 @@
+/**
+ * Portal Component
+ * Renders children into a different part of the DOM tree
+ */
+
+import React, { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
+import { View, ViewProps, StyleSheet } from 'react-native';
+import { zIndex } from '../../styles/tokens';
+
+interface PortalContextValue {
+  register: (name: string, element: React.ReactNode) => void;
+  unregister: (name: string) => void;
+}
+
+const PortalContext = createContext<PortalContextValue | null>(null);
+
+export interface PortalProviderProps {
+  children: React.ReactNode;
+}
+
+export const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {
+  const [portals, setPortals] = useState<Map<string, React.ReactNode>>(new Map());
+
+  const register = useCallback((name: string, element: React.ReactNode) => {
+    setPortals((prev) => new Map(prev).set(name, element));
+  }, []);
+
+  const unregister = useCallback((name: string) => {
+    setPortals((prev) => {
+      const next = new Map(prev);
+      next.delete(name);
+      return next;
+    });
+  }, []);
+
+  return (
+    <PortalContext.Provider value={{ register, unregister }}>
+      {children}
+      <View style={styles.portalContainer} pointerEvents="box-none">
+        {Array.from(portals.values())}
+      </View>
+    </PortalContext.Provider>
+  );
+};
+
+export interface PortalProps {
+  /** Portal name for management */
+  name?: string;
+  children: React.ReactNode;
+}
+
+export const Portal: React.FC<PortalProps> = ({ name, children }) => {
+  const context = useContext(PortalContext);
+  const portalName = useRef(name || `portal-${Date.now()}-${Math.random()}`);
+
+  useEffect(() => {
+    if (!context) {
+      console.warn('Portal requires a PortalProvider to be present in the component tree');
+      return;
+    }
+
+    context.register(portalName.current, children);
+
+    return () => {
+      context.unregister(portalName.current);
+    };
+  }, [context, children]);
+
+  useEffect(() => {
+    if (context) {
+      context.register(portalName.current, children);
+    }
+  }, [context, children]);
+
+  return null;
+};
+
+Portal.displayName = 'Portal';
+
+export interface PortalHostProps extends ViewProps {
+  /** Host name */
+  name?: string;
+}
+
+export const PortalHost: React.FC<PortalHostProps> = ({ name, children, ...props }) => {
+  return <View {...props}>{children}</View>;
+};
+
+PortalHost.displayName = 'PortalHost';
+
+const styles = StyleSheet.create({
+  portalContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: zIndex.modal,
+  },
+});

package/src/components/Portal/index.ts

@@ -0,0 +1,2 @@
+export { Portal, PortalProvider, PortalHost, type PortalProps, type PortalProviderProps, type PortalHostProps } from './Portal';
+