refactor: split types into more files

Author: chrisvxd

apps/demo/config/blocks/ButtonGroup/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import React from "react";
-import { ComponentConfig } from "@/core/types/Config";
+import { ComponentConfig } from "@/core/types";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 import { Button } from "@/core/components/Button";

apps/demo/config/blocks/Card/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import React, { ReactElement } from "react";
-import { ComponentConfig } from "@/core/types/Config";
+import { ComponentConfig } from "@/core/types";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 import dynamic from "next/dynamic";

apps/demo/config/blocks/Columns/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentConfig } from "@/core/types/Config";
+import { ComponentConfig } from "@/core/types";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 import { DropZone } from "@/core/components/DropZone";

apps/demo/config/blocks/Flex/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentConfig } from "@/core/types/Config";
+import { ComponentConfig } from "@/core/types";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 import { DropZone } from "@/core/components/DropZone";

apps/demo/config/blocks/Hero/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import React, { useState } from "react";
-import { ComponentConfig } from "@/core/types/Config";
+import { ComponentConfig } from "@/core/types";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "@/core/lib";
 import { Button } from "@/core/components/Button";

apps/docs/components/Preview/index.tsx

@@ -6,7 +6,7 @@ import { ReactNode } from "react";
 import "@/core/styles.css";
 import { Puck } from "@/core/components/Puck";
 
-import { ComponentConfig } from "@/core/types/Config";
+import { ComponentConfig } from "@/core/types";
 import { getClassNameFactory } from "@/core/lib";
 
 import styles from "./styles.module.css";

packages/core/components/AutoField/fields/ArrayField/index.tsx

@@ -8,7 +8,7 @@ import { Droppable } from "../../../Droppable";
 import { Draggable } from "../../../Draggable";
 import { useCallback, useEffect, useState } from "react";
 import { DragIcon } from "../../../DragIcon";
-import { ArrayState, ItemWithId } from "../../../../types/Config";
+import { ArrayState, ItemWithId } from "../../../../types";
 import { useAppContext } from "../../../Puck/context";
 import { DragDropContext } from "../../../DragDropContext";
 

packages/core/components/AutoField/fields/ExternalField/index.tsx

@@ -3,7 +3,7 @@ import { FieldPropsInternal } from "../..";
 import type {
   ExternalField as ExternalFieldType,
   ExternalFieldWithAdaptor,
-} from "../../../../types/Fields";
+} from "../../../../types";
 
 import { ExternalInput } from "../../../ExternalInput";
 import { Link } from "lucide-react";

packages/core/components/AutoField/index.tsx

@@ -1,6 +1,6 @@
 import getClassNameFactory from "../../lib/get-class-name-factory";
-import { Field, FieldProps } from "../../types/Fields";
-import { UiState } from "../../types/Config";
+import { Field, FieldProps } from "../../types";
+import { UiState } from "../../types";
 
 import styles from "./styles.module.css";
 import {

packages/core/components/DropZone/context.tsx

@@ -5,7 +5,7 @@ import {
   useCallback,
   useState,
 } from "react";
-import { Config, Data } from "../../types/Config";
+import { Config, Data } from "../../types";
 import { DragStart, DragUpdate } from "@measured/dnd";
 import { ItemSelector, getItem } from "../../lib/get-item";
 import { PuckAction } from "../../reducer";

packages/core/components/DropZone/index.tsx

@@ -10,7 +10,7 @@ import { DropZoneProvider, dropZoneContext } from "./context";
 import { getZoneId } from "../../lib/get-zone-id";
 import { useAppContext } from "../Puck/context";
 import { DropZoneProps } from "./types";
-import { ComponentConfig, PuckContext } from "../../types/Config";
+import { ComponentConfig, PuckContext } from "../../types";
 import { getPermissions } from "../../lib/get-permissions";
 
 const getClassName = getClassNameFactory("DropZone", styles);

packages/core/components/ExternalInput/index.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useEffect, useState, useCallback } from "react";
 import styles from "./styles.module.css";
 import getClassNameFactory from "../../lib/get-class-name-factory";
