@djangocfg/ui-tools 2.1.130 → 2.1.132

package/src/tools/CronScheduler/components/MonthDayGrid.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+/**
+ * MonthDayGrid
+ *
+ * Full-width calendar-style grid for selecting days of the month.
+ * Clean, intuitive design like a mini calendar.
+ */
+
+import { cn } from '@djangocfg/ui-core/lib';
+import { useCronMonthDays } from '../context/hooks';
+import type { MonthDay } from '../types';
+
+// Generate days 1-31
+const DAYS: MonthDay[] = Array.from({ length: 31 }, (_, i) => (i + 1) as MonthDay);
+
+// Fill to complete last row (31 days = 4 full rows + 3 days, need 4 more to fill)
+const GRID_SIZE = 35; // 5 rows x 7 columns
+
+export interface MonthDayGridProps {
+  disabled?: boolean;
+  showPresets?: boolean;
+  className?: string;
+}
+
+export function MonthDayGrid({
+  disabled,
+  showPresets = true,
+  className,
+}: MonthDayGridProps) {
+  const { monthDays, toggleMonthDay, setMonthDays } = useCronMonthDays();
+
+  const is1st = monthDays.length === 1 && monthDays[0] === 1;
+  const is15th = monthDays.length === 1 && monthDays[0] === 15;
+  const is1stAnd15th = monthDays.length === 2 && monthDays.includes(1) && monthDays.includes(15);
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {/* Quick Presets */}
+      {showPresets && (
+        <div className="flex gap-2">
+          <PresetButton
+            label="1st"
+            isActive={is1st}
+            onClick={() => setMonthDays([1] as MonthDay[])}
+            disabled={disabled}
+          />
+          <PresetButton
+            label="15th"
+            isActive={is15th}
+            onClick={() => setMonthDays([15] as MonthDay[])}
+            disabled={disabled}
+          />
+          <PresetButton
+            label="1st & 15th"
+            isActive={is1stAnd15th}
+            onClick={() => setMonthDays([1, 15] as MonthDay[])}
+            disabled={disabled}
+          />
+        </div>
+      )}
+
+      {/* Calendar Grid - full width */}
+      <div className="grid grid-cols-7 gap-1">
+        {Array.from({ length: GRID_SIZE }, (_, i) => {
+          const day = i + 1;
+          const isValidDay = day <= 31;
+          const isSelected = isValidDay && monthDays.includes(day as MonthDay);
+          // Days that don't exist in some months
+          const isPartialMonth = day > 28;
+
+          if (!isValidDay) {
+            return <div key={i} className="aspect-square" />;
+          }
+
+          return (
+            <button
+              key={day}
+              type="button"
+              disabled={disabled}
+              onClick={() => toggleMonthDay(day as MonthDay)}
+              aria-pressed={isSelected}
+              aria-label={`Day ${day}`}
+              className={cn(
+                'aspect-square flex items-center justify-center',
+                'rounded-lg text-sm font-medium',
+                'transition-all duration-150',
+                'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                'active:scale-[0.95]',
+                isSelected
+                  ? 'bg-primary text-primary-foreground shadow-sm'
+                  : cn(
+                      'bg-muted/30 hover:bg-muted/60',
+                      isPartialMonth
+                        ? 'text-muted-foreground/50'
+                        : 'text-muted-foreground'
+                    ),
+                disabled && 'opacity-50 cursor-not-allowed pointer-events-none'
+              )}
+            >
+              {day}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Selection hint */}
+      {monthDays.length > 1 && (
+        <p className="text-xs text-muted-foreground text-center">
+          {monthDays.length} days selected
+        </p>
+      )}
+    </div>
+  );
+}
+
+interface PresetButtonProps {
+  label: string;
+  isActive: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+function PresetButton({ label, isActive, onClick, disabled }: PresetButtonProps) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        'flex-1 px-3 py-1.5 rounded-md text-xs font-medium',
+        'transition-colors duration-150',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+        isActive
+          ? 'bg-primary/15 text-primary border border-primary/30'
+          : 'bg-muted/30 text-muted-foreground hover:bg-muted/50 border border-transparent',
+        disabled && 'opacity-50 cursor-not-allowed'
+      )}
+    >
+      {label}
+    </button>
+  );
+}

