build: 📦️ Update packages

2022-05-13 09:18:25 -07:00
parent ddaaa68e28
commit 6c2986590b
32 changed files with 2994 additions and 3689 deletions
--- a/apps/builder/components/share/customDomain/CustomDomainsDropdown.tsx
+++ b/apps/builder/components/share/customDomain/CustomDomainsDropdown.tsx
@ -87,7 +87,7 @@ export const CustomDomainsDropdown = ({
        textAlign="left"
        {...props}
      >
-        <Text isTruncated overflowY="visible" h="20px">
+        <Text noOfLines={0} overflowY="visible" h="20px">
          {currentCustomDomain ?? 'Add my domain'}
        </Text>
      </MenuButton>
--- a/apps/builder/components/shared/CredentialsDropdown.tsx
+++ b/apps/builder/components/shared/CredentialsDropdown.tsx
@ -103,7 +103,7 @@ export const CredentialsDropdown = ({
        textAlign="left"
        {...props}
      >
-        <Text isTruncated overflowY="visible" h="20px">
+        <Text noOfLines={0} overflowY="visible" h="20px">
          {currentCredential ? currentCredential.name : defaultCredentialsLabel}
        </Text>
      </MenuButton>
--- a/apps/builder/components/shared/DropdownList.tsx
+++ b/apps/builder/components/shared/DropdownList.tsx
@ -10,7 +10,7 @@ import {
  Stack,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from 'assets/icons'
-import React from 'react'
+import React, { ReactNode } from 'react'

 type Props<T> = {
  currentItem?: T
@ -39,8 +39,8 @@ export const DropdownList = <T,>({
        textAlign="left"
        {...props}
      >
-        <chakra.span isTruncated display="block">
-          {currentItem ?? placeholder}
+        <chakra.span noOfLines={0} display="block">
+          {(currentItem ?? placeholder) as unknown as ReactNode}
        </chakra.span>
      </MenuButton>
      <Portal>
@ -55,7 +55,7 @@ export const DropdownList = <T,>({
                textOverflow="ellipsis"
                onClick={handleMenuItemClick(item)}
              >
-                {item}
+                {item as unknown as ReactNode}
              </MenuItem>
            ))}
          </Stack>
--- a/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ConditionNodeContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ConditionNodeContent.tsx
@ -22,7 +22,7 @@ export const ConditionNodeContent = ({ item }: Props) => {
              byId(comparison.variableId)
            )
            return (
-              <Wrap key={comparison.id} spacing={1} isTruncated>
+              <Wrap key={comparison.id} spacing={1} noOfLines={0}>
                {idx > 0 && <Text>{item.content.logicalOperator ?? ''}</Text>}
                {variable?.name && (
                  <Tag bgColor="orange.400" color="white">
@ -38,7 +38,7 @@ export const ConditionNodeContent = ({ item }: Props) => {
                )}
                {comparison?.value && (
                  <Tag bgColor={'gray.200'}>
-                    <Text isTruncated>{comparison.value}</Text>
+                    <Text noOfLines={0}>{comparison.value}</Text>
                  </Tag>
                )}
              </Wrap>
--- a/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeOverlay.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeOverlay.tsx
@ -1,6 +1,6 @@
 import { Flex, FlexProps } from '@chakra-ui/react'
 import { Item } from 'models'
-import React from 'react'
+import React, { ReactNode } from 'react'

 type Props = {
  item: Item
@ -20,7 +20,7 @@ export const ItemNodeOverlay = ({ item, ...props }: Props) => {
      shadow="lg"
      {...props}
    >
-      {item.content ?? 'Click to edit'}
+      {(item.content ?? 'Click to edit') as ReactNode}
    </Flex>
  )
 }
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ConfigureContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ConfigureContent.tsx
@ -4,7 +4,7 @@ import { Text } from '@chakra-ui/react'
 type Props = { label?: string }

 export const ConfigureContent = ({ label }: Props) => (
-  <Text color={label ? 'currentcolor' : 'gray.500'} isTruncated>
+  <Text color={label ? 'currentcolor' : 'gray.500'} noOfLines={0}>
    {label ?? 'Configure...'}
  </Text>
 )
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SendEmailContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SendEmailContent.tsx
@ -9,7 +9,7 @@ export const SendEmailContent = ({ step }: Props) => {
  if (step.options.recipients.length === 0)
    return <Text color="gray.500">Configure...</Text>
  return (
-    <Wrap isTruncated pr="6">
+    <Wrap noOfLines={2} pr="6">
      <WrapItem>
        <Text>Send email to</Text>
      </WrapItem>
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SetVariableContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/SetVariableContent.tsx
@ -9,7 +9,7 @@ export const SetVariableContent = ({ step }: { step: SetVariableStep }) => {
    typebot?.variables.find(byId(step.options.variableId))?.name ?? ''
  const expression = step.options.expressionToEvaluate ?? ''
  return (
-    <Text color={'gray.500'} isTruncated>
+    <Text color={'gray.500'} noOfLines={2}>
      {variableName === '' && expression === ''
        ? 'Click to edit...'
        : `${variableName} ${expression ? `= ${expression}` : ``}`}
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WebhookContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/WebhookContent.tsx
@ -13,7 +13,7 @@ export const WebhookContent = ({ step: { webhookId } }: Props) => {

  if (!webhook?.url) return <Text color="gray.500">Configure...</Text>
  return (
-    <Text isTruncated pr="6">
+    <Text noOfLines={2} pr="6">
      {webhook.method} {webhook.url}
    </Text>
  )
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx
@ -36,7 +36,7 @@ export const ProviderWebhookContent = ({ step, configuredLabel }: Props) => {
  if (isNotDefined(webhook?.body))
    return <Text color="gray.500">Configure...</Text>
  return (
-    <Text isTruncated pr="6">
+    <Text noOfLines={0} pr="6">
      {webhook?.url ? configuredLabel : 'Disabled'}
    </Text>
  )
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
@ -4,11 +4,13 @@ import {
  Plate,
  selectEditor,
  serializeHtml,
-  TDescendant,
+  TEditor,
+  TElement,
+  Value,
  withPlate,
 } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from 'libs/plate'
-import { BaseSelection, createEditor, Transforms } from 'slate'
+import { BaseEditor, BaseSelection, createEditor, Transforms } from 'slate'
 import { ToolBar } from './ToolBar'
 import { parseHtmlStringToPlainText } from 'services/utils'
 import { defaultTextBubbleContent, TextBubbleContent, Variable } from 'models'
@ -16,7 +18,7 @@ import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { ReactEditor } from 'slate-react'

 type Props = {
-  initialValue: TDescendant[]
+  initialValue: TElement[]
  onClose: (newContent: TextBubbleContent) => void
 }

@ -24,7 +26,10 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
  const randomEditorId = useMemo(() => Math.random().toString(), [])
  const editor = useMemo(
    () =>
-      withPlate(createEditor(), { id: randomEditorId, plugins: platePlugins }),
+      withPlate(createEditor() as TEditor<Value>, {
+        id: randomEditorId,
+        plugins: platePlugins,
+      }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []
  )
@ -65,7 +70,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
    }
  }

-  const convertValueToStepContent = (value: unknown[]): TextBubbleContent => {
+  const convertValueToStepContent = (value: TElement[]): TextBubbleContent => {
    if (value.length === 0) defaultTextBubbleContent
    const html = serializeHtml(editor, {
      nodes: value,
@ -84,12 +89,12 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
  const handleVariableSelected = (variable?: Variable) => {
    setIsVariableDropdownOpen(false)
    if (!rememberedSelection.current || !variable) return
-    Transforms.select(editor, rememberedSelection.current)
-    Transforms.insertText(editor, '{{' + variable.name + '}}')
+    Transforms.select(editor as BaseEditor, rememberedSelection.current)
+    Transforms.insertText(editor as BaseEditor, '{{' + variable.name + '}}')
    ReactEditor.focus(editor as unknown as ReactEditor)
  }

-  const handleChangeEditorContent = (val: unknown[]) => {
+  const handleChangeEditorContent = (val: TElement[]) => {
    setValue(val)
    setIsVariableDropdownOpen(false)
  }
@ -110,7 +115,10 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
      spacing={0}
      cursor="text"
    >
-      <ToolBar onVariablesButtonClick={() => setIsVariableDropdownOpen(true)} />
+      <ToolBar
+        editor={editor}
+        onVariablesButtonClick={() => setIsVariableDropdownOpen(true)}
+      />
      <Plate
        id={randomEditorId}
        editableProps={{
--- a/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/ToolBar.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/ToolBar.tsx
@ -4,18 +4,24 @@ import {
  MARK_ITALIC,
  MARK_UNDERLINE,
 } from '@udecode/plate-basic-marks'
-import { usePlateEditorRef, getPluginType } from '@udecode/plate-core'
+import { getPluginType, PlateEditor, Value } from '@udecode/plate-core'
 import { LinkToolbarButton } from '@udecode/plate-ui-link'
 import { MarkToolbarButton } from '@udecode/plate-ui-toolbar'
 import { BoldIcon, ItalicIcon, UnderlineIcon, LinkIcon } from 'assets/icons'

-type Props = { onVariablesButtonClick: () => void } & StackProps
-export const ToolBar = (props: Props) => {
-  const editor = usePlateEditorRef()
+type Props = {
+  editor: PlateEditor<Value>
+  onVariablesButtonClick: () => void
+} & StackProps

+export const ToolBar = ({
+  editor,
+  onVariablesButtonClick,
+  ...props
+}: Props) => {
  const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
    e.preventDefault()
-    props.onVariablesButtonClick()
+    onVariablesButtonClick()
  }
  return (
    <HStack
--- a/apps/builder/components/shared/TypebotHeader/CollaborationMenuButton/CollaboratorButton.tsx
+++ b/apps/builder/components/shared/TypebotHeader/CollaborationMenuButton/CollaboratorButton.tsx
@ -88,7 +88,11 @@ export const CollaboratorIdentityContent = ({
            {name}
          </Text>
        )}
-        <Text color="gray.500" fontSize={name ? '14px' : 'inherit'} isTruncated>
+        <Text
+          color="gray.500"
+          fontSize={name ? '14px' : 'inherit'}
+          noOfLines={0}
+        >
          {email}
        </Text>
      </Stack>
--- a/apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx
+++ b/apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx
@ -18,7 +18,7 @@ export const EditableTypebotName = ({ name, onNewName }: EditableProps) => {
    <Tooltip label="Rename">
      <Editable value={localName} onChange={setLocalName} onSubmit={onNewName}>
        <EditablePreview
-          isTruncated
+          noOfLines={0}
          cursor="pointer"
          maxW="200px"
          overflow="hidden"