feat: page layer rewrite

Author: olliethedev

.github/workflows/pull-request-tests.yml

@@ -0,0 +1,25 @@
+name: Jest Tests
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:ci 

README.md

@@ -413,13 +413,12 @@ npm run test
 
 ## Roadmap
 
-- [ ] Increase test coverage
-- [ ] Refactor page layers to be more consistent with component layers
-- [ ] Improve performance
-- [ ] Add form component definitions since we already depend on most shadcn/ui form components
-- [ ] Add option to add children component layers by reference to existing layers (this would be like figma component instances)
+- [ ] Add Blocks. Reusable component blocks that can be used in multiple pages.
+- [ ] Add data sources to component layers (ex, getUser() binds prop user.name)
 - [ ] Add event handlers to component layers (onClick, onSubmit, etc)
-- [ ] Add data sources to component layers (ex, getUser() sets prop user)
+- [ ] React 19 support
+- [ ] Shadcn/ui + Tailwind v4 support
+
 
 ## License
 

__tests__/clickable-wrapper.test.tsx

@@ -2,11 +2,11 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { ClickableWrapper } from "@/components/ui/ui-builder/internal/clickable-wrapper";
-import { Layer } from "@/lib/ui-builder/store/layer-store";
+import { ComponentLayer } from "@/lib/ui-builder/store/layer-store";
 import { getScrollParent } from "@/lib/ui-builder/utils/get-scroll-parent";
 
 describe("ClickableWrapper", () => {
-  const mockLayer: Layer = {
+  const mockLayer: ComponentLayer = {
     id: "layer-1",
     type: "BUTTON",
     props: {},
@@ -75,7 +75,7 @@ describe("ClickableWrapper", () => {
       />
     );
     expect(
-      screen.getByText(mockLayer.type.replaceAll("_", ""))
+      screen.getByText(`undefined (${mockLayer.type.replaceAll("_", "")})`)
     ).toBeInTheDocument();
   });
 

__tests__/component-registry.test.tsx

@@ -1,13 +1,18 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import {
-  componentRegistry,
-  generateFieldOverrides,
-  RegistryEntry,
-  ComponentRegistry,
-} from "@/lib/ui-builder/registry/component-registry";
-import { ComponentLayer, PageLayer } from "@/lib/ui-builder/store/layer-store";
+  generateFieldOverrides
+} from "@/lib/ui-builder/store/editor-utils";
+import { RegistryEntry } from "@/lib/ui-builder/store/editor-store";
+import { ComponentLayer } from "@/lib/ui-builder/store/layer-store";
 import { FieldConfigItem } from "@/components/ui/auto-form/types";
+import { complexComponentDefinitions } from "@/lib/ui-builder/registry/complex-component-definitions";
+import { primitiveComponentDefinitions } from "@/lib/ui-builder/registry/primitive-component-definitions";
+
+const componentRegistry = {
+  ...primitiveComponentDefinitions,
+  ...complexComponentDefinitions,
+};
 
 describe("generateFieldOverrides", () => {
   it("should return empty object if component is not in registry", () => {
@@ -17,7 +22,7 @@ describe("generateFieldOverrides", () => {
       props: {},
       children: [],
     };
-    const overrides = generateFieldOverrides(layer);
+    const overrides = generateFieldOverrides(componentRegistry, layer);
     expect(overrides).toEqual({});
   });
 
@@ -34,7 +39,7 @@ describe("generateFieldOverrides", () => {
       props: {},
       children: [],
     };
-    const overrides = generateFieldOverrides(layer);
+    const overrides = generateFieldOverrides(componentRegistry, layer);
     expect(overrides).toEqual({});
   });
 
@@ -55,7 +60,7 @@ describe("generateFieldOverrides", () => {
       props: { title: "Original Title" },
       children: [],
     };
-    const overrides = generateFieldOverrides(layer);
+    const overrides = generateFieldOverrides(componentRegistry, layer);
     expect(overrides).toEqual({ title: mockFieldConfig });
   });
 
@@ -79,7 +84,7 @@ describe("generateFieldOverrides", () => {
       props: { title: "Original Title", description: "Original Description" },
       children: [],
     };
-    const overrides = generateFieldOverrides(layer);
+    const overrides = generateFieldOverrides(componentRegistry, layer);
     expect(overrides).toEqual({
       title: mockFieldConfig1,
       description: mockFieldConfig2,
@@ -103,7 +108,7 @@ describe("generateFieldOverrides", () => {
       props: { title: "Original Title", subtitle: "Original Subtitle" },
       children: [],
     };
-    const overrides = generateFieldOverrides(layer);
+    const overrides = generateFieldOverrides(componentRegistry, layer);
     expect(overrides).toEqual({ subtitle: mockFieldConfig });
   });
 });