-import { ExternalField } from "../../types/Fields";
+import { ExternalField } from "../../types";
 import { Link, Search, SlidersHorizontal, Unlock } from "lucide-react";
 import { Modal } from "../Modal";
 import { Heading } from "../Heading";

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 { ComponentConfig, Config, Data } from "../../types/Config";
+import { ComponentConfig, Config, Data } from "../../types";
 import { ItemSelector, getItem } from "../../lib/get-item";
 import { scrollIntoView } from "../../lib/scroll-into-view";
 import { ChevronDown, LayoutGrid, Layers, Type } from "lucide-react";

packages/core/components/MenuBar/index.tsx

@@ -6,7 +6,7 @@ import { IconButton } from "../IconButton/IconButton";
 import { useAppContext } from "../Puck/context";
 import getClassNameFactory from "../../lib/get-class-name-factory";
 import { PuckAction } from "../../reducer";
-import type { AppState, Data } from "../../types/Config";
+import type { AppState, Data } from "../../types";
 
 import styles from "./styles.module.css";
 

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

@@ -13,7 +13,7 @@ import styles from "./styles.module.css";
 import { getClassNameFactory } from "../../../../lib";
 import { Preview } from "../Preview";
 import { getZoomConfig } from "../../../../lib/get-zoom-config";
-import { AppState } from "../../../../types/Config";
+import { AppState } from "../../../../types";
 
 const getClassName = getClassNameFactory("PuckCanvas", styles);
 

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

@@ -6,8 +6,8 @@ import {
   replaceAction,
   setAction,
 } from "../../../../reducer";
-import { ComponentData, RootData, UiState } from "../../../../types/Config";
-import type { Field, Fields as FieldsType } from "../../../../types/Fields";
+import { ComponentData, RootData, UiState } from "../../../../types";
+import type { Field, Fields as FieldsType } from "../../../../types";
 import { AutoFieldPrivate } from "../../../AutoField";
 import { useAppContext } from "../../context";
 

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

@@ -1,11 +1,11 @@
 import { DropZone } from "../../../DropZone";
 import { rootDroppableId } from "../../../../lib/root-droppable-id";
