✨ 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"
+  }
+}