import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Panel } from "../Panel";
import { Grid } from "./Grid";

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

<ComponentHeading
  componentName="Grid"
  description="A container to create layouts with CSS grid"
  sourcePath="src/components/Grid/Grid.tsx"
/>

```jsx
import { Grid } from "@aptible/arrow-ds";
```

<Preview withSource={SourceState.OPEN}>
  <Story name="Grid">
    <Grid columns={["repeat(2, 1fr)"]} gap="24px">
      <Grid.Item column="1">
        <Panel className="p-4">Grid item</Panel>
      </Grid.Item>
      <Grid.Item column="2">
        <Panel className="p-4">Grid item</Panel>
      </Grid.Item>
    </Grid>
  </Story>
</Preview>

## Props

Both `Grid` and `Grid.Item` extend `BoxProps`.

### Grid

<Props of={Grid} />

### Grid.Item

<Props of={Grid.Item} />

## Demos

### Explicit columns, implicit rows

CSS grid layout uses a concept of explicit and implicit grids. This is a
key concept that you should be aware of when creating a grid, otherwise
you could end up with rows or columns that you didn’t expect.

Explicit grids are created when you define the layout with the
`grid-template-rows`, `grid-template-columns`, and `grid-template-areas`
properties. Implicit grids are automatically generated by the grid
container whenever grid items are positioned outside of the explicit
grid.

You’ll notice that in the code example below, the columns are being set
explicitly `columns={["25%", "1fr"]}`, yet `rows` are not. Grid items
can still be given a row despite no rows being defined on the Grid
component itself. Here, the implicit rows use a track size of auto,
which is content-based, meaning the height of each row will vary to
accomodate the content inside of the grid item.

<Preview withSource={SourceState.OPEN}>
  <Story name="Grid with explicit columns">
    <Grid columns={["25%", "1fr"]} gap="24px">
      <Grid.Item column="1 / -1" row="1">
        <Panel className="p-4">Grid item</Panel>
      </Grid.Item>
      <Grid.Item column="1 / 2" row="2">
        <Panel className="p-4">Grid item</Panel>
      </Grid.Item>
      <Grid.Item column="2 / -1" row="2">
        <Panel className="p-8">Grid item</Panel>
      </Grid.Item>
      <Grid.Item column="2 / -1" row="3">
        <Panel className="p-8">Grid item</Panel>
      </Grid.Item>
      <Grid.Item column="2 / -1" row="4">
        <Panel className="p-8">Grid item</Panel>
      </Grid.Item>
      <Grid.Item column="1 / -1" row="5">
        <Panel className="p-4">Grid item</Panel>
      </Grid.Item>
    </Grid>
  </Story>
</Preview>

### Named gridlines

Sometimes it’s easier to place items on the grid when the rows or
columns are named. In this example, a two column layout is configured
and each of the grid areas have been named `sidebar` and `main`. Now
when placing the grid items, the name areas can be used instead of the
column numbers.

You can assign some or all of the lines in the grid a name when defining
the grid with the `grid-template-rows` and `grid-template-columns`
properties. The names can be anything you want, but the general
convention is to put the names inside square brackets.

<Preview withSource={SourceState.OPEN}>
  <Story name="Grid with named gridlines">
    <Grid columns={["[sidebar] 25%", "[main] 1fr"]} gap="24px">
      <Grid.Item area="sidebar">
        <Panel className="p-8">Grid item</Panel>
      </Grid.Item>
      <Grid.Item area="main">
        <Panel className="p-8">Grid item</Panel>
      </Grid.Item>
    </Grid>
  </Story>
</Preview>