feat(integration): ✨ Add Google Sheets integration

baptisteArno · Jan 18, 2022 · f49b514 · f49b514 · vercel · Jan 18, 2022
1 parent 2814a35
commit f49b514
Show file tree

Hide file tree

Showing 67 changed files with 2,575 additions and 406 deletions.
diff --git a/.env.example b/.env.example
@@ -10,12 +10,19 @@ EMAIL_SERVER_HOST=smtp.example.com
 EMAIL_SERVER_PORT=587
 EMAIL_FROM=[email protected]
 
-# AUTH
+# Storage
+# Used for uploading images, videos, etc...
+S3_UPLOAD_KEY=
+S3_UPLOAD_SECRET=
+S3_UPLOAD_REGION=
+S3_UPLOAD_BUCKET=
+
+# Auth
 # (Optional) Used to login using GitHub
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
 
-# (Optional) Used to login using Google
+# (Optional) Used to login using Google AND Google Sheets integration
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
@@ -27,9 +34,3 @@ FACEBOOK_CLIENT_SECRET=
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
-
-# Used for uploading images, videos, etc...
-S3_UPLOAD_KEY=
-S3_UPLOAD_SECRET=
-S3_UPLOAD_REGION=
-S3_UPLOAD_BUCKET=
diff --git a/apps/builder/assets/icons.tsx b/apps/builder/assets/icons.tsx
@@ -243,3 +243,10 @@ export const FilterIcon = (props: IconProps) => (
     <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
   </Icon>
 )
+
+export const UserIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+    <circle cx="12" cy="7" r="4"></circle>
+  </Icon>
+)
diff --git a/apps/builder/assets/logos.tsx b/apps/builder/assets/logos.tsx
@@ -67,3 +67,180 @@ export const FacebookLogo = (props: IconProps) => (
     />
   </Icon>
 )
