@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/workspaces/src/components/photo-upload.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { ArrowUpIcon, XIcon } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+const MAX_DIMENSION = 256;
+const JPEG_QUALITY = 0.85;
+const MAX_FILE_BYTES = 2 * 1024 * 1024; // 2MB, matching the reference's dropzone limit
+
+/** Resizes to fit within MAX_DIMENSION and re-encodes as JPEG, so a phone photo doesn't land in the database as a multi-megabyte data URI. */
+function resizeToDataUri(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(reader.error);
+    reader.onload = () => {
+      const img = new Image();
+      img.onerror = () => reject(new Error("Could not read this image."));
+      img.onload = () => {
+        const scale = Math.min(1, MAX_DIMENSION / Math.max(img.width, img.height));
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.round(img.width * scale);
+        canvas.height = Math.round(img.height * scale);
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return reject(new Error("Canvas is not supported in this browser."));
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        resolve(canvas.toDataURL("image/jpeg", JPEG_QUALITY));
+      };
+      img.src = reader.result as string;
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+type RejectedFile = { name: string; reasons: string[] };
+
+/**
+ * Stores the photo as a data URI directly on the `photo` column — there is no object-storage
+ * service in this stack, and a small resized JPEG (see MAX_DIMENSION) keeps the row a reasonable
+ * size. Swap this for an upload-to-a-bucket-then-store-the-URL flow if the deployment adds one.
+ *
+ * Renders the reference app's upload treatment: the purple dashed dropzone with the big upload
+ * arrow, followed by a Preview section with an accepted-file thumbnail (remove button on the
+ * thumbnail) and a rejected-files list. Unlike the plain admin app this variant has no
+ * react-dropzone, so the dropzone is a hand-rolled click/drag target over a hidden file input.
+ */
+export function PhotoUpload({
+  photo,
+  fallback,
+  onChange,
+  disabled,
+}: {
+  photo: string | null | undefined;
+  fallback: string;
+  onChange: (photo: string | null) => Promise<void> | void;
+  disabled?: boolean;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [busy, setBusy] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [rejected, setRejected] = useState<RejectedFile[]>([]);
+
+  async function processFile(file: File | undefined) {
+    if (!file) return;
+    const reasons: string[] = [];
+    if (!file.type.startsWith("image/")) reasons.push("File type must be an image.");
+    if (file.size > MAX_FILE_BYTES) reasons.push("File is larger than 2MB.");
+    if (reasons.length > 0) {
+      setRejected([{ name: file.name, reasons }]);
+      return;
+    }
+    setRejected([]);
+    setError(null);
+    setBusy(true);
+    try {
+      const dataUri = await resizeToDataUri(file);
+      await onChange(dataUri);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Couldn't process this image.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function handleFileInput(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    await processFile(file);
+  }
+
+  function handleDrop(event: React.DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    setDragActive(false);
+    if (disabled || busy) return;
+    void processFile(event.dataTransfer.files?.[0]);
+  }
+
+  async function handleRemove() {
+    setError(null);
+    setBusy(true);
+    try {
+      await onChange(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Couldn't remove the photo.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function removeRejected(name: string) {
+    setRejected((prev) => prev.filter((file) => file.name !== name));
+  }
+
+  return (
+    <div className="w-full">
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        onClick={() => !disabled && !busy && inputRef.current?.click()}
+        onKeyDown={(e) => e.key === "Enter" && !disabled && !busy && inputRef.current?.click()}
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (!disabled && !busy) setDragActive(true);
+        }}
+        onDragLeave={() => setDragActive(false)}
+        onDrop={handleDrop}
+        className={cn(
+          "p-12 border-2 border-dashed border-purple-500 rounded-lg bg-purple-50 dark:bg-purple-950/20 hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors cursor-pointer",
+          (disabled || busy) && "cursor-not-allowed opacity-60",
+        )}
+      >
+        <input ref={inputRef} type="file" accept="image/*" className="hidden" onChange={handleFileInput} disabled={disabled} />
+        <div className="flex flex-col items-center justify-center gap-4 text-purple-700 dark:text-purple-300">
+          <ArrowUpIcon className="w-8 h-8" />
+          {busy ? (
+            <p className="text-lg font-medium">Uploading...</p>
+          ) : dragActive ? (
+            <p className="text-lg font-medium">Drop the image here...</p>
+          ) : (
+            <div className="text-center">
+              <p className="text-lg font-medium">Click or drag image to upload</p>
+              <p className="text-sm text-muted-foreground mt-2">PNG, JPG up to 2MB</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {error && <p className="mt-2 text-xs text-destructive">{error}</p>}
+
+      {/* Preview */}
+      <section className="mt-10">
+        <div className="flex gap-4">
+          <h2 className="title text-3xl font-semibold">Preview</h2>
+          {photo && !disabled && (
+            <button
+              type="button"
+              onClick={() => void handleRemove()}
+              disabled={busy}
+              className="ml-auto mt-1 text-[12px] uppercase tracking-wider font-bold text-neutral-500 border border-purple-400 rounded-md px-3 hover:bg-purple-400 hover:text-white transition-colors dark:text-white dark:border-white"
+            >
+              Remove all files
+            </button>
+          )}
+        </div>
+
+        {/* Accepted files */}
+        <h3 className="title text-lg font-semibold text-neutral-600 mt-10 border-b pb-3 dark:text-white">Accepted Files</h3>
+        {photo ? (
+          <ul className="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-10">
+            <li className="relative h-32 rounded-md shadow-lg dark:shadow-white">
+              {/* Data URIs need a plain <img>; next/image would try to optimize them. */}
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={photo} alt="Selected image" className="h-full w-full object-contain rounded-md dark:object-cover" />
+              <button
+                type="button"
+                className="w-7 h-7 border border-border bg-background rounded-full flex justify-center items-center absolute -top-3 -right-3 hover:bg-muted transition-colors"
+                disabled={busy}
+                onClick={() => void handleRemove()}
+              >
+                <XIcon className="w-5 h-5" />
+              </button>
+            </li>
+          </ul>
+        ) : (
+          <div className="mt-6 flex items-center gap-3">
+            <Avatar className="size-16 shrink-0">
+              {photo && <AvatarImage src={photo} alt="" className="object-cover" />}
+              <AvatarFallback className="text-base">{fallback}</AvatarFallback>
+            </Avatar>
+            <p className="text-sm text-muted-foreground">No file selected.</p>
+          </div>
+        )}
+
+        {/* Rejected Files */}
+        {rejected.length > 0 && (
+          <>
+            <h3 className="title text-lg font-semibold text-neutral-600 mt-10 border-b pb-3 dark:text-white">Rejected Files</h3>
+            <ul className="mt-6 flex flex-col">
+              {rejected.map((file) => (
+                <li key={file.name} className="flex items-start justify-between dark:text-white">
+                  <div>
+                    <p className="mt-2 text-neutral-500 text-sm font-medium dark:text-white">{file.name}</p>
+                    <ul className="text-[12px] text-red-400">
+                      {file.reasons.map((reason) => (
+                        <li key={reason}>{reason}</li>
+                      ))}
+                    </ul>
+                  </div>
+                  <button
+                    type="button"
+                    className="mt-1 py-1 text-[12px] uppercase tracking-wider font-bold text-neutral-500 border border-border rounded-md px-3 hover:bg-muted transition-colors dark:text-white dark:border-white"
+                    onClick={() => removeRejected(file.name)}
+                  >
+                    remove
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </section>
+    </div>
+  );
+}

package/registry/admin-apps/nextjs/variants/workspaces/src/components/ui/calendar.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import * as React from "react";
+import {
+	ChevronDownIcon,
+	ChevronLeftIcon,
+	ChevronRightIcon,
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = "label",
+	buttonVariant = "ghost",
+	formatters,
+	components,
+	...props
+}: React.ComponentProps<typeof DayPicker> & {
+	buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+	const defaultClassNames = getDefaultClassNames();
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn(
+				"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className,
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) =>
+					date.toLocaleString("default", { month: "short" }),
+				...formatters,
+			}}
+			classNames={{
+				root: cn("w-fit", defaultClassNames.root),
+				months: cn(
+					"flex gap-4 flex-col md:flex-row relative",
+					defaultClassNames.months,
+				),
+				month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+				nav: cn(
+					"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+					defaultClassNames.nav,
+				),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+					defaultClassNames.button_previous,
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+					defaultClassNames.button_next,
+				),
+				month_caption: cn(
+					"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+					defaultClassNames.month_caption,
+				),
+				dropdowns: cn(
+					"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+					defaultClassNames.dropdowns,
+				),
+				dropdown_root: cn(
+					"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+					defaultClassNames.dropdown_root,
+				),
+				dropdown: cn(
+					"absolute bg-popover inset-0 opacity-0",
+					defaultClassNames.dropdown,
+				),
+				caption_label: cn(
+					"select-none font-medium",
+					captionLayout === "label"
+						? "text-sm"
+						: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+					defaultClassNames.caption_label,
+				),
+				table: "w-full border-collapse",
+				weekdays: cn("flex", defaultClassNames.weekdays),
+				weekday: cn(
+					"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+					defaultClassNames.weekday,
+				),
+				week: cn("flex w-full mt-2", defaultClassNames.week),
+				week_number_header: cn(
+					"select-none w-(--cell-size)",
+					defaultClassNames.week_number_header,
+				),
+				week_number: cn(
+					"text-[0.8rem] select-none text-muted-foreground",
+					defaultClassNames.week_number,
+				),
+				day: cn(
+					"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+					props.showWeekNumber
+						? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+						: "[&:first-child[data-selected=true]_button]:rounded-l-md",
+					defaultClassNames.day,
+				),
+				range_start: cn(
+					"rounded-l-md bg-accent",
+					defaultClassNames.range_start,
+				),
+				range_middle: cn("rounded-none", defaultClassNames.range_middle),
+				range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+				today: cn(
+					"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+					defaultClassNames.today,
+				),
+				outside: cn(
+					"text-muted-foreground aria-selected:text-muted-foreground",
+					defaultClassNames.outside,
+				),
+				disabled: cn(
+					"text-muted-foreground opacity-50",
+					defaultClassNames.disabled,
+				),
+				hidden: cn("invisible", defaultClassNames.hidden),
+				...classNames,
+			}}
+			components={{
+				Root: ({ className, rootRef, ...props }) => {
+					return (
+						<div
+							data-slot="calendar"
+							ref={rootRef}
+							className={cn(className)}
+							{...props}
+						/>
+					);
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === "left") {
+						return (
+							<ChevronLeftIcon className={cn("size-4", className)} {...props} />
+						);
+					}
+
+					if (orientation === "right") {
+						return (
+							<ChevronRightIcon
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						);
+					}
+
+					return (
+						<ChevronDownIcon className={cn("size-4", className)} {...props} />
+					);
+				},
+				DayButton: CalendarDayButton,
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-(--cell-size) items-center justify-center text-center">
+								{children}
+							</div>
+						</td>
+					);
+				},
+				...components,
+			}}
+			{...props}
+		/>
+	);
+}
+
+function CalendarDayButton({
+	className,
+	day,
+	modifiers,
+	...props
+}: React.ComponentProps<typeof DayButton>) {
+	const defaultClassNames = getDefaultClassNames();
+
+	const ref = React.useRef<HTMLButtonElement>(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString()}
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+				defaultClassNames.day,
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Calendar, CalendarDayButton };