@umituz/react-native-design-system 1.0.0

package/src/presentation/atoms/index.ts

@@ -0,0 +1,378 @@
+/**
+ * Atomic Components Export Index
+ *
+ * Centralized export file for all atomic design components
+ * Following atomic design principles with React Native implementation
+ *
+ * Generated for {{APP_NAME}} - {{CATEGORY}} category
+ * Theme: {{THEME_NAME}}
+ *
+ * Usage:
+ * ```typescript
+ * import { AtomicButton, AtomicText, AtomicCard } from '@domains/design-system';
+ *
+ * // Or individual imports
+ * import { AtomicButton } from '@domains/design-system';
+ * ```
+ */
+
+// STEP 1: Import all components first (required for default export)
+import {
+  AtomicButton,
+  type AtomicButtonProps,
+} from './AtomicButton';
+
+import {
+  AtomicText,
+  type AtomicTextProps,
+} from './AtomicText';
+
+import {
+  AtomicCard,
+  type AtomicCardProps,
+  type AtomicCardVariant,
+  type AtomicCardPadding,
+} from './AtomicCard';
+
+import {
+  AtomicInput,
+  type AtomicInputProps,
+  type AtomicInputVariant,
+  type AtomicInputState,
+  type AtomicInputSize,
+} from './AtomicInput';
+
+import {
+  AtomicIcon,
+  type AtomicIconProps,
+  type AtomicIconSize,
+  type AtomicIconColor,
+} from './AtomicIcon';
+
+import {
+  AtomicImage,
+  type AtomicImageProps,
+} from './AtomicImage';
+
+import {
+  AtomicSwitch,
+  type AtomicSwitchProps,
+} from './AtomicSwitch';
+
+import {
+  AtomicBadge,
+  type AtomicBadgeProps,
+} from './AtomicBadge';
+
+import {
+  AtomicFormError,
+  type AtomicFormErrorProps,
+} from './AtomicFormError';
+
+import {
+  AtomicAvatar,
+  type AtomicAvatarProps,
+} from './AtomicAvatar';
+
+import {
+  AtomicChip,
+  type AtomicChipProps,
+} from './AtomicChip';
+
+import {
+  AtomicDivider,
+  type AtomicDividerProps,
+} from './AtomicDivider';
+
+import {
+  AtomicSkeleton,
+  type AtomicSkeletonProps,
+} from './AtomicSkeleton';
+
+import {
+  AtomicProgress,
+  type AtomicProgressProps,
+} from './AtomicProgress';
+
+import {
+  AtomicAvatarGroup,
+  type AtomicAvatarGroupProps,
+  type AvatarData,
+} from './AtomicAvatarGroup';
+
+import {
+  AtomicFab,
+  type AtomicFabProps,
+  type FabSize,
+  type FabVariant,
+  getFabVariants,
+} from './AtomicFab';
+
+import {
+  AtomicFilter,
+  type AtomicFilterProps,
+  type FilterOption,
+  getFilterContainerStyle,
+  getClearAllContainerStyle,
+  getScrollContentContainerStyle,
+} from './AtomicFilter';
+
+import {
+  AtomicTouchable,
+  type AtomicTouchableProps,
+  type TouchableFeedback,
+  type FeedbackStrength,
+  type HitSlop,
+  TouchablePresets,
+  getOpacityValue,
+  normalizeHitSlop,
+} from './AtomicTouchable';
+
+// STEP 2: Re-export all components (for named imports)
+export {
+  AtomicButton,
+  type AtomicButtonProps,
+};
+
+// Helper types extracted from ButtonVariantConfig
+
+export {
+  AtomicText,
+  type AtomicTextProps,
+};
+
+export {
+  AtomicCard,
+  type AtomicCardProps,
+  type AtomicCardVariant,
+  type AtomicCardPadding,
+};
+
+export {
+  AtomicInput,
+  type AtomicInputProps,
+  type AtomicInputVariant,
+  type AtomicInputState,
+  type AtomicInputSize,
+};
+
+export {
+  AtomicIcon,
+  type AtomicIconProps,
+  type AtomicIconSize,
+  type AtomicIconColor,
+};
+
+export {
+  AtomicImage,
+  type AtomicImageProps,
+};
+
+export {
+  AtomicSwitch,
+  type AtomicSwitchProps,
+};
+
+export {
+  AtomicBadge,
+  type AtomicBadgeProps,
+};
+
+export {
+  AtomicFormError,
+  type AtomicFormErrorProps,
+};
+
+export {
+  AtomicAvatar,
+  type AtomicAvatarProps,
+};
+
+export {
+  AtomicChip,
+  type AtomicChipProps,
+};
+
+export {
+  AtomicDivider,
+  type AtomicDividerProps,
+};
+
+export {
+  AtomicSkeleton,
+  type AtomicSkeletonProps,
+};
+
+export {
+  AtomicProgress,
+  type AtomicProgressProps,
+};
+
+export {
+  AtomicAvatarGroup,
+  type AtomicAvatarGroupProps,
+  type AvatarData,
+};
+
+export {
+  AtomicFab,
+  type AtomicFabProps,
+  type FabSize,
+  type FabVariant,
+  getFabVariants,
+};
+
+export {
+  AtomicFilter,
+  type AtomicFilterProps,
+  type FilterOption,
+  getFilterContainerStyle,
+  getClearAllContainerStyle,
+  getScrollContentContainerStyle,
+};
+
+export {
+  AtomicTouchable,
+  type AtomicTouchableProps,
+  type TouchableFeedback,
+  type FeedbackStrength,
+  type HitSlop,
+  TouchablePresets,
+  getOpacityValue,
+  normalizeHitSlop,
+};
+
+/**
+ * Convenience re-exports for common patterns
+ */
+
+// All atomic component types
+export type AtomicComponentProps =
+  | AtomicButtonProps
+  | AtomicTextProps
+  | AtomicCardProps
+  | AtomicInputProps
+  | AtomicIconProps
+  | AtomicImageProps
+  | AtomicSwitchProps
+  | AtomicBadgeProps
+  | AtomicFormErrorProps
+  | AtomicAvatarProps
+  | AtomicChipProps
+  | AtomicDividerProps
+  | AtomicSkeletonProps
+  | AtomicProgressProps
+  | AtomicAvatarGroupProps
+  | AtomicFabProps
+  | AtomicFilterProps
+  | AtomicTouchableProps;
+
+// All variant types for theme consistency
+export type AtomicVariants = {
+  card: AtomicCardVariant;
+  input: AtomicInputVariant;
+  icon: AtomicIconSize;
+};
+
+// All color types for design system consistency
+export type AtomicColors = AtomicIconColor;
+
+/**
+ * Atomic component utilities
+ */
+export const AtomicUtils = {
+  /**
+   * Get recommended component combinations for common UI patterns
+   */
+  getRecommendedCombinations: () => ({
+    // Card with header
+    cardWithHeader: {
+      card: { variant: 'elevated' as const, padding: 'lg' as const },
+      title: { variant: 'titleLarge' as const, color: 'primary' as const },
+      description: { variant: 'bodyMedium' as const, color: 'secondary' as const },
+    },
+
+    // Form field
+    formField: {
+      input: { variant: 'outlined' as const, size: 'md' as const },
+      label: { variant: 'labelMedium' as const, color: 'primary' as const },
+      helper: { variant: 'bodySmall' as const, color: 'secondary' as const },
+    },
+
+    // Action button
+    primaryAction: {
+      button: { variant: 'primary' as const, size: 'lg' as const },
+      text: { variant: 'labelLarge' as const, color: 'onPrimary' as const },
+      icon: { size: 'md' as const, color: 'onPrimary' as const },
+    },
+
+    // Secondary action
+    secondaryAction: {
+      button: { variant: 'outline' as const, size: 'md' as const },
+      text: { variant: 'labelMedium' as const, color: 'primary' as const },
+      icon: { size: 'sm' as const, color: 'primary' as const },
+    },
+  }),
+
+  /**
+   * Validate component prop combinations
+   */
+  validatePropCombination: (componentType: keyof AtomicVariants, props: any): boolean => {
+    // Add validation logic here for prop combinations
+    // This helps catch design system violations early
+    return true;
+  },
+
+  /**
+   * Get accessibility guidelines for component combinations
+   */
+  getAccessibilityGuidelines: () => ({
+    button: {
+      minimumTouchTarget: 48,
+      requiresAccessibilityLabel: true,
+      supportsAccessibilityHint: true,
+    },
+    input: {
+      requiresLabel: true,
+      supportsHelperText: true,
+      requiresAccessibilityLabel: true,
+    },
+    card: {
+      supportsAccessibilityRole: true,
+      canBeAccessibilityContainer: true,
+    },
+    text: {
+      supportsAccessibilityLabel: true,
+      respectsSystemTextSize: true,
+    },
+    icon: {
+      requiresAccessibilityLabel: true,
+      supportsAccessibilityHint: false,
+    },
+  }),
+};
+
+// STEP 3: Default export (now all components are available in scope)
+const defaultExport = {
+  AtomicButton,
+  AtomicText,
+  AtomicCard,
+  AtomicInput,
+  AtomicIcon,
+  AtomicImage,
+  AtomicSwitch,
+  AtomicBadge,
+  AtomicFormError,
+  AtomicAvatar,
+  AtomicChip,
+  AtomicDivider,
+  AtomicSkeleton,
+  AtomicProgress,
+  AtomicAvatarGroup,
+  AtomicFab,
+  AtomicFilter,
+  AtomicTouchable,
+  AtomicUtils,
+};
+
+export default defaultExport;

