✨ Introducing The Forge (#1072)

The Forge allows anyone to easily create their own Typebot Block.

Closes #380

packages/deprecated/bot-engine/package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@types/node": "18.11.18",
     "@types/qs": "6.9.7",
-    "@types/react": "18.0.27",
+    "@types/react": "18.2.15",
     "@types/react-phone-number-input": "3.0.14",
     "@types/react-scroll": "1.8.6",
     "@types/react-transition-group": "4.4.5",

packages/deprecated/bot-engine/src/components/avatars/Avatar.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { isDefined } from '@typebot.io/lib'
 import { DefaultAvatar } from './DefaultAvatar'
 
-export const Avatar = ({ avatarSrc }: { avatarSrc?: string }): JSX.Element => {
+export const Avatar = ({ avatarSrc }: { avatarSrc?: string }) => {
   const [currentAvatarSrc] = useState(avatarSrc)
 
   if (currentAvatarSrc === '') return <></>

packages/deprecated/bot-engine/src/components/avatars/DefaultAvatar.tsx

@@ -1,46 +1,42 @@
 import React from 'react'
 
-export const DefaultAvatar = (): JSX.Element => {
-  return (
-    <figure
-      className={
-        'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-10 xs:h-10 xs:text-xl'
-      }
-      data-testid="default-avatar"
+export const DefaultAvatar = () => (
+  <figure
+    className={
+      'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-10 xs:h-10 xs:text-xl'
+    }
+    data-testid="default-avatar"
+  >
+    <svg
+      width="75"
+      height="75"
+      viewBox="0 0 75 75"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'absolute top-0 left-0 w-6 h-6 xs:w-full xs:h-full xs:text-xl'}
     >
-      <svg
-        width="75"
-        height="75"
-        viewBox="0 0 75 75"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className={
-          'absolute top-0 left-0 w-6 h-6 xs:w-full xs:h-full xs:text-xl'
-        }
-      >
-        <mask id="mask0" x="0" y="0" mask-type="alpha">
-          <circle cx="37.5" cy="37.5" r="37.5" fill="#0042DA" />
-        </mask>
-        <g mask="url(#mask0)">
-          <rect x="-30" y="-43" width="131" height="154" fill="#0042DA" />
-          <rect
-            x="2.50413"
-            y="120.333"
-            width="81.5597"
-            height="86.4577"
-            rx="2.5"
-            transform="rotate(-52.6423 2.50413 120.333)"
-            stroke="#FED23D"
-            strokeWidth="5"
-          />
-          <circle cx="76.5" cy="-1.5" r="29" stroke="#FF8E20" strokeWidth="5" />
-          <path
-            d="M-49.8224 22L-15.5 -40.7879L18.8224 22H-49.8224Z"
-            stroke="#F7F8FF"
-            strokeWidth="5"
-          />
-        </g>
-      </svg>
-    </figure>
-  )
-}
+      <mask id="mask0" x="0" y="0" mask-type="alpha">
+        <circle cx="37.5" cy="37.5" r="37.5" fill="#0042DA" />
+      </mask>
+      <g mask="url(#mask0)">
+        <rect x="-30" y="-43" width="131" height="154" fill="#0042DA" />
+        <rect
+          x="2.50413"
+          y="120.333"
+          width="81.5597"
+          height="86.4577"
+          rx="2.5"
+          transform="rotate(-52.6423 2.50413 120.333)"
+          stroke="#FED23D"
+          strokeWidth="5"
+        />
+        <circle cx="76.5" cy="-1.5" r="29" stroke="#FF8E20" strokeWidth="5" />
+        <path
+          d="M-49.8224 22L-15.5 -40.7879L18.8224 22H-49.8224Z"
+          stroke="#F7F8FF"
+          strokeWidth="5"
+        />
+      </g>
+    </svg>
+  </figure>
+)

packages/deprecated/bot-engine/tsconfig.json

@@ -4,7 +4,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "react": ["./node_modules/@types/react"]
     }
   }
 }