appos 0.4.3-0 → 0.5.1-0

package/src/web/ui/collapsible.stories.tsx

@@ -0,0 +1,239 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconChevronDown, IconPlus } from "@tabler/icons-react";
+import {
+	Button,
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "appos/web";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+
+const meta = {
+	title: "Base/Collapsible",
+	component: Collapsible,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"An interactive component that expands/collapses content. Built on Base UI's Collapsible primitive for accessible toggle functionality.",
+			},
+		},
+	},
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<Collapsible className="w-80 space-y-2">
+			<div className="flex items-center justify-between">
+				<h4 className="text-sm font-semibold">
+					@shadcn starred 3 repositories
+				</h4>
+				<CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" />}>
+					<IconChevronDown className="size-4" />
+					<span className="sr-only">Toggle</span>
+				</CollapsibleTrigger>
+			</div>
+			<div className="rounded-md border px-4 py-2 text-sm">
+				@radix-ui/primitives
+			</div>
+			<CollapsibleContent className="space-y-2">
+				<div className="rounded-md border px-4 py-2 text-sm">
+					@radix-ui/colors
+				</div>
+				<div className="rounded-md border px-4 py-2 text-sm">
+					@stitches/react
+				</div>
+			</CollapsibleContent>
+		</Collapsible>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Default collapsible showing additional items when expanded. Click the chevron button to toggle.",
+			},
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const trigger = canvas.getByRole("button");
+		await userEvent.click(trigger);
+		await expect(canvas.getByText("@radix-ui/colors")).toBeVisible();
+	},
+};
+
+export const DefaultOpen: Story = {
+	render: () => (
+		<Collapsible defaultOpen className="w-80 space-y-2">
+			<div className="flex items-center justify-between">
+				<h4 className="text-sm font-semibold">Details</h4>
+				<CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" />}>
+					<IconChevronDown className="size-4" />
+					<span className="sr-only">Toggle</span>
+				</CollapsibleTrigger>
+			</div>
+			<CollapsibleContent>
+				<div className="rounded-md border p-4 text-sm">
+					This content is visible by default. Click the button to collapse.
+				</div>
+			</CollapsibleContent>
+		</Collapsible>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Collapsible that starts in the open state. Use defaultOpen prop for initial expanded state.",
+			},
+		},
+	},
+};
+
+export const Controlled: Story = {
+	render: () => {
+		const [isOpen, setIsOpen] = useState(false);
+		return (
+			<div className="space-y-4">
+				<Collapsible
+					open={isOpen}
+					onOpenChange={setIsOpen}
+					className="w-80 space-y-2"
+				>
+					<div className="flex items-center justify-between">
+						<h4 className="text-sm font-semibold">
+							{isOpen ? "Expanded" : "Collapsed"}
+						</h4>
+						<CollapsibleTrigger
+							render={<Button variant="ghost" size="icon-sm" />}
+						>
+							<IconChevronDown
+								className={`size-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
+							/>
+							<span className="sr-only">Toggle</span>
+						</CollapsibleTrigger>
+					</div>
+					<CollapsibleContent>
+						<div className="rounded-md border p-4 text-sm">
+							Controlled collapsible content with animated icon rotation.
+						</div>
+					</CollapsibleContent>
+				</Collapsible>
+				<Button variant="outline" size="sm" onClick={() => setIsOpen(!isOpen)}>
+					Toggle from outside
+				</Button>
+			</div>
+		);
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Controlled collapsible with external toggle button. Use open and onOpenChange for controlled state.",
+			},
+		},
+	},
+};
+
+export const Disabled: Story = {
+	render: () => (
+		<Collapsible disabled className="w-80 space-y-2">
+			<div className="flex items-center justify-between">
+				<h4 className="text-muted-foreground text-sm font-semibold">
+					Disabled Section
+				</h4>
+				<CollapsibleTrigger
+					render={<Button variant="ghost" size="icon-sm" disabled />}
+				>
+					<IconChevronDown className="size-4" />
+					<span className="sr-only">Toggle</span>
+				</CollapsibleTrigger>
+			</div>
+			<div className="text-muted-foreground rounded-md border px-4 py-2 text-sm opacity-50">
+				Content preview
+			</div>
+		</Collapsible>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Disabled collapsible that cannot be toggled. Use disabled prop on Collapsible.",
+			},
+		},
+	},
+};
+
+export const WithTextTrigger: Story = {
+	render: () => (
+		<Collapsible className="w-80 space-y-2">
+			<CollapsibleTrigger
+				render={<Button variant="ghost" className="w-full justify-between" />}
+			>
+				Show more options
+				<IconPlus className="size-4" />
+			</CollapsibleTrigger>
+			<CollapsibleContent className="space-y-2">
+				<div className="rounded-md border p-4 text-sm">
+					Additional options and settings can be placed here.
+				</div>
+			</CollapsibleContent>
+		</Collapsible>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Collapsible with a full-width text button as the trigger.",
+			},
+		},
+	},
+};
+
+export const NestedContent: Story = {
+	render: () => (
+		<Collapsible className="w-80 space-y-2">
+			<div className="flex items-center justify-between">
+				<h4 className="text-sm font-semibold">Project Settings</h4>
+				<CollapsibleTrigger render={<Button variant="ghost" size="icon-sm" />}>
+					<IconChevronDown className="size-4" />
+					<span className="sr-only">Toggle</span>
+				</CollapsibleTrigger>
+			</div>
+			<CollapsibleContent>
+				<div className="space-y-3 rounded-md border p-4">
+					<div className="space-y-1">
+						<h5 className="text-sm font-medium">General</h5>
+						<p className="text-muted-foreground text-xs">
+							Basic project configuration
+						</p>
+					</div>
+					<div className="space-y-1">
+						<h5 className="text-sm font-medium">Permissions</h5>
+						<p className="text-muted-foreground text-xs">
+							Access control settings
+						</p>
+					</div>
+					<div className="space-y-1">
+						<h5 className="text-sm font-medium">Integrations</h5>
+						<p className="text-muted-foreground text-xs">
+							Third-party service connections
+						</p>
+					</div>
+				</div>
+			</CollapsibleContent>
+		</Collapsible>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Collapsible with rich nested content including headings and descriptions.",
+			},
+		},
+	},
+};

package/src/web/ui/collapsible.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+	return (
+		<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+	);
+}
+
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+	return (
+		<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+	);
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/web/ui/command.stories.tsx

@@ -0,0 +1,291 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	IconCalendar,
+	IconMail,
+	IconMoodSmile,
+	IconRocket,
+	IconSettings,
+	IconUser,
+} from "@tabler/icons-react";
+import {
+	Command,
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+	CommandShortcut,
+} from "appos/web";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+
+const meta = {
+	title: "Base/Command",
+	component: Command,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"A command palette component for searching and executing commands. Built on cmdk with keyboard navigation, groups, shortcuts, and dialog mode support.",
+			},
+		},
+	},
+} satisfies Meta<typeof Command>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<Command className="rounded-lg border shadow-md md:min-w-112.5">
+			<CommandInput placeholder="Type a command or search..." />
+			<CommandList>
+				<CommandEmpty>No results found.</CommandEmpty>
+				<CommandGroup heading="Suggestions">
+					<CommandItem>
+						<IconCalendar />
+						<span>Calendar</span>
+					</CommandItem>
+					<CommandItem>
+						<IconMoodSmile />
+						<span>Search Emoji</span>
+					</CommandItem>
+					<CommandItem>
+						<IconRocket />
+						<span>Launch</span>
+					</CommandItem>
+				</CommandGroup>
+				<CommandSeparator />
+				<CommandGroup heading="Settings">
+					<CommandItem>
+						<IconUser />
+						<span>Profile</span>
+						<CommandShortcut>⌘P</CommandShortcut>
+					</CommandItem>
+					<CommandItem>
+						<IconMail />
+						<span>Mail</span>
+						<CommandShortcut>⌘B</CommandShortcut>
+					</CommandItem>
+					<CommandItem>
+						<IconSettings />
+						<span>Settings</span>
+						<CommandShortcut>⌘S</CommandShortcut>
+					</CommandItem>
+				</CommandGroup>
+			</CommandList>
+		</Command>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Default command palette with grouped items, icons, and keyboard shortcuts.",
+			},
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const input = canvas.getByPlaceholderText(/type a command/i);
+		await userEvent.type(input, "cal");
+		await expect(canvas.getByText("Calendar")).toBeVisible();
+	},
+};
+
+export const Dialog: Story = {
+	render: () => {
+		const [open, setOpen] = useState(false);
+		return (
+			<>
+				<p className="text-muted-foreground text-sm">
+					Press{" "}
+					<kbd className="bg-muted pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
+						<span className="text-xs">⌘</span>K
+					</kbd>{" "}
+					or click below
+				</p>
+				<button
+					type="button"
+					onClick={() => setOpen(true)}
+					className="mt-2 rounded-md border px-4 py-2 text-sm"
+				>
+					Open Command Palette
+				</button>
+				<CommandDialog open={open} onOpenChange={setOpen}>
+					<Command>
+						<CommandInput placeholder="Type a command or search..." />
+						<CommandList>
+							<CommandEmpty>No results found.</CommandEmpty>
+							<CommandGroup heading="Suggestions">
+								<CommandItem onSelect={() => setOpen(false)}>
+									<IconCalendar />
+									<span>Calendar</span>
+								</CommandItem>
+								<CommandItem onSelect={() => setOpen(false)}>
+									<IconMoodSmile />
+									<span>Search Emoji</span>
+								</CommandItem>
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</CommandDialog>
+			</>
+		);
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Command palette in a dialog overlay. Use CommandDialog for modal command interfaces.",
+			},
+		},
+	},
+};
+
+export const WithFiltering: Story = {
+	render: () => (
+		<Command className="rounded-lg border shadow-md md:min-w-112.5">
+			<CommandInput placeholder="Search frameworks..." />
+			<CommandList>
+				<CommandEmpty>No framework found.</CommandEmpty>
+				<CommandGroup heading="Frontend">
+					<CommandItem>React</CommandItem>
+					<CommandItem>Vue</CommandItem>
+					<CommandItem>Angular</CommandItem>
+					<CommandItem>Svelte</CommandItem>
+				</CommandGroup>
+				<CommandSeparator />
+				<CommandGroup heading="Backend">
+					<CommandItem>Node.js</CommandItem>
+					<CommandItem>Deno</CommandItem>
+					<CommandItem>Bun</CommandItem>
+				</CommandGroup>
+			</CommandList>
+		</Command>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Command palette with search filtering. Items are automatically filtered as you type.",
+			},
+		},
+	},
+};
+
+export const Checkable: Story = {
+	render: () => {
+		const [checked, setChecked] = useState<string[]>(["calendar"]);
+		const isChecked = (value: string) => checked.includes(value);
+		const toggle = (value: string) => {
+			setChecked((prev) =>
+				prev.includes(value)
+					? prev.filter((v) => v !== value)
+					: [...prev, value],
+			);
+		};
+		return (
+			<Command className="rounded-lg border shadow-md md:min-w-112.5">
+				<CommandInput placeholder="Select features..." />
+				<CommandList>
+					<CommandEmpty>No results found.</CommandEmpty>
+					<CommandGroup heading="Features">
+						<CommandItem
+							data-checked={isChecked("calendar")}
+							onSelect={() => toggle("calendar")}
+						>
+							<IconCalendar />
+							<span>Calendar</span>
+						</CommandItem>
+						<CommandItem
+							data-checked={isChecked("mail")}
+							onSelect={() => toggle("mail")}
+						>
+							<IconMail />
+							<span>Mail</span>
+						</CommandItem>
+						<CommandItem
+							data-checked={isChecked("settings")}
+							onSelect={() => toggle("settings")}
+						>
+							<IconSettings />
+							<span>Settings</span>
+						</CommandItem>
+					</CommandGroup>
+				</CommandList>
+			</Command>
+		);
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Command palette with checkable items. Use data-checked attribute for selection state.",
+			},
+		},
+	},
+};
+
+export const Disabled: Story = {
+	render: () => (
+		<Command className="rounded-lg border shadow-md md:min-w-112.5">
+			<CommandInput placeholder="Type a command..." />
+			<CommandList>
+				<CommandEmpty>No results found.</CommandEmpty>
+				<CommandGroup heading="Actions">
+					<CommandItem>
+						<IconCalendar />
+						<span>Calendar</span>
+					</CommandItem>
+					<CommandItem disabled>
+						<IconMail />
+						<span>Mail (Disabled)</span>
+					</CommandItem>
+					<CommandItem>
+						<IconSettings />
+						<span>Settings</span>
+					</CommandItem>
+				</CommandGroup>
+			</CommandList>
+		</Command>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Command palette with a disabled item. Disabled items cannot be selected.",
+			},
+		},
+	},
+};
+
+export const Empty: Story = {
+	render: () => (
+		<Command className="rounded-lg border shadow-md md:min-w-112.5">
+			<CommandInput placeholder="Type a command..." />
+			<CommandList>
+				<CommandEmpty>
+					<div className="flex flex-col items-center gap-2 py-4">
+						<IconMoodSmile className="text-muted-foreground size-8" />
+						<p>No commands found</p>
+						<p className="text-muted-foreground text-xs">
+							Try searching for something else
+						</p>
+					</div>
+				</CommandEmpty>
+			</CommandList>
+		</Command>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Custom empty state with icon and description. Use CommandEmpty for no-results messaging.",
+			},
+		},
+	},
+};