blsmedia/bot
2
0
Fork 0
Code Activity

🏗️ Use tsup for bot and typebot-js packages

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-10-10 08:28:11 +02:00
committed by Baptiste Arnaud
parent 0b58f4e976
commit 84163c6585
27 changed files with 474 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/builder/components/Seo.tsx
View File

@ -10,24 +10,28 @@ export const Seo = ({
description?: string
currentUrl?: string
imagePreviewUrl?: string
}) => (
<Head>
<title>Typebot | {title}</title>
<meta name="title" content={title} />
<meta property="og:title" content={title} />
<meta property="twitter:title" content={title} />
}) => {
const formattedTitle = `${title} | Typebot`
<meta property="twitter:url" content={currentUrl} />
<meta property="og:url" content={currentUrl} />
return (
<Head>
<title>{formattedTitle}</title>
<meta name="title" content={title} />
<meta property="og:title" content={title} />
<meta property="twitter:title" content={title} />
<meta name="description" content={description} />
<meta property="twitter:description" content={description} />
<meta property="og:description" content={description} />
<meta property="twitter:url" content={currentUrl} />
<meta property="og:url" content={currentUrl} />
<meta property="og:image" content={imagePreviewUrl} />
<meta property="twitter:image" content={imagePreviewUrl} />
<meta name="description" content={description} />
<meta property="twitter:description" content={description} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" />
<meta property="twitter:card" content="summary_large_image" />
</Head>
)
<meta property="og:image" content={imagePreviewUrl} />
<meta property="twitter:image" content={imagePreviewUrl} />
<meta property="og:type" content="website" />
<meta property="twitter:card" content="summary_large_image" />
</Head>
)
}

13
apps/builder/components/dashboard/DashboardHeader.tsx
View File

@ -55,7 +55,7 @@ export const DashboardHeader = () => {
<NextChakraLink
className="w-24"
href="/typebots"
data-testid="authenticated"
data-testid="typebot-logo"
>
<TypebotLogo w="30px" />
</NextChakraLink>
@ -92,12 +92,11 @@ export const DashboardHeader = () => {
</SkeletonCircle>
{workspace && (
<>
<Text noOfLines={1} maxW="200px">
{workspace.name}
</Text>
<PlanTag plan={workspace.plan}/>
<Text noOfLines={1} maxW="200px">
{workspace.name}
</Text>
<PlanTag plan={workspace.plan} />
</>
)}
<ChevronLeftIcon transform="rotate(-90deg)" />
</HStack>
@ -117,7 +116,7 @@ export const DashboardHeader = () => {
defaultIcon={HardDriveIcon}
/>
<Text>{workspace.name}</Text>
<PlanTag plan={workspace.plan}/>
<PlanTag plan={workspace.plan} />
</HStack>
</MenuItem>
))}

2
apps/builder/components/settings/SettingsSideMenu.tsx
View File

