@alepha/react 0.14.1 → 0.14.3

package/src/core/index.ts

@@ -1,63 +1,24 @@
 import { $module } from "alepha";
-import { AlephaDateTime } from "alepha/datetime";
-import { AlephaServer, type ServerRequest } from "alepha/server";
-import { AlephaServerCache } from "alepha/server/cache";
-import { AlephaServerLinks } from "alepha/server/links";
-import type { ReactNode } from "react";
-import { $page, type PageAnimation } from "./primitives/$page.ts";
-import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
-import {
-  ReactPageProvider,
-  type ReactRouterState,
-} from "./providers/ReactPageProvider.ts";
-import { ReactServerProvider } from "./providers/ReactServerProvider.ts";
-import { ReactPageServerService } from "./services/ReactPageServerService.ts";
-import { ReactPageService } from "./services/ReactPageService.ts";
-import { ReactRouter } from "./services/ReactRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export * from "./index.shared.ts";
-export * from "./index.shared-router.ts";
-export * from "./providers/ReactBrowserProvider.ts";
-export * from "./providers/ReactPageProvider.ts";
-export * from "./providers/ReactServerProvider.ts";
+export { default as ClientOnly } from "./components/ClientOnly.tsx";
+export type * from "./components/ClientOnly.tsx";
+export { default as ErrorBoundary } from "./components/ErrorBoundary.tsx";
+export type * from "./components/ErrorBoundary.tsx";
+export * from "./contexts/AlephaProvider.tsx";
+export * from "./contexts/AlephaContext.ts";
+export * from "./hooks/useAction.ts";
+export * from "./hooks/useAlepha.ts";
+export * from "./hooks/useEvents.ts";
+export * from "./hooks/useInject.ts";
+export * from "./hooks/useClient.ts";
+export * from "./hooks/useStore.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 declare module "alepha" {
-  interface State {
-    "alepha.react.router.state"?: ReactRouterState;
-  }
-
   interface Hooks {
-    /**
-     * Fires when the React application is starting to be rendered on the server.
-     */
-    "react:server:render:begin": {
-      request?: ServerRequest;
-      state: ReactRouterState;
-    };
-    /**
-     * Fires when the React application has been rendered on the server.
-     */
-    "react:server:render:end": {
-      request?: ServerRequest;
-      state: ReactRouterState;
-      html: string;
-    };
-    // -----------------------------------------------------------------------------------------------------------------
-    /**
-     * Fires when the React application is being rendered on the browser.
-     */
-    "react:browser:render": {
-      root: HTMLElement;
-      element: ReactNode;
-      state: ReactRouterState;
-      hydration?: ReactHydrationState;
-    };
-    // -----------------------------------------------------------------------------------------------------------------
-    // TOP LEVEL: All user actions (forms, transitions, custom actions)
     /**
      * Fires when a user action is starting.
      * Action can be a form submission, a route transition, or a custom action.
@@ -91,35 +52,6 @@ declare module "alepha" {
       type: string;
       id?: string;
     };
-    // -----------------------------------------------------------------------------------------------------------------
-    // SPECIFIC: Route transitions
-    /**
-     * Fires when a route transition is starting.
-     */
-    "react:transition:begin": {
-      previous: ReactRouterState;
-      state: ReactRouterState;
-      animation?: PageAnimation;
-    };
-    /**
-     * Fires when a route transition has succeeded.
-     */
-    "react:transition:success": {
-      state: ReactRouterState;
-    };
-    /**
-     * Fires when a route transition has failed.
-     */
-    "react:transition:error": {
-      state: ReactRouterState;
-      error: Error;
-    };
-    /**
-     * Fires when a route transition has completed, regardless of success or failure.
-     */
-    "react:transition:end": {
-      state: ReactRouterState;
-    };
   }
 }
 
