@idealyst/datepicker 1.0.0

package/README.md

@@ -0,0 +1,88 @@
+# @idealyst/datepicker
+
+Cross-platform date and time picker components for React and React Native.
+
+## Installation
+
+```bash
+npm install @idealyst/datepicker
+# or
+yarn add @idealyst/datepicker
+```
+
+## Peer Dependencies
+
+```bash
+npm install @idealyst/components @idealyst/theme react-native-unistyles
+```
+
+## Components
+
+### DatePicker
+
+A single date selection component with calendar popup.
+
+```tsx
+import { DatePicker } from '@idealyst/datepicker';
+
+function MyComponent() {
+  const [date, setDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      value={date}
+      onChange={setDate}
+      label="Select Date"
+      placeholder="Choose a date"
+    />
+  );
+}
+```
+
+### Coming Soon
+
+- **DateTimePicker**: Select date and time
+- **DateRangePicker**: Select a range of dates  
+- **DateTimeRangePicker**: Select a range of dates with times
+
+## Features
+
+- ✅ Cross-platform (React & React Native)
+- ✅ Theme integration with Unistyles
+- ✅ Accessibility support
+- ✅ Keyboard navigation
+- ✅ Min/max date restrictions
+- ✅ Multiple size variants
+- ✅ Customizable date formats
+- ✅ TypeScript support
+
+## API Reference
+
+### DatePicker Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Date \| undefined` | - | Current selected date |
+| `onChange` | `(date: Date \| null) => void` | - | Called when date changes |
+| `minDate` | `Date` | - | Minimum selectable date |
+| `maxDate` | `Date` | - | Maximum selectable date |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `placeholder` | `string` | `'Select date'` | Placeholder text |
+| `label` | `string` | - | Label for the picker |
+| `error` | `string` | - | Error message |
+| `helperText` | `string` | - | Helper text |
+| `format` | `string` | `'MM/dd/yyyy'` | Date display format |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size variant |
+| `variant` | `'outlined' \| 'filled'` | `'outlined'` | Visual variant |
+
+## Examples
+
+See the examples directory or import examples:
+
+```tsx
+import { DatePickerExamples } from '@idealyst/datepicker/examples';
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@idealyst/datepicker",
+  "version": "1.0.0",
+  "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",
+  "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",
+    "directory": "packages/datepicker"
+  },
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "react-native": "./src/index.native.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./examples": {
+      "import": "./src/examples/index.ts",
+      "require": "./src/examples/index.ts",
+      "types": "./src/examples/index.ts"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "echo 'Publishing TypeScript source directly'",
+    "publish:npm": "npm publish"
+  },
+  "peerDependencies": {
+    "@idealyst/components": "^1.0.40",
+    "@idealyst/theme": "^1.0.40",
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-unistyles": "^3.0.4"
+  },
+  "peerDependenciesMeta": {
+    "@idealyst/components": {
+      "optional": false
+    },
+    "@idealyst/theme": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-unistyles": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "datepicker",
+    "timepicker",
+    "date-range",
+    "datetime",
+    "calendar",
+    "cross-platform",
+    "picker"
+  ]
+}

package/src/DatePicker/Calendar.native.tsx

@@ -0,0 +1,159 @@
+import React, { useState, useMemo } from 'react';
+import { View, Text, Button } from '@idealyst/components';
+import { TouchableOpacity } from 'react-native';
+import { CalendarProps } from './types';
+import { calendarStyles } from './Calendar.styles';
+
+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 currentMonth = controlledCurrentMonth || internalCurrentMonth;
+
+  const handleMonthChange = (newMonth: Date) => {
+    if (onMonthChange) {
+      onMonthChange(newMonth);
+    } else {
+      setInternalCurrentMonth(newMonth);
+    }
+  };
+
+  const { monthStart, monthEnd, daysInMonth, startingDayOfWeek } = 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();
+    
+    return { monthStart, monthEnd, daysInMonth, startingDayOfWeek };
+  }, [currentMonth]);
+
+  const isDateDisabled = (date: Date): boolean => {
+    if (disabled) return true;
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+
+  const isDateSelected = (date: Date): boolean => {
+    if (!value) return false;
+    return (
+      date.getDate() === value.getDate() &&
+      date.getMonth() === value.getMonth() &&
+      date.getFullYear() === value.getFullYear()
+    );
+  };
+
+  const handleDateClick = (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 monthName = currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+
+  // Create calendar grid
+  const calendarDays = [];
+  
+  // Add empty cells for days before month starts
+  for (let i = 0; i < startingDayOfWeek; i++) {
+    calendarDays.push(null);
+  }
+  
+  // Add days of the month
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+    calendarDays.push(date);
+  }
+
+  // Use Unistyles
+  calendarStyles.useVariants({});
+
+  return (
+    <View style={[calendarStyles.container, style]} testID={testID}>
+      {/* Header */}
+      <View style={calendarStyles.header}>
+        <Button 
+          variant="text" 
+          size="small" 
+          onPress={goToPreviousMonth} 
+          disabled={disabled}
+          style={calendarStyles.headerButton}
+        >
+          ←
+        </Button>
+        <Text weight="semibold">{monthName}</Text>
+        <Button 
+          variant="text" 
+          size="small" 
+          onPress={goToNextMonth} 
+          disabled={disabled}
+          style={calendarStyles.headerButton}
+        >
+          →
+        </Button>
+      </View>
+
+      {/* Weekday headers */}
+      <View style={calendarStyles.weekdayHeader}>
+        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((day) => (
+          <View key={day} style={calendarStyles.weekdayCell}>
+            <Text style={calendarStyles.weekdayText}>
+              {day}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {/* Calendar grid */}
+      <View style={calendarStyles.calendarGrid}>
+        {calendarDays.map((date, index) => (
+          <View key={index} style={calendarStyles.dayCell}>
+            {date && (
+              <TouchableOpacity
+                onPress={() => handleDateClick(date)}
+                disabled={isDateDisabled(date)}
+                style={[
+                  calendarStyles.dayButton,
+                  {
+                    backgroundColor: isDateSelected(date) ? '#3b82f6' : 'transparent',
+                    opacity: isDateDisabled(date) ? 0.5 : 1,
+                  }
+                ]}
+              >
+                <Text 
+                  style={{ 
+                    color: isDateSelected(date) ? 'white' : 'black',
+                    fontSize: 13,
+                  }}
+                >
+                  {date.getDate()}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};

package/src/DatePicker/Calendar.styles.tsx

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

@@ -0,0 +1,154 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View } 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';
+
+
+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<View>(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);
+      }
+    }
+  };
+
+  return (
+    <View ref={containerRef} style={[calendarStyles.container, style]} 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}
+        />
+      )}
+    </View>
+  );
+};