From bf451162be4c82464ce7529f46bf43277bb1131b Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Tue, 26 Mar 2024 14:32:29 +0100
Subject: [PATCH] refactor: rework types to avoid unwanted anys

---
 apps/demo/app/[...puckPath]/client.tsx        |  5 +--
 .../app/custom-ui/[...puckPath]/client.tsx    |  5 +--
 apps/demo/config/index.tsx                    |  2 +-
 packages/core/components/DropZone/context.tsx |  4 +--
 packages/core/components/Puck/context.tsx     |  8 ++---
 packages/core/components/Puck/index.tsx       |  4 +--
 packages/core/components/Render/index.tsx     | 10 ++++--
 .../core/components/ServerRender/index.tsx    | 10 ++++--
 packages/core/lib/resolve-all-data.ts         |  8 ++---
 packages/core/reducer/index.ts                |  4 +--
 packages/core/types/Config.tsx                | 33 +++++++++++--------
 11 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/apps/demo/app/[...puckPath]/client.tsx b/apps/demo/app/[...puckPath]/client.tsx
index f9b7e643de..749f19c4d6 100644
--- a/apps/demo/app/[...puckPath]/client.tsx
+++ b/apps/demo/app/[...puckPath]/client.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import { Data } from "@/core/types/Config";
-import { Puck } from "@/core/components/Puck";
-import { Render } from "@/core/components/Render";
-import { Button } from "@/core/components/Button";
+import { Button, Data, Puck, Render } from "@/core";
 import headingAnalyzer from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
 import config, { UserConfig } from "../../config";
 import { useDemoData } from "../../lib/use-demo-data";
diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx
index 023e014fe8..0e8be22e0c 100644
--- a/apps/demo/app/custom-ui/[...puckPath]/client.tsx
+++ b/apps/demo/app/custom-ui/[...puckPath]/client.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import { Data } from "@/core/types/Config";
-import { Puck } from "@/core/components/Puck";
-import { Render } from "@/core/components/Render";
-import { Button } from "@/core/components/Button";
+import { Button, Data, Puck, Render } from "@/core";
 import { HeadingAnalyzer } from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
 import config, { UserConfig } from "../../../config";
 import { useDemoData } from "../../../lib/use-demo-data";
diff --git a/apps/demo/config/index.tsx b/apps/demo/config/index.tsx
index 1430e93ee0..c6817c969f 100644
--- a/apps/demo/config/index.tsx
+++ b/apps/demo/config/index.tsx
@@ -1,4 +1,4 @@
-import { Config, Data } from "@/core/types/Config";
+import { Config, Data } from "@/core";
 import { ButtonGroup, ButtonGroupProps } from "./blocks/ButtonGroup";
 import { Card, CardProps } from "./blocks/Card";
 import { Columns, ColumnsProps } from "./blocks/Columns";
diff --git a/packages/core/components/DropZone/context.tsx b/packages/core/components/DropZone/context.tsx
index fe0200465c..820d5473df 100644
--- a/packages/core/components/DropZone/context.tsx
+++ b/packages/core/components/DropZone/context.tsx
@@ -15,9 +15,7 @@ import { getZoneId } from "../../lib/get-zone-id";
 
 export type PathData = Record<string, { path: string[]; label: string }>;
 