@ -44,7 +44,7 @@ export const SettingsSideMenu = () => {
<Heading fontSize="xl" textAlign="center">
Settings
</Heading>
<Accordion allowMultiple allowToggle>
<Accordion allowMultiple defaultIndex={[0]}>
<AccordionItem>
<AccordionButton py={6}>
<HStack flex="1" pl={2}>

4
apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
View File

@ -187,7 +187,7 @@ export const WebhookSettings = ({
items={Object.values(HttpMethod)}
/>
</HStack>
<Accordion allowToggle allowMultiple>
<Accordion allowMultiple>
<AccordionItem>
<AccordionButton justifyContent="space-between">
Query params
@ -274,7 +274,7 @@ export const WebhookSettings = ({
<CodeEditor isReadOnly lang="json" value={testResponse} />
)}
{(testResponse || options?.responseVariableMapping.length > 0) && (
<Accordion allowToggle allowMultiple>
<Accordion allowMultiple>
<AccordionItem>
<AccordionButton justifyContent="space-between">
Save in variables

2
apps/builder/components/theme/ThemeSideMenu.tsx
View File

@ -43,7 +43,7 @@ export const ThemeSideMenu = () => {
<Heading fontSize="xl" textAlign="center">
Customize the theme
</Heading>
<Accordion allowMultiple allowToggle>
<Accordion allowMultiple defaultIndex={[0]}>
<AccordionItem>
<AccordionButton py={6}>
<HStack flex="1" pl={2}>

7
apps/builder/next.config.js
View File

@ -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 = {

1
apps/builder/playwright/tests/settings.spec.ts
View File

@ -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")')

1
apps/builder/playwright/tests/theme.spec.ts
View File

@ -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')

4
apps/builder/playwright/tests/workspaces.spec.ts
View File

@ -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 }) => {

7
apps/viewer/next.config.js
View File

@ -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 = {

3
apps/viewer/package.json
View File

@ -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:*"
}
}

19
packages/bot-engine/package.json
View File

@ -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:*"
},

52
packages/bot-engine/rollup.config.js
View File

@ -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$/],
},
]

147
packages/bot-engine/src/assets/phone.css
View File

@ -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 `<img/>` was still loading
it would show a dark gray rectangle. */
/* For some reason the `<img/>` 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 `<img/>` 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 <SVG/> flag icons won't stretch if they have `width` and `height`.
Also, if an <SVG/> 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 `<select/>`. */
.PhoneInputCountry {
position: relative;
align-self: stretch;
display: flex;
align-items: center;
margin-right: var(--PhoneInputCountrySelect-marginRight);
}
.PhoneInputCountrySelect {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
border: 0;
opacity: 0;
cursor: pointer;
}
.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
cursor: default;
}
.PhoneInputCountrySelectArrow {
display: block;
content: '';
width: var(--PhoneInputCountrySelectArrow-width);
height: var(--PhoneInputCountrySelectArrow-width);
margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
border-style: solid;
border-color: var(--PhoneInputCountrySelectArrow-color);
border-top-width: 0;
border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
border-left-width: 0;
border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
transform: var(--PhoneInputCountrySelectArrow-transform);
opacity: var(--PhoneInputCountrySelectArrow-opacity);
}
.PhoneInputCountrySelect:focus
+ .PhoneInputCountryIcon
+ .PhoneInputCountrySelectArrow {
opacity: 1;
color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
var(--PhoneInputCountryFlag-borderColor--focus),
inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
var(--PhoneInputCountryFlag-borderColor--focus);
}
.PhoneInputCountrySelect:focus
+ .PhoneInputCountryIcon
.PhoneInputInternationalIconGlobe {
opacity: 1;
color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.PhoneInputInput {
padding: 1rem 0.5rem;
outline: none !important;

7
packages/bot-engine/src/components/TypebotViewer.tsx
View File

@ -1,14 +1,8 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
import React, { CSSProperties, useMemo } from 'react'
import { TypebotContext } from '../contexts/TypebotContext'
import Frame from 'react-frame-component'
//@ts-ignore
import styles from '../assets/style.css'
//@ts-ignore
import phoneNumberInputStyle from 'react-phone-number-input/style.css'
//@ts-ignore
import importantStyles from '../assets/importantStyles.css'
//@ts-ignore
import phoneSyle from '../assets/phone.css'
import { ConversationContainer } from './ConversationContainer'
import { AnswersContext } from '../contexts/AnswersContext'
@ -79,7 +73,6 @@ export const TypebotViewer = ({
id="typebot-iframe"
head={
<style>
{phoneNumberInputStyle}
{phoneSyle}
{styles}
{typebot.theme?.customCss}

1
packages/bot-engine/src/components/global.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module '*.css'

12
packages/bot-engine/tsup.config.js Normal file
View File

@ -0,0 +1,12 @@
import { defineConfig } from 'baptistearno-tsup'
export default defineConfig((options) => ({
entry: ['src/index.ts'],
sourcemap: true,
minify: !options.watch,
dts: true,
format: ['esm', 'cjs'],
loader: {
'.css': 'text',
},
}))

2
packages/emails/emails/DefaultBotNotificationEmail.tsx
View File

@ -33,7 +33,7 @@ export const DefaultBotNotificationEmail = ({
<Text key={key}>
<b>{key}</b>:{' '}
{isEmail ? (
<a href={answers[key]}>{answers[key]}</a>
<a href={`mailto:${answers[key]}`}>{answers[key]}</a>
) : (
answers[key]
)}

12
packages/scripts/index.ts
View File

@ -8,8 +8,16 @@ require('dotenv').config({
),
})
const prisma = new PrismaClient()
const prisma = new PrismaClient({ log: ['query', 'info', 'warn', 'error'] })
const main = async () => {}
const main = async () => {
const workspaces = await prisma.workspace.findMany({
where: {
members: { some: { userId: 'coucou' } },
},
})
console.log(workspaces)
}
main().then()

1
packages/typebot-js/.npmignore
View File

@ -4,7 +4,6 @@ tests
.eslintignore
.eslintrc.js
jest.config.js
rollup.config.js
tsconfig.json
examples
__mocks__

13
packages/typebot-js/examples/chatEmbedExample.html
View File

@ -11,16 +11,12 @@
margin: 0;
}
</style>
<script src="../dist/index.umd.min.js"></script>
<script src="../dist/index.global.js"></script>
</head>
<body>
<script>
const { open } = Typebot.initBubble({
Typebot.initBubble({
url: 'https://typebot.io/typebot-support',
button: {
color: 'green',
iconUrl: 'https://image.flaticon.com/icons/png/512/5138/5138352.png',
},
proactiveMessage: {
avatarUrl:
'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
@ -31,7 +27,10 @@
})
</script>
<div style="width: 100%; height: 300vh; background-color: aquamarine">
<button onclick="(()=>{open()})()" style="width: 200px; height: 60px">
<button
onclick="Typebot.getBubbleActions().open()"
style="width: 200px; height: 60px"
>
OPEN CHAT
</button>
</div>

18
packages/typebot-js/examples/containerEmbedExample.html
View File

@ -23,17 +23,19 @@
<div id="typebot-container-2" style="width: 1000px; height: 600px"></div>
</div>
<div id="typebot-container-3" style="width: 1000px; height: 600px"></div>
<script src="../dist/index.umd.min.js"></script>
<script src="../dist/index.global.js"></script>
<script>
Typebot.initContainer("typebot-container", { publishId: "jamhouse" });
Typebot.initContainer("typebot-container-2", {
publishId: "lead-generation",
});
Typebot.initContainer("typebot-container-3", {
publishId: "feedback-form",
Typebot.initContainer('typebot-container', {
url: 'https://viewer.typebot.io/lead-generation-copy-c3yiqz1',
})
Typebot.initContainer('typebot-container-2', {
url: 'https://viewer.typebot.io/kebab',
})
Typebot.initContainer('typebot-container-3', {
url: 'https://viewer.typebot.io/typebot-support',
loadWhenVisible: false,
});
})
</script>
</body>
</html>

6
packages/typebot-js/examples/popupEmbedExample.html
View File

@ -13,12 +13,12 @@
</style>
</head>
<body>
<script src="../dist/index.umd.min.js"></script>
<script src="../dist/index.global.js"></script>
<script>
const { open } = Typebot.initPopup({
publishId: "feedback-form",
publishId: 'feedback-form',
delay: 1000,
});
})
</script>
<div style="width: 100%; height: 300vh; background-color: aquamarine">
<button onclick="(()=>{open()})()">CLICK</button>

12
packages/typebot-js/package.json
View File

@ -5,28 +5,24 @@
"unpkg": "dist/index.umd.min.js",
"license": "AGPL-3.0-or-later",
"scripts": {
"dev": "pnpm rollup -c --watch",
"build": "pnpm lint && rollup -c",
"dev": "tsup --watch",
"build": "tsup",
"lint": "eslint src --ext .ts && eslint tests --ext .ts",
"test": "pnpm jest"
},
"devDependencies": {
"jest-environment-jsdom": "29.1.2",
"@rollup/plugin-typescript": "8.5.0",
"@types/jest": "29.1.2",
"@typescript-eslint/eslint-plugin": "5.39.0",
"@typescript-eslint/parser": "5.39.0",
"baptistearno-tsup": "^0.1.0",
"eslint": "8.25.0",
"eslint-plugin-functional": "4.4.1",
"eslint-plugin-jest": "27.1.1",
"eslint-plugin-prettier": "4.2.1",
"jest": "29.1.2",
"jest-environment-jsdom": "29.1.2",
"prettier": "2.7.1",
"rollup": "2.79.1",
"rollup-plugin-styles": "4.0.0",
"rollup-plugin-terser": "7.0.2",
"ts-jest": "29.0.3",
"tslib": "2.4.0",
"typescript": "4.8.4"
}
}

26
packages/typebot-js/rollup.config.js
View File

@ -1,26 +0,0 @@
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";
import styles from "rollup-plugin-styles";
export default [
// ES Modules
{
input: "src/index.ts",
output: {
file: "dist/index.js",
format: "cjs",
},
plugins: [typescript({ tsconfig: "./tsconfig.json" }), styles()],
},
// UMD
{
input: "src/index.ts",
output: {
file: "dist/index.umd.min.js",
format: "umd",
name: "Typebot",
},
plugins: [typescript({ tsconfig: "./tsconfig.json" }), terser(), styles()],
},
];

11
packages/typebot-js/tsup.config.js Normal file
View File

@ -0,0 +1,11 @@
import { defineConfig } from 'baptistearno-tsup'
export default defineConfig((options) => ({
entry: ['src/index.ts'],
sourcemap: true,
minify: !options.watch,
dts: true,
format: ['esm', 'cjs', 'iife'],
globalName: 'Typebot',
injectStyle: true,
}))

792
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff