@sudobility/components-rn 1.0.22 → 1.0.24

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/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/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"}