appos 0.4.3-0 → 0.5.1-0

package/src/web/ui/button-group.stories.tsx

@@ -0,0 +1,251 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	IconBold,
+	IconChevronDown,
+	IconCopy,
+	IconItalic,
+	IconUnderline,
+} from "@tabler/icons-react";
+import { orientations } from "#src/web/lib/utils.ts";
+import { Button } from "#src/web/ui/button.tsx";
+import {
+	ButtonGroup,
+	ButtonGroupSeparator,
+	ButtonGroupText,
+} from "#src/web/ui/button-group.tsx";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "#src/web/ui/dropdown-menu.tsx";
+import { Input } from "#src/web/ui/input.tsx";
+
+const meta = {
+	title: "Base/ButtonGroup",
+	component: ButtonGroup,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"Groups related buttons together with shared borders and styling. Supports horizontal and vertical orientations, separators, and text labels.",
+			},
+		},
+	},
+	argTypes: {
+		orientation: {
+			control: "select",
+			options: orientations,
+			description: "The orientation of the button group",
+			table: { defaultValue: { summary: "horizontal" } },
+		},
+	},
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<ButtonGroup>
+			<Button variant="outline">Left</Button>
+			<Button variant="outline">Center</Button>
+			<Button variant="outline">Right</Button>
+		</ButtonGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Default horizontal button group. Buttons share borders and have connected corners.",
+			},
+		},
+	},
+};
+
+export const WithIcons: Story = {
+	render: () => (
+		<ButtonGroup>
+			<Button variant="outline" size="icon" aria-label="Bold">
+				<IconBold />
+			</Button>
+			<Button variant="outline" size="icon" aria-label="Italic">
+				<IconItalic />
+			</Button>
+			<Button variant="outline" size="icon" aria-label="Underline">
+				<IconUnderline />
+			</Button>
+		</ButtonGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Icon button group for toolbar actions like text formatting. Always include aria-labels for accessibility.",
+			},
+		},
+	},
+};
+
+export const Vertical: Story = {
+	render: () => (
+		<ButtonGroup orientation="vertical">
+			<Button variant="outline">Top</Button>
+			<Button variant="outline">Middle</Button>
+			<Button variant="outline">Bottom</Button>
+		</ButtonGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'Vertical button group for stacked actions. Use orientation="vertical" prop.',
+			},
+		},
+	},
+};
+
+export const WithSeparator: Story = {
+	render: () => (
+		<ButtonGroup>
+			<Button variant="outline">Save</Button>
+			<ButtonGroupSeparator />
+			<Button variant="outline" size="icon" aria-label="More options">
+				<IconChevronDown />
+			</Button>
+		</ButtonGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Button group with a visual separator between primary and secondary actions.",
+			},
+		},
+	},
+};
+
+export const WithText: Story = {
+	render: () => (
+		<ButtonGroup>
+			<ButtonGroupText>https://</ButtonGroupText>
+			<Input placeholder="example.com" className="rounded-l-none border-l-0" />
+		</ButtonGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Button group with a text prefix. Use ButtonGroupText for static labels or prefixes.",
+			},
+		},
+	},
+};
+
+export const SplitButton: Story = {
+	render: () => (
+		<ButtonGroup>
+			<Button>Save</Button>
+			<DropdownMenu>
+				<DropdownMenuTrigger
+					render={<Button size="icon" aria-label="More save options" />}
+				>
+					<IconChevronDown />
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end">
+					<DropdownMenuItem>Save as draft</DropdownMenuItem>
+					<DropdownMenuItem>Save and publish</DropdownMenuItem>
+					<DropdownMenuItem>Save and exit</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</ButtonGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Split button pattern with a primary action and dropdown for additional options.",
+			},
+		},
+	},
+};
+
+export const CopyWithPreview: Story = {
+	render: () => (
+		<ButtonGroup>
+			<ButtonGroupText className="text-muted-foreground font-mono text-xs">
+				npm install appos
+			</ButtonGroupText>
+			<Button variant="outline" size="icon" aria-label="Copy command">
+				<IconCopy />
+			</Button>
+		</ButtonGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Copy-to-clipboard pattern with a code snippet and copy button.",
+			},
+		},
+	},
+};
+
+export const MixedSizes: Story = {
+	render: () => (
+		<div className="flex flex-col gap-4">
+			<ButtonGroup>
+				<Button variant="outline" size="sm">
+					Small
+				</Button>
+				<Button variant="outline" size="sm">
+					Group
+				</Button>
+			</ButtonGroup>
+			<ButtonGroup>
+				<Button variant="outline">Default</Button>
+				<Button variant="outline">Group</Button>
+			</ButtonGroup>
+			<ButtonGroup>
+				<Button variant="outline" size="lg">
+					Large
+				</Button>
+				<Button variant="outline" size="lg">
+					Group
+				</Button>
+			</ButtonGroup>
+		</div>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Button groups work with all button sizes. All buttons in a group should use the same size.",
+			},
+		},
+	},
+};
+
+export const Nested: Story = {
+	render: () => (
+		<ButtonGroup>
+			<ButtonGroup>
+				<Button variant="outline">A</Button>
+				<Button variant="outline">B</Button>
+			</ButtonGroup>
+			<ButtonGroup>
+				<Button variant="outline">C</Button>
+				<Button variant="outline">D</Button>
+			</ButtonGroup>
+		</ButtonGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Nested button groups for complex toolbar layouts. Inner groups maintain proper spacing.",
+			},
+		},
+	},
+};

package/src/web/ui/button-group.tsx

