@korsolutions/ui 0.0.21 → 0.0.23

package/src/primitives/calendar/calendar-day.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo, useState } from "react";
+import { Text, StyleProp, TextStyle, ViewStyle, Pressable } from "react-native";
+import { formatDate, isDateSameDay, isDateToday, isDateBefore, isDateAfter, isSameMonth } from "@/utils/date-utils";
+import { useCalendarContext } from "./context";
+import { CalendarDayState } from "./types";
+
+export interface CalendarDayProps {
+  date: Date;
+  onPress?: () => void;
+
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const calculateState = (
+  date: Date,
+  selected: Date | null | undefined,
+  isCurrentMonth: boolean,
+  isDisabled: boolean,
+  isHovered: boolean
+): CalendarDayState => {
+  if (isDisabled) return "disabled";
+  if (selected && isDateSameDay(date, selected)) return "selected";
+  if (isDateToday(date)) return "today";
+  if (isHovered) return "hovered";
+  if (!isCurrentMonth) return "deprioritized";
+  return "default";
+};
+
+export function CalendarDay(props: CalendarDayProps) {
+  const calendar = useCalendarContext();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const isCurrentMonth = isSameMonth(props.date, calendar.currentMonth);
+
+  const isDisabled = useMemo(() => {
+    if (calendar.minDate && isDateBefore(props.date, calendar.minDate)) return true;
+    if (calendar.maxDate && isDateAfter(props.date, calendar.maxDate)) return true;
+    return false;
+  }, [props.date, calendar.minDate, calendar.maxDate]);
+
+  const state = calculateState(props.date, calendar.value, isCurrentMonth, isDisabled, isHovered);
+
+  const handlePress = () => {
+    console.log("Day pressed:", isDisabled, calendar.onChange);
+    if (isDisabled || !calendar.onChange) return;
+    calendar.onChange(props.date);
+  };
+
+  const composedStyle = [calendar.styles?.dayButton?.default, calendar.styles?.dayButton?.[state], props.style];
+  const composedTextStyle = [calendar.styles?.dayText?.default, calendar.styles?.dayText?.[state], props.textStyle];
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      disabled={isDisabled}
+      style={composedStyle}
+    >
+      <Text style={composedTextStyle}>{formatDate(props.date, "d")}</Text>
+    </Pressable>
+  );
+}

package/src/primitives/calendar/calendar-header.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, ViewProps, StyleProp, ViewStyle } from "react-native";
+import { useCalendarContext } from "./context";
+
+export interface CalendarHeaderProps extends ViewProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CalendarHeader(props: CalendarHeaderProps) {
+  const { children, style, ...viewProps } = props;
+  const { styles } = useCalendarContext();
+
+  const headerStyle = [styles?.header, style];
+
+  return (
+    <View {...viewProps} style={headerStyle}>
+      {children}
+    </View>
+  );
+}

