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

package/src/presentation/atoms/index.ts

@@ -1,366 +0,0 @@
-/**
- * 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 {
-  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 {
-  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
-  | 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,
-  AtomicProgress,
-  AtomicAvatarGroup,
-  AtomicFab,
-  AtomicFilter,
-  AtomicTouchable,
-  AtomicUtils,
-};
-
-export default defaultExport;

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

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

@@ -1,66 +0,0 @@
-import { ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-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

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

@@ -1,207 +0,0 @@
-import { ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens, type DesignTokens } from '@umituz/react-native-theme';
-import { PickerSize } from '../types';
-import { IOS_HIG, getMinTouchTarget } from '../../../utils/platformConstants';
-
-/**
- * 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: TextStyle;
-  size: { sm: TextStyle; md: TextStyle; lg: TextStyle };
-} => ({
-  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: TextStyle;
-  size: { sm: TextStyle; md: TextStyle; lg: TextStyle };
-} => ({
-  base: {
-    color: tokens.colors.textSecondary,
-  },
-  size: {
-    sm: tokens.typography.bodySmall,
-    md: tokens.typography.bodyMedium,
-    lg: tokens.typography.bodyLarge,
-  },
-});
-
-export const getPickerValueStyles = (tokens: DesignTokens): {
-  base: TextStyle;
-  size: { sm: TextStyle; md: TextStyle; lg: TextStyle };
-} => ({
-  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,
-});