@gv-tech/ui-native 2.19.0 → 2.21.0

package/src/drawer.tsx

@@ -1,9 +1,135 @@
-import { Text, View } from 'react-native';
+import type {
+  DrawerBaseProps,
+  DrawerCloseBaseProps,
+  DrawerContentBaseProps,
+  DrawerDescriptionBaseProps,
+  DrawerFooterBaseProps,
+  DrawerHeaderBaseProps,
+  DrawerTitleBaseProps,
+  DrawerTriggerBaseProps,
+} from '@gv-tech/ui-core';
+import * as DialogPrimitive from '@rn-primitives/dialog';
+import * as React from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated, { FadeIn, FadeOut, SlideInDown, SlideOutDown } from 'react-native-reanimated';
+import { wrapTextChildren } from './lib/render-native';
+import { cn } from './lib/utils';
 
-export const Drawer = () => {
+export const Drawer: React.FC<DrawerBaseProps> = ({ children }) => {
+  return <DialogPrimitive.Root>{children}</DialogPrimitive.Root>;
+};
+Drawer.displayName = 'Drawer';
+
+export const DrawerTrigger = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Trigger>,
+  DrawerTriggerBaseProps & { className?: string }
+>(({ children, className, ...props }, ref) => {
   return (
-    <View>
-      <Text>drawer is not yet implemented for React Native</Text>
-    </View>
+    <DialogPrimitive.Trigger ref={ref} className={className} {...props}>
+      {wrapTextChildren(children)}
+    </DialogPrimitive.Trigger>
   );
-};
+});
+DrawerTrigger.displayName = 'DrawerTrigger';
+
+export const DrawerPortal = DialogPrimitive.Portal;
+
+export type DrawerOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+export type DrawerOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
+
+export const DrawerOverlay: React.ForwardRefExoticComponent<
+  DrawerOverlayProps & React.RefAttributes<DrawerOverlayRef>
+> = React.forwardRef<DrawerOverlayRef, DrawerOverlayProps>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Overlay style={StyleSheet.absoluteFill} asChild ref={ref} {...props}>
+      <Animated.View
+        entering={FadeIn.duration(150)}
+        exiting={FadeOut.duration(150)}
+        className={cn('z-50 bg-black/80', className)}
+      />
+    </DialogPrimitive.Overlay>
+  );
+});
+DrawerOverlay.displayName = 'DrawerOverlay';
+
+export const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DrawerContentBaseProps & {
+    portalHost?: string;
+    overlayClassName?: string;
+    overlayStyle?: ViewStyle;
+  }
+>(({ className, children, portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+  return (
+    <DrawerPortal hostName={portalHost}>
+      <DrawerOverlay className={overlayClassName} style={overlayStyle} />
+      <DialogPrimitive.Content ref={ref} asChild {...props}>
+        <Animated.View
+          entering={SlideInDown.duration(200)}
+          exiting={SlideOutDown.duration(200)}
+          className={cn(
+            'border-border bg-background fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-xl border p-6 pb-10 shadow-lg',
+            className,
+          )}
+        >
+          <View className="bg-muted mx-auto mb-4 h-1.5 w-12 rounded-full" />
+          {children}
+        </Animated.View>
+      </DialogPrimitive.Content>
+    </DrawerPortal>
+  );
+});
+DrawerContent.displayName = 'DrawerContent';
+
+export const DrawerHeader = ({ className, children, ...props }: DrawerHeaderBaseProps) => (
+  <View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props}>
+    {wrapTextChildren(children)}
+  </View>
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+export const DrawerFooter = ({ className, children, ...props }: DrawerFooterBaseProps) => (
+  <View className={cn('mt-auto flex flex-col gap-2', className)} {...props}>
+    {wrapTextChildren(children)}
+  </View>
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+export const DrawerClose = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Close>,
+  DrawerCloseBaseProps & { className?: string }
+>(({ children, className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Close ref={ref} className={className} {...props}>
+      {wrapTextChildren(children)}
+    </DialogPrimitive.Close>
+  );
+});
+DrawerClose.displayName = 'DrawerClose';
+
+export const DrawerTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, DrawerTitleBaseProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <DialogPrimitive.Title
+        ref={ref}
+        className={cn('text-foreground text-lg leading-none font-semibold tracking-tight', className)}
+        {...props}
+      >
+        {wrapTextChildren(children)}
+      </DialogPrimitive.Title>
+    );
+  },
+);
+DrawerTitle.displayName = 'DrawerTitle';
+
+export const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  DrawerDescriptionBaseProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props}>
+      {wrapTextChildren(children)}
+    </DialogPrimitive.Description>
+  );
+});
+DrawerDescription.displayName = 'DrawerDescription';

package/src/dropdown-menu.tsx

