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.

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

Apply react-docgen-typescript-plugin to generate storybook documentations from JSDoc #931

Conversation

inhibitor1217
Copy link
Contributor

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.
  • I wrote a unit test about the implementation.
  • I wrote a storybook document about the implementation.
  • I tested the implementation in various browsers.
    • Windows: Chrome, Edge, (Optional) Firefox
    • macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

Summary

react-docgen-typescript-plugin을 적용하여, 스토리북에서 JSDoc에 의해 generate된 documentation을 확인할 수 있도록 합니다.

Props interface의 각 필드에 추가된 jsdoc, default value등을 확인할 수 있습니다.
Documentation을 MDX 문서에 추가해, API section이 자동적으로 관리되도록 지정했습니다.

Details

원래 react-docgen-typescript-plugin은 typescript를 사용하고 있다면 storybook에서 out-of-the-box로 바로 적용되어야 합니다. (#)

그러나, 복합적인 이슈 때문에 이것이 작동하지 않고 있었는데, 이 점을 차례대로 고쳤습니다.

Screen Shot 2022-09-27 at 5 30 54 PM

  • react-docgen-typescript-plugin은 HMR 환경에서 많은 메모리를 소비합니다. (OOM 에러를 자주 발생시킵니다.)
    • 해결책: production 환경에서만 해당 plugin이 적용되도록 합니다. 이로 인해 개발 환경에서는 스토리북을 빠르게 refresh할 수 있고, 배포된 chromatic document에서는 generate된 documentation을 확인할 수 있습니다.

Breaking change or not (Yes/No)

No

References

@inhibitor1217 inhibitor1217 added the documentation Issue or PR that improvements or additions to documentation label Sep 27, 2022
@inhibitor1217 inhibitor1217 self-assigned this Sep 27, 2022
@changeset-bot
Copy link

changeset-bot bot commented Sep 27, 2022

⚠️ No Changeset found

Latest commit: 5e760f7

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

@inhibitor1217
Copy link
Contributor Author

GitHub registry에 배포된 @channel-io/react-docgen-typescript-plugin에 접근하기 위해서는 channel-io organization 접근 privilege가 필요함.

npm registry에 해당 패키지를 public으로 배포할지 체크 필요함 (bezier-react는 public package이기 때문에 organization-scope 접근 권한을 강제할 수 없음)

@github-actions
Copy link
Contributor

github-actions bot commented Sep 28, 2022

Chromatic Report

🚀 Congratulations! Your build was successful!

@codecov
Copy link

codecov bot commented Sep 28, 2022

Codecov Report

Base: 71.08% // Head: 71.20% // Increases project coverage by +0.12% 🎉

Coverage data is based on head (5e760f7) compared to base (1afab06).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files
@@             Coverage Diff             @@
##           next-v1     #931      +/-   ##
===========================================
+ Coverage    71.08%   71.20%   +0.12%     
===========================================
  Files          208      208              
  Lines         2967     2980      +13     
  Branches       823      823              
===========================================
+ Hits          2109     2122      +13     
  Misses         739      739              
  Partials       119      119              
Impacted Files Coverage Δ
...onents/Avatars/CheckableAvatar/CheckableAvatar.tsx 0.00% <ø> (ø)
...eact/src/components/Icon/LegacyIcon/LegacyIcon.tsx 75.00% <ø> (ø)
...ier-react/src/components/Avatars/Avatar/Avatar.tsx 76.92% <100.00%> (+0.92%) ⬆️
...src/components/Avatars/AvatarGroup/AvatarGroup.tsx 61.11% <100.00%> (+1.11%) ⬆️
...ages/bezier-react/src/components/Banner/Banner.tsx 88.88% <100.00%> (+0.65%) ⬆️
...ages/bezier-react/src/components/Button/Button.tsx 92.18% <100.00%> (+0.12%) ⬆️
...r-react/src/components/ButtonGroup/ButtonGroup.tsx 100.00% <100.00%> (ø)
packages/bezier-react/src/components/Icon/Icon.tsx 100.00% <100.00%> (ø)
...ezier-react/src/components/Stack/HStack/HStack.tsx 100.00% <100.00%> (ø)
...ezier-react/src/components/Stack/Spacer/Spacer.tsx 50.00% <100.00%> (+50.00%) ⬆️
... and 5 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@sungik-choi sungik-choi self-requested a review September 29, 2022 06:38
@sungik-choi
Copy link
Contributor

#871 도 named export로 변경되어야할 듯 (FYI. @Dogdriip)

@@ -7,13 +7,35 @@ import type { InjectedInterpolation } from './Foundation'

/* Component Base Props */
export interface RenderConfigProps {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@inhibitor1217 inhibitor1217 force-pushed the feat/bezier-react/react-docgen-typescript-plugin branch from 9dee6f1 to 5e760f7 Compare November 24, 2022 03:07
@inhibitor1217 inhibitor1217 merged commit 34ccd70 into channel-io:next-v1 Nov 24, 2022
@inhibitor1217 inhibitor1217 deleted the feat/bezier-react/react-docgen-typescript-plugin branch November 24, 2022 03:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Issue or PR that improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants