react-native-ruler-date-picker 0.1.0 → 0.2.0

package/src/RulerRangeTrack.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { useRulerRangeContext } from './RulerRangeContext';
+import { RulerRangeIndicator } from './RulerRangeIndicator';
+import { RulerRangeTicks } from './RulerRangeTicks';
+
+export interface RulerRangeTrackProps {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+
+export function RulerRangeTrack({ style, children }: RulerRangeTrackProps = {}) {
+  const { panGesture, rulerHeight, width } = useRulerRangeContext();
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <View style={[styles.rulerContainer, { width, height: rulerHeight }, style]}>
+        {children ?? (
+          <>
+            <RulerRangeIndicator />
+            <RulerRangeTicks />
+          </>
+        )}
+      </View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  rulerContainer: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+});
+

package/src/RulerResetButton.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { useRulerContext } from './RulerContext';
+
+export interface RulerResetButtonProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  label?: string;
+}
+
+export function RulerResetButton({
+  children,
+  style,
+  textStyle,
+  label = 'Today',
+}: RulerResetButtonProps = {}) {
+  const { resetToToday, theme } = useRulerContext();
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      onPress={() => resetToToday(true)}
+      style={[styles.resetBtn, style]}
+    >
+      {children ?? (
+        <Text
+          style={[
+            styles.resetText,
+            { color: theme.accentColor },
+            textStyle,
+          ]}
+        >
+          {label}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  resetBtn: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    backgroundColor: 'rgba(0,0,0,0.05)',
+  },
+  resetText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/RulerRoot.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { RulerDatePickerProps, IndicatorConfig } from './types';
+import { useRulerDatePicker } from './useRulerDatePicker';
+import { RulerContext } from './RulerContext';
+import { DEFAULT_LENS_CONFIG } from './defaults';
+
+export interface RulerRootProps extends RulerDatePickerProps {
+  children?: React.ReactNode;
+}
+
+export function RulerRoot(props: RulerRootProps) {
+  const {
+    children,
+    style,
+    indicator,
+    lensEffect,
+    testID,
+  } = props;
+
+  const ruler = useRulerDatePicker(props);
+
+  const lensConfig = React.useMemo(() => {
+    if (!lensEffect) return null;
+    if (typeof lensEffect === 'object') {
+      return {
+        ...DEFAULT_LENS_CONFIG,
+        ...lensEffect,
+      };
+    }
+    return DEFAULT_LENS_CONFIG;
+  }, [lensEffect]);
+
+  const indicatorConfig: IndicatorConfig | undefined =
+    typeof indicator === 'object' ? indicator : undefined;
+  const headerConfig =
+    typeof props.header === 'object' ? props.header : undefined;
+
+  const contextValue = {
+    ...ruler,
+    indicatorConfig,
+    headerConfig,
+    locale: props.locale,
+    lensConfig,
+  };
+
+  return (
+    <RulerContext.Provider value={contextValue}>
+      <View
+        testID={testID}
+        accessible={true}
+        accessibilityRole="adjustable"
+        accessibilityLabel={props.accessibilityLabel ?? 'Date picker'}
+        accessibilityValue={{ text: ruler.selectedDateStr }}
+        accessibilityActions={[
+          { name: 'increment', label: 'Next day' },
+          { name: 'decrement', label: 'Previous day' },
+        ]}
+        onAccessibilityAction={(event) => {
+          if (event.nativeEvent.actionName === 'increment') {
+            const next = new Date(ruler.selectedDate);
+            next.setDate(next.getDate() + 1);
+            ruler.scrollToDate(next, true);
+          } else if (event.nativeEvent.actionName === 'decrement') {
+            const prev = new Date(ruler.selectedDate);
+            prev.setDate(prev.getDate() - 1);
+            ruler.scrollToDate(prev, true);
+          }
+        }}
+        style={[
+          styles.container,
+          {
+            minHeight: ruler.height,
+            backgroundColor: ruler.theme.background,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </RulerContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    width: '100%',
+    paddingVertical: 8,
+  },
+});

package/src/RulerTicks.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { useRulerContext } from './RulerContext';
+import { Tick } from './Tick';
+import type { ResolvedTick } from './types';
+
+export interface RulerTicksProps {
+  style?: StyleProp<ViewStyle>;
+  renderTick?: (tick: ResolvedTick, tickSpacing: number, rulerHeight: number) => React.ReactNode;
+}
+
+export function RulerTicks({ style, renderTick }: RulerTicksProps = {}) {
+  const { translateX, visibleTicks, tickSpacing, rulerHeight, width } =
+    useRulerContext();
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: translateX.value }],
+    }),
+    [translateX]
+  );
+
+  return (
+    <Animated.View
+      style={[
+        styles.ticksWrapper,
+        { left: width / 2 },
+        animatedStyle,
+        style,
+      ]}
+    >
+      {visibleTicks.map((tick) =>
+        renderTick ? (
+          <React.Fragment key={tick.offset}>
+            {renderTick(tick, tickSpacing, rulerHeight)}
+          </React.Fragment>
+        ) : (
+          <Tick
+            key={tick.offset}
+            tick={tick}
+            tickSpacing={tickSpacing}
+            rulerHeight={rulerHeight}
+          />
+        )
+      )}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  ticksWrapper: {
+    position: 'absolute',
+    height: '100%',
+    width: 0,
+  },
+});

