@korsolutions/ui 0.0.71 → 0.0.74

package/src/components/calendar/timeline/calendar-timeline.tsx

@@ -0,0 +1,202 @@
+import React, { useMemo } from "react";
+import { ScrollView, View, type StyleProp, type ViewStyle } from "react-native";
+import { isDateSameDay } from "../../../utils/date-utils";
+import { TimelineVariants } from "./variants";
+
+const HOUR_HEIGHT = 60;
+
+function formatHour(hour: number): string {
+  if (hour === 0) return "12 AM";
+  if (hour < 12) return `${hour} AM`;
+  if (hour === 12) return "12 PM";
+  return `${hour - 12} PM`;
+}
+
+function getMinutesFromStartOfDay(date: Date): number {
+  return date.getHours() * 60 + date.getMinutes();
+}
+
+export interface TimelineEventLayout {
+  top: number;
+  height: number;
+  left: string;
+  width: string;
+}
+
+export interface CalendarTimelineProps<T> {
+  events?: T[];
+  date: Date;
+  startHour?: number;
+  endHour?: number;
+  getStart: (event: T) => Date;
+  getEnd: (event: T) => Date;
+  keyExtractor: (event: T) => string;
+  renderEvent: (event: T, layout: TimelineEventLayout) => React.ReactNode;
+  variant?: keyof typeof TimelineVariants;
+  style?: StyleProp<ViewStyle>;
+}
+
+function groupOverlappingEvents<T>(
+  events: T[],
+  getStart: (e: T) => Date,
+  getEnd: (e: T) => Date,
+): T[][] {
+  const sorted = [...events].sort(
+    (a, b) => getStart(a).getTime() - getStart(b).getTime(),
+  );
+  const groups: T[][] = [];
+
+  for (const event of sorted) {
+    let placed = false;
+    const eStart = getStart(event);
+    const eEnd = getEnd(event);
+
+    for (const group of groups) {
+      const overlaps = group.some((g) => {
+        const gStart = getStart(g);
+        const gEnd = getEnd(g);
+        return (
+          (eStart >= gStart && eStart < gEnd) ||
+          (eEnd > gStart && eEnd <= gEnd) ||
+          (eStart <= gStart && eEnd >= gEnd)
+        );
+      });
+
+      if (overlaps) {
+        group.push(event);
+        placed = true;
+        break;
+      }
+    }
+
+    if (!placed) {
+      groups.push([event]);
+    }
+  }
+
+  return groups;
+}
+
+import { Text } from "react-native";
+
+export function CalendarTimeline<T>(props: CalendarTimelineProps<T>) {
+  const {
+    date,
+    startHour = 0,
+    endHour = 24,
+    getStart,
+    getEnd,
+    keyExtractor,
+    renderEvent,
+    style,
+  } = props;
+  const variantStyles = TimelineVariants[props.variant || "default"]();
+
+  const hours = useMemo(() => {
+    const arr: number[] = [];
+    for (let i = startHour; i < endHour; i++) {
+      arr.push(i);
+    }
+    return arr;
+  }, [startHour, endHour]);
+
+  const allEvents = props.events ?? [];
+
+  const dayEvents = useMemo(() => {
+    return allEvents.filter((event) => isDateSameDay(getStart(event), date));
+  }, [allEvents, date, getStart]);
+
+  const eventGroups = useMemo(
+    () => groupOverlappingEvents(dayEvents, getStart, getEnd),
+    [dayEvents, getStart, getEnd],
+  );
+
+  const now = new Date();
+  const isToday = isDateSameDay(now, date);
+  const currentTimePosition = isToday
+    ? ((getMinutesFromStartOfDay(now) - startHour * 60) / 60) * HOUR_HEIGHT
+    : null;
+
+  return (
+    <ScrollView
+      style={[variantStyles.container, style]}
+      showsVerticalScrollIndicator
+    >
+      <View style={variantStyles.timeline}>
+        {/* Time column */}
+        <View style={variantStyles.timeColumn}>
+          {hours.map((hour) => (
+            <View key={hour} style={variantStyles.timeSlot}>
+              <Text style={variantStyles.timeText}>{formatHour(hour)}</Text>
+            </View>
+          ))}
+        </View>
+
+        {/* Events column */}
+        <View style={variantStyles.eventsColumn}>
+          {hours.map((hour) => (
+            <View key={hour} style={variantStyles.hourLine} />
+          ))}
+
+          {/* Current time indicator */}
+          {currentTimePosition != null && currentTimePosition >= 0 && (
+            <View
+              style={{
+                position: "absolute",
+                left: 0,
+                right: 0,
+                top: currentTimePosition,
+                flexDirection: "row",
+                alignItems: "center",
+                zIndex: 1000,
+              }}
+            >
+              <View style={variantStyles.currentTimeDot} />
+              <View style={variantStyles.currentTimeLineBar} />
+            </View>
+          )}
+
+          {/* Events */}
+          {eventGroups.map((group) =>
+            group.map((event) => {
+              const startMinutes = getMinutesFromStartOfDay(getStart(event));
+              const endMinutes = getMinutesFromStartOfDay(getEnd(event));
+              const duration = endMinutes - startMinutes;
+
+              const top =
+                ((startMinutes - startHour * 60) / 60) * HOUR_HEIGHT + 1;
+              const height = (duration / 60) * HOUR_HEIGHT - 3;
+
+              const indexInGroup = group.indexOf(event);
+              const totalInGroup = group.length;
+              const eventWidth = `${100 / totalInGroup - 1}%`;
+              const left = `${(100 / totalInGroup) * indexInGroup}%`;
+
+              const layout: TimelineEventLayout = {
+                top,
+                height: Math.max(height, 20),
+                left,
+                width: eventWidth,
+              };
+
+              return (
+                <View
+                  key={keyExtractor(event)}
+                  style={{
+                    position: "absolute",
+                    top: layout.top,
+                    height: layout.height,
+                    left: layout.left as unknown as number,
+                    width: layout.width as unknown as number,
+                  }}
+                >
+                  {renderEvent(event, layout)}
+                </View>
+              );
+            }),
+          )}
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

package/src/components/calendar/timeline/index.ts

@@ -0,0 +1,6 @@
+export { CalendarTimeline } from "./calendar-timeline";
+export type {
+  CalendarTimelineProps,
+  TimelineEventLayout,
+} from "./calendar-timeline";
+export type { TimelineStyles } from "./types";

package/src/components/calendar/timeline/types.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+
+export interface TimelineStyles {
+  container?: StyleProp<ViewStyle>;
+  timeline?: StyleProp<ViewStyle>;
+  timeColumn?: StyleProp<ViewStyle>;
+  timeSlot?: StyleProp<ViewStyle>;
+  timeText?: StyleProp<TextStyle>;
+  eventsColumn?: StyleProp<ViewStyle>;
+  hourLine?: StyleProp<ViewStyle>;
+  currentTimeDot?: StyleProp<ViewStyle>;
+  currentTimeLineBar?: StyleProp<ViewStyle>;
+}

package/src/components/calendar/timeline/variants/default.tsx

@@ -0,0 +1,59 @@
+import { useThemedStyles } from "../../../../utils/use-themed-styles";
+import type { TimelineStyles } from "../types";
+
+const HOUR_HEIGHT = 60;
+const TIME_COLUMN_WIDTH = 60;
+
+export const useTimelineVariantDefault = (): TimelineStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): TimelineStyles => ({
+      container: {
+        backgroundColor: colors.background,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+      },
+      timeline: {
+        flexDirection: "row",
+        minHeight: HOUR_HEIGHT * 24,
+      },
+      timeColumn: {
+        width: TIME_COLUMN_WIDTH,
+        borderRightWidth: 1,
+        borderRightColor: colors.border,
+      },
+      timeSlot: {
+        height: HOUR_HEIGHT,
+        paddingHorizontal: 8,
+        alignItems: "flex-end",
+      },
+      timeText: {
+        fontSize: fontSize * 0.75,
+        fontWeight: "500",
+        fontFamily,
+        color: colors.mutedForeground,
+      },
+      eventsColumn: {
+        flex: 1,
+        position: "relative",
+      },
+      hourLine: {
+        height: HOUR_HEIGHT,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+      },
+      currentTimeDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        marginLeft: -5,
+        backgroundColor: colors.danger,
+      },
+      currentTimeLineBar: {
+        flex: 1,
+        height: 2,
+        backgroundColor: colors.danger,
+      },
+    }),
+  );
+};