-export type DropZoneContext<
-  UserConfig extends Config<any, any, any> = Config<any, any, any>
-> = {
+export type DropZoneContext<UserConfig extends Config = Config> = {
   data: Data;
   config: UserConfig;
   componentState?: Record<string, any>;
diff --git a/packages/core/components/Puck/context.tsx b/packages/core/components/Puck/context.tsx
index d3c0c0d605..ace11fc26d 100644
--- a/packages/core/components/Puck/context.tsx
+++ b/packages/core/components/Puck/context.tsx
@@ -43,9 +43,7 @@ type ZoomConfig = {
   zoom: number;
 };
 
-type AppContext<
-  UserConfig extends Config<any, any, any> = Config<any, any, any>
-> = {
+type AppContext<UserConfig extends Config = Config> = {
   state: AppState;
   dispatch: (action: PuckAction) => void;
   config: UserConfig;
@@ -114,9 +112,7 @@ export const AppProvider = ({
   );
 };
 
-export function useAppContext<
-  UserConfig extends Config<any, any, any> = Config<any, any, any>
->() {
+export function useAppContext<UserConfig extends Config = Config>() {
   const mainContext = useContext(appContext) as AppContext<UserConfig>;
 
   const selectedItem = mainContext.state.ui.itemSelector
diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
index 114493de9b..9c5b1b9b7f 100644
--- a/packages/core/components/Puck/index.tsx
+++ b/packages/core/components/Puck/index.tsx
@@ -50,9 +50,7 @@ import { IframeConfig } from "../../types/IframeConfig";
 
 const getClassName = getClassNameFactory("Puck", styles);
 
-export function Puck<
-  UserConfig extends Config<any, any, any> = Config<any, any, any>
->({
+export function Puck<UserConfig extends Config = Config>({
   children,
   config,
   data: initialData = { content: [], root: { props: { title: "" } } },
diff --git a/packages/core/components/Render/index.tsx b/packages/core/components/Render/index.tsx
index 69da3471bd..9d43af76c8 100644
--- a/packages/core/components/Render/index.tsx
+++ b/packages/core/components/Render/index.tsx
@@ -4,9 +4,13 @@ import { rootDroppableId } from "../../lib/root-droppable-id";
 import { Config, Data } from "../../types/Config";
 import { DropZone, DropZoneProvider } from "../DropZone";
 
-export function Render<
-  UserConfig extends Config<any, any, any> = Config<any, any, any>
->({ config, data }: { config: UserConfig; data: Data }) {
+export function Render<UserConfig extends Config = Config>({
+  config,
+  data,
+}: {
+  config: UserConfig;
+  data: Data;
+}) {
   // DEPRECATED
   const rootProps = data.root.props || data.root;
   const title = rootProps?.title || "";
diff --git a/packages/core/components/ServerRender/index.tsx b/packages/core/components/ServerRender/index.tsx
index ec017fd7e7..18056bb9f7 100644
--- a/packages/core/components/ServerRender/index.tsx
+++ b/packages/core/components/ServerRender/index.tsx
@@ -59,9 +59,13 @@ function DropZoneRender({
   );
 }
 
-export function Render<
-  UserConfig extends Config<any, any, any> = Config<any, any, any>
->({ config, data }: { config: UserConfig; data: Data }) {
+export function Render<UserConfig extends Config = Config>({
+  config,
+  data,
+}: {
+  config: UserConfig;
+  data: Data;
+}) {
   if (config.root?.render) {
     // DEPRECATED
     const rootProps = data.root.props || data.root;
diff --git a/packages/core/lib/resolve-all-data.ts b/packages/core/lib/resolve-all-data.ts
index 252471b7e9..6952241a62 100644
--- a/packages/core/lib/resolve-all-data.ts
+++ b/packages/core/lib/resolve-all-data.ts
@@ -2,12 +2,12 @@ import { Config, Data, MappedItem } from "../types/Config";
 import { resolveAllComponentData } from "./resolve-component-data";
 import { resolveRootData } from "./resolve-root-data";
 
-export const resolveAllData = async (
+export async function resolveAllData(
   data: Data,
-  config: Config<any, any, any>,
+  config: Config,
   onResolveStart?: (item: MappedItem) => void,
   onResolveEnd?: (item: MappedItem) => void
-) => {
+) {
   const dynamicRoot = await resolveRootData(data, config);
 
   const { zones = {} } = data;
@@ -36,4 +36,4 @@ export const resolveAllData = async (
     ),
     zones: resolvedZones,
   };
-};
+}
diff --git a/packages/core/reducer/index.ts b/packages/core/reducer/index.ts
index 1508cf6f6f..949adaf585 100644
--- a/packages/core/reducer/index.ts
+++ b/packages/core/reducer/index.ts
@@ -49,9 +49,7 @@ export const setAction = (state: AppState, action: SetAction) => {
   return { ...state, ...action.state(state) };
 };
 
-export function createReducer<
-  UserConfig extends Config<any, any, any> = Config<any, any, any>
->({
+export function createReducer<UserConfig extends Config = Config>({
   config,
   record,
 }: {
diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
index 2588741f96..dddc8e4d54 100644
--- a/packages/core/types/Config.tsx
+++ b/packages/core/types/Config.tsx
@@ -151,9 +151,9 @@ export type Content<
   Props extends { [key: string]: any } = { [key: string]: any }
 > = ComponentData<Props>[];
 
-export type PuckComponent<
-  Props extends DefaultComponentProps = DefaultComponentProps
-> = (props: WithPuckProps<Props & { puck: PuckContext }>) => JSX.Element;
+export type PuckComponent<Props> = (
+  props: WithPuckProps<Props & { puck: PuckContext }>
+) => JSX.Element;
 
 export type PuckContext = {
   renderDropZone: React.FC<DropZoneProps>;
@@ -162,7 +162,7 @@ export type PuckContext = {
 export type ComponentConfig<
   ComponentProps extends DefaultComponentProps = DefaultComponentProps,
   DefaultProps = ComponentProps,
-  DataShape = ComponentData<ComponentProps>
+  DataShape = Omit<ComponentData<ComponentProps>, "type">
 > = {
   render: PuckComponent<ComponentProps>;
   label?: string;
@@ -171,10 +171,15 @@ export type ComponentConfig<
   resolveData?: (
     data: DataShape,
     params: { changed: Partial<Record<keyof ComponentProps, boolean>> }
-  ) => Promise<{
-    props?: Partial<ComponentProps>;
-    readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
-  }>;
+  ) =>
+    | Promise<{
+        props?: Partial<ComponentProps>;
+        readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
+      }>
+    | {
+        props?: Partial<ComponentProps>;
+        readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
+      };
 };
 
 type Category<ComponentName> = {
@@ -185,12 +190,12 @@ type Category<ComponentName> = {
 };
 
 export type Config<
-  Props extends { [key: string]: any } = { [key: string]: any },
+  Props extends Record<string, any> = Record<string, any>,
   RootProps extends DefaultRootProps = DefaultRootProps,
-  CategoryName extends string = any
+  CategoryName extends string = string
 > = {
   categories?: Record<CategoryName, Category<keyof Props>> & {
-    other?: Category<Props>;
+    other?: Category<keyof Props>;
   };
   components: {
     [ComponentName in keyof Props]: Omit<
@@ -200,9 +205,9 @@ export type Config<
   };
   root?: Partial<
     ComponentConfig<
-      RootProps & { children: ReactNode },
-      Partial<RootProps & { children: ReactNode }>,
-      RootDataWithProps<RootProps>
+      RootProps & { children?: ReactNode },
+      Partial<RootProps & { children?: ReactNode }>,
+      RootDataWithProps
     >
   >;
 };