blsmedia/bot
2
0
Fork 0
Code Activity

🚸 Add a better select input

Browse Source 
Also improves other inputs behavior
This commit is contained in:
Baptiste Arnaud
2023-03-03 09:01:11 +01:00
parent a66bfca1ec
commit cc7d7285e5
94 changed files with 1251 additions and 1109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/builder/src/components/ImageUploadContent/GiphySearchForm.tsx
View File

@ -4,7 +4,7 @@ import { Grid } from '@giphy/react-components'
import { GiphyLogo } from './GiphyLogo'
import React, { useState } from 'react'
import { env, isEmpty } from 'utils'
import { Input } from '../inputs'
import { TextInput } from '../inputs'
type GiphySearchFormProps = {
onSubmit: (url: string) => void
@ -26,8 +26,7 @@ export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
) : (
<Stack>
<Flex align="center">
<Input
flex="1"
<TextInput
autoFocus
placeholder="Search..."
onChange={setInputValue}

4
apps/builder/src/components/ImageUploadContent/ImageUploadContent.tsx
View File

@ -2,7 +2,7 @@ import { useState } from 'react'
import { Button, Flex, HStack, Stack } from '@chakra-ui/react'
import { UploadButton } from './UploadButton'
import { GiphySearchForm } from './GiphySearchForm'
import { Input } from '../inputs/Input'
import { TextInput } from '../inputs/TextInput'
import { EmojiSearchableList } from './emoji/EmojiSearchableList'
type Props = {
@ -137,7 +137,7 @@ const EmbedLinkContent = ({
onNewUrl,
}: ContentProps & { defaultUrl?: string }) => (
<Stack py="2">
<Input
<TextInput
placeholder={'Paste the image link...'}
onChange={onNewUrl}
defaultValue={defaultUrl ?? ''}

241
apps/builder/src/components/SearchableDropdown.tsx
View File

@ -1,241 +0,0 @@
import {
useDisclosure,
Flex,
Popover,
Input,
PopoverContent,
Button,
InputProps,
HStack,
useColorModeValue,
PopoverAnchor,
Portal,
} from '@chakra-ui/react'
import { Variable } from 'models'
import { useState, useRef, useEffect, ChangeEvent, ReactNode } from 'react'
import { useDebouncedCallback } from 'use-debounce'
import { env, isDefined } from 'utils'
import { VariablesButton } from '@/features/variables'
import { useOutsideClick } from '@/hooks/useOutsideClick'
import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
type Props = {
selectedItem?: string
items: (string | { label: ReactNode; value: string })[]
debounceTimeout?: number
withVariableButton?: boolean
onValueChange?: (value: string) => void
} & InputProps
export const SearchableDropdown = ({
selectedItem,
items,
withVariableButton = false,
debounceTimeout = 1000,
onValueChange,
...inputProps
}: Props) => {
const bg = useColorModeValue('gray.200', 'gray.700')
const [carretPosition, setCarretPosition] = useState<number>(0)
const { onOpen, onClose, isOpen } = useDisclosure()
const [inputValue, setInputValue] = useState(selectedItem ?? '')
const debounced = useDebouncedCallback(
// eslint-disable-next-line @typescript-eslint/no-empty-function
onValueChange ? onValueChange : () => {},
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
)
const [filteredItems, setFilteredItems] = useState([
...items
.filter((item) =>
(typeof item === 'string' ? item : item.value)
.toLowerCase()
.includes((selectedItem ?? '').toLowerCase())
)
.slice(0, 50),
])
const [keyboardFocusIndex, setKeyboardFocusIndex] = useState<
number | undefined
>()
const dropdownRef = useRef(null)
const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
const inputRef = useRef<HTMLInputElement>(null)
const { ref: parentModalRef } = useParentModal()
useEffect(
() => () => {
debounced.flush()
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
)
useEffect(() => {
if (filteredItems.length > 0) return
setFilteredItems([
...items
.filter((item) =>
(typeof item === 'string' ? item : item.value)
.toLowerCase()
.includes((selectedItem ?? '').toLowerCase())
)
.slice(0, 50),
])
if (inputRef.current === document.activeElement) onOpen()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [items])
useOutsideClick({
ref: dropdownRef,
handler: onClose,
})
const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
if (!isOpen) onOpen()
setInputValue(e.target.value)
debounced(e.target.value)
if (e.target.value === '') {
setFilteredItems([...items.slice(0, 50)])
return
}
setFilteredItems([
...items
.filter((item) =>
(typeof item === 'string' ? item : item.value)
.toLowerCase()
.includes((inputValue ?? '').toLowerCase())
)
.slice(0, 50),
])
}
const handleItemClick = (item: string) => () => {
setInputValue(item)
debounced(item)
setKeyboardFocusIndex(undefined)
onClose()
}
const handleVariableSelected = (variable?: Variable) => {
if (!inputRef.current || !variable) return
const cursorPosition = carretPosition
const textBeforeCursorPosition = inputRef.current.value.substring(
0,
cursorPosition
)
const textAfterCursorPosition = inputRef.current.value.substring(
cursorPosition,
inputRef.current.value.length
)
const newValue =
textBeforeCursorPosition +
`{{${variable.name}}}` +
textAfterCursorPosition
setInputValue(newValue)
debounced(newValue)
inputRef.current.focus()
setTimeout(() => {
if (!inputRef.current) return
inputRef.current.selectionStart = inputRef.current.selectionEnd =
carretPosition + `{{${variable.name}}}`.length
setCarretPosition(inputRef.current.selectionStart)
}, 100)
}
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (inputRef.current?.selectionStart)
setCarretPosition(inputRef.current.selectionStart)
if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
const item = filteredItems[keyboardFocusIndex]
handleItemClick(typeof item === 'string' ? item : item.value)()
return setKeyboardFocusIndex(undefined)
}
if (e.key === 'ArrowDown') {
if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0)
if (keyboardFocusIndex === filteredItems.length - 1) return
itemsRef.current[keyboardFocusIndex + 1]?.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
})
return setKeyboardFocusIndex(keyboardFocusIndex + 1)
}
if (e.key === 'ArrowUp') {
if (keyboardFocusIndex === undefined) return
if (keyboardFocusIndex === 0) return setKeyboardFocusIndex(undefined)
itemsRef.current[keyboardFocusIndex - 1]?.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
})
setKeyboardFocusIndex(keyboardFocusIndex - 1)
}
}
return (
<Flex ref={dropdownRef} w="full">
<Popover
isOpen={isOpen}
initialFocusRef={inputRef}
matchWidth
offset={[0, 0]}
isLazy
>
<PopoverAnchor>
<HStack spacing={0} align={'flex-end'} w="full">
<Input
ref={inputRef}
value={inputValue}
onChange={onInputChange}
onFocus={onOpen}
type="text"
onKeyUp={handleKeyUp}
{...inputProps}
/>
{withVariableButton && (
<VariablesButton
onSelectVariable={handleVariableSelected}
onClick={onClose}
/>
)}
</HStack>
</PopoverAnchor>
<Portal containerRef={parentModalRef}>
<PopoverContent
maxH="35vh"
overflowY="scroll"
role="menu"
w="inherit"
shadow="lg"
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
{filteredItems.length > 0 && (
<>
{filteredItems.map((item, idx) => {
return (
<Button
ref={(el) => (itemsRef.current[idx] = el)}
minH="40px"
key={idx}
onClick={handleItemClick(
typeof item === 'string' ? item : item.value
)}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
role="menuitem"
variant="ghost"
bg={keyboardFocusIndex === idx ? bg : 'transparent'}
justifyContent="flex-start"
>
{typeof item === 'string' ? item : item.label}
</Button>
)
})}
</>
)}
</PopoverContent>
</Portal>
</Popover>
</Flex>
)
}

230
apps/builder/src/components/inputs/AutocompleteInput.tsx Normal file
View File

@ -0,0 +1,230 @@
import {
useDisclosure,
Popover,
PopoverContent,
Button,
useColorModeValue,
PopoverAnchor,
Portal,
Input,
HStack,
FormControl,
FormLabel,
} from '@chakra-ui/react'
import { useState, useRef, useEffect, ReactNode } from 'react'
import { useDebouncedCallback } from 'use-debounce'
import { env, isDefined } from 'utils'
import { useOutsideClick } from '@/hooks/useOutsideClick'
import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
import { VariablesButton } from '@/features/variables'
import { Variable } from 'models'
import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
import { focusInput } from '@/utils/focusInput'
import { MoreInfoTooltip } from '../MoreInfoTooltip'
type Props = {
items: string[]
defaultValue?: string
debounceTimeout?: number
placeholder?: string
withVariableButton?: boolean
label?: ReactNode
moreInfoTooltip?: string
isRequired?: boolean
onChange: (value: string) => void
}
export const AutocompleteInput = ({
items,
onChange: _onChange,
debounceTimeout,
placeholder,
withVariableButton = true,
defaultValue,
label,
moreInfoTooltip,
isRequired,
}: Props) => {
const bg = useColorModeValue('gray.200', 'gray.700')
const { onOpen, onClose, isOpen } = useDisclosure()
const [isTouched, setIsTouched] = useState(false)
const [inputValue, setInputValue] = useState(defaultValue ?? '')
const [carretPosition, setCarretPosition] = useState<number>(
inputValue.length ?? 0
)
const onChange = useDebouncedCallback(
_onChange,
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
)
useEffect(() => {
if (isTouched || inputValue !== '' || !defaultValue || defaultValue === '')
return
setInputValue(defaultValue ?? '')
}, [defaultValue, inputValue, isTouched])
const [keyboardFocusIndex, setKeyboardFocusIndex] = useState<
number | undefined
>()
const dropdownRef = useRef(null)
const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null)
const { ref: parentModalRef } = useParentModal()
const filteredItems = (
inputValue === ''
? items
: [
...items.filter(
(item) =>
item.toLowerCase().startsWith((inputValue ?? '').toLowerCase()) &&
item.toLowerCase() !== inputValue.toLowerCase()
),
]
).slice(0, 50)
useOutsideClick({
ref: dropdownRef,
handler: onClose,
})
useEffect(
() => () => {
onChange.flush()
},
[onChange]
)
const changeValue = (value: string) => {
if (!isTouched) setIsTouched(true)
if (!isOpen) onOpen()
setInputValue(value)
onChange(value)
}
const handleItemClick = (value: string) => () => {
setInputValue(value)
onChange(value)
setKeyboardFocusIndex(undefined)
inputRef.current?.focus()
}
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
handleItemClick(filteredItems[keyboardFocusIndex])()
return setKeyboardFocusIndex(undefined)
}
if (e.key === 'ArrowDown') {
if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0)
if (keyboardFocusIndex === filteredItems.length - 1)
return setKeyboardFocusIndex(0)
itemsRef.current[keyboardFocusIndex + 1]?.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
})
return setKeyboardFocusIndex(keyboardFocusIndex + 1)
}
if (e.key === 'ArrowUp') {
if (keyboardFocusIndex === 0 || keyboardFocusIndex === undefined)
return setKeyboardFocusIndex(filteredItems.length - 1)
itemsRef.current[keyboardFocusIndex - 1]?.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
})
setKeyboardFocusIndex(keyboardFocusIndex - 1)
}
}
const handleVariableSelected = (variable?: Variable) => {
if (!variable) return
const { text, carretPosition: newCarretPosition } = injectVariableInText({
variable,
text: inputValue,
at: carretPosition,
})
changeValue(text)
focusInput({ at: newCarretPosition, input: inputRef.current })
}
const updateCarretPosition = (e: React.FocusEvent<HTMLInputElement>) => {
const carretPosition = e.target.selectionStart
if (!carretPosition) return
setCarretPosition(carretPosition)
}
return (
<FormControl isRequired={isRequired}>
{label && (
<FormLabel>
{label}{' '}
{moreInfoTooltip && (
<MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>
)}
</FormLabel>
)}
<HStack ref={dropdownRef} spacing={0} w="full">
<Popover
isOpen={isOpen}
initialFocusRef={inputRef}
matchWidth
offset={[0, 1]}
isLazy
>
<PopoverAnchor>
<Input
autoComplete="off"
ref={inputRef}
value={inputValue}
onChange={(e) => changeValue(e.target.value)}
onFocus={onOpen}
onBlur={updateCarretPosition}
onKeyDown={handleKeyUp}
placeholder={placeholder}
/>
</PopoverAnchor>
{filteredItems.length > 0 && (
<Portal containerRef={parentModalRef}>
<PopoverContent
maxH="35vh"
overflowY="scroll"
role="menu"
w="inherit"
shadow="lg"
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
<>
{filteredItems.map((item, idx) => {
return (
<Button
ref={(el) => (itemsRef.current[idx] = el)}
minH="40px"
key={idx}
onClick={handleItemClick(item)}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
role="menuitem"
variant="ghost"
bg={keyboardFocusIndex === idx ? bg : 'transparent'}
justifyContent="flex-start"
transition="none"
>
{item}
</Button>
)
})}
</>
</PopoverContent>
</Portal>
)}
</Popover>
{withVariableButton && (
<VariablesButton onSelectVariable={handleVariableSelected} />
)}
</HStack>
</FormControl>
)
}

