chore(editor): ♻️ Revert tables to arrays

Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉

packages/models/src/publicTypebot.ts

@@ -1,23 +1,16 @@
+import { Block, Edge, Settings, Step, Theme, Variable } from './typebot'
 import { PublicTypebot as PublicTypebotFromPrisma } from 'db'
-import { Block, ChoiceItem, Edge, Settings, Step, Theme } from './typebot'
-import { Variable } from './typebot/variable'
-import { Table } from './utils'
 
 export type PublicTypebot = Omit<
   PublicTypebotFromPrisma,
-  | 'blocks'
-  | 'startBlock'
-  | 'theme'
-  | 'settings'
-  | 'steps'
-  | 'choiceItems'
-  | 'variables'
+  'blocks' | 'theme' | 'settings' | 'variables' | 'edges'
 > & {
-  blocks: Table<Block>
-  steps: Table<Step>
-  choiceItems: Table<ChoiceItem>
-  variables: Table<Variable>
-  edges: Table<Edge>
+  blocks: PublicBlock[]
+  variables: Variable[]
+  edges: Edge[]
   theme: Theme
   settings: Settings
 }
+
+export type PublicBlock = Omit<Block, 'steps'> & { steps: PublicStep[] }
+export type PublicStep = Omit<Step, 'webhook'> & { webhook?: string }

packages/models/src/typebot/steps/index.ts

@@ -3,3 +3,4 @@ export * from './bubble'
 export * from './inputs'
 export * from './logic'
 export * from './integration'
+export * from './item'

packages/models/src/typebot/steps/inputs.ts

@@ -1,3 +1,5 @@
+import { ItemBase, ItemType } from '.'
+import { Item } from './item'
 import { StepBase } from './steps'
 
 export type InputStep =
@@ -62,14 +64,13 @@ export type PhoneNumberInputOptions = OptionBase & InputTextOptionsBase
 
 export type ChoiceInputStep = StepBase & {
   type: InputStepType.CHOICE
+  items: ButtonItem[]
   options: ChoiceInputOptions
 }
 
