mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 21:59:16 +03:00
Sean Oliver
ec4bc204b1
Implements a growth engineering experiment to improve new user onboarding by providing AI-powered and template-based table creation options. Features: - AI prompt interface for describing app requirements - Pre-built templates for common app types (social media, e-commerce, blog, etc.) - Seamless integration with existing table editor - State management using Valtio for reliable data flow - PostHog feature flag controlled (tableQuickstart) Technical implementation: - Uses Valtio proxy-based state management instead of sessionStorage - Properly handles quickstart flow to prevent race conditions - Integrates with TableEditor via useQuickstartData hook - Cleans up state appropriately to prevent panel re-opening issues - Full TypeScript support with proper type definitions The experiment aims to reduce time-to-value for new users by providing smart defaults and reducing the SQL knowledge barrier for initial setup.
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { proxy, useSnapshot } from 'valtio'
|
|
import type { TableSuggestion } from './types'
|
|
|
|
type QuickstartStore = {
|
|
selectedTableData: {
|
|
tableName: string
|
|
fields: TableSuggestion['fields']
|
|
} | null
|
|
isQuickstartFlow: boolean
|
|
setQuickstartData: (table: TableSuggestion | null) => void
|
|
clearQuickstartData: () => void
|
|
startQuickstartFlow: () => void
|
|
endQuickstartFlow: () => void
|
|
}
|
|
|
|
const quickstartStore = proxy<QuickstartStore>({
|
|
selectedTableData: null,
|
|
isQuickstartFlow: false,
|
|
|
|
setQuickstartData: (table) => {
|
|
if (table) {
|
|
quickstartStore.selectedTableData = {
|
|
tableName: table.tableName,
|
|
fields: table.fields,
|
|
}
|
|
quickstartStore.isQuickstartFlow = true
|
|
} else {
|
|
quickstartStore.selectedTableData = null
|
|
}
|
|
},
|
|
|
|
clearQuickstartData: () => {
|
|
quickstartStore.selectedTableData = null
|
|
quickstartStore.isQuickstartFlow = false
|
|
},
|
|
|
|
startQuickstartFlow: () => {
|
|
quickstartStore.isQuickstartFlow = true
|
|
},
|
|
|
|
endQuickstartFlow: () => {
|
|
quickstartStore.isQuickstartFlow = false
|
|
},
|
|
})
|
|
|
|
export const useQuickstartStore = () => {
|
|
return quickstartStore
|
|
}
|
|
|
|
export const useQuickstartSnapshot = () => {
|
|
return useSnapshot(quickstartStore)
|
|
}
|
|
|
|
export const getQuickstartStore = () => quickstartStore
|