Add additional stories.

package.json

@@ -36,6 +36,7 @@
     "@storybook/test": "^7.6.5",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.16",
+    "lucide-react": "^0.298.0",
     "postcss": "^8.4.32",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -51,7 +52,8 @@
     "serve": "^14.2.1",
     "storybook": "^7.6.5",
     "styled-components": "^6.1.1",
-    "tailwindcss": "^3.3.6"
+    "tailwindcss": "^3.3.6",
+    "zod": "^3.22.4"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
@@ -83,14 +85,14 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tanstack/react-table": "^8.11.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
     "react-day-picker": "^8.9.1",
     "react-hook-form": "^7.49.2",
     "tailwind-merge": "^2.1.0",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.22.4"
+    "tailwindcss-animate": "^1.0.7"
   }
 }

stories/accordion.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "src/components/ui/accordion";
+export function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other
+          components&apos; aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+const meta: Meta<typeof AccordionDemo> = {
+  component: AccordionDemo,
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionDemo>;
+
+export const Default: Story = {
+  args: {},
+};

stories/alert-dialog.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "src/components/ui/alert-dialog";
+import { Button } from "src/components/ui/button";
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AlertDialogDemo> = {
+  component: AlertDialogDemo,
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertDialogDemo>;
+
+export const Default: Story = {
+  args: {},
+};

stories/alert.stories.tsx

@@ -0,0 +1,26 @@
+import { RocketIcon } from "@radix-ui/react-icons";
+import { Meta, StoryObj } from "@storybook/react";
+
+import React from "react";
+import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
+export function AlertDemo() {
+  return (
+    <Alert>
+      <RocketIcon className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  );
+}
+const meta: Meta<typeof AlertDemo> = {
+  component: AlertDemo,
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertDemo>;
+
+export const Default: Story = {
+  args: {},
+};

stories/aspect-ratio.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { AspectRatio } from "src/components/ui/aspect-ratio";
+export function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={1 / 1} className="bg-muted">
+      <img
+        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+        alt="Photo by Drew Beamer"
+        className="rounded-md object-cover bg-cover"
+      />
+    </AspectRatio>
+  );
+}
+
+const meta: Meta<typeof AspectRatio> = {
+  component: AspectRatio,
+};
+
+export default meta;
+type Story = StoryObj<typeof AspectRatio>;
+
+export const Default: Story = {
+  args: {},
+};

stories/avatar.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "src/components/ui/avatar";
+export function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  );
+}
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AvatarDemo> = {
+  component: AvatarDemo,
+};
+
+export default meta;
+type Story = StoryObj<typeof AvatarDemo>;
+
+export const Default: Story = {
+  args: {},
+};

stories/badge.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Badge } from "src/components/ui/badge";
+
+const meta: Meta<typeof Badge> = {
+  component: () => {
+    return (
+      <div className="flex flex-col gap-2 w-32">
+        <Badge variant="default">Default</Badge>
+        <Badge variant="destructive">Destructive</Badge>
+        <Badge variant="outline">Outlined</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+      </div>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {},
+};