@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Alert-Dialog.tsx

@@ -0,0 +1,295 @@
+import { buttonTextVariants, buttonVariants } from './Button';
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
+import * as React from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+cssInterop(View, { className: 'style' });
+
+/**
+ * Root alert dialog container
+ *
+ * A modal dialog that interrupts the user with important content and expects a response.
+ * Use for critical actions that require user confirmation before proceeding.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="destructive"><Text>Delete Account</Text></Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This action cannot be undone.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
+ *       <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ *
+ * @accessibility
+ * - Traps focus within dialog when open
+ * - Closes on Escape key press
+ * - Returns focus to trigger on close
+ * - Uses appropriate ARIA attributes
+ */
+const AlertDialog = AlertDialogPrimitive.Root;
+
+/**
+ * Trigger button that opens the alert dialog
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogTrigger asChild>
+ *   <Button><Text>Open Dialog</Text></Button>
+ * </AlertDialogTrigger>
+ * ```
+ */
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+/**
+ * Portal component for rendering dialog content outside the DOM hierarchy
+ */
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Semi-transparent overlay behind the alert dialog
+ *
+ * Provides backdrop that dims background content and handles click-outside behavior.
+ * Uses platform-specific full window overlay on iOS for proper z-index layering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogOverlay>
+ *   <AlertDialogContent>...</AlertDialogContent>
+ * </AlertDialogOverlay>
+ * ```
+ */
+function AlertDialogOverlay({
+  className,
+  children,
+  ...props
+}: Omit<AlertDialogPrimitive.OverlayProps, 'asChild'> &
+  React.RefAttributes<AlertDialogPrimitive.OverlayRef> & {
+    children?: React.ReactNode;
+  }) {
+  return (
+    <FullWindowOverlay>
+      <AlertDialogPrimitive.Overlay
+        className={cn(
+          'absolute bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 p-2',
+          Platform.select({
+            web: 'animate-in fade-in-0 fixed',
+          }),
+          className
+        )}
+        {...props}
+      >
+        <NativeOnlyAnimatedView
+          entering={FadeIn.duration(200).delay(50)}
+          exiting={FadeOut.duration(150)}
+        >
+          <>{children}</>
+        </NativeOnlyAnimatedView>
+      </AlertDialogPrimitive.Overlay>
+    </FullWindowOverlay>
+  );
+}
+
+/**
+ * Main alert dialog content container
+ *
+ * Contains the dialog's title, description, and action buttons. Automatically centered
+ * on screen with smooth entrance animations.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogContent>
+ *   <AlertDialogHeader>
+ *     <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+ *     <AlertDialogDescription>Description here</AlertDialogDescription>
+ *   </AlertDialogHeader>
+ *   <AlertDialogFooter>
+ *     <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
+ *     <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
+ *   </AlertDialogFooter>
+ * </AlertDialogContent>
+ * ```
+ */
+function AlertDialogContent({
+  className,
+  portalHost,
+  ...props
+}: AlertDialogPrimitive.ContentProps &
+  React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
+    portalHost?: string;
+  }) {
+  return (
+    <AlertDialogPortal hostName={portalHost}>
+      <AlertDialogOverlay>
+        <AlertDialogPrimitive.Content
+          className={cn(
+            'bg-background border-border z-50 flex w-full max-w-[calc(100%-2rem)] flex-col gap-4 rounded-lg border p-6 shadow-lg shadow-black/5 sm:max-w-lg',
+            Platform.select({
+              web: 'animate-in fade-in-0 zoom-in-95 duration-200',
+            }),
+            className
+          )}
+          {...props}
+        />
+      </AlertDialogOverlay>
+    </AlertDialogPortal>
+  );
+}
+
+/**
+ * Header section for alert dialog content
+ *
+ * Groups the title and description with proper spacing and text alignment.
+ *
+ * @component
+ */
+function AlertDialogHeader({ className, ...props }: ViewProps) {
+  return (
+    <TextClassContext.Provider value="text-center sm:text-left">
+      <View className={cn('flex flex-col gap-2', className)} {...props} />
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Footer section for alert dialog action buttons
+ *
+ * Contains cancel and action buttons with responsive layout (stacked on mobile, row on desktop).
+ *
+ * @component
+ */
+function AlertDialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Title text for the alert dialog
+ *
+ * Prominently displays the main heading with large, semibold text.
+ *
+ * @component
+ */
+function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogPrimitive.TitleProps &
+  React.RefAttributes<AlertDialogPrimitive.TitleRef>) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn('text-foreground text-lg font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Description text for the alert dialog
+ *
+ * Provides additional context below the title with muted styling.
+ *
+ * @component
+ */
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogPrimitive.DescriptionProps &
+  React.RefAttributes<AlertDialogPrimitive.DescriptionRef>) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Primary action button that confirms the alert dialog action
+ *
+ * Styled as a primary button. Automatically closes dialog on press.
+ *
+ * @component
+ */
+function AlertDialogAction({
+  className,
+  ...props
+}: AlertDialogPrimitive.ActionProps &
+  React.RefAttributes<AlertDialogPrimitive.ActionRef>) {
+  return (
+    <TextClassContext.Provider value={buttonTextVariants({ className })}>
+      <AlertDialogPrimitive.Action
+        className={cn(buttonVariants(), className)}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Cancel button that dismisses the alert dialog
+ *
+ * Styled as an outline button. Automatically closes dialog on press without performing action.
+ *
+ * @component
+ */
+function AlertDialogCancel({
+  className,
+  ...props
+}: AlertDialogPrimitive.CancelProps &
+  React.RefAttributes<AlertDialogPrimitive.CancelRef>) {
+  return (
+    <TextClassContext.Provider
+      value={buttonTextVariants({ className, variant: 'outline' })}
+    >
+      <AlertDialogPrimitive.Cancel
+        className={cn(buttonVariants({ variant: 'outline' }), className)}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/Alert.tsx

@@ -0,0 +1,137 @@
+import { Icon } from './Icon';
+import { Text, TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import type { LucideIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+cssInterop(View, { className: 'style' });
+
+/**
+ * Alert component for displaying important messages or notifications
+ *
+ * Features an icon on the left side with title and description.
+ * Supports default and destructive variants for different severity levels.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Alert icon={AlertCircle} variant="default">
+ *   <AlertTitle><Text>Heads up!</Text></AlertTitle>
+ *   <AlertDescription>
+ *     <Text>You can add components to your app using the cli.</Text>
+ *   </AlertDescription>
+ * </Alert>
+ *
+ * // Destructive variant
+ * <Alert icon={AlertTriangle} variant="destructive">
+ *   <AlertTitle><Text>Error</Text></AlertTitle>
+ *   <AlertDescription>
+ *     <Text>Your session has expired. Please login again.</Text>
+ *   </AlertDescription>
+ * </Alert>
+ * ```
+ *
+ * @param {LucideIcon} icon - Icon component to display
+ * @param {'default' | 'destructive'} [variant='default'] - Alert style variant
+ * @param {string} [iconClassName] - Additional classes for the icon
+ * @param {string} [className] - Additional classes for the container
+ *
+ * @accessibility Sets role="alert" for screen reader announcement
+ */
+function Alert({
+  className,
+  variant,
+  children,
+  icon,
+  iconClassName,
+  ...props
+}: ViewProps &
+  React.RefAttributes<View> & {
+    icon: LucideIcon;
+    variant?: 'default' | 'destructive';
+    iconClassName?: string;
+  }) {
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm text-foreground dark:text-foreground',
+        variant === 'destructive' && 'text-destructive dark:text-destructive',
+        className
+      )}
+    >
+      <View
+        role="alert"
+        className={cn(
+          'bg-card dark:bg-card border-border dark:border-border relative w-full rounded-lg border px-4 pb-2 pt-3.5',
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-3.5 top-3">
+          <Icon
+            as={icon}
+            className={cn(
+              'size-4 text-foreground dark:text-foreground',
+              variant === 'destructive' &&
+                'text-destructive dark:text-destructive',
+              iconClassName
+            )}
+          />
+        </View>
+        {children}
+      </View>
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * AlertTitle - Title text for the alert
+ *
+ * Displays as a medium-weight heading with appropriate spacing from the icon.
+ *
+ * @param {string} [className] - Additional Tailwind classes
+ */
+function AlertTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn(
+        'mb-1 ml-0.5 min-h-4 pl-6 font-medium leading-none tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * AlertDescription - Description text for the alert
+ *
+ * Displays detailed message content with muted styling and appropriate spacing.
+ * Automatically adjusts color for destructive variants.
+ *
+ * @param {string} [className] - Additional Tailwind classes
+ */
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  const textClass = React.useContext(TextClassContext);
+  return (
+    <Text
+      className={cn(
+        'text-muted-foreground dark:text-muted-foreground ml-0.5 pb-1.5 pl-6 text-sm leading-relaxed',
+        textClass?.includes('text-destructive') &&
+          'text-destructive/90 dark:text-destructive/90',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertDescription, AlertTitle };