@umituz/react-native-design-system 1.7.1 → 1.7.3

package/src/presentation/atoms/picker/types/index.ts

@@ -1,40 +0,0 @@
-import { ViewStyle, TextStyle } from 'react-native';
-import { AtomicIconColor } from '../../AtomicIcon';
-
-/**
- * Picker option item
- *
- * icon: Any MaterialIcons name
- * @see https://fonts.google.com/icons
- */
-export interface PickerOption {
-  label: string;
-  value: string;
-  icon?: string; // MaterialIcons name
-  disabled?: boolean;
-  description?: string;
-  testID?: string;
-}
-
-export type PickerSize = 'sm' | 'md' | 'lg';
-
-export interface AtomicPickerProps {
-  value: string | string[];
-  onChange: (value: string | string[]) => void;
-  options: PickerOption[];
-  label?: string;
-  placeholder?: string;
-  error?: string;
-  disabled?: boolean;
-  multiple?: boolean;
-  searchable?: boolean;
-  clearable?: boolean;
-  autoClose?: boolean;
-  color?: AtomicIconColor;
-  size?: PickerSize;
-  modalTitle?: string;
-  emptyMessage?: string;
-  style?: ViewStyle | ViewStyle[];
-  labelStyle?: TextStyle | TextStyle[];
-  testID?: string;
-}

package/src/presentation/atoms/touchable/styles/touchableStyles.ts

