feat(editor): 🚸 Improve and unify inputs

baptisteArno · Mar 10, 2022 · 2c1f694 · 2c1f694 · vercel · Mar 10, 2022
1 parent 36838f0
commit 2c1f694
Show file tree

Hide file tree

Showing 32 changed files with 187 additions and 251 deletions.
diff --git a/apps/builder/components/settings/MetadataForm.tsx b/apps/builder/components/settings/MetadataForm.tsx
@@ -9,10 +9,7 @@ import {
   PopoverContent,
 } from '@chakra-ui/react'
 import { ImageUploadContent } from 'components/shared/ImageUploadContent'
-import {
-  InputWithVariableButton,
-  TextareaWithVariableButton,
-} from 'components/shared/TextboxWithVariableButton'
+import { Input, Textarea } from 'components/shared/Textbox'
 
 type Props = {
   typebotName: string
@@ -89,19 +86,19 @@ export const MetadataForm = ({
         <FormLabel mb="0" htmlFor="title">
           Title:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="title"
-          initialValue={metadata.title ?? typebotName}
+          defaultValue={metadata.title ?? typebotName}
           onChange={handleTitleChange}
         />
       </Stack>
       <Stack>
         <FormLabel mb="0" htmlFor="description">
           Description:
         </FormLabel>
-        <TextareaWithVariableButton
+        <Textarea
           id="description"
-          initialValue={metadata.description}
+          defaultValue={metadata.description}
           onChange={handleDescriptionChange}
         />
       </Stack>

diff --git a/apps/builder/components/shared/DebouncedInput.tsx b/apps/builder/components/shared/DebouncedInput.tsx
diff --git a/apps/builder/components/shared/DebouncedTextarea.tsx b/apps/builder/components/shared/DebouncedTextarea.tsx
diff --git a/...r/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx b/...r/components/shared/Graph/Nodes/StepNode/MediaBubblePopoverContent/VideoUploadContent.tsx
@@ -1,5 +1,5 @@
 import { Stack, Text } from '@chakra-ui/react'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox/Input'
 import { VideoBubbleContent, VideoBubbleContentType } from 'models'
 import urlParser from 'js-video-url-parser/lib/base'
 import 'js-video-url-parser/lib/provider/vimeo'
@@ -24,9 +24,9 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
   }
   return (
     <Stack p="2">
-      <InputWithVariableButton
+      <Input
         placeholder="Paste the video link..."
-        initialValue={content?.url ?? ''}
+        defaultValue={content?.url ?? ''}
         onChange={handleUrlChange}
       />
       <Text fontSize="sm" color="gray.400" textAlign="center">

diff --git a/...nts/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx b/...nts/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ChoiceInputSettingsBody.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { ChoiceInputOptions, Variable } from 'models'
 import React from 'react'
@@ -34,9 +34,9 @@ export const ChoiceInputSettingsBody = ({
           <FormLabel mb="0" htmlFor="button">
             Button label:
           </FormLabel>
-          <DebouncedInput
+          <Input
             id="button"
-            initialValue={options?.buttonLabel ?? 'Send'}
+            defaultValue={options?.buttonLabel ?? 'Send'}
             onChange={handleButtonLabelChange}
           />
         </Stack>

diff --git a/...der/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/CodeSettings.tsx b/...der/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/CodeSettings.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, Stack, Text } from '@chakra-ui/react'
 import { CodeEditor } from 'components/shared/CodeEditor'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
+import { Input } from 'components/shared/Textbox'
 import { CodeOptions } from 'models'
 import React from 'react'
 
@@ -20,10 +20,11 @@ export const CodeSettings = ({ options, onOptionsChange }: Props) => {
         <FormLabel mb="0" htmlFor="name">
           Name:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="name"
-          initialValue={options.name}
+          defaultValue={options.name}
           onChange={handleNameChange}
+          withVariableButton={false}
         />
       </Stack>
       <Stack>

diff --git a/...ph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx b/...ph/Nodes/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsItem.tsx
@@ -1,6 +1,6 @@
 import { Stack } from '@chakra-ui/react'
 import { DropdownList } from 'components/shared/DropdownList'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox/Input'
 import { TableListItemProps } from 'components/shared/TableList'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { Comparison, Variable, ComparisonOperators } from 'models'
@@ -39,8 +39,8 @@ export const ComparisonItem = ({
         placeholder="Select an operator"
       />
       {item.comparisonOperator !== ComparisonOperators.IS_SET && (
-        <InputWithVariableButton
-          initialValue={item.value ?? ''}
+        <Input
+          defaultValue={item.value ?? ''}
           onChange={handleChangeValue}
           placeholder="Type a value..."
         />

diff --git a/...nents/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx b/...nents/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/DateInputSettingsBody.tsx
@@ -1,6 +1,6 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { DateInputOptions, Variable } from 'models'
 import React from 'react'
@@ -46,9 +46,9 @@ export const DateInputSettingsBody = ({
           <FormLabel mb="0" htmlFor="from">
             From label:
           </FormLabel>
-          <DebouncedInput
+          <Input
             id="from"
-            initialValue={options.labels.from}
+            defaultValue={options.labels.from}
             onChange={handleFromChange}
           />
         </Stack>
@@ -58,9 +58,9 @@ export const DateInputSettingsBody = ({
           <FormLabel mb="0" htmlFor="to">
             To label:
           </FormLabel>
-          <DebouncedInput
+          <Input
             id="to"
-            initialValue={options.labels.to}
+            defaultValue={options.labels.to}
             onChange={handleToChange}
           />
         </Stack>
@@ -69,9 +69,9 @@ export const DateInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="button">
           Button label:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="button"
-          initialValue={options.labels.button}
+          defaultValue={options.labels.button}
           onChange={handleButtonLabelChange}
         />
       </Stack>

diff --git a/...ents/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx b/...ents/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/EmailInputSettingsBody.tsx
@@ -1,6 +1,5 @@
 import { FormLabel, Stack } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { EmailInputOptions, Variable } from 'models'
 import React from 'react'
@@ -29,29 +28,29 @@ export const EmailInputSettingsBody = ({
         <FormLabel mb="0" htmlFor="placeholder">
           Placeholder:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="placeholder"
-          initialValue={options.labels.placeholder}
+          defaultValue={options.labels.placeholder}
           onChange={handlePlaceholderChange}
         />
       </Stack>
       <Stack>
         <FormLabel mb="0" htmlFor="button">
           Button label:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="button"
-          initialValue={options.labels.button}
+          defaultValue={options.labels.button}
           onChange={handleButtonLabelChange}
         />
       </Stack>
       <Stack>
         <FormLabel mb="0" htmlFor="retry">
           Retry message:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="retry"
-          initialValue={options.retryMessageContent}
+          defaultValue={options.retryMessageContent}
           onChange={handleRetryMessageChange}
         />
       </Stack>

diff --git a/...nts/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx b/...nts/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleAnalyticsSettings.tsx
@@ -9,8 +9,7 @@ import {
   Stack,
   Tag,
 } from '@chakra-ui/react'
-import { DebouncedInput } from 'components/shared/DebouncedInput'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox'
 import { GoogleAnalyticsOptions } from 'models'
 import React from 'react'
 
@@ -47,9 +46,9 @@ export const GoogleAnalyticsSettings = ({
         <FormLabel mb="0" htmlFor="tracking-id">
           Tracking ID:
         </FormLabel>
-        <DebouncedInput
+        <Input
           id="tracking-id"
-          initialValue={options?.trackingId ?? ''}
+          defaultValue={options?.trackingId ?? ''}
           placeholder="G-123456..."
           onChange={handleTrackingIdChange}
         />
@@ -58,9 +57,9 @@ export const GoogleAnalyticsSettings = ({
         <FormLabel mb="0" htmlFor="category">
           Event category:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="category"
-          initialValue={options?.category ?? ''}
+          defaultValue={options?.category ?? ''}
           placeholder="Example: Typebot"
           onChange={handleCategoryChange}
         />
@@ -69,9 +68,9 @@ export const GoogleAnalyticsSettings = ({
         <FormLabel mb="0" htmlFor="action">
           Event action:
         </FormLabel>
-        <InputWithVariableButton
+        <Input
           id="action"
-          initialValue={options?.action ?? ''}
+          defaultValue={options?.action ?? ''}
           placeholder="Example: Submit email"
           onChange={handleActionChange}
         />
@@ -91,9 +90,9 @@ export const GoogleAnalyticsSettings = ({
               <FormLabel mb="0" htmlFor="label">
                 Event label <Tag>Optional</Tag>:
               </FormLabel>
-              <InputWithVariableButton
+              <Input
                 id="label"
-                initialValue={options?.label ?? ''}
+                defaultValue={options?.label ?? ''}
                 placeholder="Example: Campaign Z"
                 onChange={handleLabelChange}
               />
@@ -102,9 +101,9 @@ export const GoogleAnalyticsSettings = ({
               <FormLabel mb="0" htmlFor="value">
                 Event value <Tag>Optional</Tag>:
               </FormLabel>
-              <InputWithVariableButton
+              <Input
                 id="value"
-                initialValue={options?.value?.toString() ?? ''}
+                defaultValue={options?.value?.toString() ?? ''}
                 placeholder="Example: 0"
                 onChange={handleValueChange}
               />

diff --git a/...es/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx b/...es/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/CellWithValueStack.tsx
@@ -1,6 +1,6 @@
 import { Stack } from '@chakra-ui/react'
 import { DropdownList } from 'components/shared/DropdownList'
-import { InputWithVariableButton } from 'components/shared/TextboxWithVariableButton/InputWithVariableButton'
+import { Input } from 'components/shared/Textbox/Input'
 import { TableListItemProps } from 'components/shared/TableList'
 import { Cell } from 'models'
 
@@ -25,8 +25,8 @@ export const CellWithValueStack = ({
         items={columns}
         placeholder="Select a column"
       />
-      <InputWithVariableButton
-        initialValue={item.value ?? ''}
+      <Input
+        defaultValue={item.value ?? ''}
         onChange={handleValueChange}
         placeholder="Type a value..."
       />