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

apps/builder/src/features/blocks/inputs/number/components/NumberInputIcon.tsx

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

apps/builder/src/features/blocks/inputs/number/components/NumberInputSettingsBody.tsx

@@ -0,0 +1,94 @@
+import { Input, SmartNumberInput } from '@/components/inputs'
+import { VariableSearchInput } from '@/components/VariableSearchInput'
+import { removeUndefinedFields } from '@/utils/helpers'
+import { FormLabel, HStack, Stack } from '@chakra-ui/react'
+import { NumberInputOptions, Variable } from 'models'
+import React from 'react'
+
+type NumberInputSettingsBodyProps = {
+  options: NumberInputOptions
+  onOptionsChange: (options: NumberInputOptions) => void
+}
+
+export const NumberInputSettingsBody = ({
+  options,
+  onOptionsChange,
+}: NumberInputSettingsBodyProps) => {
+  const handlePlaceholderChange = (placeholder: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
+  const handleButtonLabelChange = (button: string) =>
+    onOptionsChange({ ...options, labels: { ...options.labels, button } })
+  const handleMinChange = (min?: number) =>
+    onOptionsChange(removeUndefinedFields({ ...options, min }))
+  const handleMaxChange = (max?: number) =>
+    onOptionsChange(removeUndefinedFields({ ...options, max }))
+  const handleBlockChange = (block?: number) =>
+    onOptionsChange(removeUndefinedFields({ ...options, block }))
+  const handleVariableChange = (variable?: Variable) => {
+    onOptionsChange({ ...options, variableId: variable?.id })
+  }
+
+  return (
+    <Stack spacing={4}>
+      <Stack>
+        <FormLabel mb="0" htmlFor="placeholder">
+          Placeholder:
+        </FormLabel>
+        <Input
+          id="placeholder"
+          defaultValue={options.labels.placeholder}
+          onChange={handlePlaceholderChange}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <Input
+          id="button"
+          defaultValue={options?.labels?.button ?? 'Send'}
+          onChange={handleButtonLabelChange}
+        />
+      </Stack>
+      <HStack justifyContent="space-between">
+        <FormLabel mb="0" htmlFor="min">
+          Min:
+        </FormLabel>
+        <SmartNumberInput
+          id="min"
+          value={options.min}
+          onValueChange={handleMinChange}
+        />
+      </HStack>
+      <HStack justifyContent="space-between">
+        <FormLabel mb="0" htmlFor="max">
+          Max:
+        </FormLabel>
+        <SmartNumberInput
+          id="max"
+          value={options.max}
+          onValueChange={handleMaxChange}
+        />
+      </HStack>
+      <HStack justifyContent="space-between">
+        <FormLabel mb="0" htmlFor="step">
+          Step:
+        </FormLabel>
+        <SmartNumberInput
+          id="step"
+          value={options.step}
+          onValueChange={handleBlockChange}
+        />
+      </HStack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save answer in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/inputs/number/components/NumberNodeContent.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Text } from '@chakra-ui/react'
+import { NumberInputBlock } from 'models'
+
+type Props = {
+  placeholder: NumberInputBlock['options']['labels']['placeholder']
+}
+
+export const NumberNodeContent = ({ placeholder }: Props) => (
+  <Text color={'gray.500'}>{placeholder}</Text>
+)

apps/builder/src/features/blocks/inputs/number/index.ts

@@ -0,0 +1,3 @@
+export { NumberInputSettingsBody } from './components/NumberInputSettingsBody'
+export { NumberNodeContent } from './components/NumberNodeContent'
+export { NumberInputIcon } from './components/NumberInputIcon'

apps/builder/src/features/blocks/inputs/number/number.spec.ts

@@ -0,0 +1,51 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { defaultNumberInputOptions, InputBlockType } from 'models'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import cuid from 'cuid'
+
+test.describe('Number input block', () => {
+  test('options should work', async ({ page }) => {
+    const typebotId = cuid()
+    await createTypebots([
+      {
+        id: typebotId,
+        ...parseDefaultGroupWithBlock({
+          type: InputBlockType.NUMBER,
+          options: defaultNumberInputOptions,
+        }),
+      },
+    ])
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+
+    await page.click('text=Preview')
+    await expect(
+      typebotViewer(page).locator(
+        `input[placeholder="${defaultNumberInputOptions.labels.placeholder}"]`
+      )
+    ).toHaveAttribute('type', 'number')
+    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()
+
+    await page.click(`text=${defaultNumberInputOptions.labels.placeholder}`)
+    await page.fill('#placeholder', 'Your number...')
+    await expect(page.locator('text=Your number...')).toBeVisible()
+    await page.fill('#button', 'Go')
+    await page.fill('[role="spinbutton"] >> nth=0', '0')
+    await page.fill('[role="spinbutton"] >> nth=1', '100')
+    await page.fill('[role="spinbutton"] >> nth=2', '10')
+
+    await page.click('text=Restart')
+    const input = typebotViewer(page).locator(
+      `input[placeholder="Your number..."]`
+    )
+    await input.fill('-1')
+    await input.press('Enter')
+    await input.fill('150')
+    await input.press('Enter')
+    await input.fill('50')
+    await input.press('Enter')
+    await expect(typebotViewer(page).locator('text=50')).toBeVisible()
+  })
+})