Merge branch 'main' into refactor/radix-to-base-ui

Author: sukvvon

src/components/charts/ChartsCatalogDocExample.client.tsx

@@ -13,23 +13,25 @@ const LazyExampleWorkbench = React.lazy(() =>
 
 export function ChartsCatalogDocExampleClient({
   caseId,
+  edit,
   fallback,
   height,
   source,
   title,
 }: {
   caseId: string
+  edit: boolean
   fallback: React.ReactNode
   height: number
   source: 'hidden' | 'collapsed' | 'expanded'
   title?: string
 }) {
   const [definition, setDefinition] = React.useState<ExampleDefinition>()
-  const [editing, setEditing] = React.useState(source === 'expanded')
+  const [editing, setEditing] = React.useState(edit)
 
   React.useEffect(() => {
-    setEditing(source === 'expanded')
-  }, [caseId, source])
+    setEditing(edit)
+  }, [caseId, edit])
 
   React.useEffect(() => {
     let cancelled = false

src/components/charts/ChartsCatalogDocExample.tsx

@@ -1,6 +1,7 @@
 import { ClientOnly } from '@tanstack/react-router'
 import * as React from 'react'
 import { ChartsCatalogPreview } from './ChartsCatalogPreview'
+import { Button } from '~/components/ds/ui'
 
 const LazyChartsCatalogDocExample = React.lazy(() =>
   import('./ChartsCatalogDocExample.client').then((module) => ({
@@ -19,45 +20,30 @@ export function ChartsCatalogDocExample({
   source?: 'hidden' | 'collapsed' | 'expanded'
   title?: string
 }) {
-  const containerRef = React.useRef<HTMLElement>(null)
-  const [shouldLoad, setShouldLoad] = React.useState(false)
+  const [activation, setActivation] = React.useState<{
+    caseId: string
+    edit: boolean
+  }>()
+  const isActive = activation?.caseId === caseId
   const fallback = (
     <ChartsCatalogDocExampleFallback
       caseId={caseId}
       height={height}
+      onEdit={() => setActivation({ caseId, edit: true })}
+      onRun={() => setActivation({ caseId, edit: false })}
       source={source}
       title={title}
     />
   )
 
-  React.useEffect(() => {
-    const container = containerRef.current
-    if (shouldLoad || !container) return
-
-    if (!('IntersectionObserver' in window)) {
-      setShouldLoad(true)
-      return
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (!entries.some((entry) => entry.isIntersecting)) return
-        setShouldLoad(true)
-        observer.disconnect()
-      },
-      { rootMargin: '320px 0px' },
-    )
-    observer.observe(container)
-    return () => observer.disconnect()
-  }, [shouldLoad])
-
   return (
-    <section ref={containerRef} className="not-prose my-5">
-      {shouldLoad ? (
+    <section className="not-prose my-5">
+      {isActive ? (
         <ClientOnly fallback={fallback}>
           <React.Suspense fallback={fallback}>
             <LazyChartsCatalogDocExample
               caseId={caseId}
+              edit={activation.edit}
               fallback={fallback}
               height={height}
               source={source}
@@ -75,11 +61,15 @@ export function ChartsCatalogDocExample({
 function ChartsCatalogDocExampleFallback({
   caseId,
   height,
+  onEdit,
+  onRun,
   source,
   title,
 }: {
   caseId: string
   height: number
+  onEdit: () => void
+  onRun: () => void
   source: 'hidden' | 'collapsed' | 'expanded'
   title?: string
 }) {
@@ -90,21 +80,27 @@ function ChartsCatalogDocExampleFallback({
       className="overflow-hidden rounded-lg border border-border-default bg-background-default"
       data-chart-example={caseId}
     >
-      {source !== 'hidden' ? (
-        <div className="flex min-h-10 items-center justify-between gap-3 border-b border-border-default px-3">
+      <div
+        className={`flex min-h-10 items-center gap-3 border-b border-border-default px-2 ${source === 'hidden' ? 'justify-end' : 'justify-between pl-3'}`}
+      >
+        {source !== 'hidden' ? (
           <span className="min-w-0 truncate font-ds-mono text-xs text-text-muted">
             {label}
           </span>
-          <a
-            className="shrink-0 text-xs font-medium text-text-secondary hover:text-text-primary"
-            href={`/charts/catalog/charts/${caseId}`}
-          >
-            Open example
-          </a>
+        ) : null}
+        <div className="flex shrink-0 items-center gap-1">
+          {source !== 'hidden' ? (
+            <Button type="button" variant="ghost" size="xs" onClick={onEdit}>
+              Edit
+            </Button>
+          ) : null}
+          <Button type="button" variant="primary" size="xs" onClick={onRun}>
+            Run
+          </Button>
         </div>
-      ) : null}
+      </div>
       <div aria-label={`${label} chart preview`} role="img" style={{ height }}>
-        <ChartsCatalogPreview caseId={caseId} className="p-8" family="" />
+        <ChartsCatalogPreview caseId={caseId} />
       </div>
     </div>
   )

src/components/charts/ChartsCatalogPages.tsx

@@ -17,8 +17,10 @@ type CatalogCaseMetadata = ChartsCatalogIndexCase
 
 export function ChartsCatalog({
   cases,
+  revision,
 }: {
   cases: Array<CatalogCaseMetadata>
+  revision: string
 }) {
   const [query, setQuery] = React.useState('')
   const [family, setFamily] = React.useState('all')
@@ -62,14 +64,10 @@ export function ChartsCatalog({
             key={catalogCase.id}
             className="group relative min-w-0 overflow-hidden rounded-xl border border-border-subtle bg-background-surface"
           >
-            <div
-              aria-hidden="true"
-              className={fullWidth ? 'aspect-[3/1]' : 'aspect-[3/2]'}
-            >
+            <div aria-hidden="true" className="aspect-[3/2]">
               <ChartsCatalogPreview
                 caseId={catalogCase.id}
-                className="p-5"
-                family={catalogCase.family}
+                revision={revision}
               />
             </div>
             <div className="flex min-h-16 items-center justify-between gap-4 border-t border-border-subtle px-4 py-3">