@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Dialog.tsx

@@ -0,0 +1,240 @@
+import { Icon } from './Icon';
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { cn } from '../../lib/utils';
+import * as DialogPrimitive from '@rn-primitives/dialog';
+import { X } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, Text, 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' });
+cssInterop(Text, { className: 'style' });
+
+/**
+ * Root dialog container
+ *
+ * A modal window that overlays the main content and requires user interaction.
+ * Unlike AlertDialog, this is for non-critical content that doesn't require immediate action.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button><Text>Open Dialog</Text></Button>
+ *   </DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle><Text>Edit Profile</Text></DialogTitle>
+ *       <DialogDescription><Text>Make changes to your profile</Text></DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <Button><Text>Save</Text></Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+const Dialog = DialogPrimitive.Root;
+
+/**
+ * Trigger button that opens the dialog
+ */
+const DialogTrigger = DialogPrimitive.Trigger;
+
+/**
+ * Portal component for rendering dialog outside DOM hierarchy
+ */
+const DialogPortal = DialogPrimitive.Portal;
+
+/**
+ * Close button component for manually closing the dialog
+ */
+const DialogClose = DialogPrimitive.Close;
+
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Semi-transparent overlay behind the dialog
+ *
+ * Provides backdrop that dims background content. Uses platform-specific
+ * full window overlay on iOS for proper z-index layering.
+ */
+function DialogOverlay({
+  className,
+  children,
+  ...props
+}: Omit<DialogPrimitive.OverlayProps, 'asChild'> &
+  React.RefAttributes<DialogPrimitive.OverlayRef> & {
+    children?: React.ReactNode;
+  }) {
+  return (
+    <FullWindowOverlay>
+      <DialogPrimitive.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 cursor-default [&>*]:cursor-auto',
+          }),
+          className
+        )}
+        {...props}
+        asChild={Platform.OS !== 'web'}
+      >
+        <NativeOnlyAnimatedView
+          entering={FadeIn.duration(200)}
+          exiting={FadeOut.duration(150)}
+        >
+          <NativeOnlyAnimatedView
+            entering={FadeIn.delay(50)}
+            exiting={FadeOut.duration(150)}
+          >
+            <>{children}</>
+          </NativeOnlyAnimatedView>
+        </NativeOnlyAnimatedView>
+      </DialogPrimitive.Overlay>
+    </FullWindowOverlay>
+  );
+}
+
+/**
+ * Main dialog content container
+ *
+ * Contains the actual dialog UI with automatic close button in top-right corner.
+ * Includes smooth fade and zoom animations.
+ *
+ * @param {string} [portalHost] - Optional portal host name for custom rendering location
+ * @param {string} [className] - Additional Tailwind classes
+ */
+function DialogContent({
+  className,
+  portalHost,
+  children,
+  ...props
+}: DialogPrimitive.ContentProps &
+  React.RefAttributes<DialogPrimitive.ContentRef> & {
+    portalHost?: string;
+  }) {
+  return (
+    <DialogPortal hostName={portalHost}>
+      <DialogOverlay>
+        <DialogPrimitive.Content
+          className={cn(
+            'bg-background border-border z-50 mx-auto 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}
+        >
+          <>{children}</>
+          <DialogPrimitive.Close
+            className={cn(
+              'absolute right-4 top-4 rounded opacity-70 active:opacity-100',
+              Platform.select({
+                web: 'ring-offset-background focus:ring-ring data-[state=open]:bg-accent transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2',
+              })
+            )}
+            hitSlop={12}
+          >
+            <Icon
+              as={X}
+              className={cn(
+                'text-accent-foreground web:pointer-events-none size-4 shrink-0'
+              )}
+            />
+            <Text className="sr-only">Close</Text>
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogOverlay>
+    </DialogPortal>
+  );
+}
+
+/**
+ * Dialog header container
+ *
+ * Contains title and description with appropriate spacing and alignment.
+ * Centered on mobile, left-aligned on larger screens.
+ */
+function DialogHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Dialog footer container
+ *
+ * Contains action buttons. Stacked vertically on mobile (reverse order),
+ * horizontal row on larger screens (right-aligned).
+ */
+function DialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Dialog title component
+ *
+ * Large, semibold heading for the dialog. Automatically announced by screen readers.
+ */
+function DialogTitle({
+  className,
+  ...props
+}: DialogPrimitive.TitleProps & React.RefAttributes<DialogPrimitive.TitleRef>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        'text-foreground text-lg font-semibold leading-none',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Dialog description component
+ *
+ * Muted text providing additional context or instructions for the dialog.
+ */
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.DescriptionProps &
+  React.RefAttributes<DialogPrimitive.DescriptionRef>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};