@alepha/react 0.11.10 → 0.11.12

package/src/auth/services/ReactAuth.ts

@@ -0,0 +1,124 @@
+import { ReactBrowserProvider, Redirection } from "@alepha/react";
+import { $hook, $inject, Alepha } from "alepha";
+import { $logger } from "alepha/logger";
+import type { UserAccountToken } from "alepha/security";
+import { HttpClient } from "alepha/server";
+import { tokenResponseSchema } from "../schemas/tokenResponseSchema.ts";
+import type { Tokens } from "../schemas/tokensSchema.ts";
+import { userinfoResponseSchema } from "../schemas/userinfoResponseSchema.ts";
+
+/**
+ * Browser, SSR friendly, service to handle authentication.
+ */
+export class ReactAuth {
+  protected readonly log = $logger();
+  protected readonly alepha = $inject(Alepha);
+  protected readonly httpClient = $inject(HttpClient);
+
+  static path = {
+    login: "/oauth/login",
+    callback: "/oauth/callback",
+    logout: "/oauth/logout",
+    token: "/_auth/token",
+    refresh: "/_auth/refresh",
+    userinfo: "/_auth/userinfo",
+  };
+
+  protected readonly onBeginTransition = $hook({
+    on: "react:transition:begin",
+    handler: async (event) => {
+      if (this.alepha.isBrowser()) {
+        Object.defineProperty(event.state, "user", {
+          get: () => this.user,
+        });
+      }
+    },
+  });
+
+  protected readonly onFetchRequest = $hook({
+    on: "client:onRequest",
+    handler: async ({ request }) => {
+      if (this.alepha.isBrowser() && this.user) {
+        // ensure cookies are sent with requests and refresh-able
+        request.credentials ??= "include";
+      }
+    },
+  });
+
+  /**
+   * Get the current authenticated user.
+   *
+   * Alias for `alepha.state.get("user")`
+   */
+  public get user(): UserAccountToken | undefined {
+    return this.alepha.state.get("alepha.server.request.user");
+  }
+
+  public async ping() {
+    const { data } = await this.httpClient.fetch(ReactAuth.path.userinfo, {
+      schema: { response: userinfoResponseSchema },
+    });
+
+    this.alepha.state.set("alepha.server.request.apiLinks", data.api);
+    this.alepha.state.set("alepha.server.request.user", data.user);
+
+    return data.user;
+  }
+
+  public async login(
+    provider: string,
+    options: {
+      hostname?: string;
+      username?: string;
+      password?: string;
+      redirect?: string;
+      [extra: string]: any;
+    },
+  ): Promise<Tokens> {
+    if (options.username || options.password) {
+      const { data } = await this.httpClient.fetch(
+        `${options.hostname || ""}${ReactAuth.path.token}?provider=${provider}`,
+        {
+          method: "POST",
+          body: JSON.stringify({
+            username: options.username,
+            password: options.password,
+            ...options,
+          }),
+          schema: { response: tokenResponseSchema },
+        },
+      );
+
+      this.alepha.state.set("alepha.server.request.apiLinks", data.api);
+      this.alepha.state.set("alepha.server.request.user", data.user);
+
+      return data;
+    }
+
+    if (this.alepha.isBrowser()) {
+      const browser = this.alepha.inject(ReactBrowserProvider);
+      const redirect =
+        options.redirect ||
+        (browser.transitioning
+          ? window.location.origin + browser.transitioning.to
+          : window.location.href);
+
+      const href = `${window.location.origin}${ReactAuth.path.login}?provider=${provider}&redirect_uri=${encodeURIComponent(redirect)}`;
+
+      if (browser.transitioning) {
+        throw new Redirection(href);
+      } else {
+        window.location.href = href;
+        return {} as Tokens;
+      }
+    }
+
+    throw new Redirection(
+      `${ReactAuth.path.login}?provider=${provider}&redirect_uri=${options.redirect || "/"}`,
+    );
+  }
+
+  public logout() {
+    window.location.href = `${ReactAuth.path.logout}?post_logout_redirect_uri=${encodeURIComponent(window.location.origin)}`;
+  }
+}

package/src/{components → core/components}/ErrorViewer.tsx