package/src/presentation/atoms/input/hooks/useInputState.ts

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+export const useInputState = (secureTextEntry: boolean = false) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(!secureTextEntry);
+
+  const togglePasswordVisibility = () => setIsPasswordVisible(!isPasswordVisible);
+
+  return {
+    isFocused,
+    setIsFocused,
+    isPasswordVisible,
+    togglePasswordVisibility,
+  };
+};

package/src/presentation/atoms/input/styles/inputStyles.ts

@@ -0,0 +1,66 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+import { AtomicInputVariant, AtomicInputSize, AtomicInputState } from '../types';
+
+type DesignTokens = ReturnType<typeof useAppDesignTokens>;
+
+export const getContainerVariantStyles = (tokens: DesignTokens): Record<AtomicInputVariant, ViewStyle> => ({
+  outlined: {
+    borderWidth: 1,
+    borderRadius: 12,
+    borderColor: tokens.colors.outline,
+  },
+  filled: {
+    backgroundColor: tokens.colors.surfaceVariant,
+    borderRadius: 12,
+    borderBottomWidth: 2,
+    borderBottomColor: tokens.colors.outline,
+  },
+  underlined: {
+    borderBottomWidth: 1,
+    borderBottomColor: tokens.colors.outline,
+    backgroundColor: 'transparent',
+  },
+});
+
+export const containerSizeStyles: Record<AtomicInputSize, ViewStyle> = {
+  sm: { height: 40, paddingHorizontal: 12, paddingVertical: 8 },
+  md: { height: 56, paddingHorizontal: 16, paddingVertical: 16 },
+  lg: { height: 64, paddingHorizontal: 24, paddingVertical: 20 },
+};
+
+export const getInputSizeStyles = (tokens: DesignTokens): Record<AtomicInputSize, TextStyle> => ({
+  sm: { fontSize: tokens.typography.bodyMedium.fontSize },
+  md: { fontSize: tokens.typography.bodyLarge.fontSize },
+  lg: { fontSize: tokens.typography.bodyLarge.fontSize },
+});
+
+export const getLabelSizeStyles = (tokens: DesignTokens): Record<AtomicInputSize, TextStyle> => ({
+  sm: { fontSize: tokens.typography.bodySmall.fontSize },
+  md: { fontSize: tokens.typography.bodyMedium.fontSize },
+  lg: { fontSize: tokens.typography.bodyLarge.fontSize },
+});
+
+export const getStateStyles = (tokens: DesignTokens): Record<AtomicInputState, ViewStyle> => ({
+  default: {},
+  error: { borderColor: tokens.colors.error },
+  success: { borderColor: tokens.colors.success },
+  disabled: {
+    backgroundColor: tokens.colors.surfaceDisabled,
+    borderColor: tokens.colors.outlineDisabled,
+  },
+});
+
+export const getFocusStyles = (tokens: DesignTokens): Record<AtomicInputVariant, ViewStyle> => ({
+  outlined: { borderColor: tokens.colors.primary, borderWidth: 2 },
+  filled: { borderBottomColor: tokens.colors.primary, borderBottomWidth: 2 },
+  underlined: { borderBottomColor: tokens.colors.primary, borderBottomWidth: 2 },
+});
+
+export const getStateColor = (tokens: DesignTokens, state: AtomicInputState, isFocused: boolean, isDisabled: boolean): string => {
+  if (isDisabled) return tokens.colors.onSurfaceDisabled;
+  if (state === 'error') return tokens.colors.error;
+  if (state === 'success') return tokens.colors.success;
+  if (isFocused) return tokens.colors.primary;
+  return tokens.colors.surfaceVariant;
+};

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

