@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/src/shadcn/components/ui/command.stories.tsx

@@ -1,3 +1,4 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	Calculator,
@@ -18,52 +19,196 @@ import {
 	CommandShortcut,
 } from "#shadcn/components/ui/command";
 
+interface CommandWrapperProps {
+	leftIcons?: boolean;
+	rightIcons?: boolean;
+	groups?: boolean;
+}
+
+function CommandWrapper({
+	leftIcons = true,
+	rightIcons = true,
+	groups = true,
+}: CommandWrapperProps) {
+	const items1 = [
+		{ icon: Calendar, label: "Calendar", shortcut: "⌘C" },
+		{ icon: Smile, label: "Search Emoji", shortcut: "⌘E" },
+		{ icon: Calculator, label: "Calculator", shortcut: "⌘K" },
+	];
+
+	const items2 = [
+		{ icon: User, label: "Profile", shortcut: "⌘P" },
+		{ icon: CreditCard, label: "Billing", shortcut: "⌘B" },
+		{ icon: Settings, label: "Settings", shortcut: "⌘S" },
+	];
+
+	const renderItem = (item: (typeof items1)[0]) => (
+		<CommandItem key={item.label}>
+			{leftIcons && <item.icon />}
+			<span>{item.label}</span>
+			{rightIcons && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+		</CommandItem>
+	);
+
+	return (
+		<Command className="w-[450px] rounded-lg border">
+			<CommandInput placeholder="Type a command or search..." />
+			<CommandList>
+				<CommandEmpty>No results found.</CommandEmpty>
+				{groups ? (
+					<>
+						<CommandGroup heading="Suggestions">
+							{items1.map(renderItem)}
+						</CommandGroup>
+						<CommandSeparator />
+						<CommandGroup heading="Settings">
+							{items2.map(renderItem)}
+						</CommandGroup>
+					</>
+				) : (
+					[...items1, ...items2].map(renderItem)
+				)}
+			</CommandList>
+		</Command>
+	);
+}
+
 const meta = {
 	title: "Component/Command",
-} satisfies Meta;
+	component: CommandWrapper,
+	parameters: {
+		layout: "centered",
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<p className="sbdocs-p">
+						Command is a composable command menu component. It is also used
+						internally by the <strong>Combobox</strong> component for the
+						dropdown content.
+					</p>
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		leftIcons: {
+			control: "boolean",
+		},
+		rightIcons: {
+			control: "boolean",
+		},
+		groups: {
+			control: "boolean",
+		},
+	},
+	args: {
+		leftIcons: true,
+		rightIcons: true,
+		groups: true,
+	},
+} satisfies Meta<typeof CommandWrapper>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default = {
+	tags: ["!dev"],
+	render: ({ leftIcons = true, rightIcons = true, groups = true }) => (
+		<CommandWrapper
+			leftIcons={leftIcons}
+			rightIcons={rightIcons}
+			groups={groups}
+		/>
+	),
+} satisfies Story;
+
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
-		<Command className="rounded-lg border shadow-md md:min-w-[450px]">
-			<CommandInput placeholder="Type a command or search..." />
-			<CommandList>
-				<CommandEmpty>No results found.</CommandEmpty>
-				<CommandGroup heading="Suggestions">
-					<CommandItem>
-						<Calendar />
-						<span>Calendar</span>
-					</CommandItem>
-					<CommandItem>
-						<Smile />
-						<span>Search Emoji</span>
-					</CommandItem>
-					<CommandItem disabled>
-						<Calculator />
-						<span>Calculator</span>
-					</CommandItem>
-				</CommandGroup>
-				<CommandSeparator />
-				<CommandGroup heading="Settings">
-					<CommandItem>
-						<User />
-						<span>Profile</span>
-						<CommandShortcut>⌘P</CommandShortcut>
-					</CommandItem>
-					<CommandItem>
-						<CreditCard />
-						<span>Billing</span>
-						<CommandShortcut>⌘B</CommandShortcut>
-					</CommandItem>
-					<CommandItem>
-						<Settings />
-						<span>Settings</span>
-						<CommandShortcut>⌘S</CommandShortcut>
-					</CommandItem>
-				</CommandGroup>
-			</CommandList>
-		</Command>
+		<div className="space-y-8">
+			{/* Full */}
+			<div>
+				<h3 className="typo-label mb-4">With icons and groups</h3>
+				<Command className="w-[450px] rounded-lg border">
+					<CommandInput placeholder="Type a command or search..." />
+					<CommandList>
+						<CommandEmpty>No results found.</CommandEmpty>
+						<CommandGroup heading="Suggestions">
+							<CommandItem>
+								<Calendar />
+								<span>Calendar</span>
+								<CommandShortcut>⌘C</CommandShortcut>
+							</CommandItem>
+							<CommandItem>
+								<Smile />
+								<span>Search Emoji</span>
+								<CommandShortcut>⌘E</CommandShortcut>
+							</CommandItem>
+						</CommandGroup>
+						<CommandSeparator />
+						<CommandGroup heading="Settings">
+							<CommandItem>
+								<User />
+								<span>Profile</span>
+								<CommandShortcut>⌘P</CommandShortcut>
+							</CommandItem>
+							<CommandItem>
+								<Settings />
+								<span>Settings</span>
+								<CommandShortcut>⌘S</CommandShortcut>
+							</CommandItem>
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</div>
+
+			{/* Without groups */}
+			<div>
+				<h3 className="typo-label mb-4">Without groups</h3>
+				<Command className="w-[450px] rounded-lg border">
+					<CommandInput placeholder="Type a command or search..." />
+					<CommandList>
+						<CommandEmpty>No results found.</CommandEmpty>
+						<CommandItem>
+							<Calendar />
+							<span>Calendar</span>
+						</CommandItem>
+						<CommandItem>
+							<User />
+							<span>Profile</span>
+						</CommandItem>
+						<CommandItem>
+							<Settings />
+							<span>Settings</span>
+						</CommandItem>
+					</CommandList>
+				</Command>
+			</div>
+
+			{/* Without icons */}
+			<div>
+				<h3 className="typo-label mb-4">Without icons</h3>
+				<Command className="w-[450px] rounded-lg border">
+					<CommandInput placeholder="Type a command or search..." />
+					<CommandList>
+						<CommandEmpty>No results found.</CommandEmpty>
+						<CommandGroup heading="Actions">
+							<CommandItem>
+								<span>Calendar</span>
+							</CommandItem>
+							<CommandItem>
+								<span>Profile</span>
+							</CommandItem>
+							<CommandItem>
+								<span>Settings</span>
+							</CommandItem>
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</div>
+		</div>
 	),
 } satisfies Story;

