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

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

<ComponentHeading
  componentName="Frame"
  description="Used to frame the page using CSS grid layout"
  sourcePath="src/components/Frame/Frame.tsx"
/>

There should only be one frame component rendered per route. Frames should not
be nested within each other.

Children passed to `Frame` should be the `Frame.Area` component with a required
`name` defined.

`Frame.Area` components provide layout positioning where presentational or other
layout components can be rendered. No styles or classnames should be passed onto
`Frame.Area`. Padding should be defined on child components of `Frame.Area`.

The order of `Frame.Area` children do not matter because each area component is
assigned to a grid area in CSS. However, logically speaking, the order areas
should follow the same pattern.

Appbar and topbar areas should always render those respective components. The
main area should render the page’s main content, which generally includes a
`ScrollPane`, but can include a more complex layout depending on the
requirements. There are a variety of ways to display content within the main
area; see templates for more detailed examples.

## Installation

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

export const NavBar = () => (
  <Flex
    className="bg-gray-100 justify-center items-center text-gray-800 h-full w-15 border-r"
    style={{ width: "60px" }}
  >
    navbar
  </Flex>
);

export const AppBar = () => (
  <Flex className="bg-gray-900 items-center text-gray-400 h-appbar w-full px-8">
    appbar
  </Flex>
);

export const Main = () => (
  <Flex className="bg-gray-100 text-gray-800 h-full w-full p-8">main</Flex>
);

export const BottomBar = () => (
  <Flex className="bg-white border-t text-gray-800 w-full p-8">bottombar</Flex>
);

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Frame">
    <Frame>
      <Frame.Area name="appbar">
        <AppBar />
      </Frame.Area>
      <Frame.Area name="main">
        <ScrollPane>
          <Main />
        </ScrollPane>
      </Frame.Area>
    </Frame>
  </Story>
</Canvas>

## API

### Frame

`children` are required.

### Frame.Area

`children` and `name` are required.

<ArgsTable of={Frame.Area} />

## Demos

### Basic

The basic layout shown here is likely the bare minimum that a page should have.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Frame basic">
    <Frame>
      <Frame.Area name="appbar">
        <AppBar />
      </Frame.Area>
      <Frame.Area name="main">
        <ScrollPane>
          <Main />
        </ScrollPane>
      </Frame.Area>
    </Frame>
  </Story>
</Canvas>

### With a topbar

The topbar area is generally used for the TopBar component, which contains
breadcrumbs and different page-level actions. This is the most common layout.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Frame topbar">
    <Frame>
      <Frame.Area name="appbar">
        <AppBar />
      </Frame.Area>
      <Frame.Area name="topbar">
        <TopBar leftSlot="topbar" />
      </Frame.Area>
      <Frame.Area name="main">
        <ScrollPane>
          <Main />
        </ScrollPane>
      </Frame.Area>
    </Frame>
  </Story>
</Canvas>

### With a bottombar

The bottombar area was introduced to display a cookie consent banner within
comply-ui. The bottombar area currently has no use outside of that.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Frame bottombar">
    <Frame>
      <Frame.Area name="appbar">
        <AppBar />
      </Frame.Area>
      <Frame.Area name="topbar">
        <TopBar leftSlot="topbar" />
      </Frame.Area>
      <Frame.Area name="main">
        <ScrollPane>
          <Main />
        </ScrollPane>
      </Frame.Area>
      <Frame.Area name="bottombar">
        <BottomBar />
      </Frame.Area>
    </Frame>
  </Story>
</Canvas>

### With a navbar

The navbar area is used to display additional app-wide navigation controls
horizontally on the left-side of the frame. It can be used with or without the
appbar area.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Frame navbar">
    <Frame>
      <Frame.Area name="navbar">
        <NavBar />
      </Frame.Area>
      <Frame.Area name="appbar">
        <AppBar />
      </Frame.Area>
      <Frame.Area name="topbar">
        <TopBar leftSlot="topbar" />
      </Frame.Area>
      <Frame.Area name="main">
        <ScrollPane>
          <Main />
        </ScrollPane>
      </Frame.Area>
    </Frame>
  </Story>
</Canvas>

### All areas

This example just shows all of the possible areas in one layout.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Frame all">
    <Frame>
      <Frame.Area name="navbar">
        <NavBar />
      </Frame.Area>
      <Frame.Area name="appbar">
        <AppBar />
      </Frame.Area>
      <Frame.Area name="topbar">
        <TopBar leftSlot="topbar" />
      </Frame.Area>
      <Frame.Area name="main">
        <ScrollPane>
          <Main />
        </ScrollPane>
      </Frame.Area>
      <Frame.Area name="bottombar">
        <BottomBar />
      </Frame.Area>
    </Frame>
  </Story>
</Canvas>