@idealyst/datepicker 1.0.41 → 1.0.59

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.0.41",
+  "version": "1.0.59",
   "description": "Cross-platform date and time picker components for React and React Native",
-  "documentation": "https://github.com/your-username/idealyst-framework/tree/main/packages/datepicker#readme",
+  "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/datepicker#readme",
+  "readme": "README.md",
   "main": "src/index.ts",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "react-native": "src/index.native.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-username/idealyst-framework.git",
+    "url": "https://github.com/IdealystIO/idealyst-framework.git",
     "directory": "packages/datepicker"
   },
   "author": "Your Name <your.email@example.com>",
@@ -35,8 +36,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.40",
-    "@idealyst/theme": "^1.0.40",
+    "@idealyst/components": "^1.0.59",
+    "@idealyst/theme": "^1.0.59",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-svg": ">=13.0.0",
@@ -78,4 +79,4 @@
     "cross-platform",
     "picker"
   ]
-}
+}

package/src/DateInput/DateInput.native.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, TextInput, 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 = 'medium',
+    variant = 'outlined',
+    disabled = false,
+    style,
+    inputStyle,
+    testID,
+    ...baseProps
+  } = props;
+
+  // Determine input style based on state
+  const getInputStyle = () => {
+    const styles = [dateInputStyles.input];
+    
+    if (disabled) {
+      styles.push(dateInputStyles.inputDisabled);
+    } else if (error) {
+      styles.push(dateInputStyles.inputError);
+    }
+    
+    return styles;
+  };
+
+  return (
+    <View style={style} testID={testID}>
+      {label && (
+        <Text style={dateInputStyles.label} testID={testID ? `${testID}-label` : undefined}>
+          {label}
+        </Text>
+      )}
+      
+      <DateInputBase
+        {...baseProps}
+        disabled={disabled}
+        testID={testID}
+        renderInput={({
+          value,
+          onChangeText,
+          onFocus,
+          onBlur,
+          placeholder,
+          editable,
+          style: inputStyleProp,
+          testID: inputTestID,
+        }) => (
+          <TextInput
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            placeholder={placeholder}
+            editable={editable}
+            style={[...getInputStyle(), inputStyle]}
+            testID={inputTestID}
+            autoComplete="off"
+            autoCorrect={false}
+            spellCheck={false}
+            keyboardType="default"
+          />
+        )}
+      />
+      
+      {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/DateInput.styles.tsx

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const dateInputStyles = StyleSheet.create((theme) => ({
+  container: {
+    width: '100%',
+  },
+  
+  input: {
+    borderWidth: 1,
+    borderColor: theme.colors?.border?.primary || '#e5e7eb',
+    borderRadius: theme.borderRadius?.md || 8,
+    paddingHorizontal: theme.spacing?.md || 12,
+    paddingVertical: theme.spacing?.sm || 8,
+    fontSize: theme.typography?.sizes?.medium || 16,
+    color: theme.colors?.text?.primary || '#1f2937',
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+    
+    _web: {
+      outlineStyle: 'none',
+      cursor: 'text',
+      border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
+    },
+  },
+  
+  inputError: {
+    borderColor: theme.colors?.text?.error || '#dc2626',
+    borderWidth: 2,
+    
+    _web: {
+      border: `2px solid ${theme.colors?.text?.error || '#dc2626'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
+    },
+  },
+  
+  inputFocused: {
+    borderColor: theme.colors?.primary || '#3b82f6',
+    borderWidth: 2,
+    
+    _web: {
+      border: `2px solid ${theme.colors?.primary || '#3b82f6'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
+    },
+  },
+  
+  inputDisabled: {
+    backgroundColor: theme.colors?.surface?.disabled || '#f9fafb',
+    color: theme.colors?.text?.disabled || '#9ca3af',
+    borderColor: theme.colors?.border?.disabled || '#d1d5db',
+    
+    _web: {
+      cursor: 'not-allowed',
+      border: `1px solid ${theme.colors?.border?.disabled || '#d1d5db'}`,
+      borderWidth: undefined,
+      borderColor: undefined,
+    },
+  },
+  
+  label: {
+    fontSize: theme.typography?.sizes?.small || 14,
+    color: theme.colors?.text?.primary || '#1f2937',
+    marginBottom: theme.spacing?.xs || 4,
+    fontWeight: '500',
+  },
+  
+  helperText: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.text?.secondary || '#6b7280',
+    marginTop: theme.spacing?.xs || 4,
+  },
+  
+  errorText: {
+    fontSize: theme.typography?.sizes?.small || 12,
+    color: theme.colors?.text?.error || '#dc2626',
+    marginTop: theme.spacing?.xs || 4,
+  },
+}));

package/src/DateInput/DateInput.web.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { View, TextInput, 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 = 'medium',
+    variant = 'outlined',
+    disabled = false,
+    style,
+    inputStyle,
+    testID,
+    ...baseProps
+  } = props;
+
+  // Determine input style based on state
+  const getInputStyle = () => {
+    const styles = [dateInputStyles.input];
+    
+    if (disabled) {
+      styles.push(dateInputStyles.inputDisabled);
+    } else if (error) {
+      styles.push(dateInputStyles.inputError);
+    }
+    
+    return styles;
+  };
+
+  return (
+    <View style={style} testID={testID}>
+      {label && (
+        <Text style={dateInputStyles.label} testID={testID ? `${testID}-label` : undefined}>
+          {label}
+        </Text>
+      )}
+      
+      <DateInputBase
+        {...baseProps}
+        disabled={disabled}
+        testID={testID}
+        renderInput={({
+          value,
+          onChangeText,
+          onFocus,
+          onBlur,
+          placeholder,
+          editable,
+          style: inputStyleProp,
+          testID: inputTestID,
+        }) => (
+          <TextInput
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            placeholder={placeholder}
+            editable={editable}
+            style={[...getInputStyle(), inputStyle]}
+            testID={inputTestID}
+            autoComplete="off"
+            autoCorrect={false}
+            spellCheck={false}
+          />
+        )}
+      />
+      
+      {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

@@ -0,0 +1,230 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { View, TextInput } from '@idealyst/components';
+import { DateInputProps } from './types';
+import { dateInputStyles } from './DateInput.styles';
+
+interface DateInputBaseProps extends DateInputProps {
+  renderInput: (props: {
+    value: string;
+    onChangeText: (text: string) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    placeholder?: string;
+    editable: boolean;
+    style?: any;
+    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,
+  renderInput,
+}) => {
+  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}>
+      {renderInput({
+        value: inputValue,
+        onChangeText: handleChangeText,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        placeholder,
+        editable: !disabled,
+        style: inputStyleProp,
+        testID: testID ? `${testID}-input` : undefined,
+      })}
+    </View>
+  );
+};

package/src/DateInput/index.native.ts

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

package/src/DateInput/index.ts

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

package/src/DateInput/types.ts

@@ -0,0 +1,60 @@
+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?: 'small' | 'medium' | 'large';
+  
+  /** 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/DateTimePicker/DateTimePickerBase.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, Button } from '@idealyst/components';
+import { View, Button } from '@idealyst/components';
 import { DateTimePickerProps } from './types';
 import { dateTimePickerStyles } from './DateTimePicker.styles';
 import { getDimensions, addEventListener } from './utils/dimensions';
@@ -90,37 +90,10 @@ export const DateTimePickerBase: React.FC<DateTimePickerBaseProps> = ({
     }
   }, [value, onChange]);
 
-  const formatSelectedDateTime = () => {
-    if (!value) return 'No date/time selected';
-    
-    const dateStr = value.toLocaleDateString('en-US', { 
-      weekday: 'short',
-      month: 'short', 
-      day: 'numeric',
-      year: 'numeric'
-    });
-    
-    const timeStr = value.toLocaleTimeString('en-US', { 
-      hour: 'numeric', 
-      minute: '2-digit',
-      hour12: timeMode === '12h' 
-    });
-    
-    return `${dateStr} at ${timeStr}`;
-  };
-
   // Side-by-side layout for larger screens
   if (viewMode === 'responsive' && shouldUseSideBySide) {
     return (
       <View style={[dateTimePickerStyles.container, style]} testID={testID} data-testid={testID}>
-        {/* Selected DateTime Header */}
-        <View style={dateTimePickerStyles.selectedDateTimeHeader}>
-          <Text style={dateTimePickerStyles.selectedDateTimeLabel}>Selected Date & Time</Text>
-          <Text style={dateTimePickerStyles.selectedDateTimeValue}>
-            {formatSelectedDateTime()}
-          </Text>
-        </View>
-
         {/* Side by side layout */}
         <View style={{ 
           flexDirection: 'row', 
@@ -159,16 +132,6 @@ export const DateTimePickerBase: React.FC<DateTimePickerBaseProps> = ({
 
   return (
     <View style={[dateTimePickerStyles.container, style]} testID={testID} data-testid={testID}>
-      {/* Selected DateTime Header */}
-      <View style={dateTimePickerStyles.selectedDateTimeHeader}>
-        <Text style={dateTimePickerStyles.selectedDateTimeLabel}>
-          {isDateStep ? 'Select Date' : isTimeStep ? 'Select Time' : 'Selected Date & Time'}
-        </Text>
-        <Text style={dateTimePickerStyles.selectedDateTimeValue}>
-          {formatSelectedDateTime()}
-        </Text>
-      </View>
-
       {/* Step Navigation */}
       <View style={{
         flexDirection: 'row',

package/src/DateTimeRangePicker/DateTimeRangePickerBase.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, Button } from '@idealyst/components';
+import { View, Button } from '@idealyst/components';
 import { DateTimeRangePickerProps, DateTimeRange } from './types';
 import { dateTimeRangePickerStyles } from './DateTimeRangePicker.styles';
 import { timePickerStyles } from '../DateTimePicker/TimePicker.styles';
@@ -122,40 +122,6 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
     }
   }, [value, onChange]);
 
-  const formatSelectedRange = () => {
-    if (!value?.startDate) return 'No date range selected';
-    
-    const startStr = value.startDate.toLocaleDateString('en-US', { 
-      month: 'short', 
-      day: 'numeric',
-      year: 'numeric'
-    });
-    
-    const startTimeStr = value.startDate.toLocaleTimeString('en-US', { 
-      hour: 'numeric', 
-      minute: '2-digit',
-      hour12: timeMode === '12h' 
-    });
-    
-    if (!value.endDate) {
-      return `${startStr} at ${startTimeStr} - (end date not selected)`;
-    }
-    
-    const endStr = value.endDate.toLocaleDateString('en-US', { 
-      month: 'short', 
-      day: 'numeric',
-      year: 'numeric'
-    });
-    
-    const endTimeStr = value.endDate.toLocaleTimeString('en-US', { 
-      hour: 'numeric', 
-      minute: '2-digit',
-      hour12: timeMode === '12h' 
-    });
-    
-    return `${startStr} ${startTimeStr} - ${endStr} ${endTimeStr}`;
-  };
-
   // Initialize styles
   timePickerStyles.useVariants({});
 
@@ -163,14 +129,6 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
   if (viewMode === 'responsive' && shouldUseSideBySide) {
     return (
       <View style={[dateTimeRangePickerStyles.container, style]} testID={testID} data-testid={testID}>
-        {/* Selected Range Header */}
-        <View style={dateTimeRangePickerStyles.selectedRangeHeader}>
-          <Text style={dateTimeRangePickerStyles.selectedRangeLabel}>Selected Date & Time Range</Text>
-          <Text style={dateTimeRangePickerStyles.selectedRangeValue}>
-            {formatSelectedRange()}
-          </Text>
-        </View>
-
         {/* Side by side layout */}
         <View style={{ 
           flexDirection: 'row', 
@@ -257,18 +215,6 @@ export const DateTimeRangePickerBase: React.FC<DateTimeRangePickerBaseProps> = (
 
   return (
     <View style={[dateTimeRangePickerStyles.container, style]} testID={testID} data-testid={testID}>
-      {/* Selected Range Header */}
-      <View style={dateTimeRangePickerStyles.selectedRangeHeader}>
-        <Text style={dateTimeRangePickerStyles.selectedRangeLabel}>
-          {isDateStep ? 'Select Date Range' : 
-           isStartTimeStep ? 'Set Start Time' : 
-           isEndTimeStep ? 'Set End Time' : 'Selected Date & Time Range'}
-        </Text>
-        <Text style={dateTimeRangePickerStyles.selectedRangeValue}>
-          {formatSelectedRange()}
-        </Text>
-      </View>
-
       {/* Step Navigation */}
       <View style={timePickerStyles.tabBar}>
         <Button

package/src/index.native.ts

@@ -14,3 +14,7 @@ export type { DateRangePickerProps, RangeCalendarProps, DateRange } from './Date
 export { DateTimeRangePicker } from './DateTimeRangePicker/index.native';
 export type { DateTimeRangePickerProps, DateTimeRange } from './DateTimeRangePicker';
 
+// Date Input Component
+export { DateInput } from './DateInput/index.native';
+export type { DateInputProps } from './DateInput';
+

package/src/index.ts

@@ -14,3 +14,7 @@ export type { DateRangePickerProps, RangeCalendarProps, DateRange } from './Date
 export { DateTimeRangePicker } from './DateTimeRangePicker';
 export type { DateTimeRangePickerProps, DateTimeRange } from './DateTimeRangePicker';
 
+// Date Input Component
+export { DateInput } from './DateInput';
+export type { DateInputProps } from './DateInput';
+