refactor: ♻️ Rename step to block

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/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/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>
   }
 }

apps/builder/components/editor/BlocksSideBar/BlocksSideBar.tsx

@@ -10,20 +10,20 @@ import {
   Fade,
 } from '@chakra-ui/react'
 import {
-  BubbleStepType,
-  DraggableStepType,
-  InputStepType,
-  IntegrationStepType,
-  LogicStepType,
+  BubbleBlockType,
+  DraggableBlockType,
+  InputBlockType,
+  IntegrationBlockType,
+  LogicBlockType,
 } from 'models'
-import { useStepDnd } from 'contexts/GraphDndContext'
+import { useBlockDnd } from 'contexts/GraphDndContext'
 import React, { useState } from 'react'
-import { StepCard, StepCardOverlay } from './StepCard'
+import { BlockCard, BlockCardOverlay } from './BlockCard'
 import { LockedIcon, UnlockedIcon } from 'assets/icons'
 import { headerHeight } from 'components/shared/TypebotHeader'
 
-export const StepsSideBar = () => {
-  const { setDraggedStepType, draggedStepType } = useStepDnd()
+export const BlocksSideBar = () => {
+  const { setDraggedBlockType, draggedBlockType } = useBlockDnd()
   const [position, setPosition] = useState({
     x: 0,
     y: 0,
@@ -33,7 +33,7 @@ export const StepsSideBar = () => {
   const [isExtended, setIsExtended] = useState(true)
 
   const handleMouseMove = (event: MouseEvent) => {
-    if (!draggedStepType) return
+    if (!draggedBlockType) return
     const { clientX, clientY } = event
     setPosition({
       ...position,
@@ -43,19 +43,19 @@ export const StepsSideBar = () => {
   }
   useEventListener('mousemove', handleMouseMove)
 
-  const handleMouseDown = (e: React.MouseEvent, type: DraggableStepType) => {
+  const handleMouseDown = (e: React.MouseEvent, type: DraggableBlockType) => {
     const element = e.currentTarget as HTMLDivElement
     const rect = element.getBoundingClientRect()
     setPosition({ x: rect.left, y: rect.top })
     const x = e.clientX - rect.left
     const y = e.clientY - rect.top
     setRelativeCoordinates({ x, y })
-    setDraggedStepType(type)
+    setDraggedBlockType(type)
   }
 
   const handleMouseUp = () => {
-    if (!draggedStepType) return
-    setDraggedStepType(undefined)
+    if (!draggedBlockType) return
+    setDraggedBlockType(undefined)
     setPosition({
       x: 0,
       y: 0,
@@ -116,8 +116,8 @@ export const StepsSideBar = () => {
             Bubbles
           </Text>
           <SimpleGrid columns={2} spacing="3">
-            {Object.values(BubbleStepType).map((type) => (
-              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            {Object.values(BubbleBlockType).map((type) => (
+              <BlockCard key={type} type={type} onMouseDown={handleMouseDown} />
             ))}
           </SimpleGrid>
         </Stack>
@@ -127,8 +127,8 @@ export const StepsSideBar = () => {
             Inputs
           </Text>
           <SimpleGrid columns={2} spacing="3">
-            {Object.values(InputStepType).map((type) => (
-              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            {Object.values(InputBlockType).map((type) => (
+              <BlockCard key={type} type={type} onMouseDown={handleMouseDown} />
             ))}
           </SimpleGrid>
         </Stack>
@@ -138,8 +138,8 @@ export const StepsSideBar = () => {
             Logic
           </Text>
           <SimpleGrid columns={2} spacing="3">
-            {Object.values(LogicStepType).map((type) => (
-              <StepCard key={type} type={type} onMouseDown={handleMouseDown} />
+            {Object.values(LogicBlockType).map((type) => (
+              <BlockCard key={type} type={type} onMouseDown={handleMouseDown} />
             ))}
           </SimpleGrid>
         </Stack>
@@ -149,21 +149,21 @@ export const StepsSideBar = () => {
             Integrations
           </Text>
           <SimpleGrid columns={2} spacing="3">
-            {Object.values(IntegrationStepType).map((type) => (
-              <StepCard
+            {Object.values(IntegrationBlockType).map((type) => (
+              <BlockCard
                 key={type}
                 type={type}
                 onMouseDown={handleMouseDown}
-                isDisabled={type === IntegrationStepType.MAKE_COM}
+                isDisabled={type === IntegrationBlockType.MAKE_COM}
               />
             ))}
           </SimpleGrid>
         </Stack>
 
-        {draggedStepType && (
+        {draggedBlockType && (
           <Portal>
-            <StepCardOverlay
-              type={draggedStepType}
+            <BlockCardOverlay
+              type={draggedBlockType}
               onMouseUp={handleMouseUp}
               pos="fixed"
               top="0"

apps/builder/components/editor/BlocksSideBar/index.tsx

@@ -0,0 +1 @@
+export { BlocksSideBar } from './BlocksSideBar'

apps/builder/components/editor/StepsSideBar/index.tsx

@@ -1 +0,0 @@
-export { StepsSideBar } from './StepSideBar'

apps/builder/components/editor/preview/PreviewDrawer.tsx

@@ -21,7 +21,7 @@ import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 
 export const PreviewDrawer = () => {
   const { typebot } = useTypebot()
-  const { setRightPanel, startPreviewAtBlock } = useEditor()
+  const { setRightPanel, startPreviewAtGroup } = useEditor()
   const { setPreviewingEdge } = useGraph()
   const [isResizing, setIsResizing] = useState(false)
   const [width, setWidth] = useState(500)
@@ -96,14 +96,14 @@ export const PreviewDrawer = () => {
             borderRadius={'lg'}
             h="full"
             w="full"
-            key={restartKey + (startPreviewAtBlock ?? '')}
+            key={restartKey + (startPreviewAtGroup ?? '')}
             pointerEvents={isResizing ? 'none' : 'auto'}
           >
             <TypebotViewer
               typebot={publicTypebot}
-              onNewBlockVisible={setPreviewingEdge}
+              onNewGroupVisible={setPreviewingEdge}
               onNewLog={handleNewLog}
-              startBlockId={startPreviewAtBlock}
+              startGroupId={startPreviewAtGroup}
               isPreview
             />
           </Flex>