@idealyst/datepicker 1.1.3 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Cross-platform date and time picker components for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/datepicker#readme",
   "readme": "README.md",
@@ -36,8 +36,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.1.3",
-    "@idealyst/theme": "^1.1.3",
+    "@idealyst/components": "^1.1.5",
+    "@idealyst/theme": "^1.1.5",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-svg": ">=13.0.0",
@@ -61,11 +61,12 @@
     }
   },
   "devDependencies": {
-    "@idealyst/components": "^1.1.3",
-    "@idealyst/theme": "^1.1.3",
+    "@idealyst/components": "^1.1.5",
+    "@idealyst/theme": "^1.1.5",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
     "react-native": "^0.80.1",
+    "react-native-svg": "^15.15.1",
     "react-native-unistyles": "^3.0.10",
     "typescript": "^5.0.0"
   },

package/src/DateInput.native.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, TextInput as RNTextInput } from 'react-native';
+import { View, Text, Button, Icon } from '@idealyst/components';
+import { DatePicker } from './DatePicker';
+import { datePickerStyles } from './styles';
+import type { DateInputProps } from './types';
+
+export const DateInput: React.FC<DateInputProps> = ({
+  value,
+  onChange,
+  label,
+  placeholder = 'MM/DD/YYYY',
+  minDate,
+  maxDate,
+  disabled = false,
+  error,
+  style,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  // Format date to string
+  const formatDate = (date: Date | undefined): string => {
+    if (!date) return '';
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${month}/${day}/${year}`;
+  };
+
+  // Parse string to date
+  const parseDate = (str: string): Date | null => {
+    const match = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+    if (!match) return null;
+    const [, month, day, year] = match;
+    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    if (isNaN(date.getTime())) return null;
+    return date;
+  };
+
+  // Sync input value with prop value
+  useEffect(() => {
+    setInputValue(formatDate(value ?? undefined));
+  }, [value]);
+
+  const handleInputChange = (newValue: string) => {
+    setInputValue(newValue);
+
+    // Try to parse and update if valid
+    const parsed = parseDate(newValue);
+    if (parsed) {
+      onChange(parsed);
+    }
+  };
+
+  const handleInputBlur = () => {
+    // On blur, reset to formatted value if invalid
+    const parsed = parseDate(inputValue);
+    if (!parsed && value) {
+      setInputValue(formatDate(value));
+    } else if (!parsed) {
+      setInputValue('');
+      onChange(null);
+    }
+  };
+
+  const handleDateSelect = (date: Date) => {
+    onChange(date);
+    setOpen(false);
+  };
+
+  return (
+    <View style={style}>
+      {label && (
+        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+          {label}
+        </Text>
+      )}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          borderWidth: 1,
+          borderColor: error ? '#ef4444' : '#d1d5db',
+          borderRadius: 6,
+          backgroundColor: disabled ? '#f3f4f6' : 'white',
+          overflow: 'hidden',
+        }}
+      >
+        <RNTextInput
+          value={inputValue}
+          onChangeText={handleInputChange}
+          onBlur={handleInputBlur}
+          placeholder={placeholder}
+          editable={!disabled}
+          style={{
+            flex: 1,
+            padding: 8,
+            paddingHorizontal: 12,
+            fontSize: 14,
+            backgroundColor: 'transparent',
+            color: disabled ? '#9ca3af' : '#111827',
+          }}
+        />
+        <Button
+          type="text"
+          size="sm"
+          onPress={() => !disabled && setOpen(true)}
+          disabled={disabled}
+          style={{ marginRight: 4 }}
+        >
+          <Icon name="calendar" size={18} />
+        </Button>
+      </View>
+      {error && (
+        <Text typography="caption" style={{ marginTop: 4, color: '#ef4444' }}>
+          {error}
+        </Text>
+      )}
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setOpen(false)}
+      >
+        <View
+          style={{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'rgba(0,0,0,0.5)',
+          }}
+        >
+          <View style={datePickerStyles.popoverContent}>
+            <DatePicker
+              value={value ?? undefined}
+              onChange={handleDateSelect}
+              minDate={minDate}
+              maxDate={maxDate}
+              disabled={disabled}
+            />
+            <Button
+              type="text"
+              onPress={() => setOpen(false)}
+              style={{ marginTop: 8 }}
+            >
+              Close
+            </Button>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};

package/src/DateInput.tsx

@@ -0,0 +1,2 @@
+// Platform-specific exports
+export { DateInput } from './DateInput.web';

package/src/DateInput.web.tsx

@@ -0,0 +1,146 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { View, Text, Button, Icon } from '@idealyst/components';
+import { PositionedPortal } from '@idealyst/components/internal';
+import { DatePicker } from './DatePicker';
+import { datePickerStyles } from './styles';
+import type { DateInputProps } from './types';
+
+export const DateInput: React.FC<DateInputProps> = ({
+  value,
+  onChange,
+  label,
+  placeholder = 'MM/DD/YYYY',
+  minDate,
+  maxDate,
+  disabled = false,
+  error,
+  style,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const triggerRef = useRef<HTMLDivElement>(null);
+
+  // Format date to string
+  const formatDate = (date: Date | undefined): string => {
+    if (!date) return '';
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const year = date.getFullYear();
+    return `${month}/${day}/${year}`;
+  };
+
+  // Parse string to date
+  const parseDate = (str: string): Date | null => {
+    const match = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+    if (!match) return null;
+    const [, month, day, year] = match;
+    const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    if (isNaN(date.getTime())) return null;
+    return date;
+  };
+
+  // Sync input value with prop value
+  useEffect(() => {
+    setInputValue(formatDate(value ?? undefined));
+  }, [value]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+
+    // Try to parse and update if valid
+    const parsed = parseDate(newValue);
+    if (parsed) {
+      onChange(parsed);
+    }
+  };
+
+  const handleInputBlur = () => {
+    // On blur, reset to formatted value if invalid
+    const parsed = parseDate(inputValue);
+    if (!parsed && value) {
+      setInputValue(formatDate(value));
+    } else if (!parsed) {
+      setInputValue('');
+      onChange(null);
+    }
+  };
+
+  const handleDateSelect = (date: Date) => {
+    onChange(date);
+    setOpen(false);
+  };
+
+  return (
+    <View style={style}>
+      {label && (
+        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+          {label}
+        </Text>
+      )}
+      <div
+        ref={triggerRef}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          border: `1px solid ${error ? '#ef4444' : '#d1d5db'}`,
+          borderRadius: 6,
+          backgroundColor: disabled ? '#f3f4f6' : 'white',
+          overflow: 'hidden',
+        }}
+      >
+        <input
+          type="text"
+          value={inputValue}
+          onChange={handleInputChange}
+          onBlur={handleInputBlur}
+          placeholder={placeholder}
+          disabled={disabled}
+          style={{
+            flex: 1,
+            padding: '8px 12px',
+            fontSize: 14,
+            border: 'none',
+            outline: 'none',
+            backgroundColor: 'transparent',
+            color: disabled ? '#9ca3af' : '#111827',
+          }}
+        />
+        <Button
+          type="text"
+          size="sm"
+          onPress={() => !disabled && setOpen(!open)}
+          disabled={disabled}
+          style={{ marginRight: 4 }}
+        >
+          <Icon name="calendar" size={18} />
+        </Button>
+      </div>
+      {error && (
+        <Text typography="caption" style={{ marginTop: 4, color: '#ef4444' }}>
+          {error}
+        </Text>
+      )}
+
+      <PositionedPortal
+        open={open}
+        anchor={triggerRef}
+        placement="bottom-start"
+        offset={4}
+        onClickOutside={() => setOpen(false)}
+        onEscapeKey={() => setOpen(false)}
+        zIndex={9999}
+      >
+        <View style={datePickerStyles.popoverContent}>
+          <DatePicker
+            value={value ?? undefined}
+            onChange={handleDateSelect}
+            minDate={minDate}
+            maxDate={maxDate}
+            disabled={disabled}
+          />
+        </View>
+      </PositionedPortal>
+    </View>
+  );
+};

package/src/DatePicker.tsx

@@ -0,0 +1,276 @@
+import React, { useMemo, useState } from 'react';
+import { View, Text, Button, Icon } from '@idealyst/components';
+import { datePickerStyles } from './styles';
+import type { DatePickerProps } from './types';
+
+const WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+type ViewMode = 'calendar' | 'months' | 'years';
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled = false,
+  style,
+}) => {
+  const [currentMonth, setCurrentMonth] = useState(() => value || new Date());
+  const [viewMode, setViewMode] = useState<ViewMode>('calendar');
+
+  datePickerStyles.useVariants({ disabled });
+
+  const { days, monthLabel, monthShort, year } = useMemo(() => {
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const startPadding = firstDay.getDay();
+    const daysInMonth = lastDay.getDate();
+
+    const days: Array<{ date: Date; isCurrentMonth: boolean }> = [];
+
+    // Previous month padding
+    const prevMonthEnd = new Date(year, month, 0);
+    for (let i = startPadding - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonthEnd.getDate() - i),
+        isCurrentMonth: false,
+      });
+    }
+
+    // Current month
+    for (let day = 1; day <= daysInMonth; day++) {
+      days.push({ date: new Date(year, month, day), isCurrentMonth: true });
+    }
+
+    // Next month padding (fill to complete last week)
+    const remaining = 7 - (days.length % 7);
+    if (remaining < 7) {
+      for (let day = 1; day <= remaining; day++) {
+        days.push({ date: new Date(year, month + 1, day), isCurrentMonth: false });
+      }
+    }
+
+    const monthLabel = firstDay.toLocaleDateString('en-US', {
+      month: 'short',
+      year: 'numeric',
+    });
+
+    return { days, monthLabel, monthShort: MONTHS[month], year };
+  }, [currentMonth]);
+
+  const isSelected = (date: Date): boolean => {
+    if (!value) return false;
+    return (
+      date.getDate() === value.getDate() &&
+      date.getMonth() === value.getMonth() &&
+      date.getFullYear() === value.getFullYear()
+    );
+  };
+
+  const isToday = (date: Date): boolean => {
+    const today = new Date();
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  };
+
+  const isDisabled = (date: Date): boolean => {
+    if (disabled) return true;
+    if (minDate && date < new Date(minDate.setHours(0, 0, 0, 0))) return true;
+    if (maxDate && date > new Date(maxDate.setHours(23, 59, 59, 999))) return true;
+    return false;
+  };
+
+  const goToPrevMonth = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
+  };
+
+  const goToNextMonth = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
+  };
+
+  const handleDayPress = (date: Date) => {
+    if (!isDisabled(date)) {
+      onChange(date);
+    }
+  };
+
+  const handleMonthSelect = (monthIndex: number) => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));
+    setViewMode('calendar');
+  };
+
+  const handleYearSelect = (selectedYear: number) => {
+    setCurrentMonth(new Date(selectedYear, currentMonth.getMonth(), 1));
+    setViewMode('months');
+  };
+
+  // Generate year range (10 years before and after current)
+  const yearRange = useMemo(() => {
+    const currentYear = currentMonth.getFullYear();
+    const startYear = Math.floor(currentYear / 10) * 10 - 10;
+    return Array.from({ length: 21 }, (_, i) => startYear + i);
+  }, [currentMonth]);
+
+  const goToPrevYearRange = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear() - 10, currentMonth.getMonth(), 1));
+  };
+
+  const goToNextYearRange = () => {
+    setCurrentMonth(new Date(currentMonth.getFullYear() + 10, currentMonth.getMonth(), 1));
+  };
+
+  // Render month selector
+  if (viewMode === 'months') {
+    return (
+      <View style={[datePickerStyles.calendar, style]}>
+        <View style={datePickerStyles.calendarHeader}>
+          <Button type="text" size="sm" onPress={() => setViewMode('calendar')} disabled={disabled}>
+            <Icon name="chevron-left" size={16} />
+          </Button>
+          <Button type="text" size="sm" onPress={() => setViewMode('years')} disabled={disabled}>
+            <Text typography="body2" weight="semibold">{year}</Text>
+          </Button>
+          <View style={{ width: 28 }} />
+        </View>
+        <View style={datePickerStyles.monthGrid}>
+          {MONTHS.map((month, index) => {
+            const isCurrentMonth = index === currentMonth.getMonth();
+            return (
+              <Button
+                key={month}
+                type={isCurrentMonth ? 'contained' : 'text'}
+                size="sm"
+                onPress={() => handleMonthSelect(index)}
+                disabled={disabled}
+                style={{ minWidth: 48, margin: 2 }}
+              >
+                <Text typography="caption" color={isCurrentMonth ? 'inverse' : 'primary'}>
+                  {month}
+                </Text>
+              </Button>
+            );
+          })}
+        </View>
+      </View>
+    );
+  }
+
+  // Render year selector
+  if (viewMode === 'years') {
+    return (
+      <View style={[datePickerStyles.calendar, style]}>
+        <View style={datePickerStyles.calendarHeader}>
+          <Button type="text" size="sm" onPress={goToPrevYearRange} disabled={disabled}>
+            <Icon name="chevron-left" size={16} />
+          </Button>
+          <Text typography="body2" weight="semibold">
+            {yearRange[0]} - {yearRange[yearRange.length - 1]}
+          </Text>
+          <Button type="text" size="sm" onPress={goToNextYearRange} disabled={disabled}>
+            <Icon name="chevron-right" size={16} />
+          </Button>
+        </View>
+        <View style={datePickerStyles.yearGrid}>
+          {yearRange.map((yr) => {
+            const isCurrentYear = yr === currentMonth.getFullYear();
+            return (
+              <Button
+                key={yr}
+                type={isCurrentYear ? 'contained' : 'text'}
+                size="sm"
+                onPress={() => handleYearSelect(yr)}
+                disabled={disabled}
+                style={{ minWidth: 48, margin: 2 }}
+              >
+                <Text typography="caption" color={isCurrentYear ? 'inverse' : 'primary'}>
+                  {yr}
+                </Text>
+              </Button>
+            );
+          })}
+        </View>
+      </View>
+    );
+  }
+
+  // Render calendar (default)
+  return (
+    <View style={[datePickerStyles.calendar, style]}>
+      {/* Header */}
+      <View style={datePickerStyles.calendarHeader}>
+        <Button type="text" size="sm" onPress={goToPrevMonth} disabled={disabled}>
+          <Icon name="chevron-left" size={16} />
+        </Button>
+        <Button type="text" size="sm" onPress={() => setViewMode('months')} disabled={disabled}>
+          <Text typography="body2" weight="semibold">
+            {monthShort} {year}
+          </Text>
+        </Button>
+        <Button type="text" size="sm" onPress={goToNextMonth} disabled={disabled}>
+          <Icon name="chevron-right" size={16} />
+        </Button>
+      </View>
+
+      {/* Weekday headers */}
+      <View style={datePickerStyles.weekdayRow}>
+        {WEEKDAYS.map((day, i) => (
+          <View key={i} style={datePickerStyles.weekdayCell}>
+            <Text typography="caption" color="secondary">
+              {day}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Calendar grid */}
+      <View style={datePickerStyles.calendarGrid}>
+        {days.map(({ date, isCurrentMonth }, index) => {
+          const selected = isSelected(date);
+          const today = isToday(date);
+          const dayDisabled = isDisabled(date);
+
+          return (
+            <View
+              key={index}
+              style={[
+                datePickerStyles.dayCell,
+                selected && {
+                  backgroundColor: '#3b82f6',
+                  borderRadius: 4,
+                },
+                !isCurrentMonth && { opacity: 0.3 },
+                today && !selected && {
+                  borderWidth: 1,
+                  borderColor: '#3b82f6',
+                  borderRadius: 4,
+                },
+                dayDisabled && { opacity: 0.3 },
+              ]}
+            >
+              <Button
+                type="text"
+                size="sm"
+                onPress={() => handleDayPress(date)}
+                disabled={dayDisabled}
+                style={{ minWidth: 24, minHeight: 24, padding: 0 }}
+              >
+                <Text
+                  typography="caption"
+                  color={selected ? 'inverse' : 'primary'}
+                >
+                  {date.getDate()}
+                </Text>
+              </Button>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+};

package/src/DateTimePicker.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { View, Text } from '@idealyst/components';
+import { DateInput } from './DateInput';
+import { TimeInput } from './TimeInput';
+import { datePickerStyles } from './styles';
+import type { DateTimePickerProps } from './types';
+
+export const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  value,
+  onChange,
+  label,
+  minDate,
+  maxDate,
+  timeMode = '12h',
+  minuteStep = 1,
+  disabled = false,
+  error,
+  style,
+}) => {
+  const handleDateChange = (date: Date | null) => {
+    if (!date) {
+      onChange(null);
+      return;
+    }
+    // Preserve time from current value, or use noon as default
+    const hours = value?.getHours() ?? 12;
+    const minutes = value?.getMinutes() ?? 0;
+    const updated = new Date(date);
+    updated.setHours(hours, minutes, 0, 0);
+    onChange(updated);
+  };
+
+  const handleTimeChange = (time: Date | null) => {
+    if (!time) {
+      // Only clear time component, keep date if it exists
+      if (value) {
+        const updated = new Date(value);
+        updated.setHours(12, 0, 0, 0);
+        onChange(updated);
+      }
+      return;
+    }
+    // Preserve date from current value, or use today
+    const baseDate = value || new Date();
+    const updated = new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth(),
+      baseDate.getDate(),
+      time.getHours(),
+      time.getMinutes(),
+      0,
+      0
+    );
+    onChange(updated);
+  };
+
+  return (
+    <View style={style}>
+      {label && (
+        <Text typography="body2" weight="medium" style={{ marginBottom: 4 }}>
+          {label}
+        </Text>
+      )}
+      <View style={datePickerStyles.inputRow}>
+        <View style={{ flex: 1 }}>
+          <DateInput
+            value={value ?? undefined}
+            onChange={handleDateChange}
+            placeholder="MM/DD/YYYY"
+            minDate={minDate}
+            maxDate={maxDate}
+            disabled={disabled}
+            error={error}
+          />
+        </View>
+        <View style={{ flex: 1 }}>
+          <TimeInput
+            value={value ?? undefined}
+            onChange={handleTimeChange}
+            placeholder={timeMode === '24h' ? '14:30' : '2:30 PM'}
+            mode={timeMode}
+            minuteStep={minuteStep}
+            disabled={disabled}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};