feat: support custom component labels via the new label param

Provides the option to add a custom label to a component. The label is optional; by default, it will display the component type.
measuredco · Mar 21, 2024 · 712fb8e · 712fb8e
1 parent e8991cc
commit 712fb8e
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 13 deletions.
diff --git a/apps/demo/config/blocks/ButtonGroup/index.tsx b/apps/demo/config/blocks/ButtonGroup/index.tsx
@@ -14,6 +14,7 @@ export type ButtonGroupProps = {
 };
 
 export const ButtonGroup: ComponentConfig<ButtonGroupProps> = {
+  label: "Button Group",
   fields: {
     buttons: {
       type: "array",

diff --git a/apps/demo/config/blocks/VerticalSpace/index.tsx b/apps/demo/config/blocks/VerticalSpace/index.tsx
@@ -8,6 +8,7 @@ export type VerticalSpaceProps = {
 };
 
 export const VerticalSpace: ComponentConfig<VerticalSpaceProps> = {
+  label: "Vertical Space",
   fields: {
     size: {
       type: "select",

diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
@@ -9,15 +9,16 @@ const getClassName = getClassNameFactory("ComponentList", styles);
 
 const ComponentListItem = ({
   name,
+  label,
   index,
 }: {
   name: string;
+  label?: string;
   index: number;
 }) => {
   const { overrides } = useAppContext();
-
   return (
-    <Drawer.Item name={name} index={index}>
+    <Drawer.Item label={label} name={name} index={index}>
       {overrides.componentItem}
     </Drawer.Item>
   );
@@ -71,6 +72,9 @@ const ComponentList = ({
               return (
                 <ComponentListItem
                   key={componentKey}
+                  label={
+                    config.components[componentKey]["label"] ?? componentKey
+                  }
                   name={componentKey}
                   index={i}
                 />

diff --git a/packages/core/components/Drawer/index.tsx b/packages/core/components/Drawer/index.tsx
@@ -43,11 +43,13 @@ const DrawerItem = ({
   name,
   children,
   id,
+  label,
   index,
 }: {
   name: string;
   children?: (props: { children: ReactNode; name: string }) => ReactElement;
   id?: string;
+  label?: string;
   index: number;
 }) => {
   const ctx = useContext(drawerContext);
@@ -68,7 +70,7 @@ const DrawerItem = ({
       <CustomInner name={name}>
         <div className={getClassNameItem("draggableWrapper")}>
           <div className={getClassNameItem("draggable")}>
-            <div className={getClassNameItem("name")}>{name}</div>
+            <div className={getClassNameItem("name")}>{label ?? name}</div>
             <div className={getClassNameItem("icon")}>
               <DragIcon />
             </div>

diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
@@ -237,7 +237,10 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
                       }}
                     >
                       <DraggableComponent
-                        label={item.type.toString()}
+                        label={
+                          config.components[item.type]["label"] ??
+                          item.type.toString()
+                        }
                         id={`draggable-${componentId}`}
                         index={i}
                         isSelected={isSelected}

diff --git a/packages/core/components/LayerTree/index.tsx b/packages/core/components/LayerTree/index.tsx
@@ -1,6 +1,6 @@
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
-import { Data } from "../../types/Config";
+import { Config, Data } from "../../types/Config";
 import { ItemSelector, getItem } from "../../lib/get-item";
 import { scrollIntoView } from "../../lib/scroll-into-view";
 import { ChevronDown, LayoutGrid, Layers, Type } from "lucide-react";
@@ -16,23 +16,23 @@ const getClassNameLayer = getClassNameFactory("Layer", styles);
 
 export const LayerTree = ({
   data,
+  config,
   zoneContent,
   itemSelector,
   setItemSelector,
   zone,
   label,
 }: {
   data: Data;
+  config: Config;
   zoneContent: Data["content"];
   itemSelector?: ItemSelector | null;
   setItemSelector: (item: ItemSelector | null) => void;
   zone?: string;
   label?: string;
 }) => {
   const zones = data.zones || {};
-
   const ctx = useContext(dropZoneContext);
-
   return (
     <>
       {label && (
@@ -128,14 +128,17 @@ export const LayerTree = ({
                         <LayoutGrid size="16" />
                       )}
                     </div>
-                    <div className={getClassNameLayer("name")}>{item.type}</div>
+                    <div className={getClassNameLayer("name")}>
+                      {config.components[item.type]["label"] ?? item.type}
+                    </div>
                   </div>
                 </button>
               </div>
               {containsZone &&
                 Object.keys(zonesForItem).map((zoneKey, idx) => (
                   <div key={idx} className={getClassNameLayer("zones")}>
                     <LayerTree
+                      config={config}
                       data={data}
                       zoneContent={zones[zoneKey]}
                       setItemSelector={setItemSelector}

diff --git a/packages/core/components/Puck/components/Outline/index.tsx b/packages/core/components/Puck/components/Outline/index.tsx
@@ -8,7 +8,7 @@ import { useCallback, useMemo } from "react";
 import { ItemSelector } from "../../../../lib/get-item";
 
 export const Outline = () => {
-  const { dispatch, state, overrides } = useAppContext();
+  const { dispatch, state, overrides, config } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
 
@@ -23,14 +23,14 @@ export const Outline = () => {
   );
 
   const Wrapper = useMemo(() => overrides.outline || "div", [overrides]);
-
   return (
     <Wrapper>
       <dropZoneContext.Consumer>
         {(ctx) => (
           <>
             {ctx?.activeZones && ctx?.activeZones[rootDroppableId] && (
               <LayerTree
+                config={config}
                 data={data}
                 label={areaContainsZones(data, "root") ? rootDroppableId : ""}
                 zoneContent={data.content}
@@ -42,6 +42,7 @@ export const Outline = () => {
               ([zoneKey, zone]) => {
                 return (
                   <LayerTree
+                    config={config}
                     key={zoneKey}
                     data={data}
                     label={zoneKey}

diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
@@ -510,7 +510,12 @@ export function Puck<
                       noPadding
                       noBorderTop
                       showBreadcrumbs
-                      title={selectedItem ? selectedItem.type : "Page"}
+                      title={
+                        selectedItem
+                          ? config.components[selectedItem.type]["label"] ??
+                            selectedItem.type
+                          : "Page"
+                      }
                     >
                       <Fields />
                     </SidebarSection>

diff --git a/packages/core/lib/use-component-list.tsx b/packages/core/lib/use-component-list.tsx
@@ -25,10 +25,13 @@ export const useComponentList = (config: Config, ui: UiState) => {
             >
               {category.components.map((componentName, i) => {
                 matchedComponents.push(componentName as string);
-
                 return (
                   <ComponentList.Item
                     key={componentName}
+                    label={
+                      (config.components[componentName]["label"] ??
+                        componentName) as string
+                    }
                     name={componentName as string}
                     index={i}
                   />
@@ -59,6 +62,10 @@ export const useComponentList = (config: Config, ui: UiState) => {
                 <ComponentList.Item
                   key={componentName}
                   name={componentName as string}
+                  label={
+                    (config.components[componentName]["label"] ??
+                      componentName) as string
+                  }
                   index={i}
                 />
               );
@@ -69,7 +76,7 @@ export const useComponentList = (config: Config, ui: UiState) => {
 
       setComponentList(_componentList);
     }
-  }, [config.categories, ui.componentList]);
+  }, [config.categories, config.components, ui.componentList]);
 
   return componentList;
 };
diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
@@ -164,6 +164,7 @@ export type ComponentConfig<
   DataShape = ComponentData<ComponentProps>
 > = {
   render: PuckComponent<ComponentProps>;
+  label?: string;
   defaultProps?: DefaultProps;
   fields?: Fields<ComponentProps>;
   resolveData?: (