Skip to content

Omnidoc: prop comments#6684

Merged
ckifer merged 4 commits intomainfrom
omnidoc-comments
Nov 28, 2025
Merged

Omnidoc: prop comments#6684
ckifer merged 4 commits intomainfrom
omnidoc-comments

Conversation

@PavelVanecek
Copy link
Collaborator

@PavelVanecek PavelVanecek commented Nov 24, 2025

Description

Adds new capability to omnidoc: checking that prop comments/descriptions are the same.

Also includes fixes for Area for a preview. Other components are excluded for now, I will work on them one by one.

Related Issue

#6069

Summary by CodeRabbit

  • New Features

    • Added ability to retrieve property documentation across multiple sources (API docs, Storybook, and source code).
    • Expanded Area component with animation controls, styling options, and event handlers; introduced default strokeWidth value.
  • Tests

    • Added comprehensive test suites for documentation consistency validation.
    • Updated test expectations to reflect new strokeWidth defaults.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 24, 2025

Walkthrough

This PR introduces a new getCommentOf(component: string, prop: string): string | undefined method across the DocReader interface and its implementations (ApiDocReader, ProjectDocReader, StorybookDocReader) to retrieve inline documentation comments for component properties. It simultaneously expands the Area component's public API with additional properties and updates related tests and Storybook configurations to reflect the new defaults and API surface.

Changes

