@lafarmer28/densitycalendarnative 0.1.0

package/src/components/density-calendar/day-view/day-navigation.tsx

@@ -0,0 +1,199 @@
+import { StyleSheet, View, Text, Pressable } from 'react-native';
+import { format } from 'date-fns';
+import {
+  MaterialIcons,
+  MaterialCommunityIcons,
+  Ionicons,
+} from '@expo/vector-icons';
+import { useKSDensityCalendar } from '../context/use-ks-density-calendar-context';
+import KSToggler from '../ks-toggler/ks-toggler';
+import type { ThemeKeyProps } from '../ks-density-calendar';
+
+type DayNavigationProps = {
+  handlePreviousDay: () => void;
+  dateSelected: Date;
+  handleNextDay: () => void;
+  handleToday: () => void;
+  previousCalendarDisplay: string;
+  toWeekHandler: () => void;
+  toMonthHandler: () => void;
+  themeKeys: ThemeKeyProps['themeKeys'];
+  svgIconColor: string;
+  svgIconSize: number;
+  svgIconUnactiveColor?: string;
+};
+
+const DayNavigation = ({
+  handlePreviousDay,
+  dateSelected,
+  handleNextDay,
+  handleToday,
+  previousCalendarDisplay,
+  toMonthHandler,
+  toWeekHandler,
+  svgIconColor,
+  svgIconSize,
+  svgIconUnactiveColor,
+}: DayNavigationProps) => {
+  const { state } = useKSDensityCalendar();
+  const { isSmallScreen } = state;
+
+  const backHandler =
+    previousCalendarDisplay === 'Month' ? toMonthHandler : toWeekHandler;
+
+  // Helper for consistent Pressable styling
+  const pressableStyle = ({ pressed }: { pressed: boolean }) => [
+    styles.iconPressable,
+    { opacity: pressed ? 0.5 : 1 },
+  ];
+
+  return (
+    <View style={styles.container}>
+      {!isSmallScreen && (
+        <View style={styles.sideSection}>
+          <Pressable onPress={backHandler} style={pressableStyle}>
+            <Ionicons
+              name="arrow-back"
+              size={svgIconSize}
+              color={svgIconColor}
+            />
+          </Pressable>
+        </View>
+      )}
+
+      <View style={[styles.centerSection, isSmallScreen && styles.fullWidth]}>
+        <Pressable onPress={handlePreviousDay} style={pressableStyle}>
+          <MaterialIcons
+            name="chevron-left"
+            size={svgIconSize + 8}
+            color={svgIconColor}
+          />
+        </Pressable>
+
+        <Text style={styles.dateText}>
+          {format(
+            dateSelected,
+            previousCalendarDisplay === 'Week' ? 'EEEE' : 'eeee MMMM do yyyy'
+          )}
+        </Text>
+
+        <Pressable onPress={handleNextDay} style={pressableStyle}>
+          <MaterialIcons
+            name="chevron-right"
+            size={svgIconSize + 8}
+            color={svgIconColor}
+          />
+        </Pressable>
+      </View>
+
+      <View
+        style={[
+          styles.controlsSection,
+          isSmallScreen && styles.fullWidthCenter,
+        ]}
+      >
+        {isSmallScreen && (
+          <View style={styles.controlItem}>
+            <Pressable onPress={backHandler} style={pressableStyle}>
+              <Ionicons
+                name="arrow-back"
+                size={svgIconSize}
+                color={svgIconColor}
+              />
+            </Pressable>
+          </View>
+        )}
+
+        <View style={styles.controlItem}>
+          <MaterialCommunityIcons
+            name="minus"
+            size={svgIconSize}
+            color={svgIconUnactiveColor || svgIconColor}
+          />
+        </View>
+
+        <View style={styles.togglerWrapper}>
+          <KSToggler />
+        </View>
+
+        <View style={styles.controlItem}>
+          <MaterialCommunityIcons
+            name="plus"
+            size={svgIconSize}
+            color={svgIconUnactiveColor || svgIconColor}
+          />
+        </View>
+
+        {previousCalendarDisplay === 'Month' && (
+          <View style={styles.controlItem}>
+            <Pressable onPress={handleToday} style={pressableStyle}>
+              <MaterialCommunityIcons
+                name="calendar-today"
+                size={svgIconSize}
+                color={svgIconColor}
+              />
+            </Pressable>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    paddingVertical: 10,
+  },
+  sideSection: {
+    width: '25%',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    paddingLeft: 8,
+  },
+  centerSection: {
+    width: '50%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  fullWidthCenter: {
+    width: '100%',
+    justifyContent: 'center',
+    marginTop: 15,
+  },
+  dateText: {
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    paddingHorizontal: 4,
+    flexShrink: 1,
+  },
+  iconPressable: {
+    padding: 8,
+    borderRadius: 20, // Optional: gives a nice hit area
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  controlsSection: {
+    width: '25%',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingRight: 8,
+  },
+  controlItem: {
+    paddingHorizontal: 4,
+  },
+  togglerWrapper: {
+    marginHorizontal: 4,
+  },
+});
+
+export default DayNavigation;

package/src/components/density-calendar/day-view/ks-density-calendar-day-view.tsx

@@ -0,0 +1,245 @@
+import { useMemo } from 'react';
+import { StyleSheet, View, Text, ScrollView, DimensionValue } from 'react-native';
+import { startOfDay, endOfDay, eachHourOfInterval } from 'date-fns';
+import { useKSDensityCalendar } from '../context/use-ks-density-calendar-context';
+import { getColorForPercentage } from '../utility-functions';
+import DayNavigation from './day-navigation';
+import KSSlider from '../ks-slider/ks-slider';
+import {
+  type KSDensityCalendarEventType,
+  type ThemeKeyProps,
+} from '../ks-density-calendar';
+
+type KSDensityCalendarDayProps = {
+  dateSelected: Date;
+  multScheduleData: KSDensityCalendarEventType[];
+  toWeekHandler: () => void;
+  toMonthHandler: () => void;
+  previousCalendarDisplay: string;
+  handlePreviousDay: () => void;
+  handleNextDay: () => void;
+  handleToday: () => void;
+  calendarDisplay: string;
+  themeKeys: ThemeKeyProps['themeKeys'];
+  svgIconColor: string;
+  svgIconSize: number;
+  svgIconUnactiveColor?: string;
+};
+
+export const getHoursOfDayWithinIntersection = (
+  dateSelected: Date,
+  start: Date,
+  end: Date
+) => {
+  const startingHour = startOfDay(dateSelected);
+  const endingHour = endOfDay(dateSelected);
+  const effectiveStart = start < startingHour ? startingHour : start;
+  const effectiveEnd = end > endingHour ? endingHour : end;
+
+  const hoursWithinInterval = eachHourOfInterval({
+    start: effectiveStart,
+    end: effectiveEnd,
+  });
+  return hoursWithinInterval.map((ht) => ht.getHours());
+};
+
+export const calcHourPercents = (
+  dateSelected: Date,
+  data: KSDensityCalendarEventType[]
+) => {
+  const ret = Array(24).fill(0);
+  const usedNames: Record<string, number[]> = {};
+  const startDay = startOfDay(dateSelected);
+  const endDay = endOfDay(dateSelected);
+
+  for (const item of data) {
+    // Basic null check for the item itself
+    if (!item || item.start > endDay || item.end < startDay) continue;
+
+    const hours = getHoursOfDayWithinIntersection(
+      dateSelected,
+      item.start,
+      item.end
+    );
+
+    hours.forEach((hour) => {
+      if (!usedNames[item.name]) {
+        usedNames[item.name] = Array(24).fill(0);
+      }
+
+      const nameData = usedNames[item.name];
+
+      if (nameData && nameData[hour] === 0) {
+        nameData[hour] = 1;
+        ret[hour] += 1;
+      }
+    });
+  }
+
+  const totalNames = Object.keys(usedNames).length;
+  if (totalNames > 0) {
+    for (let j = 0; j < ret.length; j++) {
+      ret[j] = Math.round((ret[j] / totalNames) * 100);
+    }
+  }
+  return ret;
+};
+
+const KSDensityCalendarDayView = ({
+  dateSelected,
+  calendarDisplay,
+  multScheduleData,
+  toWeekHandler,
+  toMonthHandler,
+  previousCalendarDisplay,
+  handleToday,
+  handleNextDay,
+  handlePreviousDay,
+  themeKeys,
+  svgIconColor,
+  svgIconSize,
+  svgIconUnactiveColor,
+}: KSDensityCalendarDayProps) => {
+  const { state } = useKSDensityCalendar();
+  const { toggleKSSlider, minVal, maxVal } = state;
+
+  const percentsForHourOfDay = useMemo(
+    () => calcHourPercents(dateSelected, multScheduleData),
+    [dateSelected, multScheduleData]
+  );
+
+  const renderHourRow = (percentValue: number, index: number) => {
+    const isVisible = percentValue >= minVal && percentValue <= maxVal;
+    const barWidth = isVisible ? `${percentValue}%` : '0%';
+    const color = getColorForPercentage(percentValue);
+
+    const hourLabel =
+      index === 0
+        ? '12am'
+        : index === 12
+          ? '12pm'
+          : index < 12
+            ? `${index}am`
+            : `${index - 12}pm`;
+
+    return (
+      <View
+        key={index}
+        style={[
+          styles.row,
+          { borderColor: themeKeys.secondaryColor },
+          index === 23 && styles.lastRow,
+        ]}
+      >
+        <View style={styles.labelContainer}>
+          <Text style={styles.labelText}>{hourLabel}:</Text>
+        </View>
+
+        <View style={styles.barTrack}>
+          <View
+            style={[
+              styles.barFill,
+              {
+                // Force cast the string to DimensionValue
+                width: (isVisible
+                  ? `${percentValue}%`
+                  : '0%') as DimensionValue,
+                backgroundColor: isVisible ? color : 'transparent',
+              },
+            ]}
+          />
+        </View>
+
+        <Text style={styles.percentText}>
+          {isVisible && percentValue > 0 ? `${percentValue}%` : ''}
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.container, !toggleKSSlider && styles.paddingBottom]}>
+      <DayNavigation
+        dateSelected={dateSelected}
+        handleNextDay={handleNextDay}
+        handlePreviousDay={handlePreviousDay}
+        previousCalendarDisplay={previousCalendarDisplay}
+        toWeekHandler={toWeekHandler}
+        toMonthHandler={toMonthHandler}
+        handleToday={handleToday}
+        themeKeys={themeKeys}
+        svgIconColor={svgIconColor}
+        svgIconSize={svgIconSize}
+        svgIconUnactiveColor={svgIconUnactiveColor}
+      />
+
+      <ScrollView
+        style={styles.scrollArea}
+        contentContainerStyle={styles.scrollContent}
+        persistentScrollbar={true}
+        indicatorStyle="default"
+      >
+        {percentsForHourOfDay.map(renderHourRow)}
+      </ScrollView>
+
+      {toggleKSSlider && (
+        <KSSlider calendarDisplay={calendarDisplay} themeKeys={themeKeys} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: 8,
+  },
+  paddingBottom: {
+    paddingBottom: 8,
+  },
+  scrollArea: {
+    flex: 1,
+    width: '100%',
+  },
+  scrollContent: {
+    paddingVertical: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 4,
+    height: 40,
+    borderTopWidth: 2,
+    borderLeftWidth: 2,
+    borderRightWidth: 2,
+  },
+  lastRow: {
+    borderBottomWidth: 2,
+  },
+  labelContainer: {
+    width: 60,
+  },
+  labelText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  barTrack: {
+    flex: 1,
+    height: '60%',
+    marginHorizontal: 8,
+    justifyContent: 'center',
+  },
+  barFill: {
+    height: '100%',
+    borderRadius: 2,
+  },
+  percentText: {
+    width: 45,
+    fontSize: 12,
+    textAlign: 'right',
+    paddingRight: 4,
+  },
+});
+
+export default KSDensityCalendarDayView;

package/src/components/density-calendar/ks-density-calendar-root.tsx

@@ -0,0 +1,215 @@
+import { useReducer, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { subMonths, addMonths, addDays, subDays, startOfToday } from 'date-fns';
+import { firstDateOfWeek } from './utility-functions';
+import KSDensityCalendarMonthView from './month-view/ks-density-calendar-month-view';
+import KSDensityCalendarWeekView from './week-view/ks-density-calendar-week-view';
+import KSDensityCalendarDayView from './day-view/ks-density-calendar-day-view';
+import type { ThemeKeyProps } from './ks-density-calendar';
+
+export type KSDensityCalendarProps = {
+  displayDate: Date;
+  initialDisplayMode: 'Month' | 'Week' | 'Day';
+  multScheduleData: any[];
+};
+
+type CalendarState = {
+  calendarDisplay: string;
+  displayDate: Date;
+  dateSelected: Date;
+  previousCalendarDisplay: string;
+};
+
+type CalendarAction =
+  | { type: 'SET_CALENDAR_DISPLAY'; payload: string }
+  | { type: 'SET_DISPLAY_DATE'; payload: Date }
+  | { type: 'SET_DATE_SELECTED'; payload: Date }
+  | { type: 'SET_PREVIOUS_CALENDAR_DISPLAY'; payload: string };
+
+export type SVGProps = {
+  svgIconColor: string;
+  svgIconSize: number;
+  svgIconUnactiveColor?: string;
+};
+
+const calendarReducer = (
+  state: CalendarState,
+  action: CalendarAction
+): CalendarState => {
+  switch (action.type) {
+    case 'SET_CALENDAR_DISPLAY':
+      return { ...state, calendarDisplay: action.payload };
+    case 'SET_DISPLAY_DATE':
+      return { ...state, displayDate: action.payload };
+    case 'SET_DATE_SELECTED':
+      return { ...state, dateSelected: action.payload };
+    case 'SET_PREVIOUS_CALENDAR_DISPLAY':
+      return { ...state, previousCalendarDisplay: action.payload };
+    default:
+      return state;
+  }
+};
+
+const KSDensityCalendarRoot = ({
+  displayDate,
+  initialDisplayMode,
+  multScheduleData,
+  themeKeys,
+}: KSDensityCalendarProps & ThemeKeyProps) => {
+  const initialState: CalendarState = {
+    calendarDisplay: initialDisplayMode,
+    displayDate: displayDate,
+    dateSelected: displayDate,
+    previousCalendarDisplay: initialDisplayMode,
+  };
+
+  const [state, dispatch] = useReducer(calendarReducer, initialState);
+
+  useEffect(() => {
+    dispatch({
+      type: 'SET_PREVIOUS_CALENDAR_DISPLAY',
+      payload: initialDisplayMode,
+    });
+  }, [initialDisplayMode]);
+
+  const handlePreviousMonth = () => {
+    dispatch({
+      type: 'SET_DISPLAY_DATE',
+      payload: subMonths(state.displayDate, 1),
+    });
+  };
+
+  const handleNextMonth = () => {
+    dispatch({
+      type: 'SET_DISPLAY_DATE',
+      payload: addMonths(state.displayDate, 1),
+    });
+  };
+
+  const handlePreviousDay = () => {
+    const isMonthOrDay =
+      state.previousCalendarDisplay === 'Month' ||
+      state.previousCalendarDisplay === 'Day';
+
+    if (isMonthOrDay) {
+      dispatch({
+        type: 'SET_DATE_SELECTED',
+        payload: subDays(state.dateSelected, 1),
+      });
+    } else if (state.previousCalendarDisplay === 'Week') {
+      const previousDay = subDays(state.dateSelected, 1);
+      if (previousDay >= firstDateOfWeek) {
+        dispatch({ type: 'SET_DATE_SELECTED', payload: previousDay });
+      } else {
+        dispatch({
+          type: 'SET_DATE_SELECTED',
+          payload: addDays(firstDateOfWeek, 6),
+        });
+      }
+    }
+  };
+
+  const handleNextDay = () => {
+    const isMonthOrDay =
+      state.previousCalendarDisplay === 'Month' ||
+      state.previousCalendarDisplay === 'Day';
+
+    if (isMonthOrDay) {
+      dispatch({
+        type: 'SET_DATE_SELECTED',
+        payload: addDays(state.dateSelected, 1),
+      });
+    } else if (state.previousCalendarDisplay === 'Week') {
+      const nextDay = addDays(state.dateSelected, 1);
+      if (nextDay <= addDays(firstDateOfWeek, 6)) {
+        dispatch({ type: 'SET_DATE_SELECTED', payload: nextDay });
+      } else {
+        dispatch({ type: 'SET_DATE_SELECTED', payload: firstDateOfWeek });
+      }
+    }
+  };
+
+  const handleToday = () => {
+    const today = startOfToday();
+    if (state.calendarDisplay === 'Month') {
+      dispatch({ type: 'SET_DISPLAY_DATE', payload: today });
+    } else {
+      dispatch({ type: 'SET_DATE_SELECTED', payload: today });
+    }
+  };
+
+  const toMonthHandler = () => {
+    dispatch({ type: 'SET_DISPLAY_DATE', payload: state.dateSelected });
+    dispatch({ type: 'SET_CALENDAR_DISPLAY', payload: 'Month' });
+  };
+
+  const toDayHandler = (dt: Date) => {
+    dispatch({ type: 'SET_DATE_SELECTED', payload: dt });
+    dispatch({ type: 'SET_CALENDAR_DISPLAY', payload: 'Day' });
+  };
+
+  const toWeekHandler = () => {
+    dispatch({ type: 'SET_CALENDAR_DISPLAY', payload: 'Week' });
+  };
+
+  const svgIconColor = themeKeys.secondaryColor;
+  const svgIconSize = 32;
+  const svgIconUnactiveColor = themeKeys.secondaryColorPnt15;
+
+  return (
+    <View style={styles.container}>
+      {state.calendarDisplay === 'Month' && (
+        <KSDensityCalendarMonthView
+          displayDate={state.displayDate}
+          toDayHandler={toDayHandler}
+          multScheduleData={multScheduleData}
+          handlePrevious={handlePreviousMonth}
+          handleNext={handleNextMonth}
+          handleToday={handleToday}
+          calendarDisplay={state.calendarDisplay}
+          themeKeys={themeKeys}
+          svgIconColor={svgIconColor}
+          svgIconSize={svgIconSize}
+          svgIconUnactiveColor={svgIconUnactiveColor}
+        />
+      )}
+      {state.calendarDisplay === 'Week' && (
+        <KSDensityCalendarWeekView
+          displayDate={state.displayDate}
+          toDayHandler={toDayHandler}
+          multScheduleData={multScheduleData}
+          calendarDisplay={state.calendarDisplay}
+          themeKeys={themeKeys}
+          svgIconColor={svgIconColor}
+          svgIconSize={svgIconSize}
+          svgIconUnactiveColor={svgIconUnactiveColor}
+        />
+      )}
+      {state.calendarDisplay === 'Day' && (
+        <KSDensityCalendarDayView
+          dateSelected={state.dateSelected}
+          multScheduleData={multScheduleData}
+          toWeekHandler={toWeekHandler}
+          toMonthHandler={toMonthHandler}
+          previousCalendarDisplay={state.previousCalendarDisplay}
+          handlePreviousDay={handlePreviousDay}
+          handleNextDay={handleNextDay}
+          handleToday={handleToday}
+          calendarDisplay={state.calendarDisplay}
+          themeKeys={themeKeys}
+          svgIconColor={svgIconColor}
+          svgIconSize={svgIconSize}
+          svgIconUnactiveColor={svgIconUnactiveColor}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default KSDensityCalendarRoot;