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

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

@@ -1,62 +1,182 @@
 // biome-ignore-all lint/a11y/useValidAnchor: Useless in stories
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	Breadcrumb,
-	BreadcrumbEllipsis,
 	BreadcrumbItem,
 	BreadcrumbLink,
 	BreadcrumbList,
 	BreadcrumbPage,
 	BreadcrumbSeparator,
 } from "#shadcn/components/ui/breadcrumb";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from "#shadcn/components/ui/dropdown-menu";
+import { DropdownMenuItem } from "#shadcn/components/ui/dropdown-menu";
+
+interface BreadcrumbWrapperProps {
+	isWhite?: boolean;
+	hasDropdown?: boolean;
+}
+
+function BreadcrumbWrapper({
+	isWhite = false,
+	hasDropdown = false,
+}: BreadcrumbWrapperProps) {
+	return (
+		<div className={isWhite ? "bg-black p-8 rounded-lg" : ""}>
+			<Breadcrumb isWhite={isWhite}>
+				<BreadcrumbList>
+					<BreadcrumbItem>
+						<BreadcrumbLink asChild>
+							<a href="/">Home</a>
+						</BreadcrumbLink>
+					</BreadcrumbItem>
+					<BreadcrumbSeparator />
+					<BreadcrumbItem>
+						<BreadcrumbLink
+							asChild
+							dropdownContent={
+								hasDropdown ? (
+									<>
+										<DropdownMenuItem>Level 1</DropdownMenuItem>
+										<DropdownMenuItem>Level 2</DropdownMenuItem>
+										<DropdownMenuItem>Level 3</DropdownMenuItem>
+									</>
+								) : undefined
+							}
+						>
+							<a href="/docs">Documentation</a>
+						</BreadcrumbLink>
+					</BreadcrumbItem>
+					<BreadcrumbSeparator />
+					<BreadcrumbItem>
+						<BreadcrumbPage>Components</BreadcrumbPage>
+					</BreadcrumbItem>
+				</BreadcrumbList>
+			</Breadcrumb>
+		</div>
+	);
+}
 
 const meta = {
 	title: "Component/Breadcrumb",
-} satisfies Meta;
+	component: BreadcrumbWrapper,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		isWhite: {
+			control: "boolean",
+		},
+		hasDropdown: {
+			control: "boolean",
+		},
+	},
+	args: {
+		isWhite: false,
+		hasDropdown: false,
+	},
+} satisfies Meta<typeof BreadcrumbWrapper>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default = {
+	tags: ["!dev"],
+	render: ({ isWhite = false, hasDropdown = false }) => (
+		<BreadcrumbWrapper isWhite={isWhite} hasDropdown={hasDropdown} />
+	),
+} satisfies Story;
+
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
-		<Breadcrumb>
-			<BreadcrumbList>
-				<BreadcrumbItem>
-					<BreadcrumbLink asChild>
-						<a href="/">Home</a>
-					</BreadcrumbLink>
-				</BreadcrumbItem>
-				<BreadcrumbSeparator />
-				<BreadcrumbItem>
-					<DropdownMenu>
-						<DropdownMenuTrigger className="flex items-center gap-1">
-							<BreadcrumbEllipsis className="size-4" />
-							<span className="sr-only">Toggle menu</span>
-						</DropdownMenuTrigger>
-						<DropdownMenuContent align="start">
-							<DropdownMenuItem>Documentation</DropdownMenuItem>
-							<DropdownMenuItem>Themes</DropdownMenuItem>
-							<DropdownMenuItem>GitHub</DropdownMenuItem>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</BreadcrumbItem>
-				<BreadcrumbSeparator />
-				<BreadcrumbItem>
-					<BreadcrumbLink asChild>
-						<a href="/docs/components">Components</a>
-					</BreadcrumbLink>
-				</BreadcrumbItem>
-				<BreadcrumbSeparator />
-				<BreadcrumbItem>
-					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-				</BreadcrumbItem>
-			</BreadcrumbList>
-		</Breadcrumb>
+		<div className="space-y-8">
+			<div>
+				<p className="text-sm text-text-secondary mb-2">Default</p>
+				<Breadcrumb>
+					<BreadcrumbList>
+						<BreadcrumbItem>
+							<BreadcrumbLink asChild>
+								<a href="/">Home</a>
+							</BreadcrumbLink>
+						</BreadcrumbItem>
+						<BreadcrumbSeparator />
+						<BreadcrumbItem>
+							<BreadcrumbLink asChild>
+								<a href="/docs">Documentation</a>
+							</BreadcrumbLink>
+						</BreadcrumbItem>
+						<BreadcrumbSeparator />
+						<BreadcrumbItem>
+							<BreadcrumbPage>Components</BreadcrumbPage>
+						</BreadcrumbItem>
+					</BreadcrumbList>
+				</Breadcrumb>
+			</div>
+
+			<div>
+				<p className="text-sm text-text-secondary mb-2">With Dropdown</p>
+				<Breadcrumb>
+					<BreadcrumbList>
+						<BreadcrumbItem>
+							<BreadcrumbLink asChild>
+								<a href="/">Home</a>
+							</BreadcrumbLink>
+						</BreadcrumbItem>
+						<BreadcrumbSeparator />
+						<BreadcrumbItem>
+							<BreadcrumbLink
+								asChild
+								dropdownContent={
+									<>
+										<DropdownMenuItem>Level 1</DropdownMenuItem>
+										<DropdownMenuItem>Level 2</DropdownMenuItem>
+										<DropdownMenuItem>Level 3</DropdownMenuItem>
+									</>
+								}
+							>
+								<a href="/docs">Documentation</a>
+							</BreadcrumbLink>
+						</BreadcrumbItem>
+						<BreadcrumbSeparator />
+						<BreadcrumbItem>
+							<BreadcrumbPage>Components</BreadcrumbPage>
+						</BreadcrumbItem>
+					</BreadcrumbList>
+				</Breadcrumb>
+			</div>
+
+			<div className="bg-black p-8 rounded-lg">
+				<p className="text-sm text-white/70 mb-2">
+					White (for dark backgrounds)
+				</p>
+				<Breadcrumb isWhite>
+					<BreadcrumbList>
+						<BreadcrumbItem>
+							<BreadcrumbLink asChild>
+								<a href="/">Home</a>
+							</BreadcrumbLink>
+						</BreadcrumbItem>
+						<BreadcrumbSeparator />
+						<BreadcrumbItem>
+							<BreadcrumbLink asChild>
+								<a href="/docs">Documentation</a>
+							</BreadcrumbLink>
+						</BreadcrumbItem>
+						<BreadcrumbSeparator />
+						<BreadcrumbItem>
+							<BreadcrumbPage>Components</BreadcrumbPage>
+						</BreadcrumbItem>
+					</BreadcrumbList>
+				</Breadcrumb>
+			</div>
+		</div>
 	),
 } satisfies Story;

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

