From e82ed197c7c89767be50b7ee7aaab1c7e9e9d3b4 Mon Sep 17 00:00:00 2001
From: lloydrichards <lloyd.d.richards@gmail.com>
Date: Sun, 15 Oct 2023 12:14:12 +0200
Subject: [PATCH] refactor(storybook): :memo: add stories for ui components

---
 src/components/ui/badge.stories.tsx           |  39 ++++++
 src/components/ui/button.stories.tsx          |  77 +++++++++++
 src/components/ui/card.stories.tsx            |  88 +++++++++++++
 src/components/ui/dialog.stories.tsx          |  60 +++++++++
 src/components/ui/menubar.stories.tsx         | 120 ++++++++++++++++++
 src/components/ui/navigation-menu.stories.tsx |  45 +++++++
 src/components/ui/sheet.stories.tsx           |  62 +++++++++
 src/components/ui/skeleton.stories.tsx        |  26 ++++
 src/components/ui/toast.stories.tsx           |  81 ++++++++++++
 9 files changed, 598 insertions(+)
 create mode 100644 src/components/ui/badge.stories.tsx
 create mode 100644 src/components/ui/button.stories.tsx
 create mode 100644 src/components/ui/card.stories.tsx
 create mode 100644 src/components/ui/dialog.stories.tsx
 create mode 100644 src/components/ui/menubar.stories.tsx
 create mode 100644 src/components/ui/navigation-menu.stories.tsx
 create mode 100644 src/components/ui/sheet.stories.tsx
 create mode 100644 src/components/ui/skeleton.stories.tsx
 create mode 100644 src/components/ui/toast.stories.tsx

