refactor(eslint): enhance eslint config type safety #127
Conversation
froggy1014
requested review from
kimdaeyeobbb,
hy57in,
developerjhp,
bae-sh,
noahluftyang,
heeji289,
synuns,
yeojini,
SEMIN-97 and
jiji-hoon96
as code owners
|
|
Warning Rate limit exceeded@froggy1014 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 15 minutes and 36 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (8)
Walkthrough이 풀 리퀘스트는 ESLint 구성, 패키지 의존성, 및 코드 형식 개선을 포함합니다. eslint.config.ts 파일에서는 Storybook 플러그인 대신 hooksPlugin을 도입하고 globals 임포트를 추가하며, TypeScript와 React 관련 규칙을 확장했습니다. 루트 package.json에서는 새로운 의존성("@eslint/eslintrc", "@types/eslint__eslintrc", globals) 추가와 eslint 버전 업데이트가 이루어졌습니다. 또한, grid 패키지의 package.json 및 스토리/테스트 파일 포맷이 개선되었으며, eslint-plugin-react-hooks에 대한 타입 선언 파일이 추가되었습니다. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
eslint.config.ts (2)
17-32: 규칙 비활성화에 대한 주석 추가 필요TypeScript ESLint 규칙들을 비활성화한 이유에 대한 설명이 있으면 좋을 것 같습니다.
다음과 같이 각 규칙 비활성화에 대한 설명을 추가하는 것을 제안합니다:
rules: { + // TODO 주석을 허용하기 위해 비활성화 '@typescript-eslint/ban-ts-comment': 'off', + // 미사용 변수 경고는 IDE에서 처리 '@typescript-eslint/no-unused-vars': 'off', + // any 타입 사용이 필요한 경우가 있어 비활성화 '@typescript-eslint/no-explicit-any': 'off',
70-75: Storybook 규칙 설정이 비어있는 이유 문서화 필요Storybook 플러그인의 규칙 객체가 비어있는 이유에 대한 설명이 필요합니다.
다음과 같이 주석을 추가하는 것을 제안합니다:
// * Storybook plugin configuration ...compat.extends('plugin:storybook/recommended'), { files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'], + // 기본 recommended 설정만 사용하고 추가 규칙은 없음 rules: {}, },packages/flex/.storybook/main.ts (1)
5-5: 설정 변경이 일관성 있게 적용되었습니다.모든 패키지에서 동일한 변경사항이 적용되어 일관성이 유지되었습니다. 단, 컴포넌트 사용법에 대한 문서화를 README나 스토리 파일에 추가하는 것을 고려해보세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
.templates/component/.storybook/main.ts(1 hunks)eslint.config.ts(3 hunks)packages/Input/.storybook/main.ts(0 hunks)packages/avatar/.storybook/main.ts(0 hunks)packages/button/.storybook/main.ts(0 hunks)packages/checkbox/.storybook/main.ts(1 hunks)packages/divider/.storybook/main.ts(0 hunks)packages/flex/.storybook/main.ts(1 hunks)packages/grid/.storybook/main.ts(1 hunks)packages/icon/.storybook/main.ts(1 hunks)packages/radio-group/.storybook/main.ts(0 hunks)packages/reset/.storybook/main.ts(1 hunks)packages/skeleton/.storybook/main.ts(0 hunks)packages/switch/.storybook/main.ts(1 hunks)packages/tooltip/.storybook/main.ts(0 hunks)packages/typography/.storybook/main.ts(0 hunks)
💤 Files with no reviewable changes (8)
- packages/skeleton/.storybook/main.ts
- packages/divider/.storybook/main.ts
- packages/Input/.storybook/main.ts
- packages/typography/.storybook/main.ts
- packages/radio-group/.storybook/main.ts
- packages/avatar/.storybook/main.ts
- packages/tooltip/.storybook/main.ts
- packages/button/.storybook/main.ts
🔇 Additional comments (10)
eslint.config.ts (4)
1-1: FlatCompat와 필요한 의존성이 적절히 추가되었습니다.레거시 ESLint 설정과의 호환성을 위해
FlatCompat을 사용하고, 브라우저와 서비스 워커 환경을 위한globals를 추가한 것이 적절합니다.Also applies to: 4-5, 8-8
34-56: React 설정이 최신 개발 환경에 맞게 잘 구성되었습니다.React 17+ 및 TypeScript 환경에 맞춰 불필요한 규칙들을 비활성화하고, 브라우저 환경 설정을 추가한 것이 적절합니다.
77-80: 적절한 무시 패턴이 설정되었습니다.빌드 출력물, node_modules, 설정 파일들에 대한 표준적인 무시 패턴이 잘 설정되어 있습니다.
58-68: React Hooks 플러그인 타입 호환성 확인 필요React Hooks 플러그인 설정이 잘 되어있지만, 타입 선언 파일의 호환성을 확인해야 합니다.
다음 명령어로 타입 호환성을 확인해주세요:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # React Hooks 플러그인의 타입 선언 확인 npm ls @types/eslint-plugin-react-hooks # package.json에서 peerDependencies 확인 npm info eslint-plugin-react-hooks peerDependenciesLength of output: 232
React Hooks 플러그인 타입 호환성 검증 완료
• npm ls 결과, 별도의 @types/eslint-plugin-react-hooks 패키지가 설치되어 있지 않으나, 이는 해당 플러그인이 별도 타입 패키지를 요구하지 않음을 의미합니다.
• npm info 명령어를 통해 확인한 peerDependencies에서는 eslint의 특정 버전 요구사항만 명시되어 있어 타입 호환성에는 문제가 없습니다.packages/switch/.storybook/main.ts (1)
5-5: Storybook 애드온 구성이 적절히 정리되었습니다.온보딩 애드온을 제거하고 필수 애드온만 유지한 것이 좋습니다. 타입 안전성도 잘 유지되고 있습니다.
packages/checkbox/.storybook/main.ts (1)
5-5: 일관된 Storybook 구성 변경이 확인되었습니다.다른 패키지들과 동일하게 온보딩 애드온이 제거되었습니다.
packages/icon/.storybook/main.ts (1)
5-5: Storybook 구성이 프로젝트 표준을 따르고 있습니다.온보딩 애드온 제거가 일관되게 적용되었습니다.
packages/reset/.storybook/main.ts (1)
5-5: 모든 패키지의 Storybook 구성이 통일되었습니다.불필요한 온보딩 애드온을 제거하고 핵심 기능만 유지하는 방향으로 잘 정리되었습니다.
packages/grid/.storybook/main.ts (1)
5-5: 온보딩 애드온 제거에 대한 검토가 필요합니다.
@storybook/addon-onboarding이 제거되었습니다. 새로운 개발자들을 위한 대체 문서나 가이드가 있는지 확인해주세요.✅ Verification successful
🌐 Web query:
What are the alternatives to @storybook/addon-onboarding for documenting component usage?💡 Result:
When looking for alternatives to Storybook's Addon Onboarding for documenting component usage, several robust tools emerge that cater to different needs in component documentation and development workflows: ## Core Alternatives 1. **Docz** Uses MDX (Markdown + JSX) to create interactive documentation with live component examples. Integrates seamlessly with design systems and supports CSS/SCSS styling[2][3]. 2. **React Styleguidist** Generates style guides by combining Markdown documentation with live component examples directly in your project environment[9]. Example setup: ```javascript // Example Styleguidist config module.exports = { components: 'src/components/**/[A-Z]*.js', webpackConfig: { /* Custom config */ } }; ``` 3. **Histoire** A modern Vite-based alternative offering faster build times and a clean interface for component showcases[9]. ## Specialized Tools - **Zeroheight/Supernova**: Dedicated design system platforms with Figma sync, token management, and health tracking[5]. - **React Docgen**: Extracts component metadata (props, descriptions) into JSON for automated docs[2]. ## Lightweight Options - **Vitebook**: Minimal-config solution using your existing Vite setup for component demos[6]. - **In-App Docs**: Embed documentation directly into your app via `/docs` routes using custom components[6]. | Tool | Key Features | Best For | |-------------------|---------------------------------------|------------------------------| | Docz | MDX support, live examples | Full-featured docs | | React Styleguidist | Integrated dev environment | Code-focused teams | | Histoire | Vite speed, modern UI | Fast iteration | | Zeroheight | Design system collaboration | Enterprise-scale systems | For teams already using Storybook but seeking complementary tools, consider integrating **React Docgen** for auto-generated props tables or **Zeroheight** for centralized design system management[2][5]. Smaller projects may prefer Vitebook or in-app docs to avoid configuration overhead[6][9]. Citations: - 1: https://github.com/storybookjs/addon-onboarding - 2: https://dev.to/giteden/6-tools-for-documenting-your-react-components-like-a-pro-1gml - 3: https://blog.logrocket.com/storybook-js-adoption-guide/ - 4: https://classic.yarnpkg.com/en/package/@storybook/addon-onboarding - 5: https://hike.one/insights/the-best-tools-for-documenting-design-system - 6: https://haspar.us/tiny-alternative-to-storybook/ - 7: https://storybook.js.org/docs/get-started/frameworks/react-vite - 8: https://swimm.io/learn/documentation-tools/documentation-generators-great-tools-you-should-know - 9: https://www.dhiwise.com/post/top-alternatives-to-storybook-to-streamline-development - 10: https://storybook.js.org/blog/future-of-storybook-2024
온보딩 애드온 제거 관련 검토 결과
- packages/grid/.storybook/main.ts 파일에서
@storybook/addon-onboarding이 제거되었음을 확인했습니다.- 외부 자료에 따르면 Docz, React Styleguidist, Histoire 등 여러 대안이 있으며, 이들 도구는 컴포넌트 문서화를 위한 대체 옵션으로 적합합니다.
- 새로운 개발자들을 위한 가이드와 문서 작성 전략 마련을 위해 팀 내에서 위 도구들을 검토하는 것을 권장합니다.
.templates/component/.storybook/main.ts (1)
5-5: 템플릿 파일이 다른 컴포넌트 설정과 일관성이 있습니다.다른 컴포넌트의 Storybook 설정과 동일한 구조를 유지하고 있어 적절합니다.
Changes
기존 설정에서
eslint-plugin-react이 제대로 실행이 안되는 것을 확인했습니다.에 따라서
languageOptions에 필요한 패키지 설치 및 업데이트해서 제대로 동작하는 것을 확인했고, 각 플러그인마다 커스텀이 한눈에 들어오도록 분리해놨습니다.flatConfig에 따라 타입 적용이 안된 플러그인 같은 경우는
@eslint/eslintrc을 통해서 타입문제 없이 사용 가능한 것을 확인했습니다.하지만
eslint-plugin-react-hooks같은 경우는 아예 타입 선언이 안되있기 때문에 따로 추가해서 타입 에러는 잡았습니다.필요없는
@storybook/addon-onboarding@chromatic/storybook을 모든 스토리북 Addon에서 삭제했습니다. ( 애초에 패키지에 설치 및 사용되고 있지않았습니다. )
Visuals
Checklist
Reference
Summary by CodeRabbit