Skip to content

feat: add TypeScript 6 integration test#93

Merged
PavelVanecek merged 1 commit into
recharts:mainfrom
shreedharbhat98:feat/typescript-6-integration
Apr 29, 2026
Merged

feat: add TypeScript 6 integration test#93
PavelVanecek merged 1 commit into
recharts:mainfrom
shreedharbhat98:feat/typescript-6-integration

Conversation

@shreedharbhat98

@shreedharbhat98 shreedharbhat98 commented Apr 29, 2026

Copy link
Copy Markdown
Contributor

Adds integrations/typescript-6/ to confirm recharts compatibility with TypeScript 6 (tested with 6.0.3). The project mirrors vite7-react19 and uses TypeScript 6-specific strict options:

  • erasableSyntaxOnly: true
  • verbatimModuleSyntax: true
  • noUncheckedSideEffectImports: true

All pass cleanly, confirming recharts types are compatible with TypeScript 6 consumers using strict settings.

Registered as a stable CI test in test-registry.ts.

Closes recharts/recharts#7253

Summary by CodeRabbit

  • New Features
    • Introduced a new TypeScript 6 integration featuring React 19 and Vite development environment
    • Includes a sample data visualization dashboard with interactive bar charts
    • Configured with ESLint and TypeScript strict type checking for code quality
  • Tests
    • Added comprehensive test suite using Vitest and React Testing Library for validating component behavior and rendering

Adds integrations/typescript-6/ to confirm recharts compatibility with
TypeScript 6 (tested with 6.0.3). The project mirrors vite7-react19 and
uses TypeScript 6-specific strict options:

- erasableSyntaxOnly: true
- verbatimModuleSyntax: true
- noUncheckedSideEffectImports: true

All pass cleanly, confirming recharts types are compatible with
TypeScript 6 consumers using strict settings.

Registered as a stable CI test in test-registry.ts.

Closes recharts/recharts#7253
@coderabbitai

coderabbitai Bot commented Apr 29, 2026

Copy link
Copy Markdown
Contributor

Walkthrough

This PR adds a new TypeScript 6 integration example project to the recharts-integ repository. It establishes a complete Vite-based React + TypeScript development environment with Recharts BarChart example, configuration files, and test setup, then registers it in the test suite.

Changes

Cohort / File(s) Summary
TypeScript Configuration
tsconfig.json, tsconfig.app.json, tsconfig.node.json
Establishes project references for app and node tooling with ES2022/ES2023 targets, React JSX transforms, strict mode, and bundler module resolution.
Build & Tool Configuration
vite.config.ts, eslint.config.js, package.json
Configures Vite React plugin with Vitest/jsdom, ESLint flat config with TypeScript/React hooks/refresh rules, and defines npm scripts (dev, build, lint, test) with React 19.2 and TypeScript 6.0 dependencies.
Application & Entry Point
index.html, src/main.tsx
Establishes HTML entry with root div and Vite module script, plus React 18 root initialization with StrictMode and global CSS import.
React Component & Styling
src/App.tsx, src/App.css, src/index.css
Implements App component rendering Recharts BarChart with stacked bars, legend, and tooltip; defines global theme variables and button/link styling plus animation keyframes.
Testing
src/App.spec.tsx
Adds Vitest+React Testing Library test that renders App and verifies SVG and bar chart elements are present.
Test Registry
test-ui/server/scripts/test-registry.ts
Registers new npm integration for integrations/typescript-6 with React 19 and TypeScript 6 metadata.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

  • Typescript 6 recharts#7253 — This PR directly fulfills the requirement to create a new example project confirming TypeScript 6 compatibility for Recharts.

Possibly related PRs

  • Add skiplibcheck tests #83 — Modifies the same test registry file to add new integration test entries, following a similar pattern of expanding the integration test suite.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: add TypeScript 6 integration test' accurately summarizes the main change, which is the addition of a new TypeScript 6 integration test in the integrations/typescript-6 directory.
