diff --git a/apps/builder/components/Seo.tsx b/apps/builder/components/Seo.tsx index 1d120f8f7..0a2d76906 100644 --- a/apps/builder/components/Seo.tsx +++ b/apps/builder/components/Seo.tsx @@ -10,24 +10,28 @@ export const Seo = ({ description?: string currentUrl?: string imagePreviewUrl?: string -}) => ( - - Typebot | {title} - - - +}) => { + const formattedTitle = `${title} | Typebot` - - + return ( + + {formattedTitle} + + + - - - + + - - + + + - - - -) + + + + + + + ) +} diff --git a/apps/builder/components/dashboard/DashboardHeader.tsx b/apps/builder/components/dashboard/DashboardHeader.tsx index 70acdca79..f4800c509 100644 --- a/apps/builder/components/dashboard/DashboardHeader.tsx +++ b/apps/builder/components/dashboard/DashboardHeader.tsx @@ -55,7 +55,7 @@ export const DashboardHeader = () => { @@ -92,12 +92,11 @@ export const DashboardHeader = () => { {workspace && ( <> - - {workspace.name} - - + + {workspace.name} + + - )} @@ -117,7 +116,7 @@ export const DashboardHeader = () => { defaultIcon={HardDriveIcon} /> {workspace.name} - + ))} diff --git a/apps/builder/components/settings/SettingsSideMenu.tsx b/apps/builder/components/settings/SettingsSideMenu.tsx index df45f9a14..f5dde1bc5 100644 --- a/apps/builder/components/settings/SettingsSideMenu.tsx +++ b/apps/builder/components/settings/SettingsSideMenu.tsx @@ -44,7 +44,7 @@ export const SettingsSideMenu = () => { Settings - + diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx index b9fddb102..ca5835c3e 100644 --- a/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx +++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx @@ -187,7 +187,7 @@ export const WebhookSettings = ({ items={Object.values(HttpMethod)} /> - + Query params @@ -274,7 +274,7 @@ export const WebhookSettings = ({ )} {(testResponse || options?.responseVariableMapping.length > 0) && ( - + Save in variables diff --git a/apps/builder/components/theme/ThemeSideMenu.tsx b/apps/builder/components/theme/ThemeSideMenu.tsx index 08a120c3e..c61ce69a5 100644 --- a/apps/builder/components/theme/ThemeSideMenu.tsx +++ b/apps/builder/components/theme/ThemeSideMenu.tsx @@ -43,7 +43,7 @@ export const ThemeSideMenu = () => { Customize the theme - + diff --git a/apps/builder/next.config.js b/apps/builder/next.config.js index 284c490c7..1ffc0f75b 100644 --- a/apps/builder/next.config.js +++ b/apps/builder/next.config.js @@ -1,7 +1,12 @@ /* eslint-disable @typescript-eslint/no-var-requires */ const { withSentryConfig } = require('@sentry/nextjs') const path = require('path') -const withTM = require('next-transpile-modules')(['utils', 'models', 'emails']) +const withTM = require('next-transpile-modules')([ + 'utils', + 'models', + 'emails', + 'bot-engine', +]) /** @type {import('next').NextConfig} */ const nextConfig = { diff --git a/apps/builder/playwright/tests/settings.spec.ts b/apps/builder/playwright/tests/settings.spec.ts index 50eb0a8e0..79a18a2bd 100644 --- a/apps/builder/playwright/tests/settings.spec.ts +++ b/apps/builder/playwright/tests/settings.spec.ts @@ -21,7 +21,6 @@ test.describe.parallel('Settings page', () => { await expect( typebotViewer(page).locator('a:has-text("Made with Typebot")') ).toHaveAttribute('href', 'https://www.typebot.io/?utm_source=litebadge') - await page.click('button:has-text("General")') await page.click('text="Typebot.io branding"') await expect( typebotViewer(page).locator('a:has-text("Made with Typebot")') diff --git a/apps/builder/playwright/tests/theme.spec.ts b/apps/builder/playwright/tests/theme.spec.ts index 9c70fb249..753bed1c2 100644 --- a/apps/builder/playwright/tests/theme.spec.ts +++ b/apps/builder/playwright/tests/theme.spec.ts @@ -26,7 +26,6 @@ test.describe.parallel('Theme page', () => { await expect( typebotViewer(page).locator('button >> text="Go"') ).toBeVisible() - await page.click('button:has-text("General")') // Font await page.fill('input[type="text"]', 'Roboto Slab') diff --git a/apps/builder/playwright/tests/workspaces.spec.ts b/apps/builder/playwright/tests/workspaces.spec.ts index b05e449ed..91f9dc0b1 100644 --- a/apps/builder/playwright/tests/workspaces.spec.ts +++ b/apps/builder/playwright/tests/workspaces.spec.ts @@ -81,6 +81,10 @@ test('can update workspace info', async ({ page }) => { await page.fill('input[placeholder="Search..."]', 'building') await page.click('text="🏦"') await page.fill('input[value="Pro workspace"]', 'My awesome workspace') + await page.getByTestId('typebot-logo').click({ force: true }) + await expect( + page.getByRole('button', { name: '🏦 My awesome workspace Pro' }) + ).toBeVisible() }) test('can manage members', async ({ page }) => { diff --git a/apps/viewer/next.config.js b/apps/viewer/next.config.js index 284c490c7..1ffc0f75b 100644 --- a/apps/viewer/next.config.js +++ b/apps/viewer/next.config.js @@ -1,7 +1,12 @@ /* eslint-disable @typescript-eslint/no-var-requires */ const { withSentryConfig } = require('@sentry/nextjs') const path = require('path') -const withTM = require('next-transpile-modules')(['utils', 'models', 'emails']) +const withTM = require('next-transpile-modules')([ + 'utils', + 'models', + 'emails', + 'bot-engine', +]) /** @type {import('next').NextConfig} */ const nextConfig = { diff --git a/apps/viewer/package.json b/apps/viewer/package.json index 3e987c01f..43b83815a 100644 --- a/apps/viewer/package.json +++ b/apps/viewer/package.json @@ -29,6 +29,7 @@ }, "devDependencies": { "@babel/preset-env": "7.19.3", + "@faire/mjml-react": "2.1.4", "@playwright/test": "1.27.0", "@types/cors": "2.8.12", "@types/google-spreadsheet": "3.3.0", @@ -42,7 +43,6 @@ "@typescript-eslint/parser": "5.39.0", "dotenv": "16.0.3", "emails": "workspace:*", - "encoding": "^0.1.13", "eslint": "8.25.0", "eslint-config-next": "12.3.1", "eslint-plugin-react": "7.31.8", @@ -53,7 +53,6 @@ "node-fetch": "^3.2.10", "papaparse": "5.3.2", "typescript": "4.8.4", - "uglify-js": "3.17.3", "utils": "workspace:*" } } diff --git a/packages/bot-engine/package.json b/packages/bot-engine/package.json index 85b10d239..51f17ce5d 100644 --- a/packages/bot-engine/package.json +++ b/packages/bot-engine/package.json @@ -2,12 +2,12 @@ "name": "bot-engine", "license": "AGPL-3.0-or-later", "version": "0.1.0", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", + "main": "dist/index.js", + "module": "dist/index.mjs", "types": "dist/index.d.ts", "scripts": { - "build": "pnpm rollup -c", - "dev": "pnpm rollup -c --watch", + "build": "tsup", + "dev": "tsup --watch", "lint": "eslint --fix -c ./.eslintrc.js \"./src/**/*.ts*\"" }, "dependencies": { @@ -22,10 +22,6 @@ "resize-observer": "1.0.4" }, "devDependencies": { - "@rollup/plugin-commonjs": "23.0.0", - "@rollup/plugin-json": "4.1.0", - "@rollup/plugin-node-resolve": "14.1.0", - "@rollup/plugin-typescript": "8.5.0", "@types/node": "18.8.3", "@types/qs": "6.9.7", "@types/react": "18.0.21", @@ -35,6 +31,7 @@ "@typescript-eslint/eslint-plugin": "5.39.0", "@typescript-eslint/parser": "5.39.0", "autoprefixer": "10.4.12", + "baptistearno-tsup": "^0.1.0", "db": "workspace:*", "eslint": "8.25.0", "eslint-config-next": "12.3.1", @@ -46,13 +43,7 @@ "prettier": "2.7.1", "react": "18.2.0", "react-dom": "18.2.0", - "rollup": "2.79.1", - "rollup-plugin-dts": "4.2.2", - "rollup-plugin-peer-deps-external": "2.2.4", - "rollup-plugin-postcss": "4.0.2", - "rollup-plugin-terser": "7.0.2", "tailwindcss": "3.1.8", - "tslib": "2.4.0", "typescript": "4.8.4", "utils": "workspace:*" }, diff --git a/packages/bot-engine/rollup.config.js b/packages/bot-engine/rollup.config.js deleted file mode 100644 index 6a02dfb68..000000000 --- a/packages/bot-engine/rollup.config.js +++ /dev/null @@ -1,52 +0,0 @@ -import resolve from '@rollup/plugin-node-resolve' -import commonjs from '@rollup/plugin-commonjs' -import typescript from '@rollup/plugin-typescript' -import json from '@rollup/plugin-json' -import dts from 'rollup-plugin-dts' -import postcss from 'rollup-plugin-postcss' -import { terser } from 'rollup-plugin-terser' -import peerDepsExternal from 'rollup-plugin-peer-deps-external' - -const packageJson = require('./package.json') - -export default [ - { - input: 'src/index.ts', - output: [ - { - file: packageJson.main, - format: 'cjs', - sourcemap: true, - inlineDynamicImports: true, - }, - { - file: packageJson.module, - format: 'esm', - sourcemap: true, - inlineDynamicImports: true, - }, - ], - plugins: [ - peerDepsExternal(), - resolve({ preferBuiltins: true }), - json(), - commonjs(), - typescript({ tsconfig: './tsconfig.json' }), - postcss({ - config: { - path: './postcss.config.js', - }, - extract: false, - minimize: false, - inject: false, - }), - terser(), - ], - }, - { - input: 'dist/esm/src/index.d.ts', - output: [{ file: 'dist/index.d.ts', format: 'esm' }], - plugins: [dts()], - external: [/\.css$/], - }, -] diff --git a/packages/bot-engine/src/assets/phone.css b/packages/bot-engine/src/assets/phone.css index 017db23bb..fabb7ccf7 100644 --- a/packages/bot-engine/src/assets/phone.css +++ b/packages/bot-engine/src/assets/phone.css @@ -1,3 +1,150 @@ +/* CSS variables. */ +:root { + --PhoneInput-color--focus: #03b2cb; + --PhoneInputInternationalIconPhone-opacity: 0.8; + --PhoneInputInternationalIconGlobe-opacity: 0.65; + --PhoneInputCountrySelect-marginRight: 0.35em; + --PhoneInputCountrySelectArrow-width: 0.3em; + --PhoneInputCountrySelectArrow-marginLeft: var( + --PhoneInputCountrySelect-marginRight + ); + --PhoneInputCountrySelectArrow-borderWidth: 1px; + --PhoneInputCountrySelectArrow-opacity: 0.45; + --PhoneInputCountrySelectArrow-color: currentColor; + --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus); + --PhoneInputCountrySelectArrow-transform: rotate(45deg); + --PhoneInputCountryFlag-aspectRatio: 1.5; + --PhoneInputCountryFlag-height: 1em; + --PhoneInputCountryFlag-borderWidth: 1px; + --PhoneInputCountryFlag-borderColor: rgba(0, 0, 0, 0.5); + --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus); + --PhoneInputCountryFlag-backgroundColor--loading: rgba(0, 0, 0, 0.1); +} + +.PhoneInput { + /* This is done to stretch the contents of this component. */ + display: flex; + align-items: center; +} + +.PhoneInputInput { + /* The phone number input stretches to fill all empty space */ + flex: 1; + /* The phone number input should shrink + to make room for the extension input */ + min-width: 0; +} + +.PhoneInputCountryIcon { + width: calc( + var(--PhoneInputCountryFlag-height) * + var(--PhoneInputCountryFlag-aspectRatio) + ); + height: var(--PhoneInputCountryFlag-height); +} + +.PhoneInputCountryIcon--square { + width: var(--PhoneInputCountryFlag-height); +} + +.PhoneInputCountryIcon--border { + /* Removed `background-color` because when an `` was still loading + it would show a dark gray rectangle. */ + /* For some reason the `` is not stretched to 100% width and height + and sometime there can be seen white pixels of the background at top and bottom. */ + background-color: var(--PhoneInputCountryFlag-backgroundColor--loading); + /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */ + /* For some reason the `` is not stretched to 100% width and height + and sometime there can be seen white pixels of the background at top and bottom, + so an additional "inset" border is added. */ + box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) + var(--PhoneInputCountryFlag-borderColor), + inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) + var(--PhoneInputCountryFlag-borderColor); +} + +.PhoneInputCountryIconImg { + /* Fixes weird vertical space above the flag icon. */ + /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */ + display: block; + /* 3rd party flag icons won't stretch if they have `width` and `height`. + Also, if an icon's aspect ratio was different, it wouldn't fit too. */ + width: 100%; + height: 100%; +} + +.PhoneInputInternationalIconPhone { + opacity: var(--PhoneInputInternationalIconPhone-opacity); +} + +.PhoneInputInternationalIconGlobe { + opacity: var(--PhoneInputInternationalIconGlobe-opacity); +} + +/* Styling native country `