@umituz/react-native-design-system 2.6.65 → 2.6.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.65",
+  "version": "2.6.66",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicDatePicker.tsx

@@ -37,7 +37,7 @@
  * @module AtomicDatePicker
  */
 
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
 import {
   View,
   StyleSheet,
@@ -50,6 +50,8 @@ import { useAppDesignTokens } from '../theme';
 import { AtomicText } from './AtomicText';
 import { DatePickerModal } from './datepicker/components/DatePickerModal';
 import { DatePickerButton } from './datepicker/components/DatePickerButton';
+import { useDatePickerText } from './datepicker/hooks/useDatePickerText';
+import { getDatePickerStyles } from './datepicker/styles/datePickerStyles';
 
 /**
  * Props for AtomicDatePicker component
@@ -139,45 +141,8 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
     }
   };
 
-  /**
-   * Format date based on mode
-   * Uses native Date formatting (locale-aware)
-   */
-  const formatDate = useMemo(() => (date: Date): string => {
-    if (mode === 'time') {
-      return date.toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit'
-      });
-    }
-    if (mode === 'datetime') {
-      const dateStr = date.toLocaleDateString([], {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      });
-      const timeStr = date.toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit'
-      });
-      return `${dateStr} ${timeStr}`;
-    }
-    return date.toLocaleDateString([], {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  }, [mode]);
-
-  /**
-   * Get display text for the button
-   */
-  const displayText = useMemo(() => {
-    if (!value) return placeholder;
-    return formatDate(value);
-  }, [value, placeholder, formatDate]);
-
-  const styles = getStyles(tokens);
+  const { displayText } = useDatePickerText({ value, placeholder, mode });
+  const styles = getDatePickerStyles(tokens);
 
   return (
     <View style={[styles.container, style]} testID={testID}>
@@ -229,26 +194,3 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
     </View>
   );
 };
-
-/**
- * Get component styles based on design tokens
- */
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => {
-  return StyleSheet.create({
-    container: {
-      marginBottom: tokens.spacing.md,
-    },
-    label: {
-      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-      fontWeight: tokens.typography.semibold,
-      color: tokens.colors.onSurface,
-      marginBottom: tokens.spacing.sm,
-    },
-    errorText: {
-      fontSize: tokens.typography.bodySmall.responsiveFontSize,
-      color: tokens.colors.error,
-      marginTop: tokens.spacing.xs,
-      marginLeft: tokens.spacing.xs,
-    },
-  });
-};

package/src/atoms/AtomicInput.tsx

@@ -3,6 +3,7 @@ import { View, TextInput, StyleSheet, StyleProp, ViewStyle, TextStyle } from 're
 import { useAppDesignTokens } from '../theme';
 import { useInputState } from './input/hooks/useInputState';
 import { getSizeConfig, getVariantStyle, getTextColor } from './input/styles/inputStylesHelper';
+import { inputStyles } from './input/styles/inputStyles';
 import type { AtomicInputProps } from './input/types';
 import { InputLabel } from './input/components/InputLabel';
 import { InputIcon } from './input/components/InputIcon';
@@ -94,7 +95,7 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
   const iconColor = isDisabled ? tokens.colors.textDisabled : tokens.colors.textSecondary;
 
   const containerStyle: StyleProp<ViewStyle> = [
-    styles.container,
+    inputStyles.container,
     variantStyle,
     {
       paddingTop: sizeConfig.paddingVertical,
@@ -108,7 +109,7 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
   ];
 
   const textInputStyle: StyleProp<TextStyle> = [
-    styles.input,
+    inputStyles.input,
     {
       fontSize: sizeConfig.fontSize,
       lineHeight: (sizeConfig.fontSize || 16) * 1.2,
@@ -198,15 +199,3 @@ export const AtomicInput = React.forwardRef<TextInput, AtomicInputProps>(({
     </View>
   );
 });
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  input: {
-    flex: 1,
-    margin: 0,
-    padding: 0,
-  },
-});

package/src/atoms/AtomicPicker.tsx

@@ -52,6 +52,7 @@ import { AtomicIcon } from './AtomicIcon';
 import { AtomicText } from './AtomicText';
 import { PickerModal } from './picker/components/PickerModal';
 import { PickerChips } from './picker/components/PickerChips';
+import { PickerIcons } from './picker/components/PickerIcons';
 import {
   getPickerContainerStyles,
   getPickerLabelStyles,
@@ -156,27 +157,15 @@ export const AtomicPicker: React.FC<AtomicPickerProps> = ({
         </AtomicText>
 
         {/* Icons */}
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
-          {/* Clear Button */}
-          {clearable && pickerState.selectedOptions.length > 0 && !disabled && (
-            <TouchableOpacity
-              onPress={pickerState.handleClear}
-              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-              accessibilityRole="button"
-              accessibilityLabel={clearAccessibilityLabel}
-              testID={`${testID}-clear`}
-            >
-              <AtomicIcon name="X" size="sm" color="secondary" />
-            </TouchableOpacity>
-          )}
-
-          {/* Dropdown Icon */}
-          <AtomicIcon
-            name={pickerState.modalVisible ? 'ChevronUp' : 'ChevronDown'}
-            size="sm"
-            color={disabled ? 'surfaceVariant' : 'secondary'}
-          />
-        </View>
+        <PickerIcons
+          clearable={clearable}
+          disabled={disabled}
+          modalVisible={pickerState.modalVisible}
+          selectedOptionsCount={pickerState.selectedOptions.length}
+          onClear={pickerState.handleClear}
+          clearAccessibilityLabel={clearAccessibilityLabel}
+          testID={testID}
+        />
       </TouchableOpacity>
 
       {/* Selected Chips (Multi-select) */}

package/src/atoms/datepicker/hooks/useDatePickerText.ts

@@ -0,0 +1,64 @@
+/**
+ * useDatePickerText Hook
+ * Handles date formatting and display text for date picker
+ */
+
+import { useMemo } from 'react';
+import type { DatepickerMode } from '../types';
+
+interface UseDatePickerTextProps {
+  value: Date | null;
+  placeholder: string;
+  mode: DatepickerMode;
+}
+
+interface UseDatePickerTextResult {
+  displayText: string;
+  formatDate: (date: Date) => string;
+}
+
+export const useDatePickerText = ({
+  value,
+  placeholder,
+  mode,
+}: UseDatePickerTextProps): UseDatePickerTextResult => {
+  /**
+   * Format date based on mode
+   * Uses native Date formatting (locale-aware)
+   */
+  const formatDate = useMemo(() => (date: Date): string => {
+    if (mode === 'time') {
+      return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    }
+    if (mode === 'datetime') {
+      const dateStr = date.toLocaleDateString([], {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+      const timeStr = date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+      return `${dateStr} ${timeStr}`;
+    }
+    return date.toLocaleDateString([], {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  }, [mode]);
+
+  /**
+   * Get display text for the button
+   */
+  const displayText = useMemo(() => {
+    if (!value) return placeholder;
+    return formatDate(value);
+  }, [value, placeholder, formatDate]);
+
+  return { displayText, formatDate };
+};

package/src/atoms/datepicker/styles/datePickerStyles.ts

@@ -0,0 +1,27 @@
+/**
+ * DatePicker Styles
+ * StyleSheet generator for AtomicDatePicker component
+ */
+
+import { StyleSheet } from 'react-native';
+import type { DesignTokens } from '../../theme';
+
+export const getDatePickerStyles = (tokens: DesignTokens) => {
+  return StyleSheet.create({
+    container: {
+      marginBottom: tokens.spacing.md,
+    },
+    label: {
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+      fontWeight: tokens.typography.semibold,
+      color: tokens.colors.onSurface,
+      marginBottom: tokens.spacing.sm,
+    },
+    errorText: {
+      fontSize: tokens.typography.bodySmall.responsiveFontSize,
+      color: tokens.colors.error,
+      marginTop: tokens.spacing.xs,
+      marginLeft: tokens.spacing.xs,
+    },
+  });
+};

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

@@ -0,0 +1,18 @@
+/**
+ * AtomicInput Styles
+ * StyleSheet for AtomicInput component
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const inputStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+    margin: 0,
+    padding: 0,
+  },
+});

package/src/atoms/picker/components/PickerIcons.tsx

@@ -0,0 +1,56 @@
+/**
+ * Picker Icons Component
+ * Renders clear button and dropdown icon for AtomicPicker
+ */
+
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import { AtomicIcon } from '../AtomicIcon';
+import type { PickerOption } from '../picker/types';
+
+interface PickerIconsProps {
+  clearable: boolean;
+  disabled: boolean;
+  modalVisible: boolean;
+  selectedOptionsCount: number;
+  onClear: () => void;
+  clearAccessibilityLabel?: string;
+  testID?: string;
+}
+
+export const PickerIcons: React.FC<PickerIconsProps> = ({
+  clearable,
+  disabled,
+  modalVisible,
+  selectedOptionsCount,
+  onClear,
+  clearAccessibilityLabel,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
+      {/* Clear Button */}
+      {clearable && selectedOptionsCount > 0 && !disabled && (
+        <TouchableOpacity
+          onPress={onClear}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          accessibilityRole="button"
+          accessibilityLabel={clearAccessibilityLabel}
+          testID={`${testID}-clear`}
+        >
+          <AtomicIcon name="X" size="sm" color="secondary" />
+        </TouchableOpacity>
+      )}
+
+      {/* Dropdown Icon */}
+      <AtomicIcon
+        name={modalVisible ? 'ChevronUp' : 'ChevronDown'}
+        size="sm"
+        color={disabled ? 'surfaceVariant' : 'secondary'}
+      />
+    </View>
+  );
+};