Started button component and storybook

src/components/Button/Button.stories.ts

@@ -1,40 +1,125 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent } from "@storybook/test";
 import { Button } from "./Button";
 
-const meta = {
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
   component: Button,
-  parameters: {
-    layout: "centered",
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "default",
+        "solid",
+        "outline",
+        "outlineGradient",
+        "accent",
+        "danger",
+        "warning",
+      ],
+    },
+    size: { control: "select", options: ["small", "medium", "large"] },
+    disabled: { control: "boolean" },
+    loading: { control: "boolean" },
   },
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Default Button",
+  },
+};
+
+export const Solid: Story = {
+  args: {
+    variant: "solid",
+    children: "Solid Button",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline Button",
+  },
+};
 
-export const Basic: Story = {
+export const OutlineGradient: Story = {
   args: {
-    type: "button",
-    children: "Click",
+    variant: "outlineGradient",
+    children: "Outline Gradient Button",
   },
-  play: async ({ args: { onClick }, canvas, step }) => {
-    const button = canvas.getByRole("button");
+};
 
-    await step("renders a button with text", async () => {
-      expect(button).toHaveTextContent("Click");
-    });
+export const Accent: Story = {
+  args: {
+    variant: "accent",
+    children: "Accent Button",
+  },
+};
 
-    await step("calls onClick handler when clicked", async () => {
-      await userEvent.click(button);
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Danger Button",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    children: "Warning Button",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    children: "Small Button",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: "medium",
+    children: "Medium Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    children: "Large Button",
+  },
+};
+
+// export const WithIcon: Story = {
+// args: {
+// children: "Button with Icon",
+// icon: <ArrowRightIcon />,
+// },
+// };
+
+export const Disabled: Story = {
+  args: {
+    children: "Disabled Button",
+    disabled: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: "Loading Button",
+    loading: true,
   },
 };
 
-export const Submit: Story = {
+export const CustomStyled: Story = {
   args: {
-    type: "submit",
-    children: "Submit",
+    children: "Custom Styled Button",
+    customStyle: { backgroundColor: "red", color: "white", padding: "1rem" },
   },
 };