@sudobility/components-rn 1.0.1

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@sudobility/components-rn",
+  "version": "1.0.1",
+  "description": "React Native UI components and design system - Ported from @sudobility/components",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "react-native": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "build:packages": "npm run build --workspaces --if-present",
+    "build:all": "npm run build && npm run build:packages",
+    "dev": "vite build --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "test": "jest --passWithNoTests",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "components",
+    "ui",
+    "design-system",
+    "typescript",
+    "nativewind",
+    "tailwind"
+  ],
+  "author": "Sudobility",
+  "peerDependencies": {
+    "@sudobility/design": "^1.1.0",
+    "nativewind": ">=4.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@sudobility/design": "^1.1.11",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.3.0",
+    "@types/react-native": "^0.73.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "eslint": "^9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "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",
+    "react": "^18.3.0",
+    "react-native": "^0.76.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sudobility/components-rn.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sudobility/components-rn/issues"
+  },
+  "homepage": "https://github.com/sudobility/components-rn#readme",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "license": "MIT"
+}

package/src/index.ts

@@ -0,0 +1,194 @@
+/**
+ * @sudobility/components-rn
+ * React Native UI component library for Sudobility
+ */
+
+// Utilities
+export { cn } from './lib/utils';
+
+// UI Components - Core
+export * from './ui/Button';
+export * from './ui/Card';
+export * from './ui/Input';
+export * from './ui/Spinner';
+export * from './ui/Alert';
+export * from './ui/ActionButton';
+
+// UI Components - Layout
+export * from './ui/Box';
+export * from './ui/Flex';
+export * from './ui/Stack';
+export * from './ui/Divider';
+export * from './ui/Separator';
+export * from './ui/Container';
+export * from './ui/Center';
+export * from './ui/Spacer';
+export * from './ui/Grid';
+
+// UI Components - Form
+export * from './ui/Label';
+export * from './ui/TextArea';
+export * from './ui/Checkbox';
+export * from './ui/Switch';
+export * from './ui/HelperText';
+export * from './ui/Select';
+export * from './ui/SearchInput';
+export * from './ui/NumberInput';
+
+// UI Components - Typography
+export * from './ui/Text';
+export * from './ui/Heading';
+export * from './ui/Code';
+export * from './ui/TruncatedText';
+
+// UI Components - Display
+export * from './ui/Badge';
+export * from './ui/Avatar';
+export * from './ui/Skeleton';
+export * from './ui/List';
+export * from './ui/IconText';
+export * from './ui/FormattedNumber';
+export * from './ui/InfoBox';
+
+// UI Components - Feedback
+export * from './ui/Progress';
+export * from './ui/Modal';
+export * from './ui/Toast';
+export * from './ui/LoadingOverlay';
+export * from './ui/LoadingDots';
+export * from './ui/Backdrop';
+
+// UI Components - Overlay
+export * from './ui/Sheet';
+export * from './ui/Tooltip';
+export * from './ui/Dialog';
+export * from './ui/Popover';
+
+// UI Components - Navigation
+export * from './ui/Tabs';
+export * from './ui/Link';
+export * from './ui/Breadcrumb';
+export * from './ui/Pagination';
+export * from './ui/SettingsList';
+export * from './ui/NavigationList';
+
+// UI Components - Patterns
+export * from './ui/Dropdown';
+export * from './ui/AspectRatio';
+export * from './ui/QuickActions';
+export * from './ui/EmptyState';
+
+// UI Components - Data & Selection
+export * from './ui/Calendar';
+export * from './ui/DataList';
+export * from './ui/MultiSelect';
+
+// UI Components - Progress
+export * from './ui/ProgressCircle';
+
+// UI Components - Layout & Structure
+export * from './ui/SideNav';
+export * from './ui/SectionHeader';
+export * from './ui/PageContainer';
+export * from './ui/FloatingPanel';
+
+// UI Components - Form (Advanced)
+export * from './ui/PhoneInput';
+export * from './ui/TimePicker';
+export * from './ui/Combobox';
+
+// UI Components - Data Display
+export * from './ui/TreeView';
+export * from './ui/AddressLink';
+export * from './ui/CodeDisplay';
+
+// UI Components - Form (Date/Time)
+export * from './ui/DateInput';
+export * from './ui/DateTimePicker';
+
+// UI Components - Advanced
+export * from './ui/InfiniteScroll';
+export * from './ui/ExternalLink';
+export * from './ui/TextInputModal';
+export * from './ui/FormAlerts';
+export * from './ui/ScrollArea';
+
+// UI Components - Badges & Labels
+export * from './ui/SectionBadge';
+export * from './ui/ChainBadge';
+
+// UI Components - List Items
+export * from './ui/ListItemWithAction';
+
+// UI Components - Overlays & Modals
+export * from './ui/Overlay';
+
+// UI Components - Transfer & Selection
+export * from './ui/TransferList';
+
+// UI Components - File & Media
+export * from './ui/FileInput';
+
+// UI Components - Branding
+export * from './ui/Logo';
+
+// UI Components - Animation
+export * from './ui/AnimatedCounter';
+export * from './ui/AnimatedSection';
+
+// UI Components - Layout (Advanced)
+export * from './ui/Masonry';
+
+// UI Components - Icons
+export * from './ui/IconContainer';
+export * from './ui/GradientIconContainer';
+
+// UI Components - Headers
+export * from './ui/PageSectionHeader';
+
+// UI Components - Accessibility
+export * from './ui/VisuallyHidden';
+
+// UI Components - Navigation (Additional)
+export * from './ui/BreadcrumbNav';
+
+// UI Components - Display (Additional)
+export * from './ui/Kbd';
+export * from './ui/Table';
+
+// UI Components - Command Palette
+export * from './ui/Command';
+
+// UI Components - Layout
+export * from './ui/MasterDetailLayout';
+export * from './ui/PageHeader';
+export * from './ui/StandardPageLayout';
+export * from './ui/StepList';
+
+// UI Components - Features
+export * from './ui/FeatureCard';
+export * from './ui/FeatureGrid';
+export * from './ui/CTASection';
+export * from './ui/PromotionalBanner';
+export * from './ui/CollapsibleSection';
+
+// UI Components - Stats & Data Display
+export * from './ui/DashboardStatCard';
+export * from './ui/StatDisplay';
+export * from './ui/KeyValuePair';
+
+// UI Components - Smart Navigation
+export * from './ui/SmartLink';
+export * from './ui/ScrollSpy';
+
+// UI Components - Advanced Layout
+export * from './ui/SplitPane';
+export * from './ui/VirtualList';
+
+// Re-export design system for convenience
+export {
+  variants,
+  textVariants,
+  designTokens,
+  colors,
+} from '@sudobility/design';

