@idealyst/datepicker 1.1.3 → 1.1.5

package/src/DateInput/DateInput.web.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { View, Input, Text } from '@idealyst/components';
-import { DateInputBase } from './DateInputBase';
-import { DateInputProps } from './types';
-import { dateInputStyles } from './DateInput.styles';
-
-export const DateInput: React.FC<DateInputProps> = (props) => {
-  const {
-    label,
-    error,
-    helperText,
-    size = 'md',
-    variant = 'outlined',
-    disabled = false,
-    style,
-    inputStyle,
-    testID,
-    ...baseProps
-  } = props;
-
-
-  return (
-    <View style={style} testID={testID}>
-      {label && (
-        <Text style={dateInputStyles.label} testID={testID ? `${testID}-label` : undefined}>
-          {label}
-        </Text>
-      )}
-      
-      <DateInputBase {...baseProps} disabled={disabled} testID={testID}>
-        {({ value, onChangeText, onFocus, onBlur, placeholder, disabled: inputDisabled, testID: inputTestID }) => (
-          <Input
-            value={value}
-            onChangeText={onChangeText}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            placeholder={placeholder}
-            disabled={inputDisabled}
-            size={size}
-            variant={variant}
-            hasError={error ? true : false}
-            style={inputStyle}
-            testID={inputTestID}
-          />
-        )}
-      </DateInputBase>
-      
-      {error && (
-        <Text style={dateInputStyles.errorText} testID={testID ? `${testID}-error` : undefined}>
-          {error}
-        </Text>
-      )}
-      
-      {!error && helperText && (
-        <Text style={dateInputStyles.helperText} testID={testID ? `${testID}-helper` : undefined}>
-          {helperText}
-        </Text>
-      )}
-    </View>
-  );
-};

package/src/DateInput/DateInputBase.tsx

@@ -1,228 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { View } from '@idealyst/components';
-import { DateInputProps } from './types';
-import { dateInputStyles } from './DateInput.styles';
-
-interface DateInputBaseProps extends DateInputProps {
-  children: (props: {
-    value: string;
-    onChangeText: (text: string) => void;
-    onFocus: () => void;
-    onBlur: () => void;
-    placeholder?: string;
-    disabled: boolean;
-    testID?: string;
-  }) => React.ReactNode;
-}
-
-// Common date formats for parsing
-const DEFAULT_INPUT_FORMATS = [
-  'MM/dd/yyyy',
-  'M/d/yyyy', 
-  'MM/dd/yy',
-  'M/d/yy',
-  'yyyy-MM-dd',
-  'MM-dd-yyyy',
-  'M-d-yyyy',
-  'dd/MM/yyyy',
-  'd/M/yyyy',
-  'dd-MM-yyyy',
-  'd-M-yyyy',
-  'yyyy/MM/dd',
-  'MMM dd, yyyy',
-  'MMM d, yyyy',
-  'MMMM dd, yyyy',
-  'MMMM d, yyyy',
-];
-
-const DEFAULT_DISPLAY_FORMAT = 'MMMM d, yyyy';
-
-export const DateInputBase: React.FC<DateInputBaseProps> = ({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  disabled = false,
-  placeholder = 'Enter date...',
-  displayFormat = DEFAULT_DISPLAY_FORMAT,
-  inputFormats = DEFAULT_INPUT_FORMATS,
-  locale = 'en-US',
-  style,
-  testID,
-  onFocus,
-  onBlur,
-  children,
-}) => {
-  const [inputValue, setInputValue] = useState('');
-  const [isFocused, setIsFocused] = useState(false);
-  const [hasError, setHasError] = useState(false);
-  const inputRef = useRef<any>(null);
-
-  // Format date for display when not focused
-  const formatDateForDisplay = useCallback((date: Date) => {
-    try {
-      return date.toLocaleDateString(locale, {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      });
-    } catch {
-      return date.toLocaleDateString('en-US', {
-        year: 'numeric',
-        month: 'long', 
-        day: 'numeric',
-      });
-    }
-  }, [locale]);
-
-  // Parse date from various input formats
-  const parseDate = useCallback((dateString: string): Date | null => {
-    if (!dateString.trim()) return null;
-
-    // Try direct Date parsing first
-    const directParse = new Date(dateString);
-    if (!isNaN(directParse.getTime())) {
-      return directParse;
-    }
-
-    // Try common formats
-    const trimmed = dateString.trim();
-    
-    // Handle MM/dd/yyyy and variations
-    const slashFormats = [
-      /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,
-      /^(\d{1,2})\/(\d{1,2})\/(\d{2})$/,
-    ];
-    
-    for (const format of slashFormats) {
-      const match = trimmed.match(format);
-      if (match) {
-        const [, month, day, year] = match;
-        const fullYear = year.length === 2 ? 2000 + parseInt(year) : parseInt(year);
-        const date = new Date(fullYear, parseInt(month) - 1, parseInt(day));
-        if (!isNaN(date.getTime())) return date;
-      }
-    }
-
-    // Handle dd/MM/yyyy variations (European format)
-    const europeanMatch = trimmed.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
-    if (europeanMatch) {
-      const [, day, month, year] = europeanMatch;
-      const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-      if (!isNaN(date.getTime())) return date;
-    }
-
-    // Handle yyyy-MM-dd (ISO format)
-    const isoMatch = trimmed.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
-    if (isoMatch) {
-      const [, year, month, day] = isoMatch;
-      const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-      if (!isNaN(date.getTime())) return date;
-    }
-
-    // Handle dash formats
-    const dashFormats = [
-      /^(\d{1,2})-(\d{1,2})-(\d{4})$/,
-      /^(\d{4})-(\d{1,2})-(\d{1,2})$/,
-    ];
-    
-    for (const format of dashFormats) {
-      const match = trimmed.match(format);
-      if (match) {
-        const [, first, second, third] = match;
-        let date: Date;
-        
-        if (third.length === 4) {
-          // MM-dd-yyyy or dd-MM-yyyy
-          date = new Date(parseInt(third), parseInt(first) - 1, parseInt(second));
-        } else {
-          // yyyy-MM-dd
-          date = new Date(parseInt(first), parseInt(second) - 1, parseInt(third));
-        }
-        
-        if (!isNaN(date.getTime())) return date;
-      }
-    }
-
-    return null;
-  }, []);
-
-  // Validate date against constraints
-  const validateDate = useCallback((date: Date): boolean => {
-    if (minDate && date < minDate) return false;
-    if (maxDate && date > maxDate) return false;
-    return true;
-  }, [minDate, maxDate]);
-
-  // Update input value when value prop changes
-  useEffect(() => {
-    if (isFocused) {
-      // When focused, keep the raw input value
-      return;
-    }
-    
-    if (value) {
-      setInputValue(formatDateForDisplay(value));
-      setHasError(false);
-    } else {
-      setInputValue('');
-      setHasError(false);
-    }
-  }, [value, isFocused, formatDateForDisplay]);
-
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    // Switch to raw input format when focused
-    if (value) {
-      // Show in a common input format for editing
-      const editFormat = value.toLocaleDateString('en-US');
-      setInputValue(editFormat);
-    }
-    onFocus?.();
-  }, [value, onFocus]);
-
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    
-    if (inputValue.trim()) {
-      const parsedDate = parseDate(inputValue);
-      
-      if (parsedDate && validateDate(parsedDate)) {
-        onChange(parsedDate);
-        setHasError(false);
-      } else {
-        setHasError(true);
-        // Revert to previous valid value
-        if (value) {
-          setInputValue(formatDateForDisplay(value));
-        } else {
-          setInputValue('');
-        }
-      }
-    } else {
-      onChange(null);
-      setHasError(false);
-    }
-    
-    onBlur?.();
-  }, [inputValue, parseDate, validateDate, onChange, value, formatDateForDisplay, onBlur]);
-
-  const handleChangeText = useCallback((text: string) => {
-    setInputValue(text);
-    setHasError(false);
-  }, []);
-
-  return (
-    <View style={[dateInputStyles.container, style]} testID={testID}>
-      {children({
-        value: inputValue,
-        onChangeText: handleChangeText,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        placeholder,
-        disabled,
-        testID: testID ? `${testID}-input` : undefined,
-      })}
-    </View>
-  );
-};

package/src/DateInput/index.native.ts

@@ -1,2 +0,0 @@
-export { DateInput } from './DateInput.native';
-export type { DateInputProps } from './types';

package/src/DateInput/index.ts

@@ -1,2 +0,0 @@
-export { DateInput } from './DateInput.web';
-export type { DateInputProps } from './types';

package/src/DateInput/types.ts

