import {
  Meta,
  Canvas,
  Story,
  ArgsTable,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Portal } from "./Portal";

<Meta title="Components/Layout/Portal" component={Portal} />

<ComponentHeading
  componentName="Portal"
  description="Creates and appends a DOM node to the end of document.body and renders a React tree into it"
  sourcePath="src/components/Portal/Portal.tsx"
  hideDemosLink
/>

Uses FloatingPortal via [@floating-ui/react](https://floating-ui.com/docs/floatingportal)

## Installation

```jsx
import { Portal } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Portal">
    <Portal>This is the Portal component</Portal>
  </Story>
</Canvas>

## API

<ArgsTable of={Portal} />