✨ Add Unsplash picker

Closes #413
baptisteArno · Mar 29, 2023 · 3ef4efa · 3ef4efa
1 parent 80b7dbd
commit 3ef4efa
Show file tree

Hide file tree

Showing 13 changed files with 295 additions and 16 deletions.
diff --git a/apps/builder/.env.docker b/apps/builder/.env.docker
@@ -8,3 +8,5 @@ NEXT_PUBLIC_SENTRY_DSN=
 NEXT_PUBLIC_VIEWER_INTERNAL_URL=
 NEXT_PUBLIC_E2E_TEST=
 NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME=
+NEXT_PUBLIC_UNSPLASH_APP_NAME=
+NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=
diff --git a/apps/builder/package.json b/apps/builder/package.json
@@ -37,7 +37,9 @@
     "@trpc/next": "10.16.0",
     "@trpc/react-query": "10.16.0",
     "@trpc/server": "10.16.0",
+    "@typebot.io/emails": "workspace:*",
     "@typebot.io/js": "workspace:*",
+    "@typebot.io/next-international": "0.3.8",
     "@typebot.io/react": "workspace:*",
     "@udecode/plate-basic-marks": "20.4.0",
     "@udecode/plate-common": "^20.4.0",
@@ -57,7 +59,6 @@
     "codemirror": "6.0.1",
     "deep-object-diff": "1.1.9",
     "dequal": "2.0.3",
-    "@typebot.io/emails": "workspace:*",
     "emojilib": "3.0.8",
     "focus-visible": "5.2.0",
     "framer-motion": "10.3.0",
@@ -73,7 +74,6 @@
     "minio": "7.0.32",
     "next": "13.2.4",
     "next-auth": "4.19.2",
-    "@typebot.io/next-international": "0.3.8",
     "nextjs-cors": "^2.1.2",
     "nodemailer": "6.9.1",
     "nprogress": "0.2.0",
@@ -93,12 +93,17 @@
     "swr": "2.1.0",
     "tinycolor2": "1.6.0",
     "trpc-openapi": "1.1.2",
+    "unsplash-js": "^7.0.15",
     "use-debounce": "9.0.3"
   },
   "devDependencies": {
     "@babel/core": "7.21.0",
     "@chakra-ui/styled-system": "2.6.1",
     "@playwright/test": "1.31.2",
+    "@typebot.io/lib": "workspace:*",
+    "@typebot.io/prisma": "workspace:*",
+    "@typebot.io/schemas": "workspace:*",
+    "@typebot.io/tsconfig": "workspace:*",
     "@types/canvas-confetti": "1.6.0",
     "@types/google-spreadsheet": "3.3.1",
     "@types/jsonwebtoken": "9.0.1",
@@ -112,15 +117,11 @@
     "@types/qs": "6.9.7",
     "@types/react": "18.0.28",
     "@types/tinycolor2": "1.4.3",
-    "@typebot.io/prisma": "workspace:*",
     "dotenv": "16.0.3",
     "eslint": "8.36.0",
     "eslint-config-custom": "workspace:*",
-    "@typebot.io/schemas": "workspace:*",
     "superjson": "^1.12.2",
-    "@typebot.io/tsconfig": "workspace:*",
     "typescript": "4.9.5",
-    "@typebot.io/lib": "workspace:*",
     "zod": "3.21.4"
   }
 }
