import { ArgTypes, Canvas, Story } from '@storybook/addon-docs'
import {
  LegacyHStack,
  LegacyVStack,
  LegacyStack,
  LegacyStackItem,
  LegacySpacer,
} from '~/src/components/LegacyStack'
import * as LegacyStackStories from './LegacyStack.stories'

# LegacyStack

> **⚠️ Deprecation Warning**
>
> [Please use `Stack` instead.](?path=/docs/components-stack--docs) `LegacyStack` is deprecated. It is no longer supported for updates and may be removed in the next major version.

## Overview

Stack은 flex layout을 제공하는 컴포넌트입니다.

가로 방향의 flex container인 `HStack`, 세로 방향의 flex container인 `VStack`이 container 역할을 합니다.

Flexbox 내의 각 item을 `StackItem`으로 구성합니다. Flex layout 내에서 각 item의 weight, base size, item 간의 spacing을 컨트롤할 수 있습니다.

<Canvas of={LegacyStackStories.Overview} />

## Usage

- `Stack` 컨테이너는 parent를 가득 채웁니다.
- `Stack`의 direct child로 `StackItem` 컴포넌트나, `StackItem`에 스타일링이 적용된 컴포넌트를 지정합니다. `Spacer`와 같이 `StackItem`에 preset이 적용된 컴포넌트도 지정 가능합니다.
- `StackItem`의 child가 다시 parent를 가득 채우도록 합니다. 이를 통해 flex layout에 관한 사항은 `Stack` 컴포넌트들이 책임지게 됩니다.

```tsx
<HStack>
  <StackItem>{ ... }</StackItem>
  <StackItem>{ ... }</StackItem>
  <Spacer />
  <StackItem>{ ... }</StackItem>
</HStack>
```

### Direction

가로 방향의 flex container인 `HStack` (**horizontal** stack) 과, 세로 방향의 flex container인 `VStack` (**vertical** stack)을 제공합니다.

기본 컴포넌트인 `Stack`에 `direction` prop을 사용하여 방향을 결정할 수 있으나, 방향이 고정된 경우에는 `HStack`과 `VStack`을 바로 이용하는 것이 좋습니다.

<Canvas of={LegacyStackStories.DirectionHorizontal} />

<Canvas of={LegacyStackStories.DirectionVertical} />

### Alignment

Flex container의 **주 방향** (`HStack`은 가로, `VStack`은 세로) 의 정렬과 **보조 방향** (`HStack`은 세로, `VStack`은 가로) 의 정렬을 조절할 수 있습니다. CSS에서 주 방향과 보조 방향은 각각 `justify`와 `align` property에 해당합니다. `Stack` 컴포넌트에서도 `justify`, `align` prop을 통해 주 방향과 보조 방향 정렬을 결정합니다.

기본적으로, `Stack` container에 지정하는 prop이 모든 child의 기본값이 됩니다. 각 `StackItem`에도 `justify`, `align` prop을 지정하여 parent `Stack`의 기본값을 overriding할 수 있습니다.

<Canvas of={LegacyStackStories.AlignmentJustify} />

<Canvas of={LegacyStackStories.AlignmentAlign} />

### Spacing

`Stack` 컴포넌트의 `spacing` prop으로 item 간의 기본 간격을 조정합니다. `StackItem`에 `marginBefore`, `marginAfter` prop으로 기본 간격을 오버라이딩할 수 있습니다.

<Canvas of={LegacyStackStories.Spacing} />

### Weight

Flex layout의 특징은, container의 크기에 맞춰 item의 크기가 적절하게 늘어나거나 줄어드는 것입니다. 각 item이 container에 크기에 맞춰 늘어나는 비율을 weight로 지정할 수 있습니다.

다음은 자주 사용되는 패턴에서의 사용례입니다.

- Item 하나가 container의 여유 공간을 모두 차지하는 경우입니다. 이 경우, 해당 item에게 `grow shrink weight={1}` prop을 지정합니다.

<Canvas of={LegacyStackStories.Expanded} />

- CSS의 `justify-content: space-between`과 같이, item 사이에 공간을 두고자 하는 경우가 있습니다. 이 경우에는 `<Spacer />` 컴포넌트를 활용합니다. `Spacer`는 기본적으로 `grow shrink weight={1}` 을 가진 빈 `StackItem`입니다.

<Canvas of={LegacyStackStories.WeightSpacer} />

- Item이 container의 크기와 무관하게 (특히, container 크기가 충분하지 않은 경우) 일정한 크기를 차지하고자 하는 경우, 기본값인 `grow={false} shrink={false} weight={0}` prop을 지정합니다. 그리고, 의도하는 크기를 `size` prop으로 지정합니다.

<Canvas of={LegacyStackStories.WeightFixed} />

## API

### Stack

<ArgTypes of={LegacyStack} />

### HStack

<ArgTypes of={LegacyHStack} />

### VStack

<ArgTypes of={LegacyVStack} />

### StackItem

<ArgTypes of={LegacyStackItem} />

### Spacer

<ArgTypes of={LegacySpacer} />

## Version

- Available since v1.0.0-next-v1.119