feat: fix devflags and add default components

* devflags now read all keys under builtinSections * default devflags for insertPanelContent removed due to how overrides get merged with defaults * moved insertPanelContent defaults to DbInit.ts instead * added default components for each plexus component Change-Id: I8049770ef9eb0a4596f1fcc4406d9946f6583dce GitOrigin-RevId: 3ec05ae17dee41c4589327b07111c2ea11f2d00a
plasmicapp · Dec 13, 2024 · 46d1169 · 46d1169
1 parent df002eb
commit 46d1169
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 229 deletions.
diff --git a/platform/wab/src/wab/client/components/insert-panel/InsertPanel.tsx b/platform/wab/src/wab/client/components/insert-panel/InsertPanel.tsx
@@ -1058,122 +1058,127 @@ export function buildAddItemGroups({
     // This includes:
     //
     // - built-in elements from INSERTABLES
-    // - hostless components - moved a lot of free-floating components out of the component store and into here. So we don't put so much emphasis what components are from which packages, what's installed or not, etc.
-    // - antd5 hostless components - form, number/password input, etc. - we may later want to hide some of these if antd5 is not installed?
-    // - default-components, which can be Plume (for sites) and hostless antd5 (for apps)
+    // - starter components (Plexus)
+    // - built-in elements from @plasmicapp/react-web
     //
     // So ultimately we just want this to *feel* like a stable list of built-in components. Vs. the chaos before this of even basic things like Button mysteriously disappearing from the list once you insert it.
     //
     // We don't want to just call it "built-in" since you may swap in your own custom components using the default-components system (for a few specific kinds).
     // But generally later we may allow users to more fully customize this menu? TBD.
-    ...Object.entries(builtinSections["Default components"]).map(
-      ([group, aliases]) =>
-        !group.startsWith("__") && {
-          sectionKey: "Default components",
-          sectionLabel: "Default components",
-          key: group,
-          label: group,
-          items: filterFalsy(
-            aliases.map((alias) => {
-              if (!canInsertAlias(uiConfig, alias, canInsertContext)) {
-                return undefined;
-              }
-              const resolved = insertPanelAliases.get(alias as any);
-              const aliasImageUrl = `https://static1.plasmic.app/insertables/${alias}.svg`;
-
-              // Is this a built-in insertable?
-              if (!resolved) {
-                const insertable = INSERTABLES_MAP[alias];
-                if (!insertable) {
+    ...Object.entries(builtinSections).flatMap(([section, groups]) =>
+      Object.entries(groups).map(
+        ([group, aliases]) =>
+          !group.startsWith("__") && {
+            sectionKey: section,
+            sectionLabel: section,
+            key: group,
+            label: group,
+            items: filterFalsy(
+              aliases.map((alias) => {
+                if (!canInsertAlias(uiConfig, alias, canInsertContext)) {
                   return undefined;
                 }
-                return { ...insertable, isCompact: true };
-              }
-
-              // Is this a built-in code component?
-              if (resolved.startsWith("builtincc:")) {
-                const componentName = resolved.split(":")[1];
-                const component = studioCtx.site.components
-                  .filter((c) => isBuiltinCodeComponent(c))
-                  .find((c) => c.name === componentName);
-                if (!component) {
-                  return undefined;
+                const resolved = insertPanelAliases.get(alias as any);
+                const aliasImageUrl = `https://static1.plasmic.app/insertables/${alias}.svg`;
+
+                // Is this a built-in insertable?
+                if (!resolved) {
+                  const insertable = INSERTABLES_MAP[alias];
+                  if (!insertable) {
+                    return undefined;
+                  }
+                  return { ...insertable, isCompact: true };
                 }
-                return {
-                  ...createAddTplComponent(component),
-                  previewImageUrl: aliasImageUrl,
-                  isCompact: true,
-                };
-              }
 
-              // Is this a default component entry?
-              if (resolved.startsWith("default:")) {
-                const kind = resolved.split(":")[1];
-                if (!isDefaultComponentKind(kind)) {
-                  return undefined;
-                }
-                const existingComponent = tryGetDefaultComponent(
-                  studioCtx.site,
-                  kind
-                );
-                if (existingComponent) {
+                // Is this a built-in code component?
+                if (resolved.startsWith("builtincc:")) {
+                  const componentName = resolved.split(":")[1];
+                  const component = studioCtx.site.components
+                    .filter((c) => isBuiltinCodeComponent(c))
+                    .find((c) => c.name === componentName);
+                  if (!component) {
+                    return undefined;
+                  }
                   return {
-                    ...createAddTplComponent(existingComponent),
-                    previewImageUrl: getPlumeImage(kind),
+                    ...createAddTplComponent(component),
+                    previewImageUrl: aliasImageUrl,
                     isCompact: true,
                   };
-                } else if (
-                  canInsertHostlessPackage(uiConfig, "plume", canInsertContext)
-                ) {
-                  if (!hasPlexus || DEVFLAGS.runningInCypress) {
+                }
+
+                // Is this a default component entry?
+                if (resolved.startsWith("default:")) {
+                  const kind = resolved.split(":")[1];
+                  if (!isDefaultComponentKind(kind)) {
+                    return undefined;
+                  }
+                  const existingComponent = tryGetDefaultComponent(
+                    studioCtx.site,
+                    kind
+                  );
+                  if (existingComponent) {
                     return {
-                      ...only(makePlumeInsertables(studioCtx, kind)),
+                      ...createAddTplComponent(existingComponent),
+                      previewImageUrl: getPlumeImage(kind),
                       isCompact: true,
                     };
-                  }
+                  } else if (
+                    canInsertHostlessPackage(
+                      uiConfig,
+                      "plume",
+                      canInsertContext
+                    )
+                  ) {
+                    if (!hasPlexus || DEVFLAGS.runningInCypress) {
+                      return {
+                        ...only(makePlumeInsertables(studioCtx, kind)),
+                        isCompact: true,
+                      };
+                    }
 
-                  // The template name needs to be of format "<PLEXUS_INSERTABLE_ID>/<kind>". E.g. For Plexus button, it will be "plexus/button".
-                  // The template name will be fetched from devflags.insertableTemplates.
-                  return {
-                    previewImageUrl: aliasImageUrl,
-                    ...handleTemplateAlias(
-                      `${PLEXUS_INSERTABLE_ID}/${kind}`,
-                      kind
-                    ),
-                  };
-                } else {
-                  return undefined;
+                    // The template name needs to be of format "<PLEXUS_INSERTABLE_ID>/<kind>". E.g. For Plexus button, it will be "plexus/button".
+                    // The template name will be fetched from devflags.insertableTemplates.
+                    return {
+                      previewImageUrl: aliasImageUrl,
+                      ...handleTemplateAlias(
+                        `${PLEXUS_INSERTABLE_ID}/${kind}`,
+                        kind
+                      ),
+                    };
+                  } else {
+                    return undefined;
+                  }
                 }
-              }
 
-              if (resolved.startsWith("template:")) {
-                const templateName = resolved.split(":")[1];
-                // ASK: Previously, it only returned if a template was found. Is it OK to return undefined if the template isn't found?
-                return handleTemplateAlias(templateName);
-              }
+                if (resolved.startsWith("template:")) {
+                  const templateName = resolved.split(":")[1];
+                  // ASK: Previously, it only returned if a template was found. Is it OK to return undefined if the template isn't found?
+                  return handleTemplateAlias(templateName);
+                }
 
-              // Is this a hostless component entry?
-              for (const hostlessGroup of initHostLess(studioCtx) ?? []) {
-                if (
-                  canInsertHostlessPackage(
-                    uiConfig,
-                    hostlessGroup.codeName ?? "",
-                    canInsertContext
-                  )
-                ) {
-                  for (const item of hostlessGroup.items) {
-                    if (item.key === "hostless-component-" + resolved) {
-                      hostlessComponentsInDefaultMenu.add(item.key);
-                      return { ...item, isCompact: true };
+                // Is this a hostless component entry?
+                for (const hostlessGroup of initHostLess(studioCtx) ?? []) {
+                  if (
+                    canInsertHostlessPackage(
+                      uiConfig,
+                      hostlessGroup.codeName ?? "",
+                      canInsertContext
+                    )
+                  ) {
+                    for (const item of hostlessGroup.items) {
+                      if (item.key === "hostless-component-" + resolved) {
+                        hostlessComponentsInDefaultMenu.add(item.key);
+                        return { ...item, isCompact: true };
+                      }
                     }
                   }
                 }
-              }
 
-              return undefined;
-            })
-          ),
-        }
+                return undefined;
+              })
+            ),
+          }
+      )
     ),
 
     // Code components groups

diff --git a/platform/wab/src/wab/client/components/modals/DefaultComponentKindModal.tsx b/platform/wab/src/wab/client/components/modals/DefaultComponentKindModal.tsx
@@ -1,16 +1,14 @@
 import Button from "@/wab/client/components/widgets/Button";
-import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
+import { Modal } from "@/wab/client/components/widgets/Modal";
 import { defaultComponentKinds } from "@/wab/shared/core/components";
+import { naturalSort } from "@/wab/shared/sort";
 import { Form, Select } from "antd";
 import React from "react";
-import { Modal } from "@/wab/client/components/widgets/Modal";
 
 export function DefaultComponentKindModal<T>({
-  studioCtx,
   onSubmit,
   onCancel,
 }: {
-  studioCtx: StudioCtx;
   onSubmit: (val: T) => void;
   onCancel: () => void;
 }) {
@@ -39,7 +37,10 @@ export function DefaultComponentKindModal<T>({
           ]}
         >
           <Select placeholder="Set as the default component for this category">
-            {Object.entries(defaultComponentKinds).map(([kind, label]) => (
+            {naturalSort(
+              Object.entries(defaultComponentKinds),
+              ([_kind, label]) => label
+            ).map(([kind, label]) => (
               <Select.Option value={kind}>{label}</Select.Option>
             ))}
           </Select>

diff --git a/platform/wab/src/wab/client/components/plume/plume-display-utils.tsx b/platform/wab/src/wab/client/components/plume/plume-display-utils.tsx
@@ -1,20 +1,8 @@
 import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
-import { ensure } from "@/wab/shared/common";
 import { isPlumeComponent, PlumeComponent } from "@/wab/shared/core/components";
 
-const PLUME_IMAGE = {
-  checkbox: "checkbox",
-  select: "select",
-  switch: "switch",
-  button: "button",
-  "text-input": "input",
-};
-
 export function getPlumeImage(plumeType: string) {
-  return `https://static1.plasmic.app/insertables/${ensure(
-    PLUME_IMAGE[plumeType],
-    "Plume type must exist"
-  )}.svg`;
+  return `https://static1.plasmic.app/insertables/${plumeType}.svg`;
 }
 
 export const ACTIVE_PLUME_TYPES = [

diff --git a/platform/wab/src/wab/client/components/sidebar/ComponentRow.tsx b/platform/wab/src/wab/client/components/sidebar/ComponentRow.tsx
@@ -405,7 +405,6 @@ function buildCommonComponentMenuItems(
             DefaultComponentKind | undefined
           >((onSubmit, onCancel) => (
             <DefaultComponentKindModal
-              studioCtx={studioCtx}
               onSubmit={onSubmit}
               onCancel={onCancel}
             />

diff --git a/platform/wab/src/wab/server/db/DbInit.ts b/platform/wab/src/wab/server/db/DbInit.ts
@@ -125,6 +125,66 @@ export async function seedTestDb(em: EntityManager) {
             .map(getDevflagForInsertableTemplateItem)
             .filter((insertableGroup) => insertableGroup.items.length > 0),
         }),
+        insertPanelContent: {
+          aliases: {
+            // Components provided by @plasmicapp/react-web
+            dataFetcher: "builtincc:plasmic-data-source-fetcher",
+            pageMeta: "builtincc:hostless-plasmic-head",
+
+            // Default components
+            button: "default:button",
+            checkbox: "default:checkbox",
+            checkboxGroup: "default:checkbox-group",
+            combobox: "default:combobox",
+            drawer: "default:drawer",
+            input: "default:text-input",
+            modal: "default:modal",
+            popover: "default:popover",
+            radio: "default:radio",
+            radioGroup: "default:radio-group",
+            rangeSlider: "default:range-slider",
+            select: "default:select",
+            slider: "default:slider",
+            switch: "default:switch",
+            tooltip: "default:tooltip",
+          },
+          builtinSections: {
+            Home: {
+              Basic: [
+                "text",
+                "heading",
+                "link",
+                "linkContainer",
+                "section",
+                "columns",
+                "vstack",
+                "hstack",
+                "grid",
+                "box",
+                "image",
+                "icon",
+              ],
+              "Starter components": [
+                "button",
+                "input",
+                "select",
+                "switch",
+                "checkbox",
+                "checkbox-group",
+                "radio",
+                "radio-group",
+                "slider",
+                "range-slider",
+                "combobox",
+                "modal",
+                "drawer",
+                "popover",
+                "tooltip",
+              ],
+              Advanced: ["pageMeta", "dataFetcher"],
+            },
+          },
+        },
       },
       null,
       2

diff --git a/platform/wab/src/wab/shared/core/components.ts b/platform/wab/src/wab/shared/core/components.ts
@@ -218,10 +218,20 @@ export function groupComponents(components: Component[]) {
 
 export const defaultComponentKinds = {
   button: "Button",
-  "text-input": "Text Input",
   checkbox: "Checkbox",
+  "checkbox-group": "Checkbox Group",
+  combobox: "Combobox",
+  drawer: "Drawer",
+  modal: "Modal",
+  popover: "Popover",
+  radio: "Radio",
+  "radio-group": "Radio Group",
+  "range-slider": "Range Slider",
   select: "Select",
+  slider: "Slider",
   switch: "Switch",
+  tooltip: "Tooltip",
+  "text-input": "Text Input",
   unauthorized: "Unauthorized",
 };
 
@@ -2416,16 +2426,7 @@ export function removeVariantGroup(
   removeVariantGroupFromSplits(site, group);
 }
 
-export function tryGetDefaultComponent(
-  site: Site,
-  kind:
-    | "button"
-    | "select"
-    | "text-input"
-    | "checkbox"
-    | "switch"
-    | "unauthorized"
-) {
+export function tryGetDefaultComponent(site: Site, kind: DefaultComponentKind) {
   return (
     site.defaultComponents[kind] ??
     site.components.find((c) => c.plumeInfo?.type === kind)