@lafarmer28/densitycalendarnative 0.1.0

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

@@ -0,0 +1,74 @@
+import KSDensityCalendarRoot from './ks-density-calendar-root';
+import { KSDensityCalendarProvider } from './context/ks-density-calendar-provider';
+
+export type KSDensityCalendarEventType = {
+  name: string;
+  start: Date;
+  end: Date;
+};
+
+export type KSOptionalProps = {
+  handleErrorPopup?: () => void;
+  handleCloseErrorPopup?: () => void;
+};
+
+export type ThemeKeyProps = {
+  themeKeys: {
+    togglerHandle?: string;
+    primaryColor: string;
+    primaryColorPnt6: string;
+    secondaryColor: string;
+    secondaryColorPnt1: string;
+    secondaryColorPnt15: string;
+    secondaryColorPnt2: string;
+    secondaryColorPnt3: string;
+    secondaryColorPnt4: string;
+    secondaryColorPnt5: string;
+    secondaryColorPnt6: string;
+    secondaryColorPnt8: string;
+    backgroundColor: string;
+    glowFilter: string;
+    checkboxBGC: string;
+    checkboxAfterColor: string;
+    backgroundImage: string;
+    trackBoxShadow: string;
+    carouselColor1: string;
+    carouselGradient1: string;
+    carouselGradient2: string;
+    buttonGradient: string;
+    listBGC: string;
+  };
+};
+
+export type KSDensityCalendarProps = {
+  displayDate: Date;
+  initialDisplayMode: string;
+  multScheduleData: KSDensityCalendarEventType[];
+} & KSOptionalProps &
+  ThemeKeyProps;
+
+export const KSDensityCalendar = ({
+  displayDate,
+  initialDisplayMode,
+  multScheduleData,
+  themeKeys,
+}: KSDensityCalendarProps) => {
+  if (
+    initialDisplayMode !== 'Month' &&
+    initialDisplayMode !== 'Week' &&
+    initialDisplayMode !== 'Day'
+  ) {
+    return initialDisplayMode === 'Month';
+  }
+
+  return (
+    <KSDensityCalendarProvider>
+      <KSDensityCalendarRoot
+        displayDate={displayDate}
+        initialDisplayMode={initialDisplayMode}
+        multScheduleData={multScheduleData}
+        themeKeys={themeKeys}
+      />
+    </KSDensityCalendarProvider>
+  );
+};

package/src/components/density-calendar/ks-error-popup/ks-error-tooltip.tsx

