[WIP] Improve ProgressBar Storybook docs to be more readable

[Dogdriip]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [Component] I wrote a unit test about the implementation.
• [Component] I wrote a storybook document about the implementation.
• [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
• [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

None.

Summary

• ProgressBar Storybook 및 MDX 문서가 documentation의 기능에 집중할 수 있도록 개선합니다.

Details

Kapture.2022-12-22.at.20.22.22.mp4

• Argument controls에 대한 정보(argTypes)를 Meta(ProgressBar.stories.tsx의 default export)에서 Playground Story의 property로 옮깁니다.
  • Argument control이 필요한 곳(+ 컨트롤을 의도한 곳)은 Playground 스토리 하나입니다.
• Playground 이외의 다른 스토리(Overview, Usage*, *Variant 등)의 viewMode를 docs로 지정하고, Argument controls를 기본으로 숨깁니다.
  • 이 스토리들은 MDX 문서 내에서만 보도록 의도되었으며, Argument control을 의도하지 않았습니다.
• 타입 수정
  • Storybook 6.3에서 새로 추가된 타입을 사용합니다.
  • Meta -> ComponentMeta
  • Story -> ComponentStory

  Note Storybook 6.4(CSF 3.0 도입)부터는 모든 Story가 object가 될 예정입니다. 이에 따라 Storybook 7부터는 Story 타입은 StoryFn으로 이름이 변경되며, ComponentStory는 ComponentStoryFn이 아닌 ComponentStoryObj를 가리키게 됩니다. 향후 마이그레이션을 유의해 두어야 할 것 같습니다.

  /**
   * For the common case where a component's stories are simple components that receives args as props:
   *
   * ```tsx
   * export default { ... } as ComponentMeta<typeof Button>;
   * ```
   */
  export declare type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
  /**
   * For the common case where a (CSFv2) story is a simple component that receives args as props:
   *
   * ```tsx
   * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
   * ```
   */
  export declare type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryFn<ComponentProps<T>>;
  /**
   * For the common case where a (CSFv3) story is a simple component that receives args as props:
   *
   * ```tsx
   * const MyStory: ComponentStory<typeof Button> = {
   *   args: { buttonArg1: 'val' },
   * }
   * ```
   */
  export declare type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryObj<ComponentProps<T>>;
  /**
   * For the common case where a (CSFv2) story is a simple component that receives args as props:
   *
   * ```tsx
   * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
   * ```
   *
   * NOTE: this is an alias for `ComponentStoryFn`.
   * In Storybook v7, `ComponentStory` will alias `ComponentStoryObj`
   */
  export declare type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Story<ComponentProps<T>>;

Breaking change or not (Yes/No)

No.

References

• Improve Storybook docs structure by hide or disable controls of internal-use Stories #1083
• https://storybook.js.org/blog/component-story-format-3-0/

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9ae3b37

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 72.07%. Comparing base (85ba690) to head (9ae3b37).
Report is 749 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1084   +/-   ##
=======================================
  Coverage   72.07%   72.07%           
=======================================
  Files         223      223           
  Lines        3051     3051           
  Branches      840      840           
=======================================
  Hits         2199     2199           
  Misses        728      728           
  Partials      124      124           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[carlos-channel-io]

Suggested change

	UsageWidth.parameters = {
	UsageWidth.parameters = docsParamters

다른 스토리도 마찬가지 인데, docs 모드의 파라미터를 상단에 선언해두고 같이 쓰면 좋겠습니다.
나중에 이 작성방식이 가이드로 올라갔을때 모드별 파라미터를 한 군데서 관리하면 전체적으로 통일되고 좋을 것 같습니다.

[sungik-choi]

템플릿이 확실히 정립되면 공통 모듈에 몰아넣어도 괜찮을 거 같습니다.

[sungik-choi]

Playground = ProgressBar 도 괜찮지 않을까요?

[sungik-choi]

템플릿이 확실히 정립되면 공통 모듈에 몰아넣어도 괜찮을 거 같습니다.

[sungik-choi]

main 으로 베이스 변경했습니다.

[carlos-dev-yang]

@Dogdriip 리베이스 부탁드립니당

[Dogdriip]

@Dogdriip 리베이스 부탁드립니당

이것도 좀 오래된 PR이라 docs 다시 보고 작업해야 될 것 같은데... 일단 draft로 두겠습니다 🥲

[channeltalk]

https://desk.channel.io/#/channels/1/team_chats/groups/1237/6642ebd8629007ee123e