build: add pnpm

.dockerignore

@@ -4,4 +4,11 @@ node_modules
 npm-debug.log
 README.md
 .next
-.git
+.git
+.github
+.turbo
+
+landing-page
+docs
+scripts
+wordpress

.github/workflows/playwright.yml

@@ -12,15 +12,16 @@ jobs:
       - name: Log Info
         run: echo ${{ github.event.deployment_status.target_url }} && echo ${{ github.event.deployment }} && echo ${{ github.event.deployment_status.environment }}
       - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2.2.2
       - name: Install dependencies
-        run: yarn
+        run: pnpm i --frozen-lockfile
       - name: Build dependencies
-        run: yarn turbo run build --scope=builder --include-dependencies
+        run: pnpm turbo run build --filter="builder^..."
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Run tests
         working-directory: ./apps/builder
-        run: yarn test
+        run: pnpm test
         env:
           PLAYWRIGHT_BUILDER_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
           DATABASE_URL: ${{ secrets.TEST_DATABASE_URL }}

.github/workflows/publish-lib-to-npm.yml

@@ -12,12 +12,10 @@ jobs:
         working-directory: ./packages/typebot-js
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 16
-      - run: yarn
-      - run: yarn test
-      - run: yarn build
+      - uses: pnpm/action-setup@v2.2.2
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm test
+      - run: pnpm build
       - uses: JS-DevTools/npm-publish@v1
         with:
           package: './packages/typebot-js/package.json'

.github/workflows/publish_docker_images.yml

@@ -9,8 +9,8 @@ on:
     branches: [main]
 
 jobs:
-  push_images_to_docker_hub:
-    name: Push images to Docker Hub
+  push_builder:
+    name: Builder
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
@@ -27,6 +27,29 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
             type=semver,pattern={{major}}
 
+      - name: Log in to Docker Hub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Build and push builder image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.builder-meta.outputs.tags }}
+          labels: ${{ steps.builder-meta.outputs.labels }}
+          build-args: |
+            SCOPE=builder
+  push_viewer:
+    name: Viewer
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+
       - name: Extract Viewer meta
         id: viewer-meta
         uses: docker/metadata-action@v4
@@ -45,16 +68,6 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Build and push builder image
-        uses: docker/build-push-action@v3
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.builder-meta.outputs.tags }}
-          labels: ${{ steps.builder-meta.outputs.labels }}
-          build-args: |
-            SCOPE=builder
-
       - name: Build and push viewer image
         uses: docker/build-push-action@v3
         with:

.gitignore

@@ -5,7 +5,6 @@ node_modules
 workspace.code-workspace
 .DS_Store
 .turbo
-yarn-error.log
 authenticatedState.json
 playwright-report
 dist

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*prisma*

Dockerfile

@@ -1,51 +1,37 @@
-# https://github.com/vercel/turborepo/issues/215#issuecomment-1027058056
-FROM node:16-slim AS base
+FROM node:18-slim AS base
 WORKDIR /app
 ARG SCOPE
 ENV SCOPE=${SCOPE}
-
-FROM base AS pruner
-RUN yarn global add turbo@1.2.9
-COPY . .
-RUN turbo prune --scope="${SCOPE}" --docker
-
-FROM base AS installer
-COPY --from=pruner /app/out/json/ .
-COPY --from=pruner /app/out/yarn.lock ./yarn.lock
-RUN yarn install --frozen-lockfile
+RUN npm --global install pnpm
 
 FROM base AS builder
-SHELL ["/bin/bash", "-o", "pipefail", "-c"]
-COPY --from=installer /app/ .
-COPY --from=pruner /app/out/full/ .
-COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.production
-COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.local
-RUN apt-get -qy update && apt-get -qy --no-install-recommends install openssl
-RUN yarn turbo run build --scope="${SCOPE}" --include-dependencies --no-deps
-RUN find . -name node_modules | xargs rm -rf
+RUN apt-get -qy update && apt-get -qy --no-install-recommends install openssl git
+COPY pnpm-lock.yaml .npmrc pnpm-workspace.yaml ./
+RUN pnpm fetch
+ADD . ./
+RUN pnpm install -r --offline
+RUN pnpm turbo run build --filter=${SCOPE}...
 
 FROM base AS runner
 WORKDIR /app
 ENV NODE_ENV production
