import type { Meta, StoryFn, StoryObj } from '@storybook/react'
import { Button } from '~/src/components/Button'
import { Text } from '~/src/components/Text'
import { LegacyHStack } from './LegacyHStack'
import { LegacySpacer } from './LegacySpacer'
import { LegacyStack, type LegacyStackProps } from './LegacyStack'
import mdx from './LegacyStack.mdx'
import { LegacyStackItem } from './LegacyStackItem'
import { LegacyVStack } from './LegacyVStack'
import type { AxisAlignment } from './types'
const meta: Meta<
LegacyStackProps & {
containerSize: number
}
> = {
component: LegacyStack,
parameters: {
docs: {
page: mdx,
},
},
argTypes: {
containerSize: {
control: {
type: 'range',
min: 400,
max: 1200,
step: 10,
},
},
direction: {
control: {
type: 'radio',
},
options: ['horizontal', 'vertical'],
},
justify: {
control: {
type: 'radio',
},
options: ['start', 'center', 'end', 'stretch'],
},
align: {
control: {
type: 'radio',
},
options: ['start', 'center', 'end', 'stretch'],
},
spacing: {
control: {
type: 'range',
min: 0,
max: 32,
step: 4,
},
},
},
tags: ['!autodocs'],
}
export default meta
const Item = ({
size,
fixedSize,
direction,
}: {
size: number
fixedSize: boolean
direction: 'horizontal' | 'vertical'
}) => {
return (
)
}
interface StackPreviewProps {
containerSize: number
/* Stack Props */
direction: 'horizontal' | 'vertical'
justify: AxisAlignment
align: AxisAlignment
spacing: number
/* Item Props */
itemJustifies: (AxisAlignment | undefined)[]
itemAligns: (AxisAlignment | undefined)[]
itemSizes: (number | undefined)[]
itemWeights: (number | undefined)[]
itemGrows: (boolean | undefined)[]
itemShrinks: (boolean | undefined)[]
itemMarginBefores: (number | undefined)[]
itemMarginAfters: (number | undefined)[]
}
const Template: StoryFn = ({
containerSize,
direction,
justify,
align,
spacing,
itemJustifies,
itemAligns,
itemSizes,
itemWeights,
itemGrows,
itemShrinks,
itemMarginBefores,
itemMarginAfters,
}: StackPreviewProps) => (
<>
{[200, 400, 300, 100].map((size, i) => (
)
export const Primary: StoryObj = {
render: Template,
args: {
containerSize: 800,
direction: 'horizontal',
justify: 'start',
align: 'start',
spacing: 0,
itemJustifies: [],
itemAligns: [],
itemSizes: [120, 240, 180, 120],
itemWeights: [],
itemGrows: [],
itemShrinks: [],
itemMarginBefores: [],
itemMarginAfters: [],
},
}
export const Overview: StoryFn<{}> = () => (
스택에 대해 더 자세히 알아보세요.
스택은 flex layout을 서술하는 컴포넌트입니다. 스택과 함께라면 뭐든지
만들 수 있어요. 누가 만들었는지는 모르겠지만, 정말 잘 만든 컴포넌트에요.
FormControl과 함께 싸드세요!
)
export const DirectionHorizontal: StoryObj<{}> = {
render: () => (
Item 1
Item 2
Item 3
Item 4
),
name: 'Horizontal stack',
}
export const DirectionVertical: StoryObj<{}> = {
render: () => (
Item 1
Item 2
Item 3
Item 4
),
name: 'Vertical stack',
}
export const AlignmentJustify: StoryObj<{}> = {
render: () => (
justify = "start"
Item 1
Item 2
Item 3
Item 4
justify = "center"
Item 1
Item 2
Item 3
Item 4
justify = "end"
Item 1
Item 2
Item 3
Item 4
),
name: 'Alignment (justify)',
}
export const AlignmentAlign: StoryObj<{}> = {
render: () => (
align = "start"
Item 1
Item 2
Item 3
Item 4
align = "center"
Item 1
Item 2
Item 3
Item 4
align = "end"
Item 1
Item 2
Item 3
Item 4
align = "stretch"
Item 1
Item 2
Item 3
Item 4
),
name: 'Alignment (align)',
}
export const Spacing: StoryFn<{}> = () => (
Item 1
Item 2
Item 3
Item 4
)
export const Expanded: StoryFn<{}> = () => (
Item 1
Item 2
Item 3 (Expanded)
Item 4
)
export const WeightSpacer: StoryObj<{}> = {
render: () => (
Item 1
Item 2
),
name: 'Spacer',
}
export const WeightFixed: StoryObj<{}> = {
render: () => (
Item 1
Item 2
),
name: 'Fix-sized item',
}