refactor: ♻️ Migrate from short-uuid to cuid lib

apps/builder/.env.local.example

@@ -1,4 +1,4 @@
-DATABASE_URL=postgresql://postgres:@localhost:5432/typebot
+DATABASE_URL=postgresql://postgres:typebot@localhost:5432/typebot
 ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 #256-bits secret (can be generated here: https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx)
 NEXTAUTH_URL=http://localhost:3000
 NEXT_PUBLIC_VIEWER_URL=http://localhost:3001
@@ -10,5 +10,8 @@ S3_PORT=9000
 S3_ENDPOINT=localhost
 S3_SSL=false
 
+# Used for Google Fonts dropdown
+NEXT_PUBLIC_GOOGLE_API_KEY=AIzaSyAWuhjY55xbR-J9Yb1nkAQ13r6A7GDCx2k
+
 # For more configuration options check out:
 https://docs.typebot.io/self-hosting/configuration

apps/builder/components/shared/Graph/Graph.tsx

@@ -9,11 +9,11 @@ import { useStepDnd } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import { DraggableStepType, PublicTypebot, Typebot } from 'models'
-import { generate } from 'short-uuid'
 import { AnswersCount } from 'services/analytics'
 import { useDebounce } from 'use-debounce'
 import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 import GraphContent from './GraphContent'
+import cuid from 'cuid'
 
 declare const window: { chrome: unknown | undefined }
 
