import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Div } from "@components/html";
import { Grid, InnerGrid, fitContent, minmax, repeat } from "@components/layout";
import { ShareGateTheme } from "../../styling";

<Meta
    title="Components/Grid"
    id="grid"
/>

# Grid

<Tagline>A layout container using grid.</Tagline>

<ComponentInfo
    usage={"import { Grid, repeat, minmax, fitContent } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/layout/src"
/>

## Usage

Grid layout offer a lot of options to solve a bunch of use cases. This page only showcase a few use cases. For a thorough documentation, please have a look at [MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids).

### Areas

A grid can define explicit sections with areas.

<Preview>
    <Story name="areas">
        <Grid
            areas={["a  a", "b c"]}
            gap={2}
            height={10}
        >
            <Div gridArea="a" backgroundColor="accent-5" />
            <Div gridArea="b" backgroundColor="alert-5" />
            <Div gridArea="c" backgroundColor="green-5" />
        </Grid>
    </Story>
</Preview>

### Template columns

A grid can define explicit columns (and rows). A value can be a grid length value or an Orbit spacing scale value.

<Preview>
    <Story name="template columns">
        <Grid
            templateColumns={[9, 7, "1fr"]}
            gap={2}
            height={5}
        >
            <Div backgroundColor="accent-5" />
            <Div backgroundColor="alert-5" />
            <Div backgroundColor="green-5" />
        </Grid>
    </Story>
</Preview>

### Auto columns

A grid can define the size of implicitly created columns. A value can be a grid length value or an Orbit spacing scale value.

<Preview>
    <Story name="auto columns">
        <Grid
            autoColumns="1fr"
            gap={2}
            height={10}
        >
            <Div gridColumn={2} backgroundColor="accent-5" />
            <Div backgroundColor="alert-5" />
            <Div backgroundColor="green-5" />
        </Grid>
    </Story>
</Preview>

### Gap

A grid layout can have a gap between his columns and rows. `columnGap` and `rowGap` are also available to specify a gap for a single axis.

<Preview>
    <Story name="gap">
        <Grid
            templateColumns="1fr 1fr"
            gap={2}
            height={10}
        >
            <Div backgroundColor="accent-5" />
            <Div backgroundColor="alert-5" />
            <Div backgroundColor="green-5" />
            <Div backgroundColor="neutral-5" />
        </Grid>
    </Story>
</Preview>

### Column spanning

A grid item can span over multiple columns.

<Preview>
    <Story name="column span">
        <Grid
            templateColumns="1fr 1fr 1fr"
            gap={2}
            height={10}
        >
            <Div backgroundColor="accent-5" />
            <Div backgroundColor="alert-5" />
            <Div backgroundColor="green-5" />
            <Div gridColumnSpan={3} gridRow={2} backgroundColor="neutral-5" />
        </Grid>
    </Story>
</Preview>

### Nesting

Grids can be nested.

<Preview>
    <Story name="nesting">
        <Grid
            templateRows={[5, 5]}
            gap={2}
        >
            <Grid templateColumns={[9, "auto"]}>
                <Div backgroundColor="accent-5" />
                <Div backgroundColor="alert-5" />
            </Grid>
            <Grid templateColumns={["auto", 14]}>
                <Div backgroundColor="green-5" />
                <Div backgroundColor="neutral-5" />
            </Grid>
        </Grid>
    </Story>
</Preview>

### Repeat

A custom `repeat` function is available to support Orbit spacing scale values. However, if you prefer, you can use the [native CSS repeat function](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat())

<Preview scope={{ ShareGateTheme }}>
    <Story name="repeat function">
        <Grid
            templateColumns={repeat("auto-fit", 7)}
            autoRows={7}
            gap={2}
        >
            {ShareGateTheme.colors.common.purple.map(x => <Div backgroundColor={x} key={x} />)}
            {ShareGateTheme.colors.common.alert.map(x => <Div backgroundColor={x} key={x} />)}
            {ShareGateTheme.colors.common.green.map(x => <Div backgroundColor={x} key={x} />)}
        </Grid>
    </Story>
</Preview>

### Minmax

A custom `minmax` function is available to support Orbit spacing scalue values. However, if you prefer, you can use the [native CSS minmax function](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax())

<Preview>
    <Story name="minmax function">
        <Grid
            templateColumns={[minmax(9, "1fr"), 10, minmax(9, "1fr")]}
            gap={2}
            height={5}
        >
            <Div backgroundColor="accent-5" />
            <Div backgroundColor="alert-5" />
            <Div backgroundColor="green-5" />
        </Grid>
    </Story>
</Preview>

### Fit-content

<Preview>
    <Story name="fit-content function">
        <Grid
            templateColumns={[fitContent(9), fitContent(9), "1fr"]}
            gap={2}
            alignItems="center"
            color="alias-static-white"
        >
            <Div backgroundColor="alias-accent" padding={1}>Mars</Div>
            <Div backgroundColor="alias-alert" padding={1}>Pluto</Div>
            <Div backgroundColor="alias-success" padding={1}>Jupiter</Div>
        </Grid>
    </Story>
</Preview>

## API

### Grid

<ComponentInfo
    usage={"import { Grid } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerGrid.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerGrid} sort="alpha" />
