Add full PoC of using a custom component inside the builder, with children and bindings

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

@@ -92,11 +92,41 @@ export const getFrontendStore = () => {
       // Allow errors to propagate.
       let components = await API.fetchComponentLibDefinitions(application.appId)
 
+      // Extend definitions with custom components
+      components["test"] = {
+        component: "test",
+        name: "Super cool component",
+        icon: "Text",
+        description: "A custom component",
+        showSettingsBar: false,
+        hasChildren: true,
+        settings: [
+          {
+            type: "text",
+            key: "text",
+            label: "Text",
+          },
+        ],
+        context: {
+          type: "static",
+          values: [
+            {
+              label: "Text prop",
+              key: "text",
+            },
+          ],
+        },
+      }
+
+      // Filter out custom component keys so we can flag them
+      let customComponents = ["test"]
+
       // Reset store state
       store.update(state => ({
         ...state,
         libraries: application.componentLibraries,
         components,
+        customComponents,
         clientFeatures: {
           ...INITIAL_FRONTEND_STATE.clientFeatures,
           ...components.features,
@@ -397,9 +427,6 @@ export const getFrontendStore = () => {
         if (!componentName) {
           return null
         }
-        if (!componentName.startsWith("@budibase")) {
-          componentName = `@budibase/standard-components/${componentName}`
-        }
         return get(store).components[componentName]
       },
       createInstance: (componentName, presetProps) => {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js

@@ -37,6 +37,9 @@ export default `
       }
     </style>
     <script src='{{ CLIENT_LIB_PATH }}'></script>
+    <script
+      type="application/javascript"
+      src="https://cdn.kingston.dev/plugin.min.js"></script>
     <script>
       function receiveMessage(event) { 
         if (!event.data) {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte

@@ -24,7 +24,11 @@
   $: currentDefinition = store.actions.components.getDefinition(
     $selectedComponent?._component
   )
-  $: enrichedStructure = enrichStructure(structure, $store.components)
+  $: enrichedStructure = enrichStructure(
+    structure,
+    $store.components,
+    $store.customComponents
+  )
   $: filteredStructure = filterStructure(
     enrichedStructure,
     section,
@@ -46,8 +50,18 @@
 
   // Parses the structure in the manifest and returns an enriched structure with
   // explicit categories
-  const enrichStructure = (structure, definitions) => {
+  const enrichStructure = (structure, definitions, customComponents) => {
     let enrichedStructure = []
+
+    // Add custom components category
+    if (customComponents?.length) {
+      enrichedStructure.push({
+        name: "Custom components",
+        isCategory: true,
+        children: customComponents.map(x => definitions[x]),
+      })
+    }
+
     structure.forEach(item => {
       if (typeof item === "string") {
         const def = definitions[`@budibase/standard-components/${item}`]
@@ -65,6 +79,7 @@
         })
       }
     })
+
     return enrichedStructure
   }
 
@@ -225,7 +240,7 @@
     position: fixed;
     right: 0;
     z-index: 1;
-    height: 100%;
+    height: calc(100% - 60px);
     display: flex;
     flex-direction: row;
     align-items: stretch;