+
+export const GoogleSheetsLogo = (props: IconProps) => (
+  <Icon viewBox="0 0 49 67" {...props}>
+    <title>Sheets-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+      <path
+        d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
+        id="path-1"
+      ></path>
+      <path
+        d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
+        id="path-3"
+      ></path>
+      <path
+        d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
+        id="path-5"
+      ></path>
+      <linearGradient
+        x1="50.0053945%"
+        y1="8.58610612%"
+        x2="50.0053945%"
+        y2="100.013939%"
+        id="linearGradient-7"
+      >
+        <stop stopColor="#263238" stopOpacity="0.2" offset="0%"></stop>
+        <stop stopColor="#263238" stopOpacity="0.02" offset="100%"></stop>
+      </linearGradient>
+      <path
+        d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
+        id="path-8"
+      ></path>
+      <path
+        d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
+        id="path-10"
+      ></path>
+      <path
+        d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
+        id="path-12"
+      ></path>
+      <path
+        d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
+        id="path-14"
+      ></path>
+      <radialGradient
+        cx="3.16804688%"
+        cy="2.71744318%"
+        fx="3.16804688%"
+        fy="2.71744318%"
+        r="161.248516%"
+        gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.727273),translate(-0.031680,-0.027174)"
+        id="radialGradient-16"
+      >
+        <stop stopColor="#FFFFFF" stopOpacity="0.1" offset="0%"></stop>
+        <stop stopColor="#FFFFFF" stopOpacity="0" offset="100%"></stop>
+      </radialGradient>
+    </defs>
+    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="Consumer-Apps-Sheets-Large-VD-R8-"
+        transform="translate(-451.000000, -451.000000)"
+      >
+        <g id="Hero" transform="translate(0.000000, 63.000000)">
+          <g id="Personal" transform="translate(277.000000, 299.000000)">
+            <g id="Sheets-icon" transform="translate(174.833333, 89.958333)">
+              <g id="Group">
+                <g id="Clipped">
+                  <mask id="mask-2" fill="white">
+                    <use xlinkHref="#path-1"></use>
+                  </mask>
+                  <g id="SVGID_1_"></g>
+                  <path
+                    d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L36.9791667,10.3541667 L29.5833333,0 Z"
+                    id="Path"
+                    fill="#0F9D58"
+                    fillRule="nonzero"
+                    mask="url(#mask-2)"
+                  ></path>
+                </g>
+                <g id="Clipped">
+                  <mask id="mask-4" fill="white">
+                    <use xlinkHref="#path-3"></use>
+                  </mask>
+                  <g id="SVGID_1_"></g>
+                  <path
+                    d="M11.8333333,31.8020833 L11.8333333,53.25 L35.5,53.25 L35.5,31.8020833 L11.8333333,31.8020833 Z M22.1875,50.2916667 L14.7916667,50.2916667 L14.7916667,46.59375 L22.1875,46.59375 L22.1875,50.2916667 Z M22.1875,44.375 L14.7916667,44.375 L14.7916667,40.6770833 L22.1875,40.6770833 L22.1875,44.375 Z M22.1875,38.4583333 L14.7916667,38.4583333 L14.7916667,34.7604167 L22.1875,34.7604167 L22.1875,38.4583333 Z M32.5416667,50.2916667 L25.1458333,50.2916667 L25.1458333,46.59375 L32.5416667,46.59375 L32.5416667,50.2916667 Z M32.5416667,44.375 L25.1458333,44.375 L25.1458333,40.6770833 L32.5416667,40.6770833 L32.5416667,44.375 Z M32.5416667,38.4583333 L25.1458333,38.4583333 L25.1458333,34.7604167 L32.5416667,34.7604167 L32.5416667,38.4583333 Z"
+                    id="Shape"
+                    fill="#F1F1F1"
+                    fillRule="nonzero"
+                    mask="url(#mask-4)"
+                  ></path>
+                </g>
+                <g id="Clipped">
+                  <mask id="mask-6" fill="white">
+                    <use xlinkHref="#path-5"></use>
+                  </mask>
+                  <g id="SVGID_1_"></g>
+                  <polygon
+                    id="Path"
+                    fill="url(#linearGradient-7)"
+                    fillRule="nonzero"
+                    mask="url(#mask-6)"
+                    points="30.8813021 16.4520313 47.3333333 32.9003646 47.3333333 17.75"
+                  ></polygon>
+                </g>
+                <g id="Clipped">
+                  <mask id="mask-9" fill="white">
+                    <use xlinkHref="#path-8"></use>
+                  </mask>
+                  <g id="SVGID_1_"></g>
+                  <g id="Group" mask="url(#mask-9)">
+                    <g transform="translate(26.625000, -2.958333)">
+                      <path
+                        d="M2.95833333,2.95833333 L2.95833333,16.2708333 C2.95833333,18.7225521 4.94411458,20.7083333 7.39583333,20.7083333 L20.7083333,20.7083333 L2.95833333,2.95833333 Z"
+                        id="Path"
+                        fill="#87CEAC"
+                        fillRule="nonzero"
+                      ></path>
+                    </g>
+                  </g>
+                </g>
+                <g id="Clipped">
+                  <mask id="mask-11" fill="white">
+                    <use xlinkHref="#path-10"></use>
+                  </mask>
+                  <g id="SVGID_1_"></g>
+                  <path
+                    d="M4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,4.80729167 C0,2.36666667 1.996875,0.369791667 4.4375,0.369791667 L29.5833333,0.369791667 L29.5833333,0 L4.4375,0 Z"
+                    id="Path"
+                    fillOpacity="0.2"
+                    fill="#FFFFFF"
+                    fillRule="nonzero"
+                    mask="url(#mask-11)"
+                  ></path>
+                </g>
+                <g id="Clipped">
+                  <mask id="mask-13" fill="white">
+                    <use xlinkHref="#path-12"></use>
+                  </mask>
+                  <g id="SVGID_1_"></g>
+                  <path
+                    d="M42.8958333,64.7135417 L4.4375,64.7135417 C1.996875,64.7135417 0,62.7166667 0,60.2760417 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,60.2760417 C47.3333333,62.7166667 45.3364583,64.7135417 42.8958333,64.7135417 Z"
+                    id="Path"
+                    fillOpacity="0.2"
+                    fill="#263238"
+                    fillRule="nonzero"
+                    mask="url(#mask-13)"
+                  ></path>
+                </g>
+                <g id="Clipped">
+                  <mask id="mask-15" fill="white">
+                    <use xlinkHref="#path-14"></use>
+                  </mask>
+                  <g id="SVGID_1_"></g>
+                  <path
+                    d="M34.0208333,17.75 C31.5691146,17.75 29.5833333,15.7642188 29.5833333,13.3125 L29.5833333,13.6822917 C29.5833333,16.1340104 31.5691146,18.1197917 34.0208333,18.1197917 L47.3333333,18.1197917 L47.3333333,17.75 L34.0208333,17.75 Z"
+                    id="Path"
+                    fillOpacity="0.1"
+                    fill="#263238"
+                    fillRule="nonzero"
+                    mask="url(#mask-15)"
+                  ></path>
+                </g>
+              </g>
+              <path
+                d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z"
+                id="Path"
+                fill="url(#radialGradient-16)"
+                fillRule="nonzero"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </Icon>
+)
diff --git a/apps/builder/components/board/StepTypesList/StepCard.tsx b/apps/builder/components/board/StepTypesList/StepCard.tsx
@@ -1,5 +1,5 @@
 import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
-import { BubbleStepType, InputStepType, StepType, LogicStepType } from 'models'
+import { StepType, DraggableStepType } from 'models'
 import { useDnd } from 'contexts/DndContext'
 import React, { useEffect, useState } from 'react'
 import { StepIcon } from './StepIcon'
