@dreamstack-us/kaal 0.0.1 → 0.0.2

package/src/components/CalendarGrid/CalendarGrid.web.tsx

@@ -0,0 +1,305 @@
+/// <reference lib="dom" />
+import React, { memo, useCallback, useMemo } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useDatePickerOverrides } from '../../context/ThemeOverrideContext';
+import {
+  addMonths,
+  compareDates,
+  formatYearMonth,
+  getDayOfWeek,
+  getFirstDayOfMonth,
+  getMonthDays,
+  isSameDay,
+  today,
+} from '../../utils/date';
+import { DayCell } from './DayCell';
+
+interface CalendarGridProps {
+  value: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDates?: Date[];
+  themeMode: 'ios' | 'android' | 'custom';
+  /**
+   * First day of the week: 0 = Sunday, 1 = Monday
+   * @default 0 (Sunday)
+   *
+   * TODO: This is a temporary solution. In the future, we need to add full
+   * locale support to handle different calendar formats, layouts, and
+   * localized day/month names across different regions.
+   */
+  weekStartsOn?: 0 | 1;
+}
+
+const CELL_SIZE = 44;
+
+// Week day labels starting from Sunday
+const WEEK_DAYS_SUNDAY_START = [
+  'Sun',
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat',
+];
+const WEEK_DAYS_MONDAY_START = [
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat',
+  'Sun',
+];
+
+// Default colors (light theme for web)
+const DEFAULT_COLORS = {
+  backgroundColor: '#FFFFFF',
+  primaryColor: '#007AFF',
+  textColor: '#1C1C1E',
+  weekdayColor: '#8E8E93',
+  borderRadius: 14,
+  padding: 16,
+};
+
+/**
+ * Generate padding days for the month grid based on week start day
+ * TODO: This logic should be refactored when adding locale support
+ */
+const generateMonthDays = (
+  currentMonth: Date,
+  weekStartsOn: 0 | 1,
+): (Date | null)[] => {
+  const firstDay = getFirstDayOfMonth(currentMonth);
+  // getDayOfWeek returns 0 for Sunday, 1 for Monday, etc.
+  const dayOfWeek = getDayOfWeek(firstDay);
+
+  // Calculate padding days based on week start
+  let paddingDays: number;
+  if (weekStartsOn === 0) {
+    // Sunday start: Sunday = 0 padding, Monday = 1, etc.
+    paddingDays = dayOfWeek;
+  } else {
+    // Monday start: Monday = 0 padding, Sunday = 6 padding
+    paddingDays = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+  }
+
+  const days: (Date | null)[] = [];
+
+  for (let i = 0; i < paddingDays; i++) {
+    days.push(null);
+  }
+
+  const monthDays = getMonthDays(
+    currentMonth.getUTCFullYear(),
+    currentMonth.getUTCMonth(),
+  );
+  for (const day of monthDays) {
+    days.push(day);
+  }
+
+  const remaining = 7 - (days.length % 7);
+  if (remaining < 7) {
+    for (let i = 0; i < remaining; i++) {
+      days.push(null);
+    }
+  }
+
+  return days;
+};
+
+// Web-compatible styles (no unistyles dependency)
+const webStyles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 14,
+    padding: 16,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+    paddingHorizontal: 8,
+  },
+  navButton: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+  },
+  navText: {
+    fontSize: 24,
+    color: '#007AFF',
+    fontWeight: '600',
+  },
+  monthTitle: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#1C1C1E',
+  },
+  weekDays: {
+    flexDirection: 'row',
+    marginBottom: 8,
+  },
+  weekDayText: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#8E8E93',
+  },
+});
+
+export const CalendarGrid: React.FC<CalendarGridProps> = memo(
+  ({
+    value,
+    onChange,
+    minDate,
+    maxDate,
+    disabledDates,
+    themeMode,
+    weekStartsOn = 0,
+  }) => {
+    const overrides = useDatePickerOverrides();
+    const [currentMonth, setCurrentMonth] = React.useState(() =>
+      getFirstDayOfMonth(value),
+    );
+
+    const days = useMemo(
+      () => generateMonthDays(currentMonth, weekStartsOn),
+      [currentMonth, weekStartsOn],
+    );
+
+    const weekDays =
+      weekStartsOn === 0 ? WEEK_DAYS_SUNDAY_START : WEEK_DAYS_MONDAY_START;
+
+    const todayDate = useMemo(() => today(), []);
+
+    const isDisabled = useCallback(
+      (date: Date | null): boolean => {
+        if (!date) return true;
+        if (minDate && compareDates(date, minDate) < 0) return true;
+        if (maxDate && compareDates(date, maxDate) > 0) return true;
+        if (disabledDates?.some((d) => isSameDay(date, d))) return true;
+        return false;
+      },
+      [minDate, maxDate, disabledDates],
+    );
+
+    const navigateMonth = useCallback((direction: 1 | -1) => {
+      setCurrentMonth((prev) => addMonths(prev, direction));
+    }, []);
+
+    const renderDay = useCallback(
+      ({ item }: { item: Date | null }) => (
+        <DayCell
+          date={item}
+          isSelected={item ? isSameDay(item, value) : false}
+          isToday={item ? isSameDay(item, todayDate) : false}
+          isDisabled={isDisabled(item)}
+          isWeekend={
+            item ? getDayOfWeek(item) === 0 || getDayOfWeek(item) === 6 : false
+          }
+          onPress={item && !isDisabled(item) ? () => onChange(item) : undefined}
+        />
+      ),
+      [value, todayDate, isDisabled, onChange],
+    );
+
+    const keyExtractor = useCallback(
+      (item: Date | null, index: number) =>
+        item?.toISOString() ?? `empty-${index}`,
+      [],
+    );
+
+    const getItemLayout = useCallback(
+      (_data: ArrayLike<Date | null> | null | undefined, index: number) => ({
+        length: CELL_SIZE,
+        offset: CELL_SIZE * Math.floor(index / 7),
+        index,
+      }),
+      [],
+    );
+
+    // Build override styles
+    const containerStyle = useMemo(
+      () => ({
+        backgroundColor:
+          overrides?.backgroundColor ?? DEFAULT_COLORS.backgroundColor,
+        borderRadius: overrides?.borderRadius ?? DEFAULT_COLORS.borderRadius,
+        padding: overrides?.padding ?? DEFAULT_COLORS.padding,
+      }),
+      [overrides],
+    );
+
+    const navTextStyle = useMemo(
+      () => ({
+        color: overrides?.primaryColor ?? DEFAULT_COLORS.primaryColor,
+      }),
+      [overrides],
+    );
+
+    const monthTitleStyle = useMemo(
+      () => ({
+        color: overrides?.textColor ?? DEFAULT_COLORS.textColor,
+      }),
+      [overrides],
+    );
+
+    const weekDayTextStyle = useMemo(
+      () => ({
+        color: overrides?.textWeekendColor ?? DEFAULT_COLORS.weekdayColor,
+      }),
+      [overrides],
+    );
+
+    return (
+      <View style={[webStyles.container, containerStyle]}>
+        <View style={webStyles.header}>
+          <Pressable
+            onPress={() => navigateMonth(-1)}
+            style={webStyles.navButton}
+          >
+            <Text style={[webStyles.navText, navTextStyle]}>‹</Text>
+          </Pressable>
+          <Text style={[webStyles.monthTitle, monthTitleStyle]}>
+            {formatYearMonth(currentMonth)}
+          </Text>
+          <Pressable
+            onPress={() => navigateMonth(1)}
+            style={webStyles.navButton}
+          >
+            <Text style={[webStyles.navText, navTextStyle]}>›</Text>
+          </Pressable>
+        </View>
+
+        <View style={webStyles.weekDays}>
+          {weekDays.map((day) => (
+            <Text key={day} style={[webStyles.weekDayText, weekDayTextStyle]}>
+              {day}
+            </Text>
+          ))}
+        </View>
+
+        <FlatList
+          data={days}
+          renderItem={renderDay}
+          keyExtractor={keyExtractor}
+          getItemLayout={getItemLayout}
+          numColumns={7}
+          scrollEnabled={false}
+          removeClippedSubviews={true}
+          maxToRenderPerBatch={14}
+          windowSize={3}
+          initialNumToRender={42}
+        />
+      </View>
+    );
+  },
+);
+
+CalendarGrid.displayName = 'CalendarGrid';

