feat: install all shadcn components with tests and MUI-categorized stories

apps/storybook/package.json

@@ -7,7 +7,17 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@repo/ui": "workspace:*"
+    "@repo/ui": "workspace:*",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^1.8.0",
+    "react-day-picker": "^9.14.0",
+    "react-resizable-panels": "^4.10.0",
+    "recharts": "^3.8.1",
+    "sonner": "^2.0.7",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@storybook/addon-docs": "10.3.5",

apps/storybook/src/stories/IconButton.stories.tsx → apps/storybook/src/stories/Custom/IconButton.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
   component: IconButton,
-  title: "Inputs/IconButton",
+  title: "Custom/IconButton",
   tags: ["autodocs"],
 } satisfies Meta<typeof IconButton>;
 

apps/storybook/src/stories/SectionTitle.stories.tsx → apps/storybook/src/stories/Custom/SectionTitle.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
   component: SectionTitle,
-  title: "Layout/SectionTitle",
+  title: "Custom/SectionTitle",
   tags: ["autodocs"],
 } satisfies Meta<typeof SectionTitle>;
 

apps/storybook/src/stories/DataDisplay/Avatar.stories.tsx

@@ -0,0 +1,62 @@
+import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from "@repo/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  component: Avatar,
+  title: "Data Display/Avatar",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="User" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Fallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback>JB</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Avatar size="sm">
+      <AvatarFallback>SM</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <Avatar size="lg">
+      <AvatarImage src="https://github.com/shadcn.png" alt="User" />
+      <AvatarFallback>LG</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Group: Story = {
+  render: () => (
+    <AvatarGroup>
+      <Avatar>
+        <AvatarFallback>A</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>B</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>C</AvatarFallback>
+      </Avatar>
+      <AvatarGroupCount>+3</AvatarGroupCount>
+    </AvatarGroup>
+  ),
+};

apps/storybook/src/stories/DataDisplay/Badge.stories.tsx

@@ -0,0 +1,38 @@
+import { Badge } from "@repo/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  component: Badge,
+  title: "Data Display/Badge",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Badge",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary",
+    variant: "secondary",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: "Destructive",
+    variant: "destructive",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: "Outline",
+    variant: "outline",
+  },
+};

apps/storybook/src/stories/DataDisplay/Card.stories.tsx

@@ -0,0 +1,50 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@repo/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  component: Card,
+  title: "Data Display/Card",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Card content with some example text.</p>
+      </CardContent>
+      <CardFooter>
+        <Button>Save</Button>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Card size="sm" className="w-[300px]">
+      <CardHeader>
+        <CardTitle>Small Card</CardTitle>
+        <CardDescription>A compact card variant.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Smaller padding and gaps.</p>
+      </CardContent>
+    </Card>
+  ),
+};

apps/storybook/src/stories/DataDisplay/Carousel.stories.tsx

@@ -0,0 +1,41 @@
+import {
+  Card,
+  CardContent,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@repo/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  component: Carousel,
+  title: "Data Display/Carousel",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="mx-auto w-full max-w-xs">
+      <Carousel>
+        <CarouselContent>
+          {["slide-1", "slide-2", "slide-3", "slide-4", "slide-5"].map((id, index) => (
+            <CarouselItem key={id}>
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+};

apps/storybook/src/stories/DataDisplay/Chart.stories.tsx

@@ -0,0 +1,41 @@
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@repo/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Bar, BarChart, XAxis, YAxis } from "recharts";
+
+const meta = {
+  component: ChartContainer,
+  title: "Data Display/Chart",
+  tags: ["autodocs"],
+} satisfies Meta<typeof ChartContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const chartData = [
+  { month: "Jan", desktop: 186 },
+  { month: "Feb", desktop: 305 },
+  { month: "Mar", desktop: 237 },
+  { month: "Apr", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "Jun", desktop: 214 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1, #2563eb)",
+  },
+} satisfies ChartConfig;
+
+export const Default: Story = {
+  render: () => (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <BarChart data={chartData}>
+        <XAxis dataKey="month" />
+        <YAxis />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  ),
+};

apps/storybook/src/stories/DataDisplay/Table.stories.tsx

@@ -0,0 +1,55 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@repo/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  component: Table,
+  title: "Data Display/Table",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>A list of recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>INV001</TableCell>
+          <TableCell>Paid</TableCell>
+          <TableCell>Credit Card</TableCell>
+          <TableCell className="text-right">$250.00</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>INV002</TableCell>
+          <TableCell>Pending</TableCell>
+          <TableCell>PayPal</TableCell>
+          <TableCell className="text-right">$150.00</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>INV003</TableCell>
+          <TableCell>Unpaid</TableCell>
+          <TableCell>Bank Transfer</TableCell>
+          <TableCell className="text-right">$350.00</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};

apps/storybook/src/stories/DataDisplay/Tooltip.stories.tsx

@@ -0,0 +1,26 @@
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@repo/ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  component: Tooltip,
+  title: "Data Display/Tooltip",
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover me</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>This is a tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ),
+};