@@ -1,4 +1,4 @@
-import type { Alepha } from "@alepha/core";
+import type { Alepha } from "alepha";
 import { useState } from "react";
 
 interface ErrorViewerProps {
@@ -97,6 +97,7 @@ const ErrorViewer = ({ error, alepha }: ErrorViewerProps) => {
           <div style={styles.sectionHeader}>
             <span>Stack trace</span>
             <button
+              type="button"
               onClick={() => copyToClipboard(error.stack!)}
               style={styles.copyButton}
             >
@@ -108,7 +109,7 @@ const ErrorViewer = ({ error, alepha }: ErrorViewerProps) => {
               <div key={i}>{line}</div>
             ))}
             {!expanded && hiddenLineCount > 0 && (
-              <div style={styles.expandLine} onClick={() => setExpanded(true)}>
+              <div  style={styles.expandLine} onClick={() => setExpanded(true)}>
                 + {hiddenLineCount} more lines...
               </div>
             )}

package/src/{components → core/components}/NestedView.tsx

@@ -19,7 +19,7 @@ export interface NestedViewProps {
  *
  * @example
  * ```tsx
- * import { NestedView } from "alepha/react";
+ * import { NestedView } from "@alepha/react";
  *
  * class App {
  *   parent = $page({

package/src/{contexts → core/contexts}/AlephaContext.ts

@@ -1,4 +1,4 @@
-import type { Alepha } from "@alepha/core";
+import type { Alepha } from "alepha";
 import { createContext } from "react";
 
 export const AlephaContext = createContext<Alepha | undefined>(undefined);

package/src/{descriptors → core/descriptors}/$page.ts

@@ -6,9 +6,9 @@ import {
   KIND,
   type Static,
   type TSchema,
-} from "@alepha/core";
-import type { ServerRequest } from "@alepha/server";
-import type { ServerRouteCache } from "@alepha/server-cache";
+} from "alepha";
+import type { ServerRequest } from "alepha/server";
+import type { ServerRouteCache } from "alepha/server/cache";
 import type { FC, ReactNode } from "react";
 import type { ClientOnlyProps } from "../components/ClientOnly.tsx";
 import type { Redirection } from "../errors/Redirection.ts";
@@ -234,7 +234,7 @@ export interface PageDescriptorOptions<
    * If true, the page will be considered as a static page, immutable and cacheable.
    * Replace boolean by an object to define static entries. (e.g. list of params/query)
    *
-   * Browser-side: it only works with `@alepha/vite`, which can pre-render the page at build time.
+   * Browser-side: it only works with `alepha/vite`, which can pre-render the page at build time.
    *
    * Server-side: It will act as timeless cached page. You can use `cache` to configure the cache behavior.
    */

package/src/{hooks → core/hooks}/useAction.ts

@@ -3,7 +3,7 @@ import {
   type DurationLike,
   type Interval,
   type Timeout,
-} from "@alepha/datetime";
+} from "alepha/datetime";
 import {
   type DependencyList,
   useCallback,

package/src/{hooks → core/hooks}/useAlepha.ts

@@ -1,4 +1,4 @@
-import { type Alepha, AlephaError } from "@alepha/core";
+import { type Alepha, AlephaError } from "alepha";
 import { useContext } from "react";
 import { AlephaContext } from "../contexts/AlephaContext.ts";
 

package/src/{hooks → core/hooks}/useClient.ts

@@ -2,7 +2,7 @@ import {
   type ClientScope,
   type HttpVirtualClient,
   LinkProvider,
-} from "@alepha/server-links";
+} from "alepha/server/links";
 import { useInject } from "./useInject.ts";
 
 /**

package/src/{hooks → core/hooks}/useEvents.ts

@@ -1,4 +1,4 @@
-import type { Async, Hook, Hooks } from "@alepha/core";
+import type { Async, Hook, Hooks } from "alepha";
 import { type DependencyList, useEffect } from "react";
 import { useAlepha } from "./useAlepha.ts";
 

package/src/{hooks → core/hooks}/useInject.ts

@@ -1,4 +1,4 @@
-import type { Service } from "@alepha/core";
+import type { Service } from "alepha";
 import { useMemo } from "react";
 import { useAlepha } from "./useAlepha.ts";
 

package/src/{hooks → core/hooks}/useQueryParams.ts

@@ -1,4 +1,4 @@
-import type { Alepha, Static, TObject } from "@alepha/core";
+import type { Alepha, Static, TObject } from "alepha";
 import { useEffect, useState } from "react";
 import { useAlepha } from "./useAlepha.ts";
 import { useRouter } from "./useRouter.ts";

package/src/{hooks → core/hooks}/useRouterState.ts

@@ -1,4 +1,4 @@
-import { AlephaError } from "@alepha/core";
+import { AlephaError } from "alepha";
 import type { ReactRouterState } from "../providers/ReactPageProvider.ts";
 import { useStore } from "./useStore.ts";
 

package/src/{hooks → core/hooks}/useSchema.ts

@@ -1,10 +1,10 @@
-import type { Alepha } from "@alepha/core";
+import type { Alepha } from "alepha";
 import {
   type FetchOptions,
   HttpClient,
   type RequestConfigSchema,
-} from "@alepha/server";
-import { LinkProvider, type VirtualAction } from "@alepha/server-links";
+} from "alepha/server";
+import { LinkProvider, type VirtualAction } from "alepha/server/links";
 import { useEffect, useState } from "react";
 import { useAlepha } from "./useAlepha.ts";
 import { useInject } from "./useInject.ts";

package/src/{hooks → core/hooks}/useStore.ts

@@ -1,5 +1,5 @@
-import type { State, Static, TAtomObject } from "@alepha/core";
-import { Atom } from "@alepha/core";
+import type { State, Static, TAtomObject } from "alepha";
+import { Atom } from "alepha";
 import { useEffect, useMemo, useState } from "react";
 import { useAlepha } from "./useAlepha.ts";
 

package/src/{index.browser.ts → core/index.browser.ts}

@@ -1,7 +1,7 @@
-import { $module } from "@alepha/core";
-import { AlephaDateTime } from "@alepha/datetime";
-import { AlephaServer } from "@alepha/server";
-import { AlephaServerLinks } from "@alepha/server-links";
+import { $module } from "alepha";
+import { AlephaDateTime } from "alepha/datetime";
+import { AlephaServer } from "alepha/server";
+import { AlephaServerLinks } from "alepha/server/links";
 import { $page } from "./descriptors/$page.ts";
 import { ReactBrowserProvider } from "./providers/ReactBrowserProvider.ts";
 import { ReactBrowserRendererProvider } from "./providers/ReactBrowserRendererProvider.ts";

package/src/{index.ts → core/index.ts}

@@ -1,8 +1,8 @@
-import { $module } from "@alepha/core";
-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 { $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 "./descriptors/$page.ts";
 import type { ReactHydrationState } from "./providers/ReactBrowserProvider.ts";
@@ -24,7 +24,7 @@ export * from "./providers/ReactServerProvider.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-declare module "@alepha/core" {
+declare module "alepha" {
   interface State {
     "alepha.react.router.state"?: ReactRouterState;
   }

package/src/{providers → core/providers}/ReactBrowserProvider.ts

@@ -8,10 +8,10 @@ import {
   type State,
   type Static,
   t,
-} from "@alepha/core";
-import { DateTimeProvider } from "@alepha/datetime";
-import { $logger } from "@alepha/logger";
-import { LinkProvider } from "@alepha/server-links";
+} from "alepha";
+import { DateTimeProvider } from "alepha/datetime";
+import { $logger } from "alepha/logger";
+import { LinkProvider } from "alepha/server/links";
 import { ReactBrowserRouterProvider } from "./ReactBrowserRouterProvider.ts";
 import type {
   PreviousLayerData,
@@ -25,7 +25,7 @@ const envSchema = t.object({
   REACT_ROOT_ID: t.text({ default: "root" }),
 });
 
-declare module "@alepha/core" {
+declare module "alepha" {
   interface Env extends Partial<Static<typeof envSchema>> {}
 }
 
@@ -46,7 +46,7 @@ export type ReactBrowserRendererOptions = Static<
   typeof reactBrowserOptions.schema
 >;
 
-declare module "@alepha/core" {
+declare module "alepha" {
   interface State {
     [reactBrowserOptions.key]: ReactBrowserRendererOptions;
   }

package/src/{providers → core/providers}/ReactBrowserRendererProvider.ts

@@ -1,5 +1,5 @@
-import { $hook } from "@alepha/core";
-import { $logger } from "@alepha/logger";
+import { $hook } from "alepha";
+import { $logger } from "alepha/logger";
 import { createRoot, hydrateRoot, type Root } from "react-dom/client";
 
 export class ReactBrowserRendererProvider {

package/src/{providers → core/providers}/ReactBrowserRouterProvider.ts

@@ -1,6 +1,6 @@
-import { $hook, $inject, Alepha } from "@alepha/core";
-import { $logger } from "@alepha/logger";
-import { type Route, RouterProvider } from "@alepha/router";
+import { $hook, $inject, Alepha } from "alepha";
+import { $logger } from "alepha/logger";
+import { type Route, RouterProvider } from "alepha/router";
 import { createElement, type ReactNode } from "react";
 import NotFoundPage from "../components/NotFound.tsx";
 import {

package/src/{providers → core/providers}/ReactPageProvider.ts

@@ -7,8 +7,8 @@ import {
   type Static,
   type TSchema,
   t,
-} from "@alepha/core";
-import { $logger } from "@alepha/logger";
+} from "alepha";
+import { $logger } from "alepha/logger";
 import { createElement, type ReactNode, StrictMode } from "react";
 import ClientOnly from "../components/ClientOnly.tsx";
 import ErrorViewer from "../components/ErrorViewer.tsx";
@@ -28,7 +28,7 @@ const envSchema = t.object({
   REACT_STRICT_MODE: t.boolean({ default: true }),
 });
 
-declare module "@alepha/core" {
+declare module "alepha" {
   export interface Env extends Partial<Static<typeof envSchema>> {}
 }
 

package/src/{providers → core/providers}/ReactServerProvider.ts

@@ -10,16 +10,16 @@ import {
   AlephaError,
   type Static,
   t,
-} from "@alepha/core";
-import { $logger } from "@alepha/logger";
+} from "alepha";
+import { $logger } from "alepha/logger";
 import {
   type ServerHandler,
   ServerProvider,
   ServerRouterProvider,
   ServerTimingProvider,
-} from "@alepha/server";
-import { ServerLinksProvider } from "@alepha/server-links";
-import { ServerStaticProvider } from "@alepha/server-static";
+} from "alepha/server";
+import { ServerLinksProvider } from "alepha/server/links";
+import { ServerStaticProvider } from "alepha/server/static";
 import { renderToString } from "react-dom/server";
 import {
   $page,
@@ -46,7 +46,7 @@ const envSchema = t.object({
   ),
 });
 
-declare module "@alepha/core" {
+declare module "alepha" {
   interface Env extends Partial<Static<typeof envSchema>> {}
   interface State {
     "alepha.react.server.ssr"?: boolean;
@@ -80,7 +80,7 @@ export type ReactServerProviderOptions = Static<
   typeof reactServerOptions.schema
 >;
 
-declare module "@alepha/core" {
+declare module "alepha" {
   interface State {
     [reactServerOptions.key]: ReactServerProviderOptions;
   }

package/src/{services → core/services}/ReactPageServerService.ts

@@ -1,5 +1,5 @@
-import { $inject, AlephaError } from "@alepha/core";
-import { ServerProvider } from "@alepha/server";
+import { $inject, AlephaError } from "alepha";
+import { ServerProvider } from "alepha/server";
 import type {
   PageDescriptorRenderOptions,
   PageDescriptorRenderResult,

package/src/{services → core/services}/ReactPageService.ts

@@ -1,4 +1,4 @@
-import { AlephaError } from "@alepha/core";
+import { AlephaError } from "alepha";
 import type {
   PageDescriptorRenderOptions,
   PageDescriptorRenderResult,

package/src/{services → core/services}/ReactRouter.ts

@@ -1,4 +1,4 @@
-import { $inject, Alepha } from "@alepha/core";
+import { $inject, Alepha } from "alepha";
 import type { PageDescriptor } from "../descriptors/$page.ts";
 import {
   ReactBrowserProvider,

package/src/form/components/FormState.tsx

@@ -0,0 +1,17 @@
+import type { TObject } from "alepha";
+import type { ReactNode } from "react";
+import { useFormState } from "../hooks/useFormState.ts";
+import type { FormModel } from "../services/FormModel.ts";
+
+const FormState = <T extends TObject>(props: {
+  form: FormModel<T>;
+  children: (state: { loading: boolean; dirty: boolean }) => ReactNode;
+}) => {
+  const formState = useFormState(props.form);
+  return props.children({
+    loading: formState.loading,
+    dirty: formState.dirty,
+  });
+};
+
+export default FormState;

package/src/form/hooks/useForm.ts

@@ -0,0 +1,47 @@
+import { useAlepha } from "@alepha/react";
+import type { TObject } from "alepha";
+import { useId, useMemo } from "react";
+import { FormCtrlOptions, FormModel } from "../services/FormModel.ts";
+
+/**
+ * Custom hook to create a form with validation and field management.
+ * This hook uses TypeBox schemas to define the structure and validation rules for the form.
+ * It provides a way to handle form submission, field creation, and value management.
+ *
+ * @example
+ * ```tsx
+ * import { t } from "alepha";
+ *
+ * const form = useForm({
+ *   schema: t.object({
+ *     username: t.text(),
+ *     password: t.text(),
+ *   }),
+ *   handler: (values) => {
+ *     console.log("Form submitted with values:", values);
+ *   },
+ * });
+ *
+ * return (
+ *   <form {...form.props}>
+ *     <input {...form.input.username.props} />
+ *     <input {...form.input.password.props} />
+ *     <button type="submit">Submit</button>
+ *   </form>
+ * );
+ * ```
+ */
+export const useForm = <T extends TObject>(
+  options: FormCtrlOptions<T>,
+  deps: any[] = [],
+): FormModel<T> => {
+  const alepha = useAlepha();
+  const formId = useId();
+
+  return useMemo(() => {
+    return alepha.inject(FormModel<T>, {
+      lifetime: "transient",
+      args: [options.id || formId, options],
+    });
+  }, deps);
+};

package/src/form/hooks/useFormState.ts

@@ -0,0 +1,130 @@
+import { useAlepha } from "@alepha/react";
+import type { FormModel } from "../services/FormModel.ts";
+import { type TObject, TypeBoxError } from "alepha";
+import { useEffect, useState } from "react";
+
+export interface UseFormStateReturn {
+  loading: boolean;
+  dirty: boolean;
+  values?: Record<string, any>;
+  error?: Error;
+}
+
+export const useFormState = <
+  T extends TObject,
+  Keys extends keyof UseFormStateReturn,
+>(
+  target: FormModel<T> | { form: FormModel<T>; path: string },
+  _events: Keys[] = ["loading", "dirty", "error"] as Keys[],
+): Pick<UseFormStateReturn, Keys> => {
+  const alepha = useAlepha();
+  const events = _events as string[];
+
+  const [dirty, setDirty] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [values, setValues] = useState<Record<string, any> | undefined>(
+    undefined,
+  );
+
+  const form = "form" in target ? target.form : target;
+  const path = "path" in target ? target.path : undefined;
+
+  const hasValues = events.includes("values");
+  const hasErrors = events.includes("error");
+  const hasDirty = events.includes("dirty");
+  const hasLoading = events.includes("loading");
+
+  useEffect(() => {
+    const listeners: Function[] = [];
+
+    if (hasErrors || hasValues || hasDirty) {
+      listeners.push(
+        alepha.events.on("form:change", (event) => {
+          if (event.id === form.id) {
+            if (!path || event.path === path) {
+              if (hasDirty) {
+                setDirty(true);
+              }
+              if (hasErrors) {
+                setError(undefined);
+              }
+            }
+            if (hasValues) {
+              setValues(form.currentValues);
+            }
+          }
+        }),
+      );
+    }
+
+    if (hasValues) {
+      listeners.push(
+        alepha.events.on("form:reset", (event) => {
+          if (event.id === form.id) {
+            setValues(event.values);
+          }
+        }),
+      );
+    }
+
+    if (hasLoading) {
+      listeners.push(
+        alepha.events.on("form:submit:begin", (event) => {
+          if (event.id === form.id) {
+            setLoading(true);
+          }
+        }),
+        alepha.events.on("form:submit:end", (event) => {
+          if (event.id === form.id) {
+            setLoading(false);
+          }
+        }),
+      );
+    }
+
+    if (hasValues || hasDirty) {
+      listeners.push(
+        alepha.events.on("form:submit:success", (event) => {
+          if (event.id === form.id) {
+            if (hasValues) {
+              setValues(event.values);
+            }
+            if (hasDirty) {
+              setDirty(false);
+            }
+          }
+        }),
+      );
+    }
+
+    if (hasErrors) {
+      listeners.push(
+        alepha.events.on("form:submit:error", (event) => {
+          if (event.id === form.id) {
+            if (
+              !path ||
+              (event.error instanceof TypeBoxError &&
+                event.error.value.path === path)
+            ) {
+              setError(event.error);
+            }
+          }
+        }),
+      );
+    }
+
+    return () => {
+      for (const unsub of listeners) {
+        unsub();
+      }
+    };
+  }, []);
+
+  return {
+    dirty,
+    loading,
+    error,
+    values,
+  } as Pick<UseFormStateReturn, Keys>;
+};