@@ -1,21 +1,147 @@
 import { Slot } from "@radix-ui/react-slot";
-import { MoreHorizontal } from "lucide-react";
+import { ChevronDownIcon, MoreHorizontal } from "lucide-react";
 import type * as React from "react";
-
+import { createContext, useContext } from "react";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "#shadcn/components/ui/dropdown-menu";
 import { cn } from "#shadcn/lib/utils";
+import { IconButton } from "../../../components/icon-button";
+
+// Styles
+const breadcrumbListStyles = cn(
+	// Typography
+	"typo-body",
+	"text-text-tertiary",
+	// Layout
+	"flex",
+	"flex-wrap",
+	"items-center",
+	"break-words",
+	// Spacing
+	"gap-2",
+);
+
+const breadcrumbItemStyles = cn(
+	// Layout
+	"inline-flex",
+	"items-center",
+);
+
+const breadcrumbLinkBaseStyles = cn(
+	// Typography
+	"typo-body",
+	// Layout
+	"px-2",
+	"py-1",
+	// Colors
+	"bg-bg-tertiary",
+	"text-text-tertiary",
+	"hover:text-text-secondary",
+	// Shape
+	"rounded-md",
+	// Interaction
+	"transition-colors",
+	"focus-visible:outline-none",
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+);
+
+const breadcrumbLinkWithDropdownStyles = cn(
+	// Shape
+	"rounded-l-md",
+	"rounded-r-none",
+);
+
+const breadcrumbSeparatorStyles = cn(
+	// Size
+	"h-4",
+	"w-px",
+	"shrink-0",
+	// Colors
+	"bg-border-separator",
+);
+
+const breadcrumbTriggerContainerStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"gap-2",
+	"h-7",
+	"pl-0",
+	"pr-2",
+	"py-1",
+	// Colors
+	"bg-bg-tertiary",
+	// Shape
+	"rounded-r-md",
+	"rounded-l-none",
+);
+
+const breadcrumbIconButtonStyles = cn(
+	// Size
+	"size-auto",
+	"p-0",
+	// Colors
+	"bg-transparent",
+	"hover:bg-transparent",
+	"text-text-tertiary",
+	"hover:text-text-secondary",
+);
 
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+const breadcrumbPageBaseStyles = cn(
+	// Typography
+	"typo-page-header",
+	// Layout
+	"px-0",
+	"py-0.5",
+	// Colors
+	"text-text-primary",
+);
+
+const breadcrumbPageWhiteStyles = cn(
+	// Colors
+	"text-white",
+);
+
+const breadcrumbSeparatorBaseStyles = cn(
+	// Typography
+	"text-xs",
+	"text-text-tertiary",
+	// SVG
+	"[&>svg]:size-3.5",
+);
+
+const breadcrumbEllipsisStyles = cn(
+	// Layout
+	"flex",
+	"size-9",
+	"items-center",
+	"justify-center",
+);
+
+const BreadcrumbContext = createContext<{ isWhite?: boolean }>({});
+
+function Breadcrumb({
+	isWhite,
+	...props
+}: React.ComponentProps<"nav"> & { isWhite?: boolean }) {
+	return (
+		<BreadcrumbContext.Provider
+			value={isWhite !== undefined ? { isWhite } : {}}
+		>
+			<nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+		</BreadcrumbContext.Provider>
+	);
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 	return (
 		<ol
 			data-slot="breadcrumb-list"
-			className={cn(
-				"text-text-tertiary typo-body flex flex-wrap items-center break-words gap-2",
-				className,
-			)}
+			className={cn(breadcrumbListStyles, className)}
 			{...props}
 		/>
 	);
@@ -25,7 +151,7 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
 	return (
 		<li
 			data-slot="breadcrumb-item"
-			className={cn("inline-flex items-center", className)}
+			className={cn(breadcrumbItemStyles, className)}
 			{...props}
 		/>
 	);
@@ -34,27 +160,49 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
 function BreadcrumbLink({
 	asChild,
 	className,
+	dropdownContent,
 	...props
 }: React.ComponentProps<"a"> & {
 	asChild?: boolean;
+	dropdownContent?: React.ReactNode;
 }) {
 	const Comp = asChild ? Slot : "a";
 
-	return (
-		<Comp
-			data-slot="breadcrumb-link"
-			className={cn(
-				"typo-body bg-bg-tertiary text-text-tertiary rounded-md px-2 py-1 transition-colors",
-				"hover:text-text-secondary",
-				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-				className,
-			)}
-			{...props}
-		/>
+	const linkStyles = cn(
+		breadcrumbLinkBaseStyles,
+		dropdownContent && breadcrumbLinkWithDropdownStyles,
+		className,
 	);
+
+	if (dropdownContent) {
+		return (
+			<div className="inline-flex items-center">
+				<Comp data-slot="breadcrumb-link" className={linkStyles} {...props} />
+				<div className={breadcrumbTriggerContainerStyles}>
+					<div className={breadcrumbSeparatorStyles} />
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<IconButton
+								icon={<ChevronDownIcon className="size-4" />}
+								aria-label="Toggle menu"
+								className={breadcrumbIconButtonStyles}
+							/>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start">
+							{dropdownContent}
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+			</div>
+		);
+	}
+
+	return <Comp data-slot="breadcrumb-link" className={linkStyles} {...props} />;
 }
 
 function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+	const { isWhite } = useContext(BreadcrumbContext);
+
 	return (
 		// biome-ignore lint/a11y/useFocusableInteractive: FIXME: unchanged shadcn
 		// biome-ignore lint/a11y/useSemanticElements: FIXME: unchanged shadcn
@@ -64,7 +212,8 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
 			aria-disabled="true"
 			aria-current="page"
 			className={cn(
-				"typo-page-header text-text-primary px-0 py-0.5",
+				breadcrumbPageBaseStyles,
+				isWhite && breadcrumbPageWhiteStyles,
 				className,
 			)}
 			{...props}
@@ -82,7 +231,7 @@ function BreadcrumbSeparator({
 			data-slot="breadcrumb-separator"
 			role="presentation"
 			aria-hidden="true"
-			className={cn("[&>svg]:size-3.5 text-text-quternary text-xs", className)}
+			className={cn(breadcrumbSeparatorBaseStyles, className)}
 			{...props}
 		>
 			{children ?? "/"}
@@ -99,7 +248,7 @@ function BreadcrumbEllipsis({
 			data-slot="breadcrumb-ellipsis"
 			role="presentation"
 			aria-hidden="true"
-			className={cn("flex size-9 items-center justify-center", className)}
+			className={cn(breadcrumbEllipsisStyles, className)}
 			{...props}
 		>
 			<MoreHorizontal className="size-4" />

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

@@ -1,36 +1,124 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Play, Trash2 } from "lucide-react";
+import { Play } from "lucide-react";
 import { Badge } from "#shadcn/components/ui/badge";
 import { Button } from "#shadcn/components/ui/button";
 
+interface ButtonWrapperProps {
+	variant?: "primary" | "secondary" | "ghost" | "link";
+	size?: "regular" | "small";
+	danger?: boolean;
+	disabled?: boolean;
+	icon?: "none" | "left" | "only";
+	children?: string;
+}
+
+function ButtonWrapper({
+	variant = "primary",
+	size = "regular",
+	danger = false,
+	disabled = false,
+	icon = "none",
+	children = "Button",
+}: ButtonWrapperProps) {
+	if (icon === "only") {
+		return (
+			<Button variant={variant} size={size} danger={danger} disabled={disabled}>
+				<Play />
+			</Button>
+		);
+	}
+
+	if (icon === "left") {
+		return (
+			<Button variant={variant} size={size} danger={danger} disabled={disabled}>
+				<Play />
+				{children}
+			</Button>
+		);
+	}
+
+	return (
+		<Button variant={variant} size={size} danger={danger} disabled={disabled}>
+			{children}
+		</Button>
+	);
+}
+
 const meta = {
 	title: "Component/Button",
-	component: Button,
+	component: ButtonWrapper,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
 	argTypes: {
-		variant: {},
+		variant: {
+			control: "select",
+			options: ["primary", "secondary", "ghost", "link"],
+		},
+		size: {
+			control: "select",
+			options: ["regular", "small"],
+		},
+		danger: {
+			control: "boolean",
+		},
+		disabled: {
+			control: "boolean",
+		},
+		icon: {
+			control: "select",
+			options: ["none", "left", "only"],
+		},
+		children: {
+			control: "text",
+		},
+	},
+	args: {
+		children: "Button",
+		variant: "primary",
+		size: "regular",
+		danger: false,
+		disabled: false,
+		icon: "none",
 	},
-} satisfies Meta;
+} satisfies Meta<typeof ButtonWrapper>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const TextOnly = {
-	args: {
-		children: "Remove",
-	},
-} satisfies Story;
-
-export const WithIcon = {
-	args: {
-		children: (
-			<>
-				<Trash2 /> Remove{" "}
-			</>
-		),
-	},
+export const Default = {
+	tags: ["!dev"],
+	render: ({
+		variant = "primary",
+		size = "regular",
+		danger = false,
+		disabled = false,
+		icon = "none",
+		children = "Button",
+	}) => (
+		<ButtonWrapper
+			variant={variant}
+			size={size}
+			danger={danger}
+			disabled={disabled}
+			icon={icon}
+		>
+			{children}
+		</ButtonWrapper>
+	),
 } satisfies Story;
 
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
 		<div className="p-6  min-h-screen flex justify-center items-center">
 			<div className=" rounded-lg p-6 shadow-sm w-280">