@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/base/src/components/ui/carousel.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, {
+	type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: "horizontal" | "vertical";
+	setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
+
+	return context;
+}
+
+function Carousel({
+	orientation = "horizontal",
+	opts,
+	setApi,
+	plugins,
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+	const [carouselRef, api] = useEmblaCarousel(
+		{
+			...opts,
+			axis: orientation === "horizontal" ? "x" : "y",
+		},
+		plugins,
+	);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+	const onSelect = React.useCallback((api: CarouselApi) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+
+	const handleKeyDown = React.useCallback(
+		(event: React.KeyboardEvent<HTMLDivElement>) => {
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				scrollPrev();
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				scrollNext();
+			}
+		},
+		[scrollPrev, scrollNext],
+	);
+
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+
+		return () => {
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+
+	return (
+		<CarouselContext.Provider
+			value={{
+				carouselRef,
+				api: api,
+				opts,
+				orientation:
+					orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+				scrollPrev,
+				scrollNext,
+				canScrollPrev,
+				canScrollNext,
+			}}
+		>
+			<div
+				onKeyDownCapture={handleKeyDown}
+				className={cn("relative", className)}
+				role="region"
+				aria-roledescription="carousel"
+				data-slot="carousel"
+				{...props}
+			>
+				{children}
+			</div>
+		</CarouselContext.Provider>
+	);
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+	const { carouselRef, orientation } = useCarousel();
+
+	return (
+		<div
+			ref={carouselRef}
+			className="overflow-hidden"
+			data-slot="carousel-content"
+		>
+			<div
+				className={cn(
+					"flex",
+					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+	const { orientation } = useCarousel();
+
+	return (
+		<div
+			role="group"
+			aria-roledescription="slide"
+			data-slot="carousel-item"
+			className={cn(
+				"min-w-0 shrink-0 grow-0 basis-full",
+				orientation === "horizontal" ? "pl-4" : "pt-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CarouselPrevious({
+	className,
+	variant = "outline",
+	size = "icon",
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+	return (
+		<Button
+			data-slot="carousel-previous"
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute size-8 rounded-full",
+				orientation === "horizontal"
+					? "top-1/2 -left-12 -translate-y-1/2"
+					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollPrev}
+			onClick={scrollPrev}
+			{...props}
+		>
+			<ArrowLeft />
+			<span className="sr-only">Previous slide</span>
+		</Button>
+	);
+}
+
+function CarouselNext({
+	className,
+	variant = "outline",
+	size = "icon",
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+	return (
+		<Button
+			data-slot="carousel-next"
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute size-8 rounded-full",
+				orientation === "horizontal"
+					? "top-1/2 -right-12 -translate-y-1/2"
+					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollNext}
+			onClick={scrollNext}
+			{...props}
+		>
+			<ArrowRight />
+			<span className="sr-only">Next slide</span>
+		</Button>
+	);
+}
+
+export {
+	type CarouselApi,
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselPrevious,
+	CarouselNext,
+};

package/registry/admin-apps/nextjs/variants/base/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>
+	);
+}

package/registry/admin-apps/nextjs/variants/base/src/components/ui/command.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+
+function Command({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
+		<CommandPrimitive
+			data-slot="command"
+			className={cn(
+				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	className,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
+}) {
+	return (
+		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
+			<DialogContent
+				className={cn("overflow-hidden p-0", className)}
+				showCloseButton={showCloseButton}
+			>
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function CommandInput({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			className="flex h-9 items-center gap-2 border-b px-3"
+		>
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<CommandPrimitive.Input
+				data-slot="command-input"
+				className={cn(
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CommandList({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+	return (
+		<CommandPrimitive.List
+			data-slot="command-list"
+			className={cn(
+				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandEmpty({
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className="py-6 text-center text-sm"
+			{...props}
+		/>
+	);
+}
+
+function CommandGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandItem({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};