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

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

@@ -1,19 +1,66 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Label } from "#shadcn/components/ui/label";
+import { useState } from "react";
 import { Switch } from "#shadcn/components/ui/switch";
 
 const meta = {
 	title: "Component/Switch",
-} satisfies Meta;
+	component: Switch,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		size: {
+			control: "select",
+			options: ["regular", "small"],
+		},
+		disabled: {
+			control: "boolean",
+		},
+	},
+	args: {
+		size: "regular",
+		disabled: false,
+	},
+} satisfies Meta<typeof Switch>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default = {
+	tags: ["!dev"],
+	render: (args) => {
+		const [checked, setChecked] = useState(false);
+		return <Switch {...args} checked={checked} onCheckedChange={setChecked} />;
+	},
+} satisfies Story;
+
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
-		<div className="flex items-center space-x-2">
-			<Switch id="airplane-mode" />
-			<Label htmlFor="airplane-mode">Airplane Mode</Label>
+		<div className="flex gap-12">
+			{/* Regular size */}
+			<div className="space-y-3">
+				<Switch />
+				<Switch defaultChecked />
+				<Switch disabled />
+				<Switch defaultChecked disabled />
+			</div>
+			{/* Small size */}
+			<div className="space-y-3">
+				<Switch size="small" />
+				<Switch size="small" defaultChecked />
+				<Switch size="small" disabled />
+				<Switch size="small" defaultChecked disabled />
+			</div>
 		</div>
 	),
 } satisfies Story;

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

@@ -1,27 +1,112 @@
+"use client";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Lock } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Switch root base styles
+const baseSwitchRootStyles = cn(
+	// Layout
+	"peer",
+	"inline-flex",
+	"items-center",
+	"shrink-0",
+	// Shape
+	"rounded-full",
+	// Interaction
+	"transition-all",
+	"outline-none",
+	"cursor-pointer",
+	// States
+	"data-[state=unchecked]:bg-bg-secondary_inverse",
+	"data-[state=checked]:bg-bg-link",
+	"hover:data-[state=unchecked]:bg-bg-secondary_inverse_hover",
+	"hover:data-[state=checked]:bg-bg-link_hover",
+	// Focus
+	"focus-visible:ring-4",
+	"focus-visible:ring-ring-blue",
+	// Disabled
+	"disabled:cursor-not-allowed",
+	"disabled:hover:data-[state=unchecked]:bg-bg-disabled",
+	"disabled:hover:data-[state=checked]:bg-bg-link_disabled",
+	"disabled:data-[state=checked]:bg-bg-link_disabled",
+	"disabled:data-[state=unchecked]:bg-bg-disabled",
+);
+
+const switchRootVariants = cva(baseSwitchRootStyles, {
+	variants: {
+		size: {
+			regular: cn("h-6", "w-10"),
+			small: cn("h-4", "w-7"),
+		},
+	},
+	defaultVariants: {
+		size: "regular",
+	},
+});
+
+// Switch thumb base styles
+const baseSwitchThumbStyles = cn(
+	// Layout
+	"pointer-events-none",
+	"block",
+	// Shape
+	"rounded-full",
+	"ring-0",
+	// Color
+	"bg-bg-primary",
+	// Animation
+	"transition-transform",
+	"data-[state=unchecked]:translate-x-0.5",
+);
+
+const switchThumbVariants = cva(baseSwitchThumbStyles, {
+	variants: {
+		size: {
+			regular: cn("size-5", "data-[state=checked]:translate-x-[1.125rem]"),
+			small: cn("size-3", "data-[state=checked]:translate-x-[0.875rem]"),
+		},
+	},
+	defaultVariants: {
+		size: "regular",
+	},
+});
+
 function Switch({
 	className,
+	size,
+	disabled,
+	locked,
 	...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+}: React.ComponentProps<typeof SwitchPrimitive.Root> &
+	VariantProps<typeof switchRootVariants> & {
+		locked?: boolean;
+	}) {
 	return (
 		<SwitchPrimitive.Root
 			data-slot="switch"
-			className={cn(
-				"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-				className,
-			)}
+			className={cn(switchRootVariants({ size }), className)}
+			disabled={disabled}
 			{...props}
 		>
 			<SwitchPrimitive.Thumb
 				data-slot="switch-thumb"
 				className={cn(
-					"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+					switchThumbVariants({ size }),
+					locked && "flex items-center justify-center",
+				)}
+			>
+				{locked && (
+					<Lock
+						size={size === "small" ? 8 : 10}
+						strokeWidth={2.5}
+						style={{ strokeWidth: 2.5 }}
+						className="text-neutral-600"
+					/>
 				)}
-			/>
+			</SwitchPrimitive.Thumb>
 		</SwitchPrimitive.Root>
 	);
 }

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

