@idealyst/datepicker 1.0.0 → 1.0.58

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@idealyst/datepicker",
-  "version": "1.0.0",
+  "version": "1.0.58",
   "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,10 +36,11 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.40",
-    "@idealyst/theme": "^1.0.40",
+    "@idealyst/components": "^1.0.58",
+    "@idealyst/theme": "^1.0.58",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
+    "react-native-svg": ">=13.0.0",
     "react-native-unistyles": "^3.0.4"
   },
   "peerDependenciesMeta": {
@@ -51,6 +53,9 @@
     "react-native": {
       "optional": true
     },
+    "react-native-svg": {
+      "optional": true
+    },
     "react-native-unistyles": {
       "optional": true
     }

package/src/DateInput/DateInput.native.tsx

@@ -0,0 +1,80 @@
+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;
+
+  // Initialize styles
+  dateInputStyles.useVariants({
+    size,
+    variant,
+    state: disabled ? 'disabled' : error ? 'error' : undefined,
+  });
+
+  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={[inputStyleProp, 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,118 @@
+import { createStyleSheet } from 'react-native-unistyles';
+
+export const dateInputStyles = createStyleSheet((theme) => ({
+  container: {
+    width: '100%',
+  },
+  
+  input: {
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.radius.medium,
+    paddingHorizontal: theme.spacing.medium,
+    paddingVertical: theme.spacing.small,
+    fontSize: theme.typography.body.fontSize,
+    fontFamily: theme.typography.body.fontFamily,
+    color: theme.colors.text,
+    backgroundColor: theme.colors.background,
+    
+    variants: {
+      size: {
+        small: {
+          paddingHorizontal: theme.spacing.small,
+          paddingVertical: theme.spacing.xs,
+          fontSize: theme.typography.caption.fontSize,
+        },
+        medium: {
+          paddingHorizontal: theme.spacing.medium,
+          paddingVertical: theme.spacing.small,
+          fontSize: theme.typography.body.fontSize,
+        },
+        large: {
+          paddingHorizontal: theme.spacing.large,
+          paddingVertical: theme.spacing.medium,
+          fontSize: theme.typography.subtitle.fontSize,
+        },
+      },
+      
+      variant: {
+        outlined: {
+          borderWidth: 1,
+          backgroundColor: 'transparent',
+        },
+        filled: {
+          borderWidth: 0,
+          backgroundColor: theme.colors.surfaceVariant,
+        },
+      },
+      
+      state: {
+        focused: {
+          borderColor: theme.colors.primary,
+          borderWidth: 2,
+        },
+        disabled: {
+          backgroundColor: theme.colors.disabled,
+          color: theme.colors.onDisabled,
+          borderColor: theme.colors.outline,
+        },
+        error: {
+          borderColor: theme.colors.error,
+          borderWidth: 2,
+        },
+      },
+    },
+    
+    _web: {
+      outlineStyle: 'none',
+      cursor: 'text',
+      
+      ':focus': {
+        borderColor: theme.colors.primary,
+        borderWidth: 2,
+      },
+      
+      ':disabled': {
+        cursor: 'not-allowed',
+      },
+    },
+  },
+  
+  inputError: {
+    borderColor: theme.colors.error,
+    borderWidth: 2,
+  },
+  
+  inputFocused: {
+    borderColor: theme.colors.primary,
+    borderWidth: 2,
+  },
+  
+  inputDisabled: {
+    backgroundColor: theme.colors.disabled,
+    color: theme.colors.onDisabled,
+    borderColor: theme.colors.outline,
+  },
+  
+  label: {
+    fontSize: theme.typography.caption.fontSize,
+    fontFamily: theme.typography.caption.fontFamily,
+    color: theme.colors.onSurface,
+    marginBottom: theme.spacing.xs,
+    fontWeight: '500',
+  },
+  
+  helperText: {
+    fontSize: theme.typography.caption.fontSize,
+    fontFamily: theme.typography.caption.fontFamily,
+    color: theme.colors.onSurfaceVariant,
+    marginTop: theme.spacing.xs,
+  },
+  
+  errorText: {
+    fontSize: theme.typography.caption.fontSize,
+    fontFamily: theme.typography.caption.fontFamily,
+    color: theme.colors.error,
+    marginTop: theme.spacing.xs,
+  },
+}));

package/src/DateInput/DateInput.web.tsx

@@ -0,0 +1,79 @@
+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;
+
+  // Initialize styles
+  dateInputStyles.useVariants({
+    size,
+    variant,
+    state: disabled ? 'disabled' : error ? 'error' : undefined,
+  });
+
+  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={[inputStyleProp, 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,233 @@
+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: [
+          dateInputStyles.input,
+          hasError && dateInputStyles.inputError,
+        ],
+        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;
+}