@@ -136,26 +68,5 @@ declare module "alepha" {
  * @module alepha.react
  */
 export const AlephaReact = $module({
-  name: "alepha.react",
-  primitives: [$page],
-  services: [
-    ReactServerProvider,
-    ReactPageProvider,
-    ReactRouter,
-    ReactPageService,
-    ReactPageServerService,
-  ],
-  register: (alepha) =>
-    alepha
-      .with(AlephaDateTime)
-      .with(AlephaServer)
-      .with(AlephaServerCache)
-      .with(AlephaServerLinks)
-      .with({
-        provide: ReactPageService,
-        use: ReactPageServerService,
-      })
-      .with(ReactServerProvider)
-      .with(ReactPageProvider)
-      .with(ReactRouter),
+  name: "alepha.react.core",
 });

package/src/form/hooks/useForm.browser.spec.tsx

@@ -0,0 +1,366 @@
+import { AlephaContext } from "@alepha/react";
+import { fireEvent, render } from "@testing-library/react";
+import { Alepha, t } from "alepha";
+import { AlephaLogger } from "alepha/logger";
+import type { ReactNode } from "react";
+import { describe, it } from "vitest";
+import { useForm } from "../index.ts";
+
+describe("useForm", () => {
+  const renderWithAlepha = (alepha: Alepha, element: ReactNode) => {
+    return render(
+      <AlephaContext.Provider value={alepha}>{element}</AlephaContext.Provider>,
+    );
+  };
+
+  it("should run handler on submit", async ({ expect }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+    const calls: Array<any> = [];
+    const Form = () => {
+      const form = useForm({
+        id: "test",
+        schema: t.object({
+          str: t.text(),
+          int: t.integer(),
+          nested: t.object({
+            str: t.text(),
+            another: t.object({
+              level: t.text(),
+            }),
+          }),
+        }),
+        handler: (values, args) => {
+          calls.push(values);
+        },
+      });
+
+      return (
+        <form {...form.props} data-testid="test-form">
+          <input {...form.input.str.props} />
+          <input {...form.input.int.props} />
+          <input {...form.input.nested.items.str.props} />
+          <input {...form.input.nested.items.another.items.level.props} />
+          <button type="submit">Submit</button>
+        </form>
+      );
+    };
+
+    await alepha.start();
+
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    fireEvent.change(ui.getByTestId("test-str"), {
+      target: { value: "testuser" },
+    });
+
+    fireEvent.change(ui.getByTestId("test-int"), {
+      target: { value: "123" },
+    });
+
+    fireEvent.change(ui.getByTestId("test-nested.str"), {
+      target: { value: "nestedvalue" },
+    });
+
+    fireEvent.change(ui.getByTestId("test-nested.another.level"), {
+      target: { value: "anothervalue" },
+    });
+
+    fireEvent.submit(ui.getByText("Submit"));
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(calls[0]).toEqual({
+      str: "testuser",
+      int: 123,
+      nested: {
+        str: "nestedvalue",
+        another: {
+          level: "anothervalue",
+        },
+      },
+    });
+  });
+
+  it("should provide correct InputField types for nested objects", async ({
+    expect,
+  }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+
+    const Form = () => {
+      const form = useForm({
+        id: "types-test",
+        schema: t.object({
+          name: t.text(),
+          address: t.object({
+            street: t.text(),
+            city: t.text(),
+            country: t.object({
+              code: t.text(),
+              name: t.text(),
+            }),
+          }),
+        }),
+        handler: () => {},
+      });
+
+      // Verify nested object InputFields have items property
+      const addressInput = form.input.address;
+      const streetInput = addressInput.items.street;
+      const countryInput = addressInput.items.country;
+      const countryCodeInput = countryInput.items.code;
+
+      return (
+        <div data-testid="type-check">
+          <span data-testid="has-items">
+            {addressInput.items ? "true" : "false"}
+          </span>
+          <span data-testid="street-path">{streetInput.path}</span>
+          <span data-testid="country-code-path">{countryCodeInput.path}</span>
+        </div>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    expect(ui.getByTestId("has-items").textContent).toBe("true");
+    expect(ui.getByTestId("street-path").textContent).toBe("/address/street");
+    expect(ui.getByTestId("country-code-path").textContent).toBe(
+      "/address/country/code",
+    );
+  });
+
+  it("should provide ArrayInputField with items array for arrays", async ({
+    expect,
+  }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+
+    const Form = () => {
+      const form = useForm({
+        id: "array-test",
+        schema: t.object({
+          tags: t.array(t.text()),
+          contacts: t.array(
+            t.object({
+              name: t.text(),
+              email: t.text(),
+            }),
+          ),
+        }),
+        handler: () => {},
+      });
+
+      // Verify array InputFields have items property (initially empty)
+      const tagsInput = form.input.tags;
+      const contactsInput = form.input.contacts;
+
+      return (
+        <div data-testid="array-check">
+          <span data-testid="tags-has-items">
+            {Array.isArray(tagsInput.items) ? "true" : "false"}
+          </span>
+          <span data-testid="tags-items-length">{tagsInput.items.length}</span>
+          <span data-testid="contacts-has-items">
+            {Array.isArray(contactsInput.items) ? "true" : "false"}
+          </span>
+          <span data-testid="contacts-items-length">
+            {contactsInput.items.length}
+          </span>
+          <span data-testid="tags-path">{tagsInput.path}</span>
+          <span data-testid="contacts-path">{contactsInput.path}</span>
+        </div>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    // Arrays have items property as array (initially empty)
+    expect(ui.getByTestId("tags-has-items").textContent).toBe("true");
+    expect(ui.getByTestId("tags-items-length").textContent).toBe("0");
+    expect(ui.getByTestId("contacts-has-items").textContent).toBe("true");
+    expect(ui.getByTestId("contacts-items-length").textContent).toBe("0");
+    expect(ui.getByTestId("tags-path").textContent).toBe("/tags");
+    expect(ui.getByTestId("contacts-path").textContent).toBe("/contacts");
+  });
+
+  it("should update array values via set method", async ({ expect }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+    const calls: Array<any> = [];
+
+    const Form = () => {
+      const form = useForm({
+        id: "array-set-test",
+        schema: t.object({
+          tags: t.array(t.text()),
+        }),
+        handler: (values) => {
+          calls.push(values);
+        },
+      });
+
+      return (
+        <form {...form.props} data-testid="array-form">
+          <button
+            type="button"
+            data-testid="set-tags"
+            onClick={() => form.input.tags.set(["tag1", "tag2", "tag3"])}
+          >
+            Set Tags
+          </button>
+          <button type="submit">Submit</button>
+        </form>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    fireEvent.click(ui.getByTestId("set-tags"));
+    fireEvent.submit(ui.getByText("Submit"));
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(calls[0]).toEqual({
+      tags: ["tag1", "tag2", "tag3"],
+    });
+  });
+
+  it("should update array of objects via set method", async ({ expect }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+    const calls: Array<any> = [];
+
+    const Form = () => {
+      const form = useForm({
+        id: "array-objects-test",
+        schema: t.object({
+          contacts: t.array(
+            t.object({
+              name: t.text(),
+              email: t.text(),
+            }),
+          ),
+        }),
+        handler: (values) => {
+          calls.push(values);
+        },
+      });
+
+      return (
+        <form {...form.props} data-testid="array-objects-form">
+          <button
+            type="button"
+            data-testid="set-contacts"
+            onClick={() =>
+              form.input.contacts.set([
+                { name: "Alice", email: "alice@example.com" },
+                { name: "Bob", email: "bob@example.com" },
+              ])
+            }
+          >
+            Set Contacts
+          </button>
+          <button type="submit">Submit</button>
+        </form>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    fireEvent.click(ui.getByTestId("set-contacts"));
+    fireEvent.submit(ui.getByText("Submit"));
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(calls[0]).toEqual({
+      contacts: [
+        { name: "Alice", email: "alice@example.com" },
+        { name: "Bob", email: "bob@example.com" },
+      ],
+    });
+  });
+
+  it("should handle complex nested structures with objects and arrays", async ({
+    expect,
+  }) => {
+    const alepha = Alepha.create().with(AlephaLogger);
+    const calls: Array<any> = [];
+
+    const Form = () => {
+      const form = useForm({
+        id: "complex-test",
+        schema: t.object({
+          company: t.object({
+            name: t.text(),
+            address: t.object({
+              street: t.text(),
+              city: t.text(),
+            }),
+          }),
+          employees: t.array(
+            t.object({
+              name: t.text(),
+              role: t.text(),
+            }),
+          ),
+        }),
+        handler: (values) => {
+          calls.push(values);
+        },
+      });
+
+      return (
+        <form {...form.props} data-testid="complex-form">
+          <input {...form.input.company.items.name.props} />
+          <input {...form.input.company.items.address.items.street.props} />
+          <input {...form.input.company.items.address.items.city.props} />
+          <button
+            type="button"
+            data-testid="set-employees"
+            onClick={() =>
+              form.input.employees.set([
+                { name: "Alice", role: "Engineer" },
+                { name: "Bob", role: "Designer" },
+              ])
+            }
+          >
+            Set Employees
+          </button>
+          <button type="submit">Submit</button>
+        </form>
+      );
+    };
+
+    await alepha.start();
+    const ui = renderWithAlepha(alepha, <Form />);
+
+    fireEvent.change(ui.getByTestId("complex-test-company.name"), {
+      target: { value: "Acme Corp" },
+    });
+    fireEvent.change(ui.getByTestId("complex-test-company.address.street"), {
+      target: { value: "123 Main St" },
+    });
+    fireEvent.change(ui.getByTestId("complex-test-company.address.city"), {
+      target: { value: "New York" },
+    });
+    fireEvent.click(ui.getByTestId("set-employees"));
+    fireEvent.submit(ui.getByText("Submit"));
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(calls[0]).toEqual({
+      company: {
+        name: "Acme Corp",
+        address: {
+          street: "123 Main St",
+          city: "New York",
+        },
+      },
+      employees: [
+        { name: "Alice", role: "Engineer" },
+        { name: "Bob", role: "Designer" },
+      ],
+    });
+  });
+});

package/src/form/services/FormModel.ts

@@ -457,6 +457,11 @@ export class FormModel<T extends TObject> {
     }
 
     if (t.schema.isBoolean(schema)) {
+      // Handle string representations from Select components (Yes/No dropdown)
+      if (input === "true") return true;
+      if (input === "false") return false;
+      if (input === "" || input === null || input === undefined) return undefined;
+      // Handle actual boolean values
       return !!input;
     }