♻️ (builder) Change to features-centric folder structure

apps/builder/src/features/blocks/inputs/buttons/components/ButtonNodeContent.tsx

@@ -0,0 +1,93 @@
+import {
+  EditablePreview,
+  EditableInput,
+  Editable,
+  Fade,
+  IconButton,
+  Flex,
+} from '@chakra-ui/react'
+import { PlusIcon } from '@/components/icons'
+import { useTypebot } from '@/features/editor'
+import { ButtonItem, ItemIndices, ItemType } from 'models'
+import React, { useEffect, useRef, useState } from 'react'
+import { isNotDefined } from 'utils'
+
+type Props = {
+  item: ButtonItem
+  indices: ItemIndices
+  isMouseOver: boolean
+}
+
+export const ButtonNodeContent = ({ item, indices, isMouseOver }: 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)
+
+  useEffect(() => {
+    if (itemValue !== item.content)
+      setItemValue(item.content ?? 'Click to edit')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [item])
+
+  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 !== '' && initialContent === '')
+      handlePlusClick()
+  }
+
+  const handlePlusClick = () => {
+    const itemIndex = indices.itemIndex + 1
+    createItem(
+      { blockId: item.blockId, type: ItemType.BUTTON },
+      { ...indices, itemIndex }
+    )
+  }
+
+  return (
+    <Flex px={4} py={2} justify="center" w="90%" pos="relative">
+      <Editable
+        ref={editableRef}
+        flex="1"
+        startWithEditView={isNotDefined(item.content)}
+        value={itemValue}
+        onChange={setItemValue}
+        onSubmit={handleInputSubmit}
+        onKeyDownCapture={handleKeyPress}
+        maxW="180px"
+      >
+        <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,
+          left: '90px',
+        }}
+        unmountOnExit
+      >
+        <IconButton
+          aria-label="Add item"
+          icon={<PlusIcon />}
+          size="xs"
+          shadow="md"
+          colorScheme="gray"
+          onClick={handlePlusClick}
+        />
+      </Fade>
+    </Flex>
+  )
+}

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsInputIcon.tsx

@@ -0,0 +1,7 @@
+import { CheckSquareIcon } from '@/components/icons'
+import { IconProps } from '@chakra-ui/react'
+import React from 'react'
+
+export const ButtonsInputIcon = (props: IconProps) => (
+  <CheckSquareIcon color="orange.500" {...props} />
+)

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsOptionsForm.tsx

@@ -0,0 +1,54 @@
+import { Input } from '@/components/inputs'
+import { SwitchWithLabel } from '@/components/SwitchWithLabel'
+import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { ChoiceInputOptions, Variable } from 'models'
+import React from 'react'
+
+type ButtonsOptionsFormProps = {
+  options?: ChoiceInputOptions
+  onOptionsChange: (options: ChoiceInputOptions) => void
+}
+
+export const ButtonsOptionsForm = ({
+  options,
+  onOptionsChange,
+}: ButtonsOptionsFormProps) => {
+  const handleIsMultipleChange = (isMultipleChoice: boolean) =>
+    options && onOptionsChange({ ...options, isMultipleChoice })
+  const handleButtonLabelChange = (buttonLabel: string) =>
+    options && onOptionsChange({ ...options, buttonLabel })
+  const handleVariableChange = (variable?: Variable) =>
+    options && onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        label="Multiple choice?"
+        initialValue={options?.isMultipleChoice ?? false}
+        onCheckChange={handleIsMultipleChange}
+      />
+      {options?.isMultipleChoice && (
+        <Stack>
+          <FormLabel mb="0" htmlFor="button">
+            Button label:
+          </FormLabel>
+          <Input
+            id="button"
+            defaultValue={options?.buttonLabel ?? 'Send'}
+            onChange={handleButtonLabelChange}
+          />
+        </Stack>
+      )}
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options?.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}