🚸 Add a better select input

Also improves other inputs behavior

apps/builder/src/features/settings/components/GeneralSettingsForm.tsx

@@ -5,7 +5,7 @@ import { GeneralSettings } from 'models'
 import React from 'react'
 import { isDefined } from 'utils'
 import { ChangePlanModal, isFreePlan, LimitReached } from '@/features/billing'
-import { SwitchWithLabel } from '@/components/SwitchWithLabel'
+import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { LockTag } from '@/features/billing'
 
 type Props = {

apps/builder/src/features/settings/components/MetadataForm.tsx

@@ -10,10 +10,10 @@ import {
   HStack,
   Text,
 } from '@chakra-ui/react'
-import { CodeEditor } from '@/components/CodeEditor'
+import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { ImageUploadContent } from '@/components/ImageUploadContent'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
-import { Input, Textarea } from '@/components/inputs'
+import { TextInput, Textarea } from '@/components/inputs'
 
 type Props = {
   typebotId: string
@@ -94,7 +94,7 @@ export const MetadataForm = ({
           </PopoverContent>
         </Popover>
       </Stack>
-      <Input
+      <TextInput
         label="Title:"
         defaultValue={metadata.title ?? typebotName}
         onChange={handleTitleChange}
@@ -104,7 +104,7 @@ export const MetadataForm = ({
         onChange={handleDescriptionChange}
         label="Description:"
       />
-      <Input
+      <TextInput
         defaultValue={metadata.googleTagManagerId}
         placeholder="GTM-XXXXXX"
         onChange={handleGoogleTagManagerIdChange}

apps/builder/src/features/settings/components/TypingEmulationForm.tsx

@@ -2,7 +2,7 @@ import { Flex, FormLabel, Stack, Switch } from '@chakra-ui/react'
 import { TypingEmulation } from 'models'
 import React from 'react'
 import { isDefined } from 'utils'
-import { SmartNumberInput } from '@/components/inputs'
+import { NumberInput } from '@/components/inputs'
 
 type Props = {
   typingEmulation: TypingEmulation
@@ -36,7 +36,7 @@ export const TypingEmulationForm = ({ typingEmulation, onUpdate }: Props) => {
       </Flex>
       {typingEmulation.enabled && (
         <Stack pl={10}>
-          <SmartNumberInput
+          <NumberInput
             label="Words per minutes:"
             data-testid="speed"
             defaultValue={typingEmulation.speed}
@@ -45,7 +45,7 @@ export const TypingEmulationForm = ({ typingEmulation, onUpdate }: Props) => {
             maxW="100px"
             step={30}
           />
-          <SmartNumberInput
+          <NumberInput
             label="Max delay (in seconds):"
             data-testid="max-delay"
             defaultValue={typingEmulation.maxDelay}

apps/builder/src/features/settings/settings.spec.ts

@@ -88,11 +88,14 @@ test.describe.parallel('Settings page', () => {
         favIconUrl
       )
       await expect(favIconImg).toHaveAttribute('src', favIconUrl)
+      // Close popover
+      await page.getByText('Image:').click()
+      await page.waitForTimeout(1000)
 
       // Website image
       const websiteImg = page.locator('img >> nth=1')
       await expect(websiteImg).toHaveAttribute('src', '/viewer-preview.png')
-      await websiteImg.click({ position: { x: 0, y: 160 }, force: true })
+      await websiteImg.click()
       await expect(page.locator('text=Giphy')).toBeHidden()
       await page.click('button >> text="Embed link"')
       await page.fill('input[placeholder="Paste the image link..."]', imageUrl)