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

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

@@ -1,27 +1,144 @@
-import type * as React from "react";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+// Table container
+const tableContainerStyles = cn(
+	"relative",
+	"h-full",
+	"w-full",
+	"overflow-auto",
+);
+
+// Table base
+const tableStyles = cn(
+	"w-full",
+	"caption-bottom",
+	"text-sm",
+	"border-collapse",
+	"border-spacing-0",
+);
+
+// Table header
+const tableHeaderStyles = cn(
+	"bg-bg-secondary",
+	"[&_tr]:border-b",
+	"[&_tr]:border-border-secondary",
+	"[&_tr]:h-8",
+);
+
+// Table header sticky variant
+const tableHeaderStickyStyles = cn("sticky", "top-0", "z-10");
+
+// Table body
+const tableBodyStyles = cn(
+	"[&_tr:last-child]:border-0",
+	"[&_tr]:hover:bg-bg-hover",
+);
+
+// Table footer
+const tableFooterStyles = cn(
+	"bg-bg-secondary",
+	"border-t",
+	"border-border-secondary",
+	"font-medium",
+	"[&>tr]:last:border-b-0",
+);
+
+// Table row
+const tableRowStyles = cn("h-7", "transition-colors", "duration-150");
+
+// Table head cell
+const tableHeadStyles = cn(
+	"group/head",
+	"text-text-secondary",
+	"h-8",
+	"px-4",
+	"py-2",
+	"text-left",
+	"align-middle",
+	"typo-body-xs",
+	"whitespace-nowrap",
+	"transition-colors",
+	"duration-150",
+	"hover:bg-bg-tertiary",
+	"[&:has([role=checkbox])]:pr-0",
+);
+
+// Table head sort icon
+const tableSortIconStyles = cn(
+	"size-3.5",
+	"shrink-0",
+	"transition-opacity",
+	"duration-150",
+);
+
+// Table cell
+const tableCellStyles = cn(
+	"px-4",
+	"py-1",
+	"align-middle",
+	"whitespace-nowrap",
+	"text-sm",
+	"text-grey-700",
+	"[&:has([role=checkbox])]:pr-0",
+);
+
+// Table cell link variant
+const tableCellLinkStyles = cn(
+	"text-text-link",
+	"cursor-pointer",
+	"hover:underline",
+);
+
+// Table caption
+const tableCaptionStyles = cn(
+	"text-text-secondary",
+	"mt-4",
+	"text-xs",
+	"text-left",
+);
+
+// Context for sticky header
+const TableStickyContext = React.createContext(false);
+
+type TableProps = React.ComponentProps<"table"> & {
+	zebra?: boolean | undefined;
+	stickyHeader?: boolean | undefined;
+};
+
+function Table({
+	className,
+	zebra = false,
+	stickyHeader = false,
+	...props
+}: TableProps) {
 	return (
-		<div
-			data-slot="table-container"
-			className="relative w-full overflow-x-auto"
-		>
-			<table
-				data-slot="table"
-				className={cn("w-full caption-bottom text-sm", className)}
-				{...props}
-			/>
-		</div>
+		<TableStickyContext.Provider value={stickyHeader}>
+			<div data-slot="table-container" className={tableContainerStyles}>
+				<table
+					data-slot="table"
+					data-zebra={zebra}
+					className={cn(tableStyles, className)}
+					{...props}
+				/>
+			</div>
+		</TableStickyContext.Provider>
 	);
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	const stickyHeader = React.useContext(TableStickyContext);
+
 	return (
 		<thead
 			data-slot="table-header"
-			className={cn("[&_tr]:border-b", className)}
+			className={cn(
+				tableHeaderStyles,
+				stickyHeader && tableHeaderStickyStyles,
+				className,
+			)}
 			{...props}
 		/>
 	);
@@ -31,7 +148,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
 	return (
 		<tbody
 			data-slot="table-body"
-			className={cn("[&_tr:last-child]:border-0", className)}
+			className={cn(tableBodyStyles, className)}
 			{...props}
 		/>
 	);
@@ -41,21 +158,36 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
 	return (
 		<tfoot
 			data-slot="table-footer"
-			className={cn(
-				"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-				className,
-			)}
+			className={cn(tableFooterStyles, className)}
 			{...props}
 		/>
 	);
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+type TableRowProps = React.ComponentProps<"tr"> & {
+	zebra?: boolean | undefined;
+	index?: number | undefined;
+	selected?: boolean | undefined;
+};
+
+function TableRow({
+	className,
+	zebra = false,
+	index = 0,
+	selected = false,
+	...props
+}: TableRowProps) {
+	const isOdd = index % 2 === 1;
+
 	return (
 		<tr
 			data-slot="table-row"
 			className={cn(
-				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				tableRowStyles,
+				!zebra && "border-b",
+				!zebra && "border-border-secondary",
+				zebra && isOdd && "bg-bg-secondary",
+				selected && "bg-bg-hover",
 				className,
 			)}
 			{...props}
@@ -63,25 +195,66 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
 	);
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+type TableHeadProps = React.ComponentProps<"th"> & {
+	sortable?: boolean | undefined;
+	sorted?: "asc" | "desc" | false | undefined;
+};
+
+function TableHead({
+	className,
+	sortable = false,
+	sorted = false,
+	children,
+	...props
+}: TableHeadProps) {
+	const SortIcon =
+		sorted === "asc"
+			? ArrowUpIcon
+			: sorted === "desc"
+				? ArrowDownIcon
+				: ArrowUpDownIcon;
+
 	return (
 		<th
 			data-slot="table-head"
 			className={cn(
-				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				tableHeadStyles,
+				sortable && "cursor-pointer select-none",
 				className,
 			)}
 			{...props}
-		/>
+		>
+			{sortable ? (
+				<div className="flex items-center gap-1">
+					{children}
+					<SortIcon
+						className={cn(
+							tableSortIconStyles,
+							sorted ? "opacity-100" : "opacity-0 group-hover/head:opacity-30",
+						)}
+					/>
+				</div>
+			) : (
+				children
+			)}
+		</th>
 	);
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+type CellType = "text" | "link";
+
+type TableCellProps = React.ComponentProps<"td"> & {
+	type?: CellType | undefined;
+};
+
+function TableCell({ className, type = "text", ...props }: TableCellProps) {
 	return (
 		<td
 			data-slot="table-cell"
+			data-type={type}
 			className={cn(
-				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				tableCellStyles,
+				type === "link" && tableCellLinkStyles,
 				className,
 			)}
 			{...props}
@@ -96,7 +269,7 @@ function TableCaption({
 	return (
 		<caption
 			data-slot="table-caption"
-			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			className={cn(tableCaptionStyles, className)}
 			{...props}
 		/>
 	);
@@ -111,4 +284,9 @@ export {
 	TableRow,
 	TableCell,
 	TableCaption,
+	type TableProps,
+	type TableRowProps,
+	type TableHeadProps,
+	type TableCellProps,
+	type CellType,
 };

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

@@ -1,149 +1,261 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { action } from "storybook/internal/actions";
-import { Button } from "#shadcn/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "#shadcn/components/ui/card";
-import { Input } from "#shadcn/components/ui/input";
-import { Label } from "#shadcn/components/ui/label";
+import { action } from "storybook/actions";
 import {
 	Tabs,
 	TabsAddButton,
 	TabsContent,
 	TabsList,
+	TabsListDropdown,
 	TabsTrigger,
 } from "#shadcn/components/ui/tabs";
 
+interface TabsWrapperProps {
+	variant?: "default" | "browser" | "secondary" | "tertiary";
+}
+
+function TabsWrapper({ variant = "default" }: TabsWrapperProps) {
+	if (variant === "browser") {
+		return (
+			<Tabs defaultValue="first" variant="browser">
+				<TabsList>
+					<TabsTrigger
+						value="first"
+						onClick={() => action("onClick")()}
+						onClose={(v) => action("onClose")(v)}
+					>
+						<span className="flex items-center gap-1">
+							<span className="text-utility-green">GET</span>
+							<span>/fhir/Patient</span>
+						</span>
+					</TabsTrigger>
+					<TabsTrigger
+						value="second"
+						onClick={() => action("onClick")()}
+						onClose={(v) => action("onClose")(v)}
+					>
+						<span className="flex items-center gap-1">
+							<span className="text-utility-yellow">POST</span>
+							<span>/fhir</span>
+						</span>
+					</TabsTrigger>
+				</TabsList>
+				<TabsAddButton onClick={() => action("onAdd")()} />
+				<TabsContent value="first">
+					<div className="p-4">GET /fhir/Patient content</div>
+				</TabsContent>
+				<TabsContent value="second">
+					<div className="p-4">POST /fhir content</div>
+				</TabsContent>
+			</Tabs>
+		);
+	}
+
+	if (variant === "secondary") {
+		return (
+			<Tabs defaultValue="tab1" variant="secondary">
+				<TabsList>
+					<TabsTrigger value="tab1">Tab 1</TabsTrigger>
+					<TabsTrigger value="tab2">Tab 2</TabsTrigger>
+					<TabsTrigger value="tab3">Tab 3</TabsTrigger>
+				</TabsList>
+				<TabsContent value="tab1">
+					<div className="p-4">Tab 1 content</div>
+				</TabsContent>
+				<TabsContent value="tab2">
+					<div className="p-4">Tab 2 content</div>
+				</TabsContent>
+				<TabsContent value="tab3">
+					<div className="p-4">Tab 3 content</div>
+				</TabsContent>
+			</Tabs>
+		);
+	}
+
+	if (variant === "tertiary") {
+		return (
+			<Tabs defaultValue="tab1" variant="tertiary">
+				<TabsList>
+					<TabsTrigger value="tab1">Tab 1</TabsTrigger>
+					<TabsTrigger value="tab2">Tab 2</TabsTrigger>
+					<TabsTrigger value="tab3">Tab 3</TabsTrigger>
+				</TabsList>
+				<TabsContent value="tab1">
+					<div className="p-4">Tab 1 content</div>
+				</TabsContent>
+				<TabsContent value="tab2">
+					<div className="p-4">Tab 2 content</div>
+				</TabsContent>
+				<TabsContent value="tab3">
+					<div className="p-4">Tab 3 content</div>
+				</TabsContent>
+			</Tabs>
+		);
+	}
+
+	return (
+		<Tabs defaultValue="tab1">
+			<TabsList>
+				<TabsTrigger value="tab1">Tab 1</TabsTrigger>
+				<TabsTrigger value="tab2">Tab 2</TabsTrigger>
+				<TabsTrigger value="tab3">Tab 3</TabsTrigger>
+			</TabsList>
+			<TabsContent value="tab1">
+				<div className="p-4">Tab 1 content</div>
+			</TabsContent>
+			<TabsContent value="tab2">
+				<div className="p-4">Tab 2 content</div>
+			</TabsContent>
+			<TabsContent value="tab3">
+				<div className="p-4">Tab 3 content</div>
+			</TabsContent>
+		</Tabs>
+	);
+}
+
 const meta = {
 	title: "Component/Tabs",
+	component: TabsWrapper,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
 	argTypes: {
 		variant: {
-			options: ["button", "dashed"],
-			control: { type: "select" },
+			control: "select",
+			options: ["default", "browser", "secondary", "tertiary"],
 		},
 	},
-} satisfies Meta;
+	args: {
+		variant: "default",
+	},
+} satisfies Meta<typeof TabsWrapper>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Demo = {
-	render: (props) => (
-		<div className="flex w-full max-w-sm flex-col gap-6">
-			<Tabs defaultValue="account" {...props}>
-				<TabsList>
-					<TabsTrigger value="account">Account</TabsTrigger>
-					<TabsTrigger value="password">Password</TabsTrigger>
-				</TabsList>
-				<TabsContent value="account">
-					<Card>
-						<CardHeader>
-							<CardTitle>Account</CardTitle>
-							<CardDescription>
-								Make changes to your account here. Click save when you&apos;re
-								done.
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="grid gap-6">
-							<div className="grid gap-3">
-								<Label htmlFor="tabs-demo-name">Name</Label>
-								<Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
-							</div>
-							<div className="grid gap-3">
-								<Label htmlFor="tabs-demo-username">Username</Label>
-								<Input id="tabs-demo-username" defaultValue="@peduarte" />
-							</div>
-						</CardContent>
-						<CardFooter>
-							<Button>Save changes</Button>
-						</CardFooter>
-					</Card>
-				</TabsContent>
-				<TabsContent value="password">
-					<Card>
-						<CardHeader>
-							<CardTitle>Password</CardTitle>
-							<CardDescription>
-								Change your password here. After saving, you&apos;ll be logged
-								out.
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="grid gap-6">
-							<div className="grid gap-3">
-								<Label htmlFor="tabs-demo-current">Current password</Label>
-								<Input id="tabs-demo-current" type="password" />
-							</div>
-							<div className="grid gap-3">
-								<Label htmlFor="tabs-demo-new">New password</Label>
-								<Input id="tabs-demo-new" type="password" />
-							</div>
-						</CardContent>
-						<CardFooter>
-							<Button>Save password</Button>
-						</CardFooter>
-					</Card>
-				</TabsContent>
-			</Tabs>
-		</div>
-	),
+export const Default = {
+	tags: ["!dev"],
+	render: ({ variant = "default" }) => <TabsWrapper variant={variant} />,
 } satisfies Story;
 
-function BrowserTabOnClose(value: string) {
-	action("onClose")(value);
-}
+export const Demo = {
+	tags: ["!autodocs"],
+	render: () => (
+		<div className="space-y-8">
+			{/* Default variant */}
+			<div>
+				<h3 className="typo-label mb-4">Default</h3>
+				<Tabs defaultValue="tab1">
+					<TabsList>
+						<TabsTrigger value="tab1">Tab 1</TabsTrigger>
+						<TabsTrigger value="tab2">Tab 2</TabsTrigger>
+						<TabsTrigger value="tab3">Tab 3</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			</div>
 
-function BrowserTabOnClick() {
-	action("onClick")();
-}
+			{/* Secondary variant */}
+			<div>
+				<h3 className="typo-label mb-4">Secondary</h3>
+				<Tabs defaultValue="tab1" variant="secondary">
+					<TabsList>
+						<TabsTrigger value="tab1">Tab 1</TabsTrigger>
+						<TabsTrigger value="tab2">Tab 2</TabsTrigger>
+						<TabsTrigger value="tab3">Tab 3</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			</div>
 
-function BrowserTabOnAdd() {
-	action("onAdd")();
-}
+			{/* Tertiary variant */}
+			<div>
+				<h3 className="typo-label mb-4">Tertiary</h3>
+				<Tabs defaultValue="tab1" variant="tertiary">
+					<TabsList>
+						<TabsTrigger value="tab1">Tab 1</TabsTrigger>
+						<TabsTrigger value="tab2">Tab 2</TabsTrigger>
+						<TabsTrigger value="tab3">Tab 3</TabsTrigger>
+					</TabsList>
+				</Tabs>
+			</div>
 
-export const Browser = {
-	parameters: {
-		layout: "fullscreen",
-	},
-	render: () => (
-		<Tabs defaultValue="first" variant="browser">
-			<TabsList>
-				<TabsTrigger
-					value="first"
-					onClick={BrowserTabOnClick}
-					onClose={BrowserTabOnClose}
-				>
-					<span className="flex items-center gap-1">
-						<span className="text-utility-green">GET</span>
-						<span>/fhir/Patient</span>
-					</span>
-				</TabsTrigger>
-				<TabsTrigger
-					value="second"
-					onClick={BrowserTabOnClick}
-					onClose={BrowserTabOnClose}
-				>
-					<span className="flex items-center gap-1">
-						<span className="text-utility-yellow">POST</span>
-						<span>/fhir</span>
-					</span>
-				</TabsTrigger>
-				<TabsTrigger
-					value="third"
-					onClick={BrowserTabOnClick}
-					onClose={BrowserTabOnClose}
-				>
-					<span className="flex items-center gap-1">
-						<span className="text-utility-yellow">POST</span>
-						<span>/$graphql</span>
-					</span>
-				</TabsTrigger>
-			</TabsList>
-			<TabsAddButton onClick={BrowserTabOnAdd} />
-		</Tabs>
+			{/* Browser variant */}
+			<div>
+				<h3 className="typo-label mb-4">Browser</h3>
+				<Tabs defaultValue="first" variant="browser">
+					<TabsList>
+						<TabsTrigger
+							value="first"
+							onClick={() => action("onClick")()}
+							onClose={(v) => action("onClose")(v)}
+						>
+							<span className="flex items-center gap-1">
+								<span className="text-utility-green">GET</span>
+								<span>/fhir/Patient</span>
+							</span>
+						</TabsTrigger>
+						<TabsTrigger
+							value="second"
+							onClick={() => action("onClick")()}
+							onClose={(v) => action("onClose")(v)}
+						>
+							<span className="flex items-center gap-1">
+								<span className="text-utility-yellow">POST</span>
+								<span>/fhir</span>
+							</span>
+						</TabsTrigger>
+						<TabsTrigger
+							value="third"
+							onClick={() => action("onClick")()}
+							onClose={(v) => action("onClose")(v)}
+						>
+							<span className="flex items-center gap-1">
+								<span className="text-utility-yellow">POST</span>
+								<span>/$graphql</span>
+							</span>
+						</TabsTrigger>
+					</TabsList>
+					<TabsAddButton onClick={() => action("onAdd")()} />
+					<TabsListDropdown
+						tabs={[
+							{
+								id: "first",
+								content: (
+									<span className="flex items-center gap-1">
+										<span className="text-utility-green">GET</span>
+										<span>/fhir/Patient</span>
+									</span>
+								),
+							},
+							{
+								id: "second",
+								content: (
+									<span className="flex items-center gap-1">
+										<span className="text-utility-yellow">POST</span>
+										<span>/fhir</span>
+									</span>
+								),
+							},
+							{
+								id: "third",
+								content: (
+									<span className="flex items-center gap-1">
+										<span className="text-utility-yellow">POST</span>
+										<span>/$graphql</span>
+									</span>
+								),
+							},
+						]}
+					/>
+				</Tabs>
+			</div>
+		</div>
 	),
 } satisfies Story;