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 🎉

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/ItemNodeContent.tsx

@@ -0,0 +1,32 @@
+import { Item, ItemIndices, ItemType } from 'models'
+import React from 'react'
+import { ButtonNodeContent } from './contents/ButtonNodeContent'
+import { ConditionNodeContent } from './contents/ConditionNodeContent'
+
+type Props = {
+  item: Item
+  indices: ItemIndices
+  isMouseOver: boolean
+  isLastItem: boolean
+}
+
+export const ItemNodeContent = ({
+  item,
+  indices,
+  isMouseOver,
+  isLastItem,
+}: Props) => {
+  switch (item.type) {
+    case ItemType.BUTTON:
+      return (
+        <ButtonNodeContent
+          item={item}
+          isMouseOver={isMouseOver}
+          indices={indices}
+          isLastItem={isLastItem}
+        />
+      )
+    case ItemType.CONDITION:
+      return <ConditionNodeContent item={item} />
+  }
+}

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ButtonNodeContent.tsx

@@ -0,0 +1,92 @@
+import {
+  EditablePreview,
+  EditableInput,
+  Editable,
+  Fade,
+  IconButton,
+  Flex,
+} from '@chakra-ui/react'
+import { PlusIcon } from 'assets/icons'
+import { useTypebot } from 'contexts/TypebotContext'
+import { ButtonItem, ItemIndices, ItemType } from 'models'
+import React, { useRef, useState } from 'react'
+import { isNotDefined } from 'utils'
+
+type Props = {
+  item: ButtonItem
+  indices: ItemIndices
+  isLastItem: boolean
+  isMouseOver: boolean
+}
+
+export const ButtonNodeContent = ({
+  item,
+  indices,
+  isMouseOver,
+  isLastItem,
+}: Props) => {
+  const { deleteItem, updateItem, createItem } = useTypebot()
+  const [initialContent] = useState(item.content ?? '')
+  const [itemValue, setItemValue] = useState(item.content ?? 'Click to edit')
+  const editableRef = useRef<HTMLDivElement | null>(null)
+
+  const handleInputSubmit = () => {
+    if (itemValue === '') deleteItem(indices)
+    else
+      updateItem(indices, { content: itemValue === '' ? undefined : itemValue })
+  }
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Escape' && itemValue === 'Click to edit') deleteItem(indices)
+    if (
+      e.key === 'Enter' &&
+      itemValue !== '' &&
+      isLastItem &&
+      initialContent === ''
+    )
+      handlePlusClick()
+  }
+
+  const handlePlusClick = () => {
+    const itemIndex = indices.itemIndex + 1
+    createItem(
+      { stepId: item.stepId, type: ItemType.BUTTON },
+      { ...indices, itemIndex }
+    )
+  }
+
+  return (
+    <Flex px={4} py={2} justify="center" w="full">
+      <Editable
+        ref={editableRef}
+        flex="1"
+        startWithEditView={isNotDefined(item.content)}
+        value={itemValue}
+        onChange={setItemValue}
+        onSubmit={handleInputSubmit}
+        onKeyDownCapture={handleKeyPress}
+      >
+        <EditablePreview
+          w="full"
+          color={item.content !== 'Click to edit' ? 'inherit' : 'gray.500'}
+          cursor="pointer"
+        />
+        <EditableInput />
+      </Editable>
+      <Fade
+        in={isMouseOver}
+        style={{ position: 'absolute', bottom: '-15px', zIndex: 3 }}
+        unmountOnExit
+      >
+        <IconButton
+          aria-label="Add item"
+          icon={<PlusIcon />}
+          size="xs"
+          shadow="md"
+          colorScheme="blue"
+          onClick={handlePlusClick}
+        />
+      </Fade>
+    </Flex>
+  )
+}

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ConditionNodeContent.tsx

@@ -0,0 +1,73 @@
+import { Stack, Tag, Text, Flex, Wrap } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext'
+import { Comparison, ConditionItem, ComparisonOperators } from 'models'
+import React from 'react'
+import { byId, isNotDefined } from 'utils'
+
+type Props = {
+  item: ConditionItem
+}
+
+export const ConditionNodeContent = ({ item }: Props) => {
+  const { typebot } = useTypebot()
+  return (
+    <Flex px={2} py={2}>
+      {item.content.comparisons.length === 0 ||
+      comparisonIsEmpty(item.content.comparisons[0]) ? (
+        <Text color={'gray.500'}>Configure...</Text>
+      ) : (
+        <Stack maxW="170px">
+          {item.content.comparisons.map((comparison, idx) => {
+            const variable = typebot?.variables.find(
+              byId(comparison.variableId)
+            )
+            return (
+              <Wrap key={comparison.id} spacing={1} isTruncated>
+                {idx > 0 && <Text>{item.content.logicalOperator ?? ''}</Text>}
+                {variable?.name && (
+                  <Tag bgColor="orange.400" color="white">
+                    {variable.name}
+                  </Tag>
+                )}
+                {comparison.comparisonOperator && (
+                  <Text>
+                    {parseComparisonOperatorSymbol(
+                      comparison.comparisonOperator
+                    )}
+                  </Text>
+                )}
+                {comparison?.value && (
+                  <Tag bgColor={'gray.200'}>
+                    <Text isTruncated>{comparison.value}</Text>
+                  </Tag>
+                )}
+              </Wrap>
+            )
+          })}
+        </Stack>
+      )}
+    </Flex>
+  )
+}
+
+const comparisonIsEmpty = (comparison: Comparison) =>
+  isNotDefined(comparison.comparisonOperator) &&
+  isNotDefined(comparison.value) &&
+  isNotDefined(comparison.variableId)
+
+const parseComparisonOperatorSymbol = (operator: ComparisonOperators) => {
+  switch (operator) {
+    case ComparisonOperators.CONTAINS:
+      return 'contains'
+    case ComparisonOperators.EQUAL:
+      return '='
+    case ComparisonOperators.GREATER:
+      return '>'
+    case ComparisonOperators.IS_SET:
+      return 'is set'
+    case ComparisonOperators.LESS:
+      return '<'
+    case ComparisonOperators.NOT_EQUAL:
+      return '!='
+  }
+}

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/index.tsx

@@ -0,0 +1 @@
+export { ItemNodeContent } from './ItemNodeContent'