package/src/components/calendar/timeline/variants/index.ts

@@ -0,0 +1,5 @@
+import { useTimelineVariantDefault } from "./default";
+
+export const TimelineVariants = {
+  default: useTimelineVariantDefault,
+};

package/src/components/calendar/week-calendar/index.ts

@@ -0,0 +1,3 @@
+export type { WeekCalendarStyles } from "./types";
+export { WeekCalendar } from "./week-calendar";
+export type { WeekCalendarProps } from "./week-calendar";

package/src/components/calendar/week-calendar/types.ts

@@ -0,0 +1,7 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { BaseCalendarStyles } from "../shared/types";
+
+export interface WeekCalendarStyles extends BaseCalendarStyles {
+  weekStrip?: StyleProp<ViewStyle>;
+  swipeContainer?: StyleProp<ViewStyle>;
+}

package/src/components/calendar/week-calendar/variants/default.tsx

@@ -0,0 +1,141 @@
+import { hslaSetRelativeLightness } from "../../../../utils/hsla-utils";
+import { useThemedStyles } from "../../../../utils/use-themed-styles";
+import type { WeekCalendarStyles } from "../types";
+
+export const useWeekCalendarVariantDefault = (): WeekCalendarStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): WeekCalendarStyles => ({
+      root: {
+        padding: 16,
+        backgroundColor: colors.background,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+      },
+      header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 16,
+        paddingHorizontal: 8,
+      },
+      headerTitle: {
+        fontSize: fontSize * 1.125,
+        fontWeight: "600",
+        fontFamily,
+        color: colors.foreground,
+      },
+      navButtons: {
+        flexDirection: "row",
+        gap: 4,
+      },
+      navButton: {
+        default: {
+          width: 32,
+          height: 32,
+          borderRadius: radius,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "transparent",
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
+        },
+      },
+      navButtonIcon: {
+        default: {
+          color: colors.foreground,
+          size: fontSize * 1.25,
+          style: {
+            color: colors.foreground,
+            fontSize: fontSize * 1.25,
+            lineHeight: fontSize * 1.25,
+            textAlign: "center",
+            fontWeight: "500",
+            pointerEvents: "none",
+          },
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      weekLabels: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: 8,
+        paddingVertical: 8,
+        gap: 2,
+      },
+      weekLabel: {
+        fontSize: fontSize * 0.875,
+        fontWeight: "500",
+        fontFamily,
+        color: colors.mutedForeground,
+        width: 40,
+        textAlign: "center",
+      },
+      swipeContainer: {
+        overflow: "hidden",
+      },
+      weekStrip: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        gap: 2,
+      },
+      dayButton: {
+        default: {
+          width: 40,
+          height: 40,
+          borderRadius: radius * 0.5,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "transparent",
+        },
+        selected: {
+          backgroundColor: colors.primary,
+        },
+        today: {
+          borderWidth: 1,
+          borderColor: colors.primary,
+        },
+        disabled: {
+          opacity: 0.3,
+        },
+        hovered: {
+          backgroundColor: colors.muted,
+        },
+      },
+      dayText: {
+        default: {
+          fontSize,
+          fontFamily,
+          color: colors.foreground,
+          fontWeight: "400",
+          pointerEvents: "none",
+        },
+        selected: {
+          color: colors.primaryForeground,
+          fontWeight: "600",
+        },
+        today: {
+          color: colors.primary,
+          fontWeight: "600",
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      dayMarker: {
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
+        backgroundColor: colors.primary,
+        marginTop: 2,
+        alignSelf: "center",
+      },
+    }),
+  );
+};

