mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Gildas Garcia
86a3f8b03d
- Most changes are related to either types or `useRef` usages (it now requires an initial value). - also updated `vaul` to its latest version and haven't noticed any change ([design-system demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer)) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Upgraded workspace to React 19. * **Bug Fixes** * Improved null-safety and ref handling across editors, UI components, shortcuts, and markdown/image rendering to reduce runtime errors. * Safer event/timeout/interval cleanup and more robust command/context handling. * **Chores** * Bumped vaul dependency versions. * **Documentation** * Type and TypeScript accuracy improvements for clearer developer feedback. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import {
|
|
cn,
|
|
Tabs_Shadcn_ as Tabs,
|
|
TabsContent_Shadcn_ as TabsContent,
|
|
TabsList_Shadcn_ as TabsList,
|
|
TabsTrigger_Shadcn_ as TabsTrigger,
|
|
} from 'ui'
|
|
|
|
import {
|
|
// CopyButton,
|
|
CopyWithClassNames,
|
|
} from '@/components/copy-button'
|
|
|
|
interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
extractClassname?: boolean
|
|
extractedClassNames?: string
|
|
align?: 'center' | 'start' | 'end'
|
|
src?: string
|
|
}
|
|
|
|
export function ComponentExample({
|
|
children,
|
|
className,
|
|
extractClassname,
|
|
extractedClassNames,
|
|
align = 'center',
|
|
src: _,
|
|
...props
|
|
}: ComponentExampleProps) {
|
|
const [Example, Code, ...Children] = React.Children.toArray(children) as React.ReactElement<{
|
|
children: React.ReactNode
|
|
'data-rehype-pretty-code-fragment'?: unknown
|
|
}>[]
|
|
|
|
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<{
|
|
value?: string
|
|
__rawString__?: string
|
|
}>[]
|
|
return Button?.props?.value || Button?.props?.__rawString__ || null
|
|
}
|
|
}, [Code])
|
|
|
|
return (
|
|
<div className={cn('group relative my-4 flex flex-col gap-2', 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 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 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>
|
|
{
|
|
extractedClassNames && codeString ? (
|
|
<CopyWithClassNames
|
|
value={codeString}
|
|
classNames={extractedClassNames}
|
|
className="absolute right-4 top-20"
|
|
/>
|
|
) : undefined
|
|
// codeString && <CopyButton value={codeString} className="absolute right-4 top-20" />
|
|
}
|
|
</div>
|
|
<TabsContent value="preview" className="rounded-md border">
|
|
<div
|
|
className={cn('flex min-h-[350px] justify-center p-10', {
|
|
'items-center': align === 'center',
|
|
'items-start': align === 'start',
|
|
'items-end': align === 'end',
|
|
})}
|
|
>
|
|
{Example}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="code">
|
|
<div className="flex flex-col space-y-4">
|
|
<div className="w-full rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
|
|
{Code}
|
|
</div>
|
|
{Children?.length ? (
|
|
<div className="rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
|
|
{Children}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|