-import { ReactNode, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { useAppContext } from "../../context";
 import AutoFrame, { autoFrameContext } from "../../../AutoFrame";
 import styles from "./styles.module.css";
 import { getClassNameFactory } from "../../../../lib";
-import { DefaultRootRenderProps } from "../../../../types/Config";
+import { DefaultRootRenderProps } from "../../../../types";
 
 const getClassName = getClassNameFactory("PuckPreview", styles);
 

packages/core/components/Puck/context.tsx

@@ -5,15 +5,20 @@ import {
   useEffect,
   useState,
 } from "react";
-import { AppState, Config, UiState, Permissions } from "../../types/Config";
+import {
+  Config,
+  IframeConfig,
+  Overrides,
+  Permissions,
+  AppState,
+  UiState,
+  Plugin,
+} from "../../types";
 import { PuckAction } from "../../reducer";
 import { getItem } from "../../lib/get-item";
-import { Plugin } from "../../types/Plugin";
-import { Overrides } from "../../types/Overrides";
 import { PuckHistory } from "../../lib/use-puck-history";
 import { defaultViewports } from "../ViewportControls/default-viewports";
-import { Viewports } from "../../types/Viewports";
-import { IframeConfig } from "../../types/IframeConfig";
+import { Viewports } from "../../types";
 import { UAParser } from "ua-parser-js";
 
 export const defaultAppState: AppState = {

packages/core/components/Puck/index.tsx

@@ -10,18 +10,20 @@ import {
 import { DragStart, DragUpdate } from "@measured/dnd";
 
 import type {
-  AppState,
   Config,
   Data,
+  AppState,
   UiState,
+  IframeConfig,
+  OnAction,
+  Overrides,
   Permissions,
   ExtractPropsFromConfig,
   ExtractRootPropsFromConfig,
-} from "../../types/Config";
-import type { OnAction } from "../../types/OnAction";
+  Plugin,
+} from "../../types";
 import { Button } from "../Button";
 
-import { Plugin } from "../../types/Plugin";
 import { usePlaceholderStyle } from "../../lib/use-placeholder-style";
 
 import { SidebarSection } from "../SidebarSection";
@@ -47,14 +49,12 @@ import { Fields } from "./components/Fields";
 import { Components } from "./components/Components";
 import { Preview } from "./components/Preview";
 import { Outline } from "./components/Outline";
-import { Overrides } from "../../types/Overrides";
 import { usePuckHistory } from "../../lib/use-puck-history";
 import { useHistoryStore, type History } from "../../lib/use-history-store";
 import { Canvas } from "./components/Canvas";
 import { defaultViewports } from "../ViewportControls/default-viewports";
-import { Viewports } from "../../types/Viewports";
+import { Viewports } from "../../types";
 import { DragDropContext } from "../DragDropContext";
-import { IframeConfig } from "../../types/IframeConfig";
 import { insertComponent } from "../../lib/insert-component";
 import { useLoadedOverrides } from "../../lib/use-loaded-overrides";
 import { DefaultOverride } from "../DefaultOverride";
@@ -309,7 +309,7 @@ export function Puck<
       if (!window.matchMedia("(min-width: 638px)").matches) {
         dispatch({
           type: "setUi",
-          ui: (ui) => ({
+          ui: (ui: UiState) => ({
             ...ui,
             ...(ui.rightSideBarVisible ? { leftSideBarVisible: false } : {}),
           }),

packages/core/components/Render/index.tsx

@@ -6,7 +6,7 @@ import {
   Data,
   ExtractPropsFromConfig,
   ExtractRootPropsFromConfig,
-} from "../../types/Config";
+} from "../../types";
 import { DropZone, DropZoneProvider } from "../DropZone";
 
 export function Render<

packages/core/components/ServerRender/index.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from "react";
 import { rootDroppableId } from "../../lib/root-droppable-id";
-import { Config, Data } from "../../types/Config";
+import { Config, Data } from "../../types";
 import { setupZone } from "../../lib/setup-zone";
 
 type DropZoneRenderProps = {

packages/core/components/ViewportControls/default-viewports.ts

@@ -1,4 +1,4 @@
-import { Viewports } from "../../types/Viewports";
+import { Viewports } from "../../types";
 
 export const defaultViewports: Required<Viewports> = [
   { width: 360, height: "auto", icon: "Smartphone", label: "Small" },

packages/core/components/ViewportControls/index.tsx

@@ -5,7 +5,7 @@ import { ReactNode, useEffect, useMemo, useState } from "react";
 import { getClassNameFactory } from "../../lib";
 
 import styles from "./styles.module.css";
-import { Viewport } from "../../types/Viewports";
+import { Viewport } from "../../types";
 
 const icons = {
   Smartphone: <Smartphone size={16} />,

packages/core/index.ts

@@ -2,8 +2,10 @@ import "./styles.css";
 
 export type { PuckAction } from "./reducer/actions";
 
-export * from "./types/Config";
-export * from "./types/Plugin";
+export * from "./types/API";
+export * from "./types";
+export * from "./types/Data";
+export * from "./types/Props";
 export * from "./types/Fields";
 
 export * from "./components/ActionBar";

packages/core/lib/__tests__/insert-component.spec.tsx

@@ -1,5 +1,5 @@
 import { cleanup } from "@testing-library/react";
-import { AppState, Config, Data } from "../../types/Config";
+import { AppState, Config, Data } from "../../types";
 import { PuckAction } from "../../reducer";
 import { defaultAppState } from "../../components/Puck/context";
 import { insertComponent } from "../insert-component";

packages/core/lib/__tests__/is-child-of-zone.spec.tsx

@@ -1,5 +1,5 @@
 import { DropZoneContext } from "../../components/DropZone/context";
-import { Config, Data } from "../../types/Config";
+import { Config, Data } from "../../types";
 import { isChildOfZone } from "../is-child-of-zone";
 
 const item1 = { type: "MyComponent", props: { id: "MyComponent-1" } };

packages/core/lib/__tests__/resolve-all-data.spec.tsx

@@ -1,4 +1,4 @@
-import { Config, Data } from "../../types/Config";
+import { Config, Data } from "../../types";
 import { resolveAllData } from "../resolve-all-data";
 
 const item1 = {

packages/core/lib/__tests__/use-breadcrumbs.spec.tsx

@@ -1,5 +1,5 @@
 import { DropZoneContext } from "../../components/DropZone/context";
-import { Config, Data } from "../../types/Config";
+import { Config, Data } from "../../types";
 import { convertPathDataToBreadcrumbs } from "../use-breadcrumbs";
 
 const item1 = { type: "MyComponent", props: { id: "MyComponent-1" } };

packages/core/lib/__tests__/use-resolved-data.spec.tsx

@@ -1,5 +1,5 @@
 import { act, cleanup, renderHook, waitFor } from "@testing-library/react";
-import { AppState, Config, Data } from "../../types/Config";
+import { AppState, Config, Data } from "../../types";
 import { useResolvedData } from "../use-resolved-data";
 import { SetAction, SetDataAction } from "../../reducer";
 import { cache } from "../resolve-component-data";

packages/core/lib/apply-dynamic-props.ts

@@ -1,4 +1,4 @@
-import { ComponentData, Data, RootData } from "../types/Config";
+import { ComponentData, Data, RootData } from "../types";
 
 export const applyDynamicProps = (
   data: Data,

packages/core/lib/area-contains-zones.ts

@@ -1,4 +1,4 @@
-import { Data } from "../types/Config";
+import { Data } from "../types";
 import { findZonesForArea } from "./find-zones-for-area";
 
 export const areaContainsZones = (data: Data, area: string) => {

packages/core/lib/default-data.ts

@@ -1,4 +1,4 @@
-import { Data } from "../types/Config";
+import { Data } from "../types";
 
 export const defaultData = (data: Partial<Data>) => ({
   ...data,

packages/core/lib/find-zones-for-area.ts

@@ -1,4 +1,4 @@
-import { Content, Data } from "../types/Config";
+import { Content, Data } from "../types";
 import { getZoneId } from "./get-zone-id";
 
 export const findZonesForArea = (

packages/core/lib/flush-zones.ts

@@ -1,4 +1,4 @@
-import type { AppState, Data } from "../types/Config";
+import type { AppState, Data } from "../types";
 import { addToZoneCache } from "../reducer/data";
 
 /**

packages/core/lib/get-changed.ts

@@ -1,4 +1,4 @@
-import { ComponentData } from "../types/Config";
+import { ComponentData } from "../types";
 
 export const getChanged = (
   newItem: Omit<Partial<ComponentData<any>>, "type"> | undefined,

packages/core/lib/get-item.ts

@@ -1,4 +1,4 @@
-import { Data } from "../types/Config";
+import { Data } from "../types";
 import { rootDroppableId } from "./root-droppable-id";
 import { setupZone } from "./setup-zone";
 

packages/core/lib/get-permissions.ts

@@ -4,7 +4,7 @@ import {
   Config,
   DefaultComponentProps,
   Permissions,
-} from "../types/Config";
+} from "../types";
 import { getChanged } from "./get-changed";
 
 import { resolvePermissions } from "./resolve-permissions";

packages/core/lib/get-zoom-config.ts

@@ -1,5 +1,5 @@
 import { getBox } from "css-box-model";
-import { AppState } from "../types/Config";
+import { AppState } from "../types";
 
 const RESET_ZOOM_SMALLER_THAN_FRAME = true;
 

packages/core/lib/insert-component.ts

@@ -1,5 +1,5 @@
 import { insertAction, InsertAction, PuckAction } from "../reducer";
-import { AppState, Config } from "../types/Config";
+import { AppState, Config } from "../types";
 import { generateId } from "./generate-id";
 
 // Makes testing easier without mocks

packages/core/lib/is-child-of-zone.ts

@@ -1,5 +1,5 @@
 import { DropZoneContext } from "../components/DropZone/context";
-import { Content } from "../types/Config";
+import { Content } from "../types";
 import { getItem } from "./get-item";
 import { getZoneId } from "./get-zone-id";
 

packages/core/lib/migrate.ts

@@ -1,4 +1,4 @@
-import { Data } from "../types/Config";
+import { Data } from "../types";
 
 type Migration = (props: Data & { [key: string]: any }) => Data;
 

packages/core/lib/reduce-related-zones.ts

@@ -1,4 +1,4 @@
-import { Data } from "../types/Config";
+import { Data } from "../types";
 import { generateId } from "./generate-id";
 import { getZoneId } from "./get-zone-id";
 

packages/core/lib/resolve-all-data.ts

@@ -5,7 +5,7 @@ import {
   Data,
   DefaultComponentProps,
   DefaultRootFieldProps,
-} from "../types/Config";
+} from "../types";
 import { resolveAllComponentData } from "./resolve-component-data";
 import { resolveRootData } from "./resolve-root-data";
 import { defaultData } from "./default-data";