-COPY ./packages/db/prisma ./prisma
-COPY --from=installer /app/node_modules ./node_modules
-COPY --from=builder /app/apps/${SCOPE}/next.config.js ./
-COPY --from=builder /app/apps/${SCOPE}/public ./public
-COPY --from=builder /app/apps/${SCOPE}/package.json ./package.json
-COPY --from=builder /app/apps/${SCOPE}/.next/standalone ./
-COPY --from=builder /app/apps/${SCOPE}/.next/static ./.next/static
-COPY --from=builder /app/apps/${SCOPE}/.env.docker ./.env.production
 RUN apt-get -qy update \
     && apt-get -qy --no-install-recommends install \
     openssl \
     && apt-get autoremove -yq \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
+COPY ./packages/db/prisma ./prisma
+COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.production
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/apps/${SCOPE}/public ./apps/${SCOPE}/public
+COPY --from=builder --chown=node:node /app/apps/${SCOPE}/.next/standalone ./
+COPY --from=builder --chown=node:node /app/apps/${SCOPE}/.next/static ./apps/${SCOPE}/.next/static
 
 COPY env.sh ${SCOPE}-entrypoint.sh ./
-RUN chmod +x ./"${SCOPE}"-entrypoint.sh \
+RUN chmod +x ./${SCOPE}-entrypoint.sh \
     && chmod +x ./env.sh
-ENTRYPOINT ./"${SCOPE}"-entrypoint.sh
+ENTRYPOINT ./${SCOPE}-entrypoint.sh
 
 EXPOSE 3000
 ENV PORT 3000

README.md

