@umituz/react-native-design-system 1.0.0

package/src/presentation/atoms/AtomicTouchable.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { Pressable, View, ActivityIndicator, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicTouchableProps, TouchableFeedback, FeedbackStrength } from './touchable/types';
+import {
+  getOpacityValue,
+  getTouchableContainerStyle,
+  getDisabledStyle,
+  getLoadingContainerStyle,
+  normalizeHitSlop,
+} from './touchable/styles/touchableStyles';
+
+export type {
+  AtomicTouchableProps,
+  TouchableFeedback,
+  FeedbackStrength,
+  HitSlop,
+} from './touchable/types';
+
+export {
+  getOpacityValue,
+  getTouchableContainerStyle,
+  getDisabledStyle,
+  getLoadingContainerStyle,
+  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)
+ * - Loading state with indicator
+ * - 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 loading state
+ * <AtomicTouchable
+ *   onPress={handleSubmit}
+ *   loading={isSubmitting}
+ *   feedback="highlight"
+ * >
+ *   <AtomicText>Submit</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,
+  loading = 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 || loading;
+
+  // Get opacity value based on strength
+  const opacityValue = getOpacityValue(strength);
+
+  // 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,
+        busy: loading,
+      }}
+      testID={testID}
+    >
+      {loading ? (
+        <View style={getLoadingContainerStyle()}>
+          <ActivityIndicator
+            size="small"
+            color={tokens.colors.primary}
+            testID={`${testID}-loading`}
+          />
+        </View>
+      ) : (
+        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

@@ -0,0 +1,69 @@
+import { ViewStyle } from 'react-native';
+import { FabVariant, FabSize, FabVariantConfig, FabSizeConfig } from '../types';
+import type { DesignTokens } from '../../../tokens/AppDesignTokens';
+
+/**
+ * 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

@@ -0,0 +1,88 @@
+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;
+
+  /**
+   * Whether to show loading state
+   * @default false
+   */
+  loading?: 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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,89 @@
+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;
+}