package/src/components/CalendarGrid/DayCell.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
-import { memo } from 'react';
-import { Pressable, Text } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
+import { memo, useMemo } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { useDatePickerOverrides } from '../../context/ThemeOverrideContext';
 
 interface DayCellProps {
   date: Date | null;
@@ -12,78 +12,97 @@ interface DayCellProps {
   onPress?: () => void;
 }
 
-const styles = StyleSheet.create((theme) => ({
+// Default colors (dark theme)
+const DEFAULT_COLORS = {
+  cellBackground: 'transparent',
+  cellSelected: '#4DA6FF',
+  cellToday: '#1E3A5F',
+  textDefault: '#FFFFFF',
+  textSelected: '#FFFFFF',
+  textDisabled: '#555555',
+  textWeekend: '#8E8E93',
+  primary: '#4DA6FF',
+  cellBorderRadius: 22,
+};
+
+const styles = StyleSheet.create({
   cell: {
     width: 44,
     height: 44,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: theme.colors.datepicker.cellBackground,
-    variants: {
-      state: {
-        selected: {
-          backgroundColor: theme.colors.datepicker.cellSelected,
-          borderRadius: theme.radii.cell,
-        },
-        today: {
-          backgroundColor: theme.colors.datepicker.cellToday,
-          borderRadius: theme.radii.cell,
-          borderWidth: 1,
-          borderColor: theme.colors.primary.default,
-        },
-        disabled: {
-          opacity: 0.4,
-        },
-        weekend: {},
-      },
-    },
   },
   text: {
-    fontSize: theme.typography.dayCell.fontSize,
-    fontWeight: theme.typography.dayCell.fontWeight,
-    color: theme.colors.datepicker.textDefault,
-    variants: {
-      state: {
-        selected: {
-          color: theme.colors.datepicker.textSelected,
-          fontWeight: '600',
-        },
-        today: {
-          color: theme.colors.primary.default,
-          fontWeight: '600',
-        },
-        disabled: {
-          color: theme.colors.datepicker.textDisabled,
-        },
-        weekend: {
-          color: theme.colors.datepicker.textWeekend,
-        },
-      },
-    },
+    fontSize: 17,
+    fontWeight: '400',
   },
-}));
+});
 
 export const DayCell: React.FC<DayCellProps> = memo(
   ({ date, isSelected, isToday, isDisabled, isWeekend, onPress }) => {
+    const overrides = useDatePickerOverrides();
+
+    // Build cell style based on state and overrides
+    // Use primaryColor as fallback for cellSelectedColor (consumer expectation)
+    const cellStyle = useMemo(() => {
+      const style: Record<string, unknown> = {
+        backgroundColor: DEFAULT_COLORS.cellBackground,
+      };
+
+      if (isSelected) {
+        style.backgroundColor =
+          overrides?.cellSelectedColor ??
+          overrides?.primaryColor ??
+          DEFAULT_COLORS.cellSelected;
+        style.borderRadius =
+          overrides?.cellBorderRadius ?? DEFAULT_COLORS.cellBorderRadius;
+      } else if (isToday) {
+        style.backgroundColor =
+          overrides?.cellTodayColor ?? DEFAULT_COLORS.cellToday;
+        style.borderRadius =
+          overrides?.cellBorderRadius ?? DEFAULT_COLORS.cellBorderRadius;
+        style.borderWidth = 1;
+        style.borderColor = overrides?.primaryColor ?? DEFAULT_COLORS.primary;
+      }
+
+      if (isDisabled) {
+        style.opacity = 0.4;
+      }
+
+      return style;
+    }, [overrides, isSelected, isToday, isDisabled]);
+
+    // Build text style based on state and overrides
+    const textStyle = useMemo(() => {
+      const style: Record<string, unknown> = {
+        color: overrides?.textColor ?? DEFAULT_COLORS.textDefault,
+        fontWeight: '400' as const,
+      };
+
+      if (isSelected) {
+        style.color =
+          overrides?.textSelectedColor ?? DEFAULT_COLORS.textSelected;
+        style.fontWeight = '600';
+      } else if (isToday) {
+        style.color = overrides?.primaryColor ?? DEFAULT_COLORS.primary;
+        style.fontWeight = '600';
+      } else if (isDisabled) {
+        style.color =
+          overrides?.textDisabledColor ?? DEFAULT_COLORS.textDisabled;
+      } else if (isWeekend) {
+        style.color = overrides?.textWeekendColor ?? DEFAULT_COLORS.textWeekend;
+      }
+
+      return style;
+    }, [overrides, isSelected, isToday, isDisabled, isWeekend]);
+
     if (!date) {
       return <Pressable style={styles.cell} disabled />;
     }
 
-    const state = isDisabled
-      ? 'disabled'
-      : isSelected
-        ? 'selected'
-        : isToday
-          ? 'today'
-          : isWeekend
-            ? 'weekend'
-            : undefined;
-
-    styles.useVariants({ state });
-
     return (
       <Pressable
-        style={styles.cell}
+        style={[styles.cell, cellStyle]}
         onPress={onPress}
         disabled={isDisabled}
         accessibilityRole="button"
@@ -94,7 +113,7 @@ export const DayCell: React.FC<DayCellProps> = memo(
         }).format(date)}
         accessibilityState={{ selected: isSelected, disabled: isDisabled }}
       >
-        <Text style={styles.text}>{date.getUTCDate()}</Text>
+        <Text style={[styles.text, textStyle]}>{date.getUTCDate()}</Text>
       </Pressable>
     );
   },

