feat: add permissions API

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

@@ -277,7 +277,9 @@ const CustomPuck = ({ dataKey }: { dataKey: string }) => {
 };
 
 const CustomActionBar = ({ children, label }) => {
-  const { appState, selectedItem } = usePuck();
+  const { appState, getPermissions, selectedItem } = usePuck();
+
+  const { debug } = getPermissions();
 
   const onClick = () => {
     alert(
@@ -288,9 +290,12 @@ const CustomActionBar = ({ children, label }) => {
   };
   return (
     <ActionBar label={label}>
-      <ActionBar.Action onClick={onClick} label="Debug information">
-        <Bug size={16} />
-      </ActionBar.Action>
+      {debug && (
+        <ActionBar.Action onClick={onClick} label="Debug information">
+          <Bug size={16} />
+        </ActionBar.Action>
+      )}
+
       {children}
     </ActionBar>
   );
@@ -301,14 +306,28 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
     path,
     isEdit,
   });
-
+  const configOverride: UserConfig = {
+    ...config,
+    components: {
+      ...config.components,
+      Hero: {
+        ...config.components.Hero,
+        permissions: {
+          debug: false,
+        },
+      },
+    },
+  };
   if (isEdit) {
     return (
       <Puck<UserConfig>
-        config={config}
+        config={configOverride}
         data={data}
         iframe={{ enabled: false }}
         headerPath={path}
+        permissions={{
+          debug: true,
+        }}
         overrides={{
           outline: ({ children }) => (
             <div style={{ padding: 16 }}>{children}</div>

packages/core/components/Puck/context.tsx

@@ -5,7 +5,7 @@ import {
   useEffect,
   useState,
 } from "react";
-import { AppState, Config, UiState } from "../../types/Config";
+import { AppState, Config, UiState, Permissions } from "../../types/Config";
 import { PuckAction } from "../../reducer";
 import { getItem } from "../../lib/get-item";
 import { Plugin } from "../../types/Plugin";
@@ -60,6 +60,7 @@ type AppContext<UserConfig extends Config = Config> = {
   setStatus: (status: Status) => void;
   iframe: IframeConfig;
   safariFallbackMode?: boolean;
+  globalPermissions?: Partial<Permissions>;
 };
 
 const defaultContext: AppContext = {
@@ -82,6 +83,7 @@ const defaultContext: AppContext = {
   setStatus: () => null,
   iframe: {},
   safariFallbackMode: false,
+  globalPermissions: {},
 };
 
 export const appContext = createContext<AppContext>(defaultContext);

packages/core/components/Puck/index.tsx

@@ -9,7 +9,13 @@ import {
 } from "react";
 import { DragStart, DragUpdate } from "@measured/dnd";
 
-import type { AppState, Config, Data, UiState } from "../../types/Config";
+import type {
+  AppState,
+  Config,
+  Data,
+  UiState,
+  Permissions,
+} from "../../types/Config";
 import type { OnAction } from "../../types/OnAction";
 import { Button } from "../Button";
 
@@ -62,6 +68,7 @@ export function Puck<UserConfig extends Config = Config>({
   onChange,
   onPublish,
   onAction,
+  permissions = {},
   plugins = [],
   overrides = {},
   renderHeader,
@@ -82,6 +89,7 @@ export function Puck<UserConfig extends Config = Config>({
   onChange?: (data: Data) => void;
   onPublish?: (data: Data) => void;
   onAction?: OnAction;
+  permissions?: Partial<Permissions>;
   plugins?: Plugin[];
   overrides?: Partial<Overrides>;
   renderHeader?: (props: {
@@ -390,6 +398,12 @@ export function Puck<UserConfig extends Config = Config>({
           history,
           viewports,
           iframe,
+          globalPermissions: {
+            delete: true,
+            drag: true,
+            duplicate: true,
+            ...permissions,
+          },
         }}
       >
         <DragDropContext

packages/core/lib/get-permissions.ts

@@ -0,0 +1,40 @@
+import {
+  ComponentData,
+  Config,
+  DefaultComponentProps,
+  Permissions,
+} from "../types/Config";
+
+export const getPermissions = ({
+  selectedItem,
+  globalPermissions,
+  config,
+}: {
+  selectedItem: ComponentData | undefined;
+  globalPermissions: Partial<Permissions>;
+  config: Config;
+}) => {
+  const componentType = (selectedItem && selectedItem.type) || "";
+  let componentPermissions = getInitialPermissions({
+    componentType,
+    config,
+    globalPermissions,
+  });
+
+  return componentPermissions;
+};
+
+export const getInitialPermissions = ({
+  componentType,
+  globalPermissions,
+  config,
+}: {
+  componentType: keyof DefaultComponentProps;
+  globalPermissions: Partial<Permissions>;
+  config: Config;
+}) => {
+  return {
+    ...globalPermissions,
+    ...config.components[componentType].permissions,
+  };
+};

packages/core/lib/use-puck.ts

@@ -1,18 +1,28 @@
 import { useAppContext } from "../components/Puck/context";
+import { ComponentData } from "../types/Config";
+import { getPermissions } from "./get-permissions";
 
 export const usePuck = () => {
   const {
     state: appState,
     config,
     history,
     dispatch,
-    selectedItem,
+    selectedItem: currentItem,
+    globalPermissions,
   } = useAppContext();
 
   return {
     appState,
     config,
     dispatch,
+    getPermissions: (selectedItem?: ComponentData) => {
+      return getPermissions({
+        selectedItem: selectedItem || currentItem,
+        globalPermissions: globalPermissions || {},
+        config,
+      });
+    },
     history: {
       back: history.back!,
       forward: history.forward!,
@@ -24,6 +34,6 @@ export const usePuck = () => {
       index: history.historyStore!.index,
       historyStore: history.historyStore,
     },
-    selectedItem: selectedItem || null,
+    selectedItem: currentItem || null,
   };
 };

packages/core/types/Config.tsx

@@ -37,6 +37,7 @@ export type ComponentConfig<
   label?: string;
   defaultProps?: DefaultProps;
   fields?: Fields<ComponentProps>;
+  permissions?: Partial<Permissions>;
   resolveFields?: (
     data: DataShape,
     params: {
@@ -172,3 +173,9 @@ export type UiState = {
 };
 
 export type AppState = { data: Data; ui: UiState };
+
+export type Permissions = {
+  drag: boolean;
+  duplicate: boolean;
+  delete: boolean;
+} & Record<string, boolean>;