@sudobility/components-rn 1.0.22 → 1.0.23

package/dist/ui/{ChainBadge.d.ts → ChainBadge/ChainBadge.d.ts}

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { ViewProps } from 'react-native';
 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/dist/ui/ChainBadge/ChainBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainBadge.d.ts","sourceRoot":"","sources":["../../../src/ui/ChainBadge/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,0FAA0F;AAC1F,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"}

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

@@ -0,0 +1,2 @@
+export { ChainBadge, type ChainBadgeProps, type ChainType } from './ChainBadge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ChainBadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/components-rn",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "React Native UI components and design system - Ported from @sudobility/components",
   "type": "module",
   "main": "dist/index.js",
@@ -61,7 +61,16 @@
     "clsx": "^2.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-flow": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.6",
     "@eslint/js": "^9.15.0",
+    "@react-native/babel-preset": "^0.84.0",
+    "@react-native/js-polyfills": "^0.84.0",
+    "@react-native/normalize-colors": "^0.84.0",
     "@sudobility/design": "^1.1.20",
     "@sudobility/types": "^1.9.54",
     "@testing-library/jest-native": "^5.4.3",
@@ -72,22 +81,24 @@
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "ajv": "^8.17.1",
+    "babel-jest": "^30.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "eslint": "^9.15.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint": "^9.38.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
     "nativewind": "^4.1.0",
-    "prettier": "^3.4.0",
+    "prettier": "^3.6.2",
     "react": "^18.3.0",
     "react-native": "^0.76.0",
-    "typescript": "^5.6.0",
+    "react-test-renderer": "18.3.1",
+    "typescript": "^5.9.3",
     "vite": "^6.0.0",