@@ -9,11 +9,8 @@ export const StepCard = ({
   type,
   onMouseDown,
 }: {
-  type: BubbleStepType | InputStepType | LogicStepType
-  onMouseDown: (
-    e: React.MouseEvent,
-    type: BubbleStepType | InputStepType | LogicStepType
-  ) => void
+  type: DraggableStepType
+  onMouseDown: (e: React.MouseEvent, type: DraggableStepType) => void
 }) => {
   const { draggedStepType } = useDnd()
   const [isMouseDown, setIsMouseDown] = useState(false)

diff --git a/apps/builder/components/board/StepTypesList/StepIcon.tsx b/apps/builder/components/board/StepTypesList/StepIcon.tsx
@@ -12,48 +12,45 @@ import {
   PhoneIcon,
   TextIcon,
 } from 'assets/icons'
-import { BubbleStepType, InputStepType, LogicStepType, StepType } from 'models'
+import { GoogleSheetsLogo } from 'assets/logos'
+import {
+  BubbleStepType,
+  InputStepType,
+  IntegrationStepType,
+  LogicStepType,
+  StepType,
+} from 'models'
 import React from 'react'
 
 type StepIconProps = { type: StepType } & IconProps
 
 export const StepIcon = ({ type, ...props }: StepIconProps) => {
   switch (type) {
-    case BubbleStepType.TEXT: {
+    case BubbleStepType.TEXT:
       return <ChatIcon {...props} />
-    }
-    case InputStepType.TEXT: {
+    case InputStepType.TEXT:
       return <TextIcon {...props} />
-    }
-    case InputStepType.NUMBER: {
+    case InputStepType.NUMBER:
       return <NumberIcon {...props} />
-    }
-    case InputStepType.EMAIL: {
+    case InputStepType.EMAIL:
       return <EmailIcon {...props} />
-    }
-    case InputStepType.URL: {
+    case InputStepType.URL:
       return <GlobeIcon {...props} />
-    }
-    case InputStepType.DATE: {
+    case InputStepType.DATE:
       return <CalendarIcon {...props} />
-    }
-    case InputStepType.PHONE: {
+    case InputStepType.PHONE:
       return <PhoneIcon {...props} />
-    }
-    case InputStepType.CHOICE: {
+    case InputStepType.CHOICE:
       return <CheckSquareIcon {...props} />
-    }
-    case LogicStepType.SET_VARIABLE: {
+    case LogicStepType.SET_VARIABLE:
       return <EditIcon {...props} />
-    }
-    case LogicStepType.CONDITION: {
+    case LogicStepType.CONDITION:
       return <FilterIcon {...props} />
-    }
-    case 'start': {
+    case IntegrationStepType.GOOGLE_SHEETS:
+      return <GoogleSheetsLogo {...props} />
+    case 'start':
       return <FlagIcon {...props} />
-    }
-    default: {
+    default:
       return <></>
-    }
   }
 }
diff --git a/apps/builder/components/board/StepTypesList/StepTypeLabel.tsx b/apps/builder/components/board/StepTypesList/StepTypeLabel.tsx
@@ -1,5 +1,11 @@
 import { Text } from '@chakra-ui/react'
-import { BubbleStepType, InputStepType, LogicStepType, StepType } from 'models'
+import {
+  BubbleStepType,
+  InputStepType,
+  IntegrationStepType,
+  LogicStepType,
+  StepType,
+} from 'models'
 import React from 'react'
 
 type Props = { type: StepType }
@@ -34,6 +40,9 @@ export const StepTypeLabel = ({ type }: Props) => {
     case LogicStepType.CONDITION: {
       return <Text>Condition</Text>
     }
+    case IntegrationStepType.GOOGLE_SHEETS: {
+      return <Text>Sheets</Text>
+    }
     default: {
       return <></>
     }

diff --git a/apps/builder/components/board/StepTypesList/StepTypesList.tsx b/apps/builder/components/board/StepTypesList/StepTypesList.tsx
@@ -5,7 +5,13 @@ import {
   SimpleGrid,
   useEventListener,
 } from '@chakra-ui/react'
-import { BubbleStepType, InputStepType, LogicStepType } from 'models'
+import {
+  BubbleStepType,
+  DraggableStepType,
+  InputStepType,
+  IntegrationStepType,
+  LogicStepType,
+} from 'models'
 import { useDnd } from 'contexts/DndContext'
 import React, { useState } from 'react'
 import { StepCard, StepCardOverlay } from './StepCard'
@@ -29,10 +35,7 @@ export const StepTypesList = () => {
   }
   useEventListener('mousemove', handleMouseMove)
 
-  const handleMouseDown = (
-    e: React.MouseEvent,
-    type: BubbleStepType | InputStepType | LogicStepType
-  ) => {
+  const handleMouseDown = (e: React.MouseEvent, type: DraggableStepType) => {
     const element = e.currentTarget as HTMLDivElement
     const rect = element.getBoundingClientRect()
     const relativeX = e.clientX - rect.left
@@ -94,6 +97,15 @@ export const StepTypesList = () => {
           <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
         ))}
       </SimpleGrid>
+
+      <Text fontSize="sm" fontWeight="semibold" color="gray.600">
+        Integrations
+      </Text>
+      <SimpleGrid columns={2} spacing="2">
+        {Object.values(IntegrationStepType).map((type) => (
+          <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+        ))}
+      </SimpleGrid>
       {draggedStepType && (
         <StepCardOverlay
           type={draggedStepType}