@@ -1,60 +0,0 @@
-import { ViewStyle, TextStyle } from 'react-native';
-
-export interface DateInputProps {
-  /** Current selected date */
-  value?: Date;
-  
-  /** Called when date changes */
-  onChange: (date: Date | null) => void;
-  
-  /** Minimum selectable date */
-  minDate?: Date;
-  
-  /** Maximum selectable date */
-  maxDate?: Date;
-  
-  /** Disabled state */
-  disabled?: boolean;
-  
-  /** Placeholder text when no date is selected */
-  placeholder?: string;
-  
-  /** Label for the input */
-  label?: string;
-  
-  /** Error message to display */
-  error?: string;
-  
-  /** Helper text */
-  helperText?: string;
-  
-  /** Date format for display when not focused (default: 'MMMM d, yyyy') */
-  displayFormat?: string;
-  
-  /** Accepted input formats for parsing (default includes common formats) */
-  inputFormats?: string[];
-  
-  /** Locale for date formatting */
-  locale?: string;
-  
-  /** Size variant */
-  size?: 'sm' | 'md' | 'lg';
-  
-  /** Visual variant */
-  variant?: 'outlined' | 'filled';
-  
-  /** Custom styles */
-  style?: ViewStyle;
-  
-  /** Custom text input styles */
-  inputStyle?: TextStyle;
-  
-  /** Test ID for testing */
-  testID?: string;
-  
-  /** Called when input is focused */
-  onFocus?: () => void;
-  
-  /** Called when input is blurred */
-  onBlur?: () => void;
-}

package/src/DatePicker/Calendar.native.tsx