package/src/shadcn/components/ui/command.tsx

@@ -10,6 +10,208 @@ import {
 } from "#shadcn/components/ui/dialog";
 import { cn } from "#shadcn/lib/utils";
 
+// Command Root
+const commandStyles = cn(
+	// Layout
+	"flex",
+	"h-full",
+	"w-full",
+	"flex-col",
+	"overflow-hidden",
+	"rounded-md",
+	// Colors
+	"bg-bg-primary",
+	"text-text-primary",
+	// Group heading styles
+	"[&_*[cmdk-group-heading]]:flex",
+	"[&_*[cmdk-group-heading]]:items-center",
+	"[&_*[cmdk-group-heading]]:h-7",
+	"[&_*[cmdk-group-heading]]:px-3",
+	"[&_*[cmdk-group-heading]]:py-0",
+	"[&_*[cmdk-group-heading]]:typo-label-tiny",
+	"[&_*[cmdk-group-heading]]:text-[color:var(--color-text-secondary)]",
+);
+
+// Command Dialog
+const commandDialogContentStyles = cn(
+	// Layout
+	"overflow-hidden",
+	"p-0",
+);
+
+const commandDialogCommandStyles = cn(
+	// Group headings
+	"[&_[cmdk-group-heading]]:flex",
+	"[&_[cmdk-group-heading]]:items-center",
+	"[&_[cmdk-group-heading]]:h-7",
+	"[&_[cmdk-group-heading]]:px-3",
+	"[&_[cmdk-group-heading]]:py-0",
+	"[&_[cmdk-group-heading]]:typo-label-tiny",
+	"[&_[cmdk-group-heading]]:text-text-secondary",
+	// Groups
+	"[&_[cmdk-group]]:p-2",
+	"[&_[cmdk-group]]:gap-1",
+	"[&_[cmdk-group]]:flex",
+	"[&_[cmdk-group]]:flex-col",
+	"[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
+	// Input wrapper
+	"[&_[cmdk-input-wrapper]]:h-12",
+	"**:data-[slot=command-input-wrapper]:h-12",
+	// Input wrapper SVG
+	"[&_[cmdk-input-wrapper]_svg]:h-5",
+	"[&_[cmdk-input-wrapper]_svg]:w-5",
+	// Input
+	"[&_[cmdk-input]]:h-12",
+	// Items
+	"[&_[cmdk-item]]:px-2",
+	"[&_[cmdk-item]]:py-3",
+	// Item SVG
+	"[&_[cmdk-item]_svg]:h-5",
+	"[&_[cmdk-item]_svg]:w-5",
+);
+
+// Command Input Wrapper
+const commandInputWrapperStyles = cn(
+	// Layout
+	"flex",
+	"h-9",
+	"items-center",
+	"gap-2",
+	"px-3",
+	// Border
+	"border-b",
+	"border-border-separator",
+	// Animation
+	"transition-colors",
+	"duration-300",
+);
+
+// Command Input Icon
+const commandInputIconStyles = cn(
+	// Size
+	"size-4",
+	"shrink-0",
+	// Colors
+	"text-text-tertiary",
+);
+
+// Command Input
+const commandInputStyles = cn(
+	// Layout
+	"flex",
+	"h-10",
+	"w-full",
+	"rounded-md",
+	"py-3",
+	// Background
+	"bg-transparent",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-primary",
+	"placeholder:text-text-quternary",
+	"file:text-text-primary",
+	// States
+	"outline-hidden",
+	"disabled:cursor-not-allowed",
+	"disabled:opacity-50",
+);
+
+// Command List
+const commandListStyles = cn(
+	// Layout
+	"max-h-[300px]",
+	"scroll-py-1",
+	// Overflow
+	"overflow-x-hidden",
+	"overflow-y-auto",
+	"p-2",
+);
+
+// Command Empty
+const commandEmptyStyles = cn(
+	// Layout
+	"py-6",
+	"text-center",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-tertiary",
+);
+
+// Command Group
+const commandGroupStyles = cn(
+	// Layout
+	"overflow-hidden",
+	"p-2",
+	"gap-1",
+	"flex",
+	"flex-col",
+	"group",
+	// Colors
+	"text-text-tertiary",
+	// Group heading styles
+	"[&_*[cmdk-group-heading]]:flex",
+	"[&_*[cmdk-group-heading]]:items-center",
+	"[&_*[cmdk-group-heading]]:h-7",
+	"[&_*[cmdk-group-heading]]:px-3",
+	"[&_*[cmdk-group-heading]]:py-0",
+	"[&_*[cmdk-group-heading]]:typo-label-tiny",
+	"[&_*[cmdk-group-heading]]:text-[var(--color-text-secondary)]",
+);
+
+// Command Separator
+const commandSeparatorStyles = cn(
+	// Layout
+	"-mx-1",
+	"h-px",
+	// Colors
+	"bg-border-separator",
+);
+
+// Command Item
+const commandItemStyles = cn(
+	// Layout
+	"relative",
+	"flex",
+	"cursor-pointer",
+	"items-center",
+	"gap-2",
+	"rounded",
+	"px-2",
+	"py-1.5",
+	"select-none",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-primary",
+	// States
+	"outline-hidden",
+	"data-[state=checked]:bg-bg-tertiary",
+	"data-[state=checked]:hover:bg-bg-secondary",
+	"hover:bg-bg-secondary",
+	"hover:text-text-primary",
+	"data-[state=checked]:text-text-primary",
+	"data-[disabled=true]:pointer-events-none",
+	"data-[disabled=true]:opacity-50",
+	// SVG styles
+	"[&_svg:not([class*='text-'])]:text-text-quaternary",
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+);
+
+// Command Shortcut
+const commandShortcutStyles = cn(
+	// Layout
+	"ml-auto",
+	// Typography
+	"typo-body",
+	"tracking-widest",
+	// Colors
+	"text-text-quaternary",
+);
+
 function Command({
 	className,
 	...props
@@ -17,10 +219,7 @@ function Command({
 	return (
 		<CommandPrimitive
 			data-slot="command"
-			className={cn(
-				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-				className,
-			)}
+			className={cn(commandStyles, className)}
 			{...props}
 		/>
 	);
@@ -46,12 +245,10 @@ function CommandDialog({
 				<DialogDescription>{description}</DialogDescription>
 			</DialogHeader>
 			<DialogContent
-				className={cn("overflow-hidden p-0", className)}
+				className={cn(commandDialogContentStyles, 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>
+				<Command className={commandDialogCommandStyles}>{children}</Command>
 			</DialogContent>
 		</Dialog>
 	);
@@ -59,20 +256,20 @@ function CommandDialog({
 
 function CommandInput({
 	className,
+	wrapperClassName,
 	...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+}: React.ComponentProps<typeof CommandPrimitive.Input> & {
+	wrapperClassName?: string;
+}) {
 	return (
 		<div
 			data-slot="command-input-wrapper"
-			className="flex h-9 items-center gap-2 border-b px-3"
+			className={cn(commandInputWrapperStyles, wrapperClassName)}
 		>
-			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<SearchIcon className={commandInputIconStyles} />
 			<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,
-				)}
+				className={cn(commandInputStyles, className)}
 				{...props}
 			/>
 		</div>
@@ -86,10 +283,7 @@ function CommandList({
 	return (
 		<CommandPrimitive.List
 			data-slot="command-list"
-			className={cn(
-				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-				className,
-			)}
+			className={cn(commandListStyles, className)}
 			{...props}
 		/>
 	);
@@ -101,7 +295,7 @@ function CommandEmpty({
 	return (
 		<CommandPrimitive.Empty
 			data-slot="command-empty"
-			className="py-6 text-center text-sm"
+			className={commandEmptyStyles}
 			{...props}
 		/>
 	);
@@ -114,10 +308,7 @@ function CommandGroup({
 	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,
-			)}
+			className={cn(commandGroupStyles, className)}
 			{...props}
 		/>
 	);
@@ -130,7 +321,7 @@ function CommandSeparator({
 	return (
 		<CommandPrimitive.Separator
 			data-slot="command-separator"
-			className={cn("bg-border -mx-1 h-px", className)}
+			className={cn(commandSeparatorStyles, className)}
 			{...props}
 		/>
 	);
@@ -143,14 +334,7 @@ function CommandItem({
 	return (
 		<CommandPrimitive.Item
 			data-slot="command-item"
-			className={cn(
-				"data-[selected=true]:bg-(--color-surface-1) text-(--color-elements-assistive)",
-				"data-[selected=true]:text-(--color-elements-readable) [&_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,
-			)}
+			className={cn(commandItemStyles, className)}
 			{...props}
 		/>
 	);
@@ -163,10 +347,7 @@ function CommandShortcut({
 	return (
 		<span
 			data-slot="command-shortcut"
-			className={cn(
-				"text-muted-foreground ml-auto text-xs tracking-widest",
-				className,
-			)}
+			className={cn(commandShortcutStyles, className)}
 			{...props}
 		/>
 	);