@idealyst/datepicker 1.1.4 → 1.1.5

package/src/DatePicker/Calendar.styles.tsx

@@ -1,230 +0,0 @@
-import { AppTheme } from '@idealyst/theme';
-import { StyleSheet } from 'react-native-unistyles';
-
-export const calendarStyles = StyleSheet.create((theme: AppTheme) => ({
-  container: {
-    width: 256,
-    _web: {
-      position: 'relative',
-    }
-  },
-
-  header: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-
-  headerButton: {
-    minWidth: 32,
-    minHeight: 32,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-  },
-
-  headerTitle: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-
-  monthYearButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-  },
-
-  pickerContainer: {
-    marginBottom: 16,
-    padding: 12,
-    backgroundColor: theme.colors?.surface?.secondary || '#f9fafb',
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: theme.colors?.border?.primary || '#e5e7eb',
-    
-    // Web specific styles
-    _web: {
-      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
-      borderWidth: undefined,
-      borderColor: undefined,
-    },
-  },
-
-  monthPickerGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    width: '100%',
-    
-    // Web specific styles
-    _web: {
-      display: 'flex',
-      gap: 6,
-    },
-  },
-
-  yearPickerGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
-    maxHeight: 200,
-    width: '100%',
-    
-    // Web specific styles
-    _web: {
-      display: 'flex',
-      gap: 4,
-      overflowY: 'auto',
-    },
-  },
-
-  pickerButton: {
-    fontSize: 12,
-    paddingHorizontal: 6,
-    paddingVertical: 4,
-    minHeight: 32,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '30%',
-    marginBottom: 4,
-    
-    // Month buttons: 3 per row with equal spacing
-    variants: {
-      monthButton: {
-        true: {
-          _web: {
-            flex: '1 0 30%',
-            maxWidth: 'calc(33.333% - 4px)',
-            width: undefined,
-          },
-        },
-      },
-      yearButton: {
-        true: {
-          _web: {
-            flex: '1 0 22%',
-            maxWidth: 'calc(25% - 3px)',
-            width: undefined,
-          },
-        },
-      },
-    },
-    
-    // Web specific styles
-    _web: {
-      display: 'flex',
-      width: undefined,
-      marginBottom: undefined,
-    },
-  },
-
-  weekdayHeader: {
-    flexDirection: 'row',
-    marginBottom: 8,
-    
-    // Web specific styles
-    _web: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(7, 1fr)',
-      gap: 2,
-      flexDirection: undefined,
-    },
-  },
-
-  weekdayCell: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 4,
-    
-    // Web specific styles
-    _web: {
-      display: 'flex',
-      flex: undefined,
-    },
-  },
-
-  weekdayText: {
-    fontSize: 12,
-    fontWeight: '500',
-    color: theme.colors?.text?.secondary || '#6b7280',
-  },
-
-  calendarGrid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginBottom: 8,
-    
-    // Web specific styles
-    _web: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(7, 1fr)',
-      gap: 2,
-      flexDirection: undefined,
-      flexWrap: undefined,
-    },
-  },
-
-  dayCell: {
-    width: '14.28%', // 100% / 7 days
-    aspectRatio: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: 32,
-    
-    // Web specific styles
-    _web: {
-      display: 'flex',
-      width: undefined,
-    },
-  },
-
-  dayButton: {
-    width: 28,
-    height: 28,
-    minWidth: 28,
-    minHeight: 28,
-    padding: 0,
-    borderRadius: 6,
-    fontSize: 13,
-    alignItems: 'center',
-    justifyContent: 'center',
-    
-    variants: {
-      selected: {
-        true: {
-          fontWeight: '600',
-        },
-        false: {
-          fontWeight: '400',
-        },
-      },
-    },
-    
-    // Web specific styling
-    _web: {
-      width: '100%',
-      height: '100%',
-      maxWidth: 36,
-      maxHeight: 36,
-      display: 'flex',
-    },
-  },
-
-  todaySection: {
-    paddingTop: 12,
-    borderTopWidth: 1,
-    borderTopColor: theme.colors?.border?.secondary || '#f3f4f6',
-    
-    // Web specific border
-    _web: {
-      borderTop: `1px solid ${theme.colors?.border?.secondary || '#f3f4f6'}`,
-    },
-  },
-
-  todayButton: {
-    width: '100%',
-  },
-}));

