Automatically name and number form step components upon creation

packages/builder/src/builderStore/store/frontend.js

@@ -20,7 +20,12 @@ import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
 import { FrontendTypes } from "constants"
 import analytics from "analytics"
-import { findComponentType, findComponentParent } from "../storeUtils"
+import {
+  findComponentType,
+  findComponentParent,
+  findClosestMatchingComponent,
+  findAllMatchingComponents,
+} from "../storeUtils"
 import { uuid } from "../uuid"
 import { removeBindings } from "../dataBinding"
 
@@ -334,6 +339,18 @@ export const getFrontendStore = () => {
         if (definition.hasChildren) {
           extras._children = []
         }
+        if (componentName.endsWith("/formstep")) {
+          const parentForm = findClosestMatchingComponent(
+            get(currentAsset).props,
+            get(selectedComponent)._id,
+            component => component._component.endsWith("/form")
+          )
+          const formSteps = findAllMatchingComponents(parentForm, component =>
+            component._component.endsWith("/formstep")
+          )
+          extras.step = formSteps.length + 1
+          extras._instanceName = `Step ${formSteps.length + 1}`
+        }
 
         return {
           _id: uuid(),