Availability Scheduler

1"use client";
2// beui.dev/components/blocks/availability-scheduler
3 
4import { LayoutGroup, useReducedMotion } from "motion/react";
5import { useCallback, useId, useMemo, useRef, useState } from "react";
6import { cn } from "@/lib/utils";
7import { DayRow } from "./day-row";
8import {
9  type DayAvailability,
10  type DayKey,
11  WEEKDAYS,
12  type WeekAvailability,
13  buildOptions,
14  defaultWeek,
15} from "./types";
16 
17export type {
18  DayAvailability,
19  DayKey,
20  TimeRange,
21  WeekAvailability,
22} from "./types";
23export { defaultWeek } from "./types";
24 
25export interface AvailabilitySchedulerProps {
26  value?: WeekAvailability;
27  defaultValue?: WeekAvailability;
28  onChange?: (value: WeekAvailability) => void;
29  /** Minutes between selectable times. Default 30. */
30  step?: number;
31  className?: string;
32}
33 
34export function AvailabilityScheduler({
35  value,
36  defaultValue,
37  onChange,
38  step = 30,
39  className,
40}: AvailabilitySchedulerProps) {
41  const reduce = useReducedMotion() ?? false;
42  const groupId = useId();
43  const options = useMemo(() => buildOptions(step), [step]);
44  const idRef = useRef(0);
45 
46  const [internal, setInternal] = useState<WeekAvailability>(
47    () => defaultValue ?? defaultWeek(),
48  );
49  const controlled = value !== undefined;
50  const week = controlled ? value : internal;
51 
52  const commit = useCallback(
53    (next: WeekAvailability) => {
54      if (!controlled) setInternal(next);
55      onChange?.(next);
56    },
57    [controlled, onChange],
58  );
59 
60  const setDay = useCallback(
61    (day: DayKey, next: DayAvailability) => {
62      commit({ ...week, [day]: next });
63    },
64    [commit, week],
65  );
66 
67  const copyDay = useCallback(
68    (from: DayKey, targets: DayKey[]) => {
69      const source = week[from];
70      const next = { ...week };
71      for (const t of targets) {
72        next[t] = {
73          enabled: source.enabled,
74          ranges: source.ranges.map((r) => ({
75            ...r,
76            id: `${t}-c${idRef.current++}`,
77          })),
78        };
79      }
80      commit(next);
81    },
82    [commit, week],
83  );
84 
85  return (
86    <LayoutGroup id={groupId}>
87      <div className={cn("w-full max-w-xl divide-y divide-border", className)}>
88        {WEEKDAYS.map(({ key, label }, i) => (
89          <DayRow
90            key={key}
91            day={key}
92            label={label}
93            state={week[key]}
94            options={options}
95            reduce={reduce}
96            depth={WEEKDAYS.length - i}
97            onChange={(next) => setDay(key, next)}
98// … truncated