feat: Design System - Components Part III

front/package.json

@@ -28,10 +28,19 @@
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@solana/web3.js": "^1.95.4",
     "@tanstack/query-core": "^5.59.0",
@@ -41,8 +50,10 @@
     "cmdk": "1.0.0",
     "lucide-react": "^0.453.0",
     "next": "14.2.15",
+    "next-themes": "^0.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "viem": "2.21.19",

front/src/components/ui/checkbox.stories.tsx

@@ -1,12 +1,13 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Checkbox, CheckboxProps } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 
 const meta: Meta<CheckboxProps> = {
 	component: Checkbox,
 	title: "Checkbox",
 	args: {
-		children: "Enable checkbox",
+		disabled: false,
 		className: "",
 	},
 	argTypes: {
@@ -22,7 +23,12 @@ const meta: Meta<CheckboxProps> = {
 };
 type Story = StoryObj<CheckboxProps>;
 
-const Render = (args: CheckboxProps) => <Checkbox {...args} />;
+const Render = (args: CheckboxProps) => (
+	<div className="flex items-center gap-x-2">
+		<Checkbox id="enable" {...args} />
+		<Label htmlFor="enable">Enable cookies</Label>
+	</div>
+);
 
 export const LightMode: Story = {
 	args: {

front/src/components/ui/command.stories.tsx

@@ -37,7 +37,7 @@ const meta: Meta<CommandProps> = {
 	},
 };
 type Story = StoryObj<CommandProps>;
-type DarkModeMeta = CommandProps & { dark?: boolean };
+type DarkModeMeta = CommandProps & { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => {
 	const [open, setOpen] = React.useState(false);

front/src/components/ui/context-menu.stories.tsx

@@ -30,7 +30,7 @@ const meta: Meta = {
 	},
 };
 type Story = StoryObj;
-type DarkModeMeta = { dark?: boolean };
+type DarkModeMeta = { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => (
 	<ContextMenu {...args}>

front/src/components/ui/dialog.stories.tsx

@@ -26,7 +26,7 @@ const meta: Meta = {
 	},
 };
 type Story = StoryObj;
-type DarkModeMeta = { dark?: boolean };
+type DarkModeMeta = { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => (
 	<Dialog>

front/src/components/ui/dropdown-menu.stories.tsx

@@ -24,7 +24,7 @@ const meta: Meta = {
 	},
 };
 type Story = StoryObj;
-type DarkModeMeta = { dark?: boolean };
+type DarkModeMeta = { dark?: boolean; className?: string };
 
 const Render = (args: DarkModeMeta) => (
 	<DropdownMenu {...args}>

front/src/components/ui/hover-card.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { CalendarDays } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+
+const meta: Meta = {
+	component: HoverCard,
+	title: "Hover Card",
+	args: {
+		className: "",
+	},
+	argTypes: {
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj;
+type DarkModeMeta = { dark?: boolean; className?: string };
+
+const Render = (args: DarkModeMeta) => (
+	<HoverCard>
+		<HoverCardTrigger asChild>
+			<Button variant="link">Bedrock</Button>
+		</HoverCardTrigger>
+		<HoverCardContent className={args.dark ? "dark w-80" : "w-80"}>
+			<div className="flex justify-between space-x-4">
+				<div className="space-y-1">
+					<h4 className="text-sm font-semibold">Bedrock</h4>
+					<p className="text-sm">Your decentralized workspace by design, not by promise.</p>
+					<div className="flex items-center pt-2">
+						<CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
+						<span className="text-xs text-muted-foreground">Since June 2024</span>
+					</div>
+				</div>
+			</div>
+		</HoverCardContent>
+	</HoverCard>
+);
+
+export const LightMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} dark />
+		</div>
+	),
+};
+
+export default meta;

front/src/components/ui/hover-card.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Root, Trigger, Content } from "@radix-ui/react-hover-card";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = Root;
+const HoverCardTrigger = Trigger;
+
+const HoverCardContent = React.forwardRef<
+	React.ElementRef<typeof Content>,
+	React.ComponentPropsWithoutRef<typeof Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+			className,
+		)}
+		{...props}
+	/>
+));
+HoverCardContent.displayName = Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

front/src/components/ui/input.stories.tsx

@@ -6,15 +6,10 @@ const meta: Meta<InputProps> = {
 	component: Input,
 	title: "Input",
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},
 	argTypes: {
-		value: {
-			type: "string",
-			control: "text",
-		},
 		disabled: {
 			type: "boolean",
 			control: "boolean",
@@ -27,11 +22,10 @@ const meta: Meta<InputProps> = {
 };
 type Story = StoryObj<InputProps>;
 
-const Render = (args: InputProps) => <Input {...args} />;
+const Render = (args: InputProps) => <Input {...args} defaultValue="Text value" />;
 
 export const LightMode: Story = {
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},
@@ -45,7 +39,6 @@ export const LightMode: Story = {
 
 export const DarkMode: Story = {
 	args: {
-		value: "Text input",
 		disabled: false,
 		className: "",
 	},

front/src/components/ui/popover.stories.tsx

@@ -0,0 +1,74 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+const meta: Meta = {
+	component: Popover,
+	title: "Popover",
+	args: {
+		className: "",
+	},
+	argTypes: {
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj;
+type DarkModeMeta = { dark?: boolean; className?: string };
+
+const Render = (args: DarkModeMeta) => (
+	<Popover {...args}>
+		<PopoverTrigger asChild>
+			<Button variant="outline">Open</Button>
+		</PopoverTrigger>
+		<PopoverContent className={args.dark ? "dark w-80" : "w-80"}>
+			<div className="grid gap-4">
+				<div className="space-y-2">
+					<h4 className="font-medium leading-none">File</h4>
+					<p className="text-sm text-muted-foreground">Change file parameters</p>
+				</div>
+				<div className="grid gap-2">
+					<div className="grid grid-cols-3 items-center gap-4">
+						<Label htmlFor="name">File name</Label>
+						<Input id="name" defaultValue="file.pdf" className="col-span-2 h-8" />
+					</div>
+				</div>
+			</div>
+		</PopoverContent>
+	</Popover>
+);
+
+export const LightMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} dark />
+		</div>
+	),
+};
+
+export default meta;

front/src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Root, Trigger, Anchor, Content, Portal } from "@radix-ui/react-popover";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Popover = Root;
+const PopoverTrigger = Trigger;
+const PopoverAnchor = Anchor;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof Content>,
+	React.ComponentPropsWithoutRef<typeof Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<Portal>
+		<Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
+				className,
+			)}
+			{...props}
+		/>
+	</Portal>
+));
+PopoverContent.displayName = Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

front/src/components/ui/progress.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Progress, ProgressProps } from "@/components/ui/progress";
+
+const meta: Meta<ProgressProps> = {
+	component: Progress,
+	title: "Progress",
+	args: {
+		value: 20,
+		className: "",
+	},
+	argTypes: {
+		value: {
+			type: "string",
+			control: "number",
+		},
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj<ProgressProps>;
+
+const Render = (args: ProgressProps) => <Progress {...args} />;
+
+export const LightMode: Story = {
+	args: {
+		value: 20,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		value: 20,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;