package/src/RulerTrack.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import { useRulerContext } from './RulerContext';
+
+import { RulerIndicator } from './RulerIndicator';
+import { RulerTicks } from './RulerTicks';
+
+export interface RulerTrackProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function RulerTrack({ children, style }: RulerTrackProps = {}) {
+  const { panGesture, rulerHeight, width } = useRulerContext();
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <View style={[styles.rulerContainer, { width, height: rulerHeight }, style]}>
+        {children ?? (
+          <>
+            <RulerIndicator />
+            <RulerTicks />
+          </>
+        )}
+      </View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  rulerContainer: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+});

package/src/Tick.tsx

@@ -1,50 +1,45 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import type { ResolvedColors } from './types';
+import type { ResolvedTick } from './types';
 
 export interface TickProps {
-  offset: number;
-  isLabeled: boolean;
-  isToday: boolean;
-  isHighlighted: boolean;
-  dateStr: string;
+  tick: ResolvedTick;
   tickSpacing: number;
-  tickHeight: number;
-  tickTallHeight: number;
-  tickThickness: number;
-  tickColor: string;
-  tickTallColor: string;
-  labelColor: string;
-  accentColor: string;
-  todayDotSize: number;
-  labelFontSize: number;
   rulerHeight: number;
 }
 
 /**
  * Memoized single tick component.
- * Renders a vertical bar with optional label and today dot indicator.
- * Small and large ticks can be independently colored.
+ * Renders a vertical tick bar with optional label, dot indicator, or custom render element.
  */
 export const Tick = React.memo(function Tick({
-  offset,
-  isLabeled,
-  isToday,
-  dateStr,
+  tick,
   tickSpacing,
-  tickHeight,
-  tickTallHeight,
-  tickThickness,
-  tickColor,
-  tickTallColor,
-  labelColor,
-  accentColor,
-  todayDotSize,
-  labelFontSize,
   rulerHeight,
 }: TickProps) {
-  const resolvedTickColor = isLabeled ? tickTallColor : tickColor;
-  const resolvedTickHeight = isLabeled ? tickTallHeight : tickHeight;
+  if (tick.customRender) {
+    return (
+      <View
+        style={[
+          styles.tickContainer,
+          {
+            width: tickSpacing,
+            height: rulerHeight,
+            position: 'absolute',
+            left: tick.offset * tickSpacing - tickSpacing / 2,
+          },
+        ]}
+      >
+        {tick.customRender({
+          date: tick.date,
+          offset: tick.offset,
+          isToday: tick.isToday,
+          isSelected: tick.isSelected,
+          isInRange: tick.isInRange,
+        })}
+      </View>
+    );
+  }
 
   return (
     <View
@@ -54,34 +49,50 @@ export const Tick = React.memo(function Tick({
           width: tickSpacing,
           height: rulerHeight,
           position: 'absolute',
-          left: offset * tickSpacing - tickSpacing / 2,
+          left: tick.offset * tickSpacing - tickSpacing / 2,
         },
       ]}
     >
-      {isLabeled && (
-        <Text style={[styles.tickLabel, { color: labelColor, fontSize: labelFontSize }]}>
-          {dateStr}
+      {/* Label */}
+      {tick.labelText !== undefined && (
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.tickLabel,
+            {
+              color: tick.labelColor,
+              fontSize: tick.labelFontSize,
+              fontWeight: tick.labelFontWeight,
+            },
+          ]}
+        >
+          {tick.labelText}
         </Text>
       )}
-      {isToday && (
+
+      {/* Dot Badge */}
+      {tick.hasDot && (
         <View
           style={[
-            styles.todayDot,
+            styles.dot,
             {
-              backgroundColor: accentColor,
-              width: todayDotSize,
-              height: todayDotSize,
-              borderRadius: todayDotSize / 2,
+              backgroundColor: tick.dotColor,
+              width: tick.dotSize,
+              height: tick.dotSize,
+              borderRadius: tick.dotSize / 2,
+              bottom: tick.height + 4,
             },
           ]}
         />
       )}
+
+      {/* Bar */}
       <View
         style={{
-          backgroundColor: resolvedTickColor,
-          width: tickThickness,
-          height: resolvedTickHeight,
-          borderRadius: tickThickness / 2,
+          backgroundColor: tick.color,
+          width: tick.width,
+          height: tick.height,
+          borderRadius: tick.width / 2,
         }}
       />
     </View>
@@ -95,10 +106,10 @@ const styles = StyleSheet.create({
   },
   tickLabel: {
     position: 'absolute',
-    top: 10,
+    top: 6,
+    textAlign: 'center',
   },
-  todayDot: {
+  dot: {
     position: 'absolute',
-    top: 25,
   },
 });

package/src/defaults.ts

@@ -1,4 +1,4 @@
-import type { ResolvedColors } from './types';
+import type { ResolvedRulerTheme, LensConfig } from './types';
 
 // ── Internal constants (not user-configurable) ───────────────────────────
 export const MS_PER_DAY = 86_400_000;
@@ -7,38 +7,40 @@ export const DEFAULT_DAY_RANGE = 365;
 // ── User-configurable defaults ───────────────────────────────────────────
 export const DEFAULTS = {
   tickSpacing: 24,
-  tickHeight: 12,
-  tickTallHeight: 24,
-  tickThickness: 4,
+  tickWidth: 3,
   height: 120,
   rulerHeight: 60,
   indicatorWidth: 2,
   indicatorHeight: 40,
   todayDotSize: 6,
-  labelFontSize: 10,
   bufferTicks: 10,
-  updateDebounceMs: 100,
+  debounceMs: 100,
   fastSwipeTickThreshold: 1,
   continuousHapticIntervalMs: 20,
-  enableHaptics: true,
   showResetToToday: false,
 } as const;
 
+export const DEFAULT_LENS_CONFIG: Required<LensConfig> = {
+  magnification: 1.6,
+  radius: 60,
+  scaleTicks: true,
+};
+
 // ── Default color palettes ───────────────────────────────────────────────
-export const LIGHT_COLORS: ResolvedColors = {
-  tickColor: '#D1D5DB',
-  tickTallColor: '#9CA3AF',
-  labelColor: '#6B7280',
-  accentColor: '#3B82F6',
+export const LIGHT_THEME: ResolvedRulerTheme = {
+  background: 'transparent',
   indicatorColor: '#3B82F6',
-  backgroundColor: 'transparent',
+  accentColor: '#3B82F6',
+  labelColor: '#6B7280',
+  defaultTickColor: '#D1D5DB',
+  rangeHighlightColor: 'rgba(59, 130, 246, 0.15)',
 };
 
-export const DARK_COLORS: ResolvedColors = {
-  tickColor: '#4B5563',
-  tickTallColor: '#6B7280',
-  labelColor: '#9CA3AF',
-  accentColor: '#60A5FA',
+export const DARK_THEME: ResolvedRulerTheme = {
+  background: 'transparent',
   indicatorColor: '#60A5FA',
-  backgroundColor: 'transparent',
+  accentColor: '#60A5FA',
+  labelColor: '#9CA3AF',
+  defaultTickColor: '#4B5563',
+  rangeHighlightColor: 'rgba(96, 165, 250, 0.2)',
 };

package/src/index.ts

@@ -1,2 +1,84 @@
+// ── Components ─────────────────────────────────────────────────────────────
 export { RulerDatePicker } from './RulerDatePicker';
-export type { RulerDatePickerProps } from './types';
+/** @experimental */
+export { RulerDateRangePicker } from './RulerDateRangePicker';
+export { Ruler } from './Ruler';
+/** @experimental */
+export { RulerRange } from './RulerRange';
+export { Tick } from './Tick';
+export { RulerLensTrack } from './RulerLensTrack';
+export { RulerLensTicks } from './RulerLensTicks';
+export { LensTick } from './LensTick';
+
+// ── Compound Subcomponents ──────────────────────────────────────────────────
+export { RulerRoot, type RulerRootProps } from './RulerRoot';
+export { RulerTrack, type RulerTrackProps } from './RulerTrack';
+export { RulerIndicator, type RulerIndicatorProps } from './RulerIndicator';
+export { RulerTicks, type RulerTicksProps } from './RulerTicks';
+export { RulerHeader, type RulerHeaderProps } from './RulerHeader';
+export { RulerResetButton, type RulerResetButtonProps } from './RulerResetButton';
+
+// ── Compound Subcomponents [EXPERIMENTAL] ───────────────────────────────────
+export { RulerRangeRoot, type RulerRangeRootProps } from './RulerRangeRoot';
+export { RulerRangeTrack, type RulerRangeTrackProps } from './RulerRangeTrack';
+export { RulerRangeIndicator, type RulerRangeIndicatorProps } from './RulerRangeIndicator';
+export { RulerRangeHeader, type RulerRangeHeaderProps } from './RulerRangeHeader';
+export { RulerRangeHighlight, type RulerRangeHighlightProps } from './RulerRangeHighlight';
+export { RulerRangeTicks, type RulerRangeTicksProps } from './RulerRangeTicks';
+
+// ── Headless Hooks & Contexts ───────────────────────────────────────────────
+export { useRulerDatePicker, type UseRulerDatePickerReturn } from './useRulerDatePicker';
+/** @experimental */
+export { useRulerDateRangePicker, type UseRulerDateRangePickerReturn } from './useRulerDateRangePicker';
+export { useHaptics } from './useHaptics';
+export { RulerContext, useRulerContext, type RulerContextValue } from './RulerContext';
+/** @experimental */
+export { RulerRangeContext, useRulerRangeContext, type RulerRangeContextValue } from './RulerRangeContext';
+
+// ── Presets & Resolvers ───────────────────────────────────────────────────
+export {
+  DEFAULT_CALENDAR_TICKS,
+  DEFAULT_METRIC_TICKS,
+  DEFAULT_MINIMAL_TICKS,
+  resolveTickRules,
+} from './presets';
+export { resolveTick, matchesCondition } from './tickResolver';
+
+// ── Utilities & Constants ─────────────────────────────────────────────────
+export {
+  formatDateString,
+  normalizeDate,
+  dateToDayOffset,
+  dayOffsetToDate,
+  computeDayRange,
+  useResolvedTheme,
+} from './utils';
+export { DEFAULTS, DEFAULT_LENS_CONFIG, LIGHT_THEME, DARK_THEME, MS_PER_DAY } from './defaults';
+
+// ── Types ──────────────────────────────────────────────────────────────────
+export type {
+  TickContext,
+  TickCondition,
+  TickLabelConfig,
+  TickDotConfig,
+  TickRule,
+  ResolvedTick,
+  RulerTheme,
+  ResolvedRulerTheme,
+  IndicatorConfig,
+  HeaderConfig,
+  RangeHeaderConfig,
+  RangeHeaderContext,
+  RangeHighlightConfig,
+  RangeIndicatorConfig,
+  HapticConfig,
+  RulerDatePickerProps,
+  LensConfig,
+  DateRange,
+  DateRangeChangePayload,
+  RulerDateRangePickerProps,
+} from './types';
+export type { LensTickProps } from './LensTick';
+export type { RulerLensTrackProps } from './RulerLensTrack';
+export type { RulerLensTicksProps } from './RulerLensTicks';
+export type { TickProps } from './Tick';