feat(inputs): ✨ Add number input

apps/builder/contexts/DndContext.tsx

@@ -1,4 +1,4 @@
-import { Step, StepType } from 'models'
+import { BubbleStep, BubbleStepType, InputStep, InputStepType } from 'models'
 import {
   createContext,
   Dispatch,
@@ -8,19 +8,24 @@ import {
   useState,
 } from 'react'
 
+export type DraggableStep = BubbleStep | InputStep
+export type DraggableStepType = BubbleStepType | InputStepType
+
 const dndContext = createContext<{
-  draggedStepType?: StepType
-  setDraggedStepType: Dispatch<SetStateAction<StepType | undefined>>
-  draggedStep?: Step
-  setDraggedStep: Dispatch<SetStateAction<Step | undefined>>
+  draggedStepType?: DraggableStepType
+  setDraggedStepType: Dispatch<SetStateAction<DraggableStepType | undefined>>
+  draggedStep?: DraggableStep
+  setDraggedStep: Dispatch<SetStateAction<DraggableStep | undefined>>
 }>({
   setDraggedStep: () => console.log("I'm not implemented"),
   setDraggedStepType: () => console.log("I'm not implemented"),
 })
 
 export const DndContext = ({ children }: { children: ReactNode }) => {
-  const [draggedStep, setDraggedStep] = useState<Step | undefined>()
-  const [draggedStepType, setDraggedStepType] = useState<StepType | undefined>()
+  const [draggedStep, setDraggedStep] = useState<DraggableStep | undefined>()
+  const [draggedStepType, setDraggedStepType] = useState<
+    DraggableStepType | undefined
+  >()
 
   return (
     <dndContext.Provider

apps/builder/contexts/TypebotContext/actions/blocks.ts

@@ -1,20 +1,25 @@
 import { Coordinates } from 'contexts/GraphContext'
 import { WritableDraft } from 'immer/dist/internal'
-import { Block, Step, StepType, Typebot } from 'models'
+import { Block, BubbleStepType, InputStepType, Step, Typebot } from 'models'
 import { parseNewBlock } from 'services/typebots'
 import { Updater } from 'use-immer'
 import { createStepDraft, deleteStepDraft } from './steps'
 
 export type BlocksActions = {
-  createBlock: (props: Coordinates & { step: StepType | Step }) => void
+  createBlock: (
+    props: Coordinates & { step: BubbleStepType | InputStepType | Step }
+  ) => void
   updateBlock: (blockId: string, updates: Partial<Omit<Block, 'id'>>) => void
   deleteBlock: (blockId: string) => void
 }
 
 export const blocksActions = (setTypebot: Updater<Typebot>): BlocksActions => ({
-  createBlock: ({ x, y, step }: Coordinates & { step: StepType | Step }) => {
+  createBlock: ({
+    x,
+    y,
+    step,
+  }: Coordinates & { step: BubbleStepType | InputStepType | Step }) => {
     setTypebot((typebot) => {
-      removeEmptyBlocks(typebot)
       const newBlock = parseNewBlock({
         totalBlocks: typebot.blocks.allIds.length,
         initialCoordinates: { x, y },
@@ -22,6 +27,7 @@ export const blocksActions = (setTypebot: Updater<Typebot>): BlocksActions => ({
       typebot.blocks.byId[newBlock.id] = newBlock
       typebot.blocks.allIds.push(newBlock.id)
       createStepDraft(typebot, step, newBlock.id)
+      removeEmptyBlocks(typebot)
     })
   },
   updateBlock: (blockId: string, updates: Partial<Omit<Block, 'id'>>) =>

apps/builder/contexts/TypebotContext/actions/steps.ts

@@ -1,11 +1,15 @@
-import { Step, StepType, Typebot } from 'models'
+import { BubbleStepType, InputStepType, Step, Typebot } from 'models'
 import { parseNewStep } from 'services/typebots'
 import { Updater } from 'use-immer'
 import { removeEmptyBlocks } from './blocks'
 import { WritableDraft } from 'immer/dist/types/types-external'
 
 export type StepsActions = {
-  createStep: (blockId: string, step: StepType | Step, index?: number) => void
+  createStep: (
+    blockId: string,
+    step: BubbleStepType | InputStepType | Step,
+    index?: number
+  ) => void
   updateStep: (
     stepId: string,
     updates: Partial<Omit<Step, 'id' | 'type'>>
@@ -14,10 +18,14 @@ export type StepsActions = {
 }
 
 export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
-  createStep: (blockId: string, step: StepType | Step, index?: number) => {
+  createStep: (
+    blockId: string,
+    step: BubbleStepType | InputStepType | Step,
+    index?: number
+  ) => {
     setTypebot((typebot) => {
-      removeEmptyBlocks(typebot)
       createStepDraft(typebot, step, blockId, index)
+      removeEmptyBlocks(typebot)
     })
   },
   updateStep: (stepId: string, updates: Partial<Omit<Step, 'id' | 'type'>>) =>
@@ -28,6 +36,7 @@ export const stepsAction = (setTypebot: Updater<Typebot>): StepsActions => ({
     setTypebot((typebot) => {
       removeStepIdFromBlock(typebot, stepId)
       deleteStepDraft(typebot, stepId)
+      removeEmptyBlocks(typebot)
     })
   },
 })
@@ -56,7 +65,7 @@ export const deleteStepDraft = (
 
 export const createStepDraft = (
   typebot: WritableDraft<Typebot>,
-  step: StepType | Step,
+  step: BubbleStepType | InputStepType | Step,
   blockId: string,
   index?: number
 ) => {