web/packages/design-system/lib/components/Toasts/ToastHandler.stories.tsx

import { toast } from "./index.tsx"
import { Toast } from "./Toast.tsx"

import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { config } from "./variants.ts"
import { ToastHandler } from "./ToastHandler.tsx"
import { Button } from "../Button/Button.tsx"
import { expect, waitFor } from "storybook/test"

const meta: Meta<typeof Toast> = {
  title: "Core Components/Toast/ToastHandler",
  component: Toast,
  argTypes: {
    variant: {
      control: "select",
      type: "string",
      options: Object.keys(config.variants.variant),
      table: {
        defaultValue: { summary: "info" },
      },
    },
    message: {
      control: "text",
      type: "string",
      table: {
        defaultValue: { summary: "Toast message" },
      },
    },
  },
}

export default meta

type Story = StoryObj<typeof Toast>

export const Default: Story = {
  args: {
    variant: "info",
    message: "This is a toast",
  },
  render: (args) => {
    return <Renderer variant={args.variant} message={args.message as string} />
  },

  play: async ({ canvas, userEvent, args }) => {
    let toast = canvas.queryByRole("status")
    expect(toast).not.toBeInTheDocument()

    const showToastButton = await canvas.findByRole("button")
    await userEvent.click(showToastButton)

    toast = await canvas.findByRole(
      ["info", "success"].indexOf(args.variant) !== -1 ? "status" : "alert"
    )
    await waitFor(async () => await expect(toast).toBeVisible())

    const closeButton = await canvas.findByLabelText("Dismiss notification")
    await userEvent.click(closeButton)

    await waitFor(async () => await expect(toast).not.toBeVisible())
  },
}

const Renderer = ({
  message,
  variant,
}: {
  message: string
  variant: "info" | "success" | "warning" | "error"
  onDismiss?: () => void
}) => {
  const text = "Show Toast"
  return (
    <>
      <Button
        variant="Primary"
        onPress={() => {
          toast[variant](message)
        }}
      >
        {text}
      </Button>
      <ToastHandler />
    </>
  )
}