@gv-tech/design-system 2.5.0 → 2.5.2

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

@@ -1,17 +0,0 @@
-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/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,229 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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();
-  });
-});