2
apps/builder/src/components/CodeEditor.tsx → apps/builder/src/components/inputs/CodeEditor.tsx
View File

@ -15,7 +15,7 @@ import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night'
import { githubLight } from '@uiw/codemirror-theme-github'
import { LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs'
import { isDefined } from '@udecode/plate-common'
import { CopyButton } from './CopyButton'
import { CopyButton } from '../CopyButton'
type Props = {
value?: string

7
apps/builder/src/components/inputs/Input.tsx
View File

@ -1,7 +0,0 @@
import { Input as ChakraInput } from '@chakra-ui/react'
import React from 'react'
import { TextBox, TextBoxProps } from './TextBox'
export const Input = (props: Omit<TextBoxProps, 'TextBox'>) => (
<TextBox TextBox={ChakraInput} {...props} />
)

8
apps/builder/src/components/inputs/SmartNumberInput.tsx → apps/builder/src/components/inputs/NumberInput.tsx
View File

@ -1,7 +1,7 @@
import { VariablesButton } from '@/features/variables'
import {
NumberInputProps,
NumberInput,
NumberInput as ChakraNumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
@ -30,7 +30,7 @@ type Props<HasVariable extends boolean> = {
onValueChange: (value?: Value<HasVariable>) => void
} & Omit<NumberInputProps, 'defaultValue' | 'value' | 'onChange' | 'isRequired'>
export const SmartNumberInput = <HasVariable extends boolean>({
export const NumberInput = <HasVariable extends boolean>({
defaultValue,
onValueChange,
withVariableButton,
@ -79,13 +79,13 @@ export const SmartNumberInput = <HasVariable extends boolean>({
}
const Input = (
<NumberInput onChange={handleValueChange} value={value} {...props}>
<ChakraNumberInput onChange={handleValueChange} value={value} {...props}>
<NumberInputField placeholder={props.placeholder} />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</ChakraNumberInput>
)
return (

227
apps/builder/src/components/inputs/Select.tsx Normal file
View File

@ -0,0 +1,227 @@
import {
useDisclosure,
Flex,
Popover,
Input,
PopoverContent,
Button,
useColorModeValue,
PopoverAnchor,
Portal,
InputGroup,
InputRightElement,
Text,
Box,
} from '@chakra-ui/react'
import { useState, useRef, ChangeEvent } from 'react'
import { isDefined } from 'utils'
import { useOutsideClick } from '@/hooks/useOutsideClick'
import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
import { ChevronDownIcon } from '../icons'
const dropdownCloseAnimationDuration = 200
type Item = string | { icon?: JSX.Element; label: string; value: string }
type Props = {
selectedItem?: string
items: Item[]
placeholder?: string
debounceTimeout?: number
onSelect?: (value: string) => void
}
export const Select = ({
selectedItem,
placeholder,
items,
onSelect,
}: Props) => {
const focusedItemBgColor = useColorModeValue('gray.200', 'gray.700')
const selectedItemBgColor = useColorModeValue('blue.50', 'blue.400')
const [isTouched, setIsTouched] = useState(false)
const { onOpen, onClose, isOpen } = useDisclosure()
const [inputValue, setInputValue] = useState(
getItemLabel(
items.find((item) =>
typeof item === 'string'
? selectedItem === item
: selectedItem === item.value
)
)
)
const closeDropwdown = () => {
onClose()
}
const [keyboardFocusIndex, setKeyboardFocusIndex] = useState<
number | undefined
>()
const dropdownRef = useRef(null)
const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
const inputRef = useRef<HTMLInputElement>(null)
const { ref: parentModalRef } = useParentModal()
const filteredItems = (
isTouched
? [
...items.filter((item) =>
getItemLabel(item)
.toLowerCase()
.includes((inputValue ?? '').toLowerCase())
),
]
: items
).slice(0, 50)
useOutsideClick({
ref: dropdownRef,
handler: closeDropwdown,
})
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
if (!isOpen) onOpen()
if (!isTouched) setIsTouched(true)
setInputValue(e.target.value)
}
const handleItemClick = (item: Item) => () => {
if (!isTouched) setIsTouched(true)
setInputValue(getItemLabel(item))
onSelect?.(getItemValue(item))
setKeyboardFocusIndex(undefined)
closeDropwdown()
}
const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && isDefined(keyboardFocusIndex)) {
handleItemClick(filteredItems[keyboardFocusIndex])()
return setKeyboardFocusIndex(undefined)
}
if (e.key === 'ArrowDown') {
if (keyboardFocusIndex === undefined) return setKeyboardFocusIndex(0)
if (keyboardFocusIndex === filteredItems.length - 1)
return setKeyboardFocusIndex(0)
itemsRef.current[keyboardFocusIndex + 1]?.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
})
return setKeyboardFocusIndex(keyboardFocusIndex + 1)
}
if (e.key === 'ArrowUp') {
if (keyboardFocusIndex === 0 || keyboardFocusIndex === undefined)
return setKeyboardFocusIndex(filteredItems.length - 1)
itemsRef.current[keyboardFocusIndex - 1]?.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
})
setKeyboardFocusIndex(keyboardFocusIndex - 1)
}
}
const resetIsTouched = () => {
setTimeout(() => {
setIsTouched(false)
}, dropdownCloseAnimationDuration)
}
return (
<Flex ref={dropdownRef} w="full">
<Popover
isOpen={isOpen}
initialFocusRef={inputRef}
matchWidth
offset={[0, 1]}
isLazy
>
<PopoverAnchor>
<InputGroup>
<Box pos="absolute" py={2} pl={4} pr={6}>
{!isTouched && (
<Text noOfLines={1} data-testid="selected-item-label">
{inputValue}
</Text>
)}
</Box>
<Input
type="text"
autoComplete="off"
ref={inputRef}
className="select-input"
value={isTouched ? inputValue : ''}
placeholder={
!isTouched && inputValue !== '' ? undefined : placeholder
}
onBlur={resetIsTouched}
onChange={handleInputChange}
onFocus={onOpen}
onKeyDown={handleKeyUp}
/>
<InputRightElement pointerEvents="none" cursor="pointer">
<ChevronDownIcon />
</InputRightElement>
</InputGroup>
</PopoverAnchor>
<Portal containerRef={parentModalRef}>
<PopoverContent
maxH="35vh"
overflowY="scroll"
role="menu"
w="inherit"
shadow="lg"
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
{filteredItems.length > 0 && (
<>
{filteredItems.map((item, idx) => {
return (
<Button
ref={(el) => (itemsRef.current[idx] = el)}
minH="40px"
key={idx}
onClick={handleItemClick(item)}
fontSize="16px"
fontWeight="normal"
rounded="none"
colorScheme="gray"
role="menuitem"
variant="ghost"
bg={
keyboardFocusIndex === idx
? focusedItemBgColor
: selectedItem === getItemValue(item)
? selectedItemBgColor
: 'transparent'
}
justifyContent="flex-start"
transition="none"
leftIcon={
typeof item === 'object' ? item.icon : undefined
}
>
{getItemLabel(item)}
</Button>
)
})}
</>
)}
</PopoverContent>
</Portal>
</Popover>
</Flex>
)
}
const getItemLabel = (item?: Item) => {
if (!item) return ''
if (typeof item === 'object') return item.label
return item
}
const getItemValue = (item: Item) => {
if (typeof item === 'object') return item.value
return item
}

2
apps/builder/src/components/SwitchWithLabel.tsx → apps/builder/src/components/inputs/SwitchWithLabel.tsx
View File

@ -6,7 +6,7 @@ import {
SwitchProps,
} from '@chakra-ui/react'
import React, { useState } from 'react'
import { MoreInfoTooltip } from './MoreInfoTooltip'
import { MoreInfoTooltip } from '../MoreInfoTooltip'
type SwitchWithLabelProps = {
label: string

134
apps/builder/src/components/inputs/TextBox.tsx
View File

@ -1,134 +0,0 @@
import {
ComponentWithAs,
FormControl,
FormLabel,
HStack,
InputProps,
TextareaProps,
} from '@chakra-ui/react'
import { Variable } from 'models'
import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
import { useDebouncedCallback } from 'use-debounce'
import { env } from 'utils'
import { VariablesButton } from '@/features/variables'
import { MoreInfoTooltip } from '../MoreInfoTooltip'
export type TextBoxProps = {
defaultValue?: string
onChange: (value: string) => void
TextBox:
| ComponentWithAs<'textarea', TextareaProps>
| ComponentWithAs<'input', InputProps>
withVariableButton?: boolean
debounceTimeout?: number
label?: string
moreInfoTooltip?: string
} & Omit<InputProps & TextareaProps, 'onChange' | 'defaultValue'>
export const TextBox = ({
onChange,
TextBox,
withVariableButton = true,
debounceTimeout = 1000,
label,
moreInfoTooltip,
defaultValue,
isRequired,
...props
}: TextBoxProps) => {
const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(
null
)
const [value, setValue] = useState<string>(defaultValue ?? '')
const [carretPosition, setCarretPosition] = useState<number>(
defaultValue?.length ?? 0
)
const [isTouched, setIsTouched] = useState(false)
const debounced = useDebouncedCallback(
(value) => {
onChange(value)
},
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
)
useEffect(() => {
if (isTouched || defaultValue === value) return
setValue(defaultValue ?? '')
}, [defaultValue, isTouched, value])
useEffect(
() => () => {
debounced.flush()
},
[debounced]
)
const handleChange = (
e: ChangeEvent<HTMLInputElement & HTMLTextAreaElement>
) => {
setIsTouched(true)
setValue(e.target.value)
debounced(e.target.value)
}
const handleVariableSelected = (variable?: Variable) => {
if (!variable) return
setIsTouched(true)
const textBeforeCursorPosition = value.substring(0, carretPosition)
const textAfterCursorPosition = value.substring(
carretPosition,
value.length
)
const newValue =
textBeforeCursorPosition +
`{{${variable.name}}}` +
textAfterCursorPosition
setValue(newValue)
debounced(newValue)
const newCarretPosition = carretPosition + `{{${variable.name}}}`.length
setCarretPosition(newCarretPosition)
textBoxRef.current?.focus()
setTimeout(() => {
if (!textBoxRef.current) return
textBoxRef.current.selectionStart = textBoxRef.current.selectionEnd =
newCarretPosition
}, 100)
}
const updateCarretPosition = () => {
if (textBoxRef.current?.selectionStart === undefined) return
setCarretPosition(textBoxRef.current.selectionStart)
}
const Input = (
<TextBox
ref={textBoxRef}
value={value}
onKeyUp={updateCarretPosition}
onClick={updateCarretPosition}
onChange={handleChange}
{...props}
/>
)
return (
<FormControl isRequired={isRequired}>
{label && (
<FormLabel>
{label}{' '}
{moreInfoTooltip && (
<MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>
)}
</FormLabel>
)}
{withVariableButton ? (
<HStack spacing={0} align={'flex-end'}>
{Input}
<VariablesButton onSelectVariable={handleVariableSelected} />
</HStack>
) : (
Input
)}
</FormControl>
)
}

131
apps/builder/src/components/inputs/TextInput.tsx Normal file
View File

@ -0,0 +1,131 @@
import { VariablesButton } from '@/features/variables'
import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
import { focusInput } from '@/utils/focusInput'
import {
FormControl,
FormLabel,
HStack,
Input as ChakraInput,
InputProps,
} from '@chakra-ui/react'
import { Variable } from 'models'
import React, { ReactNode, useEffect, useRef, useState } from 'react'
import { useDebouncedCallback } from 'use-debounce'
import { env } from 'utils'
import { MoreInfoTooltip } from '../MoreInfoTooltip'
export type TextInputProps = {
defaultValue?: string
onChange: (value: string) => void
debounceTimeout?: number
label?: ReactNode
moreInfoTooltip?: string
withVariableButton?: boolean
isRequired?: boolean
placeholder?: string
isDisabled?: boolean
} & Pick<
InputProps,
'autoComplete' | 'onFocus' | 'onKeyUp' | 'type' | 'autoFocus'
>
export const TextInput = ({
type,
defaultValue,
debounceTimeout = 1000,
label,
moreInfoTooltip,
withVariableButton = true,
isRequired,
placeholder,
autoComplete,
isDisabled,
autoFocus,
onChange: _onChange,
onFocus,
onKeyUp,
}: TextInputProps) => {
const inputRef = useRef<HTMLInputElement | null>(null)
const [isTouched, setIsTouched] = useState(false)
const [localValue, setLocalValue] = useState<string>(defaultValue ?? '')
const [carretPosition, setCarretPosition] = useState<number>(
localValue.length ?? 0
)
const onChange = useDebouncedCallback(
_onChange,
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
)
useEffect(() => {
if (isTouched || localValue !== '' || !defaultValue || defaultValue === '')
return
setLocalValue(defaultValue ?? '')
}, [defaultValue, isTouched, localValue])
useEffect(
() => () => {
onChange.flush()
},
[onChange]
)
const changeValue = (value: string) => {
if (!isTouched) setIsTouched(true)
setLocalValue(value)
onChange(value)
}
const handleVariableSelected = (variable?: Variable) => {
if (!variable) return
const { text, carretPosition: newCarretPosition } = injectVariableInText({
variable,
text: localValue,
at: carretPosition,
})
changeValue(text)
focusInput({ at: newCarretPosition, input: inputRef.current })
}
const updateCarretPosition = (e: React.FocusEvent<HTMLInputElement>) => {
const carretPosition = e.target.selectionStart
if (!carretPosition) return
setCarretPosition(carretPosition)
}
const Input = (
<ChakraInput
type={type}
ref={inputRef}
value={localValue}
autoComplete={autoComplete}
placeholder={placeholder}
isDisabled={isDisabled}
autoFocus={autoFocus}
onFocus={onFocus}
onKeyUp={onKeyUp}
onBlur={updateCarretPosition}
onChange={(e) => changeValue(e.target.value)}
/>
)
return (
<FormControl isRequired={isRequired}>
{label && (
<FormLabel>
{label}{' '}
{moreInfoTooltip && (
<MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>
)}
</FormLabel>
)}
{withVariableButton ? (
<HStack spacing={0} align={'flex-end'}>
{Input}
<VariablesButton onSelectVariable={handleVariableSelected} />
</HStack>
) : (
Input
)}
</FormControl>
)
}

120
apps/builder/src/components/inputs/Textarea.tsx
View File

@ -1,7 +1,115 @@
import { Textarea as ChakraTextarea } from '@chakra-ui/react'
import React from 'react'
import { TextBox, TextBoxProps } from './TextBox'
import { VariablesButton } from '@/features/variables'
import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
import { focusInput } from '@/utils/focusInput'
import {
FormControl,
FormLabel,
HStack,
Textarea as ChakraTextarea,
TextareaProps,
} from '@chakra-ui/react'
import { Variable } from 'models'
import React, { useEffect, useRef, useState } from 'react'
import { useDebouncedCallback } from 'use-debounce'
import { env } from 'utils'
import { MoreInfoTooltip } from '../MoreInfoTooltip'
export const Textarea = (props: Omit<TextBoxProps, 'TextBox'>) => (
<TextBox TextBox={ChakraTextarea} {...props} />
)
type Props = {
id?: string
defaultValue?: string
debounceTimeout?: number
label?: string
moreInfoTooltip?: string
withVariableButton?: boolean
isRequired?: boolean
onChange: (value: string) => void
} & Pick<TextareaProps, 'minH'>
export const Textarea = ({
id,
defaultValue,
onChange: _onChange,
debounceTimeout = 1000,
label,
moreInfoTooltip,
withVariableButton = true,
isRequired,
}: Props) => {
const inputRef = useRef<HTMLTextAreaElement | null>(null)
const [isTouched, setIsTouched] = useState(false)
const [localValue, setLocalValue] = useState<string>(defaultValue ?? '')
const [carretPosition, setCarretPosition] = useState<number>(
localValue.length ?? 0
)
const onChange = useDebouncedCallback(
_onChange,
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
)
useEffect(() => {
if (isTouched || localValue !== '' || !defaultValue || defaultValue === '')
return
setLocalValue(defaultValue ?? '')
}, [defaultValue, isTouched, localValue])
useEffect(
() => () => {
onChange.flush()
},
[onChange]
)
const changeValue = (value: string) => {
if (!isTouched) setIsTouched(true)
setLocalValue(value)
onChange(value)
}
const handleVariableSelected = (variable?: Variable) => {
if (!variable) return
const { text, carretPosition: newCarretPosition } = injectVariableInText({
variable,
text: localValue,
at: carretPosition,
})
changeValue(text)
focusInput({ at: newCarretPosition, input: inputRef.current })
}
const updateCarretPosition = (e: React.FocusEvent<HTMLTextAreaElement>) => {
const carretPosition = e.target.selectionStart
if (!carretPosition) return
setCarretPosition(carretPosition)
}
const Textarea = (
<ChakraTextarea
ref={inputRef}
id={id}
value={localValue}
onBlur={updateCarretPosition}
onChange={(e) => changeValue(e.target.value)}
/>
)
return (
<FormControl isRequired={isRequired}>
{label && (
<FormLabel>
{label}{' '}
{moreInfoTooltip && (
<MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>
)}
</FormLabel>
)}
{withVariableButton ? (
<HStack spacing={0} align={'flex-end'}>
{Textarea}
<VariablesButton onSelectVariable={handleVariableSelected} />
</HStack>
) : (
Textarea
)}
</FormControl>
)
}

17
apps/builder/src/components/VariableSearchInput.tsx → apps/builder/src/components/inputs/VariableSearchInput.tsx
View File

@ -36,7 +36,7 @@ export const VariableSearchInput = ({
autoFocus,
...inputProps
}: Props) => {
const bg = useColorModeValue('gray.200', 'gray.700')
const focusedItemBgColor = useColorModeValue('gray.200', 'gray.700')
const { onOpen, onClose, isOpen } = useDisclosure()
const { typebot, createVariable, deleteVariable, updateVariable } =
useTypebot()
@ -63,9 +63,7 @@ export const VariableSearchInput = ({
useEffect(() => {
if (autoFocus) onOpen()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}, [autoFocus, onOpen])
const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value)
@ -178,7 +176,7 @@ export const VariableSearchInput = ({
value={inputValue}
onChange={onInputChange}
onFocus={onOpen}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyUp}
placeholder={inputProps.placeholder ?? 'Select a variable'}
{...inputProps}
/>
@ -206,7 +204,9 @@ export const VariableSearchInput = ({
variant="ghost"
justifyContent="flex-start"
leftIcon={<PlusIcon />}
bgColor={keyboardFocusIndex === 0 ? bg : 'transparent'}
bgColor={
keyboardFocusIndex === 0 ? focusedItemBgColor : 'transparent'
}
>
Create
<Tag colorScheme="orange" ml="1">
@ -234,8 +234,11 @@ export const VariableSearchInput = ({
variant="ghost"
justifyContent="space-between"
bgColor={
keyboardFocusIndex === indexInList ? bg : 'transparent'
keyboardFocusIndex === indexInList
? focusedItemBgColor
: 'transparent'
}
transition="none"
>
{item.name}
<HStack>

4
apps/builder/src/components/inputs/index.tsx
View File

@ -1,3 +1,3 @@
export { Input } from './Input'
export { TextInput } from './TextInput'
export { Textarea } from './Textarea'
export { SmartNumberInput } from './SmartNumberInput'
export { NumberInput } from './NumberInput'

10
apps/builder/src/features/account/components/MyAccountForm/MyAccountForm.tsx
View File

@ -4,7 +4,7 @@ import React, { useState } from 'react'
import { ApiTokensList } from './ApiTokensList'
import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
import { useUser } from '@/features/account'
import { Input } from '@/components/inputs/Input'
import { TextInput } from '@/components/inputs/TextInput'
export const MyAccountForm = () => {
const { user, updateUser } = useUser()
@ -49,8 +49,8 @@ export const MyAccountForm = () => {
</Stack>
</HStack>
<Input
value={name}
<TextInput
defaultValue={name}
onChange={handleNameChange}
label="Name:"
withVariableButton={false}
@ -58,9 +58,9 @@ export const MyAccountForm = () => {
/>
<Tooltip label="Updating email is not available. Contact the support if you want to change it.">
<span>
<Input
<TextInput
type="email"
value={email}
defaultValue={email}
onChange={handleEmailChange}
label="Email address:"
withVariableButton={false}

4
apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx
View File

@ -1,6 +1,6 @@
import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
import { AudioBubbleContent } from 'models'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { useState } from 'react'
import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
@ -52,7 +52,7 @@ export const AudioBubbleForm = ({
)}
{currentTab === 'link' && (
<>
<Input
<TextInput
placeholder="Paste the audio file link..."
defaultValue={content.url ?? ''}
onChange={submit}

6
apps/builder/src/features/blocks/bubbles/embed/components/EmbedUploadContent.tsx
View File

@ -1,4 +1,4 @@
import { Input, SmartNumberInput } from '@/components/inputs'
import { TextInput, NumberInput } from '@/components/inputs'
import { HStack, Stack, Text } from '@chakra-ui/react'
import { EmbedBubbleContent } from 'models'
import { sanitizeUrl } from 'utils'
@ -22,7 +22,7 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
return (
<Stack p="2" spacing={6}>
<Stack>
<Input
<TextInput
placeholder="Paste the link or code..."
defaultValue={content?.url ?? ''}
onChange={handleUrlChange}
@ -33,7 +33,7 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
</Stack>
<HStack>
<SmartNumberInput
<NumberInput
label="Height:"
defaultValue={content?.height}
onValueChange={handleHeightChange}

2
apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/TextBubbleEditor.tsx
View File

@ -19,7 +19,7 @@ import { defaultTextBubbleContent, TextBubbleContent, Variable } from 'models'
import { ReactEditor } from 'slate-react'
import { serializeHtml } from '@udecode/plate-serializer-html'
import { parseHtmlStringToPlainText } from '../../utils'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { colors } from '@/lib/theme'
import { useOutsideClick } from '@/hooks/useOutsideClick'

4
apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx
View File

@ -4,7 +4,7 @@ import urlParser from 'js-video-url-parser/lib/base'
import 'js-video-url-parser/lib/provider/vimeo'
import 'js-video-url-parser/lib/provider/youtube'
import { isDefined } from 'utils'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
type Props = {
content?: VideoBubbleContent
@ -24,7 +24,7 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
}
return (
<Stack p="2">
<Input
<TextInput
placeholder="Paste the video link..."
defaultValue={content?.url ?? ''}
onChange={handleUrlChange}

2
apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts
View File

@ -49,7 +49,7 @@ test.describe.parallel('Buttons input block', () => {
await page.click('[data-testid="block2-icon"]')
await page.click('text=Multiple choice?')
await page.fill('#button', 'Go')
await page.getByLabel('Button label:').fill('Go')
await page.getByPlaceholder('Select a variable').nth(1).click()
await page.getByText('var1').click()
await expect(page.getByText('Collectsvar1')).toBeVisible()

21
apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx
View File

@ -1,7 +1,7 @@
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormControl, FormLabel, Stack } from '@chakra-ui/react'
import { ChoiceInputOptions, Variable } from 'models'
import React from 'react'
@ -29,16 +29,11 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
onCheckChange={handleIsMultipleChange}
/>
{options?.isMultipleChoice && (
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options?.buttonLabel ?? 'Send'}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Button label:"
defaultValue={options?.buttonLabel ?? 'Send'}
onChange={handleButtonLabelChange}
/>
)}
<FormControl>
<FormLabel>

43
apps/builder/src/features/blocks/inputs/date/components/DateInputSettingsBody.tsx
View File

@ -1,6 +1,6 @@
import { Input } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { DateInputOptions, Variable } from 'models'
import React from 'react'
@ -40,39 +40,24 @@ export const DateInputSettingsBody = ({
onCheckChange={handleHasTimeChange}
/>
{options.isRange && (
<Stack>
<FormLabel mb="0" htmlFor="from">
From label:
</FormLabel>
<Input
id="from"
<>
<TextInput
label="From label:"
defaultValue={options.labels.from}
onChange={handleFromChange}
/>
</Stack>
)}
{options?.isRange && (
<Stack>
<FormLabel mb="0" htmlFor="to">
To label:
</FormLabel>
<Input
id="to"
<TextInput
label="To label:"
defaultValue={options.labels.to}
onChange={handleToChange}
/>
</Stack>
</>
)}
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

6
apps/builder/src/features/blocks/inputs/date/date.spec.ts
View File

@ -32,9 +32,9 @@ test.describe('Date input block', () => {
await page.click(`text=Pick a date...`)
await page.click('text=Is range?')
await page.click('text=With time?')
await page.fill('#from', 'Previous:')
await page.fill('#to', 'After:')
await page.fill('#button', 'Go')
await page.getByLabel('From label:').fill('Previous:')
await page.getByLabel('To label:').fill('After:')
await page.getByLabel('Button label:').fill('Go')
await page.click('text=Restart')
await expect(page.locator(`[data-testid="from-date"]`)).toHaveAttribute(

49
apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettingsBody.tsx
View File

@ -1,5 +1,5 @@
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { EmailInputOptions, Variable } from 'models'
import React from 'react'
@ -24,36 +24,21 @@ export const EmailInputSettingsBody = ({
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}
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<Input
id="retry"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<TextInput
label="Retry message:"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

2
apps/builder/src/features/blocks/inputs/emailInput/emailInput.spec.ts
View File

@ -33,7 +33,7 @@ test.describe('Email input block', () => {
'Your email...'
)
await expect(page.locator('text=Your email...')).toBeVisible()
await page.fill('#button', 'Go')
await page.getByLabel('Button label:').fill('Go')
await page.fill(
`input[value="${defaultEmailInputOptions.retryMessageContent}"]`,
'Try again bro'

20
apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
View File

@ -1,10 +1,10 @@
import { FormLabel, HStack, Stack, Text } from '@chakra-ui/react'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { FileInputOptions, Variable } from 'models'
import React from 'react'
import { Input, SmartNumberInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput, NumberInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
type Props = {
options: FileInputOptions
@ -49,7 +49,7 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
onCheckChange={handleMultipleFilesChange}
/>
<HStack>
<SmartNumberInput
<NumberInput
label={'Size limit:'}
defaultValue={options.sizeLimit ?? 10}
onValueChange={handleSizeLimitChange}
@ -68,21 +68,21 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
withVariableButton={false}
/>
</Stack>
<Input
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
withVariableButton={false}
/>
<Input
<TextInput
label="Clear button label:"
defaultValue={options.labels.clear}
defaultValue={options.labels.clear ?? ''}
onChange={updateClearButtonLabel}
withVariableButton={false}
/>
<Input
<TextInput
label="Skip button label:"
defaultValue={options.labels.skip}
defaultValue={options.labels.skip ?? ''}
onChange={updateSkipButtonLabel}
withVariableButton={false}
/>

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

@ -1,5 +1,5 @@
import { Input, SmartNumberInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput, NumberInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { removeUndefinedFields } from '@/utils/helpers'
import { FormLabel, Stack } from '@chakra-ui/react'
import { NumberInputOptions, Variable } from 'models'
@ -30,39 +30,29 @@ export const NumberInputSettingsBody = ({
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>
<SmartNumberInput
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options?.labels?.button ?? 'Send'}
onChange={handleButtonLabelChange}
/>
<NumberInput
label="Min:"
defaultValue={options.min}
onValueChange={handleMinChange}
withVariableButton={false}
/>
<SmartNumberInput
<NumberInput
label="Max:"
defaultValue={options.max}
onValueChange={handleMaxChange}
withVariableButton={false}
/>
<SmartNumberInput
<NumberInput
label="Step:"
defaultValue={options.step}
onValueChange={handleBlockChange}

4
apps/builder/src/features/blocks/inputs/number/number.spec.ts
View File

@ -28,9 +28,9 @@ test.describe('Number input block', () => {
await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
await page.click(`text=${defaultNumberInputOptions.labels.placeholder}`)
await page.fill('#placeholder', 'Your number...')
await page.getByLabel('Placeholder:').fill('Your number...')
await expect(page.locator('text=Your number...')).toBeVisible()
await page.fill('#button', 'Go')
await page.getByLabel('Button label:').fill('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')

86
apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings/PaymentSettings.tsx
View File

@ -16,7 +16,7 @@ import React, { ChangeEvent, useState } from 'react'
import { currencies } from './currencies'
import { StripeConfigModal } from './StripeConfigModal'
import { CredentialsDropdown } from '@/features/credentials'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
type Props = {
options: PaymentInputOptions
@ -105,14 +105,12 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
/>
</Stack>
<HStack>
<Stack>
<Text>Price amount:</Text>
<Input
onChange={handleAmountChange}
defaultValue={options.amount}
placeholder="30.00"
/>
</Stack>
<TextInput
label="Price amount:"
onChange={handleAmountChange}
defaultValue={options.amount ?? ''}
placeholder="30.00"
/>
<Stack>
<Text>Currency:</Text>
<Select
@ -128,22 +126,18 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
</Select>
</Stack>
</HStack>
<Stack>
<Text>Button label:</Text>
<Input
onChange={handleButtonLabelChange}
defaultValue={options.labels.button}
placeholder="Pay"
/>
</Stack>
<Stack>
<Text>Success message:</Text>
<Input
onChange={handleSuccessLabelChange}
defaultValue={options.labels.success ?? 'Success'}
placeholder="Success"
/>
</Stack>
<TextInput
label="Button label:"
onChange={handleButtonLabelChange}
defaultValue={options.labels.button}
placeholder="Pay"
/>
<TextInput
label="Success message:"
onChange={handleSuccessLabelChange}
defaultValue={options.labels.success ?? 'Success'}
placeholder="Success"
/>
<Accordion allowToggle>
<AccordionItem>
<AccordionButton justifyContent="space-between">
@ -151,30 +145,24 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} as={Stack} spacing="6">
<Stack>
<Text>Name:</Text>
<Input
defaultValue={options.additionalInformation?.name ?? ''}
onChange={handleNameChange}
placeholder="John Smith"
/>
</Stack>
<Stack>
<Text>Email:</Text>
<Input
defaultValue={options.additionalInformation?.email ?? ''}
onChange={handleEmailChange}
placeholder="john@gmail.com"
/>
</Stack>
<Stack>
<Text>Phone number:</Text>
<Input
defaultValue={options.additionalInformation?.phoneNumber ?? ''}
onChange={handlePhoneNumberChange}
placeholder="+33XXXXXXXXX"
/>
</Stack>
<TextInput
label="Name:"
defaultValue={options.additionalInformation?.name ?? ''}
onChange={handleNameChange}
placeholder="John Smith"
/>
<TextInput
label="Email:"
defaultValue={options.additionalInformation?.email ?? ''}
onChange={handleEmailChange}
placeholder="john@gmail.com"
/>
<TextInput
label="Phone number:"
defaultValue={options.additionalInformation?.phoneNumber ?? ''}
onChange={handlePhoneNumberChange}
placeholder="+33XXXXXXXXX"
/>
</AccordionPanel>
</AccordionItem>
</Accordion>

45
apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings/StripeConfigModal.tsx
View File

@ -19,7 +19,7 @@ import React, { useState } from 'react'
import { useWorkspace } from '@/features/workspace'
import { omit } from 'utils'
import { useToast } from '@/hooks/useToast'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
import { TextLink } from '@/components/TextLink'
import { createCredentialsQuery } from '@/features/credentials'
@ -102,14 +102,13 @@ export const StripeConfigModal = ({
<ModalCloseButton />
<ModalBody>
<Stack as="form" spacing={4}>
<FormControl isRequired>
<FormLabel>Account name:</FormLabel>
<Input
onChange={handleNameChange}
placeholder="Typebot"
withVariableButton={false}
/>
</FormControl>
<TextInput
isRequired
label="Account name:"
onChange={handleNameChange}
placeholder="Typebot"
withVariableButton={false}
/>
<Stack>
<FormLabel>
Test keys:{' '}
@ -118,34 +117,30 @@ export const StripeConfigModal = ({
</MoreInfoTooltip>
</FormLabel>
<HStack>
<FormControl>
<Input
onChange={handleTestPublicKeyChange}
placeholder="pk_test_..."
withVariableButton={false}
/>
</FormControl>
<FormControl>
<Input
onChange={handleTestSecretKeyChange}
placeholder="sk_test_..."
withVariableButton={false}
/>
</FormControl>
<TextInput
onChange={handleTestPublicKeyChange}
placeholder="pk_test_..."
withVariableButton={false}
/>
<TextInput
onChange={handleTestSecretKeyChange}
placeholder="sk_test_..."
withVariableButton={false}
/>
</HStack>
</Stack>
<Stack>
<FormLabel>Live keys:</FormLabel>
<HStack>
<FormControl>
<Input
<TextInput
onChange={handlePublicKeyChange}
placeholder="pk_live_..."
withVariableButton={false}
/>
</FormControl>
<FormControl>
<Input
<TextInput
onChange={handleSecretKeyChange}
placeholder="sk_live_..."
withVariableButton={false}

49
apps/builder/src/features/blocks/inputs/phone/components/PhoneNumberSettingsBody/PhoneNumberSettingsBody.tsx
View File

@ -1,5 +1,5 @@
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { PhoneNumberInputOptions, Variable } from 'models'
import React from 'react'
@ -27,26 +27,16 @@ export const PhoneNumberSettingsBody = ({
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}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="button">
Default country:
@ -56,16 +46,11 @@ export const PhoneNumberSettingsBody = ({
countryCode={options.defaultCountryCode}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<Input
id="retry"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>
<TextInput
label="Retry message:"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

4
apps/builder/src/features/blocks/inputs/phone/phone.spec.ts
View File

@ -28,8 +28,8 @@ test.describe('Phone input block', () => {
await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
await page.click(`text=${defaultPhoneInputOptions.labels.placeholder}`)
await page.fill('#placeholder', '+33 XX XX XX XX')
await page.fill('#button', 'Go')
await page.getByLabel('Placeholder:').fill('+33 XX XX XX XX')
await page.getByLabel('Button label:').fill('Go')
await page.fill(
`input[value="${defaultPhoneInputOptions.retryMessageContent}"]`,
'Try again bro'

72
apps/builder/src/features/blocks/inputs/rating/components/RatingInputSettings.tsx
View File

@ -2,9 +2,9 @@ import { FormLabel, Stack } from '@chakra-ui/react'
import { DropdownList } from '@/components/DropdownList'
import { RatingInputOptions, Variable } from 'models'
import React from 'react'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { TextInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
type RatingInputSettingsProps = {
options: RatingInputOptions
@ -77,56 +77,36 @@ export const RatingInputSettings = ({
/>
)}
{options.buttonType === 'Icons' && options.customIcon.isEnabled && (
<Stack>
<FormLabel mb="0" htmlFor="svg">
Icon SVG:
</FormLabel>
<Input
id="svg"
defaultValue={options.customIcon.svg}
onChange={handleIconSvgChange}
placeholder="<svg>...</svg>"
/>
</Stack>
<TextInput
label="Icon SVG:"
defaultValue={options.customIcon.svg}
onChange={handleIconSvgChange}
placeholder="<svg>...</svg>"
/>
)}
<Stack>
<FormLabel mb="0" htmlFor="button">
{options.buttonType === 'Icons' ? '1' : '0'} label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.left}
onChange={handleLeftLabelChange}
placeholder="Not likely at all"
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="button">
{options.length} label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.right}
onChange={handleRightLabelChange}
placeholder="Extremely likely"
/>
</Stack>
<TextInput
label={`${options.buttonType === 'Icons' ? '1' : '0'} label:`}
defaultValue={options.labels.left}
onChange={handleLeftLabelChange}
placeholder="Not likely at all"
/>
<TextInput
label={`${options.length} label:`}
defaultValue={options.labels.right}
onChange={handleRightLabelChange}
placeholder="Extremely likely"
/>
<SwitchWithLabel
label="One click submit"
moreInfoContent='If enabled, the answer will be submitted as soon as the user clicks on a rating instead of showing the "Send" button.'
initialValue={options.isOneClickSubmitEnabled ?? false}
onCheckChange={handleOneClickSubmitChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="button">
Button label:
</FormLabel>
<Input
id="button"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

36
apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettingsBody.tsx
View File

@ -1,6 +1,6 @@
import { Input } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { TextInputOptions, Variable } from 'models'
import React from 'react'
@ -30,26 +30,16 @@ export const TextInputSettingsBody = ({
initialValue={options?.isLong ?? false}
onCheckChange={handleLongChange}
/>
<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}
onChange={handleButtonLabelChange}
/>
</Stack>
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

4
apps/builder/src/features/blocks/inputs/textInput/textInput.spec.ts
View File

@ -28,8 +28,8 @@ test.describe.parallel('Text input block', () => {
await expect(page.getByRole('button', { name: 'Send' })).toBeDisabled()
await page.click(`text=${defaultTextInputOptions.labels.placeholder}`)
await page.fill('#placeholder', 'Your name...')
await page.fill('#button', 'Go')
await page.getByLabel('Placeholder:').fill('Your name...')
await page.getByLabel('Button label:').fill('Go')
await page.click('text=Long text?')
await page.click('text=Restart')

49
apps/builder/src/features/blocks/inputs/url/components/UrlInputSettingsBody.tsx
View File

@ -1,5 +1,5 @@
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { TextInput } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { FormLabel, Stack } from '@chakra-ui/react'
import { UrlInputOptions, Variable } from 'models'
import React from 'react'
@ -24,36 +24,21 @@ export const UrlInputSettingsBody = ({
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}
onChange={handleButtonLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="retry">
Retry message:
</FormLabel>
<Input
id="retry"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
</Stack>
<TextInput
label="Placeholder:"
defaultValue={options.labels.placeholder}
onChange={handlePlaceholderChange}
/>
<TextInput
label="Button label:"
defaultValue={options.labels.button}
onChange={handleButtonLabelChange}
/>
<TextInput
label="Retry message:"
defaultValue={options.retryMessageContent}
onChange={handleRetryMessageChange}
/>
<Stack>
<FormLabel mb="0" htmlFor="variable">
Save answer in a variable:

4
apps/builder/src/features/blocks/inputs/url/url.spec.ts
View File

@ -30,9 +30,9 @@ test.describe('Url input block', () => {
).toBeDisabled()
await page.click(`text=${defaultUrlInputOptions.labels.placeholder}`)
await page.fill('#placeholder', 'Your URL...')
await page.getByLabel('Placeholder:').fill('Your URL...')
await expect(page.locator('text=Your URL...')).toBeVisible()
await page.fill('#button', 'Go')
await page.getByLabel('Button label:').fill('Go')
await page.fill(
`input[value="${defaultUrlInputOptions.retryMessageContent}"]`,
'Try again bro'

16
apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootSettingsForm.tsx
View File

@ -1,4 +1,4 @@
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import {
Accordion,
AccordionButton,
@ -18,7 +18,7 @@ type Props = {
export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
return (
<Stack spacing={4}>
<Input
<TextInput
isRequired
label="Base URL"
defaultValue={options.baseUrl}
@ -27,7 +27,7 @@ export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
}}
withVariableButton={false}
/>
<Input
<TextInput
isRequired
label="Website token"
defaultValue={options.websiteToken}
@ -43,14 +43,14 @@ export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4} as={Stack} spacing="4">
<Input
<TextInput
label="ID"
defaultValue={options.user?.id}
onChange={(id: string) => {
onOptionsChange({ ...options, user: { ...options.user, id } })
}}
/>
<Input
<TextInput
label="Name"
defaultValue={options.user?.name}
onChange={(name: string) => {
@ -60,7 +60,7 @@ export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
})
}}
/>
<Input
<TextInput
label="Email"
defaultValue={options.user?.email}
onChange={(email: string) => {
@ -70,7 +70,7 @@ export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
})
}}
/>
<Input
<TextInput
label="Avatar URL"
defaultValue={options.user?.avatarUrl}
onChange={(avatarUrl: string) => {
@ -80,7 +80,7 @@ export const ChatwootSettingsForm = ({ options, onOptionsChange }: Props) => {
})
}}
/>
<Input
<TextInput
label="Phone number"
defaultValue={options.user?.phoneNumber}
onChange={(phoneNumber: string) => {

97
apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx
View File

@ -1,4 +1,4 @@
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import {
Accordion,
AccordionButton,
@ -42,39 +42,24 @@ export const GoogleAnalyticsSettings = ({
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="tracking-id">
Tracking ID:
</FormLabel>
<Input
id="tracking-id"
defaultValue={options?.trackingId ?? ''}
placeholder="G-123456..."
onChange={handleTrackingIdChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="category">
Event category:
</FormLabel>
<Input
id="category"
defaultValue={options?.category ?? ''}
placeholder="Example: Typebot"
onChange={handleCategoryChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="action">
Event action:
</FormLabel>
<Input
id="action"
defaultValue={options?.action ?? ''}
placeholder="Example: Submit email"
onChange={handleActionChange}
/>
</Stack>
<TextInput
label="Tracking ID:"
defaultValue={options?.trackingId ?? ''}
placeholder="G-123456..."
onChange={handleTrackingIdChange}
/>
<TextInput
label="Event category:"
defaultValue={options?.category ?? ''}
placeholder="Example: Typebot"
onChange={handleCategoryChange}
/>
<TextInput
label="Event action:"
defaultValue={options?.action ?? ''}
placeholder="Example: Submit email"
onChange={handleActionChange}
/>
<Accordion allowToggle>
<AccordionItem>
<h2>
@ -86,28 +71,28 @@ export const GoogleAnalyticsSettings = ({
</AccordionButton>
</h2>
<AccordionPanel pb={4} as={Stack} spacing="6">
<Stack>
<FormLabel mb="0" htmlFor="label">
Event label <Tag>Optional</Tag>:
</FormLabel>
<Input
id="label"
defaultValue={options?.label ?? ''}
placeholder="Example: Campaign Z"
onChange={handleLabelChange}
/>
</Stack>
<Stack>
<FormLabel mb="0" htmlFor="value">
Event value <Tag>Optional</Tag>:
</FormLabel>
<Input
id="value"
defaultValue={options?.value?.toString() ?? ''}
placeholder="Example: 0"
onChange={handleValueChange}
/>
</Stack>
<TextInput
label={
<>
Event label <Tag>Optional</Tag>:
</>
}
defaultValue={options?.label ?? ''}
placeholder="Example: Campaign Z"
onChange={handleLabelChange}
/>
<TextInput
label={
<>
<FormLabel mb="0" htmlFor="value">
Event value <Tag>Optional</Tag>:
</FormLabel>
</>
}
defaultValue={options?.value?.toString() ?? ''}
placeholder="Example: 0"
onChange={handleValueChange}
/>
</AccordionPanel>
</AccordionItem>
</Accordion>

4
apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/CellWithValueStack.tsx
View File

@ -2,7 +2,7 @@ import { Stack } from '@chakra-ui/react'
import { DropdownList } from '@/components/DropdownList'
import { Cell } from 'models'
import { TableListItemProps } from '@/components/TableList'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
export const CellWithValueStack = ({
item,
@ -25,7 +25,7 @@ export const CellWithValueStack = ({
items={columns}
placeholder="Select a column"
/>
<Input
<TextInput
defaultValue={item.value ?? ''}
onChange={handleValueChange}
placeholder="Type a value..."

2
apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/CellWithVariableIdStack.tsx
View File

@ -2,7 +2,7 @@ import { Stack } from '@chakra-ui/react'
import { DropdownList } from '@/components/DropdownList'
import { ExtractingCell, Variable } from 'models'
import { TableListItemProps } from '@/components/TableList'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
export const CellWithVariableIdStack = ({
item,

4
apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/RowsFilterTableList/RowsFilterComparisonItem.tsx
View File

@ -1,5 +1,5 @@
import { DropdownList } from '@/components/DropdownList'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { TableListItemProps } from '@/components/TableList'
import { Stack } from '@chakra-ui/react'
import { ComparisonOperators, RowsFilterComparison } from 'models'
@ -42,7 +42,7 @@ export const RowsFilterComparisonItem = ({
placeholder="Select an operator"
/>
{item.comparisonOperator !== ComparisonOperators.IS_SET && (
<Input
<TextInput
defaultValue={item.value ?? ''}
onChange={handleChangeValue}
placeholder="Type a value..."

22
apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/SheetsDropdown.tsx
View File

@ -1,8 +1,6 @@
import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
import { SearchableDropdown } from '@/components/SearchableDropdown'
import { Select } from '@/components/inputs/Select'
import { HStack, Input } from '@chakra-ui/react'
import { useMemo } from 'react'
import { isDefined } from 'utils'
import { Sheet } from '../../types'
type Props = {
@ -18,16 +16,6 @@ export const SheetsDropdown = ({
sheetId,
onSelectSheetId,
}: Props) => {
const currentSheet = useMemo(
() => sheets?.find((s) => s.id === sheetId),
[sheetId, sheets]
)
const handleSpreadsheetSelect = (name: string) => {
const id = sheets?.find((s) => s.name === name)?.id
if (isDefined(id)) onSelectSheetId(id)
}
if (isLoading) return <Input value="Loading..." isDisabled />
if (!sheets || sheets.length === 0)
return (
@ -40,10 +28,10 @@ export const SheetsDropdown = ({
</HStack>
)
return (
<SearchableDropdown
selectedItem={currentSheet?.name}
items={(sheets ?? []).map((s) => s.name)}
onValueChange={handleSpreadsheetSelect}
<Select
selectedItem={sheetId}
items={(sheets ?? []).map((s) => ({ label: s.name, value: s.id }))}
onSelect={onSelectSheetId}
placeholder={'Select the sheet'}
/>
)

22
apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/SpreadsheetDropdown.tsx
View File

@ -1,6 +1,5 @@
import { SearchableDropdown } from '@/components/SearchableDropdown'
import { Select } from '@/components/inputs/Select'
import { Input, Tooltip } from '@chakra-ui/react'
import { useMemo } from 'react'
import { useSpreadsheets } from '../../hooks/useSpreadsheets'
type Props = {
@ -17,15 +16,7 @@ export const SpreadsheetsDropdown = ({
const { spreadsheets, isLoading } = useSpreadsheets({
credentialsId,
})
const currentSpreadsheet = useMemo(
() => spreadsheets?.find((s) => s.id === spreadsheetId),
[spreadsheetId, spreadsheets]
)
const handleSpreadsheetSelect = (name: string) => {
const id = spreadsheets?.find((s) => s.name === name)?.id
if (id) onSelectSpreadsheetId(id)
}
if (isLoading) return <Input value="Loading..." isDisabled />
if (!spreadsheets || spreadsheets.length === 0)
return (
@ -36,10 +27,13 @@ export const SpreadsheetsDropdown = ({
</Tooltip>
)
return (
<SearchableDropdown
selectedItem={currentSpreadsheet?.name}
items={(spreadsheets ?? []).map((s) => s.name)}
onValueChange={handleSpreadsheetSelect}
<Select
selectedItem={spreadsheetId}
items={(spreadsheets ?? []).map((spreadsheet) => ({
label: spreadsheet.name,
value: spreadsheet.id,
}))}
onSelect={onSelectSpreadsheetId}
placeholder={'Search for spreadsheet'}
/>
)

77
apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SendEmailSettings.tsx
View File

@ -7,15 +7,15 @@ import {
Switch,
FormLabel,
} from '@chakra-ui/react'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { CredentialsType, SendEmailOptions, Variable } from 'models'
import React, { useState } from 'react'
import { env, isNotEmpty } from 'utils'
import { SmtpConfigModal } from './SmtpConfigModal'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { CredentialsDropdown } from '@/features/credentials'
import { Input, Textarea } from '@/components/inputs'
import { TextInput, Textarea } from '@/components/inputs'
type Props = {
options: SendEmailOptions
@ -120,46 +120,35 @@ export const SendEmailSettings = ({ options, onOptionsChange }: Props) => {
refreshDropdownKey={refreshCredentialsKey}
/>
</Stack>
<Stack>
<Text>Reply to: </Text>
<Input
onChange={handleReplyToChange}
defaultValue={options.replyTo}
placeholder={'email@gmail.com'}
/>
</Stack>
<Stack>
<Text>To: </Text>
<Input
onChange={handleToChange}
defaultValue={options.recipients.join(', ')}
placeholder="email1@gmail.com, email2@gmail.com"
/>
</Stack>
<Stack>
<Text>Cc: </Text>
<Input
onChange={handleCcChange}
defaultValue={options.cc?.join(', ') ?? ''}
placeholder="email1@gmail.com, email2@gmail.com"
/>
</Stack>
<Stack>
<Text>Bcc: </Text>
<Input
onChange={handleBccChange}
defaultValue={options.bcc?.join(', ') ?? ''}
placeholder="email1@gmail.com, email2@gmail.com"
/>
</Stack>
<Stack>
<Text>Subject: </Text>
<Input
data-testid="subject-input"
onChange={handleSubjectChange}
defaultValue={options.subject ?? ''}
/>
</Stack>
<TextInput
label="Reply to:"
onChange={handleReplyToChange}
defaultValue={options.replyTo}
placeholder={'email@gmail.com'}
/>
<TextInput
label="To:"
onChange={handleToChange}
defaultValue={options.recipients.join(', ')}
placeholder="email1@gmail.com, email2@gmail.com"
/>
<TextInput
label="Cc:"
onChange={handleCcChange}
defaultValue={options.cc?.join(', ') ?? ''}
placeholder="email1@gmail.com, email2@gmail.com"
/>
<TextInput
label="Bcc:"
onChange={handleBccChange}
defaultValue={options.bcc?.join(', ') ?? ''}
placeholder="email1@gmail.com, email2@gmail.com"
/>
<TextInput
label="Subject:"
onChange={handleSubjectChange}
defaultValue={options.subject ?? ''}
/>
<SwitchWithLabel
label={'Custom content?'}
moreInfoContent="By default, the email body will be a recap of what has been collected so far. You can override it with this option."

16
apps/builder/src/features/blocks/integrations/sendEmail/components/SendEmailSettings/SmtpConfigForm.tsx
View File

@ -1,5 +1,5 @@
import { Input, SmartNumberInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { TextInput, NumberInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { Stack } from '@chakra-ui/react'
import { isDefined } from '@udecode/plate-common'
import { SmtpCredentialsData } from 'models'
@ -27,7 +27,7 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
return (
<Stack as="form" spacing={4}>
<Input
<TextInput
isRequired
label="From email"
defaultValue={config.from.email ?? ''}
@ -35,14 +35,14 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
placeholder="notifications@provider.com"
withVariableButton={false}
/>
<Input
<TextInput
label="From name"
defaultValue={config.from.name ?? ''}
onChange={handleFromNameChange}
placeholder="John Smith"
withVariableButton={false}
/>
<Input
<TextInput
isRequired
label="Host"
defaultValue={config.host ?? ''}
@ -50,7 +50,7 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
placeholder="mail.provider.com"
withVariableButton={false}
/>
<Input
<TextInput
isRequired
label="Username / Email"
type="email"
@ -59,7 +59,7 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
placeholder="user@provider.com"
withVariableButton={false}
/>
<Input
<TextInput
isRequired
label="Password"
type="password"
@ -73,7 +73,7 @@ export const SmtpConfigForm = ({ config, onConfigChange }: Props) => {
onCheckChange={handleTlsCheck}
moreInfoContent="If enabled, the connection will use TLS when connecting to server. If disabled then TLS is used if server supports the STARTTLS extension. In most cases enable it if you are connecting to port 465. For port 587 or 25 keep it disabled."
/>
<SmartNumberInput
<NumberInput
isRequired
label="Port number:"
placeholder="25"

4
apps/builder/src/features/blocks/integrations/sendEmail/queries/sendEmail.spec.ts
View File

@ -58,9 +58,9 @@ test.describe('Send email block', () => {
'[placeholder="email1@gmail.com, email2@gmail.com"]',
'email1@gmail.com, email2@gmail.com'
)
await page.fill('[data-testid="subject-input"]', 'Email subject')
await page.getByLabel('Subject:').fill('Email subject')
await page.click('text="Custom content?"')
await page.fill('[data-testid="body-input"]', 'Here is my email')
await page.locator('textarea').fill('Here is my email')
await page.click('text=Preview')
await page.locator('typebot-standard').locator('text=Go').click()

38
apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/KeyValueInputs.tsx
View File

@ -1,6 +1,6 @@
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { TableListItemProps } from '@/components/TableList'
import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
import { Stack } from '@chakra-ui/react'
import { KeyValue } from 'models'
export const QueryParamsInputs = (props: TableListItemProps<KeyValue>) => (
@ -39,26 +39,20 @@ export const KeyValueInputs = ({
}
return (
<Stack p="4" rounded="md" flex="1" borderWidth="1px">
<FormControl>
<FormLabel htmlFor={'key' + item.id}>Key:</FormLabel>
<Input
id={'key' + item.id}
defaultValue={item.key ?? ''}
onChange={handleKeyChange}
placeholder={keyPlaceholder}
debounceTimeout={debounceTimeout}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor={'value' + item.id}>Value:</FormLabel>
<Input
id={'value' + item.id}
defaultValue={item.value ?? ''}
onChange={handleValueChange}
placeholder={valuePlaceholder}
debounceTimeout={debounceTimeout}
/>
</FormControl>
<TextInput
label="Key:"
defaultValue={item.key ?? ''}
onChange={handleKeyChange}
placeholder={keyPlaceholder}
debounceTimeout={debounceTimeout}
/>
<TextInput
label="Value:"
defaultValue={item.value ?? ''}
onChange={handleValueChange}
placeholder={valuePlaceholder}
debounceTimeout={debounceTimeout}
/>
</Stack>
)
}

10
apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/ResponseMappingInputs.tsx
View File

@ -1,6 +1,6 @@
import { SearchableDropdown } from '@/components/SearchableDropdown'
import { AutocompleteInput } from '@/components/inputs/AutocompleteInput'
import { TableListItemProps } from '@/components/TableList'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
import { Variable, ResponseVariableMapping } from 'models'
@ -18,10 +18,10 @@ export const DataVariableInputs = ({
<Stack p="4" rounded="md" flex="1" borderWidth="1px">
<FormControl>
<FormLabel htmlFor="name">Data:</FormLabel>
<SearchableDropdown
<AutocompleteInput
items={dataItems}
value={item.bodyPath}
onValueChange={handleBodyPathChange}
defaultValue={item.bodyPath}
onChange={handleBodyPathChange}
placeholder="Select the data"
withVariableButton
/>

19
apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/VariableForTestInputs.tsx
View File

@ -1,6 +1,6 @@
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { TableListItemProps } from '@/components/TableList'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { Stack, FormControl, FormLabel } from '@chakra-ui/react'
import { VariableForTest, Variable } from 'models'
@ -25,15 +25,12 @@ export const VariableForTestInputs = ({
onSelectVariable={handleVariableSelect}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor={'value' + item.id}>Test value:</FormLabel>
<Input
id={'value' + item.id}
defaultValue={item.value ?? ''}
onChange={handleValueChange}
debounceTimeout={debounceTimeout}
/>
</FormControl>
<TextInput
label="Test value:"
defaultValue={item.value ?? ''}
onChange={handleValueChange}
debounceTimeout={debounceTimeout}
/>
</Stack>
)
}

8
apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/WebhookSettings.tsx
View File

@ -27,18 +27,18 @@ import {
Webhook,
} from 'models'
import { DropdownList } from '@/components/DropdownList'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { HeadersInputs, QueryParamsInputs } from './KeyValueInputs'
import { VariableForTestInputs } from './VariableForTestInputs'
import { DataVariableInputs } from './ResponseMappingInputs'
import { byId, env } from 'utils'
import { ExternalLinkIcon } from '@/components/icons'
import { useToast } from '@/hooks/useToast'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { TableListItemProps, TableList } from '@/components/TableList'
import { executeWebhook } from '../../queries/executeWebhookQuery'
import { getDeepKeys } from '../../utils/getDeepKeys'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { convertVariablesForTestToVariables } from '../../utils/convertVariablesForTestToVariables'
import { useDebouncedCallback } from 'use-debounce'
@ -157,7 +157,7 @@ export const WebhookSettings = ({
</Stack>
</Alert>
)}
<Input
<TextInput
placeholder="Paste webhook URL..."
defaultValue={localWebhook.url ?? ''}
onChange={handleUrlChange}

6
apps/builder/src/features/blocks/logic/condition/components/ConditionItemForm/ComparisonItem.tsx
View File

@ -2,8 +2,8 @@ import { Stack } from '@chakra-ui/react'
import { DropdownList } from '@/components/DropdownList'
import { Comparison, Variable, ComparisonOperators } from 'models'
import { TableListItemProps } from '@/components/TableList'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { Input } from '@/components/inputs'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { TextInput } from '@/components/inputs'
export const ComparisonItem = ({
item,
@ -39,7 +39,7 @@ export const ComparisonItem = ({
placeholder="Select an operator"
/>
{item.comparisonOperator !== ComparisonOperators.IS_SET && (
<Input
<TextInput
defaultValue={item.value ?? ''}
onChange={handleChangeValue}
placeholder="Type a value..."

23
apps/builder/src/features/blocks/logic/redirect/components/RedirectSettings.tsx
View File

@ -1,6 +1,6 @@
import { Input } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { FormLabel, Stack } from '@chakra-ui/react'
import { TextInput } from '@/components/inputs'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { Stack } from '@chakra-ui/react'
import { RedirectOptions } from 'models'
import React from 'react'
@ -17,17 +17,12 @@ export const RedirectSettings = ({ options, onOptionsChange }: Props) => {
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="tracking-id">
Url:
</FormLabel>
<Input
id="tracking-id"
defaultValue={options.url ?? ''}
placeholder="Type a URL..."
onChange={handleUrlChange}
/>
</Stack>
<TextInput
label="Url:"
defaultValue={options.url ?? ''}
placeholder="Type a URL..."
onChange={handleUrlChange}
/>
<SwitchWithLabel
label="Open in new tab?"
initialValue={options.isNewTab}

23
apps/builder/src/features/blocks/logic/script/components/ScriptSettings.tsx
View File

@ -1,7 +1,7 @@
import { FormLabel, Stack, Text } from '@chakra-ui/react'
import { CodeEditor } from '@/components/CodeEditor'
import { Stack, Text } from '@chakra-ui/react'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import React from 'react'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
import { ScriptOptions } from 'models'
type Props = {
@ -17,17 +17,12 @@ export const ScriptSettings = ({ options, onOptionsChange }: Props) => {
return (
<Stack spacing={4}>
<Stack>
<FormLabel mb="0" htmlFor="name">
Name:
</FormLabel>
<Input
id="name"
defaultValue={options.name}
onChange={handleNameChange}
withVariableButton={false}
/>
</Stack>
<TextInput
label="Name:"
defaultValue={options.name}
onChange={handleNameChange}
withVariableButton={false}
/>
<Stack>
<Text>Code:</Text>
<CodeEditor

4
apps/builder/src/features/blocks/logic/setVariable/components/SetVariableSettings.tsx
View File

@ -1,8 +1,8 @@
import { FormLabel, HStack, Stack, Switch, Text } from '@chakra-ui/react'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { SetVariableOptions, Variable } from 'models'
import React from 'react'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { Textarea } from '@/components/inputs'
type Props = {

25
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/GroupsDropdown.tsx
View File

@ -1,8 +1,6 @@
import { SearchableDropdown } from '@/components/SearchableDropdown'
import { Select } from '@/components/inputs/Select'
import { Input } from '@chakra-ui/react'
import { Group } from 'models'
import { useMemo } from 'react'
import { byId } from 'utils'
type Props = {
groups: Group[]
@ -17,24 +15,17 @@ export const GroupsDropdown = ({
onGroupIdSelected,
isLoading,
}: Props) => {
const currentGroup = useMemo(
() => groups?.find(byId(groupId)),
[groupId, groups]
)
const handleGroupSelect = (title: string) => {
const id = groups?.find((b) => b.title === title)?.id
if (id) onGroupIdSelected(id)
}
if (isLoading) return <Input value="Loading..." isDisabled />
if (!groups || groups.length === 0)
return <Input value="No groups found" isDisabled />
return (
<SearchableDropdown
selectedItem={currentGroup?.title}
items={(groups ?? []).map((b) => b.title)}
onValueChange={handleGroupSelect}
<Select
selectedItem={groupId}
items={(groups ?? []).map((group) => ({
label: group.title,
value: group.id,
}))}
onSelect={onGroupIdSelected}
placeholder={'Select a block'}
/>
)

2
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotLinkForm.tsx
View File

@ -24,7 +24,7 @@ export const TypebotLinkForm = ({ options, onOptionsChange }: Props) => {
<TypebotsDropdown
idsToExclude={[typebot.id]}
typebotId={options.typebotId}
onSelectTypebotId={handleTypebotIdChange}
onSelect={handleTypebotIdChange}
currentWorkspaceId={typebot.workspaceId as string}
/>
)}

52
apps/builder/src/features/blocks/logic/typebotLink/components/TypebotLinkForm/TypebotsDropdown.tsx
View File

@ -1,25 +1,23 @@
import { HStack, IconButton, Input, Text } from '@chakra-ui/react'
import { HStack, IconButton, Input } from '@chakra-ui/react'
import { ExternalLinkIcon } from '@/components/icons'
import { useToast } from '@/hooks/useToast'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useMemo } from 'react'
import { byId } from 'utils'
import { useTypebots } from '@/features/dashboard'
import { SearchableDropdown } from '@/components/SearchableDropdown'
import { Select } from '@/components/inputs/Select'
import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
type Props = {
idsToExclude: string[]
typebotId?: string | 'current'
currentWorkspaceId: string
onSelectTypebotId: (typebotId: string | 'current') => void
onSelect: (typebotId: string | 'current') => void
}
export const TypebotsDropdown = ({
idsToExclude,
typebotId,
onSelectTypebotId,
onSelect,
currentWorkspaceId,
}: Props) => {
const { query } = useRouter()
@ -28,56 +26,42 @@ export const TypebotsDropdown = ({
workspaceId: currentWorkspaceId,
onError: (e) => showToast({ title: e.name, description: e.message }),
})
const currentTypebot = useMemo(
() => typebots?.find(byId(typebotId)),
[typebotId, typebots]
)
const handleTypebotSelect = (name: string) => {
if (name === 'Current typebot') return onSelectTypebotId('current')
const id = typebots?.find((s) => s.name === name)?.id
if (id) onSelectTypebotId(id)
}
if (isLoading) return <Input value="Loading..." isDisabled />
if (!typebots || typebots.length === 0)
return <Input value="No typebots found" isDisabled />
return (
<HStack>
<SearchableDropdown
selectedItem={
typebotId === 'current' ? 'Current typebot' : currentTypebot?.name
}
<Select
selectedItem={typebotId}
items={[
{
label: 'Current typebot',
value: 'Current typebot',
value: 'current',
},
...(typebots ?? [])
.filter((typebot) => !idsToExclude.includes(typebot.id))
.map((typebot) => ({
value: typebot.name,
label: (
<HStack as="span" spacing="2">
<EmojiOrImageIcon
icon={typebot.icon}
boxSize="18px"
emojiFontSize="18px"
/>
<Text>{typebot.name}</Text>
</HStack>
icon: (
<EmojiOrImageIcon
icon={typebot.icon}
boxSize="18px"
emojiFontSize="18px"
/>
),
label: typebot.name,
value: typebot.id,
})),
]}
onValueChange={handleTypebotSelect}
onSelect={onSelect}
placeholder={'Select a typebot'}
/>
{currentTypebot?.id && (
{typebotId && typebotId !== 'current' && (
<IconButton
aria-label="Navigate to typebot"
icon={<ExternalLinkIcon />}
as={Link}
href={`/typebots/${currentTypebot?.id}/edit?parentId=${query.typebotId}`}
href={`/typebots/${typebotId}/edit?parentId=${query.typebotId}`}
/>
)}
</HStack>

15
apps/builder/src/features/blocks/logic/typebotLink/typebotLink.spec.ts
View File

@ -29,7 +29,9 @@ test('should be configurable', async ({ page }) => {
await page.click('[aria-label="Navigate back"]')
await expect(page).toHaveURL(`/typebots/${typebotId}/edit`)
await page.click('text=Jump in My link typebot 2')
await expect(page.locator('input[value="My link typebot 2"]')).toBeVisible()
await expect(page.getByTestId('selected-item-label').first()).toHaveText(
'My link typebot 2'
)
await page.click('input[placeholder="Select a block"]')
await page.click('text=Group #2')
@ -40,8 +42,7 @@ test('should be configurable', async ({ page }) => {
await page.click('[aria-label="Close"]')
await page.click('text=Jump to Group #2 in My link typebot 2')
await page.click('input[value="Group #2"]', { clickCount: 3 })
await page.press('input[value="Group #2"]', 'Backspace')
await page.getByTestId('selected-item-label').nth(1).click({ force: true })
await page.click('button >> text=Start')
await page.click('text=Preview')
@ -54,13 +55,9 @@ test('should be configurable', async ({ page }) => {
await page.click('[aria-label="Close"]')
await page.click('text=Jump to Start in My link typebot 2')
await page.waitForTimeout(1000)
await page.click('input[value="My link typebot 2"]', { clickCount: 3 })
await page.press('input[value="My link typebot 2"]', 'Backspace')
await page.getByTestId('selected-item-label').first().click({ force: true })
await page.click('button >> text=Current typebot')
await page.click('input[placeholder="Select a block"]', {
clickCount: 3,
})
await page.press('input[placeholder="Select a block"]', 'Backspace')
await page.getByPlaceholder('Select a block').click()
await page.click('button >> text=Hello')
await page.click('text=Preview')

4
apps/builder/src/features/blocks/logic/wait/components/WaitSettings.tsx
View File

@ -1,7 +1,7 @@
import { Stack } from '@chakra-ui/react'
import { WaitOptions } from 'models'
import React from 'react'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
type Props = {
options: WaitOptions
@ -15,7 +15,7 @@ export const WaitSettings = ({ options, onOptionsChange }: Props) => {
return (
<Stack spacing={4}>
<Input
<TextInput
label="Seconds to wait for:"
defaultValue={options.secondsToWaitFor}
onChange={handleSecondsChange}

2
apps/builder/src/features/editor/components/TypebotHeader/EditableTypebotName.tsx
View File

@ -36,8 +36,6 @@ export const EditableTypebotName = ({
cursor="pointer"
maxW="150px"
overflow="hidden"
display="flex"
alignItems="center"
fontSize="14px"
minW="30px"
minH="20px"

2
apps/builder/src/features/preview/components/ApiPreviewInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { TextLink } from '@/components/TextLink'
import { useEditor } from '@/features/editor/providers/EditorProvider'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'

2
apps/builder/src/features/publish/components/embeds/modals/ApiModal.tsx
View File

@ -1,5 +1,5 @@
import { AlertInfo } from '@/components/AlertInfo'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { TextLink } from '@/components/TextLink'
import {
Modal,

2
apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmStandardInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react'
import { Typebot } from 'models'
import { useState } from 'react'

2
apps/builder/src/features/publish/components/embeds/modals/IframeModal/IframeSnippet.tsx
View File

@ -1,7 +1,7 @@
import { FlexProps } from '@chakra-ui/react'
import { useTypebot } from '@/features/editor'
import { env, getViewerUrl } from 'utils'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import prettier from 'prettier/standalone'
import parserHtml from 'prettier/parser-html'

2
apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx
View File

@ -2,7 +2,7 @@ import prettier from 'prettier/standalone'
import parserHtml from 'prettier/parser-html'
import { parseInitBubbleCode, typebotImportCode } from '../../snippetParsers'
import { useTypebot } from '@/features/editor'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { BubbleProps } from '@typebot.io/js'
import { isCloudProdInstance } from '@/utils/helpers'
import { env, getViewerUrl } from 'utils'

2
apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx
View File

@ -2,7 +2,7 @@ import { useTypebot } from '@/features/editor'
import parserHtml from 'prettier/parser-html'
import prettier from 'prettier/standalone'
import { parseInitPopupCode, typebotImportCode } from '../../snippetParsers'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { PopupProps } from '@typebot.io/js'
import { isCloudProdInstance } from '@/utils/helpers'
import { env, getViewerUrl } from 'utils'

2
apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptStandardSnippet.tsx
View File

@ -2,7 +2,7 @@ import parserHtml from 'prettier/parser-html'
import prettier from 'prettier/standalone'
import { parseInitStandardCode, typebotImportCode } from '../../snippetParsers'
import { useTypebot } from '@/features/editor'
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { isCloudProdInstance } from '@/utils/helpers'
import { env, getViewerUrl } from 'utils'

2
apps/builder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
export const InstallReactPackageSnippet = () => {
return (

2
apps/builder/src/features/publish/components/embeds/modals/React/ReactBubbleSnippet.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { useTypebot } from '@/features/editor'
import { BubbleProps } from '@typebot.io/js'
import parserBabel from 'prettier/parser-babel'

2
apps/builder/src/features/publish/components/embeds/modals/React/ReactPopupSnippet.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { useTypebot } from '@/features/editor'
import { PopupProps } from '@typebot.io/js'
import parserBabel from 'prettier/parser-babel'

2
apps/builder/src/features/publish/components/embeds/modals/React/ReactStandardSnippet.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { useTypebot } from '@/features/editor'
import parserBabel from 'prettier/parser-babel'
import prettier from 'prettier/standalone'

2
apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { useTypebot } from '@/features/editor'
import { isCloudProdInstance } from '@/utils/helpers'
import { Stack, Text } from '@chakra-ui/react'

2
apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptPopupInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { useTypebot } from '@/features/editor'
import { isCloudProdInstance } from '@/utils/helpers'
import { Stack, Text } from '@chakra-ui/react'

2
apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptStandardInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { useTypebot } from '@/features/editor'
import { isCloudProdInstance } from '@/utils/helpers'
import { Stack, Code, Text } from '@chakra-ui/react'

2
apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyStandardInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { OrderedList, ListItem, Stack, Text, Code } from '@chakra-ui/react'
import { useState } from 'react'
import { StandardSettings } from '../../../settings/StandardSettings'

2
apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { ExternalLinkIcon } from '@/components/icons'
import { useTypebot } from '@/features/editor'
import {

2
apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressPopupInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { ExternalLinkIcon } from '@/components/icons'
import {
OrderedList,

2
apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressStandardInstructions.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import { ExternalLinkIcon } from '@/components/icons'
import {
OrderedList,

4
apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageSettings.tsx
View File

@ -1,4 +1,4 @@
import { SmartNumberInput } from '@/components/inputs'
import { NumberInput } from '@/components/inputs'
import { FormLabel, HStack, Input, Stack, Switch, Text } from '@chakra-ui/react'
import { PreviewMessageParams } from '@typebot.io/js/dist/features/bubble/types'
import { useState } from 'react'
@ -101,7 +101,7 @@ export const PreviewMessageSettings = ({ defaultAvatar, onChange }: Props) => {
{isAutoShowEnabled && (
<>
<Text>After</Text>
<SmartNumberInput
<NumberInput
size="sm"
w="70px"
defaultValue={autoShowDelay}

4
apps/builder/src/features/publish/components/embeds/settings/PopupSettings.tsx
View File

@ -1,4 +1,4 @@
import { SmartNumberInput } from '@/components/inputs'
import { NumberInput } from '@/components/inputs'
import {
StackProps,
Stack,
@ -37,7 +37,7 @@ export const PopupSettings = ({ onUpdateSettings, ...props }: Props) => {
/>
{isEnabled && (
<>
<SmartNumberInput
<NumberInput
label="After"
size="sm"
w="70px"

2
apps/builder/src/features/publish/components/embeds/settings/StandardSettings.tsx
View File

@ -9,7 +9,7 @@ import {
} from '@chakra-ui/react'
import { DropdownList } from '@/components/DropdownList'
import { useState, useEffect } from 'react'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
type Props = {
onUpdateWindowSettings: (windowSettings: {

2
apps/builder/src/features/results/components/ResultsTable/ExportAllResultsModal.tsx
View File

@ -1,6 +1,6 @@
import { AlertInfo } from '@/components/AlertInfo'
import { DownloadIcon } from '@/components/icons'
import { SwitchWithLabel } from '@/components/SwitchWithLabel'
import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
import { useTypebot } from '@/features/editor'
import { useToast } from '@/hooks/useToast'
import { trpc } from '@/lib/trpc'

2
apps/builder/src/features/settings/components/GeneralSettingsForm.tsx
View File

@ -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 = {

8
apps/builder/src/features/settings/components/MetadataForm.tsx
View File

@ -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}

6
apps/builder/src/features/settings/components/TypingEmulationForm.tsx
View File

@ -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}

5
apps/builder/src/features/settings/settings.spec.ts
View File

@ -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)

2
apps/builder/src/features/theme/components/CustomCssSettings/CustomCssSettings.tsx
View File

@ -1,4 +1,4 @@
import { CodeEditor } from '@/components/CodeEditor'
import { CodeEditor } from '@/components/inputs/CodeEditor'
import React from 'react'
type Props = {

11
apps/builder/src/features/theme/components/GeneralSettings/FontSelector/FontSelector.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import { Text, HStack } from '@chakra-ui/react'
import { SearchableDropdown } from '@/components/SearchableDropdown'
import { env, isEmpty } from 'utils'
import { AutocompleteInput } from '@/components/inputs/AutocompleteInput'
type FontSelectorProps = {
activeFont?: string
@ -32,7 +32,7 @@ export const FontSelector = ({
}
const handleFontSelected = (nextFont: string) => {
if (nextFont == currentFont) return
if (nextFont === currentFont) return
setCurrentFont(nextFont)
onSelectFont(nextFont)
}
@ -40,10 +40,11 @@ export const FontSelector = ({
return (
<HStack justify="space-between" align="center">
<Text>Font</Text>
<SearchableDropdown
selectedItem={activeFont}
<AutocompleteInput
defaultValue={activeFont}
items={googleFonts}
onValueChange={handleFontSelected}
onChange={handleFontSelected}
withVariableButton={false}
/>
</HStack>
)

2
apps/builder/src/features/theme/theme.spec.ts
View File

@ -19,7 +19,7 @@ test.describe.parallel('Theme page', () => {
await expect(page.locator('button >> text="Go"')).toBeVisible()
// Font
await page.fill('input[type="text"]', 'Roboto Slab')
await page.getByRole('textbox').fill('Roboto Slab')
await expect(page.locator('.typebot-container')).toHaveCSS(
'font-family',
/"Roboto Slab"/

31
apps/builder/src/features/variables/components/VariablesButton.tsx
View File

@ -7,12 +7,14 @@ import {
IconButtonProps,
useDisclosure,
PopoverAnchor,
Portal,
} from '@chakra-ui/react'
import { UserIcon } from '@/components/icons'
import { Variable } from 'models'
import React, { useRef } from 'react'
import { VariableSearchInput } from '@/components/VariableSearchInput'
import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
import { useOutsideClick } from '@/hooks/useOutsideClick'
import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
type Props = {
onSelectVariable: (variable: Pick<Variable, 'name' | 'id'>) => void
@ -21,6 +23,7 @@ type Props = {
export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
const { isOpen, onOpen, onClose } = useDisclosure()
const popoverRef = useRef<HTMLDivElement>(null)
const { ref: parentModalRef } = useParentModal()
useOutsideClick({
ref: popoverRef,
@ -28,7 +31,7 @@ export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
})
return (
<Popover isLazy placement="bottom-end" gutter={0} isOpen={isOpen}>
<Popover isLazy isOpen={isOpen}>
<PopoverAnchor>
<Flex>
<Tooltip label="Insert a variable">
@ -42,17 +45,19 @@ export const VariablesButton = ({ onSelectVariable, ...props }: Props) => {
</Tooltip>
</Flex>
</PopoverAnchor>
<PopoverContent w="full" ref={popoverRef}>
<VariableSearchInput
onSelectVariable={(variable) => {
onClose()
if (variable) onSelectVariable(variable)
}}
placeholder="Search for a variable"
shadow="lg"
autoFocus
/>
</PopoverContent>
<Portal containerRef={parentModalRef}>
<PopoverContent w="full" ref={popoverRef}>
<VariableSearchInput
onSelectVariable={(variable) => {
onClose()
if (variable) onSelectVariable(variable)
}}
placeholder="Search for a variable"
shadow="lg"
autoFocus
/>
</PopoverContent>
</Portal>
</Popover>
)
}

23
apps/builder/src/features/variables/utils/injectVariableInTextInput.ts Normal file
View File

@ -0,0 +1,23 @@
import { Variable } from 'models'
type Props = {
variable: Variable
text: string
at: number
}
export const injectVariableInText = ({
variable,
text,
at,
}: Props): { text: string; carretPosition: number } => {
const textBeforeCursorPosition = text.substring(0, at)
const textAfterCursorPosition = text.substring(at, text.length)
const newText =
textBeforeCursorPosition + `{{${variable.name}}}` + textAfterCursorPosition
const newCarretPosition = at + `{{${variable.name}}}`.length
return {
text: newText,
carretPosition: newCarretPosition,
}
}

21
apps/builder/src/features/workspace/components/WorkspaceSettingsForm.tsx
View File

@ -11,7 +11,7 @@ import { ConfirmModal } from '@/components/ConfirmModal'
import React from 'react'
import { EditableEmojiOrImageIcon } from '@/components/EditableEmojiOrImageIcon'
import { useWorkspace } from '../WorkspaceProvider'
import { Input } from '@/components/inputs'
import { TextInput } from '@/components/inputs'
export const WorkspaceSettingsForm = ({ onClose }: { onClose: () => void }) => {
const { workspace, workspaces, updateWorkspace, deleteCurrentWorkspace } =
@ -46,17 +46,14 @@ export const WorkspaceSettingsForm = ({ onClose }: { onClose: () => void }) => {
)}
</Flex>
</FormControl>
<FormControl>
<FormLabel htmlFor="name">Name</FormLabel>
{workspace && (
<Input
id="name"
withVariableButton={false}
defaultValue={workspace?.name}
onChange={handleNameChange}
/>
)}
</FormControl>
{workspace && (
<TextInput
label="Name:"
withVariableButton={false}
defaultValue={workspace?.name}
onChange={handleNameChange}
/>
)}
{workspace && workspaces && workspaces.length > 1 && (
<DeleteWorkspaceButton
onConfirm={handleDeleteClick}

12
apps/builder/src/utils/focusInput.ts Normal file
View File

@ -0,0 +1,12 @@
type Props = {
at: number
input?: HTMLInputElement | HTMLTextAreaElement | null
}
export const focusInput = ({ at, input }: Props) => {
if (!input) return
input.focus()
setTimeout(() => {
input.selectionStart = input.selectionEnd = at
}, 100)
}