@@ -54,7 +54,7 @@ Interested in self-hosting Typebot on your server? Take a look at the [self-host
 
    ```sh
    cd typebot.io
-   yarn
+   pnpm i
    ```
 
 3. Set up environment variables
@@ -69,7 +69,7 @@ Interested in self-hosting Typebot on your server? Take a look at the [self-host
 5. Start the builder and viewer
 
    ```sh
-   yarn dev
+   pnpm dev
    ```
 
    Builder is available at `http://localhost:3000`
@@ -86,14 +86,14 @@ Interested in self-hosting Typebot on your server? Take a look at the [self-host
 
    ```sh
    cd apps/landing-page
-   yarn dev
+   pnpm dev
    ```
 
 7. (Optionnal) Start the docs
 
    ```sh
    cd apps/docs
-   yarn start
+   pnpm start
    ```
 
 ## Contribute

apps/builder/.env.docker

@@ -6,3 +6,4 @@ NEXT_PUBLIC_GIPHY_API_KEY=
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
 NEXT_PUBLIC_SENTRY_DSN=
 NEXT_PUBLIC_VIEWER_INTERNAL_URL=
+NEXT_PUBLIC_E2E_TEST=

apps/builder/components/auth/DividerWithText.tsx

@@ -1,5 +1,11 @@
-import { FlexProps, Flex, Box, Divider, Text } from '@chakra-ui/react'
-import { useColorModeValue } from '@chakra-ui/system'
+import {
+  FlexProps,
+  Flex,
+  Box,
+  Divider,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import React from 'react'
 
 export const DividerWithText = (props: FlexProps) => {

apps/builder/components/dashboard/OnboardingModal.tsx

@@ -11,7 +11,7 @@ import { useUser } from 'contexts/UserContext'
 import { Answer, Typebot } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
-import { sendRequest } from 'utils'
+import { getViewerUrl, sendRequest } from 'utils'
 import confetti from 'canvas-confetti'
 import { useToast } from 'components/shared/hooks/useToast'
 
@@ -119,6 +119,7 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
         <ModalBody>
           {typebot && (
             <TypebotViewer
+              apiHost={getViewerUrl({ isBuilder: true })}
               typebot={parseTypebotToPublicTypebot(typebot)}
               predefinedVariables={{
                 Name: user?.name?.split(' ')[0] ?? undefined,

apps/builder/components/dashboard/annoucements/AnnoucementBanner.tsx

@@ -1,5 +1,4 @@
-import { Flex, HStack, StackProps } from '@chakra-ui/layout'
-import { CloseButton } from '@chakra-ui/react'
+import { CloseButton, Flex, HStack, StackProps } from '@chakra-ui/react'
 import React, { useEffect, useState } from 'react'
 
 type VerifyEmailBannerProps = { id: string } & StackProps

apps/builder/components/editor/preview/PreviewDrawer.tsx

@@ -18,6 +18,7 @@ import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { Log } from 'db'
 import React, { useMemo, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
+import { getViewerUrl } from 'utils'
 
 export const PreviewDrawer = () => {
   const { typebot } = useTypebot()
@@ -100,6 +101,7 @@ export const PreviewDrawer = () => {
             pointerEvents={isResizing ? 'none' : 'auto'}
           >
             <TypebotViewer
+              apiHost={getViewerUrl({ isBuilder: true })}
               typebot={publicTypebot}
               onNewGroupVisible={setPreviewingEdge}
               onNewLog={handleNewLog}

apps/builder/components/results/ResultsTable/Cell.tsx

@@ -1,10 +1,11 @@
 import { chakra, Fade, Button } from '@chakra-ui/react'
-import { Cell as CellProps } from '@tanstack/react-table'
+import { Cell as CellProps, flexRender } from '@tanstack/react-table'
 import { ExpandIcon } from 'assets/icons'
 import { memo } from 'react'
+import { TableData } from 'services/typebots/results'
 
 type Props = {
-  cell: CellProps<any>
+  cell: CellProps<TableData, unknown>
   size: number
   isExpandButtonVisible: boolean
   cellIndex: number
@@ -34,7 +35,7 @@ const Cell = ({
         maxWidth: size,
       }}
     >
-      {cell.renderCell()}
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
       <chakra.span
         pos="absolute"
         top="0"

apps/builder/components/results/ResultsTable/HeaderRow.tsx

@@ -1,10 +1,10 @@
 import { Box, BoxProps, chakra } from '@chakra-ui/react'
-import { HeaderGroup } from '@tanstack/react-table'
+import { flexRender, HeaderGroup } from '@tanstack/react-table'
 import React from 'react'
+import { TableData } from 'services/typebots/results'
 
 type Props = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  headerGroup: HeaderGroup<any>
+  headerGroup: HeaderGroup<TableData>
 }
 
 export const HeaderRow = ({ headerGroup }: Props) => {
@@ -28,7 +28,9 @@ export const HeaderRow = ({ headerGroup }: Props) => {
               maxWidth: header.getSize(),
             }}
           >
-            {header.isPlaceholder ? null : header.renderHeader()}
+            {header.isPlaceholder
+              ? null
+              : flexRender(header.column.columnDef.header, header.getContext())}
             {header.column.getCanResize() && (
               <ResizeHandle
                 onMouseDown={header.getResizeHandler()}

apps/builder/components/results/ResultsTable/ResultsActionButtons.tsx

@@ -18,7 +18,7 @@ import {
   convertResultsToTableData,
   getAllResults,
   deleteResults as deleteFetchResults,
-} from 'services/typebots'
+} from 'services/typebots/results'
 
 type ResultsActionButtonsProps = {
   selectedResultsId: string[]
@@ -93,7 +93,9 @@ export const ResultsActionButtons = ({
 
     const dataToUnparse = isSelectAll
       ? await getAllTableData()
-      : tableData.filter((data) => selectedResultsId.includes(data.id))
+      : tableData.filter((data) =>
+          selectedResultsId.includes(data.id.plainText)
+        )
     const csvData = new Blob(
       [
         unparse({