✨ New QR code block (#1142)

packages/forge/blocks/qrcode/actions/generateQrCodeImage.ts

@@ -0,0 +1,41 @@
+import { createAction, option } from '@typebot.io/forge'
+import { toBuffer as generateQrCodeBuffer } from 'qrcode'
+import { uploadFileToBucket } from '@typebot.io/lib/s3/uploadFileToBucket'
+import { createId } from '@typebot.io/lib/createId'
+
+export const generateQrCode = createAction({
+  name: 'Generate a QR Code',
+  options: option.object({
+    data: option.string.layout({
+      label: 'Data',
+      helperText:
+        'This can be a URL, or any text data you want to encode into a QR code.',
+    }),
+    saveUrlInVariableId: option.string.layout({
+      label: 'Save QR code image URL',
+      inputType: 'variableDropdown',
+    }),
+  }),
+  getSetVariableIds: (options) =>
+    options.saveUrlInVariableId ? [options.saveUrlInVariableId] : [],
+  run: {
+    server: async ({ options, variables, logs }) => {
+      if (!options.data)
+        return logs.add(
+          'QR code data is empty. Please provide the data to be encoded into the QR code.'
+        )
+      if (!options.saveUrlInVariableId)
+        return logs.add(
+          'QR code image URL is not specified. Please select a variable to save the generated QR code image.'
+        )
+
+      const url = await uploadFileToBucket({
+        file: await generateQrCodeBuffer(options.data),
+        key: `tmp/qrcodes/${createId() + createId()}.png`,
+        mimeType: 'image/png',
+      })
+
+      variables.set(options.saveUrlInVariableId, url)
+    },
+  },
+})

packages/forge/blocks/qrcode/index.ts

@@ -0,0 +1,11 @@
+import { createBlock } from '@typebot.io/forge'
+import { QrCodeLogo } from './logo'
+import { generateQrCode } from './actions/generateQrCodeImage'
+
+export const qrCode = createBlock({
+  id: 'qr-code',
+  name: 'QR code',
+  tags: [],
+  LightLogo: QrCodeLogo,
+  actions: [generateQrCode],
+})

packages/forge/blocks/qrcode/logo.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+export const QrCodeLogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    {...props}
+  >
+    <rect width="5" height="5" x="3" y="3" rx="1" />
+    <rect width="5" height="5" x="16" y="3" rx="1" />
+    <rect width="5" height="5" x="3" y="16" rx="1" />
+    <path d="M21 16h-3a2 2 0 0 0-2 2v3" />
+    <path d="M21 21v.01" />
+    <path d="M12 7v3a2 2 0 0 1-2 2H7" />
+    <path d="M3 12h.01" />
+    <path d="M12 3h.01" />
+    <path d="M12 16v.01" />
+    <path d="M16 12h1" />
+    <path d="M21 12v.01" />
+    <path d="M12 21v-1" />
+  </svg>
+)

packages/forge/blocks/qrcode/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@typebot.io/qrcode-block",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "keywords": [],
+  "license": "ISC",
+  "devDependencies": {
+    "@typebot.io/forge": "workspace:*",
+    "@typebot.io/lib": "workspace:*",
+    "@typebot.io/tsconfig": "workspace:*",
+    "@types/react": "18.2.15",
+    "@types/qrcode": "^1.5.3",
+    "typescript": "5.3.2"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.3"
+  }
+}

packages/forge/blocks/qrcode/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@typebot.io/tsconfig/base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "noEmit": true,
+    "jsx": "react"
+  }
+}

packages/forge/core/index.ts

@@ -1,3 +1,4 @@
+import { ZodRawShape } from 'zod'
 import { AuthDefinition, BlockDefinition, ActionDefinition } from './types'
 import { z } from './zod'
 
@@ -18,8 +19,8 @@ export const createBlock = <
 
 export const createAction = <
   A extends AuthDefinition,
-  BaseOptions extends z.ZodObject<any>,
-  O extends z.ZodObject<any>
+  BaseOptions extends z.ZodObject<ZodRawShape> = z.ZodObject<{}>,
+  O extends z.ZodObject<ZodRawShape> = z.ZodObject<{}>
 >(
   actionDefinition: {
     auth?: A

packages/forge/core/types.ts

@@ -1,5 +1,6 @@
 import { SVGProps } from 'react'
 import { z } from './zod'
+import { ZodRawShape } from 'zod'
 
 export type VariableStore = {
   get: (variableId: string) => string | (string | null)[] | null | undefined
@@ -28,8 +29,8 @@ export type ReadOnlyVariableStore = Omit<VariableStore, 'set'>
 
 export type ActionDefinition<
   A extends AuthDefinition,
-  BaseOptions extends z.ZodObject<any>,
-  Options extends z.ZodObject<any> = z.ZodObject<{}>
+  BaseOptions extends z.ZodObject<ZodRawShape> = z.ZodObject<{}>,
+  Options extends z.ZodObject<ZodRawShape> = z.ZodObject<{}>
 > = {
   name: string
   fetchers?: FetcherDefinition<A, z.infer<BaseOptions> & z.infer<Options>>[]

packages/forge/repository/index.ts

@@ -4,4 +4,5 @@ export const enabledBlocks = [
   'zemantic-ai',
   'cal-com',
   'chat-node',
+  'qr-code',
 ] as const

packages/forge/schemas/index.ts

@@ -1,4 +1,5 @@
 // Do not edit this file manually
+import { qrCode } from '@typebot.io/qrcode-block'
 import { chatNode } from '@typebot.io/chat-node-block'
 import { calCom } from '@typebot.io/cal-com-block'
 import { zemanticAi } from '@typebot.io/zemantic-ai-block'
@@ -16,6 +17,7 @@ export const forgedBlocks = [
   zemanticAi,
   calCom,
   chatNode,
+  qrCode,
 ] as BlockDefinition<(typeof enabledBlocks)[number], any, any>[]
 
 export type ForgedBlockDefinition = (typeof forgedBlocks)[number]

packages/forge/schemas/package.json

@@ -12,6 +12,7 @@
     "@typebot.io/openai-block": "workspace:*",
     "@typebot.io/zemantic-ai-block": "workspace:*",
     "@typebot.io/cal-com-block": "workspace:*",
-    "@typebot.io/chat-node-block": "workspace:*"
+    "@typebot.io/chat-node-block": "workspace:*",
+    "@typebot.io/qrcode-block": "workspace:*"
   }
 }