@@ -0,0 +1,25 @@
+import { TextInputProps, ViewStyle, TextStyle } from 'react-native';
+
+export type AtomicInputVariant = 'outlined' | 'filled' | 'underlined';
+export type AtomicInputState = 'default' | 'error' | 'success' | 'disabled';
+export type AtomicInputSize = 'sm' | 'md' | 'lg';
+
+export interface AtomicInputProps extends Omit<TextInputProps, 'style'> {
+  variant?: AtomicInputVariant;
+  state?: AtomicInputState;
+  size?: AtomicInputSize;
+  label: string; // Required per CLAUDE.md Rule 16
+  helperText?: string;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+  showPasswordToggle?: boolean;
+  maxLength?: number;
+  showCharacterCount?: boolean;
+  disabled?: boolean;
+  style?: ViewStyle | ViewStyle[];
+  containerStyle?: ViewStyle | ViewStyle[];
+  inputStyle?: TextStyle | TextStyle[];
+  labelStyle?: TextStyle | TextStyle[];
+  helperTextStyle?: TextStyle | TextStyle[];
+  testID?: string;
+}

package/src/presentation/atoms/picker/styles/pickerStyles.ts

@@ -0,0 +1,200 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+import { PickerSize } from '../types';
+import { IOS_HIG, getMinTouchTarget } from '../../../utils/platformConstants';
+
+type DesignTokens = ReturnType<typeof useAppDesignTokens>;
+
+/**
+ * Picker container styles with iOS HIG compliance
+ *
+ * All picker sizes meet Apple's minimum touch target requirement of 44pt.
+ * @see https://developer.apple.com/design/human-interface-guidelines/layout
+ */
+export const getPickerContainerStyles = (tokens: DesignTokens) => ({
+  base: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
+    borderWidth: tokens.borders.width.thin,
+    borderColor: tokens.colors.border,
+    backgroundColor: tokens.colors.surface,
+  },
+  size: {
+    // ✅ iOS HIG Compliant: All sizes >= 44pt minimum touch target
+    sm: {
+      height: IOS_HIG.MIN_TOUCH_TARGET,  // 44pt - iOS minimum
+      paddingHorizontal: tokens.spacing.sm,
+      borderRadius: tokens.borders.radius.sm,
+    },
+    md: {
+      height: getMinTouchTarget('input'),  // 48pt - Recommended
+      paddingHorizontal: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
+    },
+    lg: {
+      height: 56,  // 56pt - Large touch target
+      paddingHorizontal: tokens.spacing.lg,
+      borderRadius: tokens.borders.radius.md,
+    },
+  },
+  state: {
+    error: {
+      borderColor: tokens.colors.error,
+      borderWidth: tokens.borders.width.medium,
+    },
+    disabled: {
+      backgroundColor: tokens.colors.surfaceDisabled,
+      opacity: 0.6,
+    },
+  },
+});
+
+export const getPickerLabelStyles = (tokens: DesignTokens) => ({
+  base: {
+    marginBottom: tokens.spacing.xs,
+    color: tokens.colors.textPrimary,
+    fontWeight: '600' as const,
+  },
+  size: {
+    sm: tokens.typography.bodySmall,
+    md: tokens.typography.bodyMedium,
+    lg: tokens.typography.bodyLarge,
+  },
+});
+
+export const getPickerPlaceholderStyles = (tokens: DesignTokens) => ({
+  base: {
+    color: tokens.colors.textSecondary,
+  },
+  size: {
+    sm: tokens.typography.bodySmall,
+    md: tokens.typography.bodyMedium,
+    lg: tokens.typography.bodyLarge,
+  },
+});
+
+export const getPickerValueStyles = (tokens: DesignTokens) => ({
+  base: {
+    flex: 1,
+    color: tokens.colors.textPrimary,
+  },
+  size: {
+    sm: tokens.typography.bodySmall,
+    md: tokens.typography.bodyMedium,
+    lg: tokens.typography.bodyLarge,
+  },
+});
+
+export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
+  marginTop: tokens.spacing.xs,
+  color: tokens.colors.error,
+  ...tokens.typography.bodySmall,
+});
+
+export const getModalOverlayStyles = (tokens: DesignTokens): ViewStyle => ({
+  flex: 1,
+  backgroundColor: tokens.colors.overlayMedium,
+  justifyContent: 'flex-start',
+});
+
+export const getModalContainerStyles = (tokens: DesignTokens, maxHeight: number): ViewStyle => ({
+  backgroundColor: tokens.colors.backgroundPrimary,
+  borderTopLeftRadius: tokens.borders.radius.lg,
+  borderTopRightRadius: tokens.borders.radius.lg,
+  maxHeight: maxHeight,
+  paddingBottom: tokens.spacing.lg,
+});
+
+export const getModalHeaderStyles = (tokens: DesignTokens): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingHorizontal: tokens.spacing.lg,
+  paddingVertical: tokens.spacing.md,
+  borderBottomWidth: tokens.borders.width.thin,
+  borderBottomColor: tokens.colors.border,
+});
+
+export const getModalTitleStyles = (tokens: DesignTokens): TextStyle => ({
+  ...tokens.typography.titleLarge,
+  color: tokens.colors.textPrimary,
+  fontWeight: '600',
+});
+
+export const getSearchContainerStyles = (tokens: DesignTokens): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  backgroundColor: tokens.colors.surfaceVariant,
+  paddingHorizontal: tokens.spacing.md,
+  paddingVertical: tokens.spacing.sm,
+  marginHorizontal: tokens.spacing.lg,
+  marginTop: tokens.spacing.md,
+  borderRadius: tokens.borders.radius.md,
+});
+
+export const getSearchInputStyles = (tokens: DesignTokens): TextStyle => ({
+  flex: 1,
+  marginLeft: tokens.spacing.sm,
+  ...tokens.typography.bodyMedium,
+  color: tokens.colors.textPrimary,
+});
+
+export const getOptionContainerStyles = (tokens: DesignTokens, isSelected: boolean, isDisabled: boolean): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingHorizontal: tokens.spacing.lg,
+  paddingVertical: tokens.spacing.md,
+  backgroundColor: isSelected ? tokens.colors.primaryContainer : 'transparent',
+  opacity: isDisabled ? 0.5 : 1,
+});
+
+export const getOptionTextStyles = (tokens: DesignTokens, isSelected: boolean): TextStyle => ({
+  flex: 1,
+  marginLeft: tokens.spacing.sm,
+  ...tokens.typography.bodyLarge,
+  color: isSelected ? tokens.colors.primary : tokens.colors.textPrimary,
+  fontWeight: isSelected ? '600' : '400',
+});
+
+export const getOptionDescriptionStyles = (tokens: DesignTokens): TextStyle => ({
+  ...tokens.typography.bodySmall,
+  color: tokens.colors.textSecondary,
+  marginLeft: tokens.spacing.sm,
+  marginTop: tokens.spacing.xs,
+});
+
+export const getEmptyStateStyles = (tokens: DesignTokens): ViewStyle => ({
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingVertical: tokens.spacing.xxl,
+});
+
+export const getEmptyStateTextStyles = (tokens: DesignTokens): TextStyle => ({
+  ...tokens.typography.bodyLarge,
+  color: tokens.colors.textSecondary,
+  textAlign: 'center',
+  marginTop: tokens.spacing.md,
+});
+
+export const getChipContainerStyles = (tokens: DesignTokens): ViewStyle => ({
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: tokens.spacing.xs,
+  marginTop: tokens.spacing.xs,
+});
+
+export const getChipStyles = (tokens: DesignTokens): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  backgroundColor: tokens.colors.primaryContainer,
+  paddingHorizontal: tokens.spacing.sm,
+  paddingVertical: tokens.spacing.xs,
+  borderRadius: tokens.borders.radius.sm,
+});
+
+export const getChipTextStyles = (tokens: DesignTokens): TextStyle => ({
+  ...tokens.typography.bodySmall,
+  color: tokens.colors.primary,
+  marginRight: tokens.spacing.xs,
+});