dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(design-system): chart rendering (#40306)

Browse Source 
* 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 <vasilov.ivan@gmail.com>
This commit is contained in:
kemal.earthandIvan Vasilov authored and GitHub committed 2025-11-11 12:57:11 +00:00
1 parent 534c300a7a
commit af98191cc0
12 files changed
+48 -105
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-system/components/component-preview.tsx
+1 -72
View File
@@ -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 <Component />
}, [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 (
<>
{/* <ThemeWrapper defaultTheme="zinc"> */}
<div
className={cn('preview flex min-h-[350px] w-full justify-center p-10', {
'items-center': align === 'center',
@@ -105,17 +76,12 @@ export function ComponentPreview({
>
<React.Suspense
fallback={
<div className="flex items-center text-sm text-muted-foreground">
{/* <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> */}
{/* <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> */}
Loading...
</div>
<div className="flex items-center text-sm text-muted-foreground">Loading...</div>
}
>
{Preview}
</React.Suspense>
</div>
{/* </ThemeWrapper> */}
</>
)
}, [Preview, align])
@@ -179,7 +145,6 @@ export function ComponentPreview({
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
)}
<div className="z-10 relative">{ComponentPreview}</div>
{/* <div className="preview-grid-background"></div> */}
</div>
<Collapsible_Shadcn_>
<CollapsibleTrigger_Shadcn_
@@ -219,40 +184,4 @@ export function ComponentPreview({
</Collapsible_Shadcn_>
</div>
)
return (
<div
className={cn('group relative my-4 flex flex-col gap-2', wideClasses, className)}
{...props}
>
<Tabs defaultValue="preview" className="relative mr-auto w-full">
<div className="flex items-center justify-between pb-3">
<TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
<TabsTrigger
value="preview"
className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
>
Preview
</TabsTrigger>
<TabsTrigger
value="code"
className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
>
Code
</TabsTrigger>
</TabsList>
</div>
<TabsContent value="preview" className="relative rounded-md border bg-studio">
{ComponentPreview}
</TabsContent>
<TabsContent value="code">
<div className="flex flex-col space-y-4">
<div className="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
{Code}
</div>
</div>
</TabsContent>
</Tabs>
</div>
)
}
apps/design-system/content/docs/fragments/logs-bar-chart.mdx
+1
View File
@@ -17,5 +17,6 @@ type LogsBarChartDatum = {
timestamp: string
ok_count: number
error_count: number
warning_count: number
}
```
apps/design-system/package.json
+2 -1
View File
@@ -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",
apps/design-system/registry/default/example/logs-bar-chart.tsx
+2
View File
@@ -1,3 +1,5 @@
'use client'
import { LogsBarChart } from 'ui-patterns/LogsBarChart'
export default function LogsBarChartDemo() {
apps/studio/package.json
+1 -1
View File
@@ -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",
apps/ui-library/package.json
+1 -1
View File
@@ -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",
apps/www/package.json
+1 -1
View File
@@ -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",
packages/ui-patterns/package.json
+2 -2
View File
@@ -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:"
}
}
}
packages/ui-patterns/src/LogsBarChart/index.tsx
+4 -1
View File
@@ -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={
<ChartTooltipContent
className="text-foreground-light -mt-5"
labelFormatter={(v) => dayjs(v).format(DateTimeFormat)}
labelFormatter={(v: string) => dayjs(v).format(DateTimeFormat)}
/>
}
/>
packages/ui/package.json
+1 -1
View File
@@ -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:",
pnpm-lock.yaml
Generated
+30 -24
View File
@@ -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
pnpm-workspace.yaml
+2 -1
View File
@@ -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