refactor(storybook): 📝 add stories for ui components

lloydrichards · Oct 15, 2023 · e82ed19 · e82ed19
1 parent ccab81f
commit e82ed19
Show file tree

Hide file tree

Showing 9 changed files with 598 additions and 0 deletions.
diff --git a/src/components/ui/badge.stories.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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: {},
+};