From af98191cc07974b4f31575270c3658b480b502dd Mon Sep 17 00:00:00 2001 From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com> Date: Tue, 11 Nov 2025 12:57:11 +0000 Subject: [PATCH] fix(design-system): chart rendering (#40306) * chore: exploring possible breaking charts * chore: still exploring why chart container content wont load * chore: clean up and pin recharts to catalog * chore: remove comments from comment preview file * chore: remove react override * Remove React 19.2 as a dependency. --------- Co-authored-by: Ivan Vasilov --- .../components/component-preview.tsx | 73 +------------------ .../content/docs/fragments/logs-bar-chart.mdx | 1 + apps/design-system/package.json | 3 +- .../default/example/logs-bar-chart.tsx | 2 + apps/studio/package.json | 2 +- apps/ui-library/package.json | 2 +- apps/www/package.json | 2 +- packages/ui-patterns/package.json | 4 +- .../ui-patterns/src/LogsBarChart/index.tsx | 5 +- packages/ui/package.json | 2 +- pnpm-lock.yaml | 54 ++++++++------ pnpm-workspace.yaml | 3 +- 12 files changed, 48 insertions(+), 105 deletions(-) diff --git a/apps/design-system/components/component-preview.tsx b/apps/design-system/components/component-preview.tsx index 5a855c5f684..278dddbcfd0 100644 --- a/apps/design-system/components/component-preview.tsx +++ b/apps/design-system/components/component-preview.tsx @@ -11,22 +11,6 @@ import { cn, } from 'ui' import { useConfig } from '@/hooks/use-config' -import { - // CopyButton, - CopyWithClassNames, -} from '@/components/copy-button' -// import { Icons } from '@/components/icons' -// import { StyleSwitcher } from '@/components/style-switcher' -// import { ThemeWrapper } from '@/components/theme-wrapper' -import { - Tabs_Shadcn_ as Tabs, - TabsContent_Shadcn_ as TabsContent, - TabsList_Shadcn_ as TabsList, - TabsTrigger_Shadcn_ as TabsTrigger, -} from 'ui' - -// import { LoaderCircle } from 'lucide-react' - import { styles } from '@/registry/styles' import { ChevronRight, Expand } from 'lucide-react' @@ -63,12 +47,7 @@ export function ComponentPreview({ const [expand, setExpandState] = React.useState(false) const Preview = React.useMemo(() => { - // console.log('Index', Index) - // console.log('name', name) - // console.log('config.style', config.style) - const Component = Index[config.style][name]?.component - // const Component = Index[name]?.component if (!Component) { return ( @@ -85,17 +64,9 @@ export function ComponentPreview({ return }, [name, config.style]) - const codeString = React.useMemo(() => { - if (typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined') { - const [, Button] = React.Children.toArray(Code.props.children) as React.ReactElement[] - return Button?.props?.value || Button?.props?.__rawString__ || null - } - }, [Code]) - const ComponentPreview = React.useMemo(() => { return ( <> - {/* */}
- {/* */} - {/* */} - Loading... -
+
Loading...
} > {Preview} - {/* */} ) }, [Preview, align]) @@ -179,7 +145,6 @@ export function ComponentPreview({
)}
{ComponentPreview}
- {/*
*/} ) - - return ( -
- -
- - - Preview - - - Code - - -
- - {ComponentPreview} - - -
-
- {Code} -
-
- - -
- ) } diff --git a/apps/design-system/content/docs/fragments/logs-bar-chart.mdx b/apps/design-system/content/docs/fragments/logs-bar-chart.mdx index 7127ecd2eac..f86b46da321 100644 --- a/apps/design-system/content/docs/fragments/logs-bar-chart.mdx +++ b/apps/design-system/content/docs/fragments/logs-bar-chart.mdx @@ -17,5 +17,6 @@ type LogsBarChartDatum = { timestamp: string ok_count: number error_count: number + warning_count: number } ``` diff --git a/apps/design-system/package.json b/apps/design-system/package.json index 32c711e38c2..b79fa890b5f 100644 --- a/apps/design-system/package.json +++ b/apps/design-system/package.json @@ -19,6 +19,7 @@ "dependencies": { "@hookform/resolvers": "^3.1.1", "contentlayer2": "0.4.6", + "dayjs": "1.11.13", "date-fns": "^2.30.0", "eslint-config-supabase": "workspace:*", "icons": "workspace:*", @@ -36,7 +37,7 @@ "react-hook-form": "^7.45.0", "react-inlinesvg": "^4.0.4", "react-wrap-balancer": "^1.1.0", - "recharts": "^2.12.7", + "recharts": "catalog:", "rehype-autolink-headings": "^7.1.0", "rehype-pretty-code": "^0.9.0", "rehype-slug": "^6.0.0", diff --git a/apps/design-system/registry/default/example/logs-bar-chart.tsx b/apps/design-system/registry/default/example/logs-bar-chart.tsx index 2c348594f15..3b0a83db34e 100644 --- a/apps/design-system/registry/default/example/logs-bar-chart.tsx +++ b/apps/design-system/registry/default/example/logs-bar-chart.tsx @@ -1,3 +1,5 @@ +'use client' + import { LogsBarChart } from 'ui-patterns/LogsBarChart' export default function LogsBarChartDemo() { diff --git a/apps/studio/package.json b/apps/studio/package.json index 73d5238afb1..eb32f9e207e 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -127,7 +127,7 @@ "react-simple-maps": "4.0.0-beta.6", "react-use": "^17.5.0", "reactflow": "^11.10.1", - "recharts": "^2.8.0", + "recharts": "catalog:", "remark-gfm": "^3.0.1", "shared-data": "workspace:*", "sonner": "^1.5.0", diff --git a/apps/ui-library/package.json b/apps/ui-library/package.json index 6ace5f764f7..fb02e5e444b 100644 --- a/apps/ui-library/package.json +++ b/apps/ui-library/package.json @@ -73,7 +73,7 @@ "react-hook-form": "^7.45.0", "react-markdown": "^10.1.0", "react-wrap-balancer": "^1.1.0", - "recharts": "^2.8.0", + "recharts": "catalog:", "rehype-autolink-headings": "^7.1.0", "rehype-pretty-code": "^0.9.0", "rehype-slug": "^6.0.0", diff --git a/apps/www/package.json b/apps/www/package.json index 0e70aaacce7..71492286b9b 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -73,7 +73,7 @@ "react-syntax-highlighter": "^15.6.6", "react-transition-group": "^4.4.1", "react-use": "^17.4.0", - "recharts": "^2.8.0", + "recharts": "catalog:", "rehype-slug": "^5.1.0", "remark": "^15.0.1", "remark-gfm": "^3.0.1", diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json index 39e7e8f6034..0ec9860f191 100644 --- a/packages/ui-patterns/package.json +++ b/packages/ui-patterns/package.json @@ -635,7 +635,7 @@ "react-syntax-highlighter": "^15.6.6", "react-tooltip": "*", "react-use": "^17.5.0", - "recharts": "^2.8.0", + "recharts": "catalog:", "remark": "^15.0.1", "remark-gfm": "^4.0.0", "scroll-into-view-if-needed": "^3.1.0", @@ -671,4 +671,4 @@ "peerDependencies": { "next": "catalog:" } -} +} \ No newline at end of file diff --git a/packages/ui-patterns/src/LogsBarChart/index.tsx b/packages/ui-patterns/src/LogsBarChart/index.tsx index a7ff1985a7d..e540df49b44 100644 --- a/packages/ui-patterns/src/LogsBarChart/index.tsx +++ b/packages/ui-patterns/src/LogsBarChart/index.tsx @@ -1,4 +1,5 @@ 'use client' + import dayjs from 'dayjs' import { ReactNode, useState } from 'react' import { Bar, Cell, BarChart as RechartBarChart, XAxis, YAxis } from 'recharts' @@ -15,12 +16,14 @@ const CHART_COLORS = { YELLOW_1: 'hsl(var(--warning-default))', YELLOW_2: 'hsl(var(--warning-500))', } + type LogsBarChartDatum = { timestamp: string error_count: number ok_count: number warning_count: number } + export const LogsBarChart = ({ data, onBarClick, @@ -95,7 +98,7 @@ export const LogsBarChart = ({ content={ dayjs(v).format(DateTimeFormat)} + labelFormatter={(v: string) => dayjs(v).format(DateTimeFormat)} /> } /> diff --git a/packages/ui/package.json b/packages/ui/package.json index 448077706bb..713cceb7b2c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -73,7 +73,7 @@ "react-medium-image-zoom": "^5.2.4", "react-resizable-panels": "^2.1.4", "react-syntax-highlighter": "^15.6.6", - "recharts": "^2.12.7", + "recharts": "catalog:", "sonner": "^1.5.0", "tailwind-merge": "^1.13.2", "tailwindcss": "catalog:", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b0c929109ba..45d2f69d5d9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,6 +36,9 @@ catalogs: react-dom: specifier: ^18.3.0 version: 18.3.1 + recharts: + specifier: ^2.15.4 + version: 2.15.4 tailwindcss: specifier: 3.4.1 version: 3.4.1 @@ -232,6 +235,9 @@ importers: date-fns: specifier: ^2.30.0 version: 2.30.0 + dayjs: + specifier: 1.11.13 + version: 1.11.13 eslint-config-supabase: specifier: workspace:* version: link:../../packages/eslint-config-supabase @@ -281,8 +287,8 @@ importers: specifier: ^1.1.0 version: 1.1.0(react@18.3.1) recharts: - specifier: ^2.12.7 - version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 'catalog:' + version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rehype-autolink-headings: specifier: ^7.1.0 version: 7.1.0 @@ -1045,8 +1051,8 @@ importers: specifier: ^11.10.1 version: 11.10.1(@types/react@18.3.3)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) recharts: - specifier: ^2.8.0 - version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 'catalog:' + version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) remark-gfm: specifier: ^3.0.1 version: 3.0.1(supports-color@8.1.1) @@ -1427,8 +1433,8 @@ importers: specifier: ^1.1.0 version: 1.1.0(react@18.3.1) recharts: - specifier: ^2.8.0 - version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 'catalog:' + version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rehype-autolink-headings: specifier: ^7.1.0 version: 7.1.0 @@ -1707,8 +1713,8 @@ importers: specifier: ^17.4.0 version: 17.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) recharts: - specifier: ^2.8.0 - version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 'catalog:' + version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rehype-slug: specifier: ^5.1.0 version: 5.1.0 @@ -2345,8 +2351,8 @@ importers: specifier: ^15.6.6 version: 15.6.6(react@18.3.1) recharts: - specifier: ^2.12.7 - version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 'catalog:' + version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) sonner: specifier: ^1.5.0 version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -2514,8 +2520,8 @@ importers: specifier: ^17.5.0 version: 17.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) recharts: - specifier: ^2.8.0 - version: 2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 'catalog:' + version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) remark: specifier: ^15.0.1 version: 15.0.1(supports-color@8.1.1) @@ -17054,11 +17060,11 @@ packages: react: ^16.8.0 || 17.x || 18.x react-dom: ^16.8.0 || 17.x || 18.x - react-smooth@4.0.1: - resolution: {integrity: sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==} + react-smooth@4.0.4: + resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==} peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-style-singleton@2.2.3: resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==} @@ -17164,12 +17170,12 @@ packages: recharts-scale@0.4.5: resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==} - recharts@2.12.7: - resolution: {integrity: sha512-hlLJMhPQfv4/3NBSAyq3gzGg4h2v69RJh6KU7b3pXYNNAELs9kEoXOjbkxdXpALqKBoVmVptGfLpxdaVYqjmXQ==} + recharts@2.15.4: + resolution: {integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==} engines: {node: '>=14'} peerDependencies: - react: ^16.0.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 + react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 rechoir@0.6.2: resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==} @@ -38893,7 +38899,7 @@ snapshots: react-dom: 18.3.1(react@18.3.1) topojson-client: 3.1.0 - react-smooth@4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: fast-equals: 5.0.1 prop-types: 15.8.1 @@ -39047,15 +39053,15 @@ snapshots: dependencies: decimal.js-light: 2.5.1 - recharts@2.12.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + recharts@2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: clsx: 2.1.1 eventemitter3: 4.0.7 lodash: 4.17.21 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-is: 16.13.1 - react-smooth: 4.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-is: 18.3.1 + react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) recharts-scale: 0.4.5 tiny-invariant: 1.3.3 victory-vendor: 36.6.11 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 5c802c6491f..42ecbcb2131 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -15,6 +15,7 @@ catalog: next: ^15.5.2 react: ^18.3.0 react-dom: ^18.3.0 + recharts: ^2.15.4 tailwindcss: 3.4.1 tsx: 4.20.3 typescript: ~5.9.0 @@ -54,6 +55,6 @@ overrides: '@tanstack/directive-functions-plugin>vite': 'catalog:' '@tanstack/react-start-plugin>vite': 'catalog:' 'vinxi>vite': 'catalog:' - 'refractor>prismjs': ^1.30.0 + 'refractor>prismjs': ^1.30.0 esbuild: ^0.25.2 tmp: ^0.2.4