@@ -1,9 +1,221 @@
-import { Text, View } from 'react-native';
+import type {
+  DropdownMenuCheckboxItemBaseProps,
+  DropdownMenuContentBaseProps,
+  DropdownMenuItemBaseProps,
+  DropdownMenuLabelBaseProps,
+  DropdownMenuRadioItemBaseProps,
+  DropdownMenuSeparatorBaseProps,
+  DropdownMenuShortcutBaseProps,
+  DropdownMenuSubContentBaseProps,
+  DropdownMenuSubTriggerBaseProps,
+} from '@gv-tech/ui-core';
+import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+import { wrapTextChildren } from './lib/render-native';
+import { cn } from './lib/utils';
+import { Text } from './text';
 
-export const DropdownMenu = () => {
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuOverlay = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.Overlay
+      style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
+      ref={ref}
+      {...props}
+    >
+      <Animated.View
+        entering={FadeIn.duration(100)}
+        exiting={FadeOut.duration(100)}
+        className={cn('absolute inset-0 z-50 bg-black/30', className)}
+      />
+    </DropdownMenuPrimitive.Overlay>
+  );
+});
+DropdownMenuOverlay.displayName = 'DropdownMenuOverlay';
+
+export const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  DropdownMenuContentBaseProps
+>(({ className, children, side, ...props }, ref) => {
+  const nativeSide = side === 'left' || side === 'right' ? 'bottom' : side;
   return (
-    <View>
-      <Text>dropdown-menu is not yet implemented for React Native</Text>
-    </View>
+    <DropdownMenuPortal>
+      <DropdownMenuOverlay />
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        side={nativeSide}
+        className={cn(
+          'bg-popover border-border z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPortal>
+  );
+});
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+export const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  DropdownMenuItemBaseProps
+>(({ className, children, inset, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground relative flex flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {wrapTextChildren(children, Text)}
+    </DropdownMenuPrimitive.Item>
+  );
+});
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+export const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  DropdownMenuCheckboxItemBaseProps
+>(({ className, children, checked, onCheckedChange, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      checked={!!checked}
+      onCheckedChange={onCheckedChange || (() => {})}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground relative flex flex-row items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none',
+        className,
+      )}
+      {...props}
+    >
+      <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check size={14} className="text-foreground" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </View>
+      {wrapTextChildren(children, Text)}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+});
+DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
+
+export const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  DropdownMenuRadioItemBaseProps
+>(({ className, children, value, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      value={value}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground relative flex flex-row items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none',
+        className,
+      )}
+      {...props}
+    >
+      <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Circle size={8} className="text-foreground fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </View>
+      {wrapTextChildren(children, Text)}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+});
+DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
+
+export const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  DropdownMenuLabelBaseProps
+>(({ className, children, inset, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.Label
+      ref={ref}
+      className={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+      {...props}
+    >
+      {wrapTextChildren(children, Text)}
+    </DropdownMenuPrimitive.Label>
+  );
+});
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+
+export const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  DropdownMenuSeparatorBaseProps
+>(({ className, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />
+  );
+});
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+export const DropdownMenuShortcut = ({ className, children, ...props }: DropdownMenuShortcutBaseProps) => {
+  return (
+    <Text className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props}>
+      {children}
+    </Text>
   );
 };
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  DropdownMenuSubTriggerBaseProps
+>(({ className, children, inset, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground flex flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    >
+      <View className="flex flex-row items-center gap-1.5">{wrapTextChildren(children, Text)}</View>
+      <ChevronRight size={14} className="text-foreground ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+});
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
+
+export const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  DropdownMenuSubContentBaseProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        'bg-popover border-border z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </DropdownMenuPrimitive.SubContent>
+  );
+});
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';

package/src/hooks/use-toast.ts

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import type { ToastProps } from '../toast';
+
+const TOAST_LIMIT = 5;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case actionTypes.UPDATE_TOAST:
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action;
+
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) {
+          dismiss();
+        }
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, []);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}
+
+export { toast, useToast };
+export type { ToasterToast };

package/src/hover-card.tsx

@@ -1,9 +1,29 @@
-import { Text, View } from 'react-native';
+import type { HoverCardContentBaseProps } from '@gv-tech/ui-core';
+import * as HoverCardPrimitive from '@rn-primitives/hover-card';
+import * as React from 'react';
+import { cn } from './lib/utils';
 
-export const HoverCard = () => {
+export const HoverCard = HoverCardPrimitive.Root;
+
+export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+export const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  HoverCardContentBaseProps
+>(({ className, children, ...props }, ref) => {
   return (
-    <View>
-      <Text>hover-card is not yet implemented for React Native</Text>
-    </View>
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        ref={ref}
+        className={cn(
+          'bg-popover text-popover-foreground border-border z-50 w-64 rounded-md border p-4 shadow-md',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </HoverCardPrimitive.Content>
+    </HoverCardPrimitive.Portal>
   );
-};
+});
+HoverCardContent.displayName = HoverCardPrimitive.Content?.displayName || 'HoverCardContent';