fix: remove warnings raised from our components#332
fix: remove warnings raised from our components#332joacotornello wants to merge 5 commits intomasterfrom
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 WalkthroughWalkthroughAdds a runtime warnings audit and changelog entries; updates Jest to ignore Changes
Sequence Diagram(s)sequenceDiagram
participant App as App
participant Tabs as Tabs (component)
participant DOM as div.container
App->>Tabs: render({ selected, onTabSelect, ...props })
Tabs->>Tabs: cast rest -> HTMLAttributes & Partial<ControlledTabsProperties>
Tabs->>Tabs: extract onTabSelect, selected (remove from rest)
Tabs->>Tabs: determine controlled vs uncontrolled
Tabs->>DOM: render <div {...containerProps}> (rest minus control props)
App-->>Tabs: user clicks a tab
alt controlled
Tabs->>App: call onTabSelect(selectedTab)
else uncontrolled
Tabs->>Tabs: set internal state
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes ✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
Getting startedPlease make sure you read our documentation on how to write code for components, stories and styles.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🔭 Outside diff range comments (4)
packages/react/src/atomic/Text/src/Text.tsx (2)
22-32: Eliminate unsafe any casts in sprinkles configAvoid any; type the sprinkles input using Partial<Parameters[0]> and pass strongly-typed props.
Apply this diff:
- const { className, style, otherProps } = text.sprinkle({ - ...(rest as Parameters<typeof text.sprinkle>[0]), - color: color as any, + const { className, style, otherProps } = text.sprinkle({ + ...(rest as Partial<Parameters<typeof text.sprinkle>[0]>), + color, textAlign, - lineHeight: lineHeight as any, - fontWeight: fontWeight as any, - fontSize: fontSize as any, - textDecoration: textDecoration as any, - WebkitLineClamp: lineClamp as any, - wordBreak: wordBreak as any, + lineHeight, + fontWeight, + fontSize, + textDecoration, + WebkitLineClamp: lineClamp, + wordBreak, });If TS complains about partials, we can pre-build a typed object:
// Outside the selected range (illustrative) const sprinkleProps: Partial<Parameters<typeof text.sprinkle>[0]> = { ...(rest as Partial<Parameters<typeof text.sprinkle>[0]>), color, textAlign, lineHeight, fontWeight, fontSize, textDecoration, WebkitLineClamp: lineClamp, wordBreak, }; const { className, style, otherProps } = text.sprinkle(sprinkleProps as Parameters<typeof text.sprinkle>[0]);
35-44: Stop forwarding arbitrary rest props to the DOMSpreading {...rest} onto the DOM element reintroduces the exact warnings this PR aims to eliminate (unsupported/custom props leaking to the DOM). Sprinkles already returns otherProps for safe forwarding (includes data-* / aria-*).
Apply this diff:
<As - {...rest} className={[ text.classnames.base, lineClamp && text.classnames.trim, className, ].join(" ")} style={style} {...otherProps} >Optional: guard className join to avoid “0” or “false” tokens when lineClamp is falsy:
- className={[ - text.classnames.base, - lineClamp && text.classnames.trim, - className, - ].join(" ")} + className={[ + text.classnames.base, + lineClamp ? text.classnames.trim : undefined, + className, + ].filter(Boolean).join(" ")}packages/react/src/atomic/Tooltip/src/tooltip.spec.tsx (1)
128-148: Prefer userEvent.hover and drop manual act to reduce flakinessThe sprinkle spy assertions look good. For the hover trigger here, switch to userEvent.hover to avoid explicit act and better reflect user intent.
Apply this diff inside this test:
- // Hover the anchor element to trigger the tooltip. - act(() => { - fireEvent.mouseEnter(screen.getByTestId("tooltip-container")); - }); + // Hover the anchor element to trigger the tooltip. + await userEvent.hover(screen.getByTestId("tooltip-container"));And add the missing import at the top of the file:
import userEvent from "@testing-library/user-event";packages/react/src/composite/Tabs/src/Tabs.tsx (1)
38-60: Render the active panel using React.Children.toArray to handle non-array children safelyIndexing
childrendirectly assumes it’s an array. UseReact.Children.toArrayto support any valid children shape and avoid runtime surprises.Apply this diff:
- {children[selectedTab]} + {React.Children.toArray(children)[selectedTab]}Optional hardening: clamp
selectedTabto the array bounds before indexing or guard against undefined to avoid rendering nothing when the index is out of range.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
.yarn/versions/7523a8d1.ymlis excluded by!**/.yarn/**
📒 Files selected for processing (12)
docs/warnings-audit.md(1 hunks)jest.config.ts(1 hunks)packages/react/CHANGELOG.md(1 hunks)packages/react/src/atomic/Icon/CHANGELOG.md(1 hunks)packages/react/src/atomic/Icon/src/utils/gradient/gradientFactory/gradientFactory.spec.ts(1 hunks)packages/react/src/atomic/Text/CHANGELOG.md(1 hunks)packages/react/src/atomic/Text/src/Text.tsx(2 hunks)packages/react/src/atomic/Tooltip/CHANGELOG.md(1 hunks)packages/react/src/atomic/Tooltip/src/tooltip.spec.tsx(1 hunks)packages/react/src/composite/Tabs/CHANGELOG.md(1 hunks)packages/react/src/composite/Tabs/src/Tabs.tsx(2 hunks)packages/react/src/composite/Tabs/src/components/TabsItem/TabsItem.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/CHANGELOG.md
📄 CodeRabbit Inference Engine (.cursor/rules/changelogs.mdc)
**/CHANGELOG.md: Each package must have its own CHANGELOG.md file in its root directory
The main repository must have a root CHANGELOG.md file
Changes must be documented in both the package-specific and root changelogs
Each changelog entry must have a date and version header in the format '## YYYY-MM-DDversion', using semantic versioning, with the version enclosed in backticks and the date in YYYY-MM-DD format
Use the following categories with their respective emojis as section headers: '#### 🛠 Breaking changes', '#### 🎉 New features', '#### 🐛 Bug fixes', '#### 📚 3rd party library updates', '#### 💡 Others'
Each changelog entry must follow the format: Description of the change. (#PR by @contributor)
Major version (x.0.0) for breaking changes, minor version (0.x.0) for new features, and patch version (0.0.x) for bug fixes and minor changes
Every change must reference a PR number, using the full GitHub URL and the format '#PR'
Every change must credit the contributor, using GitHub usernames with @ prefix and linking to the contributor's GitHub profile
Changelog entries must be concise but descriptive, use present tense, focus on what changed (not how), group related changes together, and list changes in chronological order within each category
Use proper Markdown syntax, maintain consistent spacing, use proper emoji codes, and keep entries in chronological order (newest first)
Files:
packages/react/src/atomic/Text/CHANGELOG.mdpackages/react/src/composite/Tabs/CHANGELOG.mdpackages/react/src/atomic/Tooltip/CHANGELOG.mdpackages/react/src/atomic/Icon/CHANGELOG.mdpackages/react/CHANGELOG.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/styles@9.18.0|minor: Added scroll-pane new composite component...'. It is crucial to respect the requested structure.
Files:
packages/react/src/atomic/Text/CHANGELOG.mdpackages/react/src/composite/Tabs/CHANGELOG.mdpackages/react/src/atomic/Tooltip/CHANGELOG.mdpackages/react/src/atomic/Icon/CHANGELOG.mdpackages/react/CHANGELOG.md
!packages/icons/src/assets/*.svg
📄 CodeRabbit Inference Engine (.cursor/rules/icon-creation.mdc)
Do not place icon files outside of
packages/icons/src/assets.
Files:
packages/react/src/atomic/Text/CHANGELOG.mdpackages/react/src/composite/Tabs/CHANGELOG.mdpackages/react/src/atomic/Tooltip/CHANGELOG.mdpackages/react/src/atomic/Tooltip/src/tooltip.spec.tsxpackages/react/src/atomic/Icon/CHANGELOG.mdjest.config.tspackages/react/src/atomic/Icon/src/utils/gradient/gradientFactory/gradientFactory.spec.tspackages/react/src/composite/Tabs/src/Tabs.tsxdocs/warnings-audit.mdpackages/react/CHANGELOG.mdpackages/react/src/atomic/Text/src/Text.tsxpackages/react/src/composite/Tabs/src/components/TabsItem/TabsItem.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/code.mdc)
**/*.{ts,tsx}: Enforce type safety—never use any or unsafe casts, and always declare explicit types. When a dynamic type is truly unavoidable, use unknown and narrow it explicitly. Never use any for props or state.
Replace magic numbers with named constants.
Always use strict equality operators (===, !==) instead of loose ones.
Ensure functions have consistent return types.
Avoid using deprecated APIs.
Ban the use of eval() entirely.
Handle exceptions properly; never swallow errors silently.
Omit unnecessary else branches after a return.
Refactor functions that exceed the acceptable cyclomatic complexity threshold >10.
Export only intended symbols; keep internals private.
Prefer RegExp.exec() over String.match().
Always provide default cases in switch statements.
Prefer for…of (or Array higher-order methods such as .map, .filter) over classic for loops where appropriate. Avoid for…in on arrays.
Avoid deeply nested code by extracting logic into functions.
Files:
packages/react/src/atomic/Tooltip/src/tooltip.spec.tsxjest.config.tspackages/react/src/atomic/Icon/src/utils/gradient/gradientFactory/gradientFactory.spec.tspackages/react/src/composite/Tabs/src/Tabs.tsxpackages/react/src/atomic/Text/src/Text.tsxpackages/react/src/composite/Tabs/src/components/TabsItem/TabsItem.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/styles package for styling and theming
- Accessibility compliance (WCAG guidelines, ARIA attributes, keyboard navigation)
- Cross-browser compatibility and progressive enhancement
- Maintain comprehensive JSDoc comments with consistent style, documenting complex logic, and relevant references
- Full testing coverage (Jest unit tests)
- Performance optimization (memoization, loops)
- Responsive design patterns
- Component scalability and maintainability
- Proper TypeScript types and interfaces usage
- Component, prop, and storybook documentation
Highlight any deviations from these standards.
Files:
packages/react/src/atomic/Tooltip/src/tooltip.spec.tsxjest.config.tspackages/react/src/atomic/Icon/src/utils/gradient/gradientFactory/gradientFactory.spec.tspackages/react/src/composite/Tabs/src/Tabs.tsxpackages/react/src/atomic/Text/src/Text.tsxpackages/react/src/composite/Tabs/src/components/TabsItem/TabsItem.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/code.mdc)
**/*.tsx: Use functional components instead of class components.
Props are required by default; mark a prop optional (?:) only when the component can render a sensible fallback. Clearly document all optional props.
Props are immutable—never mutate them. Clone or derive new objects instead of in-place modification.
Prevent prop drilling: Use context or composition patterns to avoid passing props through many layers.
Memoize components where appropriate: Use React.memo or useMemo to optimize performance of pure/presentational components.
Use useCallback for event handlers: Wrap callbacks in useCallback to avoid function recreation unless dependencies change.
Avoid side effects in render: Only use effects inside useEffect or equivalent hooks.
Avoid index-based keys in lists: Always use unique, stable identifiers as React keys.
Enforce accessibility (a11y): Validate ARIA roles, labels, and keyboard navigation for every component.
Name event handlers with handle or on: e.g., handleClick, onChangeInput.
Export only one component per file: Keep files atomic for maintainability and reusability.
Enforce component display names for better debugging.
Files:
packages/react/src/atomic/Tooltip/src/tooltip.spec.tsxpackages/react/src/composite/Tabs/src/Tabs.tsxpackages/react/src/atomic/Text/src/Text.tsxpackages/react/src/composite/Tabs/src/components/TabsItem/TabsItem.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/icon-creation.mdc)
Exported icon component should be PascalCase + 'Icon' (e.g.,
ShoppingCartIcon).
Files:
packages/react/src/atomic/Tooltip/src/tooltip.spec.tsxjest.config.tspackages/react/src/atomic/Icon/src/utils/gradient/gradientFactory/gradientFactory.spec.tspackages/react/src/composite/Tabs/src/Tabs.tsxpackages/react/src/atomic/Text/src/Text.tsxpackages/react/src/composite/Tabs/src/components/TabsItem/TabsItem.tsx
packages/react/src/**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/nimbus-design-system.mdc)
packages/react/src/**/*.tsx: All components should follow all accessibility guidelines, including ARIA roles and labels.
Do not use 'any' types in props unless extremely necessary.
Do not use inline styles or deprecated APIs in components.
Files:
packages/react/src/atomic/Tooltip/src/tooltip.spec.tsxpackages/react/src/composite/Tabs/src/Tabs.tsxpackages/react/src/atomic/Text/src/Text.tsxpackages/react/src/composite/Tabs/src/components/TabsItem/TabsItem.tsx
**/packages/react/src/atomic/**/*.{ts,tsx}
⚙️ CodeRabbit Configuration File
**/packages/react/src/atomic/**/*.{ts,tsx}: Review atomic components for dependency management in monorepo context:
- Evaluate if the component is a common dependency across multiple packages
- If widely used as a dependency, recommend adding the package name to the 'externals' attribute in webpack.config
- This prevents the component from being bundled multiple times across different packages
- Ensure proper package naming and versioning for external configuration
- Verify that the component is properly exported and consumed by dependent packages. IMPORTANT Constants declared within the package must be exported in order to be included in the final published build.
- Check for circular dependencies and proper dependency tree structure
Flag components that should be added to webpack 'externals' to optimize bundle size and prevent duplicate code in the monorepo build.
Files:
packages/react/src/atomic/Tooltip/src/tooltip.spec.tsxpackages/react/src/atomic/Icon/src/utils/gradient/gradientFactory/gradientFactory.spec.tspackages/react/src/atomic/Text/src/Text.tsx
🧬 Code Graph Analysis (2)
packages/react/src/atomic/Icon/src/utils/gradient/gradientFactory/gradientFactory.spec.ts (1)
packages/react/src/atomic/Icon/src/utils/gradient/types/types.ts (1)
GradientTypes(14-14)
packages/react/src/composite/Tabs/src/Tabs.tsx (2)
packages/react/src/composite/Tabs/src/tabs.types.ts (1)
ControlledTabsProperties(27-40)packages/react/src/composite/Tabs/src/tabs.definitions.ts (1)
isControlled(11-12)
🪛 markdownlint-cli2 (0.17.2)
packages/react/src/composite/Tabs/CHANGELOG.md
7-7: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
packages/react/src/atomic/Tooltip/CHANGELOG.md
7-7: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
packages/react/src/atomic/Icon/CHANGELOG.md
7-7: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
docs/warnings-audit.md
1-1: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
packages/react/CHANGELOG.md
7-7: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
🪛 LanguageTool
docs/warnings-audit.md
[grammar] ~1-~1: Use correct spacing
Context: ## Runtime warnings audit This document traces the component-by-co...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~3-~3: Use correct spacing
Context: ...rectory order and updated as fixes land. Format per component: - Component: Name...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~5-~5: Use correct spacing
Context: ...ed as fixes land. Format per component: - Component: Name and path - Repro: How it...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~7-~7: There might be a mistake here.
Context: ...r component: - Component: Name and path - Repro: How it was rendered or which test...
(QB_NEW_EN)
[grammar] ~8-~8: There might be a mistake here.
Context: ...o: How it was rendered or which test ran - Observed warnings: Raw console warnings/...
(QB_NEW_EN)
[grammar] ~9-~9: There might be a mistake here.
Context: ...ed warnings: Raw console warnings/errors - Analysis: Why it happens - Fix: Code cha...
(QB_NEW_EN)
[grammar] ~10-~10: There might be a mistake here.
Context: ...rnings/errors - Analysis: Why it happens - Fix: Code change summary - Status: Open/...
(QB_NEW_EN)
[grammar] ~11-~11: There might be a mistake here.
Context: ...hy it happens - Fix: Code change summary - Status: Open/Fixed --- ### Badge (`pac...
(QB_NEW_EN)
[grammar] ~12-~12: Use correct spacing
Context: ...Code change summary - Status: Open/Fixed --- ### Badge (packages/react/src/atomic/Badge...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~16-~16: Use correct spacing
Context: ...adge (packages/react/src/atomic/Badge) - Repro: `yarn test packages/react/src/ato...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~18-~18: There might be a mistake here.
Context: ...ages/react/src/atomic/Badge) - Repro: yarn test packages/react/src/atomic/Badge/src/badge.spec.tsx` - Observed warnings: - Analysis: - Fix: - ...
(QB_NEW_EN)
[grammar] ~19-~19: There might be a mistake here.
Context: ...src/badge.spec.tsx` - Observed warnings: - Analysis: - Fix: - Status: Pending ### ...
(QB_NEW_EN)
[grammar] ~20-~20: There might be a mistake here.
Context: ...ec.tsx - Observed warnings: - Analysis: - Fix: - Status: Pending ### Chip (packa...
(QB_NEW_EN)
[grammar] ~21-~21: There might be a mistake here.
Context: ... - Observed warnings: - Analysis: - Fix: - Status: Pending ### Chip (`packages/rea...
(QB_NEW_EN)
[grammar] ~22-~22: Use correct spacing
Context: ...gs: - Analysis: - Fix: - Status: Pending ### Chip (packages/react/src/atomic/Chip) ...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~24-~24: Use correct spacing
Context: ... Chip (packages/react/src/atomic/Chip) - Repro: `yarn test packages/react/src/ato...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~31-~31: Use correct spacing
Context: ...prinkles) are forwarded. - Status: Fixed ### Tabs (`packages/react/src/composite/Tabs...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~33-~33: Use correct spacing
Context: ...bs (packages/react/src/composite/Tabs) - Repro: `yarn test packages/react/src/com...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~40-~40: Use correct spacing
Context: ...Propsinto the
. - Status: Fixed ### Tooltip (packages/react/src/atomic/Tool...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~42-~42: Use correct spacing
Context: ...ip (packages/react/src/atomic/Tooltip) - Repro: `yarn test packages/react/src/ato...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~49-~49: Use correct spacing
Context: ...dexplicitly for tests. - Status: Fixed ### Jest configuration (global) - Repro:y...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~51-~51: Use correct spacing
Context: ...: Fixed ### Jest configuration (global) - Repro: yarn test packages/react - Obse...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
🔇 Additional comments (8)
packages/react/src/atomic/Text/src/Text.tsx (1)
19-21: Prop addition looks goodAdding wordBreak to the component API and forwarding it to sprinkles aligns with the rest-props cleanup and preserves the public API.
Confirm that TextProps already includes wordBreak (it appears supported since 6.3.0) and that Storybook and docs reflect it being passed to sprinkles.
jest.config.ts (1)
73-73: LGTM: Ignoring node_modules and dist in test discovery is the right callThis prevents Jest from collecting tests or fixtures inside built artifacts and third-party deps, which helps eliminate noisy warnings and speeds up discovery. No other config conflicts here.
packages/react/src/composite/Tabs/src/components/TabsItem/TabsItem.tsx (1)
12-19: Good: filter out non-DOM prop (labelContent) to avoid React warningsDestructuring labelContent prevents leaking unknown attributes onto the DOM node. This aligns with the Tabs container fix and keeps the DOM clean. Nothing else in rest looks suspicious.
packages/react/src/atomic/Icon/src/utils/gradient/gradientFactory/gradientFactory.spec.ts (1)
50-59: LGTM: Silence console.warn with a scoped spy and restore with finallyThe try/finally ensures no cross-test pollution, and the assertions still validate the unknown type path correctly. Solid test hygiene.
packages/react/src/composite/Tabs/src/Tabs.tsx (3)
39-39: Good fix: stop forwarding control props to the DOMSpreading
containerProps(withonTabSelect/selectedstripped) eliminates React unknown-prop warnings on the root div.
1-1: Keep type imports until the cast is removedThe
HTMLAttributesandControlledTabsPropertiestypes are still in use for therest as HTMLAttributes<HTMLDivElement> & Partial<ControlledTabsProperties>cast inTabs.tsx(around lines 27–30). Only once you refactor or remove this cast should you drop those imports.Likely an incorrect or invalid review comment.
33-36: Tighten theisControlledtype guard intabs.definitions.tsThe current guard uses
props: anyand checks only for property existence, which can lead to unsafe “in” operations onnull/non-objects and loses type-safety. Switch toprops: unknown, add a runtime object/null check, and use a predicate return type.• File to update:
packages/react/src/composite/Tabs/src/tabs.definitions.ts (around line 11)
• Replace:export const isControlled = (props: any): props is ControlledTabsProperties => "selected" in props && "onTabSelect" in props;• With:
export const isControlled = ( props: unknown ): props is ControlledTabsProperties => typeof props === "object" && props !== null && "selected" in props && "onTabSelect" in props;Also consider applying this pattern in SegmentedControl and Stepper definitions for consistency.
[optional_refactors_recommended]docs/warnings-audit.md (1)
51-59: Solid: capturing Jest config root-cause and fixDocumenting
testPathIgnorePatternsis helpful for future maintainers and explains the reduced noise in CI runs.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #332 +/- ##
=======================================
Coverage 99.35% 99.35%
=======================================
Files 357 357
Lines 2649 2650 +1
Branches 434 434
=======================================
+ Hits 2632 2633 +1
Misses 15 15
Partials 2 2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
packages/react/CHANGELOG.md (1)
5-10: Fix malformed PR link and add mandatory bump one-liner to PR description
- The PR URL is incorrect: it points to /pull/joacotornello instead of /pull/332. This breaks the changelog contract.
- Per repository guidelines, add the package bump summary to the PR description using the exact format.
Apply this diff to fix the link:
- - Internal cleanups and tests: addressed warnings across `Text`, `Tooltip`, `Icon` (gradient utilities) and `Tabs`. No public API or behavior changes. ([#332](https://github.com/TiendaNube/nimbus-design-system/pull/joacotornello) by [@joacotornello](https://github.com/joacotornello)) + - Internal cleanups and tests: addressed warnings across `Text`, `Tooltip`, `Icon` (gradient utilities) and `Tabs`. No public API or behavior changes. ([#332](https://github.com/TiendaNube/nimbus-design-system/pull/332) by [@joacotornello](https://github.com/joacotornello))Add the bump summary to the PR description (verify versions/types are correct for this PR scope):
- @nimbus-ds/react@5.17.4|patch: Internal cleanups and tests; addressed warnings across Text, Tooltip, Icon (gradient utilities) and Tabs.
- @nimbus-ds/text@6.4.1|patch: Resolved internal typing warnings in sprinkle usage; added wordBreak prop.
- @nimbus-ds/tooltip@2.6.1|patch: Tests updated to avoid spreading non-DOM props; silenced warnings.
- @nimbus-ds/icon@3.2.2|patch: Gradient utilities tests silenced noisy warnings; no API changes.
- @nimbus-ds/tabs@2.5.1|patch: Filtered control props from DOM on container and item.
Run this script to verify there are no remaining placeholders and the PR link is correct across changelogs:
#!/usr/bin/env bash set -euo pipefail echo "Scanning CHANGELOGs for placeholders and PR link correctness…" # 1) No placeholders rg -n --hidden --glob '**/CHANGELOG.md' '\bTBD\b' || echo "OK: No 'TBD' placeholders." # 2) Correct PR link in this file rg -n -C2 '\[#332\]\(https://github.com/TiendaNube/nimbus-design-system/pull/332\)' packages/react/CHANGELOG.md # 3) Optional: confirm related packages reference this PR (if they were bumped here) for f in \ packages/react/src/atomic/Text/CHANGELOG.md \ packages/react/src/atomic/Tooltip/CHANGELOG.md \ packages/react/src/atomic/Icon/CHANGELOG.md \ packages/react/src/composite/Tabs/CHANGELOG.md do [ -f "$f" ] || continue echo "---- $f ----" rg -n -C1 '\[#332\]' "$f" || echo "WARN: $f does not reference #332 (verify if it should)." donepackages/react/src/composite/Tabs/src/Tabs.tsx (1)
25-31: Avoid unsafe type assertion; fold DOM props into TabsProps and destructure without castsGood call aliasing onTabSelect to _onTabSelect to keep control props out of DOM. However, the assertion “as HTMLAttributes & Partial” weakens type safety and violates the guideline to avoid unsafe casts. Model TabsProps to already include DOM attributes so you can destructure directly.
Minimal change in this file after updating the types:
- } = rest as HTMLAttributes<HTMLDivElement> & - Partial<ControlledTabsProperties>; + } = rest;Outside this file, tighten the exported types so the cast is unnecessary (example):
// tabs.types.ts import type { HTMLAttributes } from "react"; export interface BaseTabsProperties { children: React.ReactNode; preSelectedTab?: number; fullWidth?: boolean; } export interface UncontrolledTabsProperties extends BaseTabsProperties { selected?: never; onTabSelect?: never; } export interface ControlledTabsProperties extends BaseTabsProperties { selected: number; onTabSelect: (index: number) => void; preSelectedTab?: never; } // Include DOM attributes the root div forwards export type TabsDOMProps = HTMLAttributes<HTMLDivElement>; export type TabsProps = | (ControlledTabsProperties & TabsDOMProps) | (UncontrolledTabsProperties & TabsDOMProps);Note: After removing the assertion, the named import HTMLAttributes on Line 1 can be dropped.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
packages/core/styles/CHANGELOG.md(1 hunks)packages/react/CHANGELOG.md(1 hunks)packages/react/src/atomic/Icon/CHANGELOG.md(1 hunks)packages/react/src/atomic/Text/CHANGELOG.md(1 hunks)packages/react/src/atomic/Tooltip/CHANGELOG.md(1 hunks)packages/react/src/composite/Tabs/CHANGELOG.md(1 hunks)packages/react/src/composite/Tabs/src/Tabs.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/CHANGELOG.md
📄 CodeRabbit Inference Engine (.cursor/rules/changelogs.mdc)
**/CHANGELOG.md: Each package must have its own CHANGELOG.md file in its root directory
The main repository must have a root CHANGELOG.md file
Changes must be documented in both the package-specific and root changelogs
Each changelog entry must have a date and version header in the format '## YYYY-MM-DDversion', using semantic versioning, with the version enclosed in backticks and the date in YYYY-MM-DD format
Use the following categories with their respective emojis as section headers: '#### 🛠 Breaking changes', '#### 🎉 New features', '#### 🐛 Bug fixes', '#### 📚 3rd party library updates', '#### 💡 Others'
Each changelog entry must follow the format: Description of the change. (#PR by @contributor)
Major version (x.0.0) for breaking changes, minor version (0.x.0) for new features, and patch version (0.0.x) for bug fixes and minor changes
Every change must reference a PR number, using the full GitHub URL and the format '#PR'
Every change must credit the contributor, using GitHub usernames with @ prefix and linking to the contributor's GitHub profile
Changelog entries must be concise but descriptive, use present tense, focus on what changed (not how), group related changes together, and list changes in chronological order within each category
Use proper Markdown syntax, maintain consistent spacing, use proper emoji codes, and keep entries in chronological order (newest first)
Files:
packages/core/styles/CHANGELOG.mdpackages/react/src/composite/Tabs/CHANGELOG.mdpackages/react/CHANGELOG.mdpackages/react/src/atomic/Tooltip/CHANGELOG.mdpackages/react/src/atomic/Icon/CHANGELOG.mdpackages/react/src/atomic/Text/CHANGELOG.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/styles@9.18.0|minor: Added scroll-pane new composite component...'. It is crucial to respect the requested structure.
Files:
packages/core/styles/CHANGELOG.mdpackages/react/src/composite/Tabs/CHANGELOG.mdpackages/react/CHANGELOG.mdpackages/react/src/atomic/Tooltip/CHANGELOG.mdpackages/react/src/atomic/Icon/CHANGELOG.mdpackages/react/src/atomic/Text/CHANGELOG.md
!packages/icons/src/assets/*.svg
📄 CodeRabbit Inference Engine (.cursor/rules/icon-creation.mdc)
Do not place icon files outside of
packages/icons/src/assets.
Files:
packages/core/styles/CHANGELOG.mdpackages/react/src/composite/Tabs/CHANGELOG.mdpackages/react/CHANGELOG.mdpackages/react/src/atomic/Tooltip/CHANGELOG.mdpackages/react/src/atomic/Icon/CHANGELOG.mdpackages/react/src/atomic/Text/CHANGELOG.mdpackages/react/src/composite/Tabs/src/Tabs.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/code.mdc)
**/*.{ts,tsx}: Enforce type safety—never use any or unsafe casts, and always declare explicit types. When a dynamic type is truly unavoidable, use unknown and narrow it explicitly. Never use any for props or state.
Replace magic numbers with named constants.
Always use strict equality operators (===, !==) instead of loose ones.
Ensure functions have consistent return types.
Avoid using deprecated APIs.
Ban the use of eval() entirely.
Handle exceptions properly; never swallow errors silently.
Omit unnecessary else branches after a return.
Refactor functions that exceed the acceptable cyclomatic complexity threshold >10.
Export only intended symbols; keep internals private.
Prefer RegExp.exec() over String.match().
Always provide default cases in switch statements.
Prefer for…of (or Array higher-order methods such as .map, .filter) over classic for loops where appropriate. Avoid for…in on arrays.
Avoid deeply nested code by extracting logic into functions.
Files:
packages/react/src/composite/Tabs/src/Tabs.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/styles package for styling and theming
- Accessibility compliance (WCAG guidelines, ARIA attributes, keyboard navigation)
- Cross-browser compatibility and progressive enhancement
- Maintain comprehensive JSDoc comments with consistent style, documenting complex logic, and relevant references
- Full testing coverage (Jest unit tests)
- Performance optimization (memoization, loops)
- Responsive design patterns
- Component scalability and maintainability
- Proper TypeScript types and interfaces usage
- Component, prop, and storybook documentation
Highlight any deviations from these standards.
Files:
packages/react/src/composite/Tabs/src/Tabs.tsx
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/code.mdc)
**/*.tsx: Use functional components instead of class components.
Props are required by default; mark a prop optional (?:) only when the component can render a sensible fallback. Clearly document all optional props.
Props are immutable—never mutate them. Clone or derive new objects instead of in-place modification.
Prevent prop drilling: Use context or composition patterns to avoid passing props through many layers.
Memoize components where appropriate: Use React.memo or useMemo to optimize performance of pure/presentational components.
Use useCallback for event handlers: Wrap callbacks in useCallback to avoid function recreation unless dependencies change.
Avoid side effects in render: Only use effects inside useEffect or equivalent hooks.
Avoid index-based keys in lists: Always use unique, stable identifiers as React keys.
Enforce accessibility (a11y): Validate ARIA roles, labels, and keyboard navigation for every component.
Name event handlers with handle or on: e.g., handleClick, onChangeInput.
Export only one component per file: Keep files atomic for maintainability and reusability.
Enforce component display names for better debugging.
Files:
packages/react/src/composite/Tabs/src/Tabs.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/icon-creation.mdc)
Exported icon component should be PascalCase + 'Icon' (e.g.,
ShoppingCartIcon).
Files:
packages/react/src/composite/Tabs/src/Tabs.tsx
packages/react/src/**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/nimbus-design-system.mdc)
packages/react/src/**/*.tsx: All components should follow all accessibility guidelines, including ARIA roles and labels.
Do not use 'any' types in props unless extremely necessary.
Do not use inline styles or deprecated APIs in components.
Files:
packages/react/src/composite/Tabs/src/Tabs.tsx
🧬 Code Graph Analysis (1)
packages/react/src/composite/Tabs/src/Tabs.tsx (2)
packages/react/src/composite/Tabs/src/tabs.types.ts (1)
ControlledTabsProperties(27-40)packages/react/src/composite/Tabs/src/tabs.definitions.ts (1)
isControlled(11-12)
🪛 markdownlint-cli2 (0.17.2)
packages/react/src/composite/Tabs/CHANGELOG.md
7-7: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
packages/react/src/atomic/Icon/CHANGELOG.md
7-7: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
packages/react/src/atomic/Text/CHANGELOG.md
7-7: 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). (2)
- GitHub Check: pipeline-quality
- GitHub Check: Analyze SonarCloud
🔇 Additional comments (8)
packages/core/styles/CHANGELOG.md (1)
15-15: LGTM! The changelog entry is now properly formatted.The entry correctly documents the Toast progress variant background change with proper PR reference and contributor attribution.
packages/react/src/atomic/Text/CHANGELOG.md (1)
5-10: Changelog structure looks good despite linting warning.The entry properly follows the established format with version, category, and complete PR/author attribution. The markdownlint warning about heading hierarchy can be safely ignored as this follows the established pattern throughout Nimbus changelogs.
packages/react/src/composite/Tabs/CHANGELOG.md (2)
9-9: Excellent changelog entry with comprehensive technical detail.The entry accurately describes the internal improvements for a11y/typing warnings and controlled/uncontrolled handling refinements while clearly stating no public API changes. This aligns perfectly with the code changes observed in the related Tabs components.
5-10: Well-structured changelog entry follows Nimbus conventions.The version format, date structure, and categorization under "Others" is consistent with the established patterns. The markdownlint heading hierarchy warning can be ignored as this matches the standard Nimbus changelog format.
packages/react/src/atomic/Icon/CHANGELOG.md (1)
5-10: Comprehensive test coverage improvement documented properly.The changelog entry effectively communicates that gradient utilities testing was enhanced and warnings were silenced, with clear indication of no API/behavior impact. This aligns well with the test-focused nature of this maintenance work.
packages/react/src/atomic/Tooltip/CHANGELOG.md (2)
9-9: Well-crafted changelog entry for test improvements.The entry clearly describes the sprinkle integration test enhancements and warning resolution in the test environment, with proper emphasis that no API or behavior changes occurred. This provides good context for the maintenance nature of these changes.
5-10: Changelog follows established Nimbus patterns correctly.The version, date format, and categorization under "Others" maintains consistency with the project's conventions. The markdownlint heading level warning is a false positive given the established changelog structure across the design system.
packages/react/src/composite/Tabs/src/Tabs.tsx (1)
39-39: LGTM: rest-props leakage fixSpreading containerProps instead of rest prevents control props from leaking to the DOM and silences the React unknown-prop warning.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 6
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
packages/react/src/atomic/Icon/CHANGELOG.md(1 hunks)packages/react/src/atomic/Text/CHANGELOG.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/CHANGELOG.md
📄 CodeRabbit inference engine (.cursor/rules/changelogs.mdc)
**/CHANGELOG.md: Each package must have its own CHANGELOG.md file in its root directory
The main repository must have a root CHANGELOG.md file
Changes must be documented in both the package-specific and root changelogs
Each changelog entry must have a date and version header in the format '## YYYY-MM-DDversion', using semantic versioning, with the version enclosed in backticks and the date in YYYY-MM-DD format
Use the following categories with their respective emojis as section headers: '#### 🛠 Breaking changes', '#### 🎉 New features', '#### 🐛 Bug fixes', '#### 📚 3rd party library updates', '#### 💡 Others'
Each changelog entry must follow the format: Description of the change. (#PR by @contributor)
Major version (x.0.0) for breaking changes, minor version (0.x.0) for new features, and patch version (0.0.x) for bug fixes and minor changes
Every change must reference a PR number, using the full GitHub URL and the format '#PR'
Every change must credit the contributor, using GitHub usernames with @ prefix and linking to the contributor's GitHub profile
Changelog entries must be concise but descriptive, use present tense, focus on what changed (not how), group related changes together, and list changes in chronological order within each category
Use proper Markdown syntax, maintain consistent spacing, use proper emoji codes, and keep entries in chronological order (newest first)
Files:
packages/react/src/atomic/Text/CHANGELOG.mdpackages/react/src/atomic/Icon/CHANGELOG.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/styles@9.18.0|minor: Added scroll-pane new composite component...'. It is crucial to respect the requested structure.
Files:
packages/react/src/atomic/Text/CHANGELOG.mdpackages/react/src/atomic/Icon/CHANGELOG.md
!packages/icons/src/assets/*.svg
📄 CodeRabbit inference engine (.cursor/rules/icon-creation.mdc)
Do not place icon files outside of
packages/icons/src/assets.
Files:
packages/react/src/atomic/Text/CHANGELOG.mdpackages/react/src/atomic/Icon/CHANGELOG.md
🪛 GitHub Actions: check-version
packages/react/src/atomic/Text/CHANGELOG.md
[error] 1-1: Workspace modified since base commit: packages/react/src/atomic/Text/CHANGELOG.md. Release strategy is not attached.
packages/react/src/atomic/Icon/CHANGELOG.md
[error] 1-1: Workspace modified since base commit: packages/react/src/atomic/Icon/CHANGELOG.md. Release strategy is not attached.
🪛 markdownlint-cli2 (0.17.2)
packages/react/src/atomic/Icon/CHANGELOG.md
7-7: Heading levels should only increment by one level at a time
Expected: h3; Actual: h4
(MD001, heading-increment)
🔇 Additional comments (3)
packages/react/src/atomic/Icon/CHANGELOG.md (2)
5-5: Version/date header format looks correct."## 2025-08-15
3.2.2" matches the required pattern and a patch bump is appropriate for non-functional test/warning tweaks.
9-9: PR reference and author link are now correct.Good fix on replacing placeholders and correcting the malformed URL. Nothing else to change here.
packages/react/src/atomic/Text/CHANGELOG.md (1)
5-10: Changelog entry looks correct and follows the house style.
- Date/version header format is valid.
- Category and emoji match guidelines.
- PR link and author attribution are present and correct.
|
🚀✨ Your Storybook preview is ready! Happy reviewing! 🎉 |
|
2 participants
Type
Changes proposed ✔️
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Tests