@sudobility/components-rn 1.0.21 → 1.0.23

package/src/__tests__/tabs.test.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/Tabs';
+
+describe('Tabs', () => {
+  const renderTabs = (props = {}) =>
+    render(
+      <Tabs defaultValue='tab1' {...props}>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
+          <TabsTrigger value='tab3'>Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+        <TabsContent value='tab3'>
+          <Text>Content 3</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+  it('renders tab triggers', () => {
+    renderTabs();
+    expect(screen.getByText('Tab 1')).toBeTruthy();
+    expect(screen.getByText('Tab 2')).toBeTruthy();
+    expect(screen.getByText('Tab 3')).toBeTruthy();
+  });
+
+  it('shows content for default tab', () => {
+    renderTabs();
+    expect(screen.getByText('Content 1')).toBeTruthy();
+    expect(screen.queryByText('Content 2')).toBeNull();
+    expect(screen.queryByText('Content 3')).toBeNull();
+  });
+
+  it('switches content when a tab is pressed', () => {
+    renderTabs();
+
+    // Initially tab 1 content is shown
+    expect(screen.getByText('Content 1')).toBeTruthy();
+
+    // Press tab 2
+    fireEvent.press(screen.getByText('Tab 2'));
+    expect(screen.queryByText('Content 1')).toBeNull();
+    expect(screen.getByText('Content 2')).toBeTruthy();
+
+    // Press tab 3
+    fireEvent.press(screen.getByText('Tab 3'));
+    expect(screen.queryByText('Content 2')).toBeNull();
+    expect(screen.getByText('Content 3')).toBeTruthy();
+  });
+
+  it('calls onValueChange when tab changes', () => {
+    const onValueChange = jest.fn();
+    renderTabs({ onValueChange });
+
+    fireEvent.press(screen.getByText('Tab 2'));
+    expect(onValueChange).toHaveBeenCalledWith('tab2');
+  });
+
+  it('works in controlled mode', () => {
+    const onValueChange = jest.fn();
+    const { rerender } = render(
+      <Tabs value='tab1' onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+    expect(screen.getByText('Content 1')).toBeTruthy();
+
+    // Press tab 2 - in controlled mode the parent decides
+    fireEvent.press(screen.getByText('Tab 2'));
+    expect(onValueChange).toHaveBeenCalledWith('tab2');
+
+    // Content doesn't change until the parent updates the value prop
+    expect(screen.getByText('Content 1')).toBeTruthy();
+
+    // Rerender with updated value
+    rerender(
+      <Tabs value='tab2' onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2'>Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+    expect(screen.getByText('Content 2')).toBeTruthy();
+    expect(screen.queryByText('Content 1')).toBeNull();
+  });
+
+  it('tab triggers have tab accessibility role', () => {
+    renderTabs();
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs.length).toBe(3);
+  });
+
+  it('selected tab has selected accessibility state', () => {
+    renderTabs();
+    const tabs = screen.getAllByRole('tab');
+    // First tab should be selected
+    expect(tabs[0].props.accessibilityState).toEqual({
+      selected: true,
+      disabled: false,
+    });
+    // Second tab should not be selected
+    expect(tabs[1].props.accessibilityState).toEqual({
+      selected: false,
+      disabled: false,
+    });
+  });
+
+  it('disabled tab has disabled accessibility state', () => {
+    render(
+      <Tabs defaultValue='tab1'>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2' disabled>
+            Tab 2
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs[1].props.accessibilityState).toEqual({
+      selected: false,
+      disabled: true,
+    });
+  });
+
+  it('disabled tab does not switch content when pressed', () => {
+    render(
+      <Tabs defaultValue='tab1'>
+        <TabsList>
+          <TabsTrigger value='tab1'>Tab 1</TabsTrigger>
+          <TabsTrigger value='tab2' disabled>
+            Tab 2
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value='tab1'>
+          <Text>Content 1</Text>
+        </TabsContent>
+        <TabsContent value='tab2'>
+          <Text>Content 2</Text>
+        </TabsContent>
+      </Tabs>
+    );
+
+    fireEvent.press(screen.getByText('Tab 2'));
+    // Content 1 should still be visible
+    expect(screen.getByText('Content 1')).toBeTruthy();
+    expect(screen.queryByText('Content 2')).toBeNull();
+  });
+});
+
+describe('TabsTrigger outside Tabs context', () => {
+  it('throws when used outside Tabs', () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() => render(<TabsTrigger value='tab1'>Tab 1</TabsTrigger>)).toThrow(
+      'Tabs components must be used within a Tabs provider'
+    );
+
+    consoleSpy.mockRestore();
+  });
+});
+
+describe('TabsContent outside Tabs context', () => {
+  it('throws when used outside Tabs', () => {
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    expect(() =>
+      render(
+        <TabsContent value='tab1'>
+          <Text>Content</Text>
+        </TabsContent>
+      )
+    ).toThrow('Tabs components must be used within a Tabs provider');
+
+    consoleSpy.mockRestore();
+  });
+});

