@agent-native/scheduling 0.1.1

package/src/react/components/_shadcn-shims.d.ts

@@ -0,0 +1,251 @@
+/**
+ * Type shims for the consumer's shadcn/ui components.
+ *
+ * The scheduling package's React components import shadcn primitives via
+ * the standard `@/components/ui/*` alias. That alias is resolved at
+ * *build time* by the consumer's bundler (Vite / React Router) using the
+ * template's `tsconfig.json` `paths` setting.
+ *
+ * The package itself doesn't have access to that alias during `tsc`
+ * compilation, so we declare broad shapes here to make the compiler happy
+ * without coupling the package to a specific shadcn version. Runtime
+ * behaviour is driven entirely by the consumer's actual shadcn modules.
+ *
+ * Expected consumer primitives (add to your `app/components/ui/` folder
+ * before importing any `@agent-native/scheduling/react/components` files):
+ *
+ *   - button    (Button)
+ *   - input     (Input)
+ *   - label     (Label)
+ *   - textarea  (Textarea)
+ *   - switch    (Switch)
+ *   - badge     (Badge)
+ *   - card      (Card, CardContent, CardDescription, CardHeader, CardTitle)
+ *   - dialog    (Dialog, DialogContent, DialogHeader, DialogTitle,
+ *                DialogDescription, DialogFooter, DialogTrigger)
+ *   - select    (Select, SelectContent, SelectItem, SelectTrigger, SelectValue)
+ *   - separator (Separator)
+ *   - tabs      (Tabs, TabsList, TabsTrigger, TabsContent)
+ *   - tooltip   (Tooltip, TooltipContent, TooltipTrigger)
+ *   - dropdown-menu (DropdownMenu, DropdownMenuContent, DropdownMenuItem,
+ *                    DropdownMenuSeparator, DropdownMenuTrigger)
+ *   - alert-dialog (AlertDialog, AlertDialogAction, AlertDialogCancel,
+ *                   AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
+ *                   AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger)
+ */
+declare module "@/components/ui/button" {
+  import type { ComponentType, ButtonHTMLAttributes, ReactNode } from "react";
+  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+    variant?:
+      | "default"
+      | "destructive"
+      | "outline"
+      | "secondary"
+      | "ghost"
+      | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+    children?: ReactNode;
+  }
+  export const Button: ComponentType<ButtonProps>;
+}
+
+declare module "@/components/ui/input" {
+  import type { ComponentType, InputHTMLAttributes } from "react";
+  export const Input: ComponentType<InputHTMLAttributes<HTMLInputElement>>;
+}
+
+declare module "@/components/ui/label" {
+  import type { ComponentType, LabelHTMLAttributes, ReactNode } from "react";
+  export const Label: ComponentType<
+    LabelHTMLAttributes<HTMLLabelElement> & { children?: ReactNode }
+  >;
+}
+
+declare module "@/components/ui/textarea" {
+  import type { ComponentType, TextareaHTMLAttributes } from "react";
+  export const Textarea: ComponentType<
+    TextareaHTMLAttributes<HTMLTextAreaElement>
+  >;
+}
+
+declare module "@/components/ui/switch" {
+  import type { ComponentType } from "react";
+  export const Switch: ComponentType<{
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+  }>;
+}
+
+declare module "@/components/ui/badge" {
+  import type { ComponentType, HTMLAttributes, ReactNode } from "react";
+  export const Badge: ComponentType<
+    HTMLAttributes<HTMLDivElement> & {
+      variant?: "default" | "secondary" | "outline" | "destructive";
+      children?: ReactNode;
+    }
+  >;
+}
+
+declare module "@/components/ui/card" {
+  import type { ComponentType, HTMLAttributes, ReactNode } from "react";
+  type P = HTMLAttributes<HTMLDivElement> & { children?: ReactNode };
+  export const Card: ComponentType<P>;
+  export const CardHeader: ComponentType<P>;
+  export const CardTitle: ComponentType<P>;
+  export const CardDescription: ComponentType<P>;
+  export const CardContent: ComponentType<P>;
+  export const CardFooter: ComponentType<P>;
+}
+
+declare module "@/components/ui/dialog" {
+  import type { ComponentType, HTMLAttributes, ReactNode } from "react";
+  type P = HTMLAttributes<HTMLDivElement> & { children?: ReactNode };
+  export const Dialog: ComponentType<{
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+  }>;
+  export const DialogTrigger: ComponentType<{
+    asChild?: boolean;
+    children?: ReactNode;
+  }>;
+  export const DialogContent: ComponentType<P>;
+  export const DialogHeader: ComponentType<P>;
+  export const DialogTitle: ComponentType<P>;
+  export const DialogDescription: ComponentType<P>;
+  export const DialogFooter: ComponentType<P>;
+}
+
+declare module "@/components/ui/select" {
+  import type { ComponentType, ReactNode } from "react";
+  export const Select: ComponentType<{
+    value?: string;
+    onValueChange?: (v: string) => void;
+    disabled?: boolean;
+    children?: ReactNode;
+  }>;
+  export const SelectTrigger: ComponentType<{
+    className?: string;
+    children?: ReactNode;
+  }>;
+  export const SelectValue: ComponentType<{ placeholder?: string }>;
+  export const SelectContent: ComponentType<{ children?: ReactNode }>;
+  export const SelectItem: ComponentType<{
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+  }>;
+}
+
+declare module "@/components/ui/separator" {
+  import type { ComponentType } from "react";
+  export const Separator: ComponentType<{
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+  }>;
+}
+
+declare module "@/components/ui/tabs" {
+  import type { ComponentType, ReactNode } from "react";
+  export const Tabs: ComponentType<{
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+    className?: string;
+    children?: ReactNode;
+  }>;
+  export const TabsList: ComponentType<{
+    className?: string;
+    children?: ReactNode;
+  }>;
+  export const TabsTrigger: ComponentType<{
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+  }>;
+  export const TabsContent: ComponentType<{
+    value: string;
+    className?: string;
+    children?: ReactNode;
+  }>;
+}
+
+declare module "@/components/ui/tooltip" {
+  import type { ComponentType, ReactNode } from "react";
+  export const Tooltip: ComponentType<{ children?: ReactNode }>;
+  export const TooltipTrigger: ComponentType<{
+    asChild?: boolean;
+    children?: ReactNode;
+  }>;
+  export const TooltipContent: ComponentType<{
+    side?: "top" | "right" | "bottom" | "left";
+    children?: ReactNode;
+  }>;
+  export const TooltipProvider: ComponentType<{ children?: ReactNode }>;
+}
+
+declare module "@/components/ui/dropdown-menu" {
+  import type { ComponentType, ReactNode } from "react";
+  export const DropdownMenu: ComponentType<{ children?: ReactNode }>;
+  export const DropdownMenuTrigger: ComponentType<{
+    asChild?: boolean;
+    children?: ReactNode;
+  }>;
+  export const DropdownMenuContent: ComponentType<{
+    align?: "start" | "center" | "end";
+    children?: ReactNode;
+  }>;
+  export const DropdownMenuItem: ComponentType<{
+    asChild?: boolean;
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    children?: ReactNode;
+  }>;
+  export const DropdownMenuSeparator: ComponentType;
+}
+
+declare module "@/components/ui/alert-dialog" {
+  import type { ComponentType, ReactNode } from "react";
+  export const AlertDialog: ComponentType<{
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+  }>;
+  export const AlertDialogTrigger: ComponentType<{
+    asChild?: boolean;
+    children?: ReactNode;
+  }>;
+  export const AlertDialogContent: ComponentType<{ children?: ReactNode }>;
+  export const AlertDialogHeader: ComponentType<{ children?: ReactNode }>;
+  export const AlertDialogTitle: ComponentType<{ children?: ReactNode }>;
+  export const AlertDialogDescription: ComponentType<{ children?: ReactNode }>;
+  export const AlertDialogFooter: ComponentType<{ children?: ReactNode }>;
+  export const AlertDialogAction: ComponentType<{
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+    children?: ReactNode;
+  }>;
+  export const AlertDialogCancel: ComponentType<{ children?: ReactNode }>;
+}
+
+declare module "@/components/ui/popover" {
+  import type { ComponentType, ReactNode } from "react";
+  export const Popover: ComponentType<{
+    open?: boolean;
+    onOpenChange?: (o: boolean) => void;
+    children?: ReactNode;
+  }>;
+  export const PopoverTrigger: ComponentType<{
+    asChild?: boolean;
+    children?: ReactNode;
+  }>;
+  export const PopoverContent: ComponentType<{
+    align?: "start" | "center" | "end";
+    className?: string;
+    children?: ReactNode;
+  }>;
+}

