TabNav component #1054
TabNav component #1054
Conversation
WalkthroughA new tab navigation UI component system has been introduced. This includes a main Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TabNav
participant TabNavRoot
participant TabNavLink
participant TabNavContext
User->>TabNav.Root: Render TabNav.Root
TabNav.Root->>TabNavContext: Provide context (rootClass)
TabNav.Root->>TabNavLink: Render children (TabNav.Link)
TabNavLink->>TabNavContext: Consume context (rootClass)
TabNavLink->>User: Render anchor element with styling and focus management
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:
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: 4
🧹 Nitpick comments (8)
styles/themes/components/tab-nav.scss (1)
1-23: Consider refactoring the CSS structure and using design tokens consistently.The tab navigation styling is clean but has a few potential improvements:
- The hardcoded color
#65636dshould be replaced with a design token variable like your other color references- The margin-left on links could cause inconsistent spacing with the container's gap
- The CSS nesting could be formatted more consistently
Consider this refactored version:
.rad-ui-tab-nav { display: flex; gap: 6px; .rad-ui-tab-nav-link { background-color: white; - color: #65636d; + color: var(--rad-ui-color-gray-600); display: flex; align-items: center; justify-content: center; - margin-left: 1px; &:focus-visible { outline: 2px solid var(--rad-ui-color-accent-900); outline-offset: 2px; } &:hover { background-color: var(--rad-ui-color-accent-300); color: var(--rad-ui-color-accent-950); } } }src/components/ui/TabNav/stories/TabNav.stories.tsx (4)
6-18: Storybook configuration looks good but consider enhancing the story structure.The Storybook setup correctly demonstrates the TabNav component. However, consider following Storybook's latest practices by:
- Using the CSF 3.0 format with annotations
- Providing more descriptive story names rather than just "All"
- Moving the component from "WIP/" to a more appropriate category once it's ready
export default { title: 'WIP/TabNav', component: TabNav, + parameters: { + docs: { + description: { + component: 'TabNav component provides accessible tab navigation for the UI.' + } + } + }, render: (args: React.JSX.IntrinsicAttributes) => <SandboxEditor> <div > <TabNav.Root> <TabNav.Link disabled href={'###'}>Tab 1</TabNav.Link> <TabNav.Link>Tab 2</TabNav.Link> <TabNav.Link>Tab 3</TabNav.Link> </TabNav.Root> </div> </SandboxEditor> };
10-10: Remove unnecessary empty div wrapper or add purpose via className.The empty div wrapper doesn't appear to serve any purpose. Either remove it or add a className that provides styling context.
- <div > + <div className="tabnav-container">or
- <div > - <TabNav.Root> + <TabNav.Root>
12-12: Replace placeholder href value with a more semantic value.The current placeholder
href={'###'}isn't a valid URI. Consider using a more standard placeholder like#or omitting the href entirely for disabled links.- <TabNav.Link disabled href={'###'}>Tab 1</TabNav.Link> + <TabNav.Link disabled href="#">Tab 1</TabNav.Link>or
- <TabNav.Link disabled href={'###'}>Tab 1</TabNav.Link> + <TabNav.Link disabled>Tab 1</TabNav.Link>
20-24: Enhance the example story with arguments that demonstrate component functionality.The current
argsonly shows a text color class, which doesn't fully demonstrate the TabNav component's capabilities. Consider adding examples that show different orientations, disabled states, and active tabs.export const All = { args: { - className: 'text-gray-950' + className: 'text-gray-950', + orientation: 'horizontal', + loop: true } };Then add additional stories:
export const Vertical = { args: { className: 'text-gray-950', orientation: 'vertical' }, render: (args) => ( <SandboxEditor> <TabNav.Root orientation="vertical"> <TabNav.Link disabled>Tab 1</TabNav.Link> <TabNav.Link>Tab 2</TabNav.Link> <TabNav.Link>Tab 3</TabNav.Link> </TabNav.Root> </SandboxEditor> ) };src/components/ui/TabNav/fragments/TabNavLink.tsx (2)
7-13: Complete the type definition with return type and additional accessibility props.The
TabNavLinkPropstype should include common accessibility attributes for tabs and the return type for enhanced type safety.export type TabNavLinkProps = { children: React.ReactNode, className?: string, href?: string, disabled?: boolean, + ariaLabel?: string, + ariaControls?: string, + active?: boolean, + onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void, }
18-27: Consider implementing keyboard event handling for tab navigation.The component relies on RovingFocusGroup for focus management but doesn't handle key events for tab selection (Enter/Space).
+ const handleKeyDown = (e: React.KeyboardEvent) => { + if (!disabled && (e.key === 'Enter' || e.key === ' ')) { + e.preventDefault(); + onClick?.(e as unknown as React.MouseEvent<HTMLAnchorElement>); + } + }; return ( <RovingFocusGroup.Item> <Primitive.a className={clsx(`${rootClass}-link`, className)} data-disabled={disabled} {...disabled ? {} : { href }} + onKeyDown={handleKeyDown} > {children} </Primitive.a> </RovingFocusGroup.Item> );src/components/ui/TabNav/fragments/TabNavRoot.tsx (1)
19-30: Consider adding auto-focus functionality for the selected tab.The component currently doesn't provide auto-focus for the initially selected tab, which would improve keyboard navigation.
return ( <TabNavContext.Provider value={{ rootClass, selectedIndex, onSelect: handleTabSelect }}> - <RovingFocusGroup.Root loop={loop} orientation={orientation} > + <RovingFocusGroup.Root + loop={loop} + orientation={orientation} + defaultFocusedIndex={selectedIndex} + > <RovingFocusGroup.Group className={clsx(rootClass, className)} role="tablist" aria-orientation={orientation} id={id} > {children} </RovingFocusGroup.Group> </RovingFocusGroup.Root> </TabNavContext.Provider> );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/ui/TabNav/TabNav.tsx(1 hunks)src/components/ui/TabNav/context/TabNav.context.tsx(1 hunks)src/components/ui/TabNav/fragments/TabNavLink.tsx(1 hunks)src/components/ui/TabNav/fragments/TabNavRoot.tsx(1 hunks)src/components/ui/TabNav/stories/TabNav.stories.tsx(1 hunks)styles/themes/components/tab-nav.scss(1 hunks)styles/themes/default.scss(1 hunks)
🧰 Additional context used
🪛 GitHub Check: lint
src/components/ui/TabNav/fragments/TabNavRoot.tsx
[warning] 1-1:
'Children' is defined but never used
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (3)
src/components/ui/TabNav/context/TabNav.context.tsx (1)
1-11: LGTM: Clean and well-structured React context implementation.The TabNavContext is correctly implemented using React's createContext API with proper TypeScript typing. The context provides a rootClass property with a sensible default value of 'TabNav'.
A few minor points to consider:
- The context export could be named (e.g.,
export default TabNavContext;→export { TabNavContext }) to improve import consistency- Consider adding JSDoc comments to document the purpose of this context and interface
styles/themes/default.scss (1)
31-31: LGTM: Properly integrated the tab-nav styles into the theme.The tab navigation styles have been correctly imported into the default theme, maintaining alphabetical organization within the component imports.
src/components/ui/TabNav/TabNav.tsx (1)
1-12: LGTM: Clean implementation of the composite component pattern.The TabNav component follows React's composite component pattern correctly by exposing Root and Link subcomponents. The warning for direct usage is helpful for developers.
| const TabNavLink = ({ className = '', href = '#', children, disabled }: TabNavLinkProps) => { | ||
| const { rootClass } = useContext(TabNavContext); | ||
|
|
||
| return ( | ||
| <RovingFocusGroup.Item> | ||
| <Primitive.a | ||
| className={clsx(`${rootClass}-link`, className)} | ||
| data-disabled={disabled} | ||
| {...disabled ? {} : { href }} | ||
| > | ||
| {children} | ||
| </Primitive.a> | ||
| </RovingFocusGroup.Item> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance accessibility and add active state handling to the TabNavLink component.
The component needs improved accessibility for screen readers and keyboard users. It should also handle active state for tab selection.
- const TabNavLink = ({ className = '', href = '#', children, disabled }: TabNavLinkProps) => {
+ const TabNavLink = ({
+ className = '',
+ href = '#',
+ children,
+ disabled,
+ ariaLabel,
+ ariaControls,
+ active = false,
+ onClick
+ }: TabNavLinkProps) => {
const { rootClass } = useContext(TabNavContext);
return (
<RovingFocusGroup.Item>
<Primitive.a
- className={clsx(`${rootClass}-link`, className)}
+ className={clsx(`${rootClass}-link`, className, {
+ [`${rootClass}-link--active`]: active
+ })}
data-disabled={disabled}
+ aria-disabled={disabled}
+ aria-selected={active}
+ role="tab"
+ aria-label={ariaLabel}
+ aria-controls={ariaControls}
{...disabled ? {} : { href }}
+ onClick={!disabled ? onClick : undefined}
>
{children}
</Primitive.a>
</RovingFocusGroup.Item>
);
};| @@ -0,0 +1,34 @@ | |||
| import React, { Children } from 'react'; | |||
There was a problem hiding this comment.
Remove unused import 'Children' from React.
The static analysis correctly identified that the 'Children' import is not used in this file.
- import React, { Children } from 'react';
+ import React from 'react';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import React, { Children } from 'react'; | |
| -import React, { Children } from 'react'; | |
| +import React from 'react'; |
🧰 Tools
🪛 GitHub Check: lint
[warning] 1-1:
'Children' is defined but never used
| export type TabNavRootProps = { | ||
| className?: string, | ||
| loop?: boolean, | ||
| orientation?: 'horizontal' | 'vertical', | ||
| children: React.ReactNode, | ||
| customRootClass?: string, | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance the TabNavRootProps interface with selected tab management.
The current implementation doesn't handle the selected/active tab state. Consider adding props for controlling selected tab.
export type TabNavRootProps = {
className?: string,
loop?: boolean,
orientation?: 'horizontal' | 'vertical',
children: React.ReactNode,
customRootClass?: string,
+ selectedIndex?: number,
+ onSelectionChange?: (index: number) => void,
+ id?: string,
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export type TabNavRootProps = { | |
| className?: string, | |
| loop?: boolean, | |
| orientation?: 'horizontal' | 'vertical', | |
| children: React.ReactNode, | |
| customRootClass?: string, | |
| } | |
| export type TabNavRootProps = { | |
| className?: string, | |
| loop?: boolean, | |
| orientation?: 'horizontal' | 'vertical', | |
| children: React.ReactNode, | |
| customRootClass?: string, | |
| selectedIndex?: number, | |
| onSelectionChange?: (index: number) => void, | |
| id?: string, | |
| } |
| const TabNavRoot = ({ className, loop = true, orientation = 'horizontal', children, customRootClass = '', ...props }: TabNavRootProps) => { | ||
| const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); | ||
| return ( | ||
| <TabNavContext.Provider | ||
| value={{ | ||
| rootClass | ||
| }}> | ||
| <RovingFocusGroup.Root loop={loop} orientation={orientation} > | ||
| <RovingFocusGroup.Group className={clsx(rootClass, className)}> | ||
| {children} | ||
| </RovingFocusGroup.Group> | ||
| </RovingFocusGroup.Root> | ||
| </TabNavContext.Provider> | ||
|
|
||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Implement selected tab state management and ARIA attributes for accessibility.
The current implementation lacks proper accessibility for tabs. Add ARIA roles and selected tab state management.
- const TabNavRoot = ({ className, loop = true, orientation = 'horizontal', children, customRootClass = '', ...props }: TabNavRootProps) => {
+ const TabNavRoot = ({
+ className,
+ loop = true,
+ orientation = 'horizontal',
+ children,
+ customRootClass = '',
+ selectedIndex = 0,
+ onSelectionChange,
+ id,
+ ...props
+ }: TabNavRootProps) => {
const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+
+ const handleTabSelect = (index: number) => {
+ if (onSelectionChange) {
+ onSelectionChange(index);
+ }
+ };
+
return (
<TabNavContext.Provider
value={{
- rootClass
+ rootClass,
+ selectedIndex,
+ onSelect: handleTabSelect
}}>
<RovingFocusGroup.Root loop={loop} orientation={orientation} >
- <RovingFocusGroup.Group className={clsx(rootClass, className)}>
+ <RovingFocusGroup.Group
+ className={clsx(rootClass, className)}
+ role="tablist"
+ aria-orientation={orientation}
+ id={id}
+ >
{children}
</RovingFocusGroup.Group>
</RovingFocusGroup.Root>
</TabNavContext.Provider>
);
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const TabNavRoot = ({ className, loop = true, orientation = 'horizontal', children, customRootClass = '', ...props }: TabNavRootProps) => { | |
| const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); | |
| return ( | |
| <TabNavContext.Provider | |
| value={{ | |
| rootClass | |
| }}> | |
| <RovingFocusGroup.Root loop={loop} orientation={orientation} > | |
| <RovingFocusGroup.Group className={clsx(rootClass, className)}> | |
| {children} | |
| </RovingFocusGroup.Group> | |
| </RovingFocusGroup.Root> | |
| </TabNavContext.Provider> | |
| ); | |
| }; | |
| const TabNavRoot = ({ | |
| className, | |
| loop = true, | |
| orientation = 'horizontal', | |
| children, | |
| customRootClass = '', | |
| selectedIndex = 0, | |
| onSelectionChange, | |
| id, | |
| ...props | |
| }: TabNavRootProps) => { | |
| const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); | |
| const handleTabSelect = (index: number) => { | |
| if (onSelectionChange) { | |
| onSelectionChange(index); | |
| } | |
| }; | |
| return ( | |
| <TabNavContext.Provider | |
| value={{ | |
| rootClass, | |
| selectedIndex, | |
| onSelect: handleTabSelect | |
| }} | |
| > | |
| <RovingFocusGroup.Root loop={loop} orientation={orientation}> | |
| <RovingFocusGroup.Group | |
| className={clsx(rootClass, className)} | |
| role="tablist" | |
| aria-orientation={orientation} | |
| id={id} | |
| > | |
| {children} | |
| </RovingFocusGroup.Group> | |
| </RovingFocusGroup.Root> | |
| </TabNavContext.Provider> | |
| ); | |
| }; |
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/components/ui/TabNav/fragments/TabNavRoot.tsx (1)
1-40: 💡 Verification agent🧩 Analysis chain
Verify TabNavContext updates are implemented in context file
To support the selection state management suggested above, the TabNavContext interface also needs to be updated.
🏁 Script executed:
#!/bin/bash # Check if TabNavContext.tsx has the updated interface for selection state management cat src/components/ui/TabNav/context/TabNav.context.tsxLength of output: 264
TabNavContext: add selection state to context interface
The context currently only provides
rootClass. To support controlled/uncontrolled tab selection (usinguseControllableStateinTabNavRoot), update the context type and default value:• File:
src/components/ui/TabNav/context/TabNav.context.tsxSuggested changes:
-import { createContext } from 'react'; +import { createContext } from 'react'; -interface TabNavContextType { - rootClass?: string; -} +interface TabNavContextType { + /** Styling hook from TabNavRoot */ + rootClass?: string; + /** Currently selected tab key */ + selectedKey: string; + /** Setter for selection state */ + setSelectedKey: (key: string) => void; + /** Optional callback when selection changes */ + onSelect?: (key: string) => void; +} -const TabNavContext = createContext<TabNavContextType>({ - rootClass: '' -}); +const TabNavContext = createContext<TabNavContextType>({ + rootClass: '', + selectedKey: '', + setSelectedKey: () => {}, + onSelect: undefined, +}); export default TabNavContext;Then in
TabNavRoot, useuseControllableStateto manageselectedKey/setSelectedKeyand passonSelect(if provided) intoTabNavContext.Provider.🧰 Tools
🪛 GitHub Check: lint
[warning] 6-6:
'useControllableState' is defined but never used
[warning] 1-1:
'useEffect' is defined but never used
♻️ Duplicate comments (4)
src/components/ui/TabNav/fragments/TabNavLink.tsx (2)
7-13: 🛠️ Refactor suggestionEnhance TabNavLinkProps interface with accessibility properties
The current implementation lacks important accessibility props needed for proper tab navigation.
export type TabNavLinkProps = { children: React.ReactNode, className?: string, href?: string, disabled?: boolean, - asChild?: boolean + asChild?: boolean, + ariaLabel?: string, + ariaControls?: string, + active?: boolean, + onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void }
15-33:⚠️ Potential issueImplement accessibility attributes and active state handling
The current implementation lacks proper accessibility attributes and state management for the tab navigation. It also has a TypeScript error that's being suppressed.
-const TabNavLink = ({ className = '', href = '#', children, disabled, asChild }: TabNavLinkProps) => { +const TabNavLink = ({ + className = '', + href = '#', + children, + disabled, + asChild, + ariaLabel, + ariaControls, + active = false, + onClick +}: TabNavLinkProps) => { const { rootClass } = useContext(TabNavContext); if (asChild) disabled = false; return ( <RovingFocusGroup.Item > <Primitive.a - className={clsx(`${rootClass}-link`, className)} + className={clsx(`${rootClass}-link`, className, { + [`${rootClass}-link--active`]: active + })} asChild={asChild} aria-disabled={disabled} - // @ts-expect-error - disabled={disabled} + aria-selected={active} + role="tab" + aria-label={ariaLabel} + aria-controls={ariaControls} {...disabled ? {} : { href }} + onClick={!disabled ? onClick : undefined} > {children} </Primitive.a> </RovingFocusGroup.Item> ); };This change:
- Adds proper ARIA attributes for tab accessibility
- Implements active state handling with visual indication
- Adds onClick handler that respects disabled state
- Removes the need for TypeScript error suppression
src/components/ui/TabNav/fragments/TabNavRoot.tsx (2)
10-17: 🛠️ Refactor suggestionEnhance TabNavRootProps interface with selected tab management
The current implementation doesn't handle the selected/active tab state, which is essential for proper tab navigation.
export type TabNavRootProps = { className?: string, loop?: boolean, orientation?: 'horizontal' | 'vertical', children: React.ReactNode, customRootClass?: string, - color?: string; + color?: string, + selectedIndex?: number, + onSelectionChange?: (index: number) => void, + id?: string, }
19-37:⚠️ Potential issueImplement selected tab state management and ARIA attributes for accessibility
The current implementation lacks proper accessibility for tabs and doesn't handle tab selection state properly. The
colorprop is also accepted but not used.const TabNavRoot = ({ - className, loop = true, orientation = 'horizontal', children, color, customRootClass = '', ...props + className, + loop = true, + orientation = 'horizontal', + children, + customRootClass = '', + selectedIndex = 0, + onSelectionChange, + id, + ...props }: TabNavRootProps) => { const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); - - const contextValues = { - rootClass - }; + + const handleTabSelect = (index: number) => { + if (onSelectionChange) { + onSelectionChange(index); + } + }; + return ( - <TabNavContext.Provider value={contextValues}> + <TabNavContext.Provider value={{ + rootClass, + selectedIndex, + onSelect: handleTabSelect + }}> <RovingFocusGroup.Root loop={loop} orientation={orientation} {...props} > - <RovingFocusGroup.Group className={clsx(rootClass, className)}> + <RovingFocusGroup.Group + className={clsx(rootClass, className)} + role="tablist" + aria-orientation={orientation} + id={id} + > {children} </RovingFocusGroup.Group> </RovingFocusGroup.Root> </TabNavContext.Provider> - ); };This change:
- Implements proper selection state management with callbacks
- Adds ARIA attributes for accessibility (
role="tablist",aria-orientation)- Removes the unused contextValues object in favor of inline context value
- Removes unused
colorprop- Adds a unique ID for the tablist for better accessibility
🧹 Nitpick comments (4)
styles/themes/components/tab-nav.scss (1)
1-27: Fix indentation and formatting issuesThe SCSS file has several formatting issues:
- Inconsistent indentation (some lines use 4 spaces, others 8)
- Missing space after the colon in
height:42px- Extra whitespace on line 25
.rad-ui-tab-nav{ display: flex; - box-shadow: inset 0 -1px 0 0 var(--rad-ui-color-gray-500); + box-shadow: inset 0 -1px 0 0 var(--rad-ui-color-gray-500); .rad-ui-tab-nav-link { color: var(--rad-ui-color-accent-600); - font-family: inherit; - padding: 10px; - display: flex; - align-items: center; - height:42px; - font-size: 15px; - line-height: 1; - cursor: pointer; + font-family: inherit; + padding: 10px; + display: flex; + align-items: center; + height: 42px; + font-size: 15px; + line-height: 1; + cursor: pointer; &[aria-selected="true"]{ color: var(--rad-ui-color-accent-950); border-bottom:2px solid var(--rad-ui-color-accent-900); } &:hover{ color: var(--rad-ui-color-accent-900); } - - + } }src/components/ui/TabNav/fragments/TabNavLink.tsx (1)
1-1: Remove unused importThe
useRefimport is defined but never used in this component.- import React, { useContext, useRef } from 'react'; + import React, { useContext } from 'react';🧰 Tools
🪛 GitHub Check: lint
[warning] 1-1:
'useRef' is defined but never usedsrc/components/ui/TabNav/fragments/TabNavRoot.tsx (2)
1-1: Remove unused importThe
useEffectimport is defined but never used in this component.- import React, { useEffect } from 'react'; + import React from 'react';🧰 Tools
🪛 GitHub Check: lint
[warning] 1-1:
'useEffect' is defined but never used
6-6: Remove unused importThe
useControllableStatehook is imported but never used in this component.- import useControllableState from '~/core/hooks/useControllableState';🧰 Tools
🪛 GitHub Check: lint
[warning] 6-6:
'useControllableState' is defined but never used
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/ui/TabNav/context/TabNav.context.tsx(1 hunks)src/components/ui/TabNav/fragments/TabNavLink.tsx(1 hunks)src/components/ui/TabNav/fragments/TabNavRoot.tsx(1 hunks)styles/themes/components/tab-nav.scss(1 hunks)
🧰 Additional context used
🪛 GitHub Check: lint
src/components/ui/TabNav/fragments/TabNavLink.tsx
[warning] 1-1:
'useRef' is defined but never used
src/components/ui/TabNav/fragments/TabNavRoot.tsx
[warning] 6-6:
'useControllableState' is defined but never used
[warning] 1-1:
'useEffect' is defined but never used
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (1)
src/components/ui/TabNav/context/TabNav.context.tsx (1)
1-11: LGTM! Context implementation is clean and follows best practicesThe TabNav context is implemented correctly with a well-defined TypeScript interface and proper default value.
kotAPI
added
the
automerge
2 participants
Summary by CodeRabbit