feat: adding permissions to core actions and disabling on Hero

apps/demo/app/custom-ui/[...puckPath]/client.tsx

@@ -314,6 +314,10 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
         ...config.components.Hero,
         permissions: {
           debug: false,
+          drag: false,
+          delete: false,
+          duplicate: false,
+          insert: false,
         },
       },
     },

packages/core/components/ActionBar/styles.module.css

@@ -9,6 +9,7 @@
   color: var(--puck-color-white);
   font-family: var(--puck-font-family);
   gap: 4px;
+  min-height: 26px;
 }
 
 .ActionBarComponent-actionsLabel {
@@ -19,13 +20,17 @@
   justify-content: center;
   align-items: center;
   padding-left: 8px;
-  padding-right: 16px;
-  margin-right: 8px;
-  border-right: 0.5px solid var(--puck-color-grey-05); /* Fractional value required due to scaling */
+  padding-right: 8px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.ActionBarComponent-action:first-of-type {
+  border-left: 0.5px solid var(--puck-color-grey-05); /* Fractional value required due to scaling */
+  border-radius: 0;
+  padding-left: 16px;
+}
+
 .ActionBarComponent-action {
   background: transparent;
   border: none;

packages/core/components/ComponentList/index.tsx

@@ -5,6 +5,8 @@ import { useAppContext } from "../Puck/context";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Drawer } from "../Drawer";
 
+import { getPermissions } from "../../lib/get-permissions";
+
 const getClassName = getClassNameFactory("ComponentList", styles);
 
 const ComponentListItem = ({
@@ -16,9 +18,15 @@ const ComponentListItem = ({
   label?: string;
   index: number;
 }) => {
-  const { overrides } = useAppContext();
+  const { overrides, config, globalPermissions } = useAppContext();
+
+  const canInsert = getPermissions({
+    type: name,
+    config,
+    globalPermissions: globalPermissions || {},
+  }).insert;
   return (
-    <Drawer.Item label={label} name={name} index={index}>
+    <Drawer.Item label={label} name={name} index={index} canInsert={canInsert}>
       {overrides.componentItem}
     </Drawer.Item>
   );

packages/core/components/Draggable/index.tsx

@@ -80,6 +80,7 @@ export const Draggable = ({
                 snapshot.isDragging || !disableAnimations
                   ? provided.draggableProps.style?.transform
                   : "translate(0px, 0px)",
+              cursor: isDragDisabled ? "initial" : "grab",
             }}
           >
             {children(provided, snapshot)}

packages/core/components/DraggableComponent/index.tsx

@@ -18,6 +18,7 @@ import { Loader } from "../Loader";
 import { ActionBar } from "../ActionBar";
 import { DefaultOverride } from "../DefaultOverride";
 import { useLoadedOverrides } from "../../lib/use-loaded-overrides";
+import { getPermissions } from "../../lib/get-permissions";
 
 const getClassName = getClassNameFactory("DraggableComponent", styles);
 
@@ -82,7 +83,15 @@ export const DraggableComponent = ({
   indicativeHover?: boolean;
   style?: CSSProperties;
 }) => {
-  const { zoomConfig, status, overrides, plugins } = useAppContext();
+  const {
+    zoomConfig,
+    status,
+    overrides,
+    plugins,
+    selectedItem,
+    config,
+    globalPermissions,
+  } = useAppContext();
   const isModifierHeld = useModifierHeld("Alt");
 
   const El = status !== "LOADING" ? Draggable : DefaultDraggable;
@@ -109,6 +118,14 @@ export const DraggableComponent = ({
     [loadedOverrides]
   );
 
+  const permissions =
+    selectedItem &&
+    getPermissions({
+      selectedItem,
+      globalPermissions: globalPermissions || {},
+      config,
+    });
+
   return (
     <El
       key={id}
@@ -133,7 +150,7 @@ export const DraggableComponent = ({
           style={{
             ...style,
             ...provided.draggableProps.style,
-            cursor: isModifierHeld ? "initial" : "grab",
+            cursor: isModifierHeld || isDragDisabled ? "initial" : "grab",
           }}
           onMouseOver={onMouseOver}
           onMouseOut={onMouseOut}
@@ -163,12 +180,16 @@ export const DraggableComponent = ({
                 }}
               >
                 <CustomActionBar label={label}>
-                  <ActionBar.Action onClick={onDuplicate} label="Duplicate">
-                    <Copy size={16} />
-                  </ActionBar.Action>
-                  <ActionBar.Action onClick={onDelete} label="Delete">
-                    <Trash size={16} />
-                  </ActionBar.Action>
+                  {permissions && permissions.duplicate && (
+                    <ActionBar.Action onClick={onDuplicate} label="Duplicate">
+                      <Copy size={16} />
+                    </ActionBar.Action>
+                  )}
+                  {permissions && permissions.delete && (
+                    <ActionBar.Action onClick={onDelete} label="Delete">
+                      <Trash size={16} />
+                    </ActionBar.Action>
+                  )}
                 </CustomActionBar>
               </div>
             </div>

packages/core/components/Drawer/index.tsx

@@ -22,35 +22,42 @@ const DrawerDraggable = ({
   children,
   id,
   index,
+  canInsert,
 }: {
   children: ReactNode;
   id: string;
   index: number;
-}) => (
-  <Draggable
-    key={id}
-    id={id}
-    index={index}
-    showShadow
-    disableAnimations
-    className={() => getClassNameItem()}
-  >
-    {() => children}
-  </Draggable>
-);
+  canInsert?: boolean;
+}) => {
+  return (
+    <Draggable
+      key={id}
+      id={id}
+      index={index}
+      isDragDisabled={!canInsert}
+      showShadow
+      disableAnimations
+      className={() => getClassNameItem()}
+    >
+      {() => children}
+    </Draggable>
+  );
+};
 
 const DrawerItem = ({
   name,
   children,
   id,
   label,
   index,
+  canInsert,
 }: {
   name: string;
   children?: (props: { children: ReactNode; name: string }) => ReactElement;
   id?: string;
   label?: string;
   index: number;
+  canInsert?: boolean;
 }) => {
   const ctx = useContext(drawerContext);
 
@@ -66,7 +73,7 @@ const DrawerItem = ({
   );
 
   return (
-    <DrawerDraggable id={resolvedId} index={index}>
+    <DrawerDraggable id={resolvedId} index={index} canInsert={canInsert}>
       <CustomInner name={name}>
         <div className={getClassNameItem("draggableWrapper")}>
           <div className={getClassNameItem("draggable")}>

packages/core/components/Drawer/styles.module.css

@@ -20,7 +20,6 @@
   font-size: var(--puck-font-size-xxs);
   justify-content: space-between;
   align-items: center;
-  cursor: grab;
   transition: background-color 50ms ease-in, color 50ms ease-in;
 }
 

packages/core/components/DropZone/index.tsx

@@ -11,6 +11,7 @@ import { getZoneId } from "../../lib/get-zone-id";
 import { useAppContext } from "../Puck/context";
 import { DropZoneProps } from "./types";
 import { ComponentConfig, PuckContext } from "../../types/Config";
+import { getPermissions } from "../../lib/get-permissions";
 
 const getClassName = getClassNameFactory("DropZone", styles);
 
@@ -237,6 +238,15 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
                 const label =
                   componentConfig?.["label"] ?? item.type.toString();
 
+                const canDrag = getPermissions({
+                  selectedItem: getItem(
+                    { index: i, zone: zoneCompound },
+                    appContext.state.data
+                  ),
+                  config: appContext.config,
+                  globalPermissions: appContext.globalPermissions || {},
+                }).drag;
+
                 return (
                   <div
                     key={item.props.id}
@@ -258,6 +268,7 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
                         forceHover={
                           hoveringComponent === componentId && !userIsDragging
                         }
+                        isDragDisabled={!canDrag}
                         indicativeHover={
                           userIsDragging &&
                           containsZone &&

packages/core/components/Puck/components/Fields/index.tsx

@@ -6,7 +6,14 @@ import {
   replaceAction,
   setAction,
 } from "../../../../reducer";
-import { ComponentData, RootData, UiState } from "../../../../types/Config";
+import {
+  ComponentData,
+  DefaultComponentProps,
+  RootData,
+  UiState,
+  Permissions,
+  Config,
+} from "../../../../types/Config";
 import type { Field, Fields as FieldsType } from "../../../../types/Fields";
 import { AutoFieldPrivate } from "../../../AutoField";
 import { useAppContext } from "../../context";
@@ -16,6 +23,7 @@ import { getClassNameFactory } from "../../../../lib";
 import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { ItemSelector } from "../../../../lib/get-item";
 import { getChanged } from "../../../../lib/get-changed";
+import { getPermissions } from "../../../../lib/get-permissions";
 
 const getClassName = getClassNameFactory("PuckFields", styles);
 
@@ -139,6 +147,7 @@ export const Fields = () => {
     resolveData,
     componentState,
     overrides,
+    globalPermissions,
   } = useAppContext();
   const { data, ui } = state;
   const { itemSelector } = ui;
@@ -247,14 +256,19 @@ export const Fields = () => {
 
           if (selectedItem && itemSelector) {
             const { readOnly = {} } = selectedItem;
+            const { edit } = getPermissions({
+              selectedItem,
+              config,
+              globalPermissions: globalPermissions || {},
+            });
 
             return (
               <AutoFieldPrivate
                 key={`${selectedItem.props.id}_${fieldName}`}
                 field={field}
                 name={fieldName}
                 id={`${selectedItem.props.id}_${fieldName}`}
-                readOnly={readOnly[fieldName]}
+                readOnly={!edit || readOnly[fieldName]}
                 value={selectedItem.props[fieldName]}
                 onChange={onChange}
               />

packages/core/components/Puck/index.tsx

@@ -402,6 +402,8 @@ export function Puck<UserConfig extends Config = Config>({
             delete: true,
             drag: true,
             duplicate: true,
+            insert: true,
+            edit: true,
             ...permissions,
           },
         }}

packages/core/lib/get-permissions.ts

@@ -7,14 +7,16 @@ import {
 
 export const getPermissions = ({
   selectedItem,
+  type,
   globalPermissions,
   config,
 }: {
-  selectedItem: ComponentData | undefined;
+  selectedItem?: ComponentData | undefined;
+  type?: keyof DefaultComponentProps;
   globalPermissions: Partial<Permissions>;
   config: Config;
 }) => {
-  const componentType = (selectedItem && selectedItem.type) || "";
+  const componentType = (selectedItem && selectedItem.type) || type || "";
   let componentPermissions = getInitialPermissions({
     componentType,
     config,
@@ -35,6 +37,6 @@ export const getInitialPermissions = ({
 }) => {
   return {
     ...globalPermissions,
-    ...config.components[componentType].permissions,
+    ...config.components[componentType]?.permissions,
   };
 };

packages/core/lib/use-puck.ts

@@ -1,5 +1,5 @@
 import { useAppContext } from "../components/Puck/context";
-import { ComponentData } from "../types/Config";
+import { ComponentData, DefaultComponentProps } from "../types/Config";
 import { getPermissions } from "./get-permissions";
 
 export const usePuck = () => {
@@ -16,9 +16,13 @@ export const usePuck = () => {
     appState,
     config,
     dispatch,
-    getPermissions: (selectedItem?: ComponentData) => {
+    getPermissions: (
+      selectedItem?: ComponentData,
+      type?: keyof DefaultComponentProps
+    ) => {
       return getPermissions({
         selectedItem: selectedItem || currentItem,
+        type,
         globalPermissions: globalPermissions || {},
         config,
       });

packages/core/types/Config.tsx

@@ -178,4 +178,6 @@ export type Permissions = {
   drag: boolean;
   duplicate: boolean;
   delete: boolean;
+  edit: boolean;
+  insert: boolean;
 } & Record<string, boolean>;