npx storybook@latest init

also setup tailwind css for storybook

.storybook/main.ts

@@ -1,6 +1,10 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 const config: StorybookConfig = {
-  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../component/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -13,5 +17,12 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  webpackFinal: (config) => {
+    config.module?.rules?.push({
+      test: /\.css$/,
+      use: ["postcss-loader"],
+    });
+    return config;
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/react";
+import "./tailwind.css";
 
 const preview: Preview = {
   parameters: {

.storybook/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

component/Dialog.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within, waitFor } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
+import { Dialog } from "./Dialog";
+
+const meta: Meta<typeof Dialog> = {
+  /* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  component: Dialog,
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+/*
+ * See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const CloseOnSaveChanges: Story = {
+  play: async ({ canvasElement }) => {
+    // to get modal element
+    const body = within(canvasElement.ownerDocument.body);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.click(body.getByText("Edit profile"));
+
+    const nameInput = (await body.findByTestId("name")) as HTMLInputElement;
+
+    await waitFor(() => expect(() => userEvent.click(nameInput)).not.toThrow());
+
+    await userEvent.type(nameInput, "John Doe");
+
+    const usernameInput = await body.findByLabelText("Username");
+    await userEvent.clear(usernameInput);
+    await userEvent.type(usernameInput, "johndoe");
+
+    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(
+      await body.findByRole("button", { name: "Save changes" })
+    );
+
+    // 👇 Assert DOM structure
+    await expect(
+      await body.queryByTitle("Edit profile")
+    ).not.toBeInTheDocument();
+  },
+};
+
+export const OpenOnClickButton: Story = {
+  play: async ({ canvasElement }) => {
+    const body = within(canvasElement.ownerDocument.body);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.click(body.getByText("Edit profile"));
+
+    await expect(
+      await body.queryByRole("heading", { name: "Edit profile" })
+    ).toBeInTheDocument();
+  },
+};

component/Dialog.tsx

@@ -0,0 +1,65 @@
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+
+export const Dialog = () => (
+  <RadixDialog.Root>
+    <RadixDialog.Trigger asChild>
+      <button className="inline-flex h-[35px] items-center justify-center rounded-[4px] bg-white px-[15px] font-medium leading-none text-violet11 shadow-[0_2px_10px] shadow-blackA7 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none">
+        Edit profile
+      </button>
+    </RadixDialog.Trigger>
+    <RadixDialog.Portal>
+      <RadixDialog.Overlay className="fixed inset-0 bg-blackA9 data-[state=open]:animate-overlayShow" />
+      <RadixDialog.Content className="fixed left-[50%] top-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
+        <RadixDialog.Title className="m-0 text-[17px] font-medium text-mauve12">
+          Edit profile
+        </RadixDialog.Title>
+        <RadixDialog.Description className="mb-5 mt-[10px] text-[15px] leading-normal text-mauve11">
+          Make changes to your profile here. Click save when you're done.
+        </RadixDialog.Description>
+        <fieldset className="mb-[15px] flex items-center gap-5">
+          <label
+            className="w-[90px] text-right text-[15px] text-violet11"
+            htmlFor="name"
+          >
+            Name
+          </label>
+          <input
+            className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+            id="name"
+            data-testid="name"
+            defaultValue="Pedro Duarte"
+          />
+        </fieldset>
+        <fieldset className="mb-[15px] flex items-center gap-5">
+          <label
+            className="w-[90px] text-right text-[15px] text-violet11"
+            htmlFor="username"
+          >
+            Username
+          </label>
+          <input
+            className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+            id="username"
+            defaultValue="@peduarte"
+          />
+        </fieldset>
+        <div className="mt-[25px] flex justify-end">
+          <RadixDialog.Close asChild>
+            <button className="inline-flex h-[35px] items-center justify-center rounded-[4px] bg-green4 px-[15px] font-medium leading-none text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 focus:outline-none">
+              Save changes
+            </button>
+          </RadixDialog.Close>
+        </div>
+        <RadixDialog.Close asChild>
+          <button
+            className="absolute right-[10px] top-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full text-violet11 hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
+            aria-label="Close"
+          >
+            <Cross2Icon />
+          </button>
+        </RadixDialog.Close>
+      </RadixDialog.Content>
+    </RadixDialog.Portal>
+  </RadixDialog.Root>
+);

component/Tabs.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect } from "@storybook/jest";
+import { Tabs } from "./Tabs";
+
+const meta: Meta<typeof Tabs> = {
+  /* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  component: Tabs,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+/*
+ * See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const SwitchTabOnClick: Story = {
+  play: async ({ canvasElement }) => {
+    // to get modal element
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.click(
+      await canvas.findByRole("tab", { name: "Password", selected: false })
+    );
+
+    // 👇 Assert DOM structure
+    await expect(
+      await canvas.findByRole("button", {
+        name: "Change password",
+      })
+    ).toBeInTheDocument();
+  },
+};

component/Tabs.tsx

@@ -0,0 +1,117 @@
+import * as TabsRadix from "@radix-ui/react-tabs";
+
+export const Tabs = () => (
+  <TabsRadix.Root
+    className="flex w-[300px] flex-col shadow-[0_2px_10px] shadow-blackA4"
+    defaultValue="tab1"
+  >
+    <TabsRadix.List
+      className="flex shrink-0 border-b border-mauve6"
+      aria-label="Manage your account"
+    >
+      <TabsRadix.Trigger
+        className="flex h-[45px] flex-1 cursor-default select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-mauve11 outline-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black"
+        value="tab1"
+      >
+        Account
+      </TabsRadix.Trigger>
+      <TabsRadix.Trigger
+        className="flex h-[45px] flex-1 cursor-default select-none items-center justify-center bg-white px-5 text-[15px] leading-none text-mauve11 outline-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black"
+        value="tab2"
+      >
+        Password
+      </TabsRadix.Trigger>
+    </TabsRadix.List>
+    <TabsRadix.Content
+      className="grow rounded-b-md bg-white p-5 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+      value="tab1"
+    >
+      <p className="mb-5 text-[15px] leading-normal text-mauve11">
+        Make changes to your account here. Click save when you're done.
+      </p>
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
+        <label
+          className="mb-2.5 block text-[13px] leading-none text-violet12"
+          htmlFor="name"
+        >
+          Name
+        </label>
+        <input
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+          id="name"
+          defaultValue="Pedro Duarte"
+        />
+      </fieldset>
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
+        <label
+          className="mb-2.5 block text-[13px] leading-none text-violet12"
+          htmlFor="username"
+        >
+          Username
+        </label>
+        <input
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+          id="username"
+          defaultValue="@peduarte"
+        />
+      </fieldset>
+      <div className="mt-5 flex justify-end">
+        <button className="inline-flex h-[35px] cursor-default items-center justify-center rounded bg-green4 px-[15px] text-[15px] font-medium leading-none text-green11 outline-none hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7">
+          Save changes
+        </button>
+      </div>
+    </TabsRadix.Content>
+    <TabsRadix.Content
+      className="grow rounded-b-md bg-white p-5 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+      value="tab2"
+    >
+      <p className="mb-5 text-[15px] leading-normal text-mauve11">
+        Change your password here. After saving, you'll be logged out.
+      </p>
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
+        <label
+          className="mb-2.5 block text-[13px] leading-none text-violet12"
+          htmlFor="currentPassword"
+        >
+          Current password
+        </label>
+        <input
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+          id="currentPassword"
+          type="password"
+        />
+      </fieldset>
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
+        <label
+          className="mb-2.5 block text-[13px] leading-none text-violet12"
+          htmlFor="newPassword"
+        >
+          New password
+        </label>
+        <input
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+          id="newPassword"
+          type="password"
+        />
+      </fieldset>
+      <fieldset className="mb-[15px] flex w-full flex-col justify-start">
+        <label
+          className="mb-2.5 block text-[13px] leading-none text-violet12"
+          htmlFor="confirmPassword"
+        >
+          Confirm password
+        </label>
+        <input
+          className="h-[35px] shrink-0 grow rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
+          id="confirmPassword"
+          type="password"
+        />
+      </fieldset>
+      <div className="mt-5 flex justify-end">
+        <button className="inline-flex h-[35px] cursor-default items-center justify-center rounded bg-green4 px-[15px] text-[15px] font-medium leading-none text-green11 outline-none hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7">
+          Change password
+        </button>
+      </div>
+    </TabsRadix.Content>
+  </TabsRadix.Root>
+);