package/src/__tests__/toast.test.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react-native';
+import { Text, Pressable } from 'react-native';
+import { Toast, ToastProvider, useToast } from '../ui/Toast';
+import type { ToastMessage } from '../ui/Toast';
+
+describe('Toast', () => {
+  const baseToast: ToastMessage = {
+    id: 'test-1',
+    title: 'Test Toast',
+    description: 'This is a test toast',
+    variant: 'default',
+  };
+
+  it('renders title', () => {
+    render(<Toast toast={baseToast} onRemove={jest.fn()} />);
+    expect(screen.getByText('Test Toast')).toBeTruthy();
+  });
+
+  it('renders description', () => {
+    render(<Toast toast={baseToast} onRemove={jest.fn()} />);
+    expect(screen.getByText('This is a test toast')).toBeTruthy();
+  });
+
+  it('renders close button', () => {
+    render(<Toast toast={baseToast} onRemove={jest.fn()} />);
+    const closeButton = screen.getByLabelText('Close notification');
+    expect(closeButton).toBeTruthy();
+  });
+
+  it('calls onRemove when close button is pressed', () => {
+    const onRemove = jest.fn();
+    render(<Toast toast={baseToast} onRemove={onRemove} />);
+    fireEvent.press(screen.getByLabelText('Close notification'));
+    expect(onRemove).toHaveBeenCalledWith('test-1');
+  });
+
+  it('renders action button when action is provided', () => {
+    const onAction = jest.fn();
+    const toastWithAction: ToastMessage = {
+      ...baseToast,
+      action: { label: 'Undo', onPress: onAction },
+    };
+    render(<Toast toast={toastWithAction} onRemove={jest.fn()} />);
+    expect(screen.getByText('Undo')).toBeTruthy();
+    fireEvent.press(screen.getByText('Undo'));
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders with different variants without crashing', () => {
+    const variants = [
+      'default',
+      'success',
+      'error',
+      'warning',
+      'info',
+    ] as const;
+
+    variants.forEach(variant => {
+      const toast: ToastMessage = { ...baseToast, variant, id: variant };
+      const { unmount } = render(<Toast toast={toast} onRemove={jest.fn()} />);
+      expect(screen.getByText('Test Toast')).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders toast without title', () => {
+    const toast: ToastMessage = {
+      id: 'no-title',
+      description: 'Description only',
+    };
+    render(<Toast toast={toast} onRemove={jest.fn()} />);
+    expect(screen.getByText('Description only')).toBeTruthy();
+  });
+
+  it('renders toast without description', () => {
+    const toast: ToastMessage = {
+      id: 'no-desc',
+      title: 'Title only',
+    };
+    render(<Toast toast={toast} onRemove={jest.fn()} />);
+    expect(screen.getByText('Title only')).toBeTruthy();
+  });
+});
+
+describe('ToastProvider', () => {
+  it('renders children', () => {
+    render(
+      <ToastProvider>
+        <Text>App content</Text>
+      </ToastProvider>
+    );
+    expect(screen.getByText('App content')).toBeTruthy();
+  });
+});
+
+describe('useToast', () => {
+  it('throws when used outside ToastProvider', () => {
+    // Suppress console.error for this test since we expect an error
+    const consoleSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    const BadComponent = () => {
+      useToast();
+      return null;
+    };
+
+    expect(() => render(<BadComponent />)).toThrow(
+      'useToast must be used within ToastProvider'
+    );
+
+    consoleSpy.mockRestore();
+  });
+
+  it('addToast adds a toast that renders', () => {
+    const TestComponent = () => {
+      const { addToast } = useToast();
+      return (
+        <Pressable
+          testID='add-toast'
+          onPress={() =>
+            addToast({
+              title: 'New Toast',
+              description: 'Toast was added',
+              variant: 'success',
+            })
+          }
+        >
+          <Text>Add Toast</Text>
+        </Pressable>
+      );
+    };
+
+    render(
+      <ToastProvider>
+        <TestComponent />
+      </ToastProvider>
+    );
+
+    act(() => {
+      fireEvent.press(screen.getByTestId('add-toast'));
+    });
+
+    expect(screen.getByText('New Toast')).toBeTruthy();
+    expect(screen.getByText('Toast was added')).toBeTruthy();
+  });
+
+  it('removeToast removes a toast', () => {
+    let toastContext: ReturnType<typeof useToast>;
+
+    const TestComponent = () => {
+      toastContext = useToast();
+      return <Text>Test</Text>;
+    };
+
+    render(
+      <ToastProvider>
+        <TestComponent />
+      </ToastProvider>
+    );
+
+    // Add a toast first
+    act(() => {
+      toastContext.addToast({
+        title: 'Removable Toast',
+        variant: 'info',
+      });
+    });
+
+    expect(screen.getByText('Removable Toast')).toBeTruthy();
+
+    // Now remove it
+    act(() => {
+      const toastId = toastContext.toasts[0].id;
+      toastContext.removeToast(toastId);
+    });
+
+    expect(screen.queryByText('Removable Toast')).toBeNull();
+  });
+});

package/src/__tests__/utils.test.ts

@@ -0,0 +1,47 @@
+import { cn } from '../lib/utils';
+
+describe('cn utility', () => {
+  it('merges class names', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+  });
+
+  it('handles undefined and null values', () => {
+    expect(cn('foo', undefined, 'bar', null)).toBe('foo bar');
+  });
+
+  it('handles empty string', () => {
+    expect(cn('')).toBe('');
+  });
+
+  it('handles no arguments', () => {
+    expect(cn()).toBe('');
+  });
+
+  it('handles conditional classes via objects', () => {
+    expect(cn({ foo: true, bar: false, baz: true })).toBe('foo baz');
+  });
+
+  it('handles arrays', () => {
+    expect(cn(['foo', 'bar'])).toBe('foo bar');
+  });
+
+  it('handles mixed arguments', () => {
+    expect(cn('base', { active: true, hidden: false }, ['extra'])).toBe(
+      'base active extra'
+    );
+  });
+
+  it('handles false and zero values', () => {
+    expect(cn('foo', false, 0, 'bar')).toBe('foo bar');
+  });
+
+  it('combines Tailwind-like classes', () => {
+    expect(cn('rounded-lg p-4', 'bg-white', 'mt-2')).toBe(
+      'rounded-lg p-4 bg-white mt-2'
+    );
+  });
+
+  it('handles nested arrays', () => {
+    expect(cn(['a', ['b', 'c']])).toBe('a b c');
+  });
+});

package/src/index.ts

@@ -187,7 +187,10 @@ export * from './ui/ScrollSpy';
 export * from './ui/SplitPane';
 export * from './ui/VirtualList';
 
-// Re-export design system for convenience
+/**
+ * @deprecated Import directly from `@sudobility/design` instead.
+ * These re-exports will be removed in a future major version.
+ */
 export {
   variants,
   textVariants,

package/src/lib/utils.ts

@@ -2,8 +2,13 @@ import { type ClassValue, clsx } from 'clsx';
 
 /**
  * Merges class names for React Native with NativeWind.
- * Unlike web version, we don't need tailwind-merge since NativeWind
- * processes Tailwind classes at build time.
+ *
+ * Unlike the web version (`@sudobility/components`), this does NOT use
+ * `tailwind-merge` since NativeWind processes Tailwind classes at build
+ * time and handles conflict resolution internally.
+ *
+ * @param inputs - Class values to merge (strings, arrays, objects, etc.)
+ * @returns A single merged class name string
  */
 export function cn(...inputs: ClassValue[]): string {
   return clsx(inputs);

package/src/ui/Alert/Alert.tsx

@@ -3,6 +3,12 @@ import { View, Text, type ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
 import { variants as v } from '@sudobility/design';
 
+/**
+ * Props for the Alert component.
+ *
+ * Supports semantic variants (info, success, warning, attention, error)
+ * with design system styling, optional custom icons, and compound content.
+ */
 export interface AlertProps extends ViewProps {
   variant?: 'info' | 'success' | 'warning' | 'attention' | 'error';
   title?: string;
@@ -20,6 +26,7 @@ const defaultIcons: Record<string, string> = {
   error: '✕',
 };
 
+/** Alert title sub-component with bold font styling. */
 export const AlertTitle: React.FC<{
   children: React.ReactNode;
   className?: string;
@@ -27,6 +34,7 @@ export const AlertTitle: React.FC<{
   <Text className={cn('font-medium mb-1', className)}>{children}</Text>
 );
 
+/** Alert description sub-component with smaller text styling. */
 export const AlertDescription: React.FC<{
   children: React.ReactNode;
   className?: string;

package/src/ui/Button/Button.shared.ts

@@ -38,7 +38,10 @@ export interface ButtonBaseProps {
 }
 
 /**
- * Map size abbreviations to design system variant keys
+ * Map size abbreviations to design system variant keys.
+ *
+ * @param size - The abbreviated size key ('sm', 'lg', or 'default')
+ * @returns The full design system variant key ('small', 'large', or 'default')
  */
 export const mapSizeToVariantKey = (size: string | undefined): string => {
   if (!size) return 'default';
@@ -51,7 +54,15 @@ export const mapSizeToVariantKey = (size: string | undefined): string => {
 };
 
 /**
- * Get button variant class from design system
+ * Get button variant class string from the design system.
+ *
+ * Handles gradient variants, web3 variants (wallet/connect/disconnect),
+ * and standard variants with size modifiers.
+ *
+ * @param variantName - The button variant name (e.g., 'primary', 'gradient', 'wallet')
+ * @param sizeName - Optional size abbreviation ('sm' or 'lg')
+ * @param v - The design system variants object
+ * @returns A Tailwind class string from the design system
  */
 export const getButtonVariantClass = (
   variantName: string,
@@ -72,7 +83,11 @@ export const getButtonVariantClass = (
 };
 
 /**
- * Shared button state logic
+ * Shared button state logic for determining disabled and spinner visibility.
+ *
+ * @param loading - Whether the button is in a loading state
+ * @param disabled - Whether the button is explicitly disabled
+ * @returns An object with `isDisabled` and `showSpinner` booleans
  */
 export const useButtonState = (
   loading: boolean | undefined,

package/src/ui/Card/Card.tsx

@@ -3,6 +3,13 @@ import { View, Text, Pressable, type ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
 import { textVariants, getCardVariantColors } from '@sudobility/design';
 
+/**
+ * Props for the Card component.
+ *
+ * Supports multiple visual variants (bordered, elevated, info, success, etc.),
+ * configurable padding, optional icon display, and a close button for
+ * info-type variants.
+ */
 export interface CardProps extends ViewProps {
   variant?:
     | 'default'
@@ -32,6 +39,22 @@ const paddingStyles = {
   lg: 'p-8',
 };
 
+/**
+ * Card component for React Native.
+ *
+ * A versatile container with variant-based styling from the design system.
+ * Info-type variants (info, success, warning, error) support an optional
+ * icon and close button.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="elevated" padding="md">
+ *   <CardHeader title="Title" description="Subtitle" />
+ *   <CardContent><Text>Body</Text></CardContent>
+ *   <CardFooter><Button>Action</Button></CardFooter>
+ * </Card>
+ * ```
+ */
 export const Card: React.FC<CardProps> = ({
   variant = 'elevated',
   padding = 'md',
@@ -85,11 +108,18 @@ export const Card: React.FC<CardProps> = ({
   );
 };
 
+/** Props for the CardHeader sub-component. */
 interface CardHeaderProps extends ViewProps {
+  /** Card title rendered as a heading. */
   title?: string;
+  /** Card description rendered below the title. */
   description?: string;
 }
 
+/**
+ * Card header sub-component with optional title and description.
+ * Uses design system text variants for consistent typography.
+ */
 export const CardHeader: React.FC<CardHeaderProps> = ({
   title,
   description,
@@ -108,6 +138,7 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
   );
 };
 
+/** Card body content area. */
 export const CardContent: React.FC<ViewProps> = ({
   className,
   children,
@@ -120,6 +151,7 @@ export const CardContent: React.FC<ViewProps> = ({
   );
 };
 
+/** Card footer area, rendered as a horizontal row with top padding. */
 export const CardFooter: React.FC<ViewProps> = ({
   className,
   children,

package/src/ui/{ChainBadge.tsx → ChainBadge/ChainBadge.tsx}

@@ -1,9 +1,10 @@
 import React from 'react';
 import { View, Text, type ViewProps } from 'react-native';
-import { cn } from '../lib/utils';
+import { cn } from '../../lib/utils';
 
 export type ChainType = 'evm' | 'solana' | 'bitcoin' | 'cosmos';
 
+/** Badge displaying a blockchain network identifier with chain-specific color and icon */
 export interface ChainBadgeProps extends ViewProps {
   chainType: ChainType;
   size?: 'sm' | 'md' | 'lg';

package/src/ui/ChainBadge/index.ts

@@ -0,0 +1 @@
+export { ChainBadge, type ChainBadgeProps, type ChainType } from './ChainBadge';

package/src/ui/Spinner/Spinner.tsx

@@ -2,11 +2,19 @@ import React from 'react';
 import { View, ActivityIndicator, Text, type ViewProps } from 'react-native';
 import { cn } from '../../lib/utils';
 
+/**
+ * Props for the Spinner loading indicator component.
+ */
 export interface SpinnerProps extends ViewProps {
+  /** Size of the activity indicator. */
   size?: 'small' | 'default' | 'large' | 'extraLarge';
+  /** Color variant for the spinner. */
   variant?: 'default' | 'white' | 'success' | 'warning' | 'error';
+  /** Accessibility label for screen readers. */
   accessibilityLabel?: string;
+  /** Text shown below the spinner when showText is true. */
   loadingText?: string;
+  /** Whether to display loading text below the spinner. */
   showText?: boolean;
 }
 

package/src/ui/Toast/Toast.tsx

@@ -9,6 +9,7 @@ import React, {
 import { View, Text, Pressable, Animated, SafeAreaView } from 'react-native';
 import { cn } from '../../lib/utils';
 
+/** Data structure representing a single toast notification. */
 export interface ToastMessage {
   id: string;
   title?: string;
@@ -28,6 +29,7 @@ export interface ToastProps {
   onRemove: (id: string) => void;
 }
 
+/** Context value provided by ToastProvider for managing toast notifications. */
 export interface ToastContextValue {
   toasts: ToastMessage[];
   addToast: (toast: Omit<ToastMessage, 'id'>) => void;
@@ -36,6 +38,15 @@ export interface ToastContextValue {
 
 const ToastContext = createContext<ToastContextValue | undefined>(undefined);
 
+/**
+ * Hook to access the toast notification system.
+ *
+ * Must be used within a ToastProvider. Returns functions to add and remove
+ * toast notifications, plus the current list of active toasts.
+ *
+ * @returns The toast context value with addToast, removeToast, and toasts
+ * @throws Error if used outside of a ToastProvider
+ */
 export const useToast = () => {
   const context = useContext(ToastContext);
   if (!context) {

package/dist/ui/ChainBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChainBadge.d.ts","sourceRoot":"","sources":["../../src/ui/ChainBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhE,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0CD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgChD,CAAC"}