@@ -1,62 +0,0 @@
-import { ViewStyle } from 'react-native';
-import { FeedbackStrength } from '../types';
-
-/**
- * Get opacity value based on feedback strength
- */
-export const getOpacityValue = (strength: FeedbackStrength): number => {
-  switch (strength) {
-    case 'subtle':
-      return 0.8;
-    case 'normal':
-      return 0.6;
-    case 'strong':
-      return 0.4;
-    default:
-      return 0.6;
-  }
-};
-
-/**
- * Get base touchable container style
- * Ensures minimum touch target size (iOS HIG: 48x48)
- */
-export const getTouchableContainerStyle = (): ViewStyle => ({
-  minWidth: 48,
-  minHeight: 48,
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-/**
- * Get disabled touchable style
- */
-export const getDisabledStyle = (): ViewStyle => ({
-  opacity: 0.5,
-});
-
-/**
- * Convert number to HitSlop object
- * If hitSlop is a number, apply it to all sides
- */
-export const normalizeHitSlop = (
-  hitSlop: number | { top?: number; bottom?: number; left?: number; right?: number } | undefined
-): { top: number; bottom: number; left: number; right: number } | undefined => {
-  if (hitSlop === undefined) return undefined;
-
-  if (typeof hitSlop === 'number') {
-    return {
-      top: hitSlop,
-      bottom: hitSlop,
-      left: hitSlop,
-      right: hitSlop,
-    };
-  }
-
-  return {
-    top: hitSlop.top || 0,
-    bottom: hitSlop.bottom || 0,
-    left: hitSlop.left || 0,
-    right: hitSlop.right || 0,
-  };
-};

package/src/presentation/atoms/touchable/types/index.ts

@@ -1,155 +0,0 @@
-import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
-
-/**
- * Touchable feedback variant
- * - opacity: iOS-style opacity feedback (default)
- * - highlight: Android-style highlight feedback
- * - ripple: Material Design ripple effect (Android only)
- * - none: No visual feedback
- */
-export type TouchableFeedback = 'opacity' | 'highlight' | 'ripple' | 'none';
-
-/**
- * Feedback strength for visual feedback
- * - subtle: Light feedback (0.8 opacity)
- * - normal: Standard feedback (0.6 opacity)
- * - strong: Strong feedback (0.4 opacity)
- */
-export type FeedbackStrength = 'subtle' | 'normal' | 'strong';
-
-/**
- * Hit slop configuration
- * Extends the touchable area beyond the component's bounds
- */
-export interface HitSlop {
-  top?: number;
-  bottom?: number;
-  left?: number;
-  right?: number;
-}
-
-/**
- * AtomicTouchable component props
- *
- * A unified touchable wrapper with consistent behavior across platforms.
- * Uses React Native's Pressable API for modern, accessible touch handling.
- *
- * @example
- * ```tsx
- * <AtomicTouchable
- *   onPress={handlePress}
- *   feedback="opacity"
- *   strength="normal"
- *   disabled={isDisabled}
- *   hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
- *   style={styles.touchable}
- * >
- *   <AtomicText>Press Me</AtomicText>
- * </AtomicTouchable>
- * ```
- */
-export interface AtomicTouchableProps {
-  /**
-   * Content to render inside the touchable
-   */
-  children: React.ReactNode;
-
-  /**
-   * Callback fired when the touchable is pressed
-   */
-  onPress?: (event: GestureResponderEvent) => void;
-
-  /**
-   * Callback fired when press starts (finger down)
-   */
-  onPressIn?: (event: GestureResponderEvent) => void;
-
-  /**
-   * Callback fired when press ends (finger up)
-   */
-  onPressOut?: (event: GestureResponderEvent) => void;
-
-  /**
-   * Callback fired on long press (500ms default)
-   */
-  onLongPress?: (event: GestureResponderEvent) => void;
-
-  /**
-   * Feedback variant
-   * @default 'opacity'
-   */
-  feedback?: TouchableFeedback;
-
-  /**
-   * Feedback strength
-   * @default 'normal'
-   */
-  strength?: FeedbackStrength;
-
-  /**
-   * Disable the touchable
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Hit slop - extends touchable area
-   * Useful for small touch targets
-   * @default undefined
-   */
-  hitSlop?: HitSlop | number;
-
-  /**
-   * Custom style for the touchable container
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Style applied when pressed
-   */
-  pressedStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Style applied when disabled
-   */
-  disabledStyle?: StyleProp<ViewStyle>;
-
-  /**
-   * Accessibility label for screen readers
-   */
-  accessibilityLabel?: string;
-
-  /**
-   * Accessibility hint for screen readers
-   */
-  accessibilityHint?: string;
-
-  /**
-   * Accessibility role
-   * @default 'button'
-   */
-  accessibilityRole?: 'button' | 'link' | 'none';
-
-  /**
-   * Test ID for E2E testing
-   */
-  testID?: string;
-
-  /**
-   * Delay before onLongPress is triggered (ms)
-   * @default 500
-   */
-  delayLongPress?: number;
-
-  /**
-   * Ripple color (Android only, for 'ripple' feedback)
-   * @default theme primary color with alpha
-   */
-  rippleColor?: string;
-
-  /**
-   * Border radius for ripple effect (Android only)
-   * @default 0
-   */
-  rippleRadius?: number;
-}

package/src/presentation/hooks/useAppDesignTokens.ts

@@ -1,13 +0,0 @@
-/**
- * useAppDesignTokens Hook - MOVED TO @umituz/react-native-theme
- *
- * This hook has been moved to @umituz/react-native-theme package.
- * Re-exported here for backward compatibility.
- *
- * @deprecated Import from @umituz/react-native-theme instead
- * ```typescript
- * import { useAppDesignTokens } from '@umituz/react-native-theme';
- * ```
- */
-
-export { useAppDesignTokens } from '@umituz/react-native-theme';

package/src/presentation/hooks/useResponsive.ts

@@ -1,180 +0,0 @@
-/**
- * useResponsive Hook
- *
- * React Hook for accessing responsive utilities with real-time dimension updates
- * and safe area insets integration.
- *
- * Usage:
- * ```tsx
- * const { logoSize, inputHeight, fabPosition, isSmallDevice } = useResponsive();
- * ```
- */
-
-import { useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {
-  getResponsiveLogoSize,
-  getResponsiveInputHeight,
-  getResponsiveHorizontalPadding,
-  getResponsiveBottomPosition,
-  getResponsiveFABPosition,
-  getResponsiveModalMaxHeight,
-  getResponsiveMinModalHeight,
-  getResponsiveIconContainerSize,
-  getResponsiveGridColumns,
-  getResponsiveMaxWidth,
-  getResponsiveFontSize,
-  isSmallPhone,
-  isTablet,
-  isLandscape,
-  getDeviceType,
-  getMinTouchTargetSize,
-  getSpacingMultiplier,
-  getOnboardingIconMarginTop,
-  getOnboardingIconMarginBottom,
-  getOnboardingTitleMarginBottom,
-  getOnboardingTextPadding,
-  getOnboardingDescriptionMarginTop,
-  getOnboardingIconSize,
-  getFormBottomPadding,
-  getInputIconSize,
-  getFormContentWidth,
-  getFormElementSpacing,
-  DeviceType,
-} from '../utils/responsive';
-
-export interface UseResponsiveReturn {
-  // Device info
-  width: number;
-  height: number;
-  isSmallDevice: boolean;
-  isTabletDevice: boolean;
-  isLandscapeMode: boolean;
-  deviceType: DeviceType;
-
-  // Safe area insets
-  insets: {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-  };
-
-  // Responsive sizes
-  logoSize: number;
-  inputHeight: number;
-  iconContainerSize: number;
-  maxContentWidth: number;
-  minTouchTarget: number;
-
-  // Responsive positioning
-  horizontalPadding: number;
-  bottomPosition: number;
-  fabPosition: { bottom: number; right: number };
-
-  // Responsive layout
-  modalMaxHeight: string;
-  modalMinHeight: number;
-  gridColumns: number;
-  spacingMultiplier: number;
-
-  // Onboarding-specific spacing (pre-calculated, device-aware)
-  onboardingIconMarginTop: number;
-  onboardingIconMarginBottom: number;
-  onboardingIconSize: number;
-  onboardingTitleMarginBottom: number;
-  onboardingTextPadding: number;
-  onboardingDescriptionMarginTop: number;
-
-  // Form-specific spacing (pre-calculated, universal)
-  formBottomPadding: number;
-  inputIconSize: number;
-  formContentWidth: number | undefined;
-  formElementSpacing: number;
-
-  // Utility functions
-  getLogoSize: (baseSize?: number) => number;
-  getInputHeight: (baseHeight?: number) => number;
-  getIconSize: (baseSize?: number) => number;
-  getMaxWidth: (baseWidth?: number) => number;
-  getFontSize: (baseFontSize: number) => number;
-  getGridCols: (mobile?: number, tablet?: number) => number;
-}
-
-/**
- * Hook for responsive design utilities
- * Automatically updates when screen dimensions or orientation changes
- */
-export const useResponsive = (): UseResponsiveReturn => {
-  const { width, height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-
-  return {
-    // Device info
-    width,
-    height,
-    isSmallDevice: isSmallPhone(),
-    isTabletDevice: isTablet(),
-    isLandscapeMode: isLandscape(),
-    deviceType: getDeviceType(),
-
-    // Safe area insets
-    insets,
-
-    // Responsive sizes (with default values)
-    logoSize: getResponsiveLogoSize(),
-    inputHeight: getResponsiveInputHeight(),
-    iconContainerSize: getResponsiveIconContainerSize(),
-    maxContentWidth: getResponsiveMaxWidth(),
-    minTouchTarget: getMinTouchTargetSize(),
-
-    // Responsive positioning
-    horizontalPadding: getResponsiveHorizontalPadding(16, insets),
-    bottomPosition: getResponsiveBottomPosition(32, insets),
-    fabPosition: getResponsiveFABPosition(insets),
-
-    // Responsive layout
-    modalMaxHeight: getResponsiveModalMaxHeight(),
-    modalMinHeight: getResponsiveMinModalHeight(),
-    gridColumns: getResponsiveGridColumns(),
-    spacingMultiplier: getSpacingMultiplier(),
-
-    // Onboarding-specific spacing (pre-calculated, no component calculations)
-    onboardingIconMarginTop: getOnboardingIconMarginTop(),
-    onboardingIconMarginBottom: getOnboardingIconMarginBottom(),
-    onboardingIconSize: getOnboardingIconSize(),
-    onboardingTitleMarginBottom: getOnboardingTitleMarginBottom(),
-    onboardingTextPadding: getOnboardingTextPadding(),
-    onboardingDescriptionMarginTop: getOnboardingDescriptionMarginTop(),
-
-    // Form-specific spacing (pre-calculated, universal)
-    formBottomPadding: getFormBottomPadding(insets.bottom),
-    inputIconSize: getInputIconSize(),
-    formContentWidth: getFormContentWidth(),
-    formElementSpacing: getFormElementSpacing(),
-
-    // Utility functions (allow custom base values)
-    getLogoSize: (baseSize) => getResponsiveLogoSize(baseSize),
-    getInputHeight: (baseHeight) => getResponsiveInputHeight(baseHeight),
-    getIconSize: (baseSize) => getResponsiveIconContainerSize(baseSize),
-    getMaxWidth: (baseWidth) => getResponsiveMaxWidth(baseWidth),
-    getFontSize: (baseFontSize) => getResponsiveFontSize(baseFontSize),
-    getGridCols: (mobile, tablet) => getResponsiveGridColumns(mobile, tablet),
-  };
-};
-
-/**
- * Shorthand hook for just responsive sizes
- */
-export const useResponsiveSizes = () => {
-  const { logoSize, inputHeight, iconContainerSize, maxContentWidth } = useResponsive();
-  return { logoSize, inputHeight, iconContainerSize, maxContentWidth };
-};
-
-/**
- * Shorthand hook for just device type checks
- */
-export const useDeviceType = () => {
-  const { isSmallDevice, isTabletDevice, deviceType } = useResponsive();
-  return { isSmallDevice, isTabletDevice, deviceType };
-};

package/src/presentation/molecules/AtomicConfirmationModal.tsx

@@ -1,243 +0,0 @@
-/**
- * AtomicConfirmationModal - Universal Confirmation Dialog
- *
- * A reusable confirmation modal for destructive and important actions.
- * Follows Material Design 3 dialog patterns and accessibility guidelines.
- *
- * Features:
- * - Multiple variants (default, destructive, warning, success)
- * - Configurable text and icons
- * - Backdrop dismissal
- * - Full keyboard and screen reader support
- * - Theme-aware styling
- *
- * @example
- * ```tsx
- * // Destructive confirmation (delete)
- * <AtomicConfirmationModal
- *   visible={showDeleteModal}
- *   variant="destructive"
- *   title="Delete Item?"
- *   message="This action cannot be undone. All data will be permanently deleted."
- *   confirmText="Delete"
- *   cancelText="Cancel"
- *   onConfirm={handleDelete}
- *   onCancel={() => setShowDeleteModal(false)}
- * />
- *
- * // Generic confirmation
- * <AtomicConfirmationModal
- *   visible={showConfirmModal}
- *   variant="default"
- *   title="Confirm Action"
- *   message="Are you sure you want to proceed?"
- *   onConfirm={handleConfirm}
- *   onCancel={() => setShowConfirmModal(false)}
- * />
- * ```
- */
-
-import React from 'react';
-import { View, Modal, TouchableOpacity } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-import { AtomicText } from '../atoms/AtomicText';
-import { AtomicButton } from '../atoms/AtomicButton';
-import { AtomicIcon } from '../atoms/AtomicIcon';
-import {
-  AtomicConfirmationModalProps,
-  ConfirmationModalVariant,
-} from './confirmation-modal/types';
-import {
-  getVariantConfig,
-  getModalOverlayStyle,
-  getBackdropStyle,
-  getModalContainerStyle,
-  getIconContainerStyle,
-  getTitleContainerStyle,
-  getMessageContainerStyle,
-  getButtonContainerStyle,
-  getButtonStyle,
-} from './confirmation-modal/styles/confirmationModalStyles';
-
-export type { AtomicConfirmationModalProps };
-export type { ConfirmationModalVariant };
-
-export const AtomicConfirmationModal: React.FC<AtomicConfirmationModalProps> = ({
-  visible,
-  title,
-  message,
-  variant = 'default',
-  confirmText,
-  cancelText,
-  icon,
-  onConfirm,
-  onCancel,
-  showBackdrop = true,
-  backdropDismissible = true,
-  style,
-  testID = 'atomic-confirmation-modal',
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Get variant-specific configuration (icon and color only)
-  const variantConfig = getVariantConfig(variant as 'default' | 'destructive' | 'warning' | 'success', tokens);
-
-  // Determine final icon
-  const finalIcon = icon || variantConfig.icon;
-
-  // Handle backdrop press
-  const handleBackdropPress = () => {
-    if (backdropDismissible) {
-      onCancel();
-    }
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="fade"
-      onRequestClose={onCancel}
-      statusBarTranslucent
-      testID={testID}
-    >
-      <View style={getModalOverlayStyle(tokens)}>
-        {/* Backdrop - Tap to dismiss if enabled */}
-        {showBackdrop && (
-          <TouchableOpacity
-            style={getBackdropStyle()}
-            activeOpacity={1}
-            onPress={handleBackdropPress}
-            testID={`${testID}-backdrop`}
-          />
-        )}
-
-        {/* Modal Container */}
-        <View style={[getModalContainerStyle(tokens), style]}>
-          {/* Icon */}
-          <View style={getIconContainerStyle(tokens)}>
-            <AtomicIcon
-              name={finalIcon}
-              size="xl"
-              color={variantConfig.iconColor}
-              testID={`${testID}-icon`}
-            />
-          </View>
-
-          {/* Title */}
-          <View style={getTitleContainerStyle(tokens)}>
-            <AtomicText
-              type="titleLarge"
-              style={{
-                color: tokens.colors.textPrimary,
-                textAlign: 'center',
-                fontWeight: tokens.typography.bold,
-              }}
-              testID={`${testID}-title`}
-            >
-              {title}
-            </AtomicText>
-          </View>
-
-          {/* Message */}
-          <View style={getMessageContainerStyle(tokens)}>
-            <AtomicText
-              type="bodyMedium"
-              style={{
-                color: tokens.colors.textSecondary,
-                textAlign: 'center',
-                lineHeight: tokens.typography.bodyMedium.lineHeight,
-              }}
-              testID={`${testID}-message`}
-            >
-              {message}
-            </AtomicText>
-          </View>
-
-          {/* Action Buttons */}
-          <View style={getButtonContainerStyle(tokens)}>
-            {/* Cancel Button */}
-            <AtomicButton
-              variant="outline"
-              size="md"
-              onPress={onCancel}
-              style={getButtonStyle()}
-              testID={`${testID}-cancel-button`}
-            >
-              {cancelText}
-            </AtomicButton>
-
-            {/* Confirm Button */}
-            <AtomicButton
-              variant={variant === 'destructive' ? 'primary' : 'primary'}
-              size="md"
-              onPress={onConfirm}
-              style={[
-                getButtonStyle(),
-                ...(variant === 'destructive' ? [{ backgroundColor: tokens.colors.error }] : []),
-                ...(variant === 'warning' ? [{ backgroundColor: tokens.colors.warning }] : []),
-                ...(variant === 'success' ? [{ backgroundColor: tokens.colors.success }] : []),
-              ]}
-              testID={`${testID}-confirm-button`}
-            >
-              {confirmText}
-            </AtomicButton>
-          </View>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-
-/**
- * Hook for managing confirmation modal state
- *
- * @example
- * ```tsx
- * const { showConfirmation, confirmationProps } = useConfirmationModal({
- *   title: 'Delete Item?',
- *   message: 'This cannot be undone',
- *   variant: 'destructive',
- *   onConfirm: handleDelete,
- * });
- *
- * // In JSX
- * <AtomicConfirmationModal {...confirmationProps} />
- * <Button onPress={showConfirmation}>Delete</Button>
- * ```
- */
-export const useConfirmationModal = (config: {
-  title: string;
-  message: string;
-  variant?: ConfirmationModalVariant;
-  confirmText: string;
-  cancelText: string;
-  onConfirm: () => void;
-}) => {
-  const [visible, setVisible] = React.useState(false);
-
-  const showConfirmation = () => setVisible(true);
-  const hideConfirmation = () => setVisible(false);
-
-  const handleConfirm = () => {
-    config.onConfirm();
-    hideConfirmation();
-  };
-
-  const confirmationProps: AtomicConfirmationModalProps = {
-    visible,
-    title: config.title,
-    message: config.message,
-    variant: config.variant || 'default',
-    confirmText: config.confirmText,
-    cancelText: config.cancelText,
-    onConfirm: handleConfirm,
-    onCancel: hideConfirmation,
-  };
-
-  return {
-    showConfirmation,
-    hideConfirmation,
-    confirmationProps,
-  };
-};