@@ -0,0 +1,87 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "#src/web/lib/utils.ts";
+import { Separator } from "#src/web/ui/separator.tsx";
+
+const buttonGroupVariants = cva(
+	"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+	{
+		variants: {
+			orientation: {
+				horizontal:
+					"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none",
+				vertical:
+					"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none",
+			},
+		},
+		defaultVariants: {
+			orientation: "horizontal",
+		},
+	},
+);
+
+function ButtonGroup({
+	className,
+	orientation,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+	return (
+		<div
+			role="group"
+			data-slot="button-group"
+			data-orientation={orientation}
+			className={cn(buttonGroupVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
+}
+
+function ButtonGroupText({
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div">) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn(
+					"bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+					className,
+				),
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "button-group-text",
+		},
+	});
+}
+
+function ButtonGroupSeparator({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="button-group-separator"
+			orientation={orientation}
+			className={cn(
+				"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	ButtonGroup,
+	ButtonGroupSeparator,
+	ButtonGroupText,
+	buttonGroupVariants,
+};

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

@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	IconChevronDown,
+	IconLoader2,
+	IconPlus,
+	IconTrash,
+} from "@tabler/icons-react";
+import { expect, fn, userEvent, within } from "storybook/test";
+import {
+	Button,
+	buttonSizeKeys,
+	buttonVariantKeys,
+} from "#src/web/ui/button.tsx";
+
+const meta = {
+	title: "Base/Button",
+	component: Button,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"A versatile button component with multiple visual variants and sizes. Supports icons, loading states, and accessible icon-only buttons.",
+			},
+		},
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: buttonVariantKeys,
+			description: "The visual style of the button",
+			table: { defaultValue: { summary: "default" } },
+		},
+		size: {
+			control: "select",
+			options: buttonSizeKeys,
+			description: "The size of the button",
+			table: { defaultValue: { summary: "default" } },
+		},
+		disabled: {
+			control: "boolean",
+			description: "Whether the button is disabled",
+		},
+		children: {
+			control: "text",
+			description: "Button content",
+		},
+	},
+	args: {
+		onClick: fn(),
+	},
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: { children: "Button" },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Primary action button. Use for the main call-to-action on a page.",
+			},
+		},
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button"));
+		await expect(args.onClick).toHaveBeenCalled();
+	},
+};
+
+export const Secondary: Story = {
+	args: { children: "Secondary", variant: "secondary" },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Secondary action. Use alongside primary buttons for less important actions.",
+			},
+		},
+	},
+};
+
+export const Outline: Story = {
+	args: { children: "Outline", variant: "outline" },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Outlined button with transparent background. Good for secondary actions that need visual distinction.",
+			},
+		},
+	},
+};
+
+export const Ghost: Story = {
+	args: { children: "Ghost", variant: "ghost" },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Minimal button with no background. Use for tertiary actions or in tight spaces.",
+			},
+		},
+	},
+};
+
+export const Destructive: Story = {
+	args: { children: "Delete", variant: "destructive" },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Destructive action button. Use for delete, remove, or other irreversible actions.",
+			},
+		},
+	},
+};
+
+export const Link: Story = {
+	args: { children: "Link", variant: "link" },
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Link-styled button with underline on hover. Use for navigation-like actions.",
+			},
+		},
+	},
+};
+
+export const AllSizes: Story = {
+	render: () => (
+		<div className="flex items-end gap-2">
+			<Button size="xs">Extra Small</Button>
+			<Button size="sm">Small</Button>
+			<Button size="default">Default</Button>
+			<Button size="lg">Large</Button>
+		</div>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "All available text button sizes from extra small to large.",
+			},
+		},
+	},
+};
+
+export const IconSizes: Story = {
+	render: () => (
+		<div className="flex items-end gap-2">
+			<Button size="icon-xs" aria-label="Add">
+				<IconPlus />
+			</Button>
+			<Button size="icon-sm" aria-label="Add">
+				<IconPlus />
+			</Button>
+			<Button size="icon" aria-label="Add">
+				<IconPlus />
+			</Button>
+			<Button size="icon-lg" aria-label="Add">
+				<IconPlus />
+			</Button>
+		</div>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Icon-only button sizes. Always include aria-label for accessibility.",
+			},
+		},
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		children: (
+			<>
+				<IconLoader2 className="animate-spin" data-icon="inline-start" />
+				Loading...
+			</>
+		),
+		disabled: true,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Loading state with spinner. Disable the button to prevent double-clicks during async operations.",
+			},
+		},
+	},
+};
+
+export const IconStart: Story = {
+	args: {
+		children: (
+			<>
+				<IconPlus data-icon="inline-start" />
+				Create
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'Button with icon at the start. Use data-icon="inline-start" for proper spacing.',
+			},
+		},
+	},
+};
+
+export const IconEnd: Story = {
+	args: {
+		children: (
+			<>
+				Options
+				<IconChevronDown data-icon="inline-end" />
+			</>
+		),
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'Button with icon at the end. Use data-icon="inline-end" for proper spacing.',
+			},
+		},
+	},
+};
+
+export const IconOnly: Story = {
+	args: {
+		children: <IconTrash />,
+		size: "icon",
+		variant: "destructive",
+		"aria-label": "Delete",
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Icon-only button. MUST have aria-label for accessibility. Use icon size variants.",
+			},
+		},
+	},
+};
+
+export const Disabled: Story = {
+	args: { children: "Disabled", disabled: true },
+	parameters: {
+		docs: {
+			description: {
+				story: "Disabled state. Button is non-interactive and visually muted.",
+			},
+		},
+	},
+};