From e293cb011174aa170ee136c8a1b476bfc98e797c Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Sat, 15 Jul 2023 12:26:12 +0200 Subject: [PATCH] :sparkles: Add Next.js embed library --- .github/workflows/publish-typebot-nextjs.yml | 18 ++ apps/builder/package.json | 3 +- apps/builder/src/components/SupportBubble.tsx | 3 +- .../dashboard/components/OnboardingModal.tsx | 2 +- .../preview/components/WebPreview.tsx | 2 +- .../publish/components/embeds/EmbedButton.tsx | 10 + .../components/embeds/logos/NextjsLogo.tsx | 62 ++++ .../instructions/GtmBubbleInstructions.tsx | 2 +- .../Javascript/JavascriptBubbleSnippet.tsx | 2 +- .../Javascript/JavascriptPopupSnippet.tsx | 2 +- .../JavascriptBubbleInstructions.tsx | 2 +- .../Nextjs/InstallNextjsPackageSnippet.tsx | 11 + .../modals/Nextjs/NextjsBubbleSnippet.tsx | 31 ++ .../embeds/modals/Nextjs/NextjsModal.tsx | 25 ++ .../modals/Nextjs/NextjsPopupSnippet.tsx | 29 ++ .../modals/Nextjs/NextjsStandardSnippet.tsx | 28 ++ .../instructions/NextjsBubbleInstructions.tsx | 42 +++ .../instructions/NextjsInstructions.tsx | 21 ++ .../instructions/NextjsPopupInstructions.tsx | 30 ++ .../NextjsStandardInstructions.tsx | 36 +++ .../React/InstallReactPackageSnippet.tsx | 2 +- .../modals/React/ReactBubbleSnippet.tsx | 2 +- .../embeds/modals/React/ReactPopupSnippet.tsx | 2 +- .../instructions/ReactBubbleInstructions.tsx | 2 +- .../instructions/ScriptBubbleInstructions.tsx | 2 +- .../ShopifyBubbleInstructions.tsx | 2 +- .../WebflowBubbleInstructions.tsx | 2 +- .../instructions/WixBubbleInstructions.tsx | 2 +- .../WordpressBubbleInstructions.tsx | 2 +- .../BubbleSettings/BubbleSettings.tsx | 2 +- .../BubbleSettings/ButtonThemeSettings.tsx | 2 +- .../BubbleSettings/PreviewMessageSettings.tsx | 2 +- .../PreviewMessageThemeSettings.tsx | 2 +- .../settings/BubbleSettings/ThemeSettings.tsx | 4 +- .../embeds/settings/PopupSettings.tsx | 2 +- .../embeds/snippetParsers/bubble.ts | 2 +- .../components/embeds/snippetParsers/popup.ts | 2 +- .../embeds/snippetParsers/shared.ts | 4 +- .../embeds/snippetParsers/standard.ts | 2 +- .../settings/components/SettingsPage.tsx | 2 +- .../templates/components/TemplatesModal.tsx | 2 +- .../features/theme/components/ThemePage.tsx | 2 +- apps/docs/docs/embed/html-javascript.md | 8 +- apps/docs/docs/embed/react.md | 4 +- apps/docs/docs/embed/webflow.md | 2 +- .../Homepage/IntroducingChatApps.tsx | 2 +- .../components/Homepage/RealTimeResults.tsx | 2 +- apps/landing-page/package.json | 3 +- apps/viewer/package.json | 3 +- apps/viewer/src/components/TypebotPageV3.tsx | 2 +- packages/embeds/js/README.md | 8 +- packages/embeds/js/package.json | 2 +- packages/embeds/js/src/index.ts | 2 + packages/embeds/nextjs/.eslintrc.cjs | 8 + packages/embeds/nextjs/.npmignore | 5 + packages/embeds/nextjs/.npmrc | 1 + packages/embeds/nextjs/README.md | 144 +++++++++ packages/embeds/nextjs/package.json | 45 +++ packages/embeds/nextjs/rollup.config.js | 38 +++ packages/embeds/nextjs/src/index.ts | 16 + packages/embeds/nextjs/tsconfig.json | 14 + packages/embeds/react/README.md | 18 +- packages/embeds/react/package.json | 16 +- packages/embeds/react/rollup.config.js | 6 +- packages/embeds/react/src/Bubble.tsx | 19 +- packages/embeds/react/src/Popup.tsx | 19 +- packages/embeds/react/src/Standard.tsx | 11 +- packages/embeds/react/src/index.ts | 1 + .../trunk/public/class-typebot-public.php | 4 +- pnpm-lock.yaml | 299 +++++++++++++----- 70 files changed, 918 insertions(+), 193 deletions(-) create mode 100644 .github/workflows/publish-typebot-nextjs.yml create mode 100644 apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/InstallNextjsPackageSnippet.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsBubbleSnippet.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsModal.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsPopupSnippet.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsStandardSnippet.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsInstructions.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsPopupInstructions.tsx create mode 100644 apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsStandardInstructions.tsx create mode 100644 packages/embeds/nextjs/.eslintrc.cjs create mode 100644 packages/embeds/nextjs/.npmignore create mode 100644 packages/embeds/nextjs/.npmrc create mode 100644 packages/embeds/nextjs/README.md create mode 100644 packages/embeds/nextjs/package.json create mode 100644 packages/embeds/nextjs/rollup.config.js create mode 100644 packages/embeds/nextjs/src/index.ts create mode 100644 packages/embeds/nextjs/tsconfig.json diff --git a/.github/workflows/publish-typebot-nextjs.yml b/.github/workflows/publish-typebot-nextjs.yml new file mode 100644 index 000000000..84cb378cc --- /dev/null +++ b/.github/workflows/publish-typebot-nextjs.yml @@ -0,0 +1,18 @@ +name: Publish @typebot.io/nextjs package to NPM + +on: + push: + tags: + - 'nextjs-v*' + +jobs: + publish: + runs-on: ubuntu-latest + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + steps: + - uses: actions/checkout@v2 + - uses: pnpm/action-setup@v2.2.2 + - run: pnpm i --frozen-lockfile + - run: pnpm turbo build --filter=@typebot.io/nextjs... + - run: cd packages/embeds/nextjs && pnpm publish --no-git-checks --access public diff --git a/apps/builder/package.json b/apps/builder/package.json index 8b0b53b10..f37fefb76 100644 --- a/apps/builder/package.json +++ b/apps/builder/package.json @@ -36,8 +36,7 @@ "@trpc/react-query": "10.34.0", "@trpc/server": "10.34.0", "@typebot.io/emails": "workspace:*", - "@typebot.io/js": "workspace:*", - "@typebot.io/react": "workspace:*", + "@typebot.io/nextjs": "workspace:*", "@udecode/plate-basic-marks": "21.1.5", "@udecode/plate-common": "^21.1.5", "@udecode/plate-core": "21.1.5", diff --git a/apps/builder/src/components/SupportBubble.tsx b/apps/builder/src/components/SupportBubble.tsx index 1bd37044c..0bd5536ae 100644 --- a/apps/builder/src/components/SupportBubble.tsx +++ b/apps/builder/src/components/SupportBubble.tsx @@ -2,9 +2,8 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { useUser } from '@/features/account/hooks/useUser' import { useWorkspace } from '@/features/workspace/WorkspaceProvider' import React from 'react' -import { Bubble } from '@typebot.io/react' +import { Bubble, BubbleProps } from '@typebot.io/nextjs' import { planToReadable } from '@/features/billing/helpers/planToReadable' -import { BubbleProps } from '@typebot.io/js' export const SupportBubble = (props: Omit) => { const { typebot } = useTypebot() diff --git a/apps/builder/src/features/dashboard/components/OnboardingModal.tsx b/apps/builder/src/features/dashboard/components/OnboardingModal.tsx index fd834608a..8d9ccee12 100644 --- a/apps/builder/src/features/dashboard/components/OnboardingModal.tsx +++ b/apps/builder/src/features/dashboard/components/OnboardingModal.tsx @@ -1,5 +1,5 @@ import { chakra, useColorModeValue } from '@chakra-ui/react' -import { Popup } from '@typebot.io/react' +import { Popup } from '@typebot.io/nextjs' import { useUser } from '@/features/account/hooks/useUser' import { Typebot } from '@typebot.io/schemas' import React, { useEffect, useRef, useState } from 'react' diff --git a/apps/builder/src/features/preview/components/WebPreview.tsx b/apps/builder/src/features/preview/components/WebPreview.tsx index daa3a4f31..406e1457e 100644 --- a/apps/builder/src/features/preview/components/WebPreview.tsx +++ b/apps/builder/src/features/preview/components/WebPreview.tsx @@ -3,7 +3,7 @@ import { useEditor } from '@/features/editor/providers/EditorProvider' import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { useGraph } from '@/features/graph/providers/GraphProvider' import { useToast } from '@/hooks/useToast' -import { Standard } from '@typebot.io/react' +import { Standard } from '@typebot.io/nextjs' import { ChatReply } from '@typebot.io/schemas' export const WebPreview = () => { diff --git a/apps/builder/src/features/publish/components/embeds/EmbedButton.tsx b/apps/builder/src/features/publish/components/embeds/EmbedButton.tsx index 6242dbe7e..2181dc3ab 100644 --- a/apps/builder/src/features/publish/components/embeds/EmbedButton.tsx +++ b/apps/builder/src/features/publish/components/embeds/EmbedButton.tsx @@ -37,6 +37,8 @@ import { ApiModal } from './modals/ApiModal' import { ScriptIcon } from '@/features/blocks/logic/script/components/ScriptIcon' import { FlutterFlowLogo } from './logos/FlutterFlowLogo' import { FlutterFlowModal } from './modals/FlutterFlowModal' +import { NextjsLogo } from './logos/NextjsLogo' +import { NextjsModal } from './modals/Nextjs/NextjsModal' export type ModalProps = { publicId: string @@ -125,6 +127,14 @@ export const integrationsList = [ {...props} /> ), + (props: Pick) => ( + } + label="Nextjs" + Modal={NextjsModal} + {...props} + /> + ), (props: Pick) => ( } diff --git a/apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx b/apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx new file mode 100644 index 000000000..8c519a223 --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/logos/NextjsLogo.tsx @@ -0,0 +1,62 @@ +import { Icon, IconProps } from '@chakra-ui/react' + +export const NextjsLogo = (props: IconProps) => ( + + + + + + + + + + + + + + + + + + + + +) diff --git a/apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx index 49fd2f6b6..8afaed449 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/GtmModal/instructions/GtmBubbleInstructions.tsx @@ -1,6 +1,6 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { OrderedList, ListItem, Stack, Text, Code } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { useState } from 'react' import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions' diff --git a/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx index 9ecc14d4e..a63be8980 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptBubbleSnippet.tsx @@ -7,7 +7,7 @@ import { } from '../../snippetParsers' import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { CodeEditor } from '@/components/inputs/CodeEditor' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' type Props = Pick diff --git a/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx index ad04a19e4..821bae286 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/Javascript/JavascriptPopupSnippet.tsx @@ -7,7 +7,7 @@ import { typebotImportCode, } from '../../snippetParsers' import { CodeEditor } from '@/components/inputs/CodeEditor' -import { PopupProps } from '@typebot.io/js' +import { PopupProps } from '@typebot.io/nextjs' type Props = Pick diff --git a/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx index 5bbcb1021..212a32eb0 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx @@ -1,6 +1,6 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { Stack, Code, Text } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { Typebot } from '@typebot.io/schemas' import { useState } from 'react' import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/InstallNextjsPackageSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/InstallNextjsPackageSnippet.tsx new file mode 100644 index 000000000..7489df4bc --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/InstallNextjsPackageSnippet.tsx @@ -0,0 +1,11 @@ +import { CodeEditor } from '@/components/inputs/CodeEditor' + +export const InstallNextjsPackageSnippet = () => { + return ( + + ) +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsBubbleSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsBubbleSnippet.tsx new file mode 100644 index 000000000..683bfa42c --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsBubbleSnippet.tsx @@ -0,0 +1,31 @@ +import { CodeEditor } from '@/components/inputs/CodeEditor' +import { useTypebot } from '@/features/editor/providers/TypebotProvider' +import { BubbleProps } from '@typebot.io/nextjs' +import parserBabel from 'prettier/parser-babel' +import prettier from 'prettier/standalone' +import { parseReactBubbleProps } from '../../snippetParsers' + +export const NextjsBubbleSnippet = ({ + theme, + previewMessage, +}: Pick) => { + const { typebot } = useTypebot() + + const snippet = prettier.format( + `import { Bubble } from "@typebot.io/nextjs"; + + const App = () => { + return + }`, + { + parser: 'babel', + plugins: [parserBabel], + } + ) + + return +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsModal.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsModal.tsx new file mode 100644 index 000000000..ab005fa4d --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsModal.tsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react' +import { ModalProps } from '../../EmbedButton' +import { EmbedModal } from '../../EmbedModal' +import { isDefined } from '@udecode/plate-common' +import { NextjsInstructions } from './instructions/NextjsInstructions' + +export const NextjsModal = ({ isOpen, onClose, isPublished }: ModalProps) => { + const [selectedEmbedType, setSelectedEmbedType] = useState< + 'standard' | 'popup' | 'bubble' | undefined + >() + return ( + + {isDefined(selectedEmbedType) && ( + + )} + + ) +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsPopupSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsPopupSnippet.tsx new file mode 100644 index 000000000..f65601a12 --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsPopupSnippet.tsx @@ -0,0 +1,29 @@ +import { CodeEditor } from '@/components/inputs/CodeEditor' +import { useTypebot } from '@/features/editor/providers/TypebotProvider' +import { PopupProps } from '@typebot.io/nextjs' +import parserBabel from 'prettier/parser-babel' +import prettier from 'prettier/standalone' +import { parseReactPopupProps } from '../../snippetParsers' + +export const NextjsPopupSnippet = ({ + autoShowDelay, +}: Pick) => { + const { typebot } = useTypebot() + + const snippet = prettier.format( + `import { Popup } from "@typebot.io/nextjs"; + + const App = () => { + return ; + }`, + { + parser: 'babel', + plugins: [parserBabel], + } + ) + + return +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsStandardSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsStandardSnippet.tsx new file mode 100644 index 000000000..c3cff4a21 --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/NextjsStandardSnippet.tsx @@ -0,0 +1,28 @@ +import { CodeEditor } from '@/components/inputs/CodeEditor' +import { useTypebot } from '@/features/editor/providers/TypebotProvider' +import parserBabel from 'prettier/parser-babel' +import prettier from 'prettier/standalone' +import { parseReactBotProps } from '../../snippetParsers' + +type Props = { widthLabel?: string; heightLabel: string } + +export const NextjsStandardSnippet = ({ + widthLabel, + heightLabel, +}: Props) => { + const { typebot } = useTypebot() + const snippet = prettier.format( + `import { Standard } from "@typebot.io/nextjs"; + + const App = () => { + return + }`, + { + parser: 'babel', + plugins: [parserBabel], + } + ) + return +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx new file mode 100644 index 000000000..42f4e7d37 --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsBubbleInstructions.tsx @@ -0,0 +1,42 @@ +import { useTypebot } from '@/features/editor/providers/TypebotProvider' +import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react' +import { BubbleProps } from '@typebot.io/nextjs' +import { useState } from 'react' +import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' +import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet' +import { NextjsBubbleSnippet } from '../NextjsBubbleSnippet' +import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions' + +export const NextjsBubbleInstructions = () => { + const { typebot } = useTypebot() + const [theme, setTheme] = useState( + parseDefaultBubbleTheme(typebot) + ) + const [previewMessage, setPreviewMessage] = + useState() + + return ( + + + + Install the packages + + + + + + + + + + + ) +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsInstructions.tsx new file mode 100644 index 000000000..da88221a2 --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsInstructions.tsx @@ -0,0 +1,21 @@ +import { NextjsBubbleInstructions } from './NextjsBubbleInstructions' +import { NextjsPopupInstructions } from './NextjsPopupInstructions' +import { NextjsStandardInstructions } from './NextjsStandardInstructions' + +type Props = { + type: 'standard' | 'popup' | 'bubble' +} + +export const NextjsInstructions = ({ type }: Props) => { + switch (type) { + case 'standard': { + return + } + case 'popup': { + return + } + case 'bubble': { + return + } + } +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsPopupInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsPopupInstructions.tsx new file mode 100644 index 000000000..3b09c86ff --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsPopupInstructions.tsx @@ -0,0 +1,30 @@ +import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react' +import { useState } from 'react' +import { PopupSettings } from '../../../settings/PopupSettings' +import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet' +import { NextjsPopupSnippet } from '../NextjsPopupSnippet' + +export const NextjsPopupInstructions = () => { + const [inputValue, setInputValue] = useState() + + return ( + + + + Install the packages + + + + + + + setInputValue(settings.autoShowDelay) + } + /> + + + + + ) +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsStandardInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsStandardInstructions.tsx new file mode 100644 index 000000000..ac69a5880 --- /dev/null +++ b/apps/builder/src/features/publish/components/embeds/modals/Nextjs/instructions/NextjsStandardInstructions.tsx @@ -0,0 +1,36 @@ +import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react' +import { useState } from 'react' +import { StandardSettings } from '../../../settings/StandardSettings' +import { InstallNextjsPackageSnippet } from '../InstallNextjsPackageSnippet' +import { NextjsStandardSnippet } from '../NextjsStandardSnippet' + +export const NextjsStandardInstructions = () => { + const [inputValues, setInputValues] = useState<{ + widthLabel?: string + heightLabel: string + }>({ + heightLabel: '100%', + widthLabel: '100%', + }) + + return ( + + + + Install the packages + + + + + + + setInputValues({ ...settings }) + } + /> + + + + + ) +} diff --git a/apps/builder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx index 74d85b45a..a026c2cb8 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx @@ -3,7 +3,7 @@ import { CodeEditor } from '@/components/inputs/CodeEditor' export const InstallReactPackageSnippet = () => { return ( diff --git a/apps/builder/src/features/publish/components/embeds/modals/React/ReactBubbleSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/React/ReactBubbleSnippet.tsx index 91c844499..c3ae04924 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/React/ReactBubbleSnippet.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/React/ReactBubbleSnippet.tsx @@ -1,6 +1,6 @@ import { CodeEditor } from '@/components/inputs/CodeEditor' import { useTypebot } from '@/features/editor/providers/TypebotProvider' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import parserBabel from 'prettier/parser-babel' import prettier from 'prettier/standalone' import { parseReactBubbleProps } from '../../snippetParsers' diff --git a/apps/builder/src/features/publish/components/embeds/modals/React/ReactPopupSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/React/ReactPopupSnippet.tsx index 76ca72eb7..d7f3c0e23 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/React/ReactPopupSnippet.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/React/ReactPopupSnippet.tsx @@ -1,6 +1,6 @@ import { CodeEditor } from '@/components/inputs/CodeEditor' import { useTypebot } from '@/features/editor/providers/TypebotProvider' -import { PopupProps } from '@typebot.io/js' +import { PopupProps } from '@typebot.io/nextjs' import parserBabel from 'prettier/parser-babel' import prettier from 'prettier/standalone' import { parseReactPopupProps } from '../../snippetParsers' diff --git a/apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx index f51354a59..6aa80f159 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/React/instructions/ReactBubbleInstructions.tsx @@ -1,6 +1,6 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { ListItem, OrderedList, Stack, Text } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { useState } from 'react' import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' import { InstallReactPackageSnippet } from '../InstallReactPackageSnippet' diff --git a/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx index 18c8e0bb7..9f554a5fb 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx @@ -1,7 +1,7 @@ import { CodeEditor } from '@/components/inputs/CodeEditor' import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { Stack, Text } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { Typebot } from '@typebot.io/schemas' import { useState } from 'react' import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' diff --git a/apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx index 04613543a..0212be66c 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/ShopifyModal/instructions/ShopifyBubbleInstructions.tsx @@ -1,6 +1,6 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { OrderedList, ListItem, Stack, Text, Code } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { useState } from 'react' import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions' diff --git a/apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx index 0f8c44d17..76bee56a4 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/WebflowModal/instructions/WebflowBubbleInstructions.tsx @@ -1,6 +1,6 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { useState } from 'react' import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions' diff --git a/apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx index 660e06fd1..efcb8785b 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/WixModal/instructions/WixBubbleInstructions.tsx @@ -1,6 +1,6 @@ import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { OrderedList, ListItem, Code, Stack, Text } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { useState } from 'react' import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions' diff --git a/apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx index 5c1c98bbc..75567c2db 100644 --- a/apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx +++ b/apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressBubbleInstructions.tsx @@ -9,7 +9,7 @@ import { Stack, Text, } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { useState } from 'react' import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings' import { parseApiHostValue, parseInitBubbleCode } from '../../../snippetParsers' diff --git a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx index e615577f9..a84c41ba0 100644 --- a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx +++ b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx @@ -7,7 +7,7 @@ import { Image, chakra, } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { isDefined, isSvgSrc } from '@typebot.io/lib' import { PreviewMessageSettings } from './PreviewMessageSettings' import { ThemeSettings } from './ThemeSettings' diff --git a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx index a8dd6819f..942663384 100644 --- a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx +++ b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ButtonThemeSettings.tsx @@ -15,7 +15,7 @@ import { Stack, Text, } from '@chakra-ui/react' -import { ButtonTheme } from '@typebot.io/js/dist/features/bubble/types' +import { ButtonTheme } from '@typebot.io/nextjs' import React from 'react' type Props = { diff --git a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageSettings.tsx b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageSettings.tsx index 638a30495..53d809967 100644 --- a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageSettings.tsx +++ b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageSettings.tsx @@ -1,6 +1,6 @@ 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 { PreviewMessageParams } from '@typebot.io/nextjs' import { useState } from 'react' import { isDefined } from '@typebot.io/lib' diff --git a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageThemeSettings.tsx b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageThemeSettings.tsx index 4f459a154..d5eb9f843 100644 --- a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageThemeSettings.tsx +++ b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/PreviewMessageThemeSettings.tsx @@ -1,6 +1,6 @@ import { ColorPicker } from '@/components/ColorPicker' import { Heading, HStack, Stack, Text } from '@chakra-ui/react' -import { PreviewMessageTheme } from '@typebot.io/js/dist/features/bubble/types' +import { PreviewMessageTheme } from '@typebot.io/nextjs' import React from 'react' type Props = { diff --git a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ThemeSettings.tsx b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ThemeSettings.tsx index 1dce3146f..7f0499715 100644 --- a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ThemeSettings.tsx +++ b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/ThemeSettings.tsx @@ -13,12 +13,12 @@ import { Stack, Text, } from '@chakra-ui/react' -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import { BubbleTheme, ButtonTheme, PreviewMessageTheme, -} from '@typebot.io/js/dist/features/bubble/types' +} from '@typebot.io/nextjs' import { ButtonThemeSettings } from './ButtonThemeSettings' import { PreviewMessageThemeSettings } from './PreviewMessageThemeSettings' import { ChevronDownIcon } from '@/components/icons' diff --git a/apps/builder/src/features/publish/components/embeds/settings/PopupSettings.tsx b/apps/builder/src/features/publish/components/embeds/settings/PopupSettings.tsx index 0c69ea1c6..f28b810a1 100644 --- a/apps/builder/src/features/publish/components/embeds/settings/PopupSettings.tsx +++ b/apps/builder/src/features/publish/components/embeds/settings/PopupSettings.tsx @@ -7,7 +7,7 @@ import { HStack, Text, } from '@chakra-ui/react' -import { PopupProps } from '@typebot.io/js' +import { PopupProps } from '@typebot.io/nextjs' import { useState, useEffect } from 'react' import { isDefined } from '@typebot.io/lib' diff --git a/apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts b/apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts index 2e8bc1c25..6e0e10c6d 100644 --- a/apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts +++ b/apps/builder/src/features/publish/components/embeds/snippetParsers/bubble.ts @@ -1,4 +1,4 @@ -import { BubbleProps } from '@typebot.io/js' +import { BubbleProps } from '@typebot.io/nextjs' import parserBabel from 'prettier/parser-babel' import prettier from 'prettier/standalone' import { diff --git a/apps/builder/src/features/publish/components/embeds/snippetParsers/popup.ts b/apps/builder/src/features/publish/components/embeds/snippetParsers/popup.ts index 1845a6ef3..d6f7da0ac 100644 --- a/apps/builder/src/features/publish/components/embeds/snippetParsers/popup.ts +++ b/apps/builder/src/features/publish/components/embeds/snippetParsers/popup.ts @@ -1,4 +1,4 @@ -import { PopupProps } from '@typebot.io/js' +import { PopupProps } from '@typebot.io/nextjs' import parserBabel from 'prettier/parser-babel' import prettier from 'prettier/standalone' import { diff --git a/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts b/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts index 457f5a42f..f67fbaae2 100644 --- a/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts +++ b/apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts @@ -1,4 +1,4 @@ -import { BotProps } from '@typebot.io/js' +import { BotProps } from '@typebot.io/nextjs' import parserBabel from 'prettier/parser-babel' import prettier from 'prettier/standalone' import { env, getViewerUrl, isDefined } from '@typebot.io/lib' @@ -42,7 +42,7 @@ export const parseReactBotProps = ({ typebot, apiHost }: BotProps) => { } export const typebotImportCode = isCloudProdInstance - ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0/dist/web.js'` + ? `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.1/dist/web.js'` : `import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@${packageJson.version}/dist/web.js'` export const parseInlineScript = (script: string) => diff --git a/apps/builder/src/features/publish/components/embeds/snippetParsers/standard.ts b/apps/builder/src/features/publish/components/embeds/snippetParsers/standard.ts index bd69248dd..fb00a3a93 100644 --- a/apps/builder/src/features/publish/components/embeds/snippetParsers/standard.ts +++ b/apps/builder/src/features/publish/components/embeds/snippetParsers/standard.ts @@ -1,4 +1,4 @@ -import { BotProps } from '@typebot.io/js' +import { BotProps } from '@typebot.io/nextjs' import parserBabel from 'prettier/parser-babel' import prettier from 'prettier/standalone' import { parseBotProps } from './shared' diff --git a/apps/builder/src/features/settings/components/SettingsPage.tsx b/apps/builder/src/features/settings/components/SettingsPage.tsx index 49b6cda4a..1cb72b66a 100644 --- a/apps/builder/src/features/settings/components/SettingsPage.tsx +++ b/apps/builder/src/features/settings/components/SettingsPage.tsx @@ -1,6 +1,6 @@ import { Seo } from '@/components/Seo' import { Flex } from '@chakra-ui/react' -import { Standard } from '@typebot.io/react' +import { Standard } from '@typebot.io/nextjs' import { getViewerUrl } from '@typebot.io/lib' import { SettingsSideMenu } from './SettingsSideMenu' import { TypebotHeader } from '@/features/editor/components/TypebotHeader' diff --git a/apps/builder/src/features/templates/components/TemplatesModal.tsx b/apps/builder/src/features/templates/components/TemplatesModal.tsx index b9d6aa529..80283e109 100644 --- a/apps/builder/src/features/templates/components/TemplatesModal.tsx +++ b/apps/builder/src/features/templates/components/TemplatesModal.tsx @@ -12,7 +12,7 @@ import { chakra, useColorModeValue, } from '@chakra-ui/react' -import { Standard } from '@typebot.io/react' +import { Standard } from '@typebot.io/nextjs' import { Typebot } from '@typebot.io/schemas' import React, { useCallback, useEffect, useState } from 'react' import { templates } from '../data' diff --git a/apps/builder/src/features/theme/components/ThemePage.tsx b/apps/builder/src/features/theme/components/ThemePage.tsx index 9ac3091ab..e89e49d41 100644 --- a/apps/builder/src/features/theme/components/ThemePage.tsx +++ b/apps/builder/src/features/theme/components/ThemePage.tsx @@ -2,7 +2,7 @@ import { Seo } from '@/components/Seo' import { TypebotHeader } from '@/features/editor/components/TypebotHeader' import { useTypebot } from '@/features/editor/providers/TypebotProvider' import { Flex } from '@chakra-ui/react' -import { Standard } from '@typebot.io/react' +import { Standard } from '@typebot.io/nextjs' import { ThemeSideMenu } from './ThemeSideMenu' export const ThemePage = () => { diff --git a/apps/docs/docs/embed/html-javascript.md b/apps/docs/docs/embed/html-javascript.md index d0921e83f..dfb4956f7 100644 --- a/apps/docs/docs/embed/html-javascript.md +++ b/apps/docs/docs/embed/html-javascript.md @@ -12,7 +12,7 @@ There, you can change the container dimensions. Here is a code example: ```html