@@ -81,7 +81,7 @@ export const Graph = ({
       x: e.clientX - graphPosition.x - blockWidth / 3,
       y: e.clientY - graphPosition.y - 20 - headerHeight,
     }
-    const id = generate()
+    const id = cuid()
     updateBlockCoordinates(id, coordinates)
     createBlock({
       id,

apps/builder/components/shared/TableList.tsx

@@ -1,9 +1,9 @@
 import { Box, Button, Fade, Flex, IconButton, Stack } from '@chakra-ui/react'
 import { TrashIcon, PlusIcon } from 'assets/icons'
+import cuid from 'cuid'
 import { dequal } from 'dequal'
 import { Draft } from 'immer'
 import React, { useEffect, useState } from 'react'
-import { generate } from 'short-uuid'
 import { useImmer } from 'use-immer'
 
 type ItemWithId<T> = T & { id: string }
@@ -42,7 +42,7 @@ export const TableList = <T,>({
 
   const createItem = () => {
     setItems((items) => {
-      const id = generate()
+      const id = cuid()
       const newItem = { id } as Draft<ItemWithId<T>>
       items.push(newItem)
     })

apps/builder/components/shared/VariableSearchInput.tsx

@@ -12,9 +12,9 @@ import {
 } from '@chakra-ui/react'
 import { PlusIcon, TrashIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext'
+import cuid from 'cuid'
 import { Variable } from 'models'
 import React, { useState, useRef, ChangeEvent, useEffect } from 'react'
-import { generate } from 'short-uuid'
 import { useDebounce } from 'use-debounce'
 import { byId, isNotDefined } from 'utils'
 
@@ -89,7 +89,7 @@ export const VariableSearchInput = ({
 
   const handleCreateNewVariableClick = () => {
     if (!inputValue || inputValue === '') return
-    const id = generate()
+    const id = cuid()
     onSelectVariable({ id, name: inputValue })
     createVariable({ id, name: inputValue })
     onClose()

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -39,11 +39,11 @@ import { useRegisterActions } from 'kbar'
 import useUndo from 'services/utils/useUndo'
 import { useDebounce } from 'use-debounce'
 import { itemsAction, ItemsActions } from './actions/items'
-import { generate } from 'short-uuid'
 import { dequal } from 'dequal'
 import { User } from 'db'
 import { saveWebhook } from 'services/webhook'
 import { stringify } from 'qs'
+import cuid from 'cuid'
 const autoSaveTimeout = 10000
 
 type UpdateTypebotPayload = Partial<{
@@ -291,7 +291,7 @@ export const TypebotContext = ({
 
   const publishTypebot = async () => {
     if (!localTypebot) return
-    const publishedTypebotId = generate()
+    const publishedTypebotId = cuid()
     const newLocalTypebot = { ...localTypebot }
     if (publishedTypebot && isNotDefined(localTypebot.publishedTypebotId)) {
       updateLocalTypebot({ publishedTypebotId: publishedTypebot.id })

apps/builder/contexts/TypebotContext/actions/edges.ts

@@ -1,9 +1,9 @@
 import { Typebot, Edge, StepWithItems, StepIndices, ItemIndices } from 'models'
 import { WritableDraft } from 'immer/dist/types/types-external'
-import { generate } from 'short-uuid'
 import { SetTypebot } from '../TypebotContext'
 import { produce } from 'immer'
 import { byId, isDefined, stepHasItems } from 'utils'
+import cuid from 'cuid'
 
 export type EdgesActions = {
   createEdge: (edge: Omit<Edge, 'id'>) => void
@@ -17,7 +17,7 @@ export const edgesAction = (setTypebot: SetTypebot): EdgesActions => ({
       produce(typebot, (typebot) => {
         const newEdge = {
           ...edge,
-          id: generate(),
+          id: cuid(),
         }
         removeExistingEdge(typebot, edge)
         typebot.edges.push(newEdge)
@@ -73,11 +73,10 @@ const addEdgeIdToItem = (
   typebot: WritableDraft<Typebot>,
   edgeId: string,
   { blockIndex, stepIndex, itemIndex }: ItemIndices
-) => {
-  ;(typebot.blocks[blockIndex].steps[stepIndex] as StepWithItems).items[
+) =>
+  ((typebot.blocks[blockIndex].steps[stepIndex] as StepWithItems).items[
     itemIndex
-  ].outgoingEdgeId = edgeId
-}
+  ].outgoingEdgeId = edgeId)
 
 export const deleteEdgeDraft = (
   typebot: WritableDraft<Typebot>,
@@ -107,11 +106,10 @@ const deleteOutgoingEdgeIdProps = (
   if (fromStepIndex !== -1)
     typebot.blocks[fromBlockIndex].steps[fromStepIndex].outgoingEdgeId =
       undefined
-  if (fromItemIndex !== -1) {
-    ;(
+  if (fromItemIndex !== -1)
+    (
       typebot.blocks[fromBlockIndex].steps[fromStepIndex] as StepWithItems
     ).items[fromItemIndex].outgoingEdgeId = undefined
-  }
 }
 
 export const cleanUpEdgeDraft = (

apps/builder/contexts/TypebotContext/actions/items.ts

@@ -9,7 +9,7 @@ import { SetTypebot } from '../TypebotContext'
 import produce from 'immer'
 import { cleanUpEdgeDraft } from './edges'
 import { stepHasItems } from 'utils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 export type ItemsActions = {
   createItem: (item: Omit<ButtonItem, 'id'>, indices: ItemIndices) => void
@@ -29,7 +29,7 @@ const itemsAction = (setTypebot: SetTypebot): ItemsActions => ({
         step.items.splice(itemIndex, 0, {
           ...item,
           stepId: step.id,
-          id: generate(),
+          id: cuid(),
         })
       })
     ),

apps/builder/layouts/dashboard/TemplatesContent.tsx

@@ -14,7 +14,6 @@ import { Typebot } from 'models'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
 import { createTypebot, importTypebot } from 'services/typebots/typebots'
-import { generate } from 'short-uuid'
 
 export type TemplateProps = { name: string; emoji: string; fileName: string }
 const templates: TemplateProps[] = [

apps/builder/package.json

@@ -64,12 +64,12 @@
     "nodemailer": "^6.7.2",
     "nprogress": "^0.2.0",
     "papaparse": "^5.3.1",
+    "prettier": "^2.5.1",
     "qs": "^6.10.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
     "react-table": "^7.7.0",
-    "short-uuid": "^4.2.0",
     "slate": "^0.73.1",
     "slate-history": "^0.66.0",
     "slate-hyperscript": "^0.67.0",
@@ -81,11 +81,9 @@
     "typebot-js": "*",
     "use-debounce": "^7.0.1",
     "use-immer": "^0.6.0",
-    "utils": "*",
-    "prettier": "^2.5.1"
+    "utils": "*"
   },
   "devDependencies": {
-    "@types/prettier": "^2.4.4",
     "@playwright/test": "^1.19.2",
     "@types/google-spreadsheet": "^3.1.5",
     "@types/jsonwebtoken": "8.5.8",
@@ -95,6 +93,7 @@
     "@types/nodemailer": "^6.4.4",
     "@types/nprogress": "^0.2.0",
     "@types/papaparse": "^5.3.2",
+    "@types/prettier": "^2.4.4",
     "@types/qs": "^6.9.7",
     "@types/react": "^17.0.40",
     "@types/react-table": "^7.7.9",

apps/builder/playwright/tests/bubbles/image.spec.ts

@@ -6,15 +6,15 @@ import {
 import { BubbleStepType, defaultImageBubbleContent } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import path from 'path'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 const unsplashImageSrc =
   'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
 
 test.describe.parallel('Image bubble step', () => {
   test.describe('Content settings', () => {
     test('should upload image file correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -42,7 +42,7 @@ test.describe.parallel('Image bubble step', () => {
     })
 
     test('should import image link correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -65,7 +65,7 @@ test.describe.parallel('Image bubble step', () => {
     })
 
     test('should import gifs correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -90,7 +90,7 @@ test.describe.parallel('Image bubble step', () => {
 
   test.describe('Preview', () => {
     test('should display correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,

apps/builder/playwright/tests/bubbles/text.spec.ts

@@ -5,11 +5,11 @@ import {
 } from '../../services/database'
 import { BubbleStepType, defaultTextBubbleContent } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 test.describe('Text bubble step', () => {
   test('rich text features should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,

apps/builder/playwright/tests/bubbles/video.spec.ts

@@ -9,7 +9,7 @@ import {
   VideoBubbleContentType,
 } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
-import { generate } from 'short-uuid'
+import cuid from 'cuid'
 
 const videoSrc =
   'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
@@ -19,7 +19,7 @@ const vimeoVideoSrc = 'https://vimeo.com/649301125'
 test.describe.parallel('Video bubble step', () => {
   test.describe('Content settings', () => {
     test('should import video url correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -43,7 +43,7 @@ test.describe.parallel('Video bubble step', () => {
 
   test.describe('Preview', () => {
     test('should display video correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -65,7 +65,7 @@ test.describe.parallel('Video bubble step', () => {
     })
 
     test('should display youtube video correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,
@@ -89,7 +89,7 @@ test.describe.parallel('Video bubble step', () => {
     })
 
     test('should display vimeo video correctly', async ({ page }) => {
-      const typebotId = generate()
+      const typebotId = cuid()
       await createTypebots([
         {
           id: typebotId,

apps/builder/playwright/tests/collaboration.spec.ts

@@ -1,10 +1,10 @@
 import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
 import { InputStepType, defaultTextInputOptions } from 'models'
 import path from 'path'
-import { generate } from 'short-uuid'
 import { createTypebots, parseDefaultBlockWithStep } from '../services/database'
 
-const typebotId = generate()
+const typebotId = cuid()
 
 test.beforeAll(async () => {
   await createTypebots([

apps/builder/playwright/tests/customDomains.spec.ts

@@ -1,10 +1,10 @@
 import test, { expect } from '@playwright/test'
 import { InputStepType, defaultTextInputOptions } from 'models'
 import { createTypebots, parseDefaultBlockWithStep } from '../services/database'
-import { generate } from 'short-uuid'
 import path from 'path'
+import cuid from 'cuid'
 
-const typebotId = generate()
+const typebotId = cuid()
 test.describe('Dashboard page', () => {
   test('should be able to connect custom domain', async ({ page }) => {
     await createTypebots([

apps/builder/playwright/tests/dashboard.spec.ts

@@ -1,6 +1,6 @@
 import test, { expect, Page } from '@playwright/test'
+import cuid from 'cuid'
 import path from 'path'
-import { generate } from 'short-uuid'
 import { createFolders, createTypebots } from '../services/database'
 import { deleteButtonInConfirmDialog } from '../services/selectorUtils'
 
@@ -49,7 +49,7 @@ test.describe('Dashboard page', () => {
   })
 
   test('folders and typebots should be movable', async ({ page }) => {
-    const droppableFolderId = generate()
+    const droppableFolderId = cuid()
     await createFolders([{ id: droppableFolderId, name: 'Droppable folder' }])
     await createTypebots([{ name: 'Draggable typebot' }])
     await page.goto('/typebots')

apps/builder/playwright/tests/editor.spec.ts

@@ -5,12 +5,12 @@ import {
   parseDefaultBlockWithStep,
 } from '../services/database'
 import { defaultTextInputOptions, InputStepType } from 'models'
-import { generate } from 'short-uuid'
 import path from 'path'
+import cuid from 'cuid'
 
 test.describe.parallel('Editor', () => {
   test('Edges connection should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,
@@ -57,7 +57,7 @@ test.describe.parallel('Editor', () => {
     expect(total).toBe(1)
   })
   test('Drag and drop steps and items should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await importTypebotInDatabase(
       path.join(__dirname, '../fixtures/typebots/editor/buttonsDnd.json'),
       {
@@ -98,7 +98,7 @@ test.describe.parallel('Editor', () => {
     )
   })
   test('Undo / Redo buttons should work', async ({ page }) => {
-    const typebotId = generate()
+    const typebotId = cuid()
     await createTypebots([
       {
         id: typebotId,