package/src/DatePicker/Calendar.web.tsx

@@ -1,159 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { View, useMergeRefs } from '@idealyst/components';
-import { CalendarProps } from './types';
-import { CalendarHeader } from '../primitives/CalendarHeader';
-import { CalendarGrid } from '../primitives/CalendarGrid';
-import { CalendarOverlay } from '../primitives/CalendarOverlay';
-import { calendarStyles } from './Calendar.styles';
-import { getWebProps } from 'react-native-unistyles/web';
-
-
-export const Calendar: React.FC<CalendarProps> = ({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  disabled = false,
-  currentMonth: controlledCurrentMonth,
-  onMonthChange,
-  style,
-  testID,
-}) => {
-  const [internalCurrentMonth, setInternalCurrentMonth] = useState(
-    controlledCurrentMonth || value || new Date()
-  );
-  const [overlayMode, setOverlayMode] = useState<'month' | 'year' | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const currentMonth = controlledCurrentMonth || internalCurrentMonth;
-
-  // Close overlay when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setOverlayMode(null);
-      }
-    };
-
-    if (overlayMode) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [overlayMode]);
-
-  const handleMonthChange = (newMonth: Date) => {
-    if (onMonthChange) {
-      onMonthChange(newMonth);
-    } else {
-      setInternalCurrentMonth(newMonth);
-    }
-  };
-
-  const isDateDisabled = (date: Date): boolean => {
-    if (disabled) return true;
-    if (minDate && date < minDate) return true;
-    if (maxDate && date > maxDate) return true;
-    return false;
-  };
-
-  const handleDateSelect = (date: Date) => {
-    if (!isDateDisabled(date)) {
-      onChange(date);
-    }
-  };
-
-  const goToPreviousMonth = () => {
-    const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
-    handleMonthChange(newMonth);
-  };
-
-  const goToNextMonth = () => {
-    const newMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
-    handleMonthChange(newMonth);
-  };
-
-  const createDateWithDayAdjustment = (year: number, month: number, day: number): Date => {
-    // Get the last day of the target month
-    const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
-    // Use the smaller of the requested day or the last day of the month
-    const adjustedDay = Math.min(day, lastDayOfMonth);
-    return new Date(year, month, adjustedDay);
-  };
-
-  const handleMonthSelect = (monthIndex: number) => {
-    const newMonth = new Date(currentMonth.getFullYear(), monthIndex, 1);
-    handleMonthChange(newMonth);
-    
-    // Update the selected date if one exists
-    if (value) {
-      const newDate = createDateWithDayAdjustment(
-        currentMonth.getFullYear(),
-        monthIndex,
-        value.getDate()
-      );
-      if (!isDateDisabled(newDate)) {
-        onChange(newDate);
-      }
-    }
-  };
-
-  const handleYearSelect = (year: number) => {
-    const newMonth = new Date(year, currentMonth.getMonth(), 1);
-    handleMonthChange(newMonth);
-    
-    // Update the selected date if one exists
-    if (value) {
-      const newDate = createDateWithDayAdjustment(
-        year,
-        currentMonth.getMonth(),
-        value.getDate()
-      );
-      if (!isDateDisabled(newDate)) {
-        onChange(newDate);
-      }
-    }
-  };
-
-  const { ref: styleRef, ...containerProps } = getWebProps(calendarStyles.container);
-
-  const mergedRef = useMergeRefs(containerRef, styleRef);
-
-  return (
-    <div ref={mergedRef as any} {...containerProps} data-testid={testID}>
-      <CalendarHeader
-        currentMonth={currentMonth}
-        onPreviousMonth={goToPreviousMonth}
-        onNextMonth={goToNextMonth}
-        onMonthClick={() => setOverlayMode('month')}
-        onYearClick={() => setOverlayMode('year')}
-        disabled={disabled}
-      />
-
-      <CalendarGrid
-        currentMonth={currentMonth}
-        selectedDate={value}
-        onDateSelect={handleDateSelect}
-        onMonthChange={handleMonthChange}
-        minDate={minDate}
-        maxDate={maxDate}
-        disabled={disabled}
-      />
-
-      {/* Overlay for month/year selection */}
-      {overlayMode && (
-        <CalendarOverlay
-          mode={overlayMode}
-          currentMonth={currentMonth.getMonth()}
-          currentYear={currentMonth.getFullYear()}
-          onMonthSelect={handleMonthSelect}
-          onYearSelect={handleYearSelect}
-          onClose={() => setOverlayMode(null)}
-          disabled={disabled}
-        />
-      )}
-    </div>
-  );
-};