-    "vite-plugin-dts": "^4.3.0"
+    "vite-plugin-dts": "^4.5.4"
   },
   "repository": {
     "type": "git",
@@ -98,7 +109,7 @@
   },
   "homepage": "https://github.com/sudobility/components-rn#readme",
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "engines": {
     "node": ">=18.0.0"

package/src/__tests__/alert.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Alert, AlertTitle, AlertDescription } from '../ui/Alert';
+
+// Mock @sudobility/design
+jest.mock('@sudobility/design', () => ({
+  variants: {
+    alert: {
+      info: () => 'mocked-alert-info',
+      success: () => 'mocked-alert-success',
+      warning: () => 'mocked-alert-warning',
+      attention: () => 'mocked-alert-attention',
+      error: () => 'mocked-alert-error',
+    },
+  },
+}));
+
+describe('Alert', () => {
+  it('renders with title', () => {
+    render(<Alert title='Alert Title' />);
+    expect(screen.getByText('Alert Title')).toBeTruthy();
+  });
+
+  it('renders with description', () => {
+    render(<Alert description='Alert description' />);
+    expect(screen.getByText('Alert description')).toBeTruthy();
+  });
+
+  it('renders with both title and description', () => {
+    render(
+      <Alert title='Important' description='This is an important message' />
+    );
+    expect(screen.getByText('Important')).toBeTruthy();
+    expect(screen.getByText('This is an important message')).toBeTruthy();
+  });
+
+  it('has alert accessibility role', () => {
+    render(<Alert title='Alert' testID='alert-el' />);
+    const alert = screen.getByTestId('alert-el');
+    expect(alert.props.accessibilityRole).toBe('alert');
+  });
+
+  it('renders with different variants without crashing', () => {
+    const variants = [
+      'info',
+      'success',
+      'warning',
+      'attention',
+      'error',
+    ] as const;
+
+    variants.forEach(variant => {
+      const { unmount } = render(<Alert variant={variant} title={variant} />);
+      expect(screen.getByText(variant)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders default icons for each variant', () => {
+    render(<Alert variant='success' title='Success' testID='alert-icon' />);
+    const alert = screen.getByTestId('alert-icon');
+    expect(alert.props.accessibilityRole).toBe('alert');
+  });
+
+  it('renders custom icon when provided', () => {
+    render(
+      <Alert icon={<Text testID='custom-icon'>*</Text>} title='Custom Icon' />
+    );
+    expect(screen.getByTestId('custom-icon')).toBeTruthy();
+  });
+
+  it('renders children content', () => {
+    render(
+      <Alert>
+        <Text>Custom child content</Text>
+      </Alert>
+    );
+    expect(screen.getByText('Custom child content')).toBeTruthy();
+  });
+});
+
+describe('AlertTitle', () => {
+  it('renders text content', () => {
+    render(<AlertTitle>Title Text</AlertTitle>);
+    expect(screen.getByText('Title Text')).toBeTruthy();
+  });
+});
+
+describe('AlertDescription', () => {
+  it('renders text content', () => {
+    render(<AlertDescription>Description text</AlertDescription>);
+    expect(screen.getByText('Description text')).toBeTruthy();
+  });
+});

package/src/__tests__/badge.test.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Badge } from '../ui/Badge';
+
+describe('Badge', () => {
+  it('renders children text', () => {
+    render(<Badge>Active</Badge>);
+    expect(screen.getByText('Active')).toBeTruthy();
+  });
+
+  it('renders with different variants without crashing', () => {
+    const variants = [
+      'default',
+      'primary',
+      'success',
+      'warning',
+      'danger',
+      'info',
+      'purple',
+    ] as const;
+
+    variants.forEach(variant => {
+      const { unmount } = render(<Badge variant={variant}>{variant}</Badge>);
+      expect(screen.getByText(variant)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders with different sizes without crashing', () => {
+    const sizes = ['sm', 'md', 'lg'] as const;
+
+    sizes.forEach(size => {
+      const { unmount } = render(<Badge size={size}>Size {size}</Badge>);
+      expect(screen.getByText(`Size ${size}`)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders an icon when provided', () => {
+    render(
+      <Badge icon={<Text testID='badge-icon'>Star</Text>}>Featured</Badge>
+    );
+    expect(screen.getByTestId('badge-icon')).toBeTruthy();
+    expect(screen.getByText('Featured')).toBeTruthy();
+  });
+
+  it('renders a dot indicator when dot is true', () => {
+    const { toJSON } = render(<Badge dot>Pending</Badge>);
+    expect(screen.getByText('Pending')).toBeTruthy();
+    // The dot is a View element that gets rendered in the tree
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders as a pressable when onPress is provided', () => {
+    const onPress = jest.fn();
+    render(<Badge onPress={onPress}>Clickable</Badge>);
+    fireEvent.press(screen.getByRole('button'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not have button role when onPress is not provided', () => {
+    render(<Badge>Static</Badge>);
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+
+  it('renders dismiss button when dismissible', () => {
+    const onDismiss = jest.fn();
+    render(
+      <Badge dismissible onDismiss={onDismiss}>
+        Dismissable
+      </Badge>
+    );
+    const dismissButton = screen.getByLabelText('Dismiss');
+    expect(dismissButton).toBeTruthy();
+    fireEvent.press(dismissButton);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render dismiss button when not dismissible', () => {
+    render(<Badge>Not dismissable</Badge>);
+    expect(screen.queryByLabelText('Dismiss')).toBeNull();
+  });
+
+  it('displays count', () => {
+    render(<Badge count={5}>Items</Badge>);
+    expect(screen.getByText('5')).toBeTruthy();
+  });
+
+  it('displays maxCount with + when count exceeds it', () => {
+    render(
+      <Badge count={150} maxCount={99}>
+        Items
+      </Badge>
+    );
+    expect(screen.getByText('99+')).toBeTruthy();
+  });
+
+  it('displays exact count when within maxCount', () => {
+    render(
+      <Badge count={50} maxCount={99}>
+        Items
+      </Badge>
+    );
+    expect(screen.getByText('50')).toBeTruthy();
+  });
+
+  it('renders with outline style without crashing', () => {
+    render(
+      <Badge variant='primary' outline>
+        Outlined
+      </Badge>
+    );
+    expect(screen.getByText('Outlined')).toBeTruthy();
+  });
+
+  it('renders with pill shape without crashing', () => {
+    render(<Badge pill>Pill</Badge>);
+    expect(screen.getByText('Pill')).toBeTruthy();
+  });
+});

package/src/__tests__/button.test.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Button } from '../ui/Button';
+
+// Mock @sudobility/design
+jest.mock('@sudobility/design', () => ({
+  variants: {
+    button: new Proxy(
+      {},
+      {
+        get: () =>
+          new Proxy(() => 'mocked-class', {
+            get: () => () => 'mocked-class',
+          }),
+      }
+    ),
+  },
+}));
+
+describe('Button', () => {
+  it('renders with string children', () => {
+    render(<Button>Press me</Button>);
+    expect(screen.getByText('Press me')).toBeTruthy();
+  });
+
+  it('renders with custom children (non-string)', () => {
+    render(
+      <Button>
+        <Text testID='custom-child'>Custom</Text>
+      </Button>
+    );
+    expect(screen.getByTestId('custom-child')).toBeTruthy();
+  });
+
+  it('has button accessibility role', () => {
+    render(<Button>Click</Button>);
+    expect(screen.getByRole('button')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+    render(<Button onPress={onPress}>Click</Button>);
+    fireEvent.press(screen.getByRole('button'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onPress when disabled', () => {
+    const onPress = jest.fn();
+    render(
+      <Button onPress={onPress} disabled>
+        Click
+      </Button>
+    );
+    fireEvent.press(screen.getByRole('button'));
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('shows spinner when loading', () => {
+    render(<Button loading>Loading</Button>);
+    // ActivityIndicator is rendered when loading is true
+    // The button should also be disabled
+    const button = screen.getByRole('button');
+    expect(button.props.accessibilityState).toEqual({ disabled: true });
+  });
+
+  it('applies accessibility label', () => {
+    render(<Button accessibilityLabel='Submit form'>Submit</Button>);
+    const button = screen.getByRole('button');
+    expect(button.props.accessibilityLabel).toBe('Submit form');
+  });
+
+  it('sets disabled accessibility state when disabled', () => {
+    render(<Button disabled>Disabled</Button>);
+    const button = screen.getByRole('button');
+    expect(button.props.accessibilityState).toEqual({ disabled: true });
+  });
+
+  it('renders with different variants without crashing', () => {
+    const variants = [
+      'default',
+      'primary',
+      'secondary',
+      'outline',
+      'ghost',
+      'destructive',
+      'success',
+      'link',
+    ] as const;
+
+    variants.forEach(variant => {
+      const { unmount } = render(<Button variant={variant}>{variant}</Button>);
+      expect(screen.getByText(variant)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders with different sizes without crashing', () => {
+    const sizes = ['default', 'sm', 'lg', 'icon'] as const;
+
+    sizes.forEach(size => {
+      const { unmount } = render(<Button size={size}>{`Size ${size}`}</Button>);
+      expect(screen.getByText(`Size ${size}`)).toBeTruthy();
+      unmount();
+    });
+  });
+});

package/src/__tests__/card.test.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Card, CardHeader, CardContent, CardFooter } from '../ui/Card';
+
+// Mock @sudobility/design
+jest.mock('@sudobility/design', () => ({
+  textVariants: {
+    heading: { h4: () => 'mocked-heading' },
+    body: { sm: () => 'mocked-body' },
+  },
+  getCardVariantColors: () => 'mocked-card-variant',
+}));
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(
+      <Card>
+        <Text>Card content</Text>
+      </Card>
+    );
+    expect(screen.getByText('Card content')).toBeTruthy();
+  });
+
+  it('renders with different variants without crashing', () => {
+    const variants = [
+      'default',
+      'bordered',
+      'elevated',
+      'info',
+      'success',
+      'warning',
+      'error',
+      'callout',
+    ] as const;
+
+    variants.forEach(variant => {
+      const { unmount } = render(
+        <Card variant={variant}>
+          <Text>{variant}</Text>
+        </Card>
+      );
+      expect(screen.getByText(variant)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('renders icon for info-type variants', () => {
+    render(
+      <Card variant='info' icon={<Text testID='card-icon'>Icon</Text>}>
+        <Text>Info card</Text>
+      </Card>
+    );
+    expect(screen.getByTestId('card-icon')).toBeTruthy();
+    expect(screen.getByText('Info card')).toBeTruthy();
+  });
+
+  it('renders close button for info-type variants with onClose', () => {
+    const onClose = jest.fn();
+    render(
+      <Card variant='error' onClose={onClose}>
+        <Text>Error card</Text>
+      </Card>
+    );
+    const closeButton = screen.getByLabelText('Close');
+    expect(closeButton).toBeTruthy();
+    fireEvent.press(closeButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render icon/close layout for non-info variants', () => {
+    render(
+      <Card variant='elevated'>
+        <Text>Plain card</Text>
+      </Card>
+    );
+    expect(screen.queryByLabelText('Close')).toBeNull();
+  });
+});
+
+describe('CardHeader', () => {
+  it('renders title', () => {
+    render(<CardHeader title='Card Title' />);
+    expect(screen.getByText('Card Title')).toBeTruthy();
+  });
+
+  it('renders description', () => {
+    render(<CardHeader description='Card description' />);
+    expect(screen.getByText('Card description')).toBeTruthy();
+  });
+
+  it('renders title and description together', () => {
+    render(<CardHeader title='Title' description='Description' />);
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.getByText('Description')).toBeTruthy();
+  });
+
+  it('renders children alongside title', () => {
+    render(
+      <CardHeader title='Title'>
+        <Text>Extra content</Text>
+      </CardHeader>
+    );
+    expect(screen.getByText('Title')).toBeTruthy();
+    expect(screen.getByText('Extra content')).toBeTruthy();
+  });
+});
+
+describe('CardContent', () => {
+  it('renders children', () => {
+    render(
+      <CardContent>
+        <Text>Body content</Text>
+      </CardContent>
+    );
+    expect(screen.getByText('Body content')).toBeTruthy();
+  });
+});
+
+describe('CardFooter', () => {
+  it('renders children', () => {
+    render(
+      <CardFooter>
+        <Text>Footer content</Text>
+      </CardFooter>
+    );
+    expect(screen.getByText('Footer content')).toBeTruthy();
+  });
+});
+
+describe('Card composition', () => {
+  it('renders full card with all sub-components', () => {
+    render(
+      <Card variant='elevated'>
+        <CardHeader title='My Card' description='A description' />
+        <CardContent>
+          <Text>Main body</Text>
+        </CardContent>
+        <CardFooter>
+          <Text>Action area</Text>
+        </CardFooter>
+      </Card>
+    );
+    expect(screen.getByText('My Card')).toBeTruthy();
+    expect(screen.getByText('A description')).toBeTruthy();
+    expect(screen.getByText('Main body')).toBeTruthy();
+    expect(screen.getByText('Action area')).toBeTruthy();
+  });
+});

package/src/__tests__/dialog.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { Dialog } from '../ui/Dialog';
+
+describe('Dialog', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: jest.fn(),
+    children: <Text>Dialog content</Text>,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders children when open', () => {
+    render(<Dialog {...defaultProps} />);
+    expect(screen.getByText('Dialog content')).toBeTruthy();
+  });
+
+  it('renders close button by default when onClose is provided', () => {
+    render(<Dialog {...defaultProps} />);
+    const closeButton = screen.getByLabelText('Close dialog');
+    expect(closeButton).toBeTruthy();
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const onClose = jest.fn();
+    render(
+      <Dialog isOpen={true} onClose={onClose}>
+        <Text>Content</Text>
+      </Dialog>
+    );
+    fireEvent.press(screen.getByLabelText('Close dialog'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('hides close button when showCloseButton is false', () => {
+    render(<Dialog {...defaultProps} showCloseButton={false} />);
+    expect(screen.queryByLabelText('Close dialog')).toBeNull();
+  });
+
+  it('renders with different sizes without crashing', () => {
+    const sizes = ['sm', 'md', 'lg', 'xl', 'full'] as const;
+
+    sizes.forEach(size => {
+      const { unmount } = render(
+        <Dialog {...defaultProps} size={size}>
+          <Text>{size}</Text>
+        </Dialog>
+      );
+      expect(screen.getByText(size)).toBeTruthy();
+      unmount();
+    });
+  });
+
+  it('does not render close button when onClose is not provided', () => {
+    render(
+      <Dialog isOpen={true}>
+        <Text>No close</Text>
+      </Dialog>
+    );
+    expect(screen.queryByLabelText('Close dialog')).toBeNull();
+  });
+
+  it('renders without close button when showCloseButton is false', () => {
+    render(
+      <Dialog {...defaultProps} showCloseButton={false}>
+        <Text>No X button</Text>
+      </Dialog>
+    );
+    expect(screen.getByText('No X button')).toBeTruthy();
+    expect(screen.queryByLabelText('Close dialog')).toBeNull();
+  });
+});