하나의 스토리 안에서 tab으로 구분을 하고 싶으나 어떻게 하는지 모르겠다.
•
Overview
◦
피그마와 동일한 철학과 관련된 파일, mdx로 만들기
•
Use Case
◦
autodocs로 만들어진 문서의 defaultName은 useCase로 설정
스토리 문서 꾸미기
const meta: Meta<typeof AccordionList> = {
tags: ['autodocs'], // auto docs 설정
parameters: {
docs: {
toc: {}, //
description: {
component: [descriptionMd].join('\n'),
},
subtitle: 'Displays an image that represents a user or organization',
},
},
component: AccordionList,
};
export default meta;
JavaScript
복사
mdx 문서 꾸미기
https://storybook-markdown--63e9ed2b3e64445927e6d399.chromatic.com
Markdown
복사
argTypes
case1. 여러개의 컴포넌트가 모여 사용되는 컴포넌트
1. MDX와 Story를 언제 사용하는가?
mdx는 문서를 작성할때 사용
fluent 의 문법은 옛날 문법인거 같다.
•
각 case에 해당하는 스토리를 따로따로 만든다.
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from '@fluentui/react-components';
export { Default } from './AccordionDefault.stories';
export { Collapsible } from './AccordionCollapsible.stories';
export { Controlled } from './AccordionControlled.stories';
export { Multiple } from './AccordionMultiple.stories';
export { OpenItems } from './AccordionOpenItems.stories';
export { Sizes } from './AccordionSizes.stories';
export { HeadingLevels } from './AccordionHeaders.stories';
export { Inline } from './AccordionInline.stories';
export { Disabled } from './AccordionDisabled.stories';
export { ExpandIcon } from './AccordionExpandIcon.stories';
export { ExpandIconPosition } from './AccordionExpandIconPosition.stories';
export { WithIcon } from './AccordionWithIcon.stories';
import descriptionMd from './AccordionDescription.md';
export default {
title: 'Components/Accordion',
component: Accordion,
subcomponents: {
AccordionItem,
AccordionHeader,
AccordionPanel,
},
parameters: {
actions: { argTypesRegex: '^on.*' },
docs: {
description: {
component: [descriptionMd].join('\n'),
},
},
},
argTypes: {
navigation: {
defaultValue: undefined,
control: {
type: 'select',
options: [undefined, 'linear', 'circular'],
},
},
multiple: {
defaultValue: false,
control: 'boolean',
},
collapsible: {
defaultValue: false,
control: 'boolean',
},
as: {
control: false,
},
},
};
JavaScript
복사
storybook의 autodocs활용하기
mdx 문서로 만들기
import {
Canvas,
Controls,
Description,
Meta,
Subtitle,
Story,
} from '@storybook/blocks';
import * as AvatarStories from './Avatar.stories';
# Avatar
<Meta of={AvatarStories} />
<Subtitle>Displays an image that represents a user or organization</Subtitle>
Use an avatar for attributing actions or content to specific users.
The user's name should _always_ be present when using Avatar – either printed beside the avatar or in a tooltip.
<Canvas>
<Story of={AvatarStories.Standard} />
</Canvas>
## Additional variants
### Sizes
<Description of={AvatarStories.Sizes} />
<Story of={AvatarStories.Sizes} />
### Initials
<Description of={AvatarStories.Initials} />
<Story of={AvatarStories.Initials} />
### Loading
<Description of={AvatarStories.Loading} />
<Story of={AvatarStories.Loading} />
### Playground
Interact with the component and see how it responds to the different input properties.
<Canvas>
<Story of={AvatarStories.Controls} />
</Canvas>
<Controls of={AvatarStories.Controls} />
JavaScript
복사