package/src/DatePicker/DatePicker.native.tsx

@@ -1,51 +0,0 @@
-import React, { useCallback, memo, useRef } from 'react';
-import { View, Text } from '@idealyst/components';
-import { DatePickerProps } from './types';
-import { Calendar } from './Calendar.native';
-import { datePickerStyles } from './DatePicker.styles';
-
-const DatePicker: React.FC<DatePickerProps> = memo(({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  disabled = false,
-  style,
-  testID,
-}) => {
-  // Store the latest onChange function in a ref to avoid recreating handleDateSelect
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  
-  // Stable callback that uses the latest onChange function
-  const handleDateSelect = useCallback((date: Date) => {
-    onChangeRef.current(date);
-  }, []); // Empty dependency array - this function never changes
-
-  return (
-    <Calendar
-      value={value}
-      onChange={handleDateSelect}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabled={disabled}
-      style={style}
-      testID={testID}
-    />
-  );
-}, (prevProps, nextProps) => {
-  // Custom comparison to reduce unnecessary re-renders
-  // Skip checking onChange since we handle it with a ref
-  return (
-    prevProps.value?.getTime() === nextProps.value?.getTime() &&
-    prevProps.minDate?.getTime() === nextProps.minDate?.getTime() &&
-    prevProps.maxDate?.getTime() === nextProps.maxDate?.getTime() &&
-    prevProps.disabled === nextProps.disabled &&
-    prevProps.style === nextProps.style &&
-    prevProps.testID === nextProps.testID
-  );
-});
-
-DatePicker.displayName = 'DatePicker';
-
-export default DatePicker;

package/src/DatePicker/DatePicker.styles.tsx

@@ -1,76 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-export const datePickerStyles = StyleSheet.create((theme) => ({
-  container: {
-    // Base container styles
-  },
-  
-  label: {
-    marginBottom: theme.spacing?.sm || 8,
-    fontSize: theme.typography?.fontSize?.sm || 14,
-    fontWeight: '500',
-    color: theme.colors?.text?.primary || '#1f2937',
-  },
-
-  picker: {
-    borderRadius: theme.borderRadius?.md || 8,
-    borderWidth: 1,
-    borderColor: theme.colors?.border?.primary || '#e5e7eb',
-    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-    padding: theme.spacing?.md || 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.1,
-    shadowRadius: 3,
-    elevation: 2,
-    
-    // Web specific styles
-    _web: {
-      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
-      borderWidth: undefined,
-      borderColor: undefined,
-      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
-      shadowColor: undefined,
-      shadowOffset: undefined,
-      shadowOpacity: undefined,
-      shadowRadius: undefined,
-      elevation: undefined,
-    },
-  },
-
-  selectedDateHeader: {
-    marginBottom: theme.spacing?.sm || 12,
-    paddingBottom: theme.spacing?.sm || 12,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors?.border?.secondary || '#f3f4f6',
-    
-    // Web specific border
-    _web: {
-      borderBottom: `1px solid ${theme.colors?.border?.secondary || '#f3f4f6'}`,
-    },
-  },
-
-  selectedDateLabel: {
-    fontSize: theme.typography?.fontSize?.sm || 12,
-    color: theme.colors?.text?.secondary || '#6b7280',
-    marginBottom: 4,
-  },
-
-  selectedDateValue: {
-    fontSize: theme.typography?.fontSize?.md || 16,
-    fontWeight: '600',
-    color: theme.colors?.text?.primary || '#1f2937',
-  },
-
-  errorText: {
-    marginTop: 4,
-    fontSize: theme.typography?.fontSize?.sm || 12,
-    color: theme.colors?.text?.error || '#dc2626',
-  },
-
-  helperText: {
-    marginTop: 4,
-    fontSize: theme.typography?.fontSize?.sm || 12,
-    color: theme.colors?.text?.secondary || '#6b7280',
-  },
-}));

