@gv-tech/design-system 2.3.0 → 2.5.0

package/packages/ui-native/src/lib/render-native.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Text, type TextProps } from 'react-native';
+
+// Wraps raw strings or numbers in a React Native <Text> component.
+// Prevents "Unexpected text node" errors in React Native environments.
+export function wrapTextChildren(
+  children: React.ReactNode,
+  TextComponent: React.ComponentType<TextProps> = Text,
+  textProps: TextProps = {},
+): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      return <TextComponent {...textProps}>{child}</TextComponent>;
+    }
+    return child;
+  });
+}

package/packages/ui-native/src/menubar.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const Menubar = () => {
+  return (
+    <View>
+      <Text>menubar is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/packages/ui-native/src/navigation-menu.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const NavigationMenu = () => {
+  return (
+    <View>
+      <Text>navigation-menu is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/pagination.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const Pagination = () => {
+  return (
+    <View>
+      <Text>pagination is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/popover.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const Popover = () => {
+  return (
+    <View>
+      <Text>popover is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/progress.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const Progress = () => {
+  return (
+    <View>
+      <Text>progress is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/radio-group.test.tsx

@@ -0,0 +1,77 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { RadioGroup, RadioGroupItem } from './radio-group';
+
+// Mock the primitive to avoid JSX parsing issues in node_modules
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+vi.mock('@rn-primitives/radio-group', () => {
+  const React = require('react');
+  return {
+    Root: React.forwardRef(({ children, className, value, onValueChange, ...props }: any, ref: any) =>
+      React.createElement(
+        'div',
+        { ref, className, ...props },
+        React.Children.map(children, (child: any) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as any, {
+              checked: (child.props as any).value === value,
+              onCheckedChange: () => onValueChange?.((child.props as any).value),
+            });
+          }
+          return child;
+        }),
+      ),
+    ),
+    Item: React.forwardRef(({ children, className, checked, onCheckedChange, ...props }: any, ref: any) =>
+      React.createElement(
+        'div',
+        {
+          ref,
+          role: 'radio',
+          'aria-checked': checked,
+          className,
+          onClick: onCheckedChange,
+          ...props,
+        },
+        children,
+      ),
+    ),
+    Indicator: ({ children, className }: any) => React.createElement('div', { className }, children),
+    useRootContext: () => ({ value: 'option-one' }), // Basic mock
+  };
+});
+/* eslint-enable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+
+vi.mock('lucide-react-native', () => ({
+  Circle: () => null,
+  Check: () => null,
+  ChevronDown: () => null,
+  ChevronUp: () => null,
+  X: () => null,
+}));
+
+describe('RadioGroup (Native Implementation)', () => {
+  it('renders correctly', () => {
+    render(
+      <RadioGroup value="option-one" onValueChange={() => {}}>
+        <RadioGroupItem value="option-one" aria-label="Option One" />
+        <RadioGroupItem value="option-two" aria-label="Option Two" />
+      </RadioGroup>,
+    );
+    expect(screen.getByLabelText('Option One')).toBeDefined();
+    expect(screen.getByLabelText('Option Two')).toBeDefined();
+  });
+
+  it('handles value change', () => {
+    const onValueChange = vi.fn();
+    render(
+      <RadioGroup value="option-one" onValueChange={onValueChange}>
+        <RadioGroupItem value="option-one" aria-label="Option One" />
+        <RadioGroupItem value="option-two" aria-label="Option Two" />
+      </RadioGroup>,
+    );
+
+    fireEvent.click(screen.getByLabelText('Option Two'));
+    expect(onValueChange).toHaveBeenCalledWith('option-two');
+  });
+});

package/packages/ui-native/src/radio-group.tsx

@@ -0,0 +1,42 @@
+import { RadioGroupBaseProps, RadioGroupItemBaseProps } from '@gv-tech/ui-core';
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+import { Circle } from 'lucide-react-native';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+
+export interface RadioGroupProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, RadioGroupBaseProps {}
+
+const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
+  ({ className, ...props }, ref) => {
+    return <RadioGroupPrimitive.Root className={cn('web:grid gap-2', className)} {...props} ref={ref} />;
+  },
+);
+RadioGroup.displayName = RadioGroupPrimitive.Root?.displayName || 'RadioGroup';
+
+export interface RadioGroupItemProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'disabled'>, RadioGroupItemBaseProps {}
+
+const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <RadioGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          'aspect-square h-4 w-4 native:h-5 native:w-5 rounded-full border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          props.disabled && 'web:cursor-not-allowed opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+          <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        </RadioGroupPrimitive.Indicator>
+      </RadioGroupPrimitive.Item>
+    );
+  },
+);
+RadioGroupItem.displayName = RadioGroupPrimitive.Item?.displayName || 'RadioGroupItem';
+
+export { RadioGroup, RadioGroupItem };

package/packages/ui-native/src/resizable.tsx

@@ -0,0 +1,25 @@
+import { Text, View } from 'react-native';
+
+export const ResizablePanelGroup = () => {
+  return (
+    <View>
+      <Text>ResizablePanelGroup is not yet implemented for React Native</Text>
+    </View>
+  );
+};
+
+export const ResizablePanel = () => {
+  return (
+    <View>
+      <Text>ResizablePanel is not yet implemented for React Native</Text>
+    </View>
+  );
+};
+
+export const ResizableHandle = () => {
+  return (
+    <View>
+      <Text>ResizableHandle is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/scroll-area.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const ScrollArea = () => {
+  return (
+    <View>
+      <Text>scroll-area is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/search.tsx

@@ -0,0 +1,17 @@
+import { Text, View } from 'react-native';
+
+export const Search = () => {
+  return (
+    <View>
+      <Text>Search is not yet implemented for React Native</Text>
+    </View>
+  );
+};
+
+export const SearchTrigger = () => {
+  return (
+    <View>
+      <Text>SearchTrigger is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/select.tsx

@@ -0,0 +1,229 @@
+import {
+  SelectBaseProps,
+  SelectContentBaseProps,
+  SelectGroupBaseProps,
+  SelectItemBaseProps,
+  SelectLabelBaseProps,
+  SelectScrollDownButtonBaseProps,
+  SelectScrollUpButtonBaseProps,
+  SelectSeparatorBaseProps,
+  SelectTriggerBaseProps,
+  SelectValueBaseProps,
+} from '@gv-tech/ui-core';
+import * as SelectPrimitive from '@rn-primitives/select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+
+export interface SelectProps
+  extends
+    Omit<
+      React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,
+      'value' | 'defaultValue' | 'onValueChange' | 'disabled'
+    >,
+    SelectBaseProps {}
+
+const Select = SelectPrimitive.Root;
+
+export interface SelectGroupProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>, SelectGroupBaseProps {}
+
+const SelectGroup = SelectPrimitive.Group;
+
+export interface SelectValueProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>, 'placeholder'>, SelectValueBaseProps {}
+
+const SelectValue = SelectPrimitive.Value;
+
+export interface SelectTriggerProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children' | 'disabled'>,
+    SelectTriggerBaseProps {}
+
+const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, SelectTriggerProps>(
+  ({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-row h-10 native:h-12 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-muted-foreground web:ring-offset-background web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 [&>span]:line-clamp-1',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <>{children}</>
+      <ChevronDown size={16} aria-hidden={true} className="text-foreground opacity-50" />
+    </SelectPrimitive.Trigger>
+  ),
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger?.displayName || 'SelectTrigger';
+
+export interface SelectScrollUpButtonProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>, SelectScrollUpButtonBaseProps {}
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  SelectScrollUpButtonProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    // @ts-expect-error TODO: fix type
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp size={14} className="text-foreground" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName =
+  ((SelectPrimitive.ScrollUpButton as unknown as Record<string, unknown>)?.displayName as string | undefined) ||
+  'SelectScrollUpButton';
+
+export interface SelectScrollDownButtonProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>, SelectScrollDownButtonBaseProps {}
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  SelectScrollDownButtonProps
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    // @ts-expect-error TODO: fix type
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown size={14} className="text-foreground" />
+  </SelectPrimitive.ScrollDownButton>
+));
+
+SelectScrollDownButton.displayName =
+  ((SelectPrimitive.ScrollDownButton as unknown as Record<string, unknown>)?.displayName as string | undefined) ||
+  'SelectScrollDownButton';
+
+export interface SelectContentProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>, SelectContentBaseProps {
+  portalHost?: string;
+  overlayClassName?: string;
+  overlayStyle?: ViewStyle;
+}
+
+const SelectContent = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Content>, SelectContentProps>(
+  ({ className, children, position = 'popper', portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+    const { open } = SelectPrimitive.useRootContext();
+
+    return (
+      <SelectPrimitive.Portal hostName={portalHost}>
+        <SelectPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined} asChild>
+          <Animated.View className={overlayClassName} style={overlayStyle} />
+        </SelectPrimitive.Overlay>
+        <SelectPrimitive.Content
+          ref={ref}
+          className={cn(
+            'relative z-50 max-h-96 min-w-[8rem] rounded-md border border-border bg-popover shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            position === 'popper' &&
+              'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            open ? 'web:zoom-in-95 web:animate-in web:fade-in-0' : 'web:zoom-out-95 web:animate-out web:fade-out-0',
+            className,
+          )}
+          position={position}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.Viewport
+            className={cn(
+              'p-1',
+              position === 'popper' &&
+                'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+            )}
+          >
+            {children}
+          </SelectPrimitive.Viewport>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    );
+  },
+);
+SelectContent.displayName = SelectPrimitive.Content?.displayName || 'SelectContent';
+
+export interface SelectLabelProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>, SelectLabelBaseProps {}
+
+const SelectLabel = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Label>, SelectLabelProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.Label
+      ref={ref}
+      className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold text-popover-foreground', className)}
+      {...props}
+    />
+  ),
+);
+SelectLabel.displayName = SelectPrimitive.Label?.displayName || 'SelectLabel';
+
+export interface SelectItemProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'children' | 'disabled' | 'label'>,
+    SelectItemBaseProps {
+  label?: string;
+}
+
+const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, SelectItemProps>(
+  ({ className, children, label, ...props }, ref) => {
+    const itemLabel = label || (typeof children === 'string' ? children : '');
+    return (
+      <SelectPrimitive.Item
+        ref={ref}
+        label={itemLabel}
+        className={cn(
+          'relative flex w-full cursor-default select-none flex-row items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none web:hover:bg-accent/50 web:focus:bg-accent web:focus:text-accent-foreground web:hover:text-accent-foreground data-[disabled]:opacity-50',
+          props.disabled && 'web:pointer-events-none',
+          className,
+        )}
+        {...props}
+      >
+        <View
+          className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
+          {...({} as Record<string, unknown>)}
+        >
+          <SelectPrimitive.ItemIndicator>
+            <Check size={14} strokeWidth={3} className="text-popover-foreground" {...({} as Record<string, unknown>)} />
+          </SelectPrimitive.ItemIndicator>
+        </View>
+        {/* @ts-expect-error TODO: fix type */}
+        <SelectPrimitive.ItemText className="text-sm text-popover-foreground native:text-base">
+          {children}
+        </SelectPrimitive.ItemText>
+      </SelectPrimitive.Item>
+    );
+  },
+);
+SelectItem.displayName = SelectPrimitive.Item?.displayName || 'SelectItem';
+
+export interface SelectSeparatorProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>, SelectSeparatorBaseProps {}
+
+const SelectSeparator = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Separator>, SelectSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator
+      ref={ref}
+      className={cn('-mx-1 my-1 h-px bg-muted', className)}
+      {...(props as Record<string, unknown>)}
+    />
+  ),
+);
+SelectSeparator.displayName = SelectPrimitive.Separator?.displayName || 'SelectSeparator';
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/packages/ui-native/src/separator.tsx

@@ -0,0 +1,20 @@
+import * as SeparatorPrimitive from '@rn-primitives/separator';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root?.displayName || 'Separator';
+
+export { Separator };

package/packages/ui-native/src/sheet.test.tsx

@@ -0,0 +1,93 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from './sheet';
+
+// Mock primitives
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */
+vi.mock('@rn-primitives/dialog', () => {
+  const React = require('react');
+  const DialogContext = React.createContext({ open: false, onOpenChange: (_any: any) => {} });
+
+  return {
+    Root: ({ children, open, onOpenChange }: any) =>
+      React.createElement(DialogContext.Provider, { value: { open, onOpenChange } }, children),
+    Trigger: ({ children, ...props }: any) => {
+      const { open, onOpenChange } = React.useContext(DialogContext);
+      return React.createElement('button', { onClick: () => onOpenChange?.(!open), ...props }, children);
+    },
+    Portal: ({ children }: any) => {
+      const { open } = React.useContext(DialogContext);
+      return open ? React.createElement('div', { 'data-testid': 'portal' }, children) : null;
+    },
+    Overlay: React.forwardRef(({ children, ...props }: any, ref: any) => {
+      const { open } = React.useContext(DialogContext);
+      return open ? React.createElement('div', { ref, ...props }, children) : null;
+    }),
+    Content: React.forwardRef(({ children, ...props }: any, ref: any) => {
+      const { open } = React.useContext(DialogContext);
+      return open ? React.createElement('div', { ref, ...props }, children) : null;
+    }),
+    Title: React.forwardRef(({ children, ...props }: any, ref: any) =>
+      React.createElement('h2', { ref, ...props }, children),
+    ),
+    Description: React.forwardRef(({ children, ...props }: any, ref: any) =>
+      React.createElement('p', { ref, ...props }, children),
+    ),
+    Close: React.forwardRef(({ children, ...props }: any, ref: any) => {
+      const { onOpenChange } = React.useContext(DialogContext);
+      return React.createElement('button', { onClick: () => onOpenChange?.(false), ref, ...props }, children);
+    }),
+    useRootContext: () => React.useContext(DialogContext),
+  };
+});
+/* eslint-enable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars */
+
+// Mock reanimated
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+vi.mock('react-native-reanimated', () => {
+  const React = require('react');
+  return {
+    default: {
+      View: React.forwardRef(({ children, ...props }: any, ref: any) =>
+        React.createElement('div', { ref, ...props }, children),
+      ),
+    },
+    FadeIn: { duration: () => ({}) },
+    FadeOut: { duration: () => ({}) },
+    SlideInRight: {},
+    SlideOutRight: {},
+  };
+});
+/* eslint-enable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+
+// Mock lucide
+vi.mock('lucide-react-native', () => ({
+  X: () => null,
+}));
+
+describe('Sheet (Native Implementation)', () => {
+  it('opens and closes correctly', async () => {
+    const TestComponent = () => {
+      const [open, setOpen] = React.useState(false);
+      return (
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger>Open</SheetTrigger>
+          <SheetContent side="right">
+            <SheetTitle>Sheet Title</SheetTitle>
+            <SheetDescription>Sheet Description</SheetDescription>
+          </SheetContent>
+        </Sheet>
+      );
+    };
+
+    render(<TestComponent />);
+
+    expect(screen.queryByText('Sheet Title')).toBeNull();
+
+    fireEvent.click(screen.getByText('Open'));
+
+    expect(await screen.findByText('Sheet Title')).toBeDefined();
+    expect(screen.getByText('Sheet Description')).toBeDefined();
+  });
+});