package/src/components/calendar/week-calendar/variants/index.ts

@@ -0,0 +1,5 @@
+import { useWeekCalendarVariantDefault } from "./default";
+
+export const WeekCalendarVariants = {
+  default: useWeekCalendarVariantDefault,
+};

package/src/components/calendar/week-calendar/week-calendar.tsx

@@ -0,0 +1,243 @@
+import React, { useCallback, useMemo, useState } from "react";
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useComponentsConfig } from "../../../themes";
+import {
+  addWeeks,
+  endOfWeek,
+  formatDate,
+  getWeekDates,
+  isDateAfter,
+  isDateBefore,
+  startOfWeek,
+  subWeeks,
+} from "../../../utils/date-utils";
+import {
+  CalendarContext,
+  type CalendarContextValue,
+} from "../shared/calendar-context";
+import { CalendarDay } from "../shared/calendar-day";
+import type { CalendarNavButtonState } from "../shared/types";
+import { WeekCalendarVariants } from "./variants";
+
+const DEFAULT_WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+export interface WeekCalendarProps {
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  defaultWeek?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  markedDates?: Date[];
+  weekDays?: string[];
+  variant?: keyof typeof WeekCalendarVariants;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateNavState = (
+  isDisabled: boolean,
+  isHovered: boolean,
+): CalendarNavButtonState => {
+  if (isDisabled) return "disabled";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function WeekCalendar(props: WeekCalendarProps) {
+  const {
+    value,
+    onChange,
+    defaultWeek = new Date(),
+    minDate,
+    maxDate,
+    markedDates,
+    weekDays = DEFAULT_WEEK_DAYS,
+    style,
+  } = props;
+  const styles = WeekCalendarVariants[props.variant || "default"]();
+  const config = useComponentsConfig();
+  const PrevIcon = config?.calendar?.prevIcon;
+  const NextIcon = config?.calendar?.nextIcon;
+
+  const [currentWeekStart, setCurrentWeekStart] = useState<Date>(
+    startOfWeek(defaultWeek),
+  );
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [prevHovered, setPrevHovered] = useState(false);
+  const [nextHovered, setNextHovered] = useState(false);
+
+  const currentMonth = currentWeekStart;
+
+  const goToPrev = useCallback(() => {
+    setCurrentWeekStart((prev) => subWeeks(prev, 1));
+  }, []);
+
+  const goToNext = useCallback(() => {
+    setCurrentWeekStart((prev) => addWeeks(prev, 1));
+  }, []);
+
+  const isPrevDisabled = useMemo(() => {
+    if (!minDate) return false;
+    const prevWeekEnd = endOfWeek(subWeeks(currentWeekStart, 1));
+    return isDateBefore(prevWeekEnd, minDate);
+  }, [currentWeekStart, minDate]);
+
+  const isNextDisabled = useMemo(() => {
+    if (!maxDate) return false;
+    const nextWeekStart = addWeeks(currentWeekStart, 1);
+    return isDateAfter(nextWeekStart, maxDate);
+  }, [currentWeekStart, maxDate]);
+
+  const prevState = calculateNavState(isPrevDisabled, prevHovered);
+  const nextState = calculateNavState(isNextDisabled, nextHovered);
+
+  const prevIconProps = StyleSheet.flatten([
+    styles.navButtonIcon?.default,
+    styles.navButtonIcon?.[prevState],
+  ]);
+  const nextIconProps = StyleSheet.flatten([
+    styles.navButtonIcon?.default,
+    styles.navButtonIcon?.[nextState],
+  ]);
+
+  // Strip logic
+  const prevWeekDates = getWeekDates(subWeeks(currentWeekStart, 1));
+  const currentWeekDates = getWeekDates(currentWeekStart);
+  const nextWeekDates = getWeekDates(addWeeks(currentWeekStart, 1));
+  const weeks = [prevWeekDates, currentWeekDates, nextWeekDates];
+  const scrollKey = currentWeekStart.getTime();
+
+  const handleScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const pageIndex = Math.round(offsetX / containerWidth);
+
+      if (pageIndex === 0) {
+        setCurrentWeekStart(subWeeks(currentWeekStart, 1));
+      } else if (pageIndex === 2) {
+        setCurrentWeekStart(addWeeks(currentWeekStart, 1));
+      }
+    },
+    [containerWidth, currentWeekStart],
+  );
+
+  const contextValue = useMemo<CalendarContextValue>(
+    () => ({
+      value,
+      onChange,
+      currentMonth,
+      goToPrev,
+      goToNext,
+      isPrevDisabled,
+      isNextDisabled,
+      minDate,
+      maxDate,
+      markedDates,
+      styles,
+      currentWeekStart,
+      setCurrentWeekStart,
+    }),
+    [
+      value,
+      onChange,
+      currentMonth,
+      goToPrev,
+      goToNext,
+      isPrevDisabled,
+      isNextDisabled,
+      minDate,
+      maxDate,
+      markedDates,
+      styles,
+      currentWeekStart,
+    ],
+  );
+
+  return (
+    <CalendarContext.Provider value={contextValue}>
+      <View style={[styles.root, style]}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Text style={styles.headerTitle}>
+            {formatDate(currentMonth, "MMMM yyyy")}
+          </Text>
+          <View style={styles.navButtons}>
+            <Pressable
+              onPress={goToPrev}
+              onHoverIn={() => setPrevHovered(true)}
+              onHoverOut={() => setPrevHovered(false)}
+              disabled={isPrevDisabled}
+              style={[styles.navButton?.default, styles.navButton?.[prevState]]}
+            >
+              {PrevIcon ? (
+                <PrevIcon {...prevIconProps} />
+              ) : (
+                <Text style={prevIconProps?.style}>‹</Text>
+              )}
+            </Pressable>
+            <Pressable
+              onPress={goToNext}
+              onHoverIn={() => setNextHovered(true)}
+              onHoverOut={() => setNextHovered(false)}
+              disabled={isNextDisabled}
+              style={[styles.navButton?.default, styles.navButton?.[nextState]]}
+            >
+              {NextIcon ? (
+                <NextIcon {...nextIconProps} />
+              ) : (
+                <Text style={nextIconProps?.style}>›</Text>
+              )}
+            </Pressable>
+          </View>
+        </View>
+
+        {/* Week day labels */}
+        <View style={styles.weekLabels}>
+          {weekDays.map((day, index) => (
+            <Text key={index} numberOfLines={1} style={styles.weekLabel}>
+              {day}
+            </Text>
+          ))}
+        </View>
+
+        {/* Swipeable strip */}
+        <View
+          style={styles.swipeContainer}
+          onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+        >
+          {containerWidth > 0 && (
+            <ScrollView
+              key={scrollKey}
+              horizontal
+              pagingEnabled
+              showsHorizontalScrollIndicator={false}
+              scrollEventThrottle={16}
+              onMomentumScrollEnd={handleScrollEnd}
+              contentOffset={{ x: containerWidth, y: 0 }}
+            >
+              {weeks.map((weekDates, weekIndex) => (
+                <View
+                  key={weekIndex}
+                  style={[styles.weekStrip, { width: containerWidth }]}
+                >
+                  {weekDates.map((date, dayIndex) => (
+                    <CalendarDay key={dayIndex} date={date} />
+                  ))}
+                </View>
+              ))}
+            </ScrollView>
+          )}
+        </View>
+      </View>
+    </CalendarContext.Provider>
+  );
+}

package/src/components/combobox/components/combobox-empty.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { StyleSheet, Text } from "react-native";
+import type { TextChildren } from "../../../types/element.types";
 import { useCombobox } from "../context";
 
 export interface ComboboxEmptyProps {
-  children?: string;
+  children?: TextChildren;
 }
 
 export function ComboboxEmpty(props: ComboboxEmptyProps) {