@@ -0,0 +1,71 @@
+import { useState, type ReactNode } from 'react';
+import { StyleSheet, View, Text, Pressable, Modal } from 'react-native';
+
+interface Props {
+  children: ReactNode;
+  tooltip?: string;
+}
+
+const KSErrorTooltip = ({ children, tooltip }: Props) => {
+  const [visible, setVisible] = useState(false);
+
+  if (!tooltip) return <>{children}</>;
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={() => setVisible(!visible)}
+        onLongPress={() => setVisible(true)}
+        style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}
+      >
+        {children}
+      </Pressable>
+
+      {visible && (
+        <Modal
+          transparent={true}
+          visible={visible}
+          animationType="fade"
+          onRequestClose={() => setVisible(false)}
+        >
+          <Pressable
+            style={styles.modalOverlay}
+            onPress={() => setVisible(false)}
+          >
+            <View style={styles.tooltipBox}>
+              <Text style={styles.tooltipText}>{tooltip}</Text>
+            </View>
+          </Pressable>
+        </Modal>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'transparent',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tooltipBox: {
+    backgroundColor: '#1e3a8a', // blue-900
+    padding: 8,
+    borderRadius: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  tooltipText: {
+    color: '#ffffff',
+    fontSize: 14,
+  },
+});
+
+export default KSErrorTooltip;

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

@@ -0,0 +1,185 @@
+import { useRef, useCallback } from 'react';
+import { StyleSheet, View, Text, PanResponder } from 'react-native';
+import { useKSDensityCalendar } from '../context/use-ks-density-calendar-context';
+import type { ThemeKeyProps } from '../ks-density-calendar';
+
+type KSSliderProps = {
+  calendarDisplay: string;
+  themeKeys: ThemeKeyProps['themeKeys'];
+};
+
+const KSSlider = ({ themeKeys }: KSSliderProps) => {
+  const { state, dispatch, min, max } = useKSDensityCalendar();
+  const { minVal, maxVal } = state;
+
+  const sliderWidthRef = useRef(0);
+  const pageXRef = useRef(0);
+
+  const calculateValue = useCallback(
+    (touchX: number) => {
+      // Subtract the starting X position of the slider from the touch position
+      const relativeX = touchX - pageXRef.current;
+      const percentage = Math.max(
+        0,
+        Math.min(1, relativeX / sliderWidthRef.current)
+      );
+      return Math.round(percentage * (max - min) + min);
+    },
+    [min, max]
+  );
+
+  const minPanResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderMove: (evt) => {
+        const newValue = calculateValue(evt.nativeEvent.pageX);
+        if (newValue <= maxVal) {
+          dispatch({ type: 'SET_VALUE', field: 'minVal', value: newValue });
+          dispatch({
+            type: 'SET_VALUE',
+            field: 'lastFocusedInput',
+            value: 'min',
+          });
+        }
+      },
+    })
+  ).current;
+
+  const maxPanResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderMove: (evt) => {
+        const newValue = calculateValue(evt.nativeEvent.pageX);
+        if (newValue >= minVal) {
+          dispatch({ type: 'SET_VALUE', field: 'maxVal', value: newValue });
+          dispatch({
+            type: 'SET_VALUE',
+            field: 'lastFocusedInput',
+            value: 'max',
+          });
+        }
+      },
+    })
+  ).current;
+
+  const minPos = (minVal / max) * 100;
+  const maxPos = (maxVal / max) * 100;
+
+  return (
+    <View style={styles.sliderContainer}>
+      <View style={styles.leftValue}>
+        <Text style={styles.valueText}>{minVal}</Text>
+      </View>
+
+      <View
+        style={styles.middle}
+        onLayout={(e) => {
+          const { width, x } = e.nativeEvent.layout;
+          sliderWidthRef.current = width;
+          // Note: In nested views, you might need .measure() for absolute pageX
+          // but for basic layouts, layout.x or a fixed container padding works.
+          pageXRef.current = x + 10; // 10 is the sliderContainer padding
+        }}
+      >
+        <View
+          style={[
+            styles.sliderTrack,
+            { backgroundColor: themeKeys.secondaryColorPnt15 },
+          ]}
+        />
+
+        <View
+          style={[
+            styles.sliderRange,
+            {
+              backgroundColor: themeKeys.secondaryColor,
+              left: `${minPos}%`,
+              width: `${maxPos - minPos}%`,
+            },
+          ]}
+        />
+
+        <View
+          {...minPanResponder.panHandlers}
+          style={[
+            styles.thumb,
+            {
+              left: `${minPos}%`,
+              backgroundColor: themeKeys.secondaryColor,
+              borderColor: '#fff',
+            },
+          ]}
+        />
+
+        <View
+          {...maxPanResponder.panHandlers}
+          style={[
+            styles.thumb,
+            {
+              left: `${maxPos}%`,
+              backgroundColor: themeKeys.secondaryColor,
+              borderColor: '#fff',
+            },
+          ]}
+        />
+      </View>
+
+      <View style={styles.rightValue}>
+        <Text style={styles.valueText}>{maxVal}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sliderContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    height: 50,
+    paddingHorizontal: 10,
+  },
+  leftValue: {
+    width: '10%',
+    alignItems: 'flex-start',
+  },
+  middle: {
+    width: '80%',
+    height: 40,
+    justifyContent: 'center',
+  },
+  rightValue: {
+    width: '10%',
+    alignItems: 'flex-end',
+  },
+  valueText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  sliderTrack: {
+    height: 5,
+    width: '100%',
+    borderRadius: 3,
+    position: 'absolute',
+  },
+  sliderRange: {
+    height: 5,
+    borderRadius: 3,
+    position: 'absolute',
+  },
+  thumb: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    position: 'absolute',
+    marginLeft: -12,
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+  },
+});
+
+export default KSSlider;

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

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from 'react';
+import { StyleSheet, Pressable, Animated } from 'react-native';
+import { useKSDensityCalendar } from '../context/use-ks-density-calendar-context';
+
+const KSToggler = () => {
+  const { state, handleToggleSlider } = useKSDensityCalendar();
+  const { toggleKSSlider } = state;
+
+  const animatedValue = useRef(
+    new Animated.Value(toggleKSSlider ? 1 : 0)
+  ).current;
+
+  useEffect(() => {
+    Animated.spring(animatedValue, {
+      toValue: toggleKSSlider ? 1 : 0,
+      stiffness: 700,
+      damping: 30,
+      useNativeDriver: false,
+    }).start();
+  }, [toggleKSSlider]);
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 30],
+  });
+
+  const backgroundColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['#ccc', '#007AFF'],
+  });
+
+  return (
+    <Pressable onPress={handleToggleSlider}>
+      <Animated.View style={[styles.switch, { backgroundColor }]}>
+        <Animated.View
+          style={[
+            styles.handle,
+            {
+              transform: [{ translateX }],
+              backgroundColor: '#fff',
+            },
+          ]}
+        />
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  switch: {
+    width: 60,
+    height: 30,
+    borderRadius: 15,
+    padding: 5,
+    justifyContent: 'center',
+  },
+  handle: {
+    height: 20,
+    width: 20,
+    borderRadius: 10,
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 1,
+  },
+});
+
+export default KSToggler;

package/src/components/density-calendar/month-view/days-of-week.tsx

@@ -0,0 +1,47 @@
+import { StyleSheet, View, Text, ScrollView } from 'react-native';
+import { useKSDensityCalendar } from '../context/use-ks-density-calendar-context';
+
+const DaysOfWeek = () => {
+  const { daysOfWeek } = useKSDensityCalendar();
+
+  return (
+    <View style={styles.outerContainer}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+        scrollEnabled={false}
+      >
+        {Array.from({ length: 7 }, (_, index) => (
+          <View key={daysOfWeek[index] || index} style={styles.dayColumn}>
+            <Text style={styles.dayText}>{daysOfWeek[index]}</Text>
+          </View>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    width: '100%',
+    paddingLeft: 8,
+  },
+  scrollContent: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  dayColumn: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dayText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+});
+
+export default DaysOfWeek;