Update UI component stories

codefastlabs · Mar 23, 2024 · b91d959 · b91d959
1 parent 2a2441c
commit b91d959
Show file tree

Hide file tree

Showing 45 changed files with 4,847 additions and 104 deletions.
diff --git a/apps/docs/stories/accordion.stories.tsx b/apps/docs/stories/accordion.stories.tsx
@@ -16,14 +16,17 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/* -----------------------------------------------------------------------------
+ * Story: Default
+ * -------------------------------------------------------------------------- */
+
 export const Default: Story = {
   args: {
     type: "single",
     collapsible: true,
-    className: "w-96",
   },
   render: (args) => (
-    <Accordion {...args}>
+    <Accordion className="w-96" {...args}>
       <AccordionItem value="item-1">
         <AccordionTrigger>Is it accessible?</AccordionTrigger>
         <AccordionContent>

diff --git a/apps/docs/stories/alert-dialog.stories.tsx b/apps/docs/stories/alert-dialog.stories.tsx
@@ -22,6 +22,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/* -----------------------------------------------------------------------------
+ * Story: Default
+ * -------------------------------------------------------------------------- */
+
 export const Default: Story = {
   render: (args) => (
     <AlertDialog {...args}>

diff --git a/apps/docs/stories/alert.stories.tsx b/apps/docs/stories/alert.stories.tsx
@@ -22,6 +22,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/* -----------------------------------------------------------------------------
+ * Story: Default
+ * -------------------------------------------------------------------------- */
+
 export const Default: Story = {
   render: (args) => (
     <Alert {...args}>
@@ -34,12 +38,13 @@ export const Default: Story = {
   ),
 };
 
+/* -----------------------------------------------------------------------------
+ * Story: Destructive
+ * -------------------------------------------------------------------------- */
+
 export const Destructive: Story = {
-  args: {
-    variant: "destructive",
-  },
   render: (args) => (
-    <Alert {...args}>
+    <Alert variant="destructive" {...args}>
       <ExclamationTriangleIcon className="size-4" />
       <AlertTitle>Error</AlertTitle>
       <AlertDescription>

diff --git a/apps/docs/stories/aspect-ratio.stories.tsx b/apps/docs/stories/aspect-ratio.stories.tsx
@@ -12,14 +12,14 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/* -----------------------------------------------------------------------------
+ * Story: Default
+ * -------------------------------------------------------------------------- */
+
 export const Default: Story = {
-  args: {
-    ratio: 16 / 9,
-    className: "bg-muted",
-  },
   render: (args) => (
     <div className="w-[450px]">
-      <AspectRatio {...args}>
+      <AspectRatio ratio={16 / 9} className="bg-muted" {...args}>
         <Image
           src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
           alt="Photo by Drew Beamer"

diff --git a/apps/docs/stories/avatar.stories.tsx b/apps/docs/stories/avatar.stories.tsx
@@ -0,0 +1,25 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Avatar, AvatarFallback, AvatarImage } from "@codefast/ui/avatar";
+
+const meta = {
+  component: Avatar,
+  tags: ["autodocs"],
+  title: "UIs/Avatar",
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/* -----------------------------------------------------------------------------
+ * Story: Default
+ * -------------------------------------------------------------------------- */
+
+export const Default: Story = {
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarImage src="https://avatars.githubusercontent.com/u/13298232?v=4" />
+      <AvatarFallback>VP</AvatarFallback>
+    </Avatar>
+  ),
+};
diff --git a/apps/docs/stories/badge.stories.tsx b/apps/docs/stories/badge.stories.tsx
@@ -21,26 +21,42 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/* -----------------------------------------------------------------------------
+ * Story: Default
+ * -------------------------------------------------------------------------- */
+
 export const Default: Story = {
   args: {
     children: "Badge",
   },
 };
 
+/* -----------------------------------------------------------------------------
+ * Story: Secondary
+ * -------------------------------------------------------------------------- */
+
 export const Secondary: Story = {
   args: {
     variant: "secondary",
     children: "Secondary Badge",
   },
 };
 
+/* -----------------------------------------------------------------------------
+ * Story: Destructive
+ * -------------------------------------------------------------------------- */
+
 export const Destructive: Story = {
   args: {
     variant: "destructive",
     children: "Destructive Badge",
   },
 };
 
+/* -----------------------------------------------------------------------------
+ * Story: Outline
+ * -------------------------------------------------------------------------- */
+
 export const Outline: Story = {
   args: {
     variant: "outline",