Linked Issues check ✅ Passed The pull request successfully addresses issue #7253 by creating a new TypeScript 6 example project that verifies Recharts type compatibility with TypeScript 6 strict settings.
Out of Scope Changes check ✅ Passed All changes are in-scope: the new TypeScript 6 integration directory and the test registry update directly support the stated objective of confirming Recharts compatibility with TypeScript 6.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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
Review rate limit: 0/1 reviews remaining, refill in 60 minutes.

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@integrations/typescript-6/src/index.css`:
- Around line 1-14: Remove the extra blank line inside the :root block (between
font-weight: 400; and color-scheme:) and normalize keyword casing in the
font-family value and any CSS function names to lowercase (e.g., make
"system-ui, avenir, helvetica, arial, sans-serif" and "rgba(...)" all lowercase)
so the font-family, color and function keywords in the :root selector
(font-family, font-weight, color-scheme, color, background-color) conform to
Stylelint rules.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3a505a55-06d6-4970-93fe-2634ef55b63c

📥 Commits

Reviewing files that changed from the base of the PR and between 2f8d0ab and 08a5966.

⛔ Files ignored due to path filters (2)
  • integrations/typescript-6/public/vite.svg is excluded by !**/*.svg
  • integrations/typescript-6/src/assets/react.svg is excluded by !**/*.svg
📒 Files selected for processing (13)
  • integrations/typescript-6/eslint.config.js
  • integrations/typescript-6/index.html
  • integrations/typescript-6/package.json
  • integrations/typescript-6/src/App.css
  • integrations/typescript-6/src/App.spec.tsx
  • integrations/typescript-6/src/App.tsx
  • integrations/typescript-6/src/index.css
  • integrations/typescript-6/src/main.tsx
  • integrations/typescript-6/tsconfig.app.json
  • integrations/typescript-6/tsconfig.json
  • integrations/typescript-6/tsconfig.node.json
  • integrations/typescript-6/vite.config.ts
  • test-ui/server/scripts/test-registry.ts

Comment on lines +1 to +14
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix Stylelint violations in the :root block.

The current block has lint errors on empty-line placement and keyword casing, which can fail style checks.

Proposed fix
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: `#242424`;
-
   font-synthesis: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
📝 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.

Suggested change
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: `#242424`;
font-synthesis: none;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
🧰 Tools
🪛 Stylelint (17.9.0)

[error] 6-6: Expected no empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)


[error] 10-10: Expected no empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)


[error] 11-11: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@integrations/typescript-6/src/index.css` around lines 1 - 14, Remove the
extra blank line inside the :root block (between font-weight: 400; and
color-scheme:) and normalize keyword casing in the font-family value and any CSS
function names to lowercase (e.g., make "system-ui, avenir, helvetica, arial,
sans-serif" and "rgba(...)" all lowercase) so the font-family, color and
function keywords in the :root selector (font-family, font-weight, color-scheme,
color, background-color) conform to Stylelint rules.

@PavelVanecek
PavelVanecek merged commit ae2ade6 into recharts:main Apr 29, 2026
105 checks passed
PavelVanecek pushed a commit to recharts/recharts that referenced this pull request Apr 29, 2026
## Description
- Remove deprecated `baseUrl: "."` from tsconfig.base.json and
www/tsconfig.json (baseUrl is deprecated in TS6; paths with relative
values work without it under moduleResolution: bundler, and there were
no paths relying on it in base)
- Remove deprecated `allowSyntheticDefaultImports: false` from
tsconfig.json (deprecated in TS6; CommonJS module mode already defaults
to false)
- Add explicit `rootDir: "./src"` to tsconfig.json (required by TS6 when
outDir/declarationDir are set)
- Add storybook/css.d.ts ambient CSS module declaration (TS6 adds
noUncheckedSideEffectImports to strict mode, requiring type declarations
for CSS side-effect imports in the Vite-bundled storybook)

Verified: `npm run check-types` passes with zero errors under TypeScript
6.0.3 and continues to pass under TypeScript 5.9.3.

## Related Issue
Closes #7253

## How Has This Been Tested?
This is tested through
recharts/recharts-integ#93

## Screenshots (if appropriate):

## Types of changes

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] I have added a storybook story or VR test, or extended an existing
story or VR test to show my changes
@shreedharbhat98
shreedharbhat98 deleted the feat/typescript-6-integration branch April 29, 2026 13:27
@coderabbitai coderabbitai Bot mentioned this pull request Jul 4, 2026
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.

Typescript 6

2 participants