import { Canvas, Meta, Source, Story } from "@storybook/blocks";
import { WithCustomViewport } from "./toast.stories";

import * as ToastStories from "./toast.stories.tsx";

<Meta of={ToastStories} />

# Toast

Use this to display small piece of information.

<Canvas of={ToastStories.Default} />

# Usage

Wrap your app with the `ToastProvider` and trigger a toast by calling the `publish` function of the toast provider context

```typescript
const { publish } = useToast();
publish({
  title: "Toast Title Text",
  description: "Toast Descripton Text",
  closeLabel: "Clost button aria label",
  duration: 5000, // Duration in ms
  icon: <Icons.Success color="$currentColor" />, // Close icon
});
```

## Remove Toast

It is also possible to remove a published toast to e.g. prevent publishing multiple of the same toast.
In the example below we're storing the removal function returned by `publish` in a `ref` and call it before publishing a new toast.

```jsx
const { publish } = useToast();
const removeToastFnRef = useRef<(() => void) | null>(null);

return (
  <Button
    onClick={() => {
      removeToastFnRef.current?.();
      removeToastFnRef.current = publish({
        // toast arguments
      });
    }}
    text="Publish Toast"
  />
);
```

## Custom Viewport

A custom viewport can be rendered wherever desired. This can be useful when you want to e.g control the render context/stack

```jsx
import { ToastViewport } from "@chromia/ui-kit"

<SomewhereInConsumingApplication>
  <ToastViewport>
</SomewhereInConsumingApplication>
```

## Positioning

To control the position of where the toasts will appear you can set the `position` prop of the `ToastProvider`.
`position` can be set to `"topLeft" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight"`.

## Variants

The toast has different variants which are set with the `variant` prop. Currently variants are `success` and `warning`.
If no variant is defined the toast will be rendered with default styling.