[FE-Feat] ui 패키지에 Storybook 세팅 #426
Conversation
WalkthroughThis update introduces Storybook configuration and preview files for the UI package, adds Storybook-related scripts to the package.json, exports the Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant Storybook
participant UI Components
participant Hooks
Developer->>Storybook: Start Storybook (npm run storybook)
Storybook->>UI Components: Load stories with global parameters and theme
UI Components->>Hooks: Import and use `useCheckbox`, `useGroup`
Hooks-->>UI Components: Provide hook logic
Storybook-->>Developer: Serve interactive UI with controls and visual testing
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
dioo1461
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
frontend/packages/ui/src/hooks/useGroup.ts (2)
38-40: LeverageinitializeStatehelper in reducer
Centralizing initialization improves clarity; verify that cases like emptyitemIdsordefaultCheckedListbehave as intended.
47-50: ExtractedinitializeStateutility
Nice extraction. Consider adding a brief JSDoc comment to explain parameters and return shape for future maintainers.frontend/packages/ui/.storybook/preview.ts (2)
1-3: Validate global CSS import and import ordering.The bare import of
@endolphin/theme/cssapplies your theme globally, which is good. Please confirm that Vite and Storybook are configured to resolve this path correctly and that the CSS is actually injected into your stories. Also consider aligning with your repo’s import-order lint rules—type-only imports (likeimport type { Preview } …) can be grouped separately below value imports.
5-14: Expand default Storybook parameters for better DX.The
controls.matcherssetup is standard. To improve developer experience, you might want to include defaults foractions(e.g. auto-matchon*handlers), or add background and viewport presets. Example diff:const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, + parameters: { + actions: { argTypesRegex: '^on.*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + backgrounds: { + default: 'light', + values: [ + { name: 'light', value: '#ffffff' }, + { name: 'dark', value: '#000000' }, + ], + }, + viewport: { + viewports: { + mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } }, + desktop: { name: 'Desktop', styles: { width: '1024px', height: '768px' } }, + }, + }, + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
frontend/packages/ui/.storybook/main.ts(1 hunks)frontend/packages/ui/.storybook/preview.ts(1 hunks)frontend/packages/ui/package.json(1 hunks)frontend/packages/ui/src/hooks/useGroup.ts(3 hunks)frontend/packages/ui/src/index.ts(1 hunks)frontend/packages/ui/vite.config.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: frontend
🔇 Additional comments (5)
frontend/packages/ui/src/index.ts (1)
19-19: Export useCheckbox hook to public API
This addsuseCheckboxto the package’s public surface. Ensure accompanying documentation or README updates to include usage examples for this new hook.frontend/packages/ui/.storybook/main.ts (1)
1-15: Review Storybook main configuration
Themain.tscorrectly configures story paths and addons. Verify that a.storybook/preview.tsfile is present for global decorators (themes, CSS resets, etc.), and confirm the Chromatic addon name (@chromatic-com/storybook) matches the installed package.frontend/packages/ui/src/hooks/useGroup.ts (2)
1-2: Removed unuseduseEffectimport
Good cleanup—useEffectis no longer needed after refactoring the initialization logic into the reducer.
70-70: Double-check initial state on prop changes
SinceuseReducer’s initial state is only applied on mount, updates todefaultCheckedListoritemIdswon’t trigger reinitialization unlessinit()is called. Confirm this behavioral change is intended.frontend/packages/ui/.storybook/preview.ts (1)
16-17: Export default preview is correct.This file correctly exports the configured
previewobject for Storybook. No further changes needed here.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
frontend/packages/ui/.storybook/main.ts (2)
18-24: Rename theconfigparameter to avoid shadowing the outerconfigconstantThe
viteFinalcallback receives a parameter namedconfig, but there is already aconst configdeclared in the parent scope. Shadowing can make the code harder to read and increases the risk of accidental misuse when the file grows. Simply renaming the parameter (e.g. toviteConfig) keeps intent crystal-clear.- viteFinal: async (config) => { + viteFinal: async (viteConfig) => { const { mergeConfig } = await import('vite'); @@ - return mergeConfig( - config, + return mergeConfig( + viteConfig, {
32-38: Consider sourcing aliases fromtsconfig.path.jsonto avoid driftThe manual alias map works, but as the project scales it’s easy for Vite/Storybook and TypeScript path aliases to diverge. Pointing to a shared config (or generating this map from
compilerOptions.paths) eliminates duplication and prevents “works-in-Storybook but not in editor” issues.
If a dedicatedtsconfig.paths.jsonalready exists, you can pull it in withvite-tsconfig-pathsinstead of hard-coding each entry.No code change required if you prefer the current approach.
#️⃣ 연관된 이슈>
📝 작업 내용> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)
🙏 여기는 꼭 봐주세요! > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
Summary by CodeRabbit
New Features
Refactor