package/src/components/CalendarGrid/DayCell.web.tsx

@@ -0,0 +1,129 @@
+/// <reference lib="dom" />
+import type React from 'react';
+import { memo, useMemo } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { useDatePickerOverrides } from '../../context/ThemeOverrideContext';
+
+interface DayCellProps {
+  date: Date | null;
+  isSelected: boolean;
+  isToday: boolean;
+  isDisabled: boolean;
+  isWeekend: boolean;
+  onPress?: () => void;
+}
+
+// Default colors (light theme for web)
+const DEFAULT_COLORS = {
+  cellBackground: 'transparent',
+  cellSelected: '#007AFF',
+  cellToday: 'rgba(0, 122, 255, 0.1)',
+  textDefault: '#1C1C1E',
+  textSelected: '#FFFFFF',
+  textDisabled: '#8E8E93',
+  textWeekend: '#8E8E93',
+  primary: '#007AFF',
+  cellBorderRadius: 22,
+};
+
+// Web-compatible styles (no unistyles dependency)
+const webStyles = StyleSheet.create({
+  cell: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 17,
+    fontWeight: '400',
+  },
+});
+
+export const DayCell: React.FC<DayCellProps> = memo(
+  ({ date, isSelected, isToday, isDisabled, isWeekend, onPress }) => {
+    const overrides = useDatePickerOverrides();
+
+    // Build cell style based on state and overrides
+    // Use primaryColor as fallback for cellSelectedColor (consumer expectation)
+    const cellStyle = useMemo(() => {
+      const style: Record<string, unknown> = {
+        backgroundColor: DEFAULT_COLORS.cellBackground,
+      };
+
+      if (isSelected) {
+        style.backgroundColor =
+          overrides?.cellSelectedColor ??
+          overrides?.primaryColor ??
+          DEFAULT_COLORS.cellSelected;
+        style.borderRadius =
+          overrides?.cellBorderRadius ?? DEFAULT_COLORS.cellBorderRadius;
+      } else if (isToday) {
+        style.backgroundColor =
+          overrides?.cellTodayColor ?? DEFAULT_COLORS.cellToday;
+        style.borderRadius =
+          overrides?.cellBorderRadius ?? DEFAULT_COLORS.cellBorderRadius;
+        style.borderWidth = 1;
+        style.borderColor = overrides?.primaryColor ?? DEFAULT_COLORS.primary;
+      }
+
+      if (isDisabled) {
+        style.opacity = 0.4;
+      }
+
+      return style;
+    }, [overrides, isSelected, isToday, isDisabled]);
+
+    // Build text style based on state and overrides
+    const textStyle = useMemo(() => {
+      const style: Record<string, unknown> = {
+        color: overrides?.textColor ?? DEFAULT_COLORS.textDefault,
+        fontWeight: '400' as const,
+      };
+
+      if (isSelected) {
+        style.color =
+          overrides?.textSelectedColor ?? DEFAULT_COLORS.textSelected;
+        style.fontWeight = '600';
+      } else if (isToday) {
+        style.color = overrides?.primaryColor ?? DEFAULT_COLORS.primary;
+        style.fontWeight = '600';
+      } else if (isDisabled) {
+        style.color =
+          overrides?.textDisabledColor ?? DEFAULT_COLORS.textDisabled;
+      } else if (isWeekend) {
+        style.color = overrides?.textWeekendColor ?? DEFAULT_COLORS.textWeekend;
+      }
+
+      return style;
+    }, [overrides, isSelected, isToday, isDisabled, isWeekend]);
+
+    if (!date) {
+      return <Pressable style={webStyles.cell} disabled />;
+    }
+
+    return (
+      <Pressable
+        style={[webStyles.cell, cellStyle]}
+        onPress={onPress}
+        disabled={isDisabled}
+        accessibilityRole="button"
+        accessibilityLabel={new Intl.DateTimeFormat('en-US', {
+          weekday: 'long',
+          month: 'long',
+          day: 'numeric',
+        }).format(date)}
+        accessibilityState={{ selected: isSelected, disabled: isDisabled }}
+      >
+        <Text style={[webStyles.text, textStyle]}>{date.getUTCDate()}</Text>
+      </Pressable>
+    );
+  },
+  (prev, next) =>
+    prev.date?.getTime() === next.date?.getTime() &&
+    prev.isSelected === next.isSelected &&
+    prev.isToday === next.isToday &&
+    prev.isDisabled === next.isDisabled,
+);
+
+DayCell.displayName = 'DayCell';

package/src/components/DatePicker/DatePicker.android.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, useCallback } from 'react';
 import { ActivityIndicator, View } from 'react-native';
+import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 import { toISODateString } from '../../utils/date';
 import { CalendarGrid } from '../CalendarGrid';
 import type { KaalDatePickerProps } from './DatePicker';
@@ -38,6 +39,8 @@ export const DatePicker: React.FC<KaalDatePickerProps> = ({
   minDate,
   maxDate,
   disabledDates,
+  themeOverrides,
+  weekStartsOn = 0,
 }) => {
   const handleDateChange = useCallback(
     (date: Date) => {
@@ -57,13 +60,16 @@ export const DatePicker: React.FC<KaalDatePickerProps> = ({
   }
 
   return (
-    <CalendarGrid
-      value={value}
-      onChange={onChange}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabledDates={disabledDates}
-      themeMode={theme}
-    />
+    <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+      <CalendarGrid
+        value={value}
+        onChange={onChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabledDates={disabledDates}
+        themeMode={theme}
+        weekStartsOn={weekStartsOn}
+      />
+    </ThemeOverrideProvider>
   );
 };

package/src/components/DatePicker/DatePicker.ios.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, useCallback } from 'react';
 import { ActivityIndicator, View } from 'react-native';
+import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 import { toISODateString } from '../../utils/date';
 import { CalendarGrid } from '../CalendarGrid';
 import type { KaalDatePickerProps } from './DatePicker';
@@ -43,6 +44,8 @@ export const DatePicker: React.FC<KaalDatePickerProps> = ({
   minDate,
   maxDate,
   disabledDates,
+  themeOverrides,
+  weekStartsOn = 0,
 }) => {
   const handleDateChange = useCallback(
     (date: Date) => {
@@ -66,13 +69,16 @@ export const DatePicker: React.FC<KaalDatePickerProps> = ({
   }
 
   return (
-    <CalendarGrid
-      value={value}
-      onChange={onChange}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabledDates={disabledDates}
-      themeMode={theme}
-    />
+    <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+      <CalendarGrid
+        value={value}
+        onChange={onChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabledDates={disabledDates}
+        themeMode={theme}
+        weekStartsOn={weekStartsOn}
+      />
+    </ThemeOverrideProvider>
   );
 };