diff --git a/apps/builder/src/components/TableList.tsx b/apps/builder/src/components/TableList.tsx index 5814a66bf..c39a48514 100644 --- a/apps/builder/src/components/TableList.tsx +++ b/apps/builder/src/components/TableList.tsx @@ -105,8 +105,8 @@ export const TableList = ({ in={showDeleteIndex === itemIndex} style={{ position: "absolute", - left: "-15px", - top: "-15px", + left: "-8px", + top: "-8px", }} unmountOnExit > diff --git a/apps/builder/src/components/collections.ts b/apps/builder/src/components/collections.ts deleted file mode 100644 index 548a8bf31..000000000 --- a/apps/builder/src/components/collections.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type { ReactNode } from "react"; - -export type Item = string | { label: string; value: string; icon?: ReactNode }; - -export const getItemLabel = (item: Item): string => { - if (typeof item === "string") return item; - return item.label; -}; - -export const getItemValue = (item: Item): string => { - if (typeof item === "string") return item; - return item.value; -}; diff --git a/apps/builder/src/components/inputs/CodeEditor.tsx b/apps/builder/src/components/inputs/CodeEditor.tsx index cf1763c5f..a850d6768 100644 --- a/apps/builder/src/components/inputs/CodeEditor.tsx +++ b/apps/builder/src/components/inputs/CodeEditor.tsx @@ -12,7 +12,7 @@ import { import { githubLight } from "@uiw/codemirror-theme-github"; import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night"; import CodeMirror, { type ReactCodeMirrorRef } from "@uiw/react-codemirror"; -import { useEffect, useRef, useState } from "react"; +import { type CSSProperties, useEffect, useRef, useState } from "react"; import { useDebouncedCallback } from "use-debounce"; import { useOpenControls } from "@/hooks/useOpenControls"; import { CopyButton } from "../CopyButton"; @@ -120,17 +120,24 @@ export const CodeEditor = ({ return (
{ /> - - - + + + {t("blocks.inputs.file.settings.labels")} - - - + + {t("blocks.inputs.settings.placeholder.label")} @@ -221,9 +214,9 @@ export const FileInputSettings = ({ options, onOptionsChange }: Props) => { withVariableButton={false} /> )} - - - + + + ); }; diff --git a/apps/builder/src/features/blocks/inputs/number/components/NumberInputSettings.tsx b/apps/builder/src/features/blocks/inputs/number/components/NumberInputSettings.tsx index 9dbccf12d..9c65e95c2 100644 --- a/apps/builder/src/features/blocks/inputs/number/components/NumberInputSettings.tsx +++ b/apps/builder/src/features/blocks/inputs/number/components/NumberInputSettings.tsx @@ -1,14 +1,4 @@ -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - FormControl, - FormLabel, - Stack, - Text, -} from "@chakra-ui/react"; +import { FormControl, FormLabel, Stack, Text } from "@chakra-ui/react"; import { useTranslate } from "@tolgee/react"; import { defaultNumberInputButtonLabel, @@ -24,6 +14,7 @@ import { type NumberInputBlock, numberInputOptionsSchema, } from "@typebot.io/blocks-inputs/number/schema"; +import { Accordion } from "@typebot.io/ui/components/Accordion"; import { Field } from "@typebot.io/ui/components/Field"; import type { Variable } from "@typebot.io/variables/schemas"; import { useEffect } from "react"; @@ -127,15 +118,14 @@ export const NumberInputSettings = ({ options, onOptionsChange }: Props) => { onValueChange={handleStepChange} /> - - - + + + {t("blocks.inputs.number.settings.format.label")} - - - + + ({ label: t(numberStyleTranslationKeys[style]), @@ -186,9 +176,9 @@ export const NumberInputSettings = ({ options, onOptionsChange }: Props) => { onChange={handleLocaleChange} /> - - - + + + {t("blocks.inputs.settings.saveAnswer.label")} diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx index c3c2d81b4..6fa8049c4 100644 --- a/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx +++ b/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx @@ -1,13 +1,6 @@ -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - Stack, -} from "@chakra-ui/react"; import { useTranslate } from "@tolgee/react"; import type { PaymentAddress } from "@typebot.io/blocks-inputs/payment/schema"; +import { Accordion } from "@typebot.io/ui/components/Accordion"; import { TextInput } from "@/components/inputs/TextInput"; type Props = { @@ -55,13 +48,12 @@ export const PaymentAddressSettings = ({ address, onAddressChange }: Props) => { }); return ( - - - + + + {t("blocks.inputs.payment.settings.address.label")} - - - + + { defaultValue={address?.postalCode ?? ""} onChange={updatePostalCode} /> - - - + + + ); }; diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx index 0c4d1a156..d0c19f023 100644 --- a/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx +++ b/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx @@ -1,14 +1,4 @@ -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - HStack, - Stack, - Text, - useDisclosure, -} from "@chakra-ui/react"; +import { HStack, Stack, Text, useDisclosure } from "@chakra-ui/react"; import { useTranslate } from "@tolgee/react"; import { defaultPaymentInputOptions, @@ -18,6 +8,7 @@ import type { PaymentAddress, PaymentInputBlock, } from "@typebot.io/blocks-inputs/payment/schema"; +import { Accordion } from "@typebot.io/ui/components/Accordion"; import { useMemo } from "react"; import { BasicSelect } from "@/components/inputs/BasicSelect"; import { TextInput } from "@/components/inputs/TextInput"; @@ -174,13 +165,12 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => { options?.labels?.success ?? defaultPaymentInputOptions.labels.success } /> - - - + + + {t("blocks.inputs.payment.settings.additionalInformation.label")} - - - + + { address={options?.additionalInformation?.address} onAddressChange={updateAddress} /> - - - + + + { } moreInfoTooltip="Can be found in Chatwoot under Settings > Inboxes > Settings > Configuration, in the code snippet." /> - - - - Set user details - - - + + + Set user details + { }); }} /> - - - + + + )} diff --git a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx index 7fae5313f..53587a3ac 100644 --- a/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx +++ b/apps/builder/src/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsSettings.tsx @@ -1,13 +1,6 @@ -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - Box, - Stack, -} from "@chakra-ui/react"; +import { Box, Stack } from "@chakra-ui/react"; import type { GoogleAnalyticsBlock } from "@typebot.io/blocks-integrations/googleAnalytics/schema"; +import { Accordion } from "@typebot.io/ui/components/Accordion"; import { Field } from "@typebot.io/ui/components/Field"; import { BasicNumberInput } from "@/components/inputs/BasicNumberInput"; import { TextInput } from "@/components/inputs/TextInput"; @@ -59,17 +52,14 @@ export const GoogleAnalyticsSettings = ({ placeholder="Example: conversion" onChange={updateAction} /> - - -

- - - Advanced - - - -

- + + + + + Advanced + + + - - - + + + ); }; diff --git a/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithValueStack.tsx b/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithValueStack.tsx index dd1e48930..bdf0e02ee 100644 --- a/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithValueStack.tsx +++ b/apps/builder/src/features/blocks/integrations/googleSheets/components/CellWithValueStack.tsx @@ -1,5 +1,7 @@ import { Stack } from "@chakra-ui/react"; import type { Cell } from "@typebot.io/blocks-integrations/googleSheets/schema"; +import { Button } from "@typebot.io/ui/components/Button"; +import { MoreVerticalIcon } from "@/components/icons"; import { BasicSelect } from "@/components/inputs/BasicSelect"; import { TextInput } from "@/components/inputs/TextInput"; import type { TableListItemProps } from "@/components/TableList"; @@ -18,7 +20,21 @@ export const CellWithValueStack = ({ onItemChange({ ...item, value }); }; return ( - + + - - + + + Row(s) to update - - + - + - - - - + + + + Cells to update - - + - + initialItems={options.cellsToUpsert} onItemsChange={handleUpsertColumnsChange} @@ -241,66 +231,57 @@ const ActionOptions = ({ /> )} - - - + + + ); case GoogleSheetsAction.GET: return ( - - - - - - Select row(s) - - - + + + + + Select row(s) + + - - - - - + + + + + - - - - Columns to extract - - - - - - - initialItems={options.cellsToExtract} - onItemsChange={handleExtractingCellsChange} - addLabel="Add a value" - hasDefaultItem - > - {({ item, onItemChange }) => ( - - )} - - - - - + + Columns to extract + + + initialItems={options.cellsToExtract} + onItemsChange={handleExtractingCellsChange} + addLabel="Add a value" + hasDefaultItem + > + {({ item, onItemChange }) => ( + + )} + + + + ); default: return null; diff --git a/apps/builder/src/features/blocks/integrations/httpRequest/components/HttpRequestAdvancedConfigForm.tsx b/apps/builder/src/features/blocks/integrations/httpRequest/components/HttpRequestAdvancedConfigForm.tsx index 10f39f71b..9dae73c34 100644 --- a/apps/builder/src/features/blocks/integrations/httpRequest/components/HttpRequestAdvancedConfigForm.tsx +++ b/apps/builder/src/features/blocks/integrations/httpRequest/components/HttpRequestAdvancedConfigForm.tsx @@ -1,13 +1,4 @@ -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - HStack, - Stack, - Text, -} from "@chakra-ui/react"; +import { HStack, Text } from "@chakra-ui/react"; import { defaultHttpRequestAttributes, defaultHttpRequestBlockOptions, @@ -22,6 +13,7 @@ import type { ResponseVariableMapping, VariableForTest, } from "@typebot.io/blocks-integrations/httpRequest/schema"; +import { Accordion } from "@typebot.io/ui/components/Accordion"; import { Button } from "@typebot.io/ui/components/Button"; import { Field } from "@typebot.io/ui/components/Field"; import { useMemo, useState } from "react"; @@ -126,13 +118,10 @@ export const HttpRequestAdvancedConfigForm = ({ return ( <> - - - - Advanced configuration - - - + + + Advanced configuration + - - - - Query params - - - + + + Query params + initialItems={httpRequest?.queryParams} onItemsChange={updateQueryParams} @@ -165,14 +151,11 @@ export const HttpRequestAdvancedConfigForm = ({ > {(props) => } - - - - - Headers - - - + + + + Headers + initialItems={httpRequest?.headers} onItemsChange={updateHeaders} @@ -180,14 +163,11 @@ export const HttpRequestAdvancedConfigForm = ({ > {(props) => } - - - - - Body - - - + + + + Body + )} - - - - - Advanced parameters - - - + + + + Advanced parameters + {typebot && ( - - - - - Variable values for test - - - + + + + Variable values for test + initialItems={options?.variablesForTest} onItemsChange={updateVariablesForTest} @@ -249,12 +223,12 @@ export const HttpRequestAdvancedConfigForm = ({ > {(props) => } - - - - - - + + + + + + {httpRequest?.url && (
{toast.data.details && ( - - e.stopPropagation()}> - + + e.stopPropagation()}> + Details - - - + + - - - + + + )}