feat: storybooks for all components

apps/web/.storybook/main.ts

@@ -1,31 +1,19 @@
 import type { StorybookConfig } from "@storybook/nextjs";
 
-import { dirname, join } from "path";
-
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): string {
-	return dirname(require.resolve(join(value, "package.json")));
-}
 const config: StorybookConfig = {
 	stories: [
 		"../src/**/*.mdx",
 		"../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
 		"../../../packages/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
 	],
 	addons: [
-		getAbsolutePath("@storybook/addon-onboarding"),
-		getAbsolutePath("@storybook/addon-links"),
-		getAbsolutePath("@storybook/addon-essentials"),
-		getAbsolutePath("@chromatic-com/storybook"),
-		getAbsolutePath("@storybook/addon-interactions"),
-		getAbsolutePath("@storybook/addon-styling-webpack"),
-		getAbsolutePath("@storybook/addon-themes"),
+		"@storybook/addon-onboarding",
+		"@storybook/addon-essentials",
+		"@chromatic-com/storybook",
+		"@storybook/addon-interactions",
 	],
 	framework: {
-		name: getAbsolutePath("@storybook/nextjs"),
+		name: "@storybook/nextjs",
 		options: {},
 	},
 	staticDirs: ["../public"],

apps/web/src/stories/Alert.stories.tsx

@@ -0,0 +1,44 @@
+import Alert from "@repo/ui/alert";
+import type { Meta, StoryObj } from "@storybook/react";
+import type React from "react";
+import { useState } from "react";
+
+const meta: Meta<typeof Alert> = {
+	title: "Components/Alert",
+	tags: ["autodocs"],
+	component: Alert,
+	parameters: {
+		controls: { expanded: true },
+	},
+	argTypes: {
+		type: {
+			control: { type: "select" },
+			options: ["success", "error", "info"],
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Template: Story = (
+	args: React.JSX.IntrinsicAttributes & {
+		message: string;
+		description: string;
+		type: "success" | "error" | "info";
+		onDismiss: () => void;
+	},
+) => {
+	const [isVisible, setIsVisible] = useState(true);
+
+	if (!isVisible) return null;
+
+	return <Alert {...args} onDismiss={() => setIsVisible(false)} />;
+};
+
+Template.args = {
+	message: "This is an alert",
+	description: "This is an alert description",
+	type: "success",
+};

apps/web/src/stories/Badge.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryFn } from "@storybook/react";
+import React from "react";
+import Badge from "../../../../packages/ui/src/badge";
+
+export default {
+	title: "Components/Badge",
+	component: Badge,
+	tags: ["autodocs"],
+	argTypes: {
+		variant: {
+			control: "radio",
+			options: ["default", "primary", "secondary", "accent", "success"],
+		},
+		size: {
+			control: "radio",
+			options: ["sm", "md", "lg"],
+		},
+	},
+} as Meta;
+
+const Template: StoryFn<typeof Badge> = (args) => <Badge {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+	text: "Default Badge",
+	variant: "default",
+	size: "md",
+};
+
+export const Variants: StoryFn = () => (
+	<div style={{ display: "flex", gap: "1rem" }}>
+		<Badge variant="primary" text="Primary" />
+		<Badge variant="secondary" text="Secondary" />
+		<Badge variant="accent" text="Accent" />
+		<Badge variant="success" text="success" />
+	</div>
+);
+
+export const Sizes: StoryFn = () => (
+	<div style={{ display: "flex", gap: "1rem" }}>
+		<Badge variant="primary" text="Primary" size="sm" />
+		<Badge variant="accent" text="Primary" size="md" />
+		<Badge variant="secondary" text="Primary" size="lg" />
+	</div>
+);

apps/web/src/stories/Button.stories.tsx

@@ -0,0 +1,72 @@
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+import Button from "@repo/ui/button";
+import type { Meta, StoryFn } from "@storybook/react";
+
+export default {
+	title: "Components/Button",
+	tags: ["autodocs"],
+	component: Button,
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["primary", "secondary"],
+			description: "Controls the button style variant",
+		},
+		size: {
+			control: "select",
+			options: ["small", "medium", "large"],
+			description: "Controls the button size",
+		},
+		icon: {
+			control: false,
+			description: "Optional icon to display alongside the button text",
+		},
+		disabled: {
+			control: "boolean",
+			description: "Disables the button if set to true",
+		},
+		onClick: {
+			action: "clicked",
+			description: "Callback function when the button is clicked",
+		},
+	},
+} as Meta;
+
+const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	children: "Disabled",
+	disabled: true,
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+	children: "Icon",
+	variant: "primary",
+	icon: <ArrowRightIcon />,
+};
+
+export const Variants: StoryFn = () => (
+	<div style={{ display: "flex", gap: "1rem" }}>
+		<Button variant="primary">Primary</Button>
+		<Button variant="secondary">Secondary</Button>
+	</div>
+);
+
+export const Sizes: StoryFn = () => (
+	<div style={{ display: "flex", gap: "1rem" }}>
+		<Button variant="primary" size="sm">
+			Small
+		</Button>
+		<Button variant="secondary" size="md">
+			Medium
+		</Button>
+		<Button variant="primary" size="lg">
+			Large
+		</Button>
+		<Button variant="secondary" size="xl">
+			Large
+		</Button>
+	</div>
+);

apps/web/src/stories/CarouselCard.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CarouselCard, {
+	type CardProps,
+} from "../../../../packages/ui/src/carouselCard";
+
+const meta: Meta<typeof CarouselCard> = {
+	title: "Components/CarouselCard",
+	tags: ["autodocs"],
+	component: CarouselCard,
+	parameters: {
+		controls: { expanded: true },
+	},
+	argTypes: {
+		tag: {
+			description: "The tag displayed at the top of the card.",
+			control: { type: "text" },
+		},
+		title: {
+			description: "The title text displayed on the card.",
+			control: { type: "text" },
+		},
+		image: {
+			description: "Background image URL for the card.",
+			control: { type: "text" },
+		},
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CarouselCard>;
+
+const defaultArgs: CardProps = {
+	tag: "Tech",
+	title: "Latest Innovations in Technology",
+	id: "1",
+	image: "https://via.placeholder.com/380x180?text=Card+Image",
+};
+
+export const Default: Story = {
+	args: { ...defaultArgs },
+};

apps/web/src/stories/ChatWithSeller.stories.tsx

@@ -0,0 +1,44 @@
+import { ChatWithSeller } from "@repo/ui/chatWithSeller";
+import type { Meta, StoryFn } from "@storybook/react";
+import React from "react";
+
+export default {
+	title: "Components/ChatWithSeller",
+	tags: ["autodocs"],
+	component: ChatWithSeller,
+	argTypes: {
+		name: {
+			control: "text",
+			description: "The name of the seller.",
+			defaultValue: "John Doe",
+		},
+		description: {
+			control: "text",
+			description: "A short description about the seller.",
+			defaultValue: "Here to help you with your queries",
+		},
+		avatarSrc: {
+			control: "text",
+			description: "The source URL for the seller's avatar image.",
+			defaultValue: "/images/user-profile/avatar.svg",
+		},
+		onClick: {
+			action: "clicked",
+			description: "Callback function for when the button is clicked.",
+		},
+	},
+} as Meta<typeof ChatWithSeller>;
+
+const Template: StoryFn<typeof ChatWithSeller> = (args) => (
+	<div className="p-4 max-w-sm mx-auto">
+		<ChatWithSeller {...args} />
+	</div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+	name: "Jane Doe",
+	description: "Click to chat with the seller",
+	avatarSrc: "/images/user-profile/avatar.svg",
+	onClick: () => alert("Navigating to chat..."),
+};