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

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

<ComponentHeading
  componentName="Flex"
  description="A Box component that uses flexbox layout"
  sourcePath="src/components/Flex/Flex.tsx"
/>

[Flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

## Installation

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

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Flex">
    <Flex>
      <Box className="p-4 border rounded">Flex Item</Box>
      <Box className="p-4 border rounded">Flex Item</Box>
      <Box className="p-4 border rounded">Flex Item</Box>
    </Flex>
  </Story>
</Canvas>

### How is this different from Stack?

Flex is the foundation for [Stack](/docs/components-layout-stack--stack),
however Stack still relies on programatically wrapping flex items with a `div`
and then placing margin on each item. For a lightweight alternative, see the
spacing demo below.

Stack provides built-in props for orientation, spacing, justification and
direction, but this can also be accomplished with classnames as seen in the
demos below.

Truthfully, there isn’t a huge advantage to using Stack over Flex right now.
However, Stack can be useful if you cannot remember or are not sure which
classnames to use.

## API

Extends `BoxProps`

<ArgsTable of={Flex} />

## Demos

Using the [utility classnames](https://tailwindcss.com/docs/flex-basis) provided
by Tailwind CSS, the Flex component can be made more robust. Here are some
examples detailing how you can layout a variety of items.

### Spacing

The `gap` [property](https://tailwindcss.com/docs/gap) is a nice way to add
space between items. You can also use `gap-x-*` or `gap-y-*` to set a gap in a
specific direction.

Gap will not add space to the beginning or end of the list of items.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Flex demo spacing">
    <Flex className="gap-4">
      <Box className="p-4 border rounded">Flex Item</Box>
      <Box className="p-4 border rounded">Flex Item</Box>
      <Box className="p-4 border rounded">Flex Item</Box>
    </Flex>
  </Story>
</Canvas>

### Alignment

Use `items-*` to adjust the
[alignment](https://tailwindcss.com/docs/align-items) of flex items.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Flex demo alignment">
    <Flex className="gap-4 items-center">
      <Box className="p-4 border rounded">Flex Item</Box>
      <Box className="p-8 border rounded">Flex Item</Box>
      <Box className="p-4 border rounded">Flex Item</Box>
    </Flex>
  </Story>
</Canvas>

### Justification

Use `justify-*` to adjust the
[justification](https://tailwindcss.com/docs/justify-content) of flex
items.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Flex demo justification">
    <Flex className="gap-4 justify-between">
      <Box className="p-4 border rounded">Flex Item</Box>
      <Box className="p-4 border rounded">Flex Item</Box>
      <Box className="p-4 border rounded">Flex Item</Box>
    </Flex>
  </Story>
</Canvas>

### Direction

By default, flex items are rendered inline within a row, but there are
classnames you can use to change the
[direction](https://tailwindcss.com/docs/flex-direction) in which items render.

`flex-row`
`flex-row-reverse`
`flex-col`
`flex-col-reverse`

<Canvas withSource={SourceState.OPEN}>
  <Story name="Flex demo direction">
    <Flex className="gap-4 flex-col-reverse">
      <Box className="p-4 border rounded">Flex Item 1</Box>
      <Box className="p-4 border rounded">Flex Item 2</Box>
      <Box className="p-4 border rounded">Flex Item 3</Box>
    </Flex>
  </Story>
</Canvas>