@health-samurai/react-components 0.0.0-alpha.1

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

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
+import { Button } from "#shadcn/components/ui/button";
+import {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "#shadcn/components/ui/drawer";
+
+const data = [
+	{ goal: 400 },
+	{ goal: 300 },
+	{ goal: 200 },
+	{ goal: 300 },
+	{ goal: 200 },
+	{ goal: 278 },
+	{ goal: 189 },
+	{ goal: 239 },
+	{ goal: 300 },
+	{ goal: 200 },
+	{ goal: 278 },
+	{ goal: 189 },
+	{ goal: 349 },
+];
+
+const meta = {
+	title: "Component/Drawer",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => {
+		const [goal, setGoal] = React.useState(350);
+
+		function onClick(adjustment: number) {
+			setGoal(Math.max(200, Math.min(400, goal + adjustment)));
+		}
+
+		return (
+			<Drawer>
+				<DrawerTrigger asChild>
+					<Button variant="secondary">Open Drawer</Button>
+				</DrawerTrigger>
+				<DrawerContent>
+					<div className="mx-auto w-full max-w-sm">
+						<DrawerHeader>
+							<DrawerTitle>Move Goal</DrawerTitle>
+							<DrawerDescription>
+								Set your daily activity goal.
+							</DrawerDescription>
+						</DrawerHeader>
+						<div className="p-4 pb-0">
+							<div className="flex items-center justify-center space-x-2">
+								<Button
+									variant="secondary"
+									size="small"
+									className="h-8 w-8 shrink-0 rounded-full"
+									onClick={() => onClick(-10)}
+									disabled={goal <= 200}
+								>
+									<Minus />
+									<span className="sr-only">Decrease</span>
+								</Button>
+								<div className="flex-1 text-center">
+									<div className="text-7xl font-bold tracking-tighter">
+										{goal}
+									</div>
+									<div className="text-muted-foreground text-[0.70rem] uppercase">
+										Calories/day
+									</div>
+								</div>
+								<Button
+									variant="secondary"
+									size="small"
+									className="h-8 w-8 shrink-0 rounded-full"
+									onClick={() => onClick(10)}
+									disabled={goal >= 400}
+								>
+									<Plus />
+									<span className="sr-only">Increase</span>
+								</Button>
+							</div>
+							<div className="mt-3 h-[120px]">
+								<ResponsiveContainer width="100%" height="100%">
+									<BarChart data={data}>
+										<Bar
+											dataKey="goal"
+											style={
+												{
+													fill: "hsl(var(--foreground))",
+													opacity: 0.9,
+												} as React.CSSProperties
+											}
+										/>
+									</BarChart>
+								</ResponsiveContainer>
+							</div>
+						</div>
+						<DrawerFooter>
+							<Button>Submit</Button>
+							<DrawerClose asChild>
+								<Button variant="secondary">Cancel</Button>
+							</DrawerClose>
+						</DrawerFooter>
+					</div>
+				</DrawerContent>
+			</Drawer>
+		);
+	},
+} satisfies Story;

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

@@ -0,0 +1,133 @@
+import type * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Drawer({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+	return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+	return (
+		<DrawerPrimitive.Overlay
+			data-slot="drawer-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+	return (
+		<DrawerPortal data-slot="drawer-portal">
+			<DrawerOverlay />
+			<DrawerPrimitive.Content
+				data-slot="drawer-content"
+				className={cn(
+					"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+					"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+					"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+					"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+					"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+					className,
+				)}
+				{...props}
+			>
+				<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+				{children}
+			</DrawerPrimitive.Content>
+		</DrawerPortal>
+	);
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn(
+				"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+	return (
+		<DrawerPrimitive.Title
+			data-slot="drawer-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function DrawerDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+	return (
+		<DrawerPrimitive.Description
+			data-slot="drawer-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Drawer,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
+};

package/src/shadcn/components/ui/dropdown-menu.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "#shadcn/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "#shadcn/components/ui/dropdown-menu";
+
+const meta = {
+	title: "Component/Dropdown menu",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="secondary">Open</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-56" align="start">
+				<DropdownMenuLabel>My Account</DropdownMenuLabel>
+				<DropdownMenuGroup>
+					<DropdownMenuItem>
+						Profile
+						<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+					</DropdownMenuItem>
+					<DropdownMenuItem>
+						Billing
+						<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+					</DropdownMenuItem>
+					<DropdownMenuItem>
+						Settings
+						<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+					</DropdownMenuItem>
+					<DropdownMenuItem>
+						Keyboard shortcuts
+						<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
+				<DropdownMenuSeparator />
+				<DropdownMenuGroup>
+					<DropdownMenuItem>Team</DropdownMenuItem>
+					<DropdownMenuSub>
+						<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+						<DropdownMenuPortal>
+							<DropdownMenuSubContent>
+								<DropdownMenuItem>Email</DropdownMenuItem>
+								<DropdownMenuItem>Message</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem>More...</DropdownMenuItem>
+							</DropdownMenuSubContent>
+						</DropdownMenuPortal>
+					</DropdownMenuSub>
+					<DropdownMenuItem>
+						New Team
+						<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem>GitHub</DropdownMenuItem>
+				<DropdownMenuItem>Support</DropdownMenuItem>
+				<DropdownMenuItem disabled>API</DropdownMenuItem>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem>
+					Log out
+					<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	),
+} satisfies Story;

package/src/shadcn/components/ui/dropdown-menu.tsx

@@ -0,0 +1,281 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function DropdownMenu({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
+}
+
+function DropdownMenuTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+					"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+					"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+					"data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height)",
+					"min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin)",
+					"overflow-x-hidden overflow-y-auto rounded-md border border-border-separator px-2 py-3 shadow-lg space-y-0.5",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"cursor-pointer items-center flex gap-2 h-8 px-3 py-1.5 relativerounded-md",
+				"outline-hidden select-none typo-body text-text-secondary",
+				"focus:bg-bg-secondary focus:text-text-primary",
+				"data-[variant=destructive]:text-text-error-primary",
+				"data-[variant=destructive]:focus:bg-bg-error-tertiary",
+				"dark:data-[variant=destructive]:focus:bg-bg-error-tertiary",
+				"data-[variant=destructive]:focus:text-text-error-primary",
+				"data-[variant=destructive]:*:[svg]:!text-text-error-primary",
+				"[&_svg:not([class*='text-'])]:fg-fg-secondary",
+				"data-[disabled]:pointer-events-none",
+				"data-[disabled]:opacity-50",
+				"data-[inset]:pl-8",
+				"[&_svg]:pointer-events-none",
+				"[&_svg]:shrink-0",
+				"[&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-bg-secondary focus:text-text-primary relative flex cursor-default items-center gap-2 rounded-lg py-1 pr-2 pl-9",
+				"outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none",
+				"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-text-link h-8 typo-body text-text-secondary",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-3 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-bg-secondary focus:text-text-primary relative flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2",
+				"outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none",
+				"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-8 typo-body text-text-secondary",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-3 py-1.5 data-[inset]:pl-10 typo-body text-text-secondary",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-bg-quaternary -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-text-secondary ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-bg-secondary focus:text-text-primary data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex",
+				"cursor-default items-center rounded-md px-3 py-1.5 outline-hidden select-none data-[inset]:pl-8 h-8 typo-body text-text-secondary",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-bg-primary text-text-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+				"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
+				"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50",
+				"min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-border-separator",
+				"p-2 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuPortal,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubTrigger,
+	DropdownMenuSubContent,
+};

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

@@ -0,0 +1,67 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "#shadcn/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "#shadcn/components/ui/form";
+import { Input } from "#shadcn/components/ui/input";
+
+const formSchema = z.object({
+	username: z.string().min(2, {
+		message: "Username must be at least 2 characters.",
+	}),
+});
+
+const meta = {
+	title: "Component/Form",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => {
+		const form = useForm<z.infer<typeof formSchema>>({
+			resolver: zodResolver(formSchema),
+			defaultValues: {
+				username: "",
+			},
+		});
+
+		function onSubmit(values: z.infer<typeof formSchema>) {
+			console.log(values);
+		}
+
+		return (
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+					<FormField
+						control={form.control}
+						name="username"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Username</FormLabel>
+								<FormControl>
+									<Input placeholder="shadcn" {...field} />
+								</FormControl>
+								<FormDescription>
+									This is your public display name.
+								</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<Button type="submit">Submit</Button>
+				</form>
+			</Form>
+		);
+	},
+} satisfies Story;