diff --git a/apps/builder/src/components/EditableEmojiOrImageIcon.tsx b/apps/builder/src/components/EditableEmojiOrImageIcon.tsx
@@ -58,6 +58,7 @@ export const EditableEmojiOrImageIcon = ({
               defaultUrl={icon ?? ''}
               onSubmit={onChangeIcon}
               isGiphyEnabled={false}
+              isUnsplashEnabled={false}
               isEmojiEnabled={true}
               onClose={onClose}
             />

diff --git a/...ts/ImageUploadContent/GiphySearchForm.tsx → ...onents/ImageUploadContent/GiphyPicker.tsx b/...ts/ImageUploadContent/GiphySearchForm.tsx → ...onents/ImageUploadContent/GiphyPicker.tsx
@@ -1,7 +1,7 @@
 import { Flex, Stack, Text } from '@chakra-ui/react'
 import { GiphyFetch } from '@giphy/js-fetch-api'
 import { Grid } from '@giphy/react-components'
-import { GiphyLogo } from './GiphyLogo'
+import { GiphyLogo } from '../logos/GiphyLogo'
 import React, { useState } from 'react'
 import { env, isEmpty } from '@typebot.io/lib'
 import { TextInput } from '../inputs'
@@ -12,7 +12,7 @@ type GiphySearchFormProps = {
 
 const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
 
-export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
+export const GiphyPicker = ({ onSubmit }: GiphySearchFormProps) => {
   const [inputValue, setInputValue] = useState('')
 
   const fetchGifs = (offset: number) =>
@@ -24,7 +24,7 @@ export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
   return isEmpty(env('GIPHY_API_KEY')) ? (
     <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
   ) : (
-    <Stack>
+    <Stack spacing={4} pt="2">
       <Flex align="center">
         <TextInput
           autoFocus

diff --git a/apps/builder/src/components/ImageUploadContent/ImageUploadContent.tsx b/apps/builder/src/components/ImageUploadContent/ImageUploadContent.tsx
@@ -1,16 +1,21 @@
 import { useState } from 'react'
 import { Button, Flex, HStack, Stack } from '@chakra-ui/react'
 import { UploadButton } from './UploadButton'
-import { GiphySearchForm } from './GiphySearchForm'
+import { GiphyPicker } from './GiphyPicker'
 import { TextInput } from '../inputs/TextInput'
 import { EmojiSearchableList } from './emoji/EmojiSearchableList'
+import { UnsplashPicker } from './UnsplashPicker'
+
+type Tabs = 'link' | 'upload' | 'giphy' | 'emoji' | 'unsplash'
 
 type Props = {
   filePath: string
   includeFileName?: boolean
   defaultUrl?: string
   isEmojiEnabled?: boolean
   isGiphyEnabled?: boolean
+  isUnsplashEnabled?: boolean
+  imageSize?: 'small' | 'regular' | 'thumb'
   onSubmit: (url: string) => void
   onClose?: () => void
 }
@@ -22,11 +27,13 @@ export const ImageUploadContent = ({
   onSubmit,
   isEmojiEnabled = false,
   isGiphyEnabled = true,
+  isUnsplashEnabled = true,
+  imageSize = 'regular',
   onClose,
 }: Props) => {
-  const [currentTab, setCurrentTab] = useState<
-    'link' | 'upload' | 'giphy' | 'emoji'
-  >(isEmojiEnabled ? 'emoji' : 'link')
+  const [currentTab, setCurrentTab] = useState<Tabs>(
+    isEmojiEnabled ? 'emoji' : 'upload'
+  )
 
   const handleSubmit = (url: string) => {
     onSubmit(url)
@@ -68,12 +75,22 @@ export const ImageUploadContent = ({
             Giphy
           </Button>
         )}
+        {isUnsplashEnabled && (
+          <Button
+            variant={currentTab === 'unsplash' ? 'solid' : 'ghost'}
+            onClick={() => setCurrentTab('unsplash')}
+            size="sm"
+          >
+            Unsplash
+          </Button>
+        )}
       </HStack>
 
       <BodyContent
         filePath={filePath}
         includeFileName={includeFileName}
         tab={currentTab}
+        imageSize={imageSize}
         onSubmit={handleSubmit}
         defaultUrl={defaultUrl}
       />
@@ -86,12 +103,14 @@ const BodyContent = ({
   filePath,
   tab,
   defaultUrl,
+  imageSize,
   onSubmit,
 }: {
   includeFileName?: boolean
   filePath: string
-  tab: 'upload' | 'link' | 'giphy' | 'emoji'
+  tab: Tabs
   defaultUrl?: string
+  imageSize: 'small' | 'regular' | 'thumb'
   onSubmit: (url: string) => void
 }) => {
   switch (tab) {
@@ -109,6 +128,8 @@ const BodyContent = ({
       return <GiphyContent onNewUrl={onSubmit} />
     case 'emoji':
       return <EmojiSearchableList onEmojiSelected={onSubmit} />
+    case 'unsplash':
+      return <UnsplashPicker imageSize={imageSize} onImageSelect={onSubmit} />
   }
 }
 
@@ -146,5 +167,5 @@ const EmbedLinkContent = ({
 )
 
 const GiphyContent = ({ onNewUrl }: ContentProps) => (
-  <GiphySearchForm onSubmit={onNewUrl} />
+  <GiphyPicker onSubmit={onNewUrl} />
 )