📦 Upgrade packages

2022-11-02 19:45:46 +01:00
parent 48285479cc
commit 2c66c59dfc
64 changed files with 2518 additions and 3158 deletions
--- a/apps/builder/components/auth/AuthSwitcher.tsx
+++ b/apps/builder/components/auth/AuthSwitcher.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { NextChakraLink } from '../nextChakra/NextChakraLink'
 import { Text } from '@chakra-ui/react'
+import { TextLink } from 'components/shared/TextLink'

 type Props = {
  type: 'register' | 'signin'
@@ -10,16 +10,11 @@ export const AuthSwitcher = ({ type }: Props) => (
    {type === 'signin' ? (
      <Text>
        Don't have an account?{' '}
-        <NextChakraLink href="/register" color="blue.500" textDecor="underline">
-          Sign up for free
-        </NextChakraLink>
+        <TextLink href="/register">Sign up for free</TextLink>
      </Text>
    ) : (
      <Text>
-        Already have an account?{' '}
-        <NextChakraLink href="/signin" color="blue.500" textDecor="underline">
-          Sign in
-        </NextChakraLink>
+        Already have an account? <TextLink href="/signin">Sign in</TextLink>
      </Text>
    )}
  </>
--- a/apps/builder/components/auth/SignInForm.tsx
+++ b/apps/builder/components/auth/SignInForm.tsx
@@ -19,9 +19,9 @@ import {
 import { DividerWithText } from './DividerWithText'
 import { SocialLoginButtons } from './SocialLoginButtons'
 import { useRouter } from 'next/router'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { BuiltInProviderType } from 'next-auth/providers'
 import { useToast } from 'components/shared/hooks/useToast'
+import { TextLink } from 'components/shared/TextLink'

 type Props = {
  defaultEmail?: string
@@ -76,14 +76,12 @@ export const SignInForm = ({
    return (
      <Text>
        You need to{' '}
-        <NextChakraLink
+        <TextLink
          href="https://docs.typebot.io/self-hosting/configuration"
          isExternal
-          color="blue.400"
-          textDecor="underline"
        >
          configure at least one auth provider
-        </NextChakraLink>{' '}
+        </TextLink>{' '}
        (Email, Google, GitHub, Facebook or Azure AD).
      </Text>
    )
--- a/apps/builder/components/dashboard/DashboardHeader.tsx
+++ b/apps/builder/components/dashboard/DashboardHeader.tsx
@@ -12,7 +12,6 @@ import {
  useDisclosure,
 } from '@chakra-ui/react'
 import { TypebotLogo } from 'assets/logos'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import {
  ChevronLeftIcon,
  HardDriveIcon,
@@ -27,6 +26,7 @@ import { EmojiOrImageIcon } from 'components/shared/EmojiOrImageIcon'
 import { WorkspaceSettingsModal } from './WorkspaceSettingsModal'
 import { isNotDefined } from 'utils'
 import { PlanTag } from 'components/shared/PlanTag'
+import Link from 'next/link'

 export const DashboardHeader = () => {
  const { user } = useUser()
@@ -52,13 +52,9 @@ export const DashboardHeader = () => {
        maxW="1000px"
        flex="1"
      >
-        <NextChakraLink
-          className="w-24"
-          href="/typebots"
-          data-testid="typebot-logo"
-        >
+        <Link href="/typebots" data-testid="typebot-logo">
          <TypebotLogo w="30px" />
-        </NextChakraLink>
+        </Link>
        <HStack>
          {user && workspace && (
            <WorkspaceSettingsModal
--- a/apps/builder/components/dashboard/FolderContent/BackButton.tsx
+++ b/apps/builder/components/dashboard/FolderContent/BackButton.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@chakra-ui/react'
 import { ChevronLeftIcon } from 'assets/icons'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
+import Link from 'next/link'
 import React, { useMemo } from 'react'

 export const BackButton = ({ id }: { id: string | null }) => {
@@ -17,7 +17,7 @@ export const BackButton = ({ id }: { id: string | null }) => {
  const handleMouseLeave = () => setMouseOverFolderId(undefined)
  return (
    <Button
-      as={NextChakraLink}
+      as={Link}
      href={id ? `/typebots/folders/${id}` : '/typebots'}
      leftIcon={<ChevronLeftIcon />}
      variant={'outline'}
--- a/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/BillingContent.tsx
+++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/BillingContent.tsx
@@ -1,7 +1,7 @@
 import { HStack, Stack, Text } from '@chakra-ui/react'
 import { StripeClimateLogo } from 'assets/logos/StripeClimateLogo'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { ChangePlanForm } from 'components/shared/ChangePlanForm'
+import { TextLink } from 'components/shared/TextLink'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
 import React from 'react'
@@ -33,13 +33,9 @@ export const BillingContent = () => {
          <Text fontSize="xs" color="gray.500">
            Typebot is contributing 1% of your subscription to remove CO₂ from
            the atmosphere.{' '}
-            <NextChakraLink
-              href="https://climate.stripe.com/5VCRAq"
-              isExternal
-              textDecor="underline"
-            >
+            <TextLink href="https://climate.stripe.com/5VCRAq" isExternal>
              More info.
-            </NextChakraLink>
+            </TextLink>
          </Text>
        </HStack>
        {workspace.plan !== Plan.CUSTOM &&
--- a/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/InvoicesList.tsx
+++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/InvoicesList.tsx
@@ -14,8 +14,8 @@ import {
  Text,
 } from '@chakra-ui/react'
 import { DownloadIcon, FileIcon } from 'assets/icons'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { Workspace } from 'db'
+import Link from 'next/link'
 import React from 'react'
 import { useInvoicesQuery } from './queries/useInvoicesQuery'

@@ -54,12 +54,12 @@ export const InvoicesList = ({ workspace }: Props) => {
                  <Td>{getFormattedPrice(invoice.amount, invoice.currency)}</Td>
                  <Td>
                    <IconButton
-                      as={NextChakraLink}
+                      as={Link}
                      size="xs"
                      icon={<DownloadIcon />}
                      variant="outline"
                      href={invoice.url}
-                      isExternal
+                      target="_blank"
                      aria-label={'Download invoice'}
                    />
                  </Td>
--- a/apps/builder/components/nextChakra/NextChakraLink.tsx
+++ b/apps/builder/components/nextChakra/NextChakraLink.tsx
@@ -1,47 +0,0 @@
-import { PropsWithChildren } from 'react'
-import NextLink from 'next/link'
-import { LinkProps as NextLinkProps } from 'next/dist/client/link'
-import {
-  Link as ChakraLink,
-  LinkProps as ChakraLinkProps,
-} from '@chakra-ui/react'
-import React from 'react'
-
-export type NextChakraLinkProps = PropsWithChildren<
-  NextLinkProps & Omit<ChakraLinkProps, 'href'>
->
-
-export const NextChakraLink = React.forwardRef<
-  HTMLAnchorElement,
-  NextChakraLinkProps
->(
-  (
-    {
-      href,
-      replace,
-      scroll,
-      shallow,
-      prefetch,
-      children,
-      locale,
-      ...chakraProps
-    },
-    ref
-  ) => {
-    return (
-      <NextLink
-        passHref={true}
-        href={href}
-        replace={replace}
-        scroll={scroll}
-        shallow={shallow}
-        prefetch={prefetch}
-        locale={locale}
-      >
-        <ChakraLink ref={ref} {...chakraProps}>
-          {children}
-        </ChakraLink>
-      </NextLink>
-    )
-  }
-)
--- a/apps/builder/components/results/ResultsTable/ResultsTable.tsx
+++ b/apps/builder/components/results/ResultsTable/ResultsTable.tsx
@@ -248,10 +248,9 @@ const IndeterminateCheckbox = React.forwardRef(
    const resolvedRef: any = ref || defaultRef

    return (
-      <Flex justify="center" data-testid="checkbox">
+      <Flex justify="center" data-testid="checkbox" {...rest}>
        <Checkbox
          ref={resolvedRef}
-          {...rest}
          isIndeterminate={indeterminate}
          isChecked={checked}
        />
--- a/apps/builder/components/shared/ChangePlanForm/ChangePlanForm.tsx
+++ b/apps/builder/components/shared/ChangePlanForm/ChangePlanForm.tsx
@@ -1,9 +1,9 @@
 import { Stack, HStack, Text } from '@chakra-ui/react'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useUser } from 'contexts/UserContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
 import { useToast } from '../hooks/useToast'
+import { TextLink } from '../TextLink'
 import { ProPlanContent } from './ProPlanContent'
 import { pay } from './queries/updatePlan'
 import { useCurrentSubscriptionInfo } from './queries/useCurrentSubscriptionInfo'
@@ -89,13 +89,9 @@ export const ChangePlanForm = () => {
      </HStack>
      <Text color="gray.500">
        Need custom limits? Specific features?{' '}
-        <NextChakraLink
-          href={'https://typebot.io/enterprise-lead-form'}
-          isExternal
-          textDecor="underline"
-        >
+        <TextLink href={'https://typebot.io/enterprise-lead-form'} isExternal>
          Let's chat!
-        </NextChakraLink>
+        </TextLink>
      </Text>
    </Stack>
  )
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsConnectModal.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsConnectModal.tsx
@@ -13,9 +13,9 @@ import {
  Flex,
 } from '@chakra-ui/react'
 import { GoogleLogo } from 'assets/logos'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { Info } from 'components/shared/Info'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import Link from 'next/link'
 import React from 'react'
 import { getGoogleSheetsConsentScreenUrl } from 'services/integrations'

@@ -53,7 +53,7 @@ export const GoogleSheetConnectModal = ({
          />
          <Flex>
            <Button
-              as={NextChakraLink}
+              as={Link}
              leftIcon={<GoogleLogo />}
              data-testid="google"
              isLoading={['loading', 'authenticated'].includes(status)}
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/PaymentSettings/StripeConfigModal.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/PaymentSettings/StripeConfigModal.tsx
@@ -18,12 +18,11 @@ import { CredentialsType, StripeCredentialsData } from 'models'
 import React, { useState } from 'react'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Input } from 'components/shared/Textbox'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { MoreInfoTooltip } from 'components/shared/MoreInfoTooltip'
-import { ExternalLinkIcon } from 'assets/icons'
 import { createCredentials } from 'services/credentials'
 import { omit } from 'utils'
 import { useToast } from 'components/shared/hooks/useToast'
+import { TextLink } from 'components/shared/TextLink'

 type Props = {
  isOpen: boolean
@@ -157,13 +156,9 @@ export const StripeConfigModal = ({

            <Text>
              (You can find your keys{' '}
-              <NextChakraLink
-                href="https://dashboard.stripe.com/apikeys"
-                isExternal
-                textDecor="underline"
-              >
-                here <ExternalLinkIcon />
-              </NextChakraLink>
+              <TextLink href="https://dashboard.stripe.com/apikeys" isExternal>
+                here
+              </TextLink>
              )
            </Text>
          </Stack>
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/TypebotLinkSettingsForm/TypebotsDropdown.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/TypebotLinkSettingsForm/TypebotsDropdown.tsx
@@ -1,8 +1,8 @@
 import { HStack, IconButton, Input } from '@chakra-ui/react'
 import { ExternalLinkIcon } from 'assets/icons'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useToast } from 'components/shared/hooks/useToast'
 import { SearchableDropdown } from 'components/shared/SearchableDropdown'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { useTypebots } from 'services/typebots'
@@ -54,7 +54,7 @@ export const TypebotsDropdown = ({
        <IconButton
          aria-label="Navigate to typebot"
          icon={<ExternalLinkIcon />}
-          as={NextChakraLink}
+          as={Link}
          href={`/typebots/${currentTypebot?.id}/edit?parentId=${query.typebotId}`}
        />
      )}
--- a/apps/builder/components/shared/TextLink.tsx
+++ b/apps/builder/components/shared/TextLink.tsx
@@ -0,0 +1,37 @@
+import Link, { LinkProps } from 'next/link'
+import React from 'react'
+import { chakra, HStack, TextProps } from '@chakra-ui/react'
+import { ExternalLinkIcon } from 'assets/icons'
+
+type TextLinkProps = LinkProps & TextProps & { isExternal?: boolean }
+
+export const TextLink = ({
+  children,
+  href,
+  shallow,
+  replace,
+  scroll,
+  prefetch,
+  isExternal,
+  ...textProps
+}: TextLinkProps) => (
+  <Link
+    href={href}
+    shallow={shallow}
+    replace={replace}
+    scroll={scroll}
+    prefetch={prefetch}
+    target={isExternal ? '_blank' : undefined}
+  >
+    <chakra.span textDecor="underline" display="inline-block" {...textProps}>
+      {isExternal ? (
+        <HStack spacing={1}>
+          <chakra.span>{children}</chakra.span>
+          <ExternalLinkIcon />
+        </HStack>
+      ) : (
+        children
+      )}
+    </chakra.span>
+  </Link>
+)
--- a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
+++ b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
@@ -8,7 +8,6 @@ import {
  Text,
 } from '@chakra-ui/react'
 import { BuoyIcon, ChevronLeftIcon, RedoIcon, UndoIcon } from 'assets/icons'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { RightPanel, useEditor } from 'contexts/EditorContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useRouter } from 'next/router'
@@ -20,6 +19,7 @@ import { CollaborationMenuButton } from './CollaborationMenuButton'
 import { EditableTypebotName } from './EditableTypebotName'
 import { getBubbleActions } from 'typebot-js'
 import { isCloudProdInstance } from 'services/utils'
+import Link from 'next/link'

 export const headerHeight = 56

@@ -71,7 +71,7 @@ export const TypebotHeader = () => {
        right={{ base: 280, xl: 0 }}
      >
        <Button
-          as={NextChakraLink}
+          as={Link}
          href={`/typebots/${typebot?.id}/edit`}
          colorScheme={router.pathname.includes('/edit') ? 'blue' : 'gray'}
          variant={router.pathname.includes('/edit') ? 'outline' : 'ghost'}
@@ -80,7 +80,7 @@ export const TypebotHeader = () => {
          Flow
        </Button>
        <Button
-          as={NextChakraLink}
+          as={Link}
          href={`/typebots/${typebot?.id}/theme`}
          colorScheme={router.pathname.endsWith('theme') ? 'blue' : 'gray'}
          variant={router.pathname.endsWith('theme') ? 'outline' : 'ghost'}
@@ -89,7 +89,7 @@ export const TypebotHeader = () => {
          Theme
        </Button>
        <Button
-          as={NextChakraLink}
+          as={Link}
          href={`/typebots/${typebot?.id}/settings`}
          colorScheme={router.pathname.endsWith('settings') ? 'blue' : 'gray'}
          variant={router.pathname.endsWith('settings') ? 'outline' : 'ghost'}
@@ -98,7 +98,7 @@ export const TypebotHeader = () => {
          Settings
        </Button>
        <Button
-          as={NextChakraLink}
+          as={Link}
          href={`/typebots/${typebot?.id}/share`}
          colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
          variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
@@ -108,7 +108,7 @@ export const TypebotHeader = () => {
        </Button>
        {typebot?.publishedTypebotId && (
          <Button
-            as={NextChakraLink}
+            as={Link}
            href={`/typebots/${typebot?.id}/results`}
            colorScheme={router.pathname.includes('results') ? 'blue' : 'gray'}
            variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
@@ -127,7 +127,7 @@ export const TypebotHeader = () => {
      >
        <HStack alignItems="center" spacing={3}>
          <IconButton
-            as={NextChakraLink}
+            as={Link}
            aria-label="Navigate back"
            icon={<ChevronLeftIcon fontSize={25} />}
            href={