refactor: ♻️ Rename step to block

.gitignore

@@ -22,3 +22,5 @@ firebaseServiceAccount.json
 # Wordpress
 .svn
 tags
+
+dump.sql

apps/builder/components/editor/StepsSideBar/StepCard.tsx → apps/builder/components/editor/BlocksSideBar/BlockCard.tsx

@@ -1,25 +1,25 @@
 import { Flex, HStack, StackProps, Text, Tooltip } from '@chakra-ui/react'
-import { StepType, DraggableStepType } from 'models'
-import { useStepDnd } from 'contexts/GraphDndContext'
+import { BlockType, DraggableBlockType } from 'models'
+import { useBlockDnd } from 'contexts/GraphDndContext'
 import React, { useEffect, useState } from 'react'
-import { StepIcon } from './StepIcon'
-import { StepTypeLabel } from './StepTypeLabel'
+import { BlockIcon } from './BlockIcon'
+import { BlockTypeLabel } from './BlockTypeLabel'
 
-export const StepCard = ({
+export const BlockCard = ({
   type,
   onMouseDown,
   isDisabled = false,
 }: {
-  type: DraggableStepType
+  type: DraggableBlockType
   isDisabled?: boolean
-  onMouseDown: (e: React.MouseEvent, type: DraggableStepType) => void
+  onMouseDown: (e: React.MouseEvent, type: DraggableBlockType) => void
 }) => {
-  const { draggedStepType } = useStepDnd()
+  const { draggedBlockType } = useBlockDnd()
   const [isMouseDown, setIsMouseDown] = useState(false)
 
   useEffect(() => {
-    setIsMouseDown(draggedStepType === type)
-  }, [draggedStepType, type])
+    setIsMouseDown(draggedBlockType === type)
+  }, [draggedBlockType, type])
 
   const handleMouseDown = (e: React.MouseEvent) => onMouseDown(e, type)
 
@@ -43,8 +43,8 @@ export const StepCard = ({
         >
           {!isMouseDown ? (
             <>
-              <StepIcon type={type} />
-              <StepTypeLabel type={type} />
+              <BlockIcon type={type} />
+              <BlockTypeLabel type={type} />
             </>
           ) : (
             <Text color="white" userSelect="none">
@@ -57,10 +57,10 @@ export const StepCard = ({
   )
 }
 
-export const StepCardOverlay = ({
+export const BlockCardOverlay = ({
   type,
   ...props
-}: StackProps & { type: StepType }) => {
+}: StackProps & { type: BlockType }) => {
   return (
     <HStack
       borderWidth="1px"
@@ -76,8 +76,8 @@ export const StepCardOverlay = ({
       zIndex={2}
       {...props}
     >
-      <StepIcon type={type} />
-      <StepTypeLabel type={type} />
+      <BlockIcon type={type} />
+      <BlockTypeLabel type={type} />
     </HStack>
   )
 }

apps/builder/components/editor/StepsSideBar/StepIcon.tsx → apps/builder/components/editor/BlocksSideBar/BlockIcon.tsx

@@ -30,67 +30,67 @@ import {
   ZapierLogo,
 } from 'assets/logos'
 import {
-  BubbleStepType,
-  InputStepType,
-  IntegrationStepType,
-  LogicStepType,
-  StepType,
+  BubbleBlockType,
+  InputBlockType,
+  IntegrationBlockType,
+  LogicBlockType,
+  BlockType,
 } from 'models'
 import React from 'react'
 
-type StepIconProps = { type: StepType } & IconProps
+type BlockIconProps = { type: BlockType } & IconProps
 
-export const StepIcon = ({ type, ...props }: StepIconProps) => {
+export const BlockIcon = ({ type, ...props }: BlockIconProps) => {
   switch (type) {
-    case BubbleStepType.TEXT:
+    case BubbleBlockType.TEXT:
       return <ChatIcon color="blue.500" {...props} />
-    case BubbleStepType.IMAGE:
+    case BubbleBlockType.IMAGE:
       return <ImageIcon color="blue.500" {...props} />
-    case BubbleStepType.VIDEO:
+    case BubbleBlockType.VIDEO:
       return <FilmIcon color="blue.500" {...props} />
-    case BubbleStepType.EMBED:
+    case BubbleBlockType.EMBED:
       return <LayoutIcon color="blue.500" {...props} />
-    case InputStepType.TEXT:
+    case InputBlockType.TEXT:
       return <TextIcon color="orange.500" {...props} />
-    case InputStepType.NUMBER:
+    case InputBlockType.NUMBER:
       return <NumberIcon color="orange.500" {...props} />
-    case InputStepType.EMAIL:
+    case InputBlockType.EMAIL:
       return <EmailIcon color="orange.500" {...props} />
-    case InputStepType.URL:
+    case InputBlockType.URL:
       return <GlobeIcon color="orange.500" {...props} />
-    case InputStepType.DATE:
+    case InputBlockType.DATE:
       return <CalendarIcon color="orange.500" {...props} />
-    case InputStepType.PHONE:
+    case InputBlockType.PHONE:
       return <PhoneIcon color="orange.500" {...props} />
-    case InputStepType.CHOICE:
+    case InputBlockType.CHOICE:
       return <CheckSquareIcon color="orange.500" {...props} />
-    case InputStepType.PAYMENT:
+    case InputBlockType.PAYMENT:
       return <CreditCardIcon color="orange.500" {...props} />
-    case InputStepType.RATING:
+    case InputBlockType.RATING:
       return <StarIcon color="orange.500" {...props} />
-    case LogicStepType.SET_VARIABLE:
+    case LogicBlockType.SET_VARIABLE:
       return <EditIcon color="purple.500" {...props} />
-    case LogicStepType.CONDITION:
+    case LogicBlockType.CONDITION:
       return <FilterIcon color="purple.500" {...props} />
-    case LogicStepType.REDIRECT:
+    case LogicBlockType.REDIRECT:
       return <ExternalLinkIcon color="purple.500" {...props} />
-    case LogicStepType.CODE:
+    case LogicBlockType.CODE:
       return <CodeIcon color="purple.500" {...props} />
-    case LogicStepType.TYPEBOT_LINK:
+    case LogicBlockType.TYPEBOT_LINK:
       return <BoxIcon color="purple.500" {...props} />
-    case IntegrationStepType.GOOGLE_SHEETS:
+    case IntegrationBlockType.GOOGLE_SHEETS:
       return <GoogleSheetsLogo {...props} />
-    case IntegrationStepType.GOOGLE_ANALYTICS:
+    case IntegrationBlockType.GOOGLE_ANALYTICS:
       return <GoogleAnalyticsLogo {...props} />
-    case IntegrationStepType.WEBHOOK:
+    case IntegrationBlockType.WEBHOOK:
       return <WebhookIcon {...props} />
-    case IntegrationStepType.ZAPIER:
+    case IntegrationBlockType.ZAPIER:
       return <ZapierLogo {...props} />
-    case IntegrationStepType.MAKE_COM:
+    case IntegrationBlockType.MAKE_COM:
       return <MakeComLogo {...props} />
-    case IntegrationStepType.PABBLY_CONNECT:
+    case IntegrationBlockType.PABBLY_CONNECT:
       return <PabblyConnectLogo {...props} />
-    case IntegrationStepType.EMAIL:
+    case IntegrationBlockType.EMAIL:
       return <SendEmailIcon {...props} />
     case 'start':
       return <FlagIcon {...props} />

apps/builder/components/editor/StepsSideBar/StepTypeLabel.tsx → apps/builder/components/editor/BlocksSideBar/BlockTypeLabel.tsx

@@ -1,87 +1,87 @@
 import { Text, Tooltip } from '@chakra-ui/react'
 import {
-  BubbleStepType,
-  InputStepType,
-  IntegrationStepType,
-  LogicStepType,
-  StepType,
+  BubbleBlockType,
+  InputBlockType,
+  IntegrationBlockType,
+  LogicBlockType,
+  BlockType,
 } from 'models'
 import React from 'react'
 
-type Props = { type: StepType }
+type Props = { type: BlockType }
 
-export const StepTypeLabel = ({ type }: Props): JSX.Element => {
+export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
   switch (type) {
     case 'start':
       return <Text>Start</Text>
-    case BubbleStepType.TEXT:
-    case InputStepType.TEXT:
+    case BubbleBlockType.TEXT:
+    case InputBlockType.TEXT:
       return <Text>Text</Text>
-    case BubbleStepType.IMAGE:
+    case BubbleBlockType.IMAGE:
       return <Text>Image</Text>
-    case BubbleStepType.VIDEO:
+    case BubbleBlockType.VIDEO:
       return <Text>Video</Text>
-    case BubbleStepType.EMBED:
+    case BubbleBlockType.EMBED:
       return (
         <Tooltip label="Embed a pdf, an iframe, a website...">
           <Text>Embed</Text>
         </Tooltip>
       )
-    case InputStepType.NUMBER:
+    case InputBlockType.NUMBER:
       return <Text>Number</Text>
-    case InputStepType.EMAIL:
+    case InputBlockType.EMAIL:
       return <Text>Email</Text>
-    case InputStepType.URL:
+    case InputBlockType.URL:
       return <Text>Website</Text>
-    case InputStepType.DATE:
+    case InputBlockType.DATE:
       return <Text>Date</Text>
-    case InputStepType.PHONE:
+    case InputBlockType.PHONE:
       return <Text>Phone</Text>
-    case InputStepType.CHOICE:
+    case InputBlockType.CHOICE:
       return <Text>Button</Text>
-    case InputStepType.PAYMENT:
+    case InputBlockType.PAYMENT:
       return <Text>Payment</Text>
-    case InputStepType.RATING:
+    case InputBlockType.RATING:
       return <Text>Rating</Text>
-    case LogicStepType.SET_VARIABLE:
+    case LogicBlockType.SET_VARIABLE:
       return <Text>Set variable</Text>
-    case LogicStepType.CONDITION:
+    case LogicBlockType.CONDITION:
       return <Text>Condition</Text>
-    case LogicStepType.REDIRECT:
+    case LogicBlockType.REDIRECT:
       return <Text>Redirect</Text>
-    case LogicStepType.CODE:
+    case LogicBlockType.CODE:
       return (
         <Tooltip label="Run Javascript code">
           <Text>Code</Text>
         </Tooltip>
       )
-    case LogicStepType.TYPEBOT_LINK:
+    case LogicBlockType.TYPEBOT_LINK:
       return (
         <Tooltip label="Link to another of your typebots">
           <Text>Typebot</Text>
         </Tooltip>
       )
-    case IntegrationStepType.GOOGLE_SHEETS:
+    case IntegrationBlockType.GOOGLE_SHEETS:
       return (
         <Tooltip label="Google Sheets">
           <Text>Sheets</Text>
         </Tooltip>
       )
-    case IntegrationStepType.GOOGLE_ANALYTICS:
+    case IntegrationBlockType.GOOGLE_ANALYTICS:
       return (
         <Tooltip label="Google Analytics">
           <Text>Analytics</Text>
         </Tooltip>
       )
-    case IntegrationStepType.WEBHOOK:
+    case IntegrationBlockType.WEBHOOK:
       return <Text>Webhook</Text>
-    case IntegrationStepType.ZAPIER:
+    case IntegrationBlockType.ZAPIER:
       return <Text>Zapier</Text>
-    case IntegrationStepType.MAKE_COM:
+    case IntegrationBlockType.MAKE_COM:
       return <Text>Make.com</Text>
-    case IntegrationStepType.PABBLY_CONNECT:
+    case IntegrationBlockType.PABBLY_CONNECT:
       return <Text>Pabbly</Text>
-    case IntegrationStepType.EMAIL:
+    case IntegrationBlockType.EMAIL:
       return <Text>Email</Text>
   }
 }