package/src/primitives/calendar/calendar-nav-button.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { Pressable, PressableProps, Text, StyleProp, ViewStyle, TextStyle } from "react-native";
+import { addMonths, subMonths } from "../../utils/date-utils";
+import { useCalendarContext } from "./context";
+import { CalendarNavButtonState } from "./types";
+
+export interface CalendarNavButtonProps extends PressableProps {
+  children?: React.ReactNode;
+  direction: "prev" | "next";
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const calculateState = (isDisabled: boolean, isHovered: boolean): CalendarNavButtonState => {
+  if (isDisabled) return "disabled";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function CalendarNavButton(props: CalendarNavButtonProps) {
+  const { children = props.direction === "prev" ? "‹" : "›", direction, style, textStyle, ...pressableProps } = props;
+  const { currentMonth, setCurrentMonth, minDate, maxDate, styles } = useCalendarContext();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const isDisabled = React.useMemo(() => {
+    if (direction === "prev" && minDate) {
+      const prevMonth = subMonths(currentMonth, 1);
+      return prevMonth < minDate;
+    }
+    if (direction === "next" && maxDate) {
+      const nextMonth = addMonths(currentMonth, 1);
+      return nextMonth > maxDate;
+    }
+    return false;
+  }, [direction, currentMonth, minDate, maxDate]);
+
+  const state = calculateState(isDisabled, isHovered);
+
+  const handlePress = () => {
+    if (isDisabled) return;
+    const newMonth = direction === "prev" ? subMonths(currentMonth, 1) : addMonths(currentMonth, 1);
+    setCurrentMonth(newMonth);
+  };
+
+  const buttonStyle = [styles?.navButton?.default, styles?.navButton?.[state], style];
+  const textStyleCombined = [styles?.navButtonText?.default, styles?.navButtonText?.[state], textStyle];
+
+  return (
+    <Pressable
+      {...pressableProps}
+      onPress={handlePress}
+      onHoverIn={() => setIsHovered(true)}
+      onHoverOut={() => setIsHovered(false)}
+      disabled={isDisabled}
+      style={buttonStyle}
+    >
+      <Text style={textStyleCombined}>{children}</Text>
+    </Pressable>
+  );
+}

package/src/primitives/calendar/calendar-root.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { View, StyleProp, ViewStyle } from "react-native";
+import { CalendarStyles } from "./types";
+import { CalendarContext } from "./context";
+
+export interface CalendarRootProps {
+  children?: React.ReactNode;
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  defaultMonth?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  style?: StyleProp<ViewStyle>;
+  styles?: CalendarStyles;
+}
+
+export function CalendarRoot(props: CalendarRootProps) {
+  const { children, value, onChange, defaultMonth = new Date(), minDate, maxDate, style, styles, ...viewProps } = props;
+
+  const [currentMonth, setCurrentMonth] = useState<Date>(defaultMonth);
+
+  const containerStyle = [styles?.root, style];
+
+  return (
+    <CalendarContext.Provider
+      value={{
+        value,
+        onChange,
+        currentMonth,
+        setCurrentMonth,
+        styles,
+        minDate,
+        maxDate,
+      }}
+    >
+      <View {...viewProps} style={containerStyle}>
+        {children}
+      </View>
+    </CalendarContext.Provider>
+  );
+}

package/src/primitives/calendar/calendar-title.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Text, TextProps, StyleProp, TextStyle } from "react-native";
+import { formatDate } from "../../utils/date-utils";
+import { useCalendarContext } from "./context";
+
+export interface CalendarTitleProps extends TextProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  formatStr?: string;
+}
+
+export function CalendarTitle(props: CalendarTitleProps) {
+  const { children, style, formatStr = "MMMM yyyy", ...textProps } = props;
+  const { currentMonth, styles } = useCalendarContext();
+
+  const titleStyle = [styles?.headerTitle, style];
+
+  return (
+    <Text {...textProps} style={titleStyle}>
+      {children ?? formatDate(currentMonth, formatStr)}
+    </Text>
+  );
+}

