fix(design-system): chart rendering (supabase#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 <[email protected]>

Author: kemaldotearth

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 <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

@@ -17,5 +17,6 @@ type LogsBarChartDatum = {
   timestamp: string
   ok_count: number
   error_count: number
+  warning_count: number
 }
 ```

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",

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() {

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",

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",

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",

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:"
   }
-}
+}

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={
               <ChartTooltipContent
                 className="text-foreground-light -mt-5"
-                labelFormatter={(v) => dayjs(v).format(DateTimeFormat)}
+                labelFormatter={(v: string) => dayjs(v).format(DateTimeFormat)}
               />
             }
           />

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:",