feat: ai-generative support for NavTab.Item and adds nimbus-ds/icons to monorepo dependencies - #122
feat: ai-generative support for NavTab.Item and adds nimbus-ds/icons to monorepo dependencies#122joacotornello wants to merge 5 commits into
Conversation
…to monorepo dependencies
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughMonorepo updates include dependency bumps and centralizing @nimbus-ds/icons at the root. Multiple component package.json files remove local devDependencies on @nimbus-ds/icons. NavTabs.Item gains a new appearance prop with an “ai-generative” variant, with changelog entries and Storybook stories added. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as App code
participant NTI as NavTabs.Item
participant Styles as Appearance Config
participant UI as Box/Icon
Dev->>NTI: Render NavTabs.Item({ appearance, active, icon, ... })
NTI->>Styles: Select config by appearance ("default" | "ai-generative")
Styles-->>NTI: { container, icon } style tokens
NTI->>UI: Render Box with container styles
NTI->>UI: Render Icon with icon styles
NTI-->>Dev: onClick callback (unchanged)
note over NTI,UI: Visual differences depend on appearance selection
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
Comment |
Getting startedPlease make sure you read our documentation on how to write code for components, stories and styles.
|
coderabbitai
Bot
added
dependencies
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsx (1)
17-91: Missing JSDoc documentation for the component.According to the coding guidelines, components should have comprehensive JSDoc comments including component description, prop descriptions, and explanations of complex logic.
Add JSDoc documentation:
+/** + * A navigation tab item component that supports different visual appearances. + * + * @component + * @param {NavTabsItemProps} props - The component props + * @param {React.ReactNode} props.icon - The icon to display in the tab item + * @param {boolean} [props.active=false] - Whether the tab item is currently active + * @param {boolean} [props.badge=false] - Whether to show a badge indicator + * @param {() => void} [props.onClick] - Click event handler + * @param {string} [props.ariaLabel] - Accessible label for screen readers + * @param {"default" | "ai-generative"} [props.appearance="default"] - Visual appearance variant + * @returns {React.ReactElement} The rendered NavTabsItem component + */ const NavTabsItem: React.FC<NavTabsItemProps> = ({
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
.yarn/versions/d407b440.ymlis excluded by!**/.yarn/**yarn.lockis excluded by!**/yarn.lock,!**/*.lock,!**/*.lock
📒 Files selected for processing (17)
CHANGELOG.md(1 hunks)package.json(1 hunks)packages/react/CHANGELOG.md(1 hunks)packages/react/src/components/AppShell/package.json(0 hunks)packages/react/src/components/EmptyMessage/package.json(0 hunks)packages/react/src/components/FormField/package.json(0 hunks)packages/react/src/components/MenuButton/package.json(0 hunks)packages/react/src/components/NavTabs/CHANGELOG.md(1 hunks)packages/react/src/components/NavTabs/package.json(0 hunks)packages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsx(2 hunks)packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx(2 hunks)packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.ts(1 hunks)packages/react/src/components/NavTabs/src/navTabs.stories.tsx(2 hunks)packages/react/src/components/Page/package.json(0 hunks)packages/react/src/components/ProductDataList/package.json(0 hunks)packages/react/src/components/SideModal/package.json(0 hunks)packages/react/src/components/Sortable/package.json(1 hunks)
💤 Files with no reviewable changes (8)
- packages/react/src/components/MenuButton/package.json
- packages/react/src/components/ProductDataList/package.json
- packages/react/src/components/AppShell/package.json
- packages/react/src/components/FormField/package.json
- packages/react/src/components/Page/package.json
- packages/react/src/components/SideModal/package.json
- packages/react/src/components/NavTabs/package.json
- packages/react/src/components/EmptyMessage/package.json
🧰 Additional context used
📓 Path-based instructions (10)
**/src/components/**
📄 CodeRabbit inference engine (.cursor/rules/components.mdc)
Sub-components must reside inside the src/components/ directory of the specific package
Files:
packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.tspackages/react/src/components/NavTabs/CHANGELOG.mdpackages/react/src/components/Sortable/package.jsonpackages/react/src/components/NavTabs/src/navTabs.stories.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/components.mdc)
**/*.{ts,tsx}: Define explicit prop interfaces for components
Implement proper TypeScript types throughout components
Files:
packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.tspackages/react/src/components/NavTabs/src/navTabs.stories.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx
⚙️ CodeRabbit configuration file
**/*.{ts,tsx}: Review the React and TypeScript code for adherence to component design system best practices, including:
- Component reusability, composability, and proper prop interfaces
- Consistent usage of @nimbus-ds/components, instead of native HTML elements
- Accessibility compliance (WCAG guidelines, ARIA attributes, keyboard navigation)
- Maintain comprehensive JSDoc comments with consistent style, documenting complex logic, and relevant references
- Full testing coverage (Jest unit tests)
- Performance optimization (memoization, loops)
- Component scalability and maintainability, using compound patterns as much as possible
- Each component should be self-contained and not depend on other components, and they act as containers for other components most of the time
- Proper TypeScript types and interfaces usage
- Component, prop, and storybook documentation
Highlight any deviations from these standards.
Files:
packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.tspackages/react/src/components/NavTabs/src/navTabs.stories.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx
**/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/components.mdc)
**/src/components/**/*.{ts,tsx}: Add JSDoc comments for all components and their props
Include component description, prop types/descriptions, explanations of complex logic, and relevant references in JSDoc
Handle large lists efficiently (e.g., virtualization)
Files:
packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.tspackages/react/src/components/NavTabs/src/navTabs.stories.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx
**/*.types.ts
📄 CodeRabbit inference engine (.cursor/rules/types.mdc)
**/*.types.ts: Export a ComponentNameProperties interface for each component; ComponentName must match the component name and use PascalCase
ComponentNameProperties must not inherit from HTMLElement properties
ComponentNameProperties must not inherit from BoxProperties
ComponentNameProperties must not inherit from large interfaces; include only specific props defined by the component (keep it minimal)
Use ComponentNameProperties primarily for documentation purposes; optionally export a separate ComponentNameProps that composes complete inheritance
Prefer type aliases for unions, intersections, and simple object types; name them in PascalCase
Keep types and interfaces focused with a single purpose; avoid large, multi-purpose types
Add JSDoc comments for all exported types, describing purpose and documenting constraints or special cases
Always sort type and interface exports alphabetically
Leverage TypeScript utility types (e.g., Partial, Pick<T,K>, Omit<T,K>) when appropriate to reduce duplication
Avoid using any; prefer unknown for truly unknown values and provide proper type guards when needed
Use PascalCase for type and interface names
Use camelCase for property names within types and interfaces
Use descriptive names for types and properties that indicate purpose
Keep types focused and minimal
Files:
packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.ts
⚙️ CodeRabbit configuration file
**/*.types.ts: Review TypeScript type definitions following these standards:
- Always export a 'ComponentNameProperties' interface, where the ComponentName is the name of the component. This interface should NOT inherit HTMLElement properties or BoxProperties, not any big interface as it will be used for documentation. It should ONLY contain the specific props this component defines.
- Prefer type aliases for unions, intersections, and simple object types
- Prefer ReactNode over string for titles, labels, and other text content, as it allows for more flexibility for clients
- Keep types and interfaces focused and single-purpose
- Use proper JSDoc comments for all exported types
- Leverage TypeScript utility types when appropriate (Partial, Pick, Omit)
- Ensure type names are descriptive and follow PascalCase convention
- Avoid type 'any' - use 'unknown' for truly unknown types
Flag any deviations from these patterns.
Files:
packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.ts
**/CHANGELOG.md
📄 CodeRabbit inference engine (.cursor/rules/changelogs.mdc)
Each package must have its own CHANGELOG.md file in the package root directory
Files:
packages/react/src/components/NavTabs/CHANGELOG.mdpackages/react/CHANGELOG.mdCHANGELOG.md
⚙️ CodeRabbit configuration file
**/CHANGELOG.md: Ensure CHANGELOG.md updates follow the established format: YYYY-MM-DD version with categorized entries (Breaking changes, New features, Bug fixes, Others).
Each entry must include PR reference and author, and changes must be properly versioned (major/minor/patch). Changes MUST be documented in their respective package's CHANGELOG.md.
CRITICAL: Clearly highlight and document the package bumps in the summary (or a comment, if unable), following exactly this structure: '@nimbus-ds/@|: .' For example: '@nimbus-ds/patterns@9.18.0|minor: Added Layout new pattern...'. It is crucial to respect the requested structure.
Files:
packages/react/src/components/NavTabs/CHANGELOG.mdpackages/react/CHANGELOG.mdCHANGELOG.md
{CHANGELOG.md,**/CHANGELOG.md}
📄 CodeRabbit inference engine (.cursor/rules/changelogs.mdc)
{CHANGELOG.md,**/CHANGELOG.md}: Changes must be documented in both the package-specific and root changelogs
Each release section must start with a header: '## YYYY-MM-DDversion'
Use semantic versioning (major.minor.patch) in the release header
Enclose the version in backticks in the release header
Use YYYY-MM-DD date format in the release header
Include category '#### 🛠 Breaking changes' when applicable
Include category '#### 🎉 New features'
Include category '#### 🐛 Bug fixes'
Include category '#### 📚 3rd party library updates'
Include category '#### 💡 Others'
Each entry must be a list item with description followed by PR link and contributor attribution: '- Description. ([#PR](full GitHub URL) by [@username](profile URL))'
Major version (x.0.0) indicates breaking changes
Minor version (0.x.0) indicates new features
Patch version (0.0.x) indicates bug fixes and minor changes
Every change must reference a PR number
PR links must use the full GitHub URL
PR numbers must be in the format '#PR'
Every change must credit the contributor
Use GitHub usernames with @ prefix for contributors
Link each contributor mention to their GitHub profile
Be concise but descriptive in change descriptions
Use present tense in change descriptions
Focus on what changed, not how it was implemented
Group related changes together within categories
List changes in chronological order within each category
Use proper Markdown syntax throughout the changelog
Maintain consistent spacing in headings and list items
Use the specified emoji codes for category headings
Keep entries in reverse chronological order (newest first)
Files:
packages/react/src/components/NavTabs/CHANGELOG.mdpackages/react/CHANGELOG.mdCHANGELOG.md
**/package.json
⚙️ CodeRabbit configuration file
Verify version updates follow SemVer: major for breaking changes, minor for new features, patch for bug fixes. Ensure dependencies are properly versioned and peer dependencies are correctly specified.
Files:
package.jsonpackages/react/src/components/Sortable/package.json
CHANGELOG.md
📄 CodeRabbit inference engine (.cursor/rules/changelogs.mdc)
The main repository must have a root CHANGELOG.md file
Files:
CHANGELOG.md
**/src/components/**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/components.mdc)
**/src/components/**/*.tsx: One component per file
Component file name should match the component name
Set the displayName property for each component and sub-component
Declare components as constants typed as React.FC
Ensure components meet WCAG 2.1 guidelines
Implement proper ARIA attributes where applicable
Ensure keyboard navigation support
Maintain proper focus management
Use memoization appropriately (e.g., React.memo, useMemo, useCallback)
Optimize render cycles and avoid unnecessary re-renders
Files:
packages/react/src/components/NavTabs/src/navTabs.stories.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/components.mdc)
**/*.stories.{ts,tsx}: Create comprehensive Storybook stories for each component
Document component usage in stories
Include examples of different component states in stories
Add controls for all props in stories
Files:
packages/react/src/components/NavTabs/src/navTabs.stories.tsxpackages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.stories.tsx
🧬 Code graph analysis (1)
packages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsx (1)
packages/react/src/components/NavTabs/src/components/NavTabsItem/navTabsItem.types.ts (1)
NavTabsItemProps(33-35)
🪛 markdownlint-cli2 (0.17.2)
packages/react/src/components/NavTabs/CHANGELOG.md
7-7: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
packages/react/CHANGELOG.md
8-8: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
⏰ Context from checks skipped due to timeout of 30000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build-and-deploy
- GitHub Check: Analyze SonarCloud
- GitHub Check: pipeline-quality
🔇 Additional comments (8)
packages/react/src/components/Sortable/package.json (1)
37-37: Approve — @nimbus-ds/icons devDependency removed; repo scan clean.
Search across packages/react/src/components/**/package.json found no @nimbus-ds/icons devDependency entries.CHANGELOG.md (1)
6-11: Root changelog OK — add package bump summary
- Add these bump-summary lines to the PR description:
@nimbus-ds/patterns@1.21.0|minor: Added ai-generative appearance for NavTabs.Item. @nimbus-ds/nav-tabs@1.3.0|minor: Added ai-generative appearance for NavTabs.Item.packages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsx (6)
3-8: LGTM! Added necessary imports for the new appearance feature.The additional imports of
BoxPropertiesandIconPropertiesare correctly added to support the new appearance type definitions.
12-15: Well-structured appearance interface design.The
NavTabsItemAppearanceinterface provides a clean way to encapsulate styling configurations for different appearances. UsingPartial<IconProperties>for the icon property is appropriate since we only need to override specific icon styles.
28-36: LGTM! Default appearance maintains existing behavior.The default appearance configuration correctly preserves the existing active/inactive styling logic with appropriate background and icon colors.
50-88: LGTM! Clean conditional rendering implementation.The component structure properly applies the appearance-based styling through conditional object spreading. The explicit return statement improves readability, and the badge rendering is correctly maintained within the updated structure.
25-25: Appearance prop correctly typed — no action required.
NavTabsItem.tsx defaults appearance to "default" and navTabsItem.types.ts declares appearance?: "default" | "ai-generative".
38-48: Confirm 'ai-generative' design tokens are defined and exportedFound usages:
- packages/react/src/components/NavTabs/src/components/NavTabsItem/NavTabsItem.tsx — background: "ai-generative-interactive-border", icon.color: "ai-generative"
- packages/react/src/components/FormField/src/formField.definitions.ts — "ai-generative" mapping
- stories / CHANGELOG references
Action: Verify tokens "ai-generative" and "ai-generative-interactive-border" exist in the design-tokens/theme package and are exported to the React package; if missing, add the tokens or provide component-level fallbacks/mapping to avoid broken styles at runtime.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #122 +/- ##
==========================================
+ Coverage 93.39% 93.51% +0.12%
==========================================
Files 180 180
Lines 1286 1296 +10
Branches 233 240 +7
==========================================
+ Hits 1201 1212 +11
+ Misses 81 80 -1
Partials 4 4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
|
🚀✨ Your Storybook preview is ready! Happy reviewing! 🎉 |
2 participants
Type
Changes proposed ✔️
Summary by CodeRabbit
New Features
Documentation
Chores