@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/react/variants/workspaces/src/components/permission-group-select.tsx

@@ -0,0 +1,99 @@
+import type { PermissionSummary } from "@simple-auth-kit/auth-client";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface PermissionGroup {
+  name: string;
+  permissions: PermissionSummary[];
+}
+
+function groupPermissions(permissions: PermissionSummary[]): PermissionGroup[] {
+  const byGroup = new Map<string, PermissionSummary[]>();
+  for (const permission of permissions) {
+    const list = byGroup.get(permission.group) ?? [];
+    list.push(permission);
+    byGroup.set(permission.group, list);
+  }
+  return Array.from(byGroup.entries())
+    .map(([name, perms]) => ({ name, permissions: perms.sort((a, b) => a.order - b.order) }))
+    .sort((a, b) => (a.permissions[0]?.groupOrder ?? 0) - (b.permissions[0]?.groupOrder ?? 0));
+}
+
+// Indeterminate isn't in the base checkbox's own stylesheet (only `data-[state=checked]` is), so
+// the tri-state coloring is layered on here rather than touching the shared primitive for what
+// is otherwise a generic shadcn component used unmodified everywhere else.
+const INDETERMINATE_STYLE = "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary";
+
+/** A checkbox grid grouped by `permission.group`, with a tri-state select-all and one per group — how Create/Edit Role builds a role's permission set. */
+export function PermissionGroupSelect({
+  permissions,
+  selected,
+  onChange,
+  disabled,
+}: {
+  permissions: PermissionSummary[];
+  selected: string[];
+  onChange: (next: string[]) => void;
+  disabled?: boolean;
+}) {
+  function toggle(slug: string) {
+    onChange(selected.includes(slug) ? selected.filter((s) => s !== slug) : [...selected, slug]);
+  }
+
+  const groups = groupPermissions(permissions);
+  const allSlugs = permissions.map((p) => p.slug);
+  const selectedCount = allSlugs.filter((slug) => selected.includes(slug)).length;
+  const allSelected = allSlugs.length > 0 && selectedCount === allSlugs.length;
+  const allState: boolean | "indeterminate" = allSelected ? true : selectedCount > 0 ? "indeterminate" : false;
+
+  function toggleAll() {
+    onChange(allSelected ? [] : allSlugs);
+  }
+
+  function toggleGroup(group: PermissionGroup) {
+    const groupSlugs = group.permissions.map((p) => p.slug);
+    const groupAllSelected = groupSlugs.every((slug) => selected.includes(slug));
+    onChange(groupAllSelected ? selected.filter((slug) => !groupSlugs.includes(slug)) : [...new Set([...selected, ...groupSlugs])]);
+  }
+
+  if (groups.length === 0) return <p className="text-sm text-muted-foreground">No permissions defined yet.</p>;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <label className="flex items-center gap-2 text-sm font-medium">
+          <Checkbox checked={allState} onCheckedChange={toggleAll} disabled={disabled || allSlugs.length === 0} className={INDETERMINATE_STYLE} />
+          Select all
+        </label>
+        <span className="text-xs text-muted-foreground">
+          {selectedCount} of {allSlugs.length} selected
+        </span>
+      </div>
+      {groups.map((group) => {
+        const groupSlugs = group.permissions.map((p) => p.slug);
+        const groupSelectedCount = groupSlugs.filter((slug) => selected.includes(slug)).length;
+        const groupAllSelected = groupSlugs.length > 0 && groupSelectedCount === groupSlugs.length;
+        const groupState: boolean | "indeterminate" = groupAllSelected ? true : groupSelectedCount > 0 ? "indeterminate" : false;
+        return (
+          <Card key={group.name} className="p-4">
+            <label className="mb-2 flex items-center gap-2 text-sm font-semibold capitalize">
+              <Checkbox checked={groupState} onCheckedChange={() => toggleGroup(group)} disabled={disabled} className={INDETERMINATE_STYLE} />
+              {group.name}
+            </label>
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              {group.permissions.map((permission) => (
+                <label key={permission.id} className="flex items-center gap-2 text-sm">
+                  <Checkbox checked={selected.includes(permission.slug)} onCheckedChange={() => toggle(permission.slug)} disabled={disabled} />
+                  <span className={!permission.isActive ? "text-muted-foreground" : undefined}>
+                    {permission.displayName}
+                    {!permission.isActive && " (inactive)"}
+                  </span>
+                </label>
+              ))}
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

package/registry/admin-apps/react/variants/workspaces/src/components/permission-group-view.tsx

@@ -0,0 +1,53 @@
+import type { PermissionSummary } from "@simple-auth-kit/auth-client";
+import { CheckIcon } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+interface PermissionGroup {
+  name: string;
+  permissions: PermissionSummary[];
+}
+
+function groupPermissions(permissions: PermissionSummary[]): PermissionGroup[] {
+  const byGroup = new Map<string, PermissionSummary[]>();
+  for (const permission of permissions) {
+    const list = byGroup.get(permission.group) ?? [];
+    list.push(permission);
+    byGroup.set(permission.group, list);
+  }
+  return Array.from(byGroup.entries())
+    .map(([name, perms]) => ({ name, permissions: perms.sort((a, b) => a.order - b.order) }))
+    .sort((a, b) => (a.permissions[0]?.groupOrder ?? 0) - (b.permissions[0]?.groupOrder ?? 0));
+}
+
+/**
+ * Read-only grouped display of the permissions a role holds — a detail page, not a form, so
+ * there is nothing to select and no "Select all" affordance; only what's already attached is
+ * shown, grouped the same way `PermissionGroupSelect` groups a role form's checkbox grid.
+ */
+export function PermissionGroupView({ permissions, selected }: { permissions: PermissionSummary[]; selected: string[] }) {
+  const attached = permissions.filter((permission) => selected.includes(permission.slug));
+  const groups = groupPermissions(attached);
+
+  if (groups.length === 0) return <p className="text-sm text-muted-foreground">No permissions attached.</p>;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {groups.map((group) => (
+        <Card key={group.name} className="p-4">
+          <h4 className="mb-2 text-sm font-semibold capitalize">{group.name}</h4>
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            {group.permissions.map((permission) => (
+              <div key={permission.id} className="flex items-center gap-2 text-sm">
+                <CheckIcon className="size-4 shrink-0 text-muted-foreground" />
+                <span className={!permission.isActive ? "text-muted-foreground" : undefined}>
+                  {permission.displayName}
+                  {!permission.isActive && " (inactive)"}
+                </span>
+              </div>
+            ))}
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,223 @@
+import { useRef, useState } from "react";
+import { ArrowUpIcon, XIcon } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { cn } from "@/lib/cn";
+
+const MAX_DIMENSION = 256;
+const JPEG_QUALITY = 0.85;
+const MAX_FILE_BYTES = 2 * 1024 * 1024; // 2MB, matching the size the resize step targets
+
+/** 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);
+  });
+}
+
+interface 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 admin-nextjs'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. Built on a hidden file input and native drag events rather than
+ * react-dropzone, which this app doesn't carry.
+ */
+export function PhotoUpload({
+  photo,
+  fallback,
+  onChange,
+  disabled,
+}: {
+  photo: string | null;
+  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>}
+
+      <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>
+
+        <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">
+              <img src={photo} alt="Selected image" className="h-full w-full object-contain rounded-md dark:object-cover" />
+              {!disabled && (
+                <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">
+              <AvatarFallback className="text-base">{fallback}</AvatarFallback>
+            </Avatar>
+            <p className="text-sm text-muted-foreground">No file selected.</p>
+          </div>
+        )}
+
+        {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/react/variants/workspaces/src/components/ui/combobox.tsx

@@ -0,0 +1,243 @@
+import { useEffect, useState } from "react";
+
+import { Check, ChevronsUpDown, CirclePlus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export type ComboboxOptions = {
+	value: string;
+	label: string;
+};
+
+interface ComboboxProps {
+	options: ComboboxOptions[];
+	selected: ComboboxOptions["value"];
+	className?: string;
+	placeholder?: string;
+	disalbed?: boolean;
+	onChange: (option: ComboboxOptions) => void;
+	onCreate?: (label: ComboboxOptions["label"]) => void;
+	showCreate?: boolean;
+	popoverClassName?: string;
+}
+
+/**
+ * Convert katakana to hiragana(Only Japanese)
+ *
+ * カタカナをひらがなに変換する
+ */
+function toHiragana(value: string) {
+	return value.replace(/[\u30a1-\u30f6]/g, (match: string) => {
+		return String.fromCharCode(match.charCodeAt(0) - 0x60);
+	});
+}
+
+/**
+ * CommandItem to create a new query content
+ *
+ * クエリの内容を新規作成するCommandItem
+ */
+function CommandAddItem({
+	query,
+	onCreate,
+}: {
+	query: string;
+	onCreate: () => void;
+}) {
+	return (
+		<div
+			onClick={onCreate}
+			onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
+				if (event.key === "Enter") {
+					onCreate();
+				}
+			}}
+			className={cn(
+				"flex w-full text-blue-500 cursor-pointer text-sm px-2 py-1.5 rounded-sm items-center focus:outline-hidden",
+				"hover:bg-blue-200 focus:bg-blue-200!",
+			)}
+		>
+			<CirclePlus className="mr-2 h-4 w-4" />
+			Create "{query}"
+		</div>
+	);
+}
+
+export function Combobox({
+	options,
+	selected,
+	className,
+	placeholder,
+	disalbed,
+	onChange,
+	onCreate,
+	showCreate = true,
+	popoverClassName,
+}: ComboboxProps) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+
+	const [canCreate, setCanCreate] = useState(true);
+	useEffect(() => {
+		// Cannot create a new query if it is empty or has already been created
+		// Unlike search, case sensitive here.
+
+		// クエリが空の場合、またはすでに作成済みの場合は新規作成できない
+		// 検索と違いここでは大文字小文字は区別する
+		const isAlreadyCreated = !options.some((option) => option.label === query);
+		setCanCreate(!!(query && isAlreadyCreated));
+	}, [query, options]);
+
+	function handleSelect(option: ComboboxOptions) {
+		if (onChange) {
+			onChange(option);
+			setOpen(false);
+			setQuery("");
+		}
+	}
+
+	function handleCreate() {
+		if (onCreate && query) {
+			onCreate(query);
+			setOpen(false);
+			setQuery("");
+		}
+	}
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					type="button"
+					variant="outline"
+					role="combobox"
+					disabled={disalbed ?? false}
+					aria-expanded={open}
+					className={cn("w-full font-normal", className)}
+				>
+					{selected && selected.length > 0 ? (
+						<div className="truncate mr-auto">
+							{options.find((item) => item.value === selected)?.label}
+						</div>
+					) : (
+						<div className="text-slate-600 mr-auto">
+							{placeholder ?? "Select"}
+						</div>
+					)}
+					<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				className={cn("w-full min-w-[500px] p-0", popoverClassName)}
+			>
+				<Command
+					filter={(value, search) => {
+						const v = toHiragana(value.toLocaleLowerCase());
+						const s = toHiragana(search.toLocaleLowerCase());
+						if (v.includes(s)) return 1;
+						return 0;
+					}}
+				>
+					<CommandInput
+						placeholder={placeholder || "Search..."}
+						value={query}
+						onValueChange={(value: string) => setQuery(value)}
+						onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+							if (event.key === "Enter") {
+								// Avoid selecting what is displayed as a choice even if you press Enter for the conversion
+								// Note that if you do this, you can select a choice with the arrow keys and press Enter, but it will not be selected
+
+								// 変換のためにEnterを押した場合でも、選択肢として表示されているものが選択されてしまうのを回避する
+								// この処理をする場合、選択肢を矢印キーで選択してEnterを押しても選択されなくなるので注意
+								event.preventDefault();
+							}
+						}}
+					/>
+					<CommandEmpty className="flex pl-1 py-1 w-full">
+						{query && showCreate && (
+							<CommandAddItem query={query} onCreate={() => handleCreate()} />
+						)}
+						{query && !showCreate && (
+							<div className="py-1.5 pl-8 space-y-1 text-sm">
+								<p>No items found</p>
+							</div>
+						)}
+					</CommandEmpty>
+
+					<CommandList>
+						<CommandGroup className="overflow-y-auto">
+							{/* No options and no query */}
+							{/* Even if written as a Child of CommandEmpty, it may not be displayed only the first time, so write it in CommandGroup. */}
+
+							{/* 選択肢が1つも無い、かつクエリも入力されていない場合 */}
+							{/* CommandEmptyのChildとして書いても、初回だけ表示されない場合があるのでCommandGroup内に書く */}
+							{options.length === 0 && !query && (
+								<div className="py-1.5 pl-8 space-y-1 text-sm">
+									<p>No items</p>
+									{showCreate && <p>Enter a value to create a new one</p>}
+								</div>
+							)}
+
+							{/* Create */}
+							{canCreate && showCreate && (
+								<CommandAddItem query={query} onCreate={() => handleCreate()} />
+							)}
+
+							{/* Select */}
+							{options.map((option, index) => (
+								<CommandItem
+									key={option.label}
+									tabIndex={0}
+									value={option.label}
+									onSelect={() => {
+										console.log("onSelect");
+										handleSelect(option);
+									}}
+									onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
+										if (event.key === "Enter") {
+											// Process to prevent onSelect from firing, but it does not work well with StackBlitz.
+											// onSelectの発火を防ぐ処理だが、StackBlitzだとうまく動作しない
+											event.stopPropagation();
+
+											handleSelect(option);
+										}
+									}}
+									className={cn(
+										"cursor-pointer",
+										// Override CommandItem class name
+										// CommandItemのクラス名を上書き
+										"focus:bg-blue-200! hover:bg-blue-200! aria-selected:bg-transparent",
+									)}
+								>
+									{/* min to avoid the check icon being too small when the option.label is long. */}
+									{/* minを設定していない場合、option.labelが長いとチェックアイコンが小さくなってしまう */}
+									<Check
+										className={cn(
+											"mr-2 h-4 w-4 min-h-4 min-w-4",
+											selected === option.value ? "opacity-100" : "opacity-0",
+										)}
+									/>
+									{option.label}
+								</CommandItem>
+							))}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}