feat(inputs): ✨ Add text options

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -0,0 +1,40 @@
+import { PopoverContent, PopoverArrow, PopoverBody } from '@chakra-ui/react'
+import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
+import { Step, StepType, TextInputOptions } from 'models'
+import { TextInputSettingsBody } from './TextInputSettingsBody'
+
+type Props = {
+  step: Step
+}
+export const SettingsPopoverContent = ({ step }: Props) => {
+  const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
+
+  return (
+    <PopoverContent onMouseDown={handleMouseDown}>
+      <PopoverArrow />
+      <PopoverBody p="6">
+        <SettingsPopoverBodyContent step={step} />
+      </PopoverBody>
+    </PopoverContent>
+  )
+}
+
+const SettingsPopoverBodyContent = ({ step }: Props) => {
+  const { updateStep } = useTypebot()
+  const handleOptionsChange = (options: TextInputOptions) =>
+    updateStep(step.id, { options } as Partial<Step>)
+
+  switch (step.type) {
+    case StepType.TEXT_INPUT: {
+      return (
+        <TextInputSettingsBody
+          options={step.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
+    default: {
+      return <></>
+    }
+  }
+}

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/TextInputSettingsBody.tsx

@@ -0,0 +1,55 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { TextInputOptions } from 'models'
+import React from 'react'
+
+type TextInputSettingsBodyProps = {
+  options?: TextInputOptions
+  onOptionsChange: (options: TextInputOptions) => void
+}
+
+export const TextInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: TextInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options?.labels, button } })
+  const handleLongChange = (isLong: boolean) =>
+    onOptionsChange({ ...options, isLong })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        id="switch"
+        label="Long text?"
+        initialValue={options?.isLong ?? false}
+        onCheckChange={handleLongChange}
+      />
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <DebouncedInput
+          id="placeholder"
+          initialValue={options?.labels?.placeholder ?? 'Type your answer...'}
+          delay={100}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <DebouncedInput
+          id="button"
+          initialValue={options?.labels?.button ?? 'Send'}
+          delay={100}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/index.ts

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