feat: add generic Config type to Puck and Render components

apps/demo/app/[...puckPath]/client.tsx

@@ -5,7 +5,7 @@ import { Puck } from "@/core/components/Puck";
 import { Render } from "@/core/components/Render";
 import { Button } from "@/core/components/Button";
 import headingAnalyzer from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
-import config from "../../config";
+import config, { UserConfig } from "../../config";
 import { useDemoData } from "../../lib/use-demo-data";
 
 export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
@@ -17,7 +17,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
   if (isEdit) {
     return (
       <div>
-        <Puck
+        <Puck<UserConfig>
           config={config}
           data={data}
           onPublish={async (data: Data) => {
@@ -42,7 +42,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
   }
 
   if (data) {
-    return <Render config={config} data={resolvedData} />;
+    return <Render<UserConfig> config={config} data={resolvedData} />;
   }
 
   return (

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

@@ -5,7 +5,7 @@ import { Puck } from "@/core/components/Puck";
 import { Render } from "@/core/components/Render";
 import { Button } from "@/core/components/Button";
 import { HeadingAnalyzer } from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
-import config from "../../../config";
+import config, { UserConfig } from "../../../config";
 import { useDemoData } from "../../../lib/use-demo-data";
 import { IconButton, usePuck } from "@/core";
 import { ReactNode, useEffect, useRef, useState } from "react";
@@ -287,7 +287,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
 
   if (isEdit) {
     return (
-      <Puck
+      <Puck<UserConfig>
         config={config}
         data={data}
         headerPath={path}
@@ -336,7 +336,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
   }
 
   if (data) {
-    return <Render config={config} data={resolvedData} />;
+    return <Render<UserConfig> config={config} data={resolvedData} />;
   }
 
   return (

apps/demo/config/index.tsx

@@ -27,12 +27,14 @@ export type Props = {
   VerticalSpace: VerticalSpaceProps;
 };
 
-// We avoid the name config as next gets confused
-export const conf: Config<
+export type UserConfig = Config<
   Props,
   RootProps,
   "layout" | "typography" | "interactive"
-> = {
+>;
+
+// We avoid the name config as next gets confused
+export const conf: UserConfig = {
   root: {
     render: Root,
   },

packages/core/components/DropZone/context.tsx

@@ -15,9 +15,11 @@ import { getZoneId } from "../../lib/get-zone-id";
 
 export type PathData = Record<string, { path: string[]; label: string }>;
 
-export type DropZoneContext = {
+export type DropZoneContext<
+  UserConfig extends Config<any, any, any> = Config<any, any, any>
+> = {
   data: Data;
-  config: Config;
+  config: UserConfig;
   componentState?: Record<string, any>;
   itemSelector?: ItemSelector | null;
   setItemSelector?: (newIndex: ItemSelector | null) => void;

packages/core/components/Puck/context.tsx

@@ -18,10 +18,12 @@ export const defaultAppState: AppState = {
   },
 };
 
-type AppContext = {
+type AppContext<
+  UserConfig extends Config<any, any, any> = Config<any, any, any>
+> = {
   state: AppState;
   dispatch: (action: PuckAction) => void;
-  config: Config;
+  config: UserConfig;
   componentState: Record<string, { loading: boolean }>;
   resolveData: (newAppState: AppState) => void;
   plugins: Plugin[];
@@ -42,8 +44,10 @@ export const appContext = createContext<AppContext>({
 
 export const AppProvider = appContext.Provider;
 
-export const useAppContext = () => {
-  const mainContext = useContext(appContext);
+export function useAppContext<
+  UserConfig extends Config<any, any, any> = Config<any, any, any>
+>() {
+  const mainContext = useContext(appContext) as AppContext<UserConfig>;
 
   const selectedItem = mainContext.state.ui.itemSelector
     ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data)
@@ -61,4 +65,4 @@ export const useAppContext = () => {
       });
     },
   };
-};
+}

packages/core/components/Puck/index.tsx

@@ -45,7 +45,9 @@ import { useHistoryStore } from "../../lib/use-history-store";
 
 const getClassName = getClassNameFactory("Puck", styles);
 
-export function Puck({
+export function Puck<
+  UserConfig extends Config<any, any, any> = Config<any, any, any>
+>({
   children,
   config,
   data: initialData = { content: [], root: { props: { title: "" } } },
@@ -60,7 +62,7 @@ export function Puck({
   headerPath,
 }: {
   children?: ReactNode;
-  config: Config<any, any, any>;
+  config: UserConfig;
   data: Data;
   ui?: Partial<UiState>;
   onChange?: (data: Data) => void;
@@ -82,7 +84,7 @@ export function Puck({
   const historyStore = useHistoryStore();
 
   const [reducer] = useState(() =>
-    createReducer({ config, record: historyStore.record })
+    createReducer<UserConfig>({ config, record: historyStore.record })
   );
 
   const [initialAppState] = useState<AppState>(() => ({

packages/core/components/Render/index.tsx

@@ -4,13 +4,9 @@ import { rootDroppableId } from "../../lib/root-droppable-id";
 import { Config, Data } from "../../types/Config";
 import { DropZone, DropZoneProvider } from "../DropZone";
 
-export function Render({
-  config,
-  data,
-}: {
-  config: Config<any, any, any>;
-  data: Data;
-}) {
+export function Render<
+  UserConfig extends Config<any, any, any> = Config<any, any, any>
+>({ config, data }: { config: UserConfig; data: Data }) {
   // DEPRECATED
   const rootProps = data.root.props || data.root;
   const title = rootProps?.title || "";

packages/core/components/ServerRender/index.tsx

@@ -59,13 +59,9 @@ function DropZoneRender({
   );
 }
 
-export function Render({
-  config,
-  data,
-}: {
-  config: Config<any, any, any>;
-  data: Data;
-}) {
+export function Render<
+  UserConfig extends Config<any, any, any> = Config<any, any, any>
+>({ config, data }: { config: UserConfig; data: Data }) {
   if (config.root?.render) {
     // DEPRECATED
     const rootProps = data.root.props || data.root;

packages/core/reducer/index.ts

@@ -49,14 +49,16 @@ export const setAction = (state: AppState, action: SetAction) => {
   return { ...state, ...action.state(state) };
 };
 
-export const createReducer = ({
+export function createReducer<
+  UserConfig extends Config<any, any, any> = Config<any, any, any>
+>({
   config,
   record,
 }: {
-  config: Config<any>;
+  config: UserConfig;
   record?: (appState: AppState) => void;
-}): StateReducer =>
-  storeInterceptor((state, action) => {
+}): StateReducer {
+  return storeInterceptor((state, action) => {
     const data = reduceData(state.data, action, config);
     const ui = reduceUi(state.ui, action);
 
@@ -66,3 +68,4 @@ export const createReducer = ({
 
     return { data, ui };
   }, record);
+}

packages/core/types/Config.tsx

@@ -173,7 +173,7 @@ type Category<ComponentName> = {
 export type Config<
   Props extends { [key: string]: any } = { [key: string]: any },
   RootProps extends DefaultRootProps = DefaultRootProps,
-  CategoryName extends string = string
+  CategoryName extends string = any
 > = {
   categories?: Record<CategoryName, Category<keyof Props>> & {
     other?: Category<Props>;