@@ -1,95 +1,275 @@
+"use client";
+
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	type ColumnDef,
+	createColumnHelper,
+	flexRender,
+	getCoreRowModel,
+	getSortedRowModel,
+	type RowSelectionState,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+
+import { Checkbox } from "#shadcn/components/ui/checkbox";
 import {
 	Table,
 	TableBody,
-	TableCaption,
 	TableCell,
-	TableFooter,
 	TableHead,
 	TableHeader,
 	TableRow,
 } from "#shadcn/components/ui/table";
 
-const invoices = [
-	{
-		invoice: "INV001",
-		paymentStatus: "Paid",
-		totalAmount: "$250.00",
-		paymentMethod: "Credit Card",
-	},
-	{
-		invoice: "INV002",
-		paymentStatus: "Pending",
-		totalAmount: "$150.00",
-		paymentMethod: "PayPal",
-	},
-	{
-		invoice: "INV003",
-		paymentStatus: "Unpaid",
-		totalAmount: "$350.00",
-		paymentMethod: "Bank Transfer",
-	},
-	{
-		invoice: "INV004",
-		paymentStatus: "Paid",
-		totalAmount: "$450.00",
-		paymentMethod: "Credit Card",
-	},
-	{
-		invoice: "INV005",
-		paymentStatus: "Paid",
-		totalAmount: "$550.00",
-		paymentMethod: "PayPal",
-	},
-	{
-		invoice: "INV006",
-		paymentStatus: "Pending",
-		totalAmount: "$200.00",
-		paymentMethod: "Bank Transfer",
-	},
-	{
-		invoice: "INV007",
-		paymentStatus: "Unpaid",
-		totalAmount: "$300.00",
-		paymentMethod: "Credit Card",
-	},
+type Invoice = {
+	invoice: string;
+	paymentStatus: "Paid" | "Pending" | "Unpaid";
+	totalAmount: number;
+	paymentMethod: string;
+};
+
+const statuses: Invoice["paymentStatus"][] = ["Paid", "Pending", "Unpaid"];
+const methods: Invoice["paymentMethod"][] = [
+	"Credit Card",
+	"PayPal",
+	"Bank Transfer",
 ];
 
-const meta = {
-	title: "Component/Table",
-} satisfies Meta;
-export default meta;
+const invoiceData: Invoice[] = Array.from({ length: 50 }, (_, i) => ({
+	invoice: `INV${String(i + 1).padStart(3, "0")}`,
+	paymentStatus: statuses[i % statuses.length] as string,
+	totalAmount: 100 + ((i * 73) % 900),
+	paymentMethod: methods[i % methods.length] as string,
+}));
 
-type Story = StoryObj<typeof meta>;
+const columnHelper = createColumnHelper<Invoice>();
 
-export const Demo = {
-	render: () => (
-		<Table>
-			<TableCaption>A list of your recent invoices.</TableCaption>
+const columns = [
+	columnHelper.accessor("invoice", {
+		header: "Invoice",
+		cell: (info) => String(info.getValue()),
+		enableSorting: true,
+	}),
+	columnHelper.accessor("paymentStatus", {
+		header: "Status",
+		cell: (info) => String(info.getValue()),
+		enableSorting: true,
+	}),
+	columnHelper.accessor("paymentMethod", {
+		header: "Method",
+		cell: (info) => String(info.getValue()),
+		enableSorting: true,
+	}),
+	columnHelper.accessor("totalAmount", {
+		header: "Amount",
+		cell: (info) => {
+			const value = info.getValue();
+			return `$${value.toFixed(2)}`;
+		},
+		enableSorting: true,
+	}),
+];
+
+const selectColumn: ColumnDef<Invoice, unknown> = {
+	id: "select",
+	header: ({ table }) => (
+		<Checkbox
+			size="small"
+			checked={
+				table.getIsAllPageRowsSelected()
+					? true
+					: table.getIsSomePageRowsSelected()
+						? "indeterminate"
+						: false
+			}
+			onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+			aria-label="Select all"
+		/>
+	),
+	cell: ({ row }) => (
+		<Checkbox
+			size="small"
+			checked={row.getIsSelected()}
+			onCheckedChange={(value) => row.toggleSelected(!!value)}
+			aria-label="Select row"
+		/>
+	),
+	enableSorting: false,
+};
+
+function TableWithSorting({
+	zebra = false,
+	selectable = false,
+	stickyHeader = false,
+}: {
+	zebra?: boolean;
+	selectable?: boolean;
+	stickyHeader?: boolean;
+} = {}) {
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+	const tableColumns = selectable ? [selectColumn, ...columns] : columns;
+
+	const table = useReactTable({
+		data: invoiceData,
+		columns: tableColumns,
+		state: {
+			sorting,
+			rowSelection,
+		},
+		onSortingChange: setSorting,
+		onRowSelectionChange: setRowSelection,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+	});
+
+	return (
+		<Table zebra={zebra} stickyHeader={stickyHeader}>
 			<TableHeader>
-				<TableRow>
-					<TableHead className="w-[100px]">Invoice</TableHead>
-					<TableHead>Status</TableHead>
-					<TableHead>Method</TableHead>
-					<TableHead className="text-right">Amount</TableHead>
-				</TableRow>
+				{table.getHeaderGroups().map((headerGroup) => (
+					<TableRow key={headerGroup.id}>
+						{headerGroup.headers.map((header) => (
+							<TableHead
+								key={header.id}
+								onClick={header.column.getToggleSortingHandler()}
+								sortable={header.column.getCanSort()}
+								sorted={header.column.getIsSorted() || false}
+							>
+								{flexRender(
+									header.column.columnDef.header,
+									header.getContext(),
+								)}
+							</TableHead>
+						))}
+					</TableRow>
+				))}
 			</TableHeader>
 			<TableBody>
-				{invoices.map((invoice) => (
-					<TableRow key={invoice.invoice}>
-						<TableCell className="font-medium">{invoice.invoice}</TableCell>
-						<TableCell>{invoice.paymentStatus}</TableCell>
-						<TableCell>{invoice.paymentMethod}</TableCell>
-						<TableCell className="text-right">{invoice.totalAmount}</TableCell>
+				{table.getRowModel().rows.map((row, index) => (
+					<TableRow
+						key={row.id}
+						zebra={zebra}
+						index={index}
+						selected={row.getIsSelected()}
+					>
+						{row.getVisibleCells().map((cell) => (
+							<TableCell
+								key={cell.id}
+								type={cell.column.id === "invoice" ? "link" : "text"}
+							>
+								{flexRender(cell.column.columnDef.cell, cell.getContext())}
+							</TableCell>
+						))}
 					</TableRow>
 				))}
 			</TableBody>
-			<TableFooter>
-				<TableRow>
-					<TableCell colSpan={3}>Total</TableCell>
-					<TableCell className="text-right">$2,500.00</TableCell>
-				</TableRow>
-			</TableFooter>
 		</Table>
+	);
+}
+
+const meta = {
+	title: "Component/Table",
+	component: TableWithSorting,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		zebra: {
+			control: "boolean",
+			description: "Enable alternating row background colors",
+		},
+		selectable: {
+			control: "boolean",
+			description: "Enable row selection with checkboxes",
+		},
+		stickyHeader: {
+			control: "boolean",
+			description: "Keep header fixed while scrolling",
+		},
+	},
+	args: {
+		zebra: false,
+		selectable: false,
+		stickyHeader: false,
+	},
+} satisfies Meta<typeof TableWithSorting>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	tags: ["!dev"],
+	render: ({
+		zebra = false,
+		selectable = false,
+		stickyHeader = false,
+	}: {
+		zebra?: boolean;
+		selectable?: boolean;
+		stickyHeader?: boolean;
+	} = {}) => (
+		<div className="h-80">
+			<TableWithSorting
+				zebra={zebra}
+				selectable={selectable}
+				stickyHeader={stickyHeader}
+			/>
+		</div>
+	),
+} satisfies Story;
+
+export const Demo = {
+	tags: ["!autodocs"],
+	render: () => (
+		<div className="space-y-8 p-6">
+			<div>
+				<h3 className="text-lg font-semibold mb-4 text-text-primary">
+					Without Zebra Striping
+				</h3>
+				<div className="h-80">
+					<TableWithSorting zebra={false} stickyHeader={true} />
+				</div>
+			</div>
+			<div>
+				<h3 className="text-lg font-semibold mb-4 text-text-primary">
+					With Zebra Striping
+				</h3>
+				<div className="h-80">
+					<TableWithSorting zebra={true} stickyHeader={true} />
+				</div>
+			</div>
+			<div>
+				<h3 className="text-lg font-semibold mb-4 text-text-primary">
+					Selectable
+				</h3>
+				<div className="h-80">
+					<TableWithSorting selectable={true} stickyHeader={true} />
+				</div>
+			</div>
+			<div>
+				<h3 className="text-lg font-semibold mb-4 text-text-primary">
+					Selectable + Zebra
+				</h3>
+				<div className="h-80">
+					<TableWithSorting
+						selectable={true}
+						zebra={true}
+						stickyHeader={true}
+					/>
+				</div>
+			</div>
+		</div>
 	),
 } satisfies Story;