@sudobility/components-rn 1.0.1

package/src/ui/Command/Command.tsx

@@ -0,0 +1,252 @@
+import * as React from 'react';
+import { useState, useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ScrollView,
+  Modal,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface CommandItem {
+  /** Item ID */
+  id: string;
+  /** Item label */
+  label: string;
+  /** Item icon */
+  icon?: React.ReactNode;
+  /** Action handler */
+  onSelect: () => void;
+  /** Group/category */
+  group?: string;
+  /** Keyboard shortcut display */
+  shortcut?: string;
+  /** Keywords for search */
+  keywords?: string[];
+}
+
+export interface CommandProps {
+  /** Whether command palette is open */
+  isOpen: boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Available command items */
+  items: CommandItem[];
+  /** Placeholder text */
+  placeholder?: string;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Command Component
+ *
+ * Command palette for quick actions and navigation in React Native.
+ * Searchable interface with grouping support.
+ *
+ * @example
+ * ```tsx
+ * <Command
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   items={[
+ *     { id: 'new', label: 'New File', icon: <PlusIcon />, onSelect: handleNew },
+ *     { id: 'open', label: 'Open File', icon: <FolderIcon />, onSelect: handleOpen }
+ *   ]}
+ *   placeholder="Type a command or search..."
+ * />
+ * ```
+ */
+export const Command: React.FC<CommandProps> = ({
+  isOpen,
+  onClose,
+  items,
+  placeholder = 'Type a command or search...',
+  emptyMessage = 'No results found.',
+  className,
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<TextInput>(null);
+
+  // Filter items based on search query
+  const filteredItems = items.filter(item => {
+    const query = searchQuery.toLowerCase();
+    return (
+      item.label.toLowerCase().includes(query) ||
+      item.keywords?.some(keyword => keyword.toLowerCase().includes(query)) ||
+      item.group?.toLowerCase().includes(query)
+    );
+  });
+
+  // Group items
+  const groupedItems = filteredItems.reduce(
+    (groups, item) => {
+      const group = item.group || 'Commands';
+      if (!groups[group]) {
+        groups[group] = [];
+      }
+      groups[group].push(item);
+      return groups;
+    },
+    {} as Record<string, CommandItem[]>
+  );
+
+  // Reset state when closing
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery('');
+      setSelectedIndex(0);
+    }
+  }, [isOpen]);
+
+  // Focus input when opening
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [isOpen]);
+
+  // Reset selected index when search changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [searchQuery]);
+
+  const handleSelect = (item: CommandItem) => {
+    item.onSelect();
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType='fade'
+      onRequestClose={onClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        className='flex-1'
+      >
+        {/* Backdrop */}
+        <Pressable
+          className='flex-1 bg-black/50 justify-start pt-20'
+          onPress={onClose}
+        >
+          {/* Command Palette */}
+          <Pressable
+            className={cn(
+              'mx-4 bg-white dark:bg-gray-900 rounded-xl overflow-hidden',
+              'shadow-xl',
+              className
+            )}
+            onPress={e => e.stopPropagation()}
+          >
+            {/* Search Input */}
+            <View className='border-b border-gray-200 dark:border-gray-700 p-4'>
+              <View className='flex-row items-center gap-3'>
+                <View className='w-5 h-5 items-center justify-center'>
+                  <Text className='text-gray-400'>🔍</Text>
+                </View>
+                <TextInput
+                  ref={inputRef}
+                  value={searchQuery}
+                  onChangeText={setSearchQuery}
+                  placeholder={placeholder}
+                  placeholderTextColor='#9ca3af'
+                  className='flex-1 text-gray-900 dark:text-white text-base'
+                  autoCapitalize='none'
+                  autoCorrect={false}
+                  returnKeyType='search'
+                />
+              </View>
+            </View>
+
+            {/* Results */}
+            <ScrollView
+              className='max-h-96'
+              keyboardShouldPersistTaps='handled'
+            >
+              <View className='p-2'>
+                {Object.keys(groupedItems).length === 0 ? (
+                  <View className='px-4 py-8'>
+                    <Text className='text-sm text-gray-500 dark:text-gray-400 text-center'>
+                      {emptyMessage}
+                    </Text>
+                  </View>
+                ) : (
+                  Object.entries(groupedItems).map(
+                    ([groupName, groupItems]) => (
+                      <View key={groupName} className='mb-4'>
+                        {/* Group Header */}
+                        <Text className='px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+                          {groupName}
+                        </Text>
+
+                        {/* Group Items */}
+                        <View className='gap-1'>
+                          {groupItems.map(item => {
+                            const globalIndex = filteredItems.indexOf(item);
+                            const isSelected = globalIndex === selectedIndex;
+
+                            return (
+                              <Pressable
+                                key={item.id}
+                                onPress={() => handleSelect(item)}
+                                className={cn(
+                                  'flex-row items-center gap-3 px-3 py-2 rounded-md',
+                                  isSelected
+                                    ? 'bg-blue-50 dark:bg-blue-900/30'
+                                    : 'active:bg-gray-100 dark:active:bg-gray-800'
+                                )}
+                                accessibilityRole='button'
+                                accessibilityLabel={item.label}
+                              >
+                                {item.icon && (
+                                  <View className='w-4 h-4'>{item.icon}</View>
+                                )}
+                                <Text
+                                  className={cn(
+                                    'flex-1 text-sm',
+                                    isSelected
+                                      ? 'text-blue-700 dark:text-blue-300'
+                                      : 'text-gray-900 dark:text-white'
+                                  )}
+                                  numberOfLines={1}
+                                >
+                                  {item.label}
+                                </Text>
+                                {item.shortcut && (
+                                  <Text className='text-xs text-gray-500 dark:text-gray-400 font-mono'>
+                                    {item.shortcut}
+                                  </Text>
+                                )}
+                              </Pressable>
+                            );
+                          })}
+                        </View>
+                      </View>
+                    )
+                  )
+                )}
+              </View>
+            </ScrollView>
+
+            {/* Footer */}
+            <View className='border-t border-gray-200 dark:border-gray-700 px-4 py-2'>
+              <Text className='text-xs text-gray-500 dark:text-gray-400 text-center'>
+                Tap an item to select
+              </Text>
+            </View>
+          </Pressable>
+        </Pressable>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};

package/src/ui/Command/index.ts

@@ -0,0 +1 @@
+export * from './Command';

package/src/ui/Container/Container.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { View, Dimensions } from 'react-native';
+import { cn } from '../../lib/utils';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface ContainerProps {
+  /** Container content */
+  children: React.ReactNode;
+  /** Max width variant */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+  /** Center container horizontally */
+  center?: boolean;
+  /** Padding */
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * Container Component
+ *
+ * Responsive container with max-width constraints and horizontal centering.
+ * Useful for creating consistent page layouts and content areas.
+ *
+ * @example
+ * ```tsx
+ * <Container>
+ *   <Text>Page Content</Text>
+ * </Container>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Container size="lg" padding="lg">
+ *   <Text>Centered content with large max-width</Text>
+ * </Container>
+ * ```
+ */
+export const Container: React.FC<ContainerProps> = ({
+  children,
+  size = 'xl',
+  center = true,
+  padding = 'md',
+  className,
+}) => {
+  // Max-width configurations (for larger screens/tablets)
+  const maxWidths = {
+    sm: 384, // 24rem
+    md: 448, // 28rem
+    lg: 512, // 32rem
+    xl: 576, // 36rem
+    '2xl': 672, // 42rem
+    full: SCREEN_WIDTH,
+  };
+
+  // Padding configurations
+  const paddingClasses = {
+    none: '',
+    sm: 'px-4 py-2',
+    md: 'px-4 py-4',
+    lg: 'px-6 py-6',
+  };
+
+  const maxWidth = maxWidths[size];
+
+  return (
+    <View
+      className={cn(
+        'w-full',
+        center && 'self-center',
+        paddingClasses[padding],
+        className
+      )}
+      style={{
+        maxWidth: maxWidth < SCREEN_WIDTH ? maxWidth : undefined,
+      }}
+    >
+      {children}
+    </View>
+  );
+};

package/src/ui/Container/index.ts

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

package/src/ui/DashboardStatCard/DashboardStatCard.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface DashboardStatCardProps {
+  /** Stat title */
+  title: string;
+  /** Stat value */
+  value: string | number;
+  /** Change percentage */
+  change?: number;
+  /** Change period description */
+  changePeriod?: string;
+  /** Icon element */
+  icon?: React.ReactNode;
+  /** Color variant */
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * DashboardStatCard Component
+ *
+ * Statistics display card for dashboards.
+ * Shows value, change indicator, and optional icon.
+ *
+ * @example
+ * ```tsx
+ * <DashboardStatCard
+ *   title="Total Revenue"
+ *   value="$45,231"
+ *   change={12.5}
+ *   changePeriod="vs last month"
+ *   variant="success"
+ * />
+ * ```
+ */
+export const DashboardStatCard: React.FC<DashboardStatCardProps> = ({
+  title,
+  value,
+  change,
+  changePeriod = 'vs last period',
+  icon,
+  variant = 'default',
+  className,
+}) => {
+  const variantClasses = {
+    default: 'bg-white dark:bg-gray-900',
+    primary: 'bg-blue-50 dark:bg-blue-900/20',
+    success: 'bg-green-50 dark:bg-green-900/20',
+    warning: 'bg-yellow-50 dark:bg-yellow-900/20',
+    danger: 'bg-red-50 dark:bg-red-900/20',
+  };
+
+  const isPositive = change !== undefined && change >= 0;
+
+  return (
+    <View
+      className={cn(
+        'rounded-lg border border-gray-200 dark:border-gray-700 p-6',
+        variantClasses[variant],
+        className
+      )}
+    >
+      {/* Header */}
+      <View className='flex-row items-start justify-between mb-2'>
+        <Text className='text-sm font-medium text-gray-600 dark:text-gray-400'>
+          {title}
+        </Text>
+        {icon && (
+          <View className='text-gray-400 dark:text-gray-600'>{icon}</View>
+        )}
+      </View>
+
+      {/* Value */}
+      <Text className='text-3xl font-bold text-gray-900 dark:text-white'>
+        {value}
+      </Text>
+
+      {/* Change indicator */}
+      {change !== undefined && (
+        <View className='flex-row items-center gap-1 mt-2'>
+          <Text
+            className={cn(
+              'text-sm font-medium',
+              isPositive
+                ? 'text-green-600 dark:text-green-400'
+                : 'text-red-600 dark:text-red-400'
+            )}
+          >
+            {isPositive ? '↑' : '↓'} {Math.abs(change)}%
+          </Text>
+          <Text className='text-xs text-gray-500 dark:text-gray-400'>
+            {changePeriod}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/ui/DashboardStatCard/index.ts

@@ -0,0 +1 @@
+export * from './DashboardStatCard';

package/src/ui/DataList/DataList.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { View, Text, Pressable, FlatList } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface DataListColumn<T> {
+  /** Column key */
+  key: string;
+  /** Column label */
+  label: string;
+  /** Render cell content */
+  render?: (row: T, index: number) => React.ReactNode;
+  /** Flex value for width */
+  flex?: number;
+  /** Align content */
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface DataListProps<T> {
+  /** Table columns */
+  columns: DataListColumn<T>[];
+  /** Table data */
+  data: T[];
+  /** Row key extractor */
+  keyExtractor: (row: T, index: number) => string;
+  /** Row press handler */
+  onRowPress?: (row: T, index: number) => void;
+  /** Compact mode */
+  compact?: boolean;
+  /** Show column headers */
+  showHeader?: boolean;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Additional className */
+  className?: string;
+}
+
+/**
+ * DataList Component
+ *
+ * Mobile-friendly data list component (alternative to table).
+ * Uses FlatList for virtualization and performance.
+ *
+ * @example
+ * ```tsx
+ * <DataList
+ *   columns={[
+ *     { key: 'name', label: 'Name', flex: 2 },
+ *     { key: 'email', label: 'Email', flex: 3 },
+ *     { key: 'role', label: 'Role', flex: 1, align: 'right' }
+ *   ]}
+ *   data={users}
+ *   keyExtractor={(user) => user.id}
+ *   onRowPress={handleRowPress}
+ * />
+ * ```
+ */
+export function DataList<T extends Record<string, unknown>>({
+  columns,
+  data,
+  keyExtractor,
+  onRowPress,
+  compact = false,
+  showHeader = true,
+  emptyMessage = 'No data available',
+  className,
+}: DataListProps<T>) {
+  const alignClasses = {
+    left: 'items-start',
+    center: 'items-center',
+    right: 'items-end',
+  };
+
+  const renderHeader = () => {
+    if (!showHeader) return null;
+
+    return (
+      <View className='flex-row bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700'>
+        {columns.map(column => (
+          <View
+            key={column.key}
+            className={cn(
+              compact ? 'px-3 py-2' : 'px-4 py-3',
+              alignClasses[column.align || 'left']
+            )}
+            style={{ flex: column.flex || 1 }}
+          >
+            <Text className='text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider'>
+              {column.label}
+            </Text>
+          </View>
+        ))}
+      </View>
+    );
+  };
+
+  const renderRow = ({ item, index }: { item: T; index: number }) => {
+    const isOdd = index % 2 === 1;
+
+    return (
+      <Pressable
+        onPress={() => onRowPress?.(item, index)}
+        className={cn(
+          'flex-row border-b border-gray-200 dark:border-gray-700',
+          isOdd && 'bg-gray-50 dark:bg-gray-800/50',
+          onRowPress && 'active:bg-gray-100 dark:active:bg-gray-800'
+        )}
+        disabled={!onRowPress}
+        accessibilityRole={onRowPress ? 'button' : 'none'}
+      >
+        {columns.map(column => (
+          <View
+            key={column.key}
+            className={cn(
+              compact ? 'px-3 py-2' : 'px-4 py-3',
+              alignClasses[column.align || 'left'],
+              'justify-center'
+            )}
+            style={{ flex: column.flex || 1 }}
+          >
+            {column.render ? (
+              column.render(item, index)
+            ) : (
+              <Text
+                className='text-sm text-gray-900 dark:text-white'
+                numberOfLines={1}
+              >
+                {String(item[column.key] ?? '')}
+              </Text>
+            )}
+          </View>
+        ))}
+      </Pressable>
+    );
+  };
+
+  const renderEmpty = () => (
+    <View className='py-8 items-center'>
+      <Text className='text-sm text-gray-500 dark:text-gray-400'>
+        {emptyMessage}
+      </Text>
+    </View>
+  );
+
+  return (
+    <View className={cn('bg-white dark:bg-gray-900', className)}>
+      {renderHeader()}
+      <FlatList
+        data={data}
+        keyExtractor={keyExtractor}
+        renderItem={renderRow}
+        ListEmptyComponent={renderEmpty}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+}

package/src/ui/DataList/index.ts

@@ -0,0 +1,2 @@
+export { DataList } from './DataList';
+export type { DataListProps, DataListColumn } from './DataList';