Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve Storybook docs structure by hide or disable controls of internal-use Stories #1083

Open
Dogdriip opened this issue Dec 22, 2022 · 2 comments
Open

Improve Storybook docs structure by hide or disable controls of internal-use Stories #1083

Dogdriip opened this issue Dec 22, 2022 · 2 comments
Labels
documentation Issue or PR that improvements or additions to documentation help wanted Issue or PR that extra attention is needed

Comments

@Dogdriip
Copy link
Contributor

Description

Storybook MDX 문서 내부적으로 사용되는 Story가 Storybook 문서 구조(Sidebar 등)에 보이지 않아야 합니다.

Reasons for suggestion

image

image

  • MDX 문서에서 size나 color 등 여러 variant를 보여주고자 만들어 둔 Story가 있습니다.
  • 이 Story에는 하나의 컴포넌트가 여러 개 들어가 있어, Storybook의 Controls 등이 동작하지 않습니다.
    • image
  • 또한 MDX 문서 내에서 Docs 용도로만 사용되는 것을 의도했기에, 해당 Story를 Canvas view에서 단독으로 보거나 Controls를 조작하는 등의 behaviour는 의도하지 않은 유저 행동입니다.
  • 따라서 MDX 문서 내에서만 사용할 용도로 만든 Story는 Storybook 트리 구조에 노출되지 않아야 하고, 적어도 해당 Story는 동작하지 않고 단순히 Canvas view만을 위해 만들어진 Story라는 것을 명시해야 합니다.

Proposed solution

TODO

References
@Dogdriip Dogdriip added the status:need triage Issue or PR that need triage attention label Dec 22, 2022
@Dogdriip Dogdriip moved this to Future in Bezier React Dec 22, 2022
@Dogdriip Dogdriip added documentation Issue or PR that improvements or additions to documentation help wanted Issue or PR that extra attention is needed and removed status:need triage Issue or PR that need triage attention labels Dec 22, 2022
@Dogdriip Dogdriip mentioned this issue Dec 22, 2022
Closed
9 tasks
@Dogdriip
Copy link
Contributor Author

Screenshot 2022-12-22 at 21 24 07

Screenshot 2022-12-22 at 21 24 11

장기적으로는 위 사진과 같은 스토리 구조가 되면 좋겠네요... https://storybook.js.org/

@sungik-choi sungik-choi moved this from 🧊 Pending to 📦 Backlog in Bezier React Jan 17, 2023
@dimitrieh
Copy link

Would love to see this get picked up by the devs :)

@sungik-choi sungik-choi mentioned this issue Apr 3, 2023
Closed
@sungik-choi sungik-choi mentioned this issue May 11, 2023
Open
@yangwooseong yangwooseong mentioned this issue Oct 4, 2023
Merged
6 tasks
yangwooseong added a commit that referenced this issue Oct 27, 2023
@yangwooseong
Bump @storybook/react to ^7.4.2 (#1656)
572ac77 
<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

Fixes #1255 

## Summary
<!-- Please brief explanation of the changes made -->

- 스토리북 메이저 버전을 7로 올리고 브레이킹 체인지에 대응합니다.

## Details
<!-- Please elaborate description of the changes -->

버전 업에 따른 변경 사항은 다음과 같습니다.
- `main` 파일 마이그레이션 (codemod 사용), ts 마이그레이션하여 스토리북에서 제공하는 타입 활용
([#](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#esm-format-in-mainjs)).
`preview` 파일도 themeProvider 분리하고 ts 마이그레이션
- `getTitle` 유틸을 활용해서 `component/.../lastFolderName`형식으로 타이틀 얻어오던 것을 제거.
스토리북 7버전 부터는 동적으로 타이틀을 계산하는 것을 허용하지 않고 있고, 명시적으로 지정하지 않으면 알아서 경로를 잘 보여주게
됩니다.
([#](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#titles-are-statically-computed))
  - CSF2 -> CSF3으로 변경 (codemod 사용)
- `control` 의 `option` 필드가 `control` 아래에 있었던 것을 하나 올려서 같은 depth 가 되도록 변경
([#](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions))
  - default export 되는 meta 의 타입 단언을 타입 선언으로 변경
  - 이제 docs 가 스토리마다 있는 것이 아니라 컴포넌트 단위로 존재하게 됩니다.

이후 pr 에서 아래 이슈들을 차례대로 다루면 될 것 같습니다.

#1083
#1000

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

- No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

- https://storybook.js.org/docs/7.0/react/migration-guide#page-top
-
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#migration
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Issue or PR that improvements or additions to documentation help wanted Issue or PR that extra attention is needed
Projects
No open projects
Bezier React
Status: 📌 Backlog
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dimitrieh @Dogdriip