package/src/tools/CronScheduler/components/SchedulePreview.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+/**
+ * SchedulePreview
+ *
+ * Human-readable preview with cron expression and cheatsheet.
+ */
+
+import { useState, useCallback } from 'react';
+import { Calendar, Copy, Check } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useCronPreview } from '../context/hooks';
+import { CronCheatsheet } from './CronCheatsheet';
+
+export interface SchedulePreviewProps {
+  /** Show raw cron expression (default: true) */
+  showCronExpression?: boolean;
+  /** Enable copy to clipboard */
+  allowCopy?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export function SchedulePreview({
+  showCronExpression = true,
+  allowCopy = false,
+  className,
+}: SchedulePreviewProps) {
+  const { cronExpression, humanDescription, isValid } = useCronPreview();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(cronExpression);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, [cronExpression]);
+
+  return (
+    <div
+      className={cn(
+        'px-3 py-2.5 rounded-lg border',
+        'bg-muted/30 border-border/50',
+        !isValid && 'border-destructive/30 bg-destructive/5',
+        className
+      )}
+    >
+      {/* Human description */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          <Calendar
+            className={cn(
+              'h-4 w-4 shrink-0',
+              isValid ? 'text-primary' : 'text-destructive'
+            )}
+          />
+          <span
+            className={cn(
+              'text-sm',
+              isValid ? 'text-foreground' : 'text-destructive'
+            )}
+          >
+            {humanDescription}
+          </span>
+        </div>
+
+        {/* Copy Button */}
+        {allowCopy && (
+          <button
+            type="button"
+            onClick={handleCopy}
+            disabled={!isValid}
+            className={cn(
+              'p-1 rounded transition-colors duration-150',
+              'hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+              'disabled:opacity-50 disabled:cursor-not-allowed'
+            )}
+            title={copied ? 'Copied!' : 'Copy cron expression'}
+          >
+            {copied ? (
+              <Check className="h-3.5 w-3.5 text-green-500" />
+            ) : (
+              <Copy className="h-3.5 w-3.5 text-muted-foreground" />
+            )}
+          </button>
+        )}
+      </div>
+
+      {/* Cron expression with cheatsheet */}
+      {showCronExpression && (
+        <div className="mt-1.5 pt-1.5 border-t border-border/30 flex items-center justify-between">
+          <code className="text-xs font-mono text-muted-foreground">
+            {cronExpression}
+          </code>
+          <CronCheatsheet />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/tools/CronScheduler/components/ScheduleTypeSelector.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+/**
+ * ScheduleTypeSelector
+ *
+ * Segmented control for selecting schedule type.
+ * Uses Tabs from ui-core styled as a compact segmented control.
+ */
+
+import { Tabs, TabsList, TabsTrigger } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { useCronType } from '../context/hooks';
+import type { ScheduleType } from '../types';
+
+const SCHEDULE_TYPES: { value: ScheduleType; label: string }[] = [
+  { value: 'daily', label: 'Daily' },
+  { value: 'weekly', label: 'Weekly' },
+  { value: 'monthly', label: 'Monthly' },
+  { value: 'custom', label: 'Custom' },
+];
+
+export interface ScheduleTypeSelectorProps {
+  disabled?: boolean;
+  className?: string;
+}
+
+export function ScheduleTypeSelector({
+  disabled,
+  className,
+}: ScheduleTypeSelectorProps) {
+  const { type, setType } = useCronType();
+
+  return (
+    <Tabs
+      value={type}
+      onValueChange={(v) => setType(v as ScheduleType)}
+      className={cn('w-full', className)}
+    >
+      <TabsList className="grid w-full grid-cols-4 h-9 p-0.5">
+        {SCHEDULE_TYPES.map(({ value, label }) => (
+          <TabsTrigger
+            key={value}
+            value={value}
+            disabled={disabled}
+            className={cn(
+              'text-xs font-medium px-2 py-1.5',
+              'data-[state=active]:shadow-sm',
+              'transition-all duration-150'
+            )}
+          >
+            {label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
+  );
+}

package/src/tools/CronScheduler/components/TimeSelector.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+/**
+ * TimeSelector
+ *
+ * Clean time picker with hour and minute selects.
+ */
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+import { Clock } from 'lucide-react';
+import { useCronTime } from '../context/hooks';
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const MINUTES = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+
+export interface TimeSelectorProps {
+  format?: '12h' | '24h';
+  disabled?: boolean;
+  className?: string;
+}
+
+export function TimeSelector({
+  format = '24h',
+  disabled,
+  className,
+}: TimeSelectorProps) {
+  const { hour, minute, setTime } = useCronTime();
+
+  const is24h = format === '24h';
+  const displayHour = is24h ? hour : (hour % 12) || 12;
+  const isPM = hour >= 12;
+
+  const handleHourChange = (value: string) => {
+    let newHour = parseInt(value, 10);
+    if (!is24h) {
+      if (isPM && newHour !== 12) newHour += 12;
+      else if (!isPM && newHour === 12) newHour = 0;
+    }
+    setTime(newHour, minute);
+  };
+
+  const handleMinuteChange = (value: string) => {
+    setTime(hour, parseInt(value, 10));
+  };
+
+  const handlePeriodChange = (value: string) => {
+    const newIsPM = value === 'PM';
+    let newHour = hour;
+    if (newIsPM && hour < 12) newHour = hour + 12;
+    else if (!newIsPM && hour >= 12) newHour = hour - 12;
+    setTime(newHour, minute);
+  };
+
+  const hours = is24h ? HOURS : Array.from({ length: 12 }, (_, i) => i + 1);
+
+  return (
+    <div className={cn('flex items-center gap-3', className)}>
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <Clock className="h-4 w-4" />
+        <span className="text-sm">Run at</span>
+      </div>
+
+      <div className="flex items-center gap-1.5 flex-1">
+        {/* Hour */}
+        <Select
+          value={displayHour.toString()}
+          onValueChange={handleHourChange}
+          disabled={disabled}
+        >
+          <SelectTrigger className="w-[70px] h-9">
+            <SelectValue>
+              {displayHour.toString().padStart(2, '0')}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent className="max-h-48">
+            {hours.map((h) => (
+              <SelectItem key={h} value={h.toString()}>
+                {h.toString().padStart(2, '0')}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <span className="text-muted-foreground font-medium">:</span>
+
+        {/* Minute */}
+        <Select
+          value={minute.toString()}
+          onValueChange={handleMinuteChange}
+          disabled={disabled}
+        >
+          <SelectTrigger className="w-[70px] h-9">
+            <SelectValue>
+              {minute.toString().padStart(2, '0')}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent className="max-h-48">
+            {MINUTES.map((m) => (
+              <SelectItem key={m} value={m.toString()}>
+                {m.toString().padStart(2, '0')}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* AM/PM for 12h */}
+        {!is24h && (
+          <Select
+            value={isPM ? 'PM' : 'AM'}
+            onValueChange={handlePeriodChange}
+            disabled={disabled}
+          >
+            <SelectTrigger className="w-[70px] h-9">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="AM">AM</SelectItem>
+              <SelectItem value="PM">PM</SelectItem>
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/tools/CronScheduler/components/index.ts

@@ -0,0 +1,24 @@
+/**
+ * CronScheduler Components
+ */
+
+export { ScheduleTypeSelector } from './ScheduleTypeSelector';
+export type { ScheduleTypeSelectorProps } from './ScheduleTypeSelector';
+
+export { TimeSelector } from './TimeSelector';
+export type { TimeSelectorProps } from './TimeSelector';
+
+export { DayChips } from './DayChips';
+export type { DayChipsProps } from './DayChips';
+
+export { MonthDayGrid } from './MonthDayGrid';
+export type { MonthDayGridProps } from './MonthDayGrid';
+
+export { CustomInput } from './CustomInput';
+export type { CustomInputProps } from './CustomInput';
+
+export { SchedulePreview } from './SchedulePreview';
+export type { SchedulePreviewProps } from './SchedulePreview';
+
+export { CronCheatsheet } from './CronCheatsheet';
+export type { CronCheatsheetProps } from './CronCheatsheet';

package/src/tools/CronScheduler/context/CronSchedulerContext.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+/**
+ * CronScheduler Context
+ *
+ * Provides centralized state management for the CronScheduler component.
+ * All child components subscribe to this context for state and actions.
+ */
+
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useCallback,
+  useState,
+  useEffect,
+  useRef,
+} from 'react';
+import type {
+  CronSchedulerContextValue,
+  CronSchedulerState,
+  CronSchedulerProviderProps,
+  ScheduleType,
+  WeekDay,
+  MonthDay,
+} from '../types';
+import { buildCron } from '../utils/cron-builder';
+import { parseCron } from '../utils/cron-parser';
+import { humanizeCron } from '../utils/cron-humanize';
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const CronSchedulerContext = createContext<CronSchedulerContextValue | null>(null);
+
+// ============================================================================
+// Default State
+// ============================================================================
+
+const DEFAULT_STATE: CronSchedulerState = {
+  type: 'daily',
+  hour: 9,
+  minute: 0,
+  weekDays: [1, 2, 3, 4, 5] as WeekDay[], // Mon-Fri
+  monthDays: [1] as MonthDay[],
+  customCron: '* * * * *',
+  isValid: true,
+};
+
+// ============================================================================
+// Provider
+// ============================================================================
+
+export function CronSchedulerProvider({
+  children,
+  value,
+  onChange,
+  defaultType = 'daily',
+}: CronSchedulerProviderProps) {
+  // Track if this is initial mount to avoid calling onChange on mount
+  const isInitialMount = useRef(true);
+
+  // Store onChange in a ref to avoid triggering effects when it changes
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  // Initialize state from value prop or defaults
+  const [state, setState] = useState<CronSchedulerState>(() => {
+    if (value) {
+      const parsed = parseCron(value);
+      if (parsed) return parsed;
+    }
+    return { ...DEFAULT_STATE, type: defaultType };
+  });
+
+  // Sync with external value (controlled component support)
+  useEffect(() => {
+    if (value) {
+      const parsed = parseCron(value);
+      if (parsed) {
+        const currentCron = buildCron(state);
+        if (value !== currentCron) {
+          setState(parsed);
+        }
+      }
+    }
+  }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Computed: cron expression
+  const cronExpression = useMemo(() => buildCron(state), [state]);
+
+  // Computed: human-readable description
+  const humanDescription = useMemo(() => humanizeCron(cronExpression), [cronExpression]);
+
+  // Notify parent on change (skip initial mount)
+  // Use ref to avoid re-triggering when onChange identity changes
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    onChangeRef.current?.(cronExpression);
+  }, [cronExpression]);
+
+  // ============================================================================
+  // Actions
+  // ============================================================================
+
+  const setType = useCallback((type: ScheduleType) => {
+    setState(s => ({ ...s, type }));
+  }, []);
+
+  const setTime = useCallback((hour: number, minute: number) => {
+    setState(s => ({
+      ...s,
+      hour: Math.max(0, Math.min(23, hour)),
+      minute: Math.max(0, Math.min(59, minute)),
+    }));
+  }, []);
+
+  const toggleWeekDay = useCallback((day: WeekDay) => {
+    setState(s => {
+      const hasDay = s.weekDays.includes(day);
+      // Prevent deselecting the last day
+      if (hasDay && s.weekDays.length === 1) return s;
+
+      const newDays = hasDay
+        ? s.weekDays.filter(d => d !== day)
+        : [...s.weekDays, day];
+
+      return {
+        ...s,
+        weekDays: newDays.sort((a, b) => a - b) as WeekDay[],
+      };
+    });
+  }, []);
+
+  const setWeekDays = useCallback((days: WeekDay[]) => {
+    setState(s => ({
+      ...s,
+      weekDays: days.length > 0
+        ? [...days].sort((a, b) => a - b) as WeekDay[]
+        : [1] as WeekDay[], // Default to Monday if empty
+    }));
+  }, []);
+
+  const toggleMonthDay = useCallback((day: MonthDay) => {
+    setState(s => {
+      const hasDay = s.monthDays.includes(day);
+      // Prevent deselecting the last day
+      if (hasDay && s.monthDays.length === 1) return s;
+
+      const newDays = hasDay
+        ? s.monthDays.filter(d => d !== day)
+        : [...s.monthDays, day];
+
+      return {
+        ...s,
+        monthDays: newDays.sort((a, b) => a - b) as MonthDay[],
+      };
+    });
+  }, []);
+
+  const setMonthDays = useCallback((days: MonthDay[]) => {
+    setState(s => ({
+      ...s,
+      monthDays: days.length > 0
+        ? [...days].sort((a, b) => a - b) as MonthDay[]
+        : [1] as MonthDay[], // Default to 1st if empty
+    }));
+  }, []);
+
+  const setCustomCron = useCallback((customCron: string) => {
+    const parsed = parseCron(customCron);
+    setState(s => ({
+      ...s,
+      customCron,
+      isValid: parsed !== null,
+    }));
+  }, []);
+
+  const reset = useCallback(() => {
+    setState({ ...DEFAULT_STATE, type: defaultType });
+  }, [defaultType]);
+
+  // ============================================================================
+  // Context Value
+  // ============================================================================
+
+  const contextValue: CronSchedulerContextValue = useMemo(
+    () => ({
+      // State
+      ...state,
+      // Computed
+      cronExpression,
+      humanDescription,
+      // Actions
+      setType,
+      setTime,
+      toggleWeekDay,
+      setWeekDays,
+      toggleMonthDay,
+      setMonthDays,
+      setCustomCron,
+      reset,
+    }),
+    [
+      state,
+      cronExpression,
+      humanDescription,
+      setType,
+      setTime,
+      toggleWeekDay,
+      setWeekDays,
+      toggleMonthDay,
+      setMonthDays,
+      setCustomCron,
+      reset,
+    ]
+  );
+
+  return (
+    <CronSchedulerContext.Provider value={contextValue}>
+      {children}
+    </CronSchedulerContext.Provider>
+  );
+}
+
+// ============================================================================
+// Context Hook
+// ============================================================================
+
+export function useCronSchedulerContext(): CronSchedulerContextValue {
+  const context = useContext(CronSchedulerContext);
+  if (!context) {
+    throw new Error(
+      'useCronSchedulerContext must be used within CronSchedulerProvider'
+    );
+  }
+  return context;
+}