@umituz/react-native-design-system 1.8.0 → 1.8.2

package/src/presentation/atoms/AtomicTouchable.tsx

@@ -1,209 +0,0 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicTouchableProps, TouchableFeedback, FeedbackStrength } from './touchable/types';
-import {
-  getOpacityValue,
-  getTouchableContainerStyle,
-  getDisabledStyle,
-  normalizeHitSlop,
-} from './touchable/styles/touchableStyles';
-
-export type {
-  AtomicTouchableProps,
-  TouchableFeedback,
-  FeedbackStrength,
-  HitSlop,
-} from './touchable/types';
-
-export {
-  getOpacityValue,
-  getTouchableContainerStyle,
-  getDisabledStyle,
-  normalizeHitSlop,
-} from './touchable/styles/touchableStyles';
-
-/**
- * AtomicTouchable - Unified Touchable Component
- *
- * A modern, accessible touchable wrapper using React Native's Pressable API.
- * Provides consistent behavior across iOS, Android, and Web.
- *
- * Features:
- * - Multiple feedback variants (opacity, highlight, ripple, none)
- * - Configurable feedback strength (subtle, normal, strong)
- * - Disabled state with visual feedback
- * - Hit slop customization for small touch targets
- * - Minimum 48x48 touch target (iOS HIG compliance)
- * - Full accessibility support
- * - Theme-aware ripple colors
- *
- * @example
- * ```tsx
- * // Basic usage with opacity feedback
- * <AtomicTouchable onPress={handlePress}>
- *   <AtomicText>Press Me</AtomicText>
- * </AtomicTouchable>
- *
- * // With custom hit slop (extends touch area)
- * <AtomicTouchable
- *   onPress={handlePress}
- *   hitSlop={8}
- *   feedback="ripple"
- * >
- *   <AtomicIcon name="X" size="sm" />
- * </AtomicTouchable>
- * ```
- */
-export const AtomicTouchable: React.FC<AtomicTouchableProps> = ({
-  children,
-  onPress,
-  onPressIn,
-  onPressOut,
-  onLongPress,
-  feedback = 'opacity',
-  strength = 'normal',
-  disabled = false,
-  hitSlop,
-  style,
-  pressedStyle,
-  disabledStyle,
-  accessibilityLabel,
-  accessibilityHint,
-  accessibilityRole = 'button',
-  testID,
-  delayLongPress = 500,
-  rippleColor,
-  rippleRadius = 0,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Determine if touchable should be disabled
-  const isDisabled = disabled;
-
-  // Get opacity value based on strength
-  const opacityValue = getOpacityValue(strength as 'subtle' | 'normal' | 'strong');
-
-  // Normalize hit slop
-  const normalizedHitSlop = normalizeHitSlop(hitSlop);
-
-  // Default ripple color (theme primary with alpha)
-  const defaultRippleColor = tokens.colors.primary + '40'; // 40 = 25% opacity in hex
-
-  /**
-   * Get style based on pressed state
-   */
-  const getPressedStyle = ({ pressed }: { pressed: boolean }) => {
-    const baseStyle = [
-      getTouchableContainerStyle(),
-      style,
-    ];
-
-    if (isDisabled) {
-      return [...baseStyle, getDisabledStyle(), disabledStyle];
-    }
-
-    if (pressed) {
-      // Apply feedback based on variant
-      switch (feedback) {
-        case 'opacity':
-          return [...baseStyle, { opacity: opacityValue }, pressedStyle];
-        case 'highlight':
-          return [
-            ...baseStyle,
-            { backgroundColor: tokens.colors.surfaceVariant },
-            pressedStyle,
-          ];
-        case 'none':
-          return [...baseStyle, pressedStyle];
-        case 'ripple':
-          // Ripple is handled by android_ripple prop
-          return [...baseStyle, pressedStyle];
-        default:
-          return [...baseStyle, pressedStyle];
-      }
-    }
-
-    return baseStyle;
-  };
-
-  /**
-   * Android ripple configuration
-   * Used when feedback='ripple'
-   * Pressable automatically ignores this prop on iOS/Web
-   */
-  const androidRippleConfig = feedback === 'ripple'
-    ? {
-        color: rippleColor || defaultRippleColor,
-        borderless: false,
-        radius: rippleRadius,
-      }
-    : undefined;
-
-  return (
-    <Pressable
-      onPress={isDisabled ? undefined : onPress}
-      onPressIn={isDisabled ? undefined : onPressIn}
-      onPressOut={isDisabled ? undefined : onPressOut}
-      onLongPress={isDisabled ? undefined : onLongPress}
-      delayLongPress={delayLongPress}
-      disabled={isDisabled}
-      hitSlop={normalizedHitSlop}
-      style={getPressedStyle}
-      android_ripple={androidRippleConfig}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityRole={accessibilityRole}
-      accessibilityState={{
-        disabled: isDisabled,
-      }}
-      testID={testID}
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-/**
- * Preset touchable configurations for common use cases
- */
-export const TouchablePresets = {
-  /**
-   * iOS-style opacity feedback (default)
-   */
-  ios: {
-    feedback: 'opacity' as TouchableFeedback,
-    strength: 'normal' as FeedbackStrength,
-  },
-
-  /**
-   * Android-style ripple feedback
-   */
-  android: {
-    feedback: 'ripple' as TouchableFeedback,
-    strength: 'normal' as FeedbackStrength,
-  },
-
-  /**
-   * Subtle feedback for secondary actions
-   */
-  subtle: {
-    feedback: 'opacity' as TouchableFeedback,
-    strength: 'subtle' as FeedbackStrength,
-  },
-
-  /**
-   * Strong feedback for primary actions
-   */
-  strong: {
-    feedback: 'opacity' as TouchableFeedback,
-    strength: 'strong' as FeedbackStrength,
-  },
-
-  /**
-   * No visual feedback (use sparingly)
-   */
-  none: {
-    feedback: 'none' as TouchableFeedback,
-  },
-};

package/src/presentation/atoms/fab/styles/fabStyles.ts

@@ -1,69 +0,0 @@
-import { ViewStyle } from 'react-native';
-import { FabVariant, FabSize, FabVariantConfig, FabSizeConfig } from '../types';
-import type { DesignTokens } from '@umituz/react-native-theme';
-
-/**
- * Material Design 3 FAB size configurations
- */
-export const FAB_SIZES: Record<FabSize, FabSizeConfig> = {
-  sm: {
-    width: 40,
-    height: 40,
-    borderRadius: 20, // Perfect circle
-  },
-  md: {
-    width: 56,
-    height: 56,
-    borderRadius: 28, // Perfect circle (Material Design 3 standard)
-  },
-  lg: {
-    width: 72,
-    height: 72,
-    borderRadius: 36, // Perfect circle
-  },
-};
-
-/**
- * Get FAB variant styles based on design tokens
- * Note: Icon colors are handled via customColor in AtomicIcon
- */
-export const getFabVariants = (tokens: DesignTokens): Record<FabVariant, FabVariantConfig> => ({
-  primary: {
-    backgroundColor: tokens.colors.primary,
-    iconColor: tokens.colors.onPrimary,
-  },
-  secondary: {
-    backgroundColor: tokens.colors.secondary,
-    iconColor: tokens.colors.onSecondary,
-  },
-  surface: {
-    backgroundColor: tokens.colors.surface,
-    iconColor: tokens.colors.onSurface,
-  },
-});
-
-/**
- * Get icon size based on FAB size
- * Returns AtomicIconSize type ('sm', 'md', 'lg')
- */
-export const getFabIconSize = (size: FabSize): 'sm' | 'md' | 'lg' => {
-  switch (size) {
-    case 'sm':
-      return 'sm';
-    case 'md':
-      return 'md';
-    case 'lg':
-      return 'lg';
-    default:
-      return 'md';
-  }
-};
-
-/**
- * Get FAB border for depth (shadows removed per CLAUDE.md)
- * Subtle border provides visual elevation without shadow issues
- */
-export const getFabBorder = (tokens: DesignTokens): ViewStyle => ({
-  borderWidth: 1,
-  borderColor: tokens.colors.outline,
-});

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

@@ -1,82 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native';
-
-/**
- * FAB (Floating Action Button) size variants
- * Based on Material Design 3 standards
- */
-export type FabSize = 'sm' | 'md' | 'lg';
-
-/**
- * FAB variant types
- * - primary: Main action (uses primary color)
- * - secondary: Secondary action (uses secondary color)
- * - surface: Neutral action (uses surface color with border)
- */
-export type FabVariant = 'primary' | 'secondary' | 'surface';
-
-/**
- * FAB configuration for variant styling
- */
-export interface FabVariantConfig {
-  backgroundColor: string;
-  iconColor: string;
-}
-
-/**
- * FAB configuration for size styling
- */
-export interface FabSizeConfig {
-  width: number;
-  height: number;
-  borderRadius: number;
-}
-
-/**
- * AtomicFab component props
- */
-export interface AtomicFabProps {
-  /**
-   * Icon name to display (required)
-   * Any MaterialIcons name (see https://fonts.google.com/icons)
-   * Examples: 'add', 'edit', 'camera', etc.
-   */
-  icon: string;
-
-  /**
-   * Callback when FAB is pressed
-   */
-  onPress: () => void;
-
-  /**
-   * Visual variant of the FAB
-   * @default 'primary'
-   */
-  variant?: FabVariant;
-
-  /**
-   * Size of the FAB
-   * @default 'md'
-   */
-  size?: FabSize;
-
-  /**
-   * Whether the FAB is disabled
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Custom style for the FAB container
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
-
-  /**
-   * Accessibility label
-   */
-  accessibilityLabel?: string;
-}

package/src/presentation/atoms/filter/styles/filterStyles.ts

@@ -1,32 +0,0 @@
-import { ViewStyle } from 'react-native';
-
-/**
- * Filter container styles
- * Horizontal scrollable filter chip list
- */
-export const getFilterContainerStyle = (): ViewStyle => ({
-  flexDirection: 'row',
-  paddingHorizontal: 16,
-  paddingVertical: 12,
-  gap: 8, // Space between chips
-});
-
-/**
- * Clear all button container styles
- */
-export const getClearAllContainerStyle = (): ViewStyle => ({
-  marginLeft: 8,
-  paddingHorizontal: 12,
-  paddingVertical: 6,
-  borderRadius: 16,
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-/**
- * ScrollView content container style
- */
-export const getScrollContentContainerStyle = (): ViewStyle => ({
-  alignItems: 'center',
-  gap: 8,
-});

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

@@ -1,89 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native';
-
-/**
- * Filter option interface
- * Represents a single filterable option
- */
-export interface FilterOption {
-  /**
-   * Unique identifier for the filter option
-   */
-  id: string;
-
-  /**
-   * Display label for the filter
-   */
-  label: string;
-
-  /**
-   * Optional value associated with the filter
-   * Can be used for backend filtering
-   */
-  value?: unknown;
-
-  /**
-   * Optional icon name to display
-   */
-  icon?: string;
-}
-
-/**
- * AtomicFilter component props
- */
-export interface AtomicFilterProps {
-  /**
-   * Array of filter options to display
-   */
-  options: FilterOption[];
-
-  /**
-   * Array of currently selected filter IDs
-   */
-  selectedIds: string[];
-
-  /**
-   * Callback when selection changes
-   * @param selectedIds - New array of selected IDs
-   */
-  onSelectionChange: (selectedIds: string[]) => void;
-
-  /**
-   * Enable multi-select mode
-   * @default true
-   */
-  multiSelect?: boolean;
-
-  /**
-   * Show "Clear All" button when filters are active
-   * @default true
-   */
-  showClearAll?: boolean;
-
-  /**
-   * Chip variant style
-   * @default 'outlined'
-   */
-  variant?: 'filled' | 'outlined' | 'soft';
-
-  /**
-   * Chip color theme
-   * @default 'primary'
-   */
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-
-  /**
-   * Chip size
-   * @default 'md'
-   */
-  size?: 'sm' | 'md' | 'lg';
-
-  /**
-   * Custom style for the container
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
-}