package/src/lib/utils.ts

@@ -0,0 +1,10 @@
+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.
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return clsx(inputs);
+}

package/src/nativewind-env.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="nativewind/types" />
+
+// NativeWind extends React Native components with className prop
+// This declaration file provides TypeScript support for className on RN components
+
+import 'react-native';
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+  interface TouchableHighlightProps {
+    className?: string;
+  }
+  interface TouchableWithoutFeedbackProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface FlatListProps<_T> {
+    className?: string;
+  }
+  interface SectionListProps<_T, _S> {
+    className?: string;
+  }
+  interface ActivityIndicatorProps {
+    className?: string;
+  }
+  interface SwitchProps {
+    className?: string;
+  }
+  interface SafeAreaViewProps {
+    className?: string;
+  }
+  interface KeyboardAvoidingViewProps {
+    className?: string;
+  }
+  interface ModalProps {
+    className?: string;
+  }
+}

package/src/ui/ActionButton/ActionButton.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { Button, type ButtonProps } from '../Button';
+import { Spinner } from '../Spinner';
+
+export interface ActionButtonProps extends Omit<ButtonProps, 'children'> {
+  /** Button text */
+  children: React.ReactNode;
+  /** Loading state */
+  isLoading?: boolean;
+  /** Text to show when loading (defaults to "Loading...") */
+  loadingText?: string;
+  /** Whether to show spinner icon when loading */
+  showSpinner?: boolean;
+}
+
+/**
+ * ActionButton Component
+ *
+ * Enhanced Button component with built-in loading state management.
+ * Automatically shows loading text/spinner and disables interaction when loading.
+ * Commonly used for form submissions, save actions, and async operations.
+ *
+ * @example
+ * ```tsx
+ * <ActionButton
+ *   onPress={handleSave}
+ *   isLoading={isSaving}
+ *   loadingText="Saving..."
+ *   variant="default"
+ * >
+ *   Save Changes
+ * </ActionButton>
+ * ```
+ */
+export const ActionButton: React.FC<ActionButtonProps> = ({
+  children,
+  isLoading = false,
+  loadingText = 'Loading...',
+  showSpinner = true,
+  disabled,
+  ...buttonProps
+}) => {
+  return (
+    <Button {...buttonProps} disabled={disabled || isLoading}>
+      {isLoading ? (
+        <View className='flex flex-row items-center gap-2'>
+          {showSpinner && <Spinner size='small' />}
+          <Text className='text-inherit'>{loadingText}</Text>
+        </View>
+      ) : (
+        children
+      )}
+    </Button>
+  );
+};

