import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { Div } from "@components/html";
import { Flex, Inline, InnerFlex, InnerInline, InnerStack, Stack } from "@components/layout";
import { ShareGateTheme } from "../../styling";

<Meta
    title="Components/Flex"
    id="flex"
/>

# Flex

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

<ComponentInfo
    usage={"import { Flex, Inline, Stack } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/layout/src"
/>

## Usage

Flex 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/Flexbox).

### Horizontal alignment

A flex layout can have horizontally aligned items.

<Preview>
    <Story name="horizontal">
        <Flex direction="row" gap={2}>
            <Div backgroundColor="accent-5" width={9} height={9} />
            <Div backgroundColor="alert-5" width={9} height={9} />
            <Div backgroundColor="green-5" width={9} height={9} />
        </Flex>
    </Story>
</Preview>

### Vertical alignment

A flex layout can have vertically aligned items.

<Preview>
    <Story name="vertical">
        <Flex direction="column" gap={2}>
            <Div backgroundColor="accent-5" width={9} height={9} />
            <Div backgroundColor="alert-5" width={9} height={9} />
            <Div backgroundColor="green-5" width={9} height={9} />
        </Flex>
    </Story>
</Preview>

### Gap

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

<Preview>
    <Story name="gap">
        <Flex direction="row" gap={2}>
            <Div backgroundColor="accent-5" width={9} height={9} />
            <Div backgroundColor="alert-5" width={9} height={9} />
            <Div backgroundColor="green-5" width={9} height={9} />
        </Flex>
    </Story>
</Preview>

### Align items

A flex layout can align his items along the cross axis. When the direction is "column", this refers to horizontal alignment, and when direction is "row" it refers to vertical alignment.

<Preview>
    <Story name="align items">
        <Flex alignItems="center" direction="column" gap={2}>
            <Div backgroundColor="accent-5" width={9} height={9} />
            <Div backgroundColor="alert-5" width={9} height={9} />
            <Div backgroundColor="green-5" width={9} height={9} />
        </Flex>
    </Story>
</Preview>

### Justify content

A flex layout can align his items along the main axis. When direction is "column", this refers to vertical alignment, and when direction is "row" it refers to horizontal alignment.

<Preview>
    <Story name="justify content">
        <Flex justifyContent="center" gap={2}>
            <Div backgroundColor="accent-5" width={9} height={9} />
            <Div backgroundColor="alert-5" width={9} height={9} />
            <Div backgroundColor="green-5" width={9} height={9} />
        </Flex>
    </Story>
</Preview>

### Wrap

A flex layout items can wrap on multiple rows.

<Preview scope={{ ShareGateTheme }}>
    <Story name="wrap">
        <Flex wrap="wrap" gap={1} width={18}>
            {ShareGateTheme.colors.common.accent.map(x => <Div backgroundColor={x} width={6} height={6} key={x} />)}
            {ShareGateTheme.colors.common.alert.map(x => <Div backgroundColor={x} width={6} height={6} key={x} />)}
            {ShareGateTheme.colors.common.green.map(x => <Div backgroundColor={x} width={6} height={6} key={x} />)}
        </Flex>
    </Story>
</Preview>

### Reverse

A flex layout can reverse the items order.

<Preview>
    <Story name="reverse">
        <Flex reverse gap={2}>
            <Div backgroundColor="accent-5" width={9} height={9} />
            <Div backgroundColor="alert-5" width={9} height={9} />
            <Div backgroundColor="green-5" width={9} height={9} />
        </Flex>
    </Story>
</Preview>

### Nesting

Flex layouts can be nested.

<Preview>
    <Story name="nesting">
        <Flex gap={4}>
            <Flex gap={2}>
                <Div backgroundColor="accent-5" width={9} height={9} />
                <Div backgroundColor="accent-5" width={9} height={9} />
            </Flex>
            <Flex direction="column" gap={2}>
                <Div backgroundColor="alert-5" width={9} height={9} />
                <Div backgroundColor="alert-5" width={9} height={9} />
            </Flex>
            <Flex gap={2}>
                <Div backgroundColor="green-5" width={9} height={9} />
                <Div backgroundColor="green-5" width={9} height={9} />
            </Flex>
        </Flex>
    </Story>
</Preview>

### Inline

An inline utility component is available for horizontal alignment.

<Preview>
    <Story name="inline">
        <Inline>
            <Div backgroundColor="accent-5" width={9} height={9} />
            <Div backgroundColor="alert-5" width={9} height={9} />
            <Div backgroundColor="green-5" width={9} height={9} />
        </Inline>
    </Story>
</Preview>

### Stack

A stack utility component is available for vertical alignment.

<Preview>
    <Story name="stack">
        <Stack>
            <Div backgroundColor="accent-5" width={9} height={9} />
            <Div backgroundColor="alert-5" width={9} height={9} />
            <Div backgroundColor="green-5" width={9} height={9} />
        </Stack>
    </Story>
</Preview>

## API

### Flex

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

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

### Inline

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

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

### Stack

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

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