migrate tests to use Storybook

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint .",
     "test": "vitest",
     "preview": "vite preview",
+    "sb": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepare": "panda codegen"

src/components/Button/Button.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { expect, fn, userEvent } from "@storybook/test";
 import { Button } from "./Button";
 
 const meta = {
@@ -19,6 +19,18 @@ export const Basic: Story = {
     type: "button",
     children: "Click",
   },
+  play: async ({ args: { onClick }, canvas, step }) => {
+    const button = canvas.getByRole("button");
+
+    await step("renders a button with text", async () => {
+      expect(button).toHaveTextContent("Click");
+    });
+
+    await step("calls onClick handler when clicked", async () => {
+      await userEvent.click(button);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  },
 };
 
 export const Submit: Story = {