package/src/ui/ActionButton/index.ts

@@ -0,0 +1,2 @@
+export { ActionButton } from './ActionButton';
+export type { ActionButtonProps } from './ActionButton';

package/src/ui/AddressLink/AddressLink.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import { View, Text, Pressable, Linking } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface AddressLinkProps {
+  /** The blockchain address to display */
+  address: string;
+  /** Chain ID for EVM chains (positive) or Solana chains (negative) */
+  chainId?: number;
+  /** Block explorer base URL (if not using chainId) */
+  explorerUrl?: string;
+  /** Label to display before the address */
+  label?: string;
+  /** Display format: 'short' (default), 'medium', or 'full' */
+  format?: 'short' | 'medium' | 'full';
+  /** Show copy button */
+  showCopy?: boolean;
+  /** Show explorer link button */
+  showExplorer?: boolean;
+  /** Custom copy handler - receives address string */
+  onCopy?: (address: string) => Promise<void>;
+  /** Custom className */
+  className?: string;
+}
+
+/**
+ * Get block explorer URL for an address
+ */
+const getExplorerUrl = (
+  address: string,
+  chainId?: number,
+  explorerUrl?: string
+): string | null => {
+  if (explorerUrl) {
+    return `${explorerUrl}/address/${address}`;
+  }
+
+  if (!chainId) {
+    return null;
+  }
+
+  // Solana chains (negative chainIds)
+  if (chainId < 0) {
+    const cluster =
+      chainId === -101
+        ? ''
+        : chainId === -102
+          ? '?cluster=devnet'
+          : '?cluster=testnet';
+    return `https://explorer.solana.com/address/${address}${cluster}`;
+  }
+
+  // EVM chains
+  const explorerMap: Record<number, string> = {
+    1: 'https://etherscan.io',
+    11155111: 'https://sepolia.etherscan.io',
+    5: 'https://goerli.etherscan.io',
+    137: 'https://polygonscan.com',
+    80002: 'https://amoy.polygonscan.com',
+    42161: 'https://arbiscan.io',
+    421614: 'https://sepolia.arbiscan.io',
+    10: 'https://optimistic.etherscan.io',
+    11155420: 'https://sepolia-optimism.etherscan.io',
+    8453: 'https://basescan.org',
+    84532: 'https://sepolia.basescan.org',
+  };
+
+  const baseUrl = explorerMap[chainId];
+  if (!baseUrl) {
+    return null;
+  }
+
+  return `${baseUrl}/address/${address}`;
+};
+
+/**
+ * Format address based on display format
+ */
+const formatAddress = (
+  address: string,
+  format: 'short' | 'medium' | 'full'
+): string => {
+  if (format === 'full') {
+    return address;
+  }
+
+  if (format === 'medium') {
+    return `${address.substring(0, 10)}...${address.substring(address.length - 8)}`;
+  }
+
+  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+};
+
+/**
+ * AddressLink Component
+ *
+ * Displays a blockchain address with copy and block explorer link functionality.
+ * Supports both EVM chains and Solana chains.
+ *
+ * @example
+ * ```tsx
+ * <AddressLink
+ *   address="0x1234...5678"
+ *   chainId={1}
+ *   showCopy
+ *   showExplorer
+ * />
+ * ```
+ */
+export const AddressLink: React.FC<AddressLinkProps> = ({
+  address,
+  chainId,
+  explorerUrl,
+  label,
+  format = 'short',
+  showCopy = true,
+  showExplorer = true,
+  onCopy,
+  className,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const formattedAddress = formatAddress(address, format);
+  const explorerLink = getExplorerUrl(address, chainId, explorerUrl);
+
+  const handleCopy = useCallback(async () => {
+    if (!onCopy) return;
+    try {
+      await onCopy(address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Copy failed
+    }
+  }, [address, onCopy]);
+
+  const handleOpenExplorer = useCallback(() => {
+    if (explorerLink) {
+      Linking.openURL(explorerLink);
+    }
+  }, [explorerLink]);
+
+  return (
+    <View className={cn('flex-row items-center gap-2', className)}>
+      {label && (
+        <Text className='text-sm text-gray-600 dark:text-gray-400'>
+          {label}:
+        </Text>
+      )}
+
+      <Text
+        className={cn(
+          'font-mono text-sm text-gray-900 dark:text-white',
+          format === 'full' && 'flex-1'
+        )}
+        numberOfLines={format === 'full' ? undefined : 1}
+      >
+        {formattedAddress}
+      </Text>
+
+      <View className='flex-row items-center gap-1'>
+        {showCopy && onCopy && (
+          <Pressable
+            onPress={handleCopy}
+            className='p-1 rounded active:bg-gray-100 dark:active:bg-gray-800'
+            accessibilityRole='button'
+            accessibilityLabel={copied ? 'Copied!' : 'Copy address'}
+          >
+            <Text className='text-sm text-gray-500 dark:text-gray-400'>
+              {copied ? '✓' : '📋'}
+            </Text>
+          </Pressable>
+        )}
+
+        {showExplorer && explorerLink && (
+          <Pressable
+            onPress={handleOpenExplorer}
+            className='p-1 rounded active:bg-gray-100 dark:active:bg-gray-800'
+            accessibilityRole='link'
+            accessibilityLabel='View on block explorer'
+          >
+            <Text className='text-sm text-blue-600 dark:text-blue-400'>↗</Text>
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+};

package/src/ui/AddressLink/index.ts

@@ -0,0 +1,2 @@
+export { AddressLink } from './AddressLink';
+export type { AddressLinkProps } from './AddressLink';

package/src/ui/Alert/Alert.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { variants as v } from '@sudobility/design';
+
+export interface AlertProps extends ViewProps {
+  variant?: 'info' | 'success' | 'warning' | 'attention' | 'error';
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+// Default icons as simple text - can be replaced with react-native-heroicons
+const defaultIcons: Record<string, string> = {
+  info: 'ℹ️',
+  success: '✓',
+  warning: '⚠️',
+  attention: '🔔',
+  error: '✕',
+};
+
+export const AlertTitle: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => (
+  <Text className={cn('font-medium mb-1', className)}>{children}</Text>
+);
+
+export const AlertDescription: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => (
+  <Text className={cn('text-sm', className)}>{children}</Text>
+);
+
+/**
+ * Alert component for React Native
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="success" title="Success!" description="Your changes have been saved." />
+ * ```
+ */
+export const Alert: React.FC<AlertProps> = ({
+  variant = 'info',
+  title,
+  description,
+  icon,
+  children,
+  className,
+  ...props
+}) => {
+  const IconComponent = icon || (
+    <Text className='text-lg'>{defaultIcons[variant]}</Text>
+  );
+
+  const alertClass =
+    typeof v.alert[variant] === 'function' ? v.alert[variant]() : '';
+
+  return (
+    <View
+      className={cn(alertClass, 'flex-row items-start gap-3', className)}
+      accessibilityRole='alert'
+      {...props}
+    >
+      {IconComponent && <View className='flex-shrink-0'>{IconComponent}</View>}
+      <View className='flex-1'>
+        {title && <Text className='font-medium mb-1'>{title}</Text>}
+        {description && <Text className='text-sm'>{description}</Text>}
+        {children}
+      </View>
+    </View>
+  );
+};

package/src/ui/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert, AlertTitle, AlertDescription, type AlertProps } from './Alert';