@sudobility/components-rn 1.0.1

package/src/ui/Masonry/index.ts

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

package/src/ui/MasterDetailLayout/MasterDetailLayout.tsx

@@ -0,0 +1,272 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  useWindowDimensions,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+/**
+ * MasterListItem - Standardized list item with selection styling
+ */
+export interface MasterListItemProps {
+  /** Whether this item is currently selected */
+  isSelected: boolean;
+  /** Press handler */
+  onPress: () => void;
+  /** Icon element to display (optional) */
+  icon?: React.ReactNode;
+  /** Main label text */
+  label: string;
+  /** Description text (optional) */
+  description?: string;
+  /** Additional className */
+  className?: string;
+}
+
+export const MasterListItem: React.FC<MasterListItemProps> = ({
+  isSelected,
+  onPress,
+  icon,
+  label,
+  description,
+  className,
+}) => {
+  return (
+    <Pressable
+      onPress={onPress}
+      className={cn(
+        'relative p-4 border-b border-gray-200 dark:border-gray-700',
+        className
+      )}
+      accessibilityRole='button'
+      accessibilityState={{ selected: isSelected }}
+    >
+      {/* Selection overlay */}
+      {isSelected && (
+        <View className='absolute inset-1 bg-blue-500/10 dark:bg-blue-400/10 rounded-lg' />
+      )}
+
+      {/* Content */}
+      <View className='relative flex-row items-start'>
+        {icon && (
+          <View
+            className={cn(
+              'mr-3 mt-0.5',
+              isSelected
+                ? 'text-blue-600 dark:text-blue-400'
+                : 'text-gray-500 dark:text-gray-400'
+            )}
+          >
+            {icon}
+          </View>
+        )}
+        <View className='flex-1'>
+          <Text
+            className={cn(
+              'font-medium',
+              isSelected
+                ? 'text-blue-600 dark:text-blue-400'
+                : 'text-gray-900 dark:text-gray-100'
+            )}
+          >
+            {label}
+          </Text>
+          {description && (
+            <Text
+              className={cn(
+                'text-xs mt-0.5',
+                isSelected
+                  ? 'text-blue-500 dark:text-blue-300'
+                  : 'text-gray-500 dark:text-gray-400'
+              )}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+export interface MasterDetailLayoutProps {
+  /** Title shown above the master panel */
+  masterTitle?: string;
+  /** Subtitle shown below master title */
+  masterSubtitle?: string;
+  /** Text shown in the back button on mobile */
+  backButtonText?: string;
+  /** Content for the master panel */
+  masterContent: React.ReactNode;
+  /** Content for the detail panel */
+  detailContent: React.ReactNode;
+  /** Title for the detail panel */
+  detailTitle?: string;
+  /** Current mobile view state */
+  mobileView?: 'navigation' | 'content';
+  /** Callback when user wants to switch to navigation view */
+  onBackToNavigation?: () => void;
+  /** Custom class for master panel */
+  masterClassName?: string;
+  /** Custom class for detail panel */
+  detailClassName?: string;
+  /** Width of master panel on tablet (default: 320) */
+  masterWidth?: number;
+  /** Breakpoint for tablet layout (default: 768) */
+  tabletBreakpoint?: number;
+}
+
+/**
+ * MasterDetailLayout Component
+ *
+ * A responsive master-detail layout for React Native.
+ * - Mobile: Toggle between master (navigation) and detail (content) views
+ * - Tablet/Desktop: Side-by-side layout
+ *
+ * @example
+ * ```tsx
+ * <MasterDetailLayout
+ *   masterTitle="Table of Contents"
+ *   masterContent={<NavigationMenu items={sections} />}
+ *   detailContent={<Article content={currentSection} />}
+ *   mobileView={view}
+ *   onBackToNavigation={() => setView('navigation')}
+ * />
+ * ```
+ */
+export const MasterDetailLayout: React.FC<MasterDetailLayoutProps> = ({
+  masterTitle,
+  masterSubtitle,
+  backButtonText,
+  masterContent,
+  detailContent,
+  detailTitle,
+  mobileView = 'navigation',
+  onBackToNavigation,
+  masterClassName,
+  detailClassName,
+  masterWidth = 320,
+  tabletBreakpoint = 768,
+}) => {
+  const { width } = useWindowDimensions();
+  const isTablet = width >= tabletBreakpoint;
+
+  // Extract first part of title for back button
+  const extractFirstPart = (text: string | undefined) => {
+    if (!text) return 'Back';
+    return text.split('-')[0].trim();
+  };
+
+  const buttonText = backButtonText
+    ? extractFirstPart(backButtonText)
+    : masterTitle
+      ? extractFirstPart(masterTitle)
+      : 'Back';
+
+  // Tablet/Desktop: Side-by-side layout
+  if (isTablet) {
+    return (
+      <View className='flex-1 flex-row gap-8 p-4'>
+        {/* Master Panel */}
+        <View style={{ width: masterWidth }}>
+          {masterTitle && (
+            <Text className='text-lg font-semibold text-gray-900 dark:text-white mb-4'>
+              {masterTitle}
+            </Text>
+          )}
+          {masterSubtitle && (
+            <Text className='text-sm text-gray-600 dark:text-gray-400 mb-6'>
+              {masterSubtitle}
+            </Text>
+          )}
+          <View
+            className={cn(
+              'bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700',
+              masterClassName
+            )}
+          >
+            <ScrollView>{masterContent}</ScrollView>
+          </View>
+        </View>
+
+        {/* Detail Panel */}
+        <View className='flex-1'>
+          <View
+            className={cn(
+              'bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6',
+              detailClassName
+            )}
+          >
+            {detailTitle && (
+              <Text className='text-2xl font-bold text-gray-900 dark:text-white mb-6'>
+                {detailTitle}
+              </Text>
+            )}
+            <ScrollView>{detailContent}</ScrollView>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  // Mobile: Toggle between views
+  return (
+    <View className='flex-1'>
+      {/* Mobile Navigation View */}
+      {mobileView === 'navigation' && (
+        <View className='flex-1 bg-white dark:bg-gray-800 p-6'>
+          {masterTitle && (
+            <Text className='text-xl font-semibold text-gray-900 dark:text-white mb-4'>
+              {masterTitle}
+            </Text>
+          )}
+          {masterSubtitle && (
+            <Text className='text-sm text-gray-600 dark:text-gray-400 mb-6'>
+              {masterSubtitle}
+            </Text>
+          )}
+          <View className={masterClassName}>
+            <ScrollView>{masterContent}</ScrollView>
+          </View>
+        </View>
+      )}
+
+      {/* Mobile Content View */}
+      {mobileView === 'content' && (
+        <View className='flex-1 p-4'>
+          {/* Back button */}
+          {onBackToNavigation && (
+            <Pressable
+              onPress={onBackToNavigation}
+              className='mb-4 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 self-start'
+              accessibilityRole='button'
+              accessibilityLabel={`Back to ${buttonText}`}
+            >
+              <Text className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                ← {buttonText}
+              </Text>
+            </Pressable>
+          )}
+
+          {/* Detail content */}
+          <View
+            className={cn(
+              'flex-1 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6',
+              detailClassName
+            )}
+          >
+            {detailTitle && (
+              <Text className='text-2xl font-bold text-gray-900 dark:text-white mb-6'>
+                {detailTitle}
+              </Text>
+            )}
+            <ScrollView>{detailContent}</ScrollView>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/ui/MasterDetailLayout/index.ts

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

package/src/ui/Modal/Modal.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  Modal as RNModal,
+  Pressable,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ModalProps {
+  /** Whether the modal is visible */
+  isOpen: boolean;
+  /** Callback when modal should close */
+  onClose: () => void;
+  /** Modal title */
+  title?: string;
+  /** Size variant */
+  size?: 'small' | 'medium' | 'large' | 'fullWidth';
+  /** Show close button */
+  showCloseButton?: boolean;
+  /** Close when pressing backdrop */
+  closeOnOverlayClick?: boolean;
+  /** Modal content */
+  children: React.ReactNode;
+  /** Additional className for the content */
+  className?: string;
+}
+
+/**
+ * Modal Component
+ *
+ * Modal dialog for displaying content in an overlay.
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ * >
+ *   <ModalContent>
+ *     <Text>Are you sure you want to proceed?</Text>
+ *   </ModalContent>
+ *   <ModalFooter>
+ *     <Button onPress={() => setIsOpen(false)}>Cancel</Button>
+ *     <Button variant="primary" onPress={handleConfirm}>Confirm</Button>
+ *   </ModalFooter>
+ * </Modal>
+ * ```
+ */
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  size = 'medium',
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  children,
+  className,
+}) => {
+  // Size configurations
+  const sizeClasses = {
+    small: 'w-72',
+    medium: 'w-80',
+    large: 'w-96',
+    fullWidth: 'w-full mx-4',
+  };
+
+  const handleOverlayPress = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
+
+  return (
+    <RNModal
+      visible={isOpen}
+      animationType='fade'
+      transparent
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        className='flex-1'
+      >
+        <Pressable
+          onPress={handleOverlayPress}
+          className='flex-1 justify-center items-center bg-black/50'
+        >
+          <Pressable
+            onPress={e => e.stopPropagation()}
+            className={cn(
+              'bg-white dark:bg-gray-800 rounded-xl shadow-xl max-h-[80%]',
+              sizeClasses[size],
+              className
+            )}
+          >
+            {/* Header */}
+            {(title || showCloseButton) && (
+              <View className='flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700'>
+                {title && (
+                  <Text className='text-lg font-semibold text-gray-900 dark:text-white flex-1'>
+                    {title}
+                  </Text>
+                )}
+                {showCloseButton && (
+                  <Pressable
+                    onPress={onClose}
+                    className='p-1 -mr-1 rounded-full'
+                    accessibilityRole='button'
+                    accessibilityLabel='Close modal'
+                  >
+                    <Text className='text-xl text-gray-500 dark:text-gray-400'>
+                      ✕
+                    </Text>
+                  </Pressable>
+                )}
+              </View>
+            )}
+
+            {/* Content */}
+            <ScrollView bounces={false}>{children}</ScrollView>
+          </Pressable>
+        </Pressable>
+      </KeyboardAvoidingView>
+    </RNModal>
+  );
+};
+
+export interface ModalHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ModalHeader - Header section of the modal
+ */
+export const ModalHeader: React.FC<ModalHeaderProps> = ({
+  children,
+  className,
+}) => (
+  <View
+    className={cn(
+      'px-4 py-3 border-b border-gray-200 dark:border-gray-700',
+      className
+    )}
+  >
+    {children}
+  </View>
+);
+
+export interface ModalContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ModalContent - Body section of the modal
+ */
+export const ModalContent: React.FC<ModalContentProps> = ({
+  children,
+  className,
+}) => <View className={cn('px-4 py-4', className)}>{children}</View>;
+
+export interface ModalFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ModalFooter - Footer section of the modal
+ */
+export const ModalFooter: React.FC<ModalFooterProps> = ({
+  children,
+  className,
+}) => (
+  <View
+    className={cn(
+      'flex flex-row items-center justify-end gap-2 px-4 py-3 border-t border-gray-200 dark:border-gray-700',
+      className
+    )}
+  >
+    {children}
+  </View>
+);

package/src/ui/Modal/index.ts

@@ -0,0 +1,7 @@
+export { Modal, ModalHeader, ModalContent, ModalFooter } from './Modal';
+export type {
+  ModalProps,
+  ModalHeaderProps,
+  ModalContentProps,
+  ModalFooterProps,
+} from './Modal';