package/src/react/components/booking-links/AvailabilityEditor.tsx

@@ -0,0 +1,177 @@
+/**
+ * AvailabilityEditor — weekly schedule grid with per-day toggles and time
+ * pickers. Matches the calendar template's visual baseline.
+ *
+ * This is the "schedule body" — for the full per-day intervals +
+ * date-override grid, compose this with a `DateOverridesEditor`
+ * (not included yet; scheduling's existing per-page implementation
+ * remains canonical for v0.1).
+ *
+ * Shadcn primitives expected in the consumer: input, label, switch.
+ */
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+export type DayKey =
+  | "monday"
+  | "tuesday"
+  | "wednesday"
+  | "thursday"
+  | "friday"
+  | "saturday"
+  | "sunday";
+
+export interface TimeSlot {
+  start: string;
+  end: string;
+}
+
+export interface DaySchedule {
+  enabled: boolean;
+  slots: TimeSlot[];
+}
+
+export type WeeklySchedule = Record<DayKey, DaySchedule>;
+
+const DAYS: { key: DayKey; label: string; short: string }[] = [
+  { key: "monday", label: "Monday", short: "Mon" },
+  { key: "tuesday", label: "Tuesday", short: "Tue" },
+  { key: "wednesday", label: "Wednesday", short: "Wed" },
+  { key: "thursday", label: "Thursday", short: "Thu" },
+  { key: "friday", label: "Friday", short: "Fri" },
+  { key: "saturday", label: "Saturday", short: "Sat" },
+  { key: "sunday", label: "Sunday", short: "Sun" },
+];
+
+export interface AvailabilityEditorProps {
+  value: WeeklySchedule;
+  onChange: (next: WeeklySchedule) => void;
+}
+
+export function AvailabilityEditor({
+  value,
+  onChange,
+}: AvailabilityEditorProps) {
+  const setDay = (day: DayKey, patch: Partial<DaySchedule>) => {
+    onChange({
+      ...value,
+      [day]: { ...value[day], ...patch },
+    });
+  };
+
+  const setSlot = (day: DayKey, field: "start" | "end", next: string) => {
+    const prevSlots = value[day].slots.length
+      ? value[day].slots
+      : [{ start: "09:00", end: "17:00" }];
+    onChange({
+      ...value,
+      [day]: {
+        ...value[day],
+        slots: [{ ...prevSlots[0], [field]: next }],
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-2.5">
+      {DAYS.map(({ key, label, short }) => {
+        const day = value[key] ?? { enabled: false, slots: [] };
+        const slot = day.slots[0] ?? { start: "09:00", end: "17:00" };
+        return (
+          <div
+            key={key}
+            className="flex flex-wrap items-center gap-3 rounded-lg border border-border px-3 py-3 sm:gap-4 sm:px-4"
+          >
+            <div className="flex w-28 items-center gap-3 sm:w-40">
+              <Switch
+                checked={day.enabled}
+                onCheckedChange={(checked) => setDay(key, { enabled: checked })}
+                aria-label={`Toggle ${label}`}
+              />
+              <span className="text-sm font-medium">
+                <span className="hidden sm:inline">{label}</span>
+                <span className="sm:hidden">{short}</span>
+              </span>
+            </div>
+
+            {day.enabled ? (
+              <div className="flex items-center gap-2">
+                <Input
+                  type="time"
+                  value={slot.start}
+                  onChange={(e) => setSlot(key, "start", e.target.value)}
+                  className="w-28 sm:w-32"
+                />
+                <span className="text-muted-foreground">to</span>
+                <Input
+                  type="time"
+                  value={slot.end}
+                  onChange={(e) => setSlot(key, "end", e.target.value)}
+                  className="w-28 sm:w-32"
+                />
+              </div>
+            ) : (
+              <span className="text-sm text-muted-foreground">Unavailable</span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Summarize a `WeeklySchedule` in a short phrase, e.g. "Weekdays, 9 am - 5 pm".
+ * Useful for list-row subtitles.
+ */
+export function summarizeAvailability(ws: WeeklySchedule): string {
+  const weekdayKeys: DayKey[] = [
+    "monday",
+    "tuesday",
+    "wednesday",
+    "thursday",
+    "friday",
+  ];
+  const weekendKeys: DayKey[] = ["saturday", "sunday"];
+  const allDays: DayKey[] = [...weekdayKeys, ...weekendKeys];
+
+  const enabled = allDays.filter((d) => ws[d]?.enabled);
+  if (enabled.length === 0) return "No availability set";
+
+  const weekdaysOn = weekdayKeys.every((d) => ws[d]?.enabled);
+  const weekendsOn = weekendKeys.every((d) => ws[d]?.enabled);
+  const weekdaysOff = weekdayKeys.every((d) => !ws[d]?.enabled);
+  const weekendsOff = weekendKeys.every((d) => !ws[d]?.enabled);
+
+  let dayLabel: string;
+  if (weekdaysOn && weekendsOn) dayLabel = "Every day";
+  else if (weekdaysOn && weekendsOff) dayLabel = "Weekdays";
+  else if (weekdaysOff && weekendsOn) dayLabel = "Weekends";
+  else {
+    const shortNames: Record<DayKey, string> = {
+      monday: "Mon",
+      tuesday: "Tue",
+      wednesday: "Wed",
+      thursday: "Thu",
+      friday: "Fri",
+      saturday: "Sat",
+      sunday: "Sun",
+    };
+    dayLabel = enabled.map((d) => shortNames[d]).join(", ");
+  }
+
+  const slot = ws[enabled[0]].slots[0];
+  if (!slot) return dayLabel;
+
+  return `${dayLabel}, ${formatTime12(slot.start)} - ${formatTime12(slot.end)}`;
+}
+
+function formatTime12(time: string) {
+  const [h, m] = time.split(":").map(Number);
+  const suffix = h >= 12 ? "pm" : "am";
+  const hour = h % 12 || 12;
+  return m
+    ? `${hour}:${String(m).padStart(2, "0")} ${suffix}`
+    : `${hour} ${suffix}`;
+}

package/src/react/components/booking-links/BookingLinkCreateDialog.tsx

@@ -0,0 +1,189 @@
+/**
+ * BookingLinkCreateDialog — dialog prompting for Title / URL / Duration
+ * when creating a new booking link (a.k.a. event type).
+ *
+ * The consumer owns the mutation — this component just collects the four
+ * inputs and calls `onSubmit` once the user clicks Continue. It stays
+ * dumb: no data fetching, no optimistic UI.
+ *
+ * Shadcn primitives expected in the consumer: dialog, button, input,
+ * label, textarea.
+ */
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+export interface BookingLinkCreateDraft {
+  title: string;
+  slug: string;
+  length: number;
+  description: string;
+}
+
+export interface BookingLinkCreateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /**
+   * URL prefix shown before the slug input, e.g.
+   * "calendar.app/meet/alice/" or "cal.local/steve@foo.com/"
+   */
+  slugPrefix: string;
+  /** Default duration in minutes. Defaults to 30. */
+  defaultLength?: number;
+  onSubmit: (draft: BookingLinkCreateDraft) => void | Promise<void>;
+  /** Button label — defaults to "Continue". */
+  submitLabel?: string;
+}
+
+function slugify(value: string) {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+export function BookingLinkCreateDialog(props: BookingLinkCreateDialogProps) {
+  const {
+    open,
+    onOpenChange,
+    slugPrefix,
+    defaultLength = 30,
+    onSubmit,
+    submitLabel = "Continue",
+  } = props;
+
+  const [form, setForm] = useState<BookingLinkCreateDraft>({
+    title: "",
+    slug: "",
+    length: defaultLength,
+    description: "",
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [slugEdited, setSlugEdited] = useState(false);
+
+  // Reset form when the dialog reopens
+  useEffect(() => {
+    if (open) {
+      setForm({
+        title: "",
+        slug: "",
+        length: defaultLength,
+        description: "",
+      });
+      setSlugEdited(false);
+      setSubmitting(false);
+    }
+  }, [open, defaultLength]);
+
+  async function submit() {
+    if (!form.title || !form.slug) return;
+    setSubmitting(true);
+    try {
+      await onSubmit(form);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add a new event type</DialogTitle>
+          <DialogDescription>
+            Create a new event type for people to book.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="blc-title">Title</Label>
+            <Input
+              id="blc-title"
+              placeholder="Quick chat"
+              value={form.title}
+              onChange={(e) => {
+                const title = e.currentTarget.value;
+                setForm((prev) => ({
+                  ...prev,
+                  title,
+                  slug: slugEdited ? prev.slug : slugify(title),
+                }));
+              }}
+              autoFocus
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="blc-slug">URL</Label>
+            <div className="flex rounded-md border border-input focus-within:ring-2 focus-within:ring-ring">
+              <span className="flex items-center rounded-l-md bg-muted px-3 text-xs text-muted-foreground">
+                {slugPrefix}
+              </span>
+              <Input
+                id="blc-slug"
+                placeholder="quick-chat"
+                className="rounded-l-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+                value={form.slug}
+                onChange={(e) => {
+                  setSlugEdited(true);
+                  setForm((prev) => ({
+                    ...prev,
+                    slug: slugify(e.currentTarget.value),
+                  }));
+                }}
+              />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="blc-desc">Description</Label>
+            <Textarea
+              id="blc-desc"
+              placeholder="A short description people will see."
+              rows={2}
+              value={form.description}
+              onChange={(e) =>
+                setForm({ ...form, description: e.currentTarget.value })
+              }
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="blc-len">Duration</Label>
+            <div className="flex items-center gap-2">
+              <Input
+                id="blc-len"
+                type="number"
+                className="w-24"
+                value={form.length}
+                onChange={(e) =>
+                  setForm({ ...form, length: Number(e.currentTarget.value) })
+                }
+              />
+              <span className="text-sm text-muted-foreground">minutes</span>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={submit}
+            disabled={!form.title || !form.slug || submitting}
+          >
+            {submitting ? "Saving…" : submitLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}