package/src/DatePicker/DatePicker.web.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { DatePickerProps } from './types';
-import { Calendar } from './Calendar.web';
-
-const DatePicker: React.FC<DatePickerProps> = ({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  disabled = false,
-  style,
-  testID,
-}) => {
-  const handleDateSelect = (date: Date) => {
-    onChange(date);
-  };
-
-  return (
-    <Calendar
-      value={value}
-      onChange={handleDateSelect}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabled={disabled}
-      style={style}
-      testID={testID}
-    />
-  );
-};
-
-export default DatePicker;

package/src/DatePicker/index.native.ts

@@ -1,3 +0,0 @@
-export { default as DatePicker } from './DatePicker.native';
-export { Calendar } from './Calendar.native';
-export type { DatePickerProps, CalendarProps } from './types';

package/src/DatePicker/index.ts

@@ -1,3 +0,0 @@
-export { default as DatePicker } from './DatePicker.web';
-export { Calendar } from './Calendar.web';
-export type { DatePickerProps, CalendarProps } from './types';

package/src/DatePicker/types.ts

@@ -1,78 +0,0 @@
-import { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
-
-export interface DatePickerProps {
-  /** 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 picker */
-  label?: string;
-  
-  /** Error message to display */
-  error?: string;
-  
-  /** Helper text */
-  helperText?: string;
-  
-  /** Date format for display (default: 'MM/dd/yyyy') */
-  format?: string;
-  
-  /** Locale for date formatting */
-  locale?: string;
-  
-  /** Size variant */
-  size?: 'sm' | 'md' | 'lg';
-  
-  /** Visual variant */
-  variant?: 'outlined' | 'filled';
-  
-  /** Custom styles */
-  style?: ViewStyle;
-  
-  /** Test ID for testing */
-  testID?: string;
-}
-
-export interface CalendarProps {
-  /** Current selected date */
-  value?: Date;
-  
-  /** Called when date is selected */
-  onChange: (date: Date) => void;
-  
-  /** Minimum selectable date */
-  minDate?: Date;
-  
-  /** Maximum selectable date */
-  maxDate?: Date;
-  
-  /** Disabled state */
-  disabled?: boolean;
-  
-  /** Current month being viewed */
-  currentMonth?: Date;
-  
-  /** Called when month changes */
-  onMonthChange?: (month: Date) => void;
-  
-  /** Custom styles */
-  style?: ViewStyle;
-  
-  /** Test ID for testing */
-  testID?: string;
-}

package/src/DateRangePicker/DateRangePicker.native.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { View, Text } from '@idealyst/components';
-import { DateRangePickerProps, DateRange } from './types';
-import { RangeCalendar } from './RangeCalendar.native';
-import { dateRangePickerStyles } from './DateRangePicker.styles';
-
-const DateRangePicker: React.FC<DateRangePickerProps> = ({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  disabled = false,
-  allowSameDay = true,
-  maxDays,
-  style,
-  testID,
-}) => {
-
-  const handleRangeChange = (newRange: DateRange) => {
-    onChange(newRange.startDate || newRange.endDate ? newRange : null);
-  };
-
-
-  return (
-    <RangeCalendar
-      value={value || {}}
-      onChange={handleRangeChange}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabled={disabled}
-      allowSameDay={allowSameDay}
-      maxDays={maxDays}
-      style={style}
-      testID={testID}
-    />
-  );
-};
-
-export default DateRangePicker;