feat(components): Last missing essential components

front/package.json

@@ -38,7 +38,10 @@
     "@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",
@@ -48,8 +51,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/slider.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Slider, SliderProps as DefaultSliderProps } from "@/components/ui/slider";
+
+type SliderProps = Omit<DefaultSliderProps, "value"> & {
+	value: number;
+};
+
+const meta: Meta<DefaultSliderProps> = {
+	component: Slider,
+	title: "Slider",
+	args: {
+		value: [20],
+		min: 0,
+		max: 100,
+		disabled: false,
+		className: "",
+	},
+	argTypes: {
+		value: {
+			type: "number",
+			control: "number",
+		},
+		min: {
+			type: "number",
+			control: "number",
+		},
+		max: {
+			type: "number",
+			control: "number",
+		},
+		disabled: {
+			type: "boolean",
+			control: "boolean",
+		},
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj<SliderProps>;
+
+const Render = (args: SliderProps) => <Slider {...args} value={[args.value]} />;
+
+export const LightMode: Story = {
+	args: {
+		value: 20,
+		min: 0,
+		max: 100,
+		disabled: false,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		value: 20,
+		min: 0,
+		max: 100,
+		disabled: false,
+		className: "",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;

front/src/components/ui/slider.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Root, Track, Thumb, Range } from "@radix-ui/react-slider";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type SliderProps = React.ComponentPropsWithoutRef<typeof Root>;
+
+const Slider = React.forwardRef<React.ElementRef<typeof Root>, SliderProps>(({ className, ...props }, ref) => (
+	<Root ref={ref} className={cn("relative flex w-full touch-none select-none items-center", className)} {...props}>
+		<Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+			<Range className="absolute h-full bg-primary" />
+		</Track>
+		<Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+	</Root>
+));
+Slider.displayName = Root.displayName;
+
+export { Slider };

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

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Toaster } from "@/components/ui/sonner";
+
+const meta: Meta = {
+	component: Toaster,
+	title: "Sonner",
+};
+type Story = StoryObj;
+
+const Render = () => {
+	return (
+		<>
+			<Toaster />
+			<Button
+				variant="outline"
+				onClick={() =>
+					toast("File has been created", {
+						description: "file.pdf",
+						action: {
+							label: "Navigate to file",
+							onClick: () => {},
+						},
+						cancel: {
+							label: "Undo",
+							onClick: () => {},
+						},
+					})
+				}
+			>
+				Open toaster
+			</Button>
+		</>
+	);
+};
+
+export const LightMode: Story = {
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;

front/src/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = "system" } = useTheme();
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };

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

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

front/src/components/ui/switch.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Root, Thumb } from "@radix-ui/react-switch";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type SwitchProps = Omit<React.ComponentProps<typeof Root>, "value">;
+
+const Switch = React.forwardRef<React.ElementRef<typeof Root>, SwitchProps>(({ className, ...props }, ref) => (
+	<Root
+		className={cn(
+			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<Thumb
+			className={cn(
+				"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+			)}
+		/>
+	</Root>
+));
+Switch.displayName = Root.displayName;
+
+export { Switch };

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

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const meta: Meta = {
+	component: Tabs,
+	title: "Tabs",
+};
+type Story = StoryObj;
+
+const Render = () => {
+	return (
+		<Tabs defaultValue="left" className="w-[50%]">
+			<TabsList className="grid w-full grid-cols-2">
+				<TabsTrigger value="left">Left</TabsTrigger>
+				<TabsTrigger value="right">Right</TabsTrigger>
+			</TabsList>
+			<TabsContent value="left">
+				<p className="text-primary">Welcome to the left tab</p>
+			</TabsContent>
+			<TabsContent value="right">
+				<p className="text-primary">Welcome to the right tab</p>
+			</TabsContent>
+		</Tabs>
+	);
+};
+
+export const LightMode: Story = {
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;