@@ -1,261 +0,0 @@
-import React, { useState, useMemo, useCallback, memo, useRef } from 'react';
-import { View, Text, Button } from '@idealyst/components';
-import { TouchableOpacity, StyleSheet } from 'react-native';
-import { CalendarProps } from './types';
-import { calendarStyles } from './Calendar.styles';
-
-// Memoized day cell component for better performance
-const DayCell = memo(({ 
-  date, 
-  isSelected, 
-  isDisabled, 
-  onPress,
-  dayButtonStyle,
-  textColorSelected,
-  textColorDefault
-}: {
-  date: Date | null;
-  isSelected: boolean;
-  isDisabled: boolean;
-  onPress: (date: Date) => void;
-  dayButtonStyle: any;
-  textColorSelected: string;
-  textColorDefault: string;
-}) => {
-  const handlePress = useCallback(() => {
-    if (date && !isDisabled) {
-      onPress(date);
-    }
-  }, [date, isDisabled, onPress]);
-
-  if (!date) {
-    return <View style={calendarStyles.dayCell} />;
-  }
-
-  return (
-    <View style={calendarStyles.dayCell}>
-      <TouchableOpacity
-        onPressIn={handlePress}
-        disabled={isDisabled}
-        style={[
-          dayButtonStyle,
-          isSelected && styles.selectedButton,
-          isDisabled && styles.disabledButton
-        ]}
-      >
-        <Text 
-          style={[
-            styles.dayText,
-            { color: isSelected ? textColorSelected : textColorDefault }
-          ]}
-        >
-          {date.getDate()}
-        </Text>
-      </TouchableOpacity>
-    </View>
-  );
-}, (prevProps, nextProps) => {
-  // Custom comparison function to prevent unnecessary re-renders
-  // Only re-render if the relevant props actually changed
-  return (
-    prevProps.date === nextProps.date &&
-    prevProps.isSelected === nextProps.isSelected &&
-    prevProps.isDisabled === nextProps.isDisabled &&
-    prevProps.onPress === nextProps.onPress
-  );
-});
-
-DayCell.displayName = 'DayCell';
-
-export const Calendar: React.FC<CalendarProps> = memo(({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  disabled = false,
-  currentMonth: controlledCurrentMonth,
-  onMonthChange,
-  style,
-  testID,
-}) => {
-  const [internalCurrentMonth, setInternalCurrentMonth] = useState(
-    controlledCurrentMonth || value || new Date()
-  );
-
-  const currentMonth = controlledCurrentMonth || internalCurrentMonth;
-
-  // Store latest callbacks in refs to avoid recreating functions
-  const onChangeRef = useRef(onChange);
-  const onMonthChangeRef = useRef(onMonthChange);
-  onChangeRef.current = onChange;
-  onMonthChangeRef.current = onMonthChange;
-
-  const handleMonthChange = useCallback((newMonth: Date) => {
-    if (onMonthChangeRef.current) {
-      onMonthChangeRef.current(newMonth);
-    } else {
-      setInternalCurrentMonth(newMonth);
-    }
-  }, []);
-
-  // Memoize calendar data calculation with selection state
-  const { calendarDays, monthName } = useMemo(() => {
-    const monthStart = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);
-    const monthEnd = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0);
-    const daysInMonth = monthEnd.getDate();
-    const startingDayOfWeek = monthStart.getDay();
-    
-    // Pre-calculate all calendar days with their states
-    const days: Array<{
-      date: Date | null;
-      isSelected: boolean;
-      isDisabled: boolean;
-      key: string;
-    }> = [];
-    
-    // Add empty cells for days before month starts
-    for (let i = 0; i < startingDayOfWeek; i++) {
-      days.push({
-        date: null,
-        isSelected: false,
-        isDisabled: false,
-        key: `empty-${i}`
-      });
-    }
-    
-    // Add days of the month with pre-calculated states
-    for (let day = 1; day <= daysInMonth; day++) {
-      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
-      const dateTime = date.getTime();
-      
-      // Pre-calculate selection state
-      const isSelected = value ? (
-        date.getDate() === value.getDate() &&
-        date.getMonth() === value.getMonth() &&
-        date.getFullYear() === value.getFullYear()
-      ) : false;
-      
-      // Pre-calculate disabled state
-      const isDisabled = disabled ||
-        (minDate && dateTime < minDate.getTime()) ||
-        (maxDate && dateTime > maxDate.getTime());
-      
-      days.push({
-        date,
-        isSelected,
-        isDisabled: !!isDisabled,
-        key: `${date.getFullYear()}-${date.getMonth()}-${day}`
-      });
-    }
-
-    const name = currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-    
-    return { calendarDays: days, monthName: name };
-  }, [currentMonth, value, disabled, minDate, maxDate]);
-
-
-  const handleDateClick = useCallback((date: Date) => {
-    onChangeRef.current(date);
-  }, []);
-
-  const goToPreviousMonth = useCallback(() => {
-    const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
-    handleMonthChange(newMonth);
-  }, [currentMonth, handleMonthChange]);
-
-  const goToNextMonth = useCallback(() => {
-    const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
-    handleMonthChange(newMonth);
-  }, [currentMonth, handleMonthChange]);
-
-  // Use Unistyles
-  calendarStyles.useVariants({});
-
-  // Pre-calculate styles to avoid inline objects
-  const dayButtonStyle = calendarStyles.dayButton;
-
-  return (
-    <View style={[calendarStyles.container, style]} testID={testID}>
-      {/* Header */}
-      <View style={calendarStyles.header}>
-        <Button 
-          variant="text" 
-          size="sm" 
-          onPress={goToPreviousMonth} 
-          disabled={disabled}
-          style={calendarStyles.headerButton}
-        >
-          ←
-        </Button>
-        <Text weight="semibold">{monthName}</Text>
-        <Button 
-          variant="text" 
-          size="sm" 
-          onPress={goToNextMonth} 
-          disabled={disabled}
-          style={calendarStyles.headerButton}
-        >
-          →
-        </Button>
-      </View>
-
-      {/* Weekday headers */}
-      <View style={calendarStyles.weekdayHeader}>
-        {weekdays.map((day) => (
-          <View key={day} style={calendarStyles.weekdayCell}>
-            <Text style={calendarStyles.weekdayText}>
-              {day}
-            </Text>
-          </View>
-        ))}
-      </View>
-
-      {/* Calendar grid */}
-      <View style={calendarStyles.calendarGrid}>
-        {calendarDays.map((dayInfo) => (
-          <DayCell
-            key={dayInfo.key}
-            date={dayInfo.date}
-            isSelected={dayInfo.isSelected}
-            isDisabled={dayInfo.isDisabled}
-            onPress={handleDateClick}
-            dayButtonStyle={dayButtonStyle}
-            textColorSelected="#ffffff"
-            textColorDefault="#000000"
-          />
-        ))}
-      </View>
-    </View>
-  );
-}, (prevProps, nextProps) => {
-  // Custom comparison to prevent unnecessary re-renders
-  // Skip checking callbacks since we handle them with refs
-  return (
-    prevProps.value?.getTime() === nextProps.value?.getTime() &&
-    prevProps.minDate?.getTime() === nextProps.minDate?.getTime() &&
-    prevProps.maxDate?.getTime() === nextProps.maxDate?.getTime() &&
-    prevProps.disabled === nextProps.disabled &&
-    prevProps.currentMonth?.getTime() === nextProps.currentMonth?.getTime() &&
-    prevProps.style === nextProps.style &&
-    prevProps.testID === nextProps.testID
-  );
-});
-
-Calendar.displayName = 'Calendar';
-
-// Static weekday labels
-const weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-
-// Pre-defined styles to avoid inline style objects
-const styles = StyleSheet.create({
-  selectedButton: {
-    backgroundColor: '#3b82f6'
-  },
-  disabledButton: {
-    opacity: 0.5
-  },
-  dayText: {
-    fontSize: 13,
-    textAlign: 'center'
-  }
-});