mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Tiago Antunes
b79a64e301
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Feature, docs update ## What is the new behavior? This PR introduces a new `RealtimeFlow` component and hook to the UI library for building collaborative React Flow with Supabase Realtime: - keeps nodes and edges in sync across multiple connected clients in real time - uses Yjs with `@supabase-labs/y-supabase` to propagate flow updates - supports optional persistence, so a flow can be restored from previously saved shared state ## Additional context https://github.com/user-attachments/assets/90d3a381-6f9c-427f-a493-5d91c2141462 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Collaborative "Realtime Flow" diagram editor with syncing overlays and a dual-view demo component * Interactive demo page and registry example for live editing (add/remove/rename nodes) * Framework-ready registry packages for Next.js, React, React Router, and TanStack * **Documentation** * Comprehensive docs added for Next.js, React, React Router, and TanStack (usage, persistence, hook API) * **Chores** * Added runtime dependency for the flow component package [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/44273) <!-- end of auto-generated comment: release notes by coderabbit.ai -->
115 lines
2.5 KiB
TypeScript
115 lines
2.5 KiB
TypeScript
import type { RegistryItem } from 'shadcn/schema'
|
|
|
|
export const examples: RegistryItem[] = [
|
|
{
|
|
name: 'dropzone-demo',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/dropzone-demo.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'realtime-cursor-demo',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/realtime-cursor-demo.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'realtime-flow-demo',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/realtime-flow-demo.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'realtime-monaco-demo',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/realtime-monaco-demo.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'password-based-auth-demo',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/password-based-auth.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'current-user-avatar-demo',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/current-user-avatar-demo.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'current-user-avatar-preview',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/current-user-avatar-preview.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'realtime-avatar-stack-demo',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/realtime-avatar-stack-demo.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'realtime-avatar-stack-preview',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/realtime-avatar-stack-preview.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'infinite-query-hook-demo',
|
|
type: 'registry:example',
|
|
registryDependencies: [],
|
|
files: [
|
|
{
|
|
path: 'registry/default/examples/infinite-query-hook-demo.tsx',
|
|
type: 'registry:example',
|
|
},
|
|
],
|
|
},
|
|
]
|