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

feat: config react docgen typescript #85

Merged
merged 2 commits into from
May 9, 2024
Merged

feat: config react docgen typescript #85

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
05d32aa
feat: config react docgen typescript
Hanna922 May 9, 2024
175b4fd
refactor: add parser option (remove undefined optional)
Hanna922 May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,25 @@ import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
typescript: {
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
Copy link
Collaborator

@nijuy nijuy May 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
shouldExtractLiteralValuesFromEnum: true,
shouldExtractLiteralValuesFromEnum: true,
shouldRemoveUndefinedFromOptional: true,

optional field의 경우 | undefined가 붙어있어서 제어할 때 번거로운 거 같아요.
특히 boolean 타입의 경우가 그렇다고 느꼈습니다!!

react-docgen-typescript의 이슈 코멘트 보고 스크립트 작성해야 한다는 말이 이건가? 했는데
찾아보니 해당 이슈 이후로 optional field에 한해서 | undefined를 없애주는 옵션이 만들어졌네요.
설정해두는 게 좋을 거 같아 코드 제안 남겨뒀습니다!!

Copy link
Collaborator

Choose a reason for hiding this comment

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

설정 전 설정 후
image image

propFilter: (prop) => {
if (prop.parent) {
return !prop.parent.fileName.includes('node_modules');
Copy link
Member Author

Choose a reason for hiding this comment

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

{component}.type.ts 파일에서만 다루는 type을 취급하기 위함

}
return true;
},
},
check: false,
Copy link
Member Author

Choose a reason for hiding this comment

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

더 빠른 빌드를 위해 타입 체크 비활성화

},
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
'@storybook/addon-mdx-gfm'
'@storybook/addon-mdx-gfm',
],
framework: {
name: '@storybook/react-vite',
Expand Down
Loading