Conversation
WalkthroughThe PR refactors the documentation website structure by migrating example components from monolithic files with named exports to individual files with default exports. It replaces Monaco editor with CodeMirror, introduces CodeEditorWithPreview component for live editing, and adds visual regression tests for various chart components. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CodeEditorWithPreview
participant CodeMirrorEditor
participant Runner as react-runner
participant Component
User->>CodeEditorWithPreview: Mount (Component + sourceCode)
CodeEditorWithPreview->>Component: Render default Component
alt User clicks Edit
User->>CodeEditorWithPreview: Click Edit
CodeEditorWithPreview->>CodeMirrorEditor: Lazy load & show
CodeEditorWithPreview->>CodeEditorWithPreview: Send analytics event
end
alt User clicks Run
User->>CodeEditorWithPreview: Click Run
CodeEditorWithPreview->>CodeMirrorEditor: Get edited code
CodeEditorWithPreview->>CodeEditorWithPreview: Send analytics event
CodeEditorWithPreview->>Runner: Lazy load & execute code
Runner->>Component: Render result with React/recharts/d3-shape context
end
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes This PR involves substantial restructuring with high complexity:
Key areas requiring attention:
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 26
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
www/src/docs/apiExamples/ErrorBar/ErrorBarExample.tsx (1)
57-93: Add explicit type annotation for component props.The props parameter lacks an explicit type annotation, violating the coding guideline that requires all function parameters to be explicitly typed. Other API examples in this PR (e.g.,
ReferenceDotExample.tsxline 36) follow the correct pattern.Apply this diff to add the type annotation:
-const ErrorBarExample = ({ isAnimationActive = true }) => ( +const ErrorBarExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (test-vr/tests/www/LineChartApiExamples.spec-vr.tsx (1)
97-100: Remove inconsistentlocaleprop.Line 98 still passes
locale="en-US"toLineChartExample, but the PR's migration pattern removes locale props from API example tests (as seen inRadialBarChartApiExamples.spec-vr.tsx,RadarChartApiExamples.spec-vr.tsx, andReferenceDotApiExamples.spec-vr.tsx). This inconsistency should be addressed.Apply this diff to align with the migration pattern:
- const component = await mount(<LineChartExample locale="en-US" isAnimationActive={false} />); + const component = await mount(<LineChartExample isAnimationActive={false} />);www/src/components/GuideView/ActiveIndex/index.tsx (1)
10-87: Add explicit return type annotation.The function lacks an explicit return type. Per coding guidelines, all function return values must be explicitly typed.
As per coding guidelines.
Apply this diff:
-export function ActiveIndex({ locale }: { locale: SupportedLocale }) { +export function ActiveIndex({ locale }: { locale: SupportedLocale }): JSX.Element {www/src/docs/apiExamples/LineChart/LineChartExample.tsx (1)
50-70: Add prop typing to avoid implicitany.The destructured props are currently implicitly
any, which violates the TypeScript guidelines in this project. Please annotate the parameter (and keep the existing default) so we retain type safety.-const LineChartExample = ({ isAnimationActive = true }) => ( +const LineChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (As per coding guidelines
www/src/components/GuideView/GettingStarted/Step5.tsx (1)
45-105: Remove theanytick props and restore strong typing.
renderCustomAxisTicknow takes anany, which violates the TypeScript rules for this repo and drops helpful checking. Please bring back an explicit prop type and annotate the return value.+type CustomAxisTickProps = { + x: number; + y: number; + payload: { value: string }; +}; + // #region Custom Axis Tick function -const renderCustomAxisTick = ({ x, y, payload }: any) => { +const renderCustomAxisTick = ({ x, y, payload }: CustomAxisTickProps): JSX.Element => {As per coding guidelines
♻️ Duplicate comments (1)
www/src/docs/apiExamples/LabelList/index.tsx (1)
5-11: Consider documenting the component prop contract.Similar to
www/src/docs/apiExamples/ErrorBar/index.tsx, theChartExampletype's documentation states components should not accept props, but many example components in this pattern accept optional props likeisAnimationActive. Consider updating the type's JSDoc to reflect actual usage.
🧹 Nitpick comments (20)
www/src/components/GuideView/ChartSizing/StaticDimensionChart.tsx (1)
3-3: Add explicit return type annotation.Per coding guidelines, function return values should be explicitly typed. Add
: JSX.Elementto the function signature.Apply this diff:
-export default function StaticDimensionChart() { +export default function StaticDimensionChart(): JSX.Element {www/src/components/GuideView/ChartSizing/ResponsiveContainerResponsiveChart.tsx (1)
3-3: Add explicit return type annotation.Per coding guidelines, function return values should be explicitly typed. Add
: JSX.Elementto the function signature.Apply this diff:
-export default function ResponsiveContainerResponsiveChart() { +export default function ResponsiveContainerResponsiveChart(): JSX.Element {www/src/docs/apiExamples/Cell/CellPieExample.tsx (1)
15-15: Add explicit return type annotation.Per coding guidelines, function return values should be explicitly typed. Add
: JSX.Elementafter the props parameter.Apply this diff:
-const CellPieExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( +const CellPieExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => (www/src/docs/apiExamples/Label/LabelPiePositions.tsx (1)
3-3: Add explicit return type annotation.Per coding guidelines, function return values should be explicitly typed. Add
: JSX.Elementafter the props parameter.Apply this diff:
-const LabelPiePositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( +const LabelPiePositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => (www/src/docs/apiExamples/ComposedChart/ComposedChartExample.tsx (1)
50-50: Add explicit return type annotation.Per coding guidelines, function return values should be explicitly typed. Add
: JSX.Elementafter the props parameter.Apply this diff:
-const ComposedChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( +const ComposedChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => (www/src/docs/apiExamples/ErrorBar/index.tsx (1)
5-11: Consider documenting the component prop contract.The
ChartExampletype's JSDoc states that theComponent"does not accept any props", butErrorBarExampleaccepts an optionalisAnimationActiveprop. While TypeScript'sComponentTypeallows optional props, the documentation is misleading. This pattern appears consistent across similar index files in this PR.Consider either:
- Updating the
ChartExampletype documentation inwww/src/docs/exampleComponents/types.tsto reflect that components may accept optional props for animation control, or- Wrapping components that need props in a prop-less wrapper for consistency with the documented contract.
www/src/components/GuideView/ChartSizing/SizeInPercentChart.tsx (1)
3-16: Add explicit return type annotation.Per coding guidelines, all functions should have explicit return types rather than relying on inference.
Apply this diff:
-export default function SizeInPercentChart() { +export default function SizeInPercentChart(): React.JSX.Element { return (www/src/components/GuideView/GettingStarted/Step2.tsx (1)
44-54: Consider adding explicit return type annotation.Per coding guidelines, function return values should be explicitly typed rather than inferred.
As per coding guidelines.
Apply this diff:
-export default function Step2() { +export default function Step2(): React.JSX.Element { return (www/src/components/GuideView/ChartSizing/SizeInStyleChart.tsx (1)
3-21: Consider adding explicit return type annotation.Per coding guidelines, function return values should be explicitly typed rather than inferred.
As per coding guidelines.
Apply this diff:
-export default function SizeInStyleChart() { +export default function SizeInStyleChart(): React.JSX.Element { return (www/src/components/GuideView/GettingStarted/Step3.tsx (1)
44-64: Consider adding explicit return type annotation.Per coding guidelines, function return values should be explicitly typed rather than inferred.
As per coding guidelines.
Apply this diff:
-export default function Step3() { +export default function Step3(): React.JSX.Element { return (www/src/components/GuideView/GettingStarted/Step1.tsx (1)
44-50: Consider adding explicit return type for consistency with coding guidelines.The component logic is correct and consistent with the PR's refactoring goals. However, the coding guidelines specify that all function return values should be explicitly typed. While React components commonly omit JSX.Element return types, adding it would improve consistency with the stated guidelines.
Optional enhancement:
-export default function Step1() { +export default function Step1(): JSX.Element { return (As per coding guidelines.
www/src/docs/apiExamples/Cell/CellBarExample.tsx (1)
15-23: Consider adding explicit return type for consistency with coding guidelines.The component demonstrates proper Cell usage with stroke customization and the conditional strokeWidth on the third bar (index 2) effectively highlights that bar. However, for consistency with coding guidelines that require explicit typing of return values, consider adding a return type annotation.
Optional enhancement:
-const CellBarExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( +const CellBarExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => ( <BarChart style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }} responsive data={data}>As per coding guidelines.
www/src/components/GuideView/ChartSizing/ResponsiveChart.tsx (1)
3-16: Consider adding explicit return type for consistency with coding guidelines.The minimal chart example effectively demonstrates responsive sizing behavior. For consistency with coding guidelines requiring explicit return type annotations, consider adding the return type.
Optional enhancement:
-export default function ResponsiveChart() { +export default function ResponsiveChart(): JSX.Element { return (As per coding guidelines.
www/src/components/GuideView/Customize/CustomizeBarShape.tsx (1)
57-67: Consider explicit prop typing forfill.The
fillprop is destructured fromBarPropsbut not explicitly typed in the return statement. WhileBarPropsprovides the type, thefillproperty should bestring | undefinedaccording to typical SVG props. The current implementation passesfilldirectly to the<path>element without verifying it's defined, which could result infill={undefined}being set.Consider adding a fallback or explicit handling:
export function TriangleBar(props: BarProps) { - const { fill, x, y, width, height } = props; + const { fill = '#8884d8', x, y, width, height } = props;www/src/docs/apiExamples/Label/LabelRadialBarPositions.tsx (1)
3-3: Add explicit return type for this example componentPlease annotate the component’s return type so the new code stays compliant with our TypeScript guidelines.
As per coding guidelines. Apply this diff:
-const LabelRadialBarPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( +const LabelRadialBarPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => (www/src/components/GuideView/ChartSizing/index.tsx (1)
17-17: Add return type to ChartSizingChartSizing should declare its return type explicitly to satisfy the repo’s TypeScript rules.
As per coding guidelines. Apply this diff:
-export function ChartSizing() { +export function ChartSizing(): JSX.Element {www/src/docs/apiExamples/RadialBarChart/RadialBarChartExample.tsx (1)
50-50: Annotate RadialBarChartExample return typePlease add an explicit JSX return type so this example aligns with our TypeScript conventions.
As per coding guidelines. Apply this diff:
-export const RadialBarChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( +export const RadialBarChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => (www/src/docs/apiExamples/FunnelChart/FunnelChartExample.tsx (1)
13-13: Add return type to FunnelChartExampleThis component also needs an explicit return type to follow our TypeScript rules.
As per coding guidelines. Apply this diff:
-export const FunnelChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( +export const FunnelChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => (www/src/docs/apiExamples/Funnel/FunnelExample.tsx (1)
31-31: Declare FunnelExample’s return typeAdd the explicit JSX return type here as well to comply with the TypeScript guideline.
As per coding guidelines. Apply this diff:
-const FunnelExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => { +const FunnelExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => {www/src/docs/apiExamples/PieChart/PieChartExample.tsx (1)
23-23: Annotate PieChartExample’s return typePlease add the return type annotation so this module also satisfies the project TypeScript standard.
As per coding guidelines. Apply this diff:
-export const PieChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( +export const PieChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => (
|
|
||
| test('SankeyCustomNodeExample', async ({ mount }) => { | ||
| const component = await mount(<SankeyCustomNodeExample locale="en-US" isAnimationActive={false} />); | ||
| const component = await mount(<SankeyCustomNodeExample />); |
There was a problem hiding this comment.
Restore animation disable for VR stability
Without isAnimationActive={false}, the Sankey example animates during capture and the Playwright screenshot can fluctuate. Please keep animations disabled here so the VR tests remain deterministic.
Apply this diff:
- const component = await mount(<SankeyCustomNodeExample />);
+ const component = await mount(<SankeyCustomNodeExample isAnimationActive={false} />);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const component = await mount(<SankeyCustomNodeExample />); | |
| const component = await mount(<SankeyCustomNodeExample isAnimationActive={false} />); |
🤖 Prompt for AI Agents
In test-vr/tests/www/SankeyApiExamples.spec-vr.tsx around line 6, the mounted
Sankey example is animating during VR capture which causes flaky screenshots;
add the prop isAnimationActive={false} to the mounted component
(<SankeyCustomNodeExample />) so the Sankey renders without animations during
the test, ensuring deterministic Playwright screenshots.
There was a problem hiding this comment.
Screenshot is the same even with animation.
There was a problem hiding this comment.
@PavelVanecek, thank you for testing and confirming! If the screenshots are stable even with animations, then the current implementation is fine. I appreciate you verifying this.
🧠 Learnings used
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Applies to test/component/**/*.spec.tsx : Test rendering behavior and component interactions with React Testing Library
Learnt from: CR
PR: recharts/recharts#0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.180Z
Learning: Applies to test/**/*.test.{ts,tsx} : When testing selectors, verify render counts using the spy and rerenderSameComponent from createSelectorTestCase
Learnt from: CR
PR: recharts/recharts#0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.180Z
Learning: Write unit tests using Vitest and React Testing Library
Learnt from: CR
PR: recharts/recharts#0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.180Z
Learning: Applies to test/**/*.test.{ts,tsx} : Mock getBoundingClientRect using test/helper/MockGetBoundingClientRect.ts when rendering Recharts components (e.g., Tooltip, Legend, charts)
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Provide a reduced, reproducible test case (e.g., via CodeSandbox or fork of recharts.github.io) when reporting issues
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Prefer the simplest tests (unit tests); use React Testing Library or Storybook tests only when needed
Learnt from: CR
PR: recharts/recharts#0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.549Z
Learning: Applies to storybook/** : Use Storybook for high-fidelity examples intended for publication; prefer unit or VR tests for low-fidelity cases due to Chromatic limits
Learnt from: CR
PR: recharts/recharts#0
File: test/README.md:0-0
Timestamp: 2025-10-25T07:35:46.180Z
Learning: Applies to test/**/*.test.{ts,tsx} : In tests not using createSelectorTestCase, advance timers after renders with vi.runOnlyPendingTimers()
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Use Storybook stories as smoke tests and add play-function tests with assertions when appropriate
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Applies to test/**/*.spec.{ts,tsx} : When adding or changing functionality, add appropriate tests (prefer unit tests; use RTL if rendering is involved)
| type PreviewResultProps = { | ||
| Component: ComponentType; | ||
| isEditMode: boolean; | ||
| codeToRun: string | null; | ||
| Runner: any; | ||
| }; | ||
|
|
||
| const PreviewResult = React.memo(({ Component, isEditMode, codeToRun, Runner }: PreviewResultProps) => { | ||
| // If in edit mode and code has been run, use react-runner | ||
| if (isEditMode && codeToRun && Runner) { | ||
| const scope = { | ||
| import: { | ||
| react: React, | ||
| recharts: RechartsScope, | ||
| 'd3-shape': D3ShapeScope, | ||
| }, | ||
| }; | ||
|
|
||
| return <Runner code={codeToRun} scope={scope} />; | ||
| } | ||
|
|
||
| // Otherwise, render the actual component (faster, no parsing needed) | ||
| return <Component />; | ||
| }); | ||
|
|
||
| /** | ||
| * A component that displays a live preview of a React component alongside | ||
| * an editable code editor. Supports lazy-loading of editing features. | ||
| * | ||
| * By default, renders the Component directly (fast, no parsing). | ||
| * When user clicks "Edit", switches to react-runner for live editing. | ||
| */ | ||
| export function CodeEditorWithPreview({ | ||
| Component, | ||
| sourceCode, | ||
| stackBlitzTitle, | ||
| analyticsLabel, | ||
| }: CodeEditorWithPreviewProps) { | ||
| const [isEditMode, setIsEditMode] = useState(false); | ||
| const [editedCode, setEditedCode] = useState<string | null>(null); | ||
| const [codeToRun, setCodeToRun] = useState<string | null>(null); | ||
| const [Runner, setRunner] = useState<any>(null); | ||
|
|
||
| // Lazy load react-runner when entering edit mode | ||
| useEffect(() => { | ||
| if (isEditMode && !Runner) { | ||
| import('react-runner').then(module => { | ||
| setRunner(() => module.Runner); | ||
| }); | ||
| } | ||
| }, [isEditMode, Runner]); | ||
|
|
||
| const handleEditClick = () => { | ||
| sendEvent({ | ||
| category: 'Examples', | ||
| action: 'Edit Code', | ||
| label: analyticsLabel, | ||
| }); | ||
|
|
||
| setIsEditMode(true); | ||
| setEditedCode(sourceCode); | ||
| }; | ||
|
|
||
| const handleRunCode = () => { | ||
| if (editedCode === sourceCode) { | ||
| sendEvent({ | ||
| category: 'Examples', | ||
| action: 'Run Code', | ||
| label: analyticsLabel, | ||
| }); | ||
| } else { | ||
| sendEvent({ | ||
| category: 'Examples', | ||
| action: 'Run Code - Code Changed', | ||
| label: analyticsLabel, | ||
| }); | ||
| } | ||
|
|
||
| setCodeToRun(editedCode); | ||
| }; | ||
|
|
||
| const codeToDisplay = editedCode ?? sourceCode; | ||
|
|
||
| return ( | ||
| <> | ||
| <PreviewResult Component={Component} isEditMode={isEditMode} codeToRun={codeToRun} Runner={Runner} /> | ||
|
|
There was a problem hiding this comment.
Replace any Runner typing with a concrete component type.
Runner is typed as any, and the state uses useState<any>, which breaks the “no any” rule and weakens type checking. Please introduce a specific runner component type and let both the props and state use it. That way we keep strict types while still supporting the lazy import.
-type PreviewResultProps = {
- Component: ComponentType;
- isEditMode: boolean;
- codeToRun: string | null;
- Runner: any;
-};
+type RunnerComponent = ComponentType<{ code: string; scope: Record<string, unknown> }>;
+
+type PreviewResultProps = {
+ Component: ComponentType;
+ isEditMode: boolean;
+ codeToRun: string | null;
+ Runner: RunnerComponent | null;
+};
-const PreviewResult = React.memo(({ Component, isEditMode, codeToRun, Runner }: PreviewResultProps) => {
+const PreviewResult = React.memo(({ Component, isEditMode, codeToRun, Runner }: PreviewResultProps) => {
@@
-export function CodeEditorWithPreview({
+export function CodeEditorWithPreview({
Component,
sourceCode,
stackBlitzTitle,
analyticsLabel,
}: CodeEditorWithPreviewProps) {
const [isEditMode, setIsEditMode] = useState(false);
const [editedCode, setEditedCode] = useState<string | null>(null);
const [codeToRun, setCodeToRun] = useState<string | null>(null);
- const [Runner, setRunner] = useState<any>(null);
+ const [Runner, setRunner] = useState<RunnerComponent | null>(null);(This diff also keeps PreviewResult’s body unchanged—TypeScript refines Runner after the truthy check, so rendering still works.)
As per coding guidelines
🤖 Prompt for AI Agents
In www/src/components/CodeEditorWithPreview.tsx around lines 27-113, Runner is
typed as any; replace it with a concrete React component type: declare a
RunnerType = React.ComponentType<{ code?: string | null; scope?: Record<string,
unknown> }>, use that type for PreviewResult props and for the Runner state
(useState<RunnerType | null>(null)), and cast the lazy import when setting state
(setRunner(() => module.Runner as RunnerType)). Update any null/undefined checks
to match the new type so the existing truthy guard still narrows the type before
rendering.
There was a problem hiding this comment.
Typescript is not happy with this typing either, I'll keep it as any for now.
There was a problem hiding this comment.
@PavelVanecek, understood! I'll note that typing for the decision. If you'd like to revisit it later or need help exploring alternative approaches, feel free to reach out.
🧠 Learnings used
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Applies to test/component/**/*.spec.tsx : Test rendering behavior and component interactions with React Testing Library
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Applies to **/*.{ts,tsx} : Never use the TypeScript any type (implicit or explicit)
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Applies to **/*.{ts,tsx} : Explicitly type all function parameters and return values; do not rely on implicit any or inference
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Applies to **/*.{ts,tsx} : Prefer unknown over any and refine types appropriately
Learnt from: CR
PR: recharts/recharts#0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-10-25T07:35:14.559Z
Learning: Applies to **/*.{ts,tsx} : Do not use as type assertions; the only exception is as const
| export default function BarChartClickable() { | ||
| return ( | ||
| <BarChart | ||
| width={550} | ||
| height={240} | ||
| data={[ | ||
| { name: 'Page A', uv: 590 }, | ||
| { name: 'Page B', uv: 290 }, | ||
| { name: 'Page C', uv: 868 }, | ||
| ]} | ||
| > | ||
| <Tooltip trigger="click" content={() => null} cursor={false} shared={false} /> | ||
| <Bar dataKey="uv" stackId="a" fill="green" activeBar={{ stroke: 'black', strokeWidth: 7 }} /> | ||
| </BarChart> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add an explicit return type to match TypeScript guidelines.
Our docs mandate annotating every function’s return type. Please specify (): JSX.Element on BarChartClickable to keep linting compliant.
Apply this diff:
-export default function BarChartClickable() {
+export default function BarChartClickable(): JSX.Element {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export default function BarChartClickable() { | |
| return ( | |
| <BarChart | |
| width={550} | |
| height={240} | |
| data={[ | |
| { name: 'Page A', uv: 590 }, | |
| { name: 'Page B', uv: 290 }, | |
| { name: 'Page C', uv: 868 }, | |
| ]} | |
| > | |
| <Tooltip trigger="click" content={() => null} cursor={false} shared={false} /> | |
| <Bar dataKey="uv" stackId="a" fill="green" activeBar={{ stroke: 'black', strokeWidth: 7 }} /> | |
| </BarChart> | |
| ); | |
| export default function BarChartClickable(): JSX.Element { | |
| return ( | |
| <BarChart | |
| width={550} | |
| height={240} | |
| data={[ | |
| { name: 'Page A', uv: 590 }, | |
| { name: 'Page B', uv: 290 }, | |
| { name: 'Page C', uv: 868 }, | |
| ]} | |
| > | |
| <Tooltip trigger="click" content={() => null} cursor={false} shared={false} /> | |
| <Bar dataKey="uv" stackId="a" fill="green" activeBar={{ stroke: 'black', strokeWidth: 7 }} /> | |
| </BarChart> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In www/src/components/GuideView/ActiveIndex/BarChartClickable.tsx around lines 3
to 17, the component function lacks an explicit TypeScript return type; update
the function signature to export default function BarChartClickable():
JSX.Element { ... } so the component is annotated with a JSX.Element return type
to satisfy the linting rule (ensure your tsconfig/JSX settings already allow
using JSX.Element).
| export default function PieChartDefaultIndex({ isAnimationActive = true }: { isAnimationActive?: boolean }) { | ||
| return ( | ||
| <PieChart width={400} height={400}> | ||
| <Pie | ||
| activeShape={{ | ||
| fill: 'red', | ||
| }} | ||
| data={[ | ||
| { name: 'Page A', uv: 590 }, | ||
| { name: 'Page B', uv: 590 }, | ||
| { name: 'Page C', uv: 868 }, | ||
| ]} | ||
| dataKey="uv" | ||
| isAnimationActive={isAnimationActive} | ||
| /> | ||
| <Tooltip defaultIndex={2} /> | ||
| </PieChart> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Add explicit return type annotation.
The function lacks an explicit return type. Per coding guidelines, all function return values must be explicitly typed.
As per coding guidelines.
Apply this diff:
-export default function PieChartDefaultIndex({ isAnimationActive = true }: { isAnimationActive?: boolean }) {
+export default function PieChartDefaultIndex({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element {🤖 Prompt for AI Agents
In www/src/components/GuideView/ActiveIndex/PieChartDefaultIndex.tsx around
lines 3 to 21, the exported function component is missing an explicit return
type; update the function signature to include an explicit return type (e.g.,
change to export default function PieChartDefaultIndex({ isAnimationActive =
true }: { isAnimationActive?: boolean }): JSX.Element { ... }) and, if your
linter/TS config requires, import the appropriate type (e.g., import type { JSX
} from 'react' or use React.ReactElement) so the file compiles with the explicit
annotation.
| export default function ChartWithoutSize() { | ||
| return ( | ||
| <LineChart | ||
| data={[ | ||
| { x: 1, y: 1 }, | ||
| { x: 2, y: 4 }, | ||
| ]} | ||
| > | ||
| <Line dataKey="y" /> | ||
| </LineChart> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Declare the return type for ChartWithoutSize.
To satisfy our TS lint rules, add an explicit JSX.Element return type to the function signature.
Recommended diff:
-export default function ChartWithoutSize() {
+export default function ChartWithoutSize(): JSX.Element {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export default function ChartWithoutSize() { | |
| return ( | |
| <LineChart | |
| data={[ | |
| { x: 1, y: 1 }, | |
| { x: 2, y: 4 }, | |
| ]} | |
| > | |
| <Line dataKey="y" /> | |
| </LineChart> | |
| ); | |
| export default function ChartWithoutSize(): JSX.Element { | |
| return ( | |
| <LineChart | |
| data={[ | |
| { x: 1, y: 1 }, | |
| { x: 2, y: 4 }, | |
| ]} | |
| > | |
| <Line dataKey="y" /> | |
| </LineChart> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In www/src/components/GuideView/ChartSizing/ChartWithoutSize.tsx around lines 3
to 13, the functional component lacks an explicit return type; update the
function signature to declare its return type as JSX.Element (e.g., add :
JSX.Element after the function name) so it conforms to TS lint rules and ensure
any necessary React types are imported if missing.
| const LabelCartesianPositions = () => { | ||
| return ( | ||
| <LineChart | ||
| style={{ width: '100%', maxWidth: '500px', maxHeight: '200px', aspectRatio: 1 }} | ||
| responsive | ||
| margin={{ top: 30, right: 30, bottom: 30, left: 30 }} | ||
| > | ||
| <PlotAreaRectangle /> | ||
| <Label position="top">top</Label> | ||
| <Label position="bottom">bottom</Label> | ||
| <Label position="left">left</Label> | ||
| <Label position="right">right</Label> | ||
| <Label position="center">center</Label> | ||
| <Label position="insideLeft">insideLeft</Label> | ||
| <Label position="insideRight">insideRight</Label> | ||
| <Label position="insideTop">insideTop</Label> | ||
| <Label position="insideBottom">insideBottom</Label> | ||
| <Label position="insideTopLeft">insideTopLeft</Label> | ||
| <Label position="insideTopRight">insideTopRight</Label> | ||
| <Label position="insideBottomLeft">insideBottomLeft</Label> | ||
| <Label position="insideBottomRight">insideBottomRight</Label> | ||
| </LineChart> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add explicit return type annotation.
The LabelCartesianPositions function component is missing an explicit return type annotation.
As per coding guidelines
Apply this diff:
-const LabelCartesianPositions = () => {
+const LabelCartesianPositions = (): JSX.Element => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const LabelCartesianPositions = () => { | |
| return ( | |
| <LineChart | |
| style={{ width: '100%', maxWidth: '500px', maxHeight: '200px', aspectRatio: 1 }} | |
| responsive | |
| margin={{ top: 30, right: 30, bottom: 30, left: 30 }} | |
| > | |
| <PlotAreaRectangle /> | |
| <Label position="top">top</Label> | |
| <Label position="bottom">bottom</Label> | |
| <Label position="left">left</Label> | |
| <Label position="right">right</Label> | |
| <Label position="center">center</Label> | |
| <Label position="insideLeft">insideLeft</Label> | |
| <Label position="insideRight">insideRight</Label> | |
| <Label position="insideTop">insideTop</Label> | |
| <Label position="insideBottom">insideBottom</Label> | |
| <Label position="insideTopLeft">insideTopLeft</Label> | |
| <Label position="insideTopRight">insideTopRight</Label> | |
| <Label position="insideBottomLeft">insideBottomLeft</Label> | |
| <Label position="insideBottomRight">insideBottomRight</Label> | |
| </LineChart> | |
| ); | |
| }; | |
| const LabelCartesianPositions = (): JSX.Element => { | |
| return ( | |
| <LineChart | |
| style={{ width: '100%', maxWidth: '500px', maxHeight: '200px', aspectRatio: 1 }} | |
| responsive | |
| margin={{ top: 30, right: 30, bottom: 30, left: 30 }} | |
| > | |
| <PlotAreaRectangle /> | |
| <Label position="top">top</Label> | |
| <Label position="bottom">bottom</Label> | |
| <Label position="left">left</Label> | |
| <Label position="right">right</Label> | |
| <Label position="center">center</Label> | |
| <Label position="insideLeft">insideLeft</Label> | |
| <Label position="insideRight">insideRight</Label> | |
| <Label position="insideTop">insideTop</Label> | |
| <Label position="insideBottom">insideBottom</Label> | |
| <Label position="insideTopLeft">insideTopLeft</Label> | |
| <Label position="insideTopRight">insideTopRight</Label> | |
| <Label position="insideBottomLeft">insideBottomLeft</Label> | |
| <Label position="insideBottomRight">insideBottomRight</Label> | |
| </LineChart> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In www/src/docs/apiExamples/Label/LabelCartesianPositions.tsx around lines 22 to
45, the functional component is missing an explicit return type; update the
component declaration to include an explicit React return type (e.g., annotate
it as React.FC or specify the return type as JSX.Element) so the function
signature becomes typed accordingly and matches project coding guidelines.
| const LabelFunnelPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => { | ||
| return ( | ||
| <FunnelChart | ||
| style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }} | ||
| responsive | ||
| data={[{ value: 100 }]} | ||
| margin={{ | ||
| top: 20, | ||
| right: 0, | ||
| left: 0, | ||
| bottom: 20, | ||
| }} | ||
| > | ||
| <Funnel dataKey="value" fill="none" stroke="black" width="80%" reversed isAnimationActive={isAnimationActive}> | ||
| <LabelList fill="black" position={{ x: 120, y: 120 }} valueAccessor={() => 'custom'} className="custom" /> | ||
| <LabelList position="center" fill="black" valueAccessor={() => 'center'} /> | ||
| <LabelList position="right" fill="black" valueAccessor={() => 'right'} /> | ||
| <LabelList position="insideRight" fill="black" valueAccessor={() => 'insideRight'} /> | ||
| <LabelList position="left" fill="black" valueAccessor={() => 'left'} /> | ||
| <LabelList position="insideLeft" fill="black" valueAccessor={() => 'insideLeft'} /> | ||
| <LabelList position="insideTopLeft" fill="black" valueAccessor={() => 'insideTopLeft'} /> | ||
| <LabelList position="insideBottomLeft" fill="black" valueAccessor={() => 'insideBottomLeft'} /> | ||
| <LabelList position="top" fill="black" valueAccessor={() => 'top'} /> | ||
| <LabelList position="insideTop" fill="black" valueAccessor={() => 'insideTop'} /> | ||
| <LabelList position="insideTopRight" fill="black" valueAccessor={() => 'insideTopRight'} /> | ||
| <LabelList position="insideBottomRight" fill="black" valueAccessor={() => 'insideBottomRight'} /> | ||
| <LabelList position="bottom" fill="black" valueAccessor={() => 'bottom'} /> | ||
| <LabelList position="insideBottom" fill="black" valueAccessor={() => 'insideBottom'} /> | ||
| </Funnel> | ||
| </FunnelChart> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add explicit return type annotation.
The LabelFunnelPositions function component is missing an explicit return type annotation.
As per coding guidelines
Apply this diff:
-const LabelFunnelPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => {
+const LabelFunnelPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const LabelFunnelPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => { | |
| return ( | |
| <FunnelChart | |
| style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }} | |
| responsive | |
| data={[{ value: 100 }]} | |
| margin={{ | |
| top: 20, | |
| right: 0, | |
| left: 0, | |
| bottom: 20, | |
| }} | |
| > | |
| <Funnel dataKey="value" fill="none" stroke="black" width="80%" reversed isAnimationActive={isAnimationActive}> | |
| <LabelList fill="black" position={{ x: 120, y: 120 }} valueAccessor={() => 'custom'} className="custom" /> | |
| <LabelList position="center" fill="black" valueAccessor={() => 'center'} /> | |
| <LabelList position="right" fill="black" valueAccessor={() => 'right'} /> | |
| <LabelList position="insideRight" fill="black" valueAccessor={() => 'insideRight'} /> | |
| <LabelList position="left" fill="black" valueAccessor={() => 'left'} /> | |
| <LabelList position="insideLeft" fill="black" valueAccessor={() => 'insideLeft'} /> | |
| <LabelList position="insideTopLeft" fill="black" valueAccessor={() => 'insideTopLeft'} /> | |
| <LabelList position="insideBottomLeft" fill="black" valueAccessor={() => 'insideBottomLeft'} /> | |
| <LabelList position="top" fill="black" valueAccessor={() => 'top'} /> | |
| <LabelList position="insideTop" fill="black" valueAccessor={() => 'insideTop'} /> | |
| <LabelList position="insideTopRight" fill="black" valueAccessor={() => 'insideTopRight'} /> | |
| <LabelList position="insideBottomRight" fill="black" valueAccessor={() => 'insideBottomRight'} /> | |
| <LabelList position="bottom" fill="black" valueAccessor={() => 'bottom'} /> | |
| <LabelList position="insideBottom" fill="black" valueAccessor={() => 'insideBottom'} /> | |
| </Funnel> | |
| </FunnelChart> | |
| ); | |
| }; | |
| const LabelFunnelPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => { | |
| return ( | |
| <FunnelChart | |
| style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }} | |
| responsive | |
| data={[{ value: 100 }]} | |
| margin={{ | |
| top: 20, | |
| right: 0, | |
| left: 0, | |
| bottom: 20, | |
| }} | |
| > | |
| <Funnel dataKey="value" fill="none" stroke="black" width="80%" reversed isAnimationActive={isAnimationActive}> | |
| <LabelList fill="black" position={{ x: 120, y: 120 }} valueAccessor={() => 'custom'} className="custom" /> | |
| <LabelList position="center" fill="black" valueAccessor={() => 'center'} /> | |
| <LabelList position="right" fill="black" valueAccessor={() => 'right'} /> | |
| <LabelList position="insideRight" fill="black" valueAccessor={() => 'insideRight'} /> | |
| <LabelList position="left" fill="black" valueAccessor={() => 'left'} /> | |
| <LabelList position="insideLeft" fill="black" valueAccessor={() => 'insideLeft'} /> | |
| <LabelList position="insideTopLeft" fill="black" valueAccessor={() => 'insideTopLeft'} /> | |
| <LabelList position="insideBottomLeft" fill="black" valueAccessor={() => 'insideBottomLeft'} /> | |
| <LabelList position="top" fill="black" valueAccessor={() => 'top'} /> | |
| <LabelList position="insideTop" fill="black" valueAccessor={() => 'insideTop'} /> | |
| <LabelList position="insideTopRight" fill="black" valueAccessor={() => 'insideTopRight'} /> | |
| <LabelList position="insideBottomRight" fill="black" valueAccessor={() => 'insideBottomRight'} /> | |
| <LabelList position="bottom" fill="black" valueAccessor={() => 'bottom'} /> | |
| <LabelList position="insideBottom" fill="black" valueAccessor={() => 'insideBottom'} /> | |
| </Funnel> | |
| </FunnelChart> | |
| ); | |
| }; |
🤖 Prompt for AI Agents
In www/src/docs/apiExamples/Label/LabelFunnelPositions.tsx around lines 3 to 34,
the component is missing an explicit return type; update the function signature
to include a return type of JSX.Element (e.g., change the arrow function
signature to include ": JSX.Element") so the component has an explicit typed
return value, and ensure any necessary React/JSX types are available in the file
or project config.
|
|
||
| export const radialBarApiExamples: ReadonlyArray<ChartExample> = [ | ||
| { | ||
| Component: RadialBarChartExample, |
There was a problem hiding this comment.
🧩 Analysis chain
Verify import/export consistency.
The import on line 2 uses default import syntax, but the relevant code snippet shows RadialBarChartExample is exported as a named export (export const RadialBarChartExample = ...). This mismatch would cause a runtime error.
Additionally, RadialBarChartExample accepts { isAnimationActive?: boolean } props, but the ChartExample.Component type is ComponentType (which defaults to ComponentType<{}>—no props). This creates a type safety issue.
Run this script to verify the export type and prop signature:
🏁 Script executed:
#!/bin/bash
# Verify RadialBarChartExample export and signature
# Check export type
echo "=== Checking export type ==="
rg -n "export.*RadialBarChartExample" www/src/docs/apiExamples/RadialBarChart/RadialBarChartExample.tsx
# Check if there's a default export
echo -e "\n=== Checking for default export ==="
rg -n "export default" www/src/docs/apiExamples/RadialBarChart/RadialBarChartExample.tsx
# Check the ChartExample type definition
echo -e "\n=== ChartExample type definition ==="
rg -nA5 "type ChartExample" www/src/docs/exampleComponents/types.tsLength of output: 508
🏁 Script executed:
#!/bin/bash
# Verify how ChartExample.Component is rendered and check other examples
# Check how Component is rendered/used
echo "=== How Component is rendered in exampleComponents ==="
rg -nA3 -B3 "\.Component\|<.*Component" www/src/docs/exampleComponents/ --type tsx
# Check other apiExamples components for prop acceptance
echo -e "\n=== Check other apiExamples for props ==="
fd -e tsx "index.tsx" www/src/docs/apiExamples/ -exec grep -l "Component.*:" {} \; | head -5 | xargs -I {} sh -c 'echo "=== {} ===" && head -10 {}'Length of output: 1179
🏁 Script executed:
#!/bin/bash
# Get full ChartExample type definition
echo "=== Full ChartExample type definition ==="
rg -nA10 "type ChartExample" www/src/docs/exampleComponents/types.tsLength of output: 368
🏁 Script executed:
#!/bin/bash
# Find where ChartExample components are rendered/used
echo "=== Search for rendering of example components ==="
rg -n "example\.Component\|<Component" www/src/docs/exampleComponents/ -A2 -B2
echo -e "\n=== Search for ChartExample usage ==="
rg -n "ChartExample" www/src/docs/exampleComponents/ -A3 -B3
echo -e "\n=== Search for Component rendering in all docs ==="
rg -n "\bComponent\b" www/src/docs/exampleComponents/ExampleComponent.tsx -A3 -B3Length of output: 17600
🏁 Script executed:
#!/bin/bash
# Find where ChartExample components are rendered/used
echo "=== Check ExampleComponent rendering ==="
cat www/src/docs/exampleComponents/ExampleComponent.tsx | head -50
echo -e "\n=== Search for Component property usage ==="
rg -n "\.Component" www/src/docs/exampleComponents/ExampleComponent.tsxLength of output: 261
🏁 Script executed:
#!/bin/bash
# Find where Component is rendered
echo "=== Find all tsx/ts files in docs ==="
fd -e tsx -e ts www/src/docs/ | grep -E "(Component|Example)" | head -20
echo -e "\n=== Search for Component rendering across all docs ==="
rg -n "example\.Component|<.*Component\b" www/src/docs/ -g "!node_modules" -g "!**/index.ts" | head -20
echo -e "\n=== Search for rendering in pages or components ==="
rg -n "\.Component" www/src/pages/ -A2 -B2 2>/dev/null | head -30Length of output: 1121
🏁 Script executed:
#!/bin/bash
# Find where allExamples or Component is actually used
echo "=== Search for allExamples usage ==="
rg -n "allExamples\|from.*exampleComponents" www/src/ --type tsx --type ts -B1 -A3 | head -40
echo -e "\n=== Search for Component property access ==="
rg -n "\.Component\s*[<(]" www/src/ --type tsx --type ts | head -20
echo -e "\n=== Find files that render example components ==="
rg -n "ReactDOM.render|createRoot|render\(" www/src/ --type tsx --type ts -A5 | grep -i "component\|example" | head -20Length of output: 217
🏁 Script executed:
#!/bin/bash
# Search without type filters
echo "=== Find allExamples imports ==="
rg -n "allExamples" www/src/ -B2 -A5 | head -50
echo -e "\n=== Find all .Component accesses ==="
rg -n "\.Component" www/src/ -B1 -A1 | head -40
echo -e "\n=== Check specific files that might render ==="
find www/src/pages -name "*.tsx" -o -name "*.ts" | head -5 | xargs cat | head -100Length of output: 4588
🏁 Script executed:
#!/bin/bash
# Find CodeEditorWithPreview implementation
echo "=== Find CodeEditorWithPreview file ==="
find www/src -name "*CodeEditorWithPreview*"
echo -e "\n=== Check CodeEditorWithPreview rendering ==="
rg -n "Component" www/src/components/CodeEditorWithPreview.tsx -B2 -A2 | head -50Length of output: 1428
Remove unused props from RadialBarChartExample component signature.
The component accepts { isAnimationActive?: boolean } but is rendered without props by CodeEditorWithPreview (which renders as <Component />). The ChartExample.Component type expects ComponentType<{}> (no props), and the component is never called with props. Remove the unused parameter to align the component with its actual usage.
🤖 Prompt for AI Agents
In www/src/docs/apiExamples/RadialBarChart/index.tsx around line 7, the
RadialBarChartExample component currently declares an unused prop parameter ({
isAnimationActive?: boolean }) even though it is rendered without props
(ComponentType<{}>) by CodeEditorWithPreview; remove the unused parameter from
the component signature so it becomes a propless functional component and update
any internal references to isAnimationActive (if present) to use a local
constant or default behavior instead.
|
|
||
| export const ReferenceAreaExample: ApiExampleDemo = ({ isAnimationActive }) => ( | ||
| // #endregion | ||
| const ReferenceAreaExample = ({ isAnimationActive = true }) => ( |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add explicit type annotations for function parameter and return value.
The props parameter is missing a type annotation, which violates the coding guidelines requirement to "explicitly type all function parameters and return values."
As per coding guidelines.
Apply this diff:
-const ReferenceAreaExample = ({ isAnimationActive = true }) => (
+const ReferenceAreaExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => (📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const ReferenceAreaExample = ({ isAnimationActive = true }) => ( | |
| const ReferenceAreaExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): JSX.Element => ( |
🤖 Prompt for AI Agents
In www/src/docs/apiExamples/ReferenceArea/ReferenceAreaExample.tsx around line
23, the functional component parameter is missing an explicit type and the
return value is untyped; add a props type and annotate the function return type
(for example define an interface or inline type for props with
isAnimationActive?: boolean and change the signature to include that type and a
return type of JSX.Element or React.ReactElement) so the component parameter and
return value are explicitly typed per the guidelines.
| const ReferenceLineExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => ( | ||
| <AreaChart | ||
| style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }} | ||
| responsive | ||
| data={data} | ||
| margin={{ | ||
| top: 20, | ||
| right: 0, | ||
| left: 0, | ||
| bottom: 0, | ||
| }} | ||
| > | ||
| <XAxis dataKey="name" /> | ||
| <YAxis width="auto" /> | ||
| <CartesianGrid strokeDasharray="3 3" /> | ||
| <Tooltip /> | ||
| <Area | ||
| type="monotone" | ||
| dataKey="uv" | ||
| stroke="#8884d8" | ||
| fill="#8884d8" | ||
| fillOpacity={0.3} | ||
| isAnimationActive={isAnimationActive} | ||
| /> | ||
| <ReferenceLine | ||
| x="Page C" | ||
| stroke="green" | ||
| label={{ value: 'prop `x` creates vertical lines', fill: 'black', position: 'insideTop', offset: 70 }} | ||
| /> | ||
| <ReferenceLine | ||
| y={4000} | ||
| label={{ value: 'prop `y` creates horizontal lines', fill: 'black', position: 'insideTopRight' }} | ||
| stroke="red" | ||
| strokeDasharray="3 3" | ||
| /> | ||
| <ReferenceLine | ||
| label={{ value: 'prop `segment` connects two arbitrary points', fill: 'black', position: 'middle' }} | ||
| stroke="green" | ||
| strokeDasharray="3 3" | ||
| segment={[ | ||
| { x: 'Page D', y: 0 }, | ||
| { x: 'Page F', y: 1500 }, | ||
| ]} | ||
| /> | ||
| </AreaChart> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Add explicit return type annotation.
The component function is missing an explicit return type annotation, which violates the coding guidelines requiring all function return values to be explicitly typed.
As per coding guidelines.
Apply this diff to add the return type:
-const ReferenceLineExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
+const ReferenceLineExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }): React.JSX.Element => (🤖 Prompt for AI Agents
In www/src/docs/apiExamples/ReferenceLine/ReferenceLineExample.tsx around lines
50 to 95, the functional component is missing an explicit return type; update
the component declaration to include a return type (e.g., : JSX.Element or
React.ReactElement) so the signature becomes explicitly typed, and ensure any
necessary React types are imported if your project requires them.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #6531 +/- ##
==========================================
- Coverage 93.43% 91.66% -1.78%
==========================================
Files 436 483 +47
Lines 39545 40238 +693
Branches 4599 4559 -40
==========================================
- Hits 36950 36883 -67
- Misses 2579 3339 +760
Partials 16 16 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportBundle size has no change ✅ |
There was a problem hiding this comment.
Pull Request Overview
This PR migrates the website's code editor from Monaco Editor to CodeMirror 6, restructures API examples, and refactors several view components from class-based to functional components. The main goals are to improve performance, reduce bundle size, and modernize the codebase.
- Replaces Monaco Editor with CodeMirror 6 for code editing functionality
- Restructures API examples to use Component/sourceCode pattern instead of demo functions
- Refactors class components to functional components (ExamplesView, APIView)
- Creates a new reusable CodeEditorWithPreview component with lazy-loading support
Reviewed Changes
Copilot reviewed 136 out of 200 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| www/package.json | Replaces Monaco Editor dependencies with CodeMirror 6 packages |
| www/src/app.tsx | Removes Monaco Editor initialization code |
| www/src/utils/CodeMirrorEditor.tsx | New CodeMirror 6 editor implementation with region folding support |
| www/src/components/CodeEditorWithPreview.tsx | New unified component for code preview with lazy-loaded editing |
| www/src/views/ExamplesView.tsx | Refactored from class to functional component |
| www/src/views/APIViewNew.tsx | New functional replacement for APIView |
| www/src/docs/apiExamples/*/index.tsx | Restructured API example exports to use Component pattern |
| www/src/components/GuideView/GettingStarted/Step*.tsx | Extracted step components from monolithic file |
| www/src/components/GuideView/Customize/*.tsx | Extracted customize examples into separate files |
| www/test/docs/apiExamples/apiExamples.spec.tsx | Updated tests to use new Component/sourceCode pattern |
Files not reviewed (1)
- www/package-lock.json: Language not supported
Comments suppressed due to low confidence (3)
www/src/docs/apiExamples/LineChart/LineChartExample.tsx:50
- The function should be exported as default export but is declared as const. Change to
export default function LineChartExamplefor consistency with the export statement on line 72.
www/src/docs/apiExamples/ReferenceArea/ReferenceAreaExample.tsx:23 - Missing TypeScript type annotation for props parameter. Add type annotation:
({ isAnimationActive = true }: { isAnimationActive?: boolean })for consistency with other example components.
www/src/docs/apiExamples/ErrorBar/ErrorBarExample.tsx:57 - Missing TypeScript type annotation for props parameter. Add type annotation:
({ isAnimationActive = true }: { isAnimationActive?: boolean })for consistency with other example components.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { APIView } from './APIView'; | ||
| import { ExamplesView } from './ExamplesView'; | ||
| import { APIViewNew as APIView } from './APIViewNew'; | ||
| import { ExamplesView } from './ExamplesView.tsx'; |
There was a problem hiding this comment.
The file extension .tsx should not be included in the import statement. TypeScript and most modern bundlers can resolve the extension automatically. Remove the .tsx extension from this import.
| ]; | ||
|
|
||
| // #endregion | ||
| const BarChartRangeExample = ({ isAnimationActive = true }) => ( |
There was a problem hiding this comment.
Missing TypeScript type annotation for props parameter. Add type annotation: ({ isAnimationActive = true }: { isAnimationActive?: boolean }) for consistency with other example components.
| ]; | ||
|
|
||
| // #endregion | ||
| const BarChartExample = ({ isAnimationActive = true }) => ( |
There was a problem hiding this comment.
Missing TypeScript type annotation for props parameter. Add type annotation: ({ isAnimationActive = true }: { isAnimationActive?: boolean }) for consistency with other example components.
| ]; | ||
|
|
||
| // #endregion | ||
| const AreaChartRangeExample = ({ isAnimationActive = true }) => ( |
There was a problem hiding this comment.
Missing TypeScript type annotation for props parameter. Add type annotation: ({ isAnimationActive = true }: { isAnimationActive?: boolean }) for consistency with other example components.
| ]; | ||
|
|
||
| // #endregion | ||
| const AreaChartExample = ({ isAnimationActive = true }) => ( |
There was a problem hiding this comment.
Missing TypeScript type annotation for props parameter. Add type annotation: ({ isAnimationActive = true }: { isAnimationActive?: boolean }) for consistency with other example components.
Description
Both monaco-editor and highlight.js are gone. Now, codemirror is best friend.
monaco-editor is great editor if you want offline IDE, like VSCode, but it's way too large for a docs website. It was 5MB large and difficult to break down or load asynchronously.
highlight.js on the other hand is doing great syntax highlight but not much else.
So we had two different code sample components and neither of them was quite perfect.
Introducing: codemirror. It's small, we can install and import only exactly the parts we need, and load the rest async (after clicking on Edit).
I have considered removing the edit feature altogether, but turns out that 10% of all visitors actually do edit the code inline so I decided to keep it around. But optimize for the 90%.
As a result:
javascript that we download went from 6MB -> 2MB
page load speed 10s -> 5s
now all code samples are consistent, all have VR tests, all allow opening in stackblitz, and have auto-fold regions
Also all code examples now use the actual component as its code sample, so we no longer need to keep the component + source code in sync.
Screenshots (if appropriate):
Before/after
Plus bonus satisfying animation in the "Copy" button.
Summary by CodeRabbit
Release Notes
New Features
Updates