diff --git a/src/components/ui/badge.stories.tsx b/src/components/ui/badge.stories.tsx
new file mode 100644
index 0000000..05b77a6
--- /dev/null
+++ b/src/components/ui/badge.stories.tsx
@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Badge } from "@/components/ui/badge";
+
+const meta: Meta<typeof Badge> = {
+  title: "ui/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Base: Story = {
+  render: (args) => <Badge {...args}>Badge</Badge>,
+  args: {},
+};
+
+export const Secondary: Story = {
+  render: (args) => <Badge {...args}>Badge</Badge>,
+  args: {
+    variant: "secondary",
+  },
+};
+
+export const Destructive: Story = {
+  render: (args) => <Badge {...args}>Badge</Badge>,
+  args: {
+    variant: "destructive",
+  },
+};
+
+export const Outline: Story = {
+  render: (args) => <Badge {...args}>Badge</Badge>,
+  args: {
+    variant: "outline",
+  },
+};
diff --git a/src/components/ui/button.stories.tsx b/src/components/ui/button.stories.tsx
new file mode 100644
index 0000000..50ca4b4
--- /dev/null
+++ b/src/components/ui/button.stories.tsx
@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Loader2, Mail } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+const meta: Meta<typeof Button> = {
+  title: "ui/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Base: Story = {
+  render: (args) => <Button {...args}>Button</Button>,
+  args: {},
+};
+
+export const Outline: Story = {
+  render: (args) => <Button {...args}>Button</Button>,
+  args: {
+    variant: "outline",
+  },
+};
+
+export const Ghost: Story = {
+  render: (args) => <Button {...args}>Button</Button>,
+  args: {
+    variant: "ghost",
+  },
+};
+
+export const Secondary: Story = {
+  render: (args) => <Button {...args}>Button</Button>,
+  args: {
+    variant: "secondary",
+  },
+};
+
+export const Destructive: Story = {
+  render: (args) => <Button {...args}>Button</Button>,
+  args: {
+    variant: "destructive",
+  },
+};
+
+export const Link: Story = {
+  render: (args) => <Button {...args}>Button</Button>,
+  args: {
+    variant: "link",
+  },
+};
+
+export const Loading: Story = {
+  render: (args) => (
+    <Button {...args}>
+      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      Button
+    </Button>
+  ),
+  args: {
+    variant: "outline",
+  },
+};
+
+export const WithIcon: Story = {
+  render: (args) => (
+    <Button {...args}>
+      <Mail className="mr-2 h-4 w-4" /> Login with Email Button
+    </Button>
+  ),
+  args: {
+    variant: "secondary",
+  },
+};
diff --git a/src/components/ui/card.stories.tsx b/src/components/ui/card.stories.tsx
new file mode 100644
index 0000000..8287763
--- /dev/null
+++ b/src/components/ui/card.stories.tsx
@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { BellRing, Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+
+const meta: Meta<typeof Card> = {
+  title: "ui/Card",
+  component: Card,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+const notifications = [
+  {
+    title: "Your call has been confirmed.",
+    description: "1 hour ago",
+  },
+  {
+    title: "You have a new message!",
+    description: "1 hour ago",
+  },
+  {
+    title: "Your subscription is expiring soon!",
+    description: "2 hours ago",
+  },
+];
+
+export const Base: Story = {
+  render: (args) => (
+    <Card {...args} className={cn("w-[380px]")}>
+      <CardHeader>
+        <CardTitle>Notifications</CardTitle>
+        <CardDescription>You have 3 unread messages.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className=" flex items-center space-x-4 rounded-md border p-4">
+          <BellRing />
+          <div className="flex-1 space-y-1">
+            <p className="text-sm font-normal leading-none">
+              Push Notifications
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Send notifications to device.
+            </p>
+          </div>
+          <Switch />
+        </div>
+        <div>
+          {notifications.map((notification, index) => (
+            <div
+              key={index}
+              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+            >
+              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+              <div className="space-y-1">
+                <p className="text-sm font-normal leading-none">
+                  {notification.title}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {notification.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">
+          <Check className="mr-2 h-4 w-4" /> Mark all as read
+        </Button>
+      </CardFooter>
+    </Card>
+  ),
+  args: {},
+};
diff --git a/src/components/ui/dialog.stories.tsx b/src/components/ui/dialog.stories.tsx
new file mode 100644
index 0000000..b9d8581
--- /dev/null
+++ b/src/components/ui/dialog.stories.tsx
@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+const meta: Meta<typeof Dialog> = {
+  title: "ui/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Base: Story = {
+  render: (args) => (
+    <Dialog {...args}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+  args: {},
+};
diff --git a/src/components/ui/menubar.stories.tsx b/src/components/ui/menubar.stories.tsx
new file mode 100644
index 0000000..8595e5d
--- /dev/null
+++ b/src/components/ui/menubar.stories.tsx
@@ -0,0 +1,120 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
+
+const meta: Meta<typeof Menubar> = {
+  title: "ui/Menubar",
+  component: Menubar,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Menubar>;
+
+export const Base: Story = {
+  render: (args) => (
+    <Menubar {...args}>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>
+            Always Show Full URLs
+          </MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  ),
+  args: {},
+};
diff --git a/src/components/ui/navigation-menu.stories.tsx b/src/components/ui/navigation-menu.stories.tsx
new file mode 100644
index 0000000..ecc43c0
--- /dev/null
+++ b/src/components/ui/navigation-menu.stories.tsx
@@ -0,0 +1,45 @@
+import Link from "next/link";
+import { Meta, StoryObj } from "@storybook/react";
+
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+
+const meta: Meta<typeof NavigationMenu> = {
+  title: "ui/NavigationMenu",
+  component: NavigationMenu,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof NavigationMenu>;
+
+export const Base: Story = {
+  render: (args) => (
+    <NavigationMenu {...args}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <Link href="/docs" legacyBehavior passHref>
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              Documentation
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink
+            className={navigationMenuTriggerStyle()}
+            href="https:www.google.com"
+          >
+            External
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  ),
+  args: {},
+};
diff --git a/src/components/ui/sheet.stories.tsx b/src/components/ui/sheet.stories.tsx
new file mode 100644
index 0000000..07dea7a
--- /dev/null
+++ b/src/components/ui/sheet.stories.tsx
@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+const meta: Meta<typeof Sheet> = {
+  title: "ui/Sheet",
+  component: Sheet,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Sheet>;
+
+export const Base: Story = {
+  render: (args) => (
+    <Sheet {...args}>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when youre done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button type="submit">Save changes</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+  args: {},
+};
diff --git a/src/components/ui/skeleton.stories.tsx b/src/components/ui/skeleton.stories.tsx
new file mode 100644
index 0000000..d9a4525
--- /dev/null
+++ b/src/components/ui/skeleton.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Skeleton } from "@/components/ui/skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "ui/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Base: Story = {
+  render: (args) => (
+    <div className="flex items-center space-x-4">
+      <Skeleton {...args} className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton {...args} className="h-4 w-[250px]" />
+        <Skeleton {...args} className="h-4 w-[200px]" />
+      </div>
+    </div>
+  ),
+  args: {},
+};
diff --git a/src/components/ui/toast.stories.tsx b/src/components/ui/toast.stories.tsx
new file mode 100644
index 0000000..95323db
--- /dev/null
+++ b/src/components/ui/toast.stories.tsx
@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Toast,
+  ToastAction,
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast";
+import { Toaster } from "@/components/ui/toaster";
+import { useToast } from "@/components/ui/use-toast";
+
+const meta: Meta<typeof Toast> = {
+  title: "ui/Toast",
+  component: Toast,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = Omit<StoryObj<typeof Toast>, "args"> & {
+  args: Omit<ToasterToast, "id">;
+};
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: string;
+  description?: string;
+  action?: ToastActionElement;
+};
+
+const ToastExample = (args: Story["args"]) => {
+  const { toast } = useToast();
+  return (
+    <div>
+      <Button
+        variant="outline"
+        onClick={() => {
+          toast(args);
+        }}
+      >
+        Show Toast
+      </Button>
+      <Toaster />
+    </div>
+  );
+};
+
+export const Simple: Story = {
+  render: (args) => <ToastExample {...args} />,
+  args: {
+    description: "Your message has been sent.",
+  },
+};
+
+export const WithTitle: Story = {
+  render: (args) => <ToastExample {...args} />,
+  args: {
+    title: "Uh oh! Something went wrong.",
+    description: "There was a problem with your request.",
+  },
+};
+
+export const WithAction: Story = {
+  render: (args) => <ToastExample {...args} />,
+  args: {
+    title: "Uh oh! Something went wrong.",
+    description: "There was a problem with your request.",
+    action: <ToastAction altText="Try again">Try again</ToastAction>,
+  },
+};
+
+export const Destructive: Story = {
+  render: (args) => <ToastExample {...args} />,
+  args: {
+    variant: "destructive",
+    title: "Uh oh! Something went wrong.",
+    description: "There was a problem with your request.",
+    action: <ToastAction altText="Try again">Try again</ToastAction>,
+  },
+};