-export type ChoiceItem = {
-  id: string
-  stepId: string
+export type ButtonItem = ItemBase & {
+  type: ItemType.BUTTON
   content?: string
-  edgeId?: string
 }
 
 type OptionBase = { variableId?: string }
@@ -78,7 +79,6 @@ type InputTextOptionsBase = {
 }
 
 export type ChoiceInputOptions = OptionBase & {
-  itemIds: string[]
   isMultipleChoice: boolean
   buttonLabel: string
 }
@@ -140,5 +140,4 @@ export const defaultPhoneInputOptions: PhoneNumberInputOptions = {
 export const defaultChoiceInputOptions: ChoiceInputOptions = {
   buttonLabel: defaultButtonLabel,
   isMultipleChoice: false,
-  itemIds: [],
 }

packages/models/src/typebot/steps/integration.ts

@@ -1,5 +1,4 @@
 import { StepBase } from '.'
-import { Table } from '../..'
 
 export type IntegrationStep =
   | GoogleSheetsStep
@@ -30,6 +29,7 @@ export type GoogleAnalyticsStep = StepBase & {
 export type WebhookStep = StepBase & {
   type: IntegrationStepType.WEBHOOK
   options: WebhookOptions
+  webhook: Webhook
 }
 
 export type GoogleAnalyticsOptions = {
@@ -58,34 +58,41 @@ export type GoogleSheetsOptionsBase = {
   sheetId?: string
 }
 
-export type Cell = { column?: string; value?: string }
-export type ExtractingCell = { column?: string; variableId?: string }
+export type Cell = { id: string; column?: string; value?: string }
+export type ExtractingCell = {
+  id: string
+  column?: string
+  variableId?: string
+}
 
 export type GoogleSheetsGetOptions = NonNullable<GoogleSheetsOptionsBase> & {
   action: GoogleSheetsAction.GET
   referenceCell?: Cell
-  cellsToExtract: Table<ExtractingCell>
+  cellsToExtract: ExtractingCell[]
 }
 
 export type GoogleSheetsInsertRowOptions =
   NonNullable<GoogleSheetsOptionsBase> & {
     action: GoogleSheetsAction.INSERT_ROW
-    cellsToInsert: Table<Cell>
+    cellsToInsert: Cell[]
   }
 
 export type GoogleSheetsUpdateRowOptions =
   NonNullable<GoogleSheetsOptionsBase> & {
     action: GoogleSheetsAction.UPDATE_ROW
     referenceCell?: Cell
-    cellsToUpsert: Table<Cell>
+    cellsToUpsert: Cell[]
   }
 
-export type ResponseVariableMapping = { bodyPath?: string; variableId?: string }
+export type ResponseVariableMapping = {
+  id: string
+  bodyPath?: string
+  variableId?: string
+}
 
 export type WebhookOptions = {
-  webhookId: string
-  variablesForTest: Table<VariableForTest>
-  responseVariableMapping: Table<ResponseVariableMapping>
+  variablesForTest: VariableForTest[]
+  responseVariableMapping: ResponseVariableMapping[]
 }
 
 export enum HttpMethod {
@@ -100,15 +107,19 @@ export enum HttpMethod {
   TRACE = 'TRACE',
 }
 
-export type KeyValue = { key?: string; value?: string }
-export type VariableForTest = { variableId?: string; value?: string }
+export type KeyValue = { id: string; key?: string; value?: string }
+export type VariableForTest = {
+  id: string
+  variableId?: string
+  value?: string
+}
 
 export type Webhook = {
   id: string
   url?: string
   method: HttpMethod
-  queryParams: Table<KeyValue>
-  headers: Table<KeyValue>
+  queryParams: KeyValue[]
+  headers: KeyValue[]
   body?: string
 }
 
@@ -122,12 +133,12 @@ export const defaultGoogleSheetsOptions: GoogleSheetsOptions = {}
 export const defaultGoogleAnalyticsOptions: GoogleAnalyticsOptions = {}
 
 export const defaultWebhookOptions: Omit<WebhookOptions, 'webhookId'> = {
-  responseVariableMapping: { byId: {}, allIds: [] },
-  variablesForTest: { byId: {}, allIds: [] },
+  responseVariableMapping: [],
+  variablesForTest: [],
 }
 
 export const defaultWebhookAttributes: Omit<Webhook, 'id'> = {
   method: HttpMethod.GET,
-  headers: { byId: {}, allIds: [] },
-  queryParams: { byId: {}, allIds: [] },
+  headers: [],
+  queryParams: [],
 }

packages/models/src/typebot/steps/item.ts

@@ -0,0 +1,20 @@
+import { ButtonItem, ConditionItem } from '.'
+
+export type Item = ButtonItem | ConditionItem
+
+export enum ItemType {
+  BUTTON,
+  CONDITION,
+}
+
+export type ItemBase = {
+  id: string
+  stepId: string
+  outgoingEdgeId?: string
+}
+
+export type ItemIndices = {
+  blockIndex: number
+  stepIndex: number
+  itemIndex: number
+}

packages/models/src/typebot/steps/logic.ts

@@ -1,5 +1,5 @@
-import { StepBase } from '.'
-import { Table } from '../..'
+import { ItemType, StepBase } from '.'
+import { ItemBase } from './item'
 
 export type LogicStep = SetVariableStep | ConditionStep | RedirectStep
 
@@ -9,10 +9,7 @@ export enum LogicStepType {
   REDIRECT = 'Redirect',
 }
 
-export type LogicStepOptions =
-  | SetVariableOptions
-  | ConditionOptions
-  | RedirectOptions
+export type LogicStepOptions = SetVariableOptions | RedirectOptions
 
 export type SetVariableStep = StepBase & {
   type: LogicStepType.SET_VARIABLE
@@ -21,9 +18,12 @@ export type SetVariableStep = StepBase & {
 
 export type ConditionStep = StepBase & {
   type: LogicStepType.CONDITION
-  options: ConditionOptions
-  trueEdgeId?: string
-  falseEdgeId?: string
+  items: [ConditionItem]
+}
+
+export type ConditionItem = ItemBase & {
+  type: ItemType.CONDITION
+  content: ConditionContent
 }
 
 export type RedirectStep = StepBase & {
@@ -45,8 +45,8 @@ export enum ComparisonOperators {
   IS_SET = 'Is set',
 }
 
-export type ConditionOptions = {
-  comparisons: Table<Comparison>
+export type ConditionContent = {
+  comparisons: Comparison[]
   logicalOperator: LogicalOperator
 }
 
@@ -69,8 +69,8 @@ export type RedirectOptions = {
 
 export const defaultSetVariablesOptions: SetVariableOptions = {}
 
-export const defaultConditionOptions: ConditionOptions = {
-  comparisons: { byId: {}, allIds: [] },
+export const defaultConditionContent: ConditionContent = {
+  comparisons: [],
   logicalOperator: LogicalOperator.AND,
 }
 

packages/models/src/typebot/steps/steps.ts

@@ -2,8 +2,12 @@ import {
   InputStepOptions,
   IntegrationStepOptions,
   IntegrationStepType,
+  Item,
   LogicStepOptions,
+  RedirectStep,
+  SetVariableStep,
 } from '.'
+import { Edge } from '..'
 import { BubbleStep, BubbleStepType } from './bubble'
 import { InputStep, InputStepType } from './inputs'
 import { IntegrationStep } from './integration'
@@ -31,11 +35,16 @@ export type DraggableStepType =
   | LogicStepType
   | IntegrationStepType
 
-export type StepWithOptions = InputStep | LogicStep | IntegrationStep
+export type StepWithOptions =
+  | InputStep
+  | SetVariableStep
+  | RedirectStep
+  | IntegrationStep
 
 export type StepWithOptionsType =
   | InputStepType
-  | LogicStepType
+  | LogicStepType.REDIRECT
+  | LogicStepType.SET_VARIABLE
   | IntegrationStepType
 
 export type StepOptions =
@@ -43,9 +52,16 @@ export type StepOptions =
   | LogicStepOptions
   | IntegrationStepOptions
 
-export type StepBase = { id: string; blockId: string; edgeId?: string }
+export type StepWithItems = Omit<Step, 'items'> & { items: Item[] }
+
+export type StepBase = { id: string; blockId: string; outgoingEdgeId?: string }
 
 export type StartStep = StepBase & {
   type: 'start'
   label: string
 }
+
+export type StepIndices = {
+  blockIndex: number
+  stepIndex: number
+}

packages/models/src/typebot/typebot.ts

@@ -1,28 +1,16 @@
 import { Typebot as TypebotFromPrisma } from 'db'
-import { ChoiceItem } from './steps/inputs'
-import { Table } from '../utils'
 import { Settings } from './settings'
 import { Step } from './steps/steps'
 import { Theme } from './theme'
 import { Variable } from './variable'
-import { Webhook } from '.'
 
 export type Typebot = Omit<
   TypebotFromPrisma,
-  | 'blocks'
-  | 'theme'
-  | 'settings'
-  | 'steps'
-  | 'choiceItems'
-  | 'variables'
-  | 'webhooks'
+  'blocks' | 'theme' | 'settings' | 'variables' | 'edges'
 > & {
-  blocks: Table<Block>
-  steps: Table<Step>
-  choiceItems: Table<ChoiceItem>
-  variables: Table<Variable>
-  edges: Table<Edge>
-  webhooks: Table<Webhook>
+  blocks: Block[]
+  variables: Variable[]
+  edges: Edge[]
   theme: Theme
   settings: Settings
 }
@@ -34,14 +22,13 @@ export type Block = {
     x: number
     y: number
   }
-  stepIds: string[]
+  steps: Step[]
 }
 
 export type Source = {
   blockId: string
   stepId: string
-  buttonId?: string
-  conditionType?: 'true' | 'false'
+  itemId?: string
 }
 export type Target = { blockId: string; stepId?: string }
 export type Edge = {

packages/models/src/utils.ts

@@ -1,3 +1 @@
-export type Table<T> = { byId: { [key: string]: T }; allIds: string[] }
-
-export const defaultTable = { byId: {}, allIds: [] }
+export type IdMap<T> = { [id: string]: T }