package/src/primitives/calendar/calendar-week-labels.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { View, Text, StyleProp, ViewStyle, TextStyle } from "react-native";
+import { useCalendarContext } from "./context";
+
+export interface CalendarWeekLabelProps {
+  children: string;
+  style?: StyleProp<TextStyle>;
+}
+
+function CalendarWeekLabel(props: CalendarWeekLabelProps) {
+  const { styles } = useCalendarContext();
+
+  const composedStyle = [styles?.weekLabel, props.style];
+
+  return (
+    <Text numberOfLines={1} style={composedStyle}>
+      {props.children}
+    </Text>
+  );
+}
+
+export interface CalendarWeekLabelsProps {
+  weekDays?: string[];
+
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+
+export function CalendarWeekLabels(props: CalendarWeekLabelsProps) {
+  const { weekDays = DEFAULT_WEEK_DAYS, style } = props;
+  const { styles } = useCalendarContext();
+
+  const composedStyle = [styles?.weekLabels, style];
+
+  return (
+    <View style={composedStyle}>
+      {weekDays.map((day, index) => (
+        <CalendarWeekLabel key={index} style={styles?.weekLabel}>
+          {day}
+        </CalendarWeekLabel>
+      ))}
+    </View>
+  );
+}

package/src/primitives/calendar/calendar-weeks.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { View, ViewProps, StyleProp, ViewStyle } from "react-native";
+import { getWeekDays, getWeeksInMonth } from "@/utils/date-utils";
+import { useCalendarContext } from "./context";
+import { CalendarDay } from "./calendar-day";
+
+export interface CalendarWeekProps extends ViewProps {
+  index: number;
+
+  style?: StyleProp<ViewStyle>;
+}
+
+function CalendarWeek(props: CalendarWeekProps) {
+  const { style, ...viewProps } = props;
+  const { currentMonth, styles } = useCalendarContext();
+
+  const days = getWeekDays(currentMonth.getMonth(), currentMonth.getFullYear(), props.index);
+
+  const composedStyle = [styles?.week, style];
+  return (
+    <View {...viewProps} style={composedStyle}>
+      {days.map((day, index) => {
+        return <CalendarDay key={index} date={day} />;
+      })}
+    </View>
+  );
+}
+
+export interface CalendarWeeksProps extends ViewProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CalendarWeeks(props: CalendarWeeksProps) {
+  const { currentMonth, styles } = useCalendarContext();
+
+  const weeks = getWeeksInMonth(currentMonth);
+
+  const composedStyle = [styles?.weeks, props.style];
+
+  return (
+    <View style={composedStyle}>
+      {Array.from({ length: weeks }).map((_, index) => {
+        return <CalendarWeek key={index} index={index} />;
+      })}
+    </View>
+  );
+}

package/src/primitives/calendar/context.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { CalendarStyles } from "./types";
+
+export interface CalendarContextValue {
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  currentMonth: Date;
+  setCurrentMonth: (month: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+
+  styles?: CalendarStyles;
+}
+
+export const CalendarContext = React.createContext<CalendarContextValue | undefined>(undefined);
+
+export const useCalendarContext = () => {
+  const context = React.useContext(CalendarContext);
+  if (!context) {
+    throw new Error("Calendar components must be used within CalendarRoot");
+  }
+  return context;
+};

package/src/primitives/calendar/index.ts

@@ -0,0 +1,26 @@
+import { CalendarRoot } from "./calendar-root";
+import { CalendarHeader } from "./calendar-header";
+import { CalendarTitle } from "./calendar-title";
+import { CalendarNavButton } from "./calendar-nav-button";
+import { CalendarWeekLabels } from "./calendar-week-labels";
+import { CalendarWeeks } from "./calendar-weeks";
+import { CalendarDay } from "./calendar-day";
+
+export const CalendarPrimitive = {
+  Root: CalendarRoot,
+  Header: CalendarHeader,
+  Title: CalendarTitle,
+  NavButton: CalendarNavButton,
+  CalendarWeekLabels: CalendarWeekLabels,
+  Weeks: CalendarWeeks,
+  Day: CalendarDay,
+};
+
+export type { CalendarRootProps } from "./calendar-root";
+export type { CalendarHeaderProps } from "./calendar-header";
+export type { CalendarTitleProps } from "./calendar-title";
+export type { CalendarNavButtonProps } from "./calendar-nav-button";
+export type { CalendarWeekLabelsProps } from "./calendar-week-labels";
+export type { CalendarWeeksProps } from "./calendar-weeks";
+export type { CalendarDayProps } from "./calendar-day";
+export type { CalendarStyles, CalendarDayState } from "./types";

package/src/primitives/calendar/types.ts

@@ -0,0 +1,39 @@
+import { ViewStyle, TextStyle } from "react-native";
+import { CalendarWeekProps, CalendarWeeksProps } from "./calendar-weeks";
+import { CalendarWeekLabelProps, CalendarWeekLabelsProps } from "./calendar-week-labels";
+import { CalendarDayProps } from "./calendar-day";
+import { CalendarRootProps } from "./calendar-root";
+import { CalendarHeaderProps } from "./calendar-header";
+import { CalendarTitleProps } from "./calendar-title";
+
+export type CalendarDayState = "default" | "selected" | "today" | "disabled" | "deprioritized" | "hovered";
+export type CalendarNavButtonState = "default" | "disabled" | "hovered";
+
+export interface CalendarStyles {
+  root?: CalendarRootProps["style"];
+  header?: CalendarHeaderProps["style"];
+  headerTitle?: CalendarTitleProps["style"];
+  navButton?: Partial<Record<CalendarNavButtonState, ViewStyle>>;
+  navButtonText?: Partial<Record<CalendarNavButtonState, TextStyle>>;
+  weekLabels: CalendarWeekLabelsProps["style"];
+  weekLabel?: CalendarWeekLabelProps["style"];
+  weeks?: CalendarWeekProps["style"];
+  week?: CalendarWeeksProps["style"];
+  dayButton?: Partial<Record<CalendarDayState, CalendarDayProps["style"]>>;
+  dayText?: Partial<Record<CalendarDayState, CalendarDayProps["textStyle"]>>;
+}
+
+export type Months = [
+  january: number,
+  february: number,
+  march: number,
+  april: number,
+  may: number,
+  june: number,
+  july: number,
+  august: number,
+  september: number,
+  october: number,
+  november: number,
+  december: number
+];

package/src/primitives/index.ts

@@ -10,3 +10,4 @@ export * from "./badge";
 export * from "./textarea";
 export * from "./dropdown-menu";
 export * from "./popover";
+export * from "./calendar";

package/src/utils/date-utils.ts

@@ -0,0 +1,113 @@
+export const formatDate = (date: Date, format: string): string => {
+  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+  const day = date.getDate();
+  const month = months[date.getMonth()];
+  const year = date.getFullYear();
+
+  if (format === "MMMM yyyy") {
+    return `${month} ${year}`;
+  }
+  if (format === "d") {
+    return day.toString();
+  }
+
+  return date.toLocaleDateString();
+};
+
+export const isDateSameDay = (date1: Date, date2: Date): boolean => {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+
+export const isDateToday = (date: Date): boolean => {
+  return isDateSameDay(date, new Date());
+};
+
+export const isDateBefore = (date1: Date, date2: Date): boolean => {
+  const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+  const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+  return d1.getTime() < d2.getTime();
+};
+
+export const isDateAfter = (date1: Date, date2: Date): boolean => {
+  const d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+  const d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+  return d1.getTime() > d2.getTime();
+};
+
+export const isDateTimeWithinInterval = (date: Date, interval: { start: Date; end: Date }): boolean => {
+  const time = date.getTime();
+  return time >= interval.start.getTime() && time <= interval.end.getTime();
+};
+
+export const addMonths = (date: Date, months: number): Date => {
+  const newDate = new Date(date);
+  newDate.setMonth(newDate.getMonth() + months);
+  return newDate;
+};
+
+export const subMonths = (date: Date, months: number): Date => {
+  return addMonths(date, -months);
+};
+
+export const startOfMonth = (date: Date): Date => {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+
+export const endOfMonth = (date: Date): Date => {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+};
+
+export const getDaysInMonth = (date: Date): number => {
+  return endOfMonth(date).getDate();
+};
+
+export const getFirstDayOfMonth = (date: Date): number => {
+  return startOfMonth(date).getDay();
+};
+
+export const isSameMonth = (date1: Date, date2: Date): boolean => {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+};
+
+export const getWeekDays = (month: number, year: number, week: number): Date[] => {
+  const days: Date[] = [];
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  const daysInMonth = getDaysInMonth(new Date(year, month));
+
+  // Calculate the date of the first day in the week
+  const startDay = week * 7 - (firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1);
+
+  for (let i = 0; i < 7; i++) {
+    const day = startDay + i;
+    let date: Date;
+
+    if (day < 1) {
+      // Days from previous month
+      const prevMonth = month === 0 ? 11 : month - 1;
+      const prevYear = month === 0 ? year - 1 : year;
+      const daysInPrevMonth = getDaysInMonth(new Date(prevYear, prevMonth));
+      date = new Date(prevYear, prevMonth, daysInPrevMonth + day);
+    } else if (day > daysInMonth) {
+      // Days from next month
+      const nextMonth = month === 11 ? 0 : month + 1;
+      const nextYear = month === 11 ? year + 1 : year;
+      date = new Date(nextYear, nextMonth, day - daysInMonth);
+    } else {
+      // Days from current month
+      date = new Date(year, month, day);
+    }
+
+    days.push(date);
+  }
+
+  return days;
+};
+
+export const getWeeksInMonth = (date: Date): number => {
+  const firstDayOfMonth = getFirstDayOfMonth(date);
+  const daysInMonth = getDaysInMonth(date);
+
+  // Calculate total number of weeks
+  return Math.ceil((firstDayOfMonth + daysInMonth) / 7);
+};