Repository navigation
feat: add AppTab component with customizable tabs and styles - #137
Conversation
|
Warning Rate limit exceeded
⌛ 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. 📝 WalkthroughWalkthroughNew AppTab React component added with controlled/uncontrolled modes, two variants (default, underline), two sizes (sm, md), dynamic sliding indicator using ResizeObserver, disabled/full-width support, accessibility roles/attributes, exported in public API and documented with Storybook stories. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Pull request overview
Adds a new AppTab React component to the Dokan UI component library, along with a Storybook story and public exports from the package entrypoint.
Changes:
- Introduces
src/components/AppTab.tsxwith variants (default/underline), sizes, full-width option, and a sliding indicator. - Adds
src/stories/AppTab.stories.tsxto document and demo the component in Storybook. - Exports
AppTaband its public types fromsrc/index.tsx.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/components/AppTab.tsx | New tab component implementation (state handling + sliding indicator). |
| src/stories/AppTab.stories.tsx | New Storybook stories covering variants/sizes/fullWidth/disabled tab. |
| src/index.tsx | Exposes the component and its types as part of the library public API. |
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/stories/AppTab.stories.tsx (1)
37-90: Add a controlled story usingrender.All current stories exercise only
defaultValue, so the docs still do not show howvalue/onChangeshould be wired. A small controlled example would cover the interactive API and make the component docs more complete. As per coding guidelines, Storybook changes should "Use theargsandrenderpattern for interactive stories" and "Document component props and usage in Storybook stories".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/stories/AppTab.stories.tsx` around lines 37 - 90, Add a new controlled story (e.g., export const Controlled: Story) that uses the args + render pattern to demonstrate wiring value and onChange for the AppTab component: supply an initial args.value, implement a render function that uses React.useState to manage value, passes value and an onChange handler that updates state to the AppTab (or the same component used in other stories), and expose the controlled value via args so Storybook controls reflect changes; reference the existing story names (Default, Underline, SmallSize, etc.) as examples and follow their items/defaultValue props when building the Controlled story.src/components/AppTab.tsx (1)
24-34: Prefer a named export for this new component.
AppTabis the new exception to the repo’s component export convention. Switching toexport const AppTab = …keeps the public API consistent and avoids needing a default re-export from the barrel. As per coding guidelines,src/{components,utils}/**/*.{ts,tsx}should "Use named exports for components and utilities".Also applies to: 148-150
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/AppTab.tsx` around lines 24 - 34, The component is currently a default-exported function expression; change it to a named export by declaring the component as "export const AppTab = (...)" (keep the same props and internal names) and remove any default export re-exports at the bottom (see the existing default export lines around 148-150). Ensure all references/imports still use the named export AppTab and update any barrel exports to export { AppTab } instead of default re-export.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/AppTab.tsx`:
- Around line 95-128: The tabs markup in AppTab declares role="tablist" and
role="tab" but lacks keyboard behavior; add roving-focus and
ArrowLeft/ArrowRight/Home/End handling so keyboard users can navigate and
activate tabs. Update the component to store tab refs via setTabRef, add an
onKeyDown handler (attached to each tab button or the tablist) that moves focus
among items using those refs (wrap at ends for Arrow keys, jump to first/last
for Home/End), and ensure activation mirrors handleTabClick (update activeValue
and aria-selected) without requiring mouse clicks. Use existing symbols
setTabRef, handleTabClick, items, and activeValue to wire focus movement and
activation.
- Around line 35-38: The uncontrolled initial state currently uses defaultValue
or the first item's value which can be a disabled tab; update the initialization
in the AppTab component so internalValue is resolved to the first enabled tab:
compute a helper (inline in the useState lazy initializer) that returns
defaultValue if provided and matches an enabled item (item.value ===
defaultValue && !item.disabled), otherwise find the first items.find(i =>
!i.disabled)?.value or '' and pass that result into useState; keep symbols
isControlled, internalValue, setInternalValue, items, and defaultValue unchanged
so the rest of the component continues to work.
In `@src/stories/AppTab.stories.tsx`:
- Line 2: Replace the relative import "import AppTab from
'../components/AppTab';" with the repo alias import "import AppTab from
'@/components/AppTab';" so the story follows the project's src alias convention;
update the import in AppTab.stories (the import line referencing AppTab)
accordingly and run TypeScript/webpack build to ensure the alias is resolved.
---
Nitpick comments:
In `@src/components/AppTab.tsx`:
- Around line 24-34: The component is currently a default-exported function
expression; change it to a named export by declaring the component as "export
const AppTab = (...)" (keep the same props and internal names) and remove any
default export re-exports at the bottom (see the existing default export lines
around 148-150). Ensure all references/imports still use the named export AppTab
and update any barrel exports to export { AppTab } instead of default re-export.
In `@src/stories/AppTab.stories.tsx`:
- Around line 37-90: Add a new controlled story (e.g., export const Controlled:
Story) that uses the args + render pattern to demonstrate wiring value and
onChange for the AppTab component: supply an initial args.value, implement a
render function that uses React.useState to manage value, passes value and an
onChange handler that updates state to the AppTab (or the same component used in
other stories), and expose the controlled value via args so Storybook controls
reflect changes; reference the existing story names (Default, Underline,
SmallSize, etc.) as examples and follow their items/defaultValue props when
building the Controlled story.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 834ccd3c-1bc9-435d-8fd9-499b581da371
📒 Files selected for processing (3)
src/components/AppTab.tsxsrc/index.tsxsrc/stories/AppTab.stories.tsx
Summary by CodeRabbit
New Features
Documentation