Cohort / File(s) Summary
DocReader Interface & Implementations
omnidoc/DocReader.ts, omnidoc/readApiDoc.ts, omnidoc/readProject.ts, omnidoc/readStorybookDoc.ts
Added new public method `getCommentOf(component: string, prop: string): string
DocReader Tests
omnidoc/omnidoc.spec.ts, omnidoc/readApiDoc.spec.ts, omnidoc/readProject.spec.ts, omnidoc/readStorybookDoc.spec.ts
Added comprehensive test suites validating getCommentOf functionality across all readers, including positive cases, undefined returns for unknown components/props, and comment consistency checks. omnidoc.spec.ts introduces comment normalization utilities and cross-source consistency validation with exclusion whitelists.
Area Component Props
src/cartesian/Area.tsx
Expanded AreaProps interface with 22 new public properties including activeDot, animationBegin, animationDuration, baseLine, connectNulls, dot, id, isAnimationActive, label, legendType, name, onAnimationEnd, onAnimationStart, event handlers (onClick, onMouse*), stroke, strokeWidth, type, unit, xAxisId, yAxisId. Updated defaultAreaProps to include strokeWidth: 1.
Area Storybook Story
storybook/stories/API/cartesian/Area.stories.tsx
Introduced AreaArgTypes constant encapsulating Area story argTypes including stroke control. Updated default export's argTypes and API story args to reference the new constant via getStoryArgsFromArgsTypesObject.
Area Component Tests
test/cartesian/Area.spec.tsx
Updated test expectations to include strokeWidth: 1 in Area-related payloads and render attributes.
Legend & Tooltip Tests
test/component/Legend.spec.tsx, test/component/Tooltip/Tooltip.content.spec.tsx, test/component/Tooltip/itemSorter.spec.tsx
Updated test expectations across multiple test cases to reflect strokeWidth: 1 as default value in legend item payloads and tooltip content items instead of undefined.
Area API Documentation
www/src/docs/api/Area.ts
Updated AreaAPI.props.strokeWidth.defaultVal from string '1' to number 1.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

  • Areas requiring extra attention:
    • omnidoc/readProject.ts: New getJSDocFromDeclaration helper logic for JSDoc extraction; verify correctness of JSDoc parsing and formatting
    • src/cartesian/Area.tsx: Significant expansion of public AreaProps interface; ensure consistency with internal implementation and validate type definitions for new event handlers and animation props
    • Test expectations in omnidoc/omnidoc.spec.ts: Large whitelists of excluded components; verify exclusion logic and consistency criteria are correct
    • Cross-reader consistency: Ensure all four reader implementations handle edge cases uniformly (missing components, missing props, undefined descriptions)

Possibly related PRs

Suggested labels

enhancement

Suggested reviewers

  • ckifer

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Description check ❓ Inconclusive The description adequately covers purpose and scope, but lacks detail in testing procedures and missing checklist items per template. Fill in 'How Has This Been Tested?' section with specific test details, mark applicable checkboxes (e.g., 'New feature', 'I have added tests'), and confirm documentation updates are needed.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Omnidoc: prop comments' is concise and directly reflects the main change—adding prop comment/documentation checking capability to omnidoc.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch omnidoc-comments

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/cartesian/Area.tsx (1)

463-499: Guard against non‑numeric strokeWidth when computing animation clip rects

VerticalRect and HorizontalRect now size the animation clip rectangles using:

width={maxX + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1)}
// and
height={Math.floor(maxY + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1))}

If a caller ever passes a non‑numeric strokeWidth string (e.g. 'inherit', 'thin'), parseInt will return NaN, and you’ll end up with width / height as NaN even though maxX / maxY are valid numbers. Previously this always added 1, so the new behavior is slightly more fragile.

To keep the intent (“pad by stroke width when numeric, otherwise fall back to 1”) you could normalize like:

- width={maxX + (strokeWidth ? parseInt(`${strokeWidth}`, 10) : 1)}
+ const numericStrokeWidth = strokeWidth == null ? NaN : Number.parseFloat(String(strokeWidth));
+ const extra = Number.isFinite(numericStrokeWidth) ? numericStrokeWidth : 1;
+ width={maxX + extra}

and similarly for the vertical height path.

This preserves existing behavior for default and typical numeric stroke widths, while avoiding NaN dimensions for odd inputs.

Also applies to: 502-539, 541-559

🧹 Nitpick comments (4)
omnidoc/readApiDoc.ts (1)

68-86: API doc comment lookup looks good; consider a safer locale fallback

getCommentOf correctly mirrors how API docs store desc and cleanly returns undefined when a component or prop isn’t documented. One minor robustness tweak you could consider: when desc is an object and desc['en-US'] is missing, optionally fall back to another available locale (e.g., the first key) instead of returning undefined. This would make the helper more resilient to partial localization without changing the primary “en‑US first” behavior.

omnidoc/readStorybookDoc.ts (1)

134-163: Storybook comment retrieval is correct; shared lookup logic could be DRYed up

getCommentOf correctly reuses the same component/argTypes discovery pattern as getDefaultValueOf and returns argType.description when present, otherwise undefined. That’s exactly what the omnidoc tests expect.

There is some duplicated code between getDefaultValueOf and getCommentOf (finding the story module, validating argTypes, extracting the StorybookArg). If you touch this again, consider extracting a small helper like getStoryArgType(component, prop): StorybookArg | undefined and have both methods delegate to it.

storybook/stories/API/cartesian/Area.stories.tsx (1)

12-61: Area Storybook argTypes consolidation looks consistent with the new Area API

Defining a dedicated AreaArgTypes and driving both argTypes and API.args from it is a good move:

  • The merge order (AreaSpecificPropsLineStyle → Area‑specific stroke/dotAnimationPropslegendTypeGeneralPropsdataResponsivePropsbaseLine) is sane and lets you override shared Line props (e.g., dot) with Area‑specific defaults.
  • Using getStoryArgsFromArgsTypesObject(AreaArgTypes) to seed API.args keeps Storybook defaults aligned with argTypes, while the explicit overrides (e.g., stroke, dot, activeDot, tooltipType) tailor the demo.

The only thing to watch over time is that the duplicated dot/stroke descriptions here stay in sync with any shared definitions in Styles.ts, but that’s a documentation maintenance concern rather than a correctness issue.

Also applies to: 99-113

omnidoc/readProject.ts (1)

371-432: Project comment lookup works; optional improvements for multi-declaration origin bias and error handling clarity

The new getCommentOf + getJSDocFromDeclaration pipeline is nicely structured, and the ts-morph APIs you're using (Node.isJSDocable, getJsDocs(), getComment()) are confirmed to work correctly for interface properties and type aliases.

  • You reuse getPropMeta and prefer origin === 'recharts', which matches how default values are prioritized.
  • You first check @description tags and then fall back to the main JSDoc body, which is reasonable for mixed TSDoc/JSDoc usage.
  • getJSDocFromDeclaration handles both string and node-array comments defensively.

Two optional refinements worth considering:

  1. Multiple declarations (DOM + Recharts)
    For props coming from an intersection of Recharts and DOM types, property.getDeclarations() can include both sources. Right now you take the first declaration with a non‑undefined comment, which may pick the DOM JSDoc even when targetProp.origin === 'recharts'. To keep the "prefer Recharts docs" behavior consistent, you could:

    const declarations = property.getDeclarations();
    const preferred = declarations.find(decl => this.getDeclarationOrigin(decl) === targetProp.origin)
      ?? declarations[0];
    
    return this.getJSDocFromDeclaration(preferred);

    (And only fall back to scanning all declarations if preferred has no JSDoc.)

  2. Error handling
    The try { ... } catch { return undefined; } makes the method very forgiving, but it will also swallow unexpected ts-morph errors. If this becomes hard to debug, you might want to narrow the try block to just the parts that can legitimately throw for unknown components/props, or at least log in non‑test environments.

The implementation is sound as-is.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 10d58e9 and b58e81d.

📒 Files selected for processing (15)
  • omnidoc/DocReader.ts (1 hunks)
  • omnidoc/omnidoc.spec.ts (1 hunks)
  • omnidoc/readApiDoc.spec.ts (1 hunks)
  • omnidoc/readApiDoc.ts (1 hunks)
  • omnidoc/readProject.spec.ts (1 hunks)
  • omnidoc/readProject.ts (1 hunks)
  • omnidoc/readStorybookDoc.spec.ts (1 hunks)
  • omnidoc/readStorybookDoc.ts (1 hunks)
  • src/cartesian/Area.tsx (2 hunks)
  • storybook/stories/API/cartesian/Area.stories.tsx (3 hunks)
  • test/cartesian/Area.spec.tsx (7 hunks)
  • test/component/Legend.spec.tsx (1 hunks)
  • test/component/Tooltip/Tooltip.content.spec.tsx (3 hunks)
  • test/component/Tooltip/itemSorter.spec.tsx (17 hunks)
  • www/src/docs/api/Area.ts (1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-11-23T13:30:10.388Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6669
File: www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx:2-2
Timestamp: 2025-11-23T13:30:10.388Z
Learning: The `TooltipIndex` type from recharts is defined in `src/state/tooltipSlice.ts` but is not currently exported from the public API entry points. It should not be imported from `recharts/types/state/tooltipSlice` as this is an internal implementation path. An ESLint rule is needed to prevent regressions.

Applied to files:

  • test/component/Tooltip/itemSorter.spec.tsx
  • test/component/Tooltip/Tooltip.content.spec.tsx
  • storybook/stories/API/cartesian/Area.stories.tsx
🧬 Code graph analysis (3)
omnidoc/readStorybookDoc.ts (1)
storybook/StorybookArgs.ts (1)
  • StorybookArg (13-48)
storybook/stories/API/cartesian/Area.stories.tsx (6)
storybook/StorybookArgs.ts (1)
  • StorybookArgs (59-61)
storybook/stories/API/props/Styles.ts (1)
  • LineStyle (62-136)
storybook/stories/API/props/AnimationProps.ts (1)
  • AnimationProps (43-48)
storybook/stories/API/props/Tooltip.ts (1)
  • ResponsiveProps (30-33)
src/cartesian/Area.tsx (1)
  • Area (1084-1084)
storybook/stories/API/props/utils.ts (1)
  • getStoryArgsFromArgsTypesObject (5-16)
src/cartesian/Area.tsx (6)
src/util/types.ts (8)
  • ActiveDotType (978-1002)
  • AnimationDuration (605-605)
  • AnimationTiming (603-603)
  • NullableCoordinate (93-96)
  • DataKey (60-60)
  • DotType (1022-1049)
  • LegendType (69-80)
  • TooltipType (81-81)
src/state/chartDataSlice.ts (1)
  • ChartData (12-12)
src/component/LabelList.tsx (1)
  • ImplicitLabelListType (85-85)
src/index.ts (1)
  • LegendType (111-111)
src/component/DefaultTooltipContent.tsx (1)
  • TooltipType (16-16)
src/shape/Curve.tsx (1)
  • CurveType (59-75)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Build, Test, Pack
  • GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (12)
test/component/Tooltip/Tooltip.content.spec.tsx (1)

122-122: LGTM! Test expectations updated for new strokeWidth default.

The tooltip payload expectations have been correctly updated to include strokeWidth: 1, aligning with the new default value introduced in this PR.

Also applies to: 141-141, 160-160

test/component/Legend.spec.tsx (1)

1878-1878: LGTM! Legend payload test updated correctly.

The legend payload expectation now includes strokeWidth: 1, consistent with the Area component's new default.

test/cartesian/Area.spec.tsx (2)

252-252: LGTM! Event handler test expectations updated.

The onClick, onMouseOver, onMouseOut, and onTouchMove event handler tests have been correctly updated to expect strokeWidth: 1 in the Area props.

Also applies to: 292-292, 315-315, 352-352


798-798: LGTM! State integration test expectations updated.

The legend and tooltip payload expectations in the state integration tests now correctly include strokeWidth: 1.

Also applies to: 856-856, 878-878

omnidoc/DocReader.ts (1)

36-41: LGTM! Clean interface extension.

The new getCommentOf method provides a clear API for retrieving prop documentation across different sources. The return type appropriately uses undefined to handle cases where comments are not available.

omnidoc/readProject.spec.ts (1)

869-891: LGTM! Comprehensive test coverage for getCommentOf.

The test suite covers all essential scenarios:

  • Successful comment retrieval with content validation
  • Graceful handling of unknown component
  • Graceful handling of unknown prop
  • Proper behavior when Recharts props shadow DOM props

The test for prop shadowing (Area.stroke) is particularly valuable given Recharts' pattern of extending DOM elements.

www/src/docs/api/Area.ts (1)

134-134: LGTM! Documentation default value corrected.

Changing the strokeWidth default from string '1' to number 1 better aligns with the actual default value in the codebase and matches the numeric type more naturally (though both are valid per the type definition).

omnidoc/readStorybookDoc.spec.ts (1)

200-211: LGTM! Consistent test coverage for StorybookDocReader.

The tests for getCommentOf follow the same pattern as the API and Project readers, ensuring consistent behavior across all documentation sources.

omnidoc/readApiDoc.spec.ts (1)

87-106: LGTM! Complete test coverage for ApiDocReader.getCommentOf.

The tests validate:

  • Comment retrieval with content verification via inline snapshot
  • Proper undefined return for unknown components
  • Proper undefined return for unknown props

The inline snapshot for the ifOverflow comment provides useful regression protection.

test/component/Tooltip/itemSorter.spec.tsx (1)

80-585: Tooltip itemSorter tests correctly updated for Area strokeWidth defaults

The added strokeWidth: 1 expectations for Area tooltip payloads/configs are consistent with defaultAreaProps.strokeWidth = 1 and the way SetAreaTooltipEntrySettings now forwards strokeWidth. Non‑Area series still expect strokeWidth: undefined, which matches their behavior. No issues from the test changes themselves.

Also applies to: 2280-2632

omnidoc/omnidoc.spec.ts (1)

239-505: Comment consistency tests are well‑scoped and match the intended semantics

The new “comment/documentation consistency” suite is structured sensibly:

  • normalizeText / areCommentsSimilar give you a predictable comparison (case/whitespace insensitive, but still strict on content).
  • The three exclusion lists let you progressively tighten consistency without breaking the suite on known offenders.
  • Each test only flags mismatches when at least one side has a non‑empty comment, which is exactly what the descriptions promise.

This should give good signal on future doc drift across API docs, Storybook, and project JSDoc without adding brittle coupling.

src/cartesian/Area.tsx (1)

122-275: Area public props, defaults, and tooltip integration are consistent

The expanded AreaProps JSDoc, the new strokeWidth?: string | number with @default 1, and defaultAreaProps.strokeWidth = 1 all line up:

  • AreaFn resolves defaults via resolveDefaultProps, so props.strokeWidth is always defined as either the user value or 1.
  • SetAreaTooltipEntrySettings now includes strokeWidth in the tooltip configuration, which matches the updated tests and omnidoc expectations.
  • The doc comments for animation, legendType, connectNulls, dot, id, etc. reflect the actual runtime semantics in AreaImpl and AreaWithAnimation.

From a runtime perspective, these changes look coherent and shouldn’t introduce regressions.

Also applies to: 813-832, 1042-1084

@codecov
Copy link

codecov bot commented Nov 24, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.02%. Comparing base (10d58e9) to head (b58e81d).
⚠️ Report is 10 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6684   +/-   ##
=======================================
  Coverage   94.02%   94.02%           
=======================================
  Files         499      499           
  Lines       42547    42548    +1     
  Branches     4873     4873           
=======================================
+ Hits        40004    40005    +1     
  Misses       2538     2538           
  Partials        5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@codecov
Copy link

codecov bot commented Nov 24, 2025

Bundle Report

Changes will increase total bundle size by 50 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.14MB 18 bytes (0.0%) ⬆️
recharts/bundle-es6 987.64kB 18 bytes (0.0%) ⬆️
recharts/bundle-umd 518.5kB 14 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Area.js 18 bytes 27.91kB 0.06%
view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Area.js 18 bytes 26.05kB 0.07%
view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js 14 bytes 518.5kB 0.0%

@ckifer ckifer merged commit d0ddd85 into main Nov 28, 2025
27 of 29 checks passed
@ckifer ckifer deleted the omnidoc-comments branch November 28, 2025 06:21
@coderabbitai coderabbitai bot mentioned this pull request Feb 11, 2026
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants