@resistdesign/voltra 3.0.0-alpha.4 → 3.0.0-alpha.41

package/app/index.d.ts

@@ -1,5 +1,102 @@
-export { a as Utils } from '../index-IokxSNxm.js';
-import 'react';
-import 'react/jsx-runtime';
-import '../Types-C7XjUjoF.js';
-import '../SearchTypes-DjN6YQzE.js';
+/**
+ * @packageDocumentation
+ *
+ * Build front-end applications with React and TypeScript utilities, including
+ * layout/state helpers and form generation support.
+ *
+ * Import from the app subpath only:
+ * ```ts
+ * import {
+ *   createFormRenderer,
+ *   useApplicationStateLoader,
+ *   useApplicationStateValueStructure,
+ *   type RemoteProcedureCall,
+ * } from "@resistdesign/voltra/app";
+ * ```
+ *
+ * @see {@link useApplicationStateValueStructure} and
+ * {@link useApplicationStateLoader} for good starting points.
+ *
+ * Reference examples:
+ * - `examples/README.md`
+ * - `examples/routing/app-routing.ts`
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   useApplicationStateLoader,
+ *   useApplicationStateValueStructure,
+ *   type RemoteProcedureCall,
+ * } from "@resistdesign/voltra/app";
+ * import { useCallback } from "react";
+ *
+ * const APP_STATE_IDENTIFIERS = {
+ *   LOGIN: {
+ *     USERNAME: {},
+ *     PASSWORD: {},
+ *     LOGGED_IN: {},
+ *   },
+ * };
+ *
+ * const LOGIN_SERVICE_CONFIG = {
+ *   protocol: "https",
+ *   domain: "example.com",
+ *   basePath: "/api",
+ * };
+ *
+ * const LOGIN_RPC: RemoteProcedureCall = {
+ *   serviceConfig: LOGIN_SERVICE_CONFIG,
+ *   path: "/login",
+ *   args: [],
+ * };
+ *
+ * export const LoginController = () => {
+ *   const {
+ *     valueStructure: {
+ *       username: username = "",
+ *       password: password = "",
+ *       loggedIn: loggedIn = false,
+ *     },
+ *     onChangeStructure: {
+ *       username: setUsername,
+ *       password: setPassword,
+ *       loggedIn: setLoggedIn,
+ *     },
+ *   } = useApplicationStateValueStructure<{
+ *     username: string;
+ *     password: string;
+ *     loggedIn: boolean;
+ *   }>({
+ *     username: APP_STATE_IDENTIFIERS.LOGIN.USERNAME,
+ *     password: APP_STATE_IDENTIFIERS.LOGIN.PASSWORD,
+ *     loggedIn: APP_STATE_IDENTIFIERS.LOGIN.LOGGED_IN,
+ *   });
+ *
+ *   const { loading: loadingLogin, makeRemoteProcedureCall } =
+ *     useApplicationStateLoader({
+ *       identifier: APP_STATE_IDENTIFIERS.LOGIN.LOGGED_IN,
+ *       remoteProcedureCall: LOGIN_RPC,
+ *       manual: true,
+ *     });
+ *
+ *   const onSubmit = useCallback(() => {
+ *     makeRemoteProcedureCall(username, password);
+ *   }, [username, password, makeRemoteProcedureCall]);
+ *
+ *   return { username, password, loggedIn, setUsername, setPassword, onSubmit, loadingLogin };
+ * };
+ * ```
+ *
+ * See also: `@resistdesign/voltra/web` and `@resistdesign/voltra/native` for
+ * runtime-specific UI helpers.
+ */
+/**
+ * @category app
+ * @group State and Services
+ */
+export * from "./utils";
+/**
+ * @category app
+ * @group Forms
+ */
+export * from "./forms";

package/app/index.js

@@ -1,45 +1,13 @@
+export { createEasyLayout, getEasyLayoutTemplateDetails, getPascalCaseAreaName } from '../chunk-2MOLWZMQ.js';
+export { computeTrackPixels } from '../chunk-TJFTWPXQ.js';
+export { AutoForm, AutoFormView, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, createAutoField, createBrowserRouteAdapter, createFormRenderer, createHistoryBackHandler, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, defaultTranslateValidationErrorCode, getFieldKind, parseHistoryPath, parseTemplate, resolveSuite, useFormEngine, useRouteContext, validateAreas, wrapRouteAdapterWithPathResolver } from '../chunk-DT6WWJUI.js';
+import '../chunk-7AMEFPPP.js';
+import '../chunk-YCTVEW2I.js';
+import { mergeStringPaths, PATH_DELIMITER } from '../chunk-WNFRDIBW.js';
+import '../chunk-I2KLQ2HA.js';
 import { createContext, useContext, useRef, useMemo, useCallback, useState, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
 
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/app/utils/index.ts
-var utils_exports = {};
-__export(utils_exports, {
-  ApplicationStateContext: () => ApplicationStateContext,
-  ApplicationStateProvider: () => ApplicationStateProvider,
-  Route: () => Route,
-  RouteContext: () => RouteContext,
-  RouteContextConsumer: () => RouteContextConsumer,
-  RouteContextProvider: () => RouteContextProvider,
-  TypeInfoORMClient: () => TypeInfoORMClient,
-  getApplicationStateIdentifier: () => getApplicationStateIdentifier,
-  getApplicationStateModified: () => getApplicationStateModified,
-  getApplicationStateValue: () => getApplicationStateValue,
-  getApplicationStateValueStructure: () => getApplicationStateValueStructure,
-  getChangedDependencyIndexes: () => getChangedDependencyIndexes,
-  getEasyLayout: () => getEasyLayout,
-  getEasyLayoutTemplateDetails: () => getEasyLayoutTemplateDetails,
-  getFullUrl: () => getFullUrl,
-  getPascalCaseAreaName: () => getPascalCaseAreaName,
-  handleRequest: () => handleRequest,
-  requestHandlerFactory: () => requestHandlerFactory,
-  sendServiceRequest: () => sendServiceRequest,
-  setApplicationStateModified: () => setApplicationStateModified,
-  setApplicationStateValue: () => setApplicationStateValue,
-  useApplicationStateLoader: () => useApplicationStateLoader,
-  useApplicationStateValue: () => useApplicationStateValue,
-  useApplicationStateValueStructure: () => useApplicationStateValueStructure,
-  useController: () => useController,
-  useDebugDependencies: () => useDebugDependencies,
-  useRouteContext: () => useRouteContext,
-  useTypeInfoORMAPI: () => useTypeInfoORMAPI
-});
 var getApplicationStateIdentifier = (subStateIdMap) => subStateIdMap ? subStateIdMap : {};
 var getApplicationStateModified = (identifier, modificationState) => !!modificationState.get(identifier);
 var getApplicationStateValue = (identifier, applicationState) => applicationState.get(identifier);
@@ -70,6 +38,8 @@ var useApplicationStateValue = (identifier) => {
   } = useContext(ApplicationStateContext);
   const appStateRef = useRef(applicationState);
   appStateRef.current = applicationState;
+  const modificationStateRef = useRef(modificationState);
+  modificationStateRef.current = modificationState;
   const modified = useMemo(
     () => getApplicationStateModified(identifier, modificationState),
     [identifier, modificationState]
@@ -81,7 +51,11 @@ var useApplicationStateValue = (identifier) => {
   const setModified = useCallback(
     (isModified) => {
       setModificationState(
-        setApplicationStateModified(identifier, isModified, modificationState)
+        setApplicationStateModified(
+          identifier,
+          isModified,
+          modificationStateRef.current
+        )
       );
     },
     [identifier, setModificationState]
@@ -160,102 +134,31 @@ var ApplicationStateProvider = ({
   return /* @__PURE__ */ jsx(Provider, { value: controller, children });
 };
 
-// src/common/Routing.ts
-var PATH_DELIMITER = "/";
-var getPotentialJSONValue = (value) => {
-  try {
-    return JSON.parse(value);
-  } catch (error) {
-    return value;
-  }
-};
-var getPathArray = (path, delimiter = PATH_DELIMITER, filterEmptyOutput = false, filterEmptyInput = true, useJson = true, uriDecodeParts = true) => path.split(delimiter).filter(filterEmptyInput ? (p) => p !== "" : () => true).map(uriDecodeParts ? decodeURIComponent : (x) => x).map(useJson ? getPotentialJSONValue : (p) => p).filter(filterEmptyOutput ? (p) => p ?? false : () => true);
-var getPathString = (parts = [], delimiter = PATH_DELIMITER, filterEmptyInput = false, useJson = true, uriEncodeParts = false) => parts.filter(filterEmptyInput ? (p) => p ?? false : () => true).map(useJson ? (p) => JSON.stringify(p) : (x) => x).map(uriEncodeParts ? encodeURIComponent : (x) => x).join(delimiter);
-var mergeStringPaths = (path1, path2, delimiter = PATH_DELIMITER, filterEmptyOutput = false, filterEmptyInput = true, useJson = true, uriEncodeParts = false) => getPathString(
-  [
-    ...getPathArray(
-      path1,
-      delimiter,
-      filterEmptyOutput,
-      filterEmptyInput,
-      useJson,
-      uriEncodeParts
-    ),
-    ...getPathArray(
-      path2,
-      delimiter,
-      filterEmptyOutput,
-      filterEmptyInput,
-      useJson,
-      uriEncodeParts
-    )
-  ],
-  delimiter,
-  filterEmptyInput,
-  useJson,
-  uriEncodeParts
-);
-var resolvePath = (currentPath, newPath) => {
-  const newSegments = getPathArray(newPath, PATH_DELIMITER, true);
-  let currentSegments = getPathArray(currentPath, PATH_DELIMITER, true);
-  if (newPath.startsWith("/")) {
-    currentSegments = [];
-  }
-  newSegments.forEach((segment) => {
-    if (segment === "..") {
-      if (currentSegments.length > 0) {
-        currentSegments.pop();
-      }
-    } else if (segment !== ".") {
-      currentSegments.push(segment);
-    }
-  });
-  return "/" + currentSegments.join("/");
-};
-var getParamsAndTestPath = (path, testPath, exact = false) => {
-  const pathList = getPathArray(path);
-  const testPathList = getPathArray(testPath);
-  if (exact && pathList.length !== testPathList.length) {
-    return false;
-  } else {
-    let params = {};
-    if (pathList.length >= testPathList.length) {
-      for (let i = 0; i < testPathList.length; i++) {
-        const testPathPart = testPathList[i];
-        const pathPart = pathList[i];
-        if (testPathPart.startsWith(":")) {
-          const paramName = testPathPart.slice(1);
-          params[paramName] = pathPart;
-        } else if (pathPart !== testPathPart) {
-          return false;
-        }
-      }
-    } else {
-      return false;
-    }
-    return params;
-  }
-};
-
 // src/app/utils/Service.ts
 var getFullUrl = (protocol, domain, basePath = "", path = "", port) => {
+  const normalizedProtocol = protocol.endsWith(":") ? protocol.slice(0, -1) : protocol;
+  const normalizedDomain = domain.replace(/\/+$/, "");
   const portString = !!port ? `:${port}` : "";
   const fullPath = mergeStringPaths(
     basePath,
     path,
     PATH_DELIMITER,
     false,
-    false,
+    true,
     false
   );
-  return `${protocol}://${domain}${portString}${fullPath}`;
+  const normalizedPath = fullPath ? fullPath.startsWith(PATH_DELIMITER) ? fullPath : `${PATH_DELIMITER}${fullPath}` : PATH_DELIMITER;
+  return `${normalizedProtocol}://${normalizedDomain}${portString}${normalizedPath}`;
 };
 var sendServiceRequest = async (config, path = "", args = []) => {
   const { protocol, domain, port, basePath = "", authorization = "" } = config;
   const fullUrl = getFullUrl(protocol, domain, basePath, path, port);
-  const requestHeaders = !!authorization ? {
-    Authorization: `Bearer ${authorization}`
-  } : void 0;
+  const requestHeaders = {
+    "Content-Type": "application/json",
+    ...!!authorization ? {
+      Authorization: `Bearer ${authorization}`
+    } : {}
+  };
   const response = await fetch(fullUrl, {
     headers: requestHeaders,
     credentials: "same-origin",
@@ -263,11 +166,24 @@ var sendServiceRequest = async (config, path = "", args = []) => {
     body: JSON.stringify(args)
   });
   const { ok: responseIsOk } = response;
-  const data = await response.json();
-  if (responseIsOk) {
-    return data;
+  const textData = await response.text();
+  let data = textData;
+  try {
+    data = JSON.parse(textData);
+  } catch (error) {
+  }
+  if (typeof data === "object") {
+    if (responseIsOk) {
+      return data;
+    } else {
+      throw data;
+    }
   } else {
-    throw data;
+    if (responseIsOk) {
+      return { data };
+    } else {
+      throw { message: data };
+    }
   }
 };
 var useApplicationStateLoader = (config) => {
@@ -335,7 +251,7 @@ var useApplicationStateLoader = (config) => {
 var getKeyValueWithoutError = (obj, key) => {
   try {
     return obj[key];
-  } catch (e) {
+  } catch (_error) {
     return void 0;
   }
 };
@@ -346,7 +262,8 @@ var useController = (parentValue, key, onParentValueChange, isArrayIndex = false
       try {
         setValue(value2);
         if (isArrayIndex) {
-          const newArray = [...parentValue];
+          const baseArray = Array.isArray(parentValue) ? parentValue : [];
+          const newArray = [...baseArray];
           newArray[key] = value2;
           onParentValueChange(newArray);
         } else {
@@ -355,7 +272,7 @@ var useController = (parentValue, key, onParentValueChange, isArrayIndex = false
             [key]: value2
           });
         }
-      } catch (e) {
+      } catch (_error) {
       }
     },
     [parentValue, key, onParentValueChange, isArrayIndex]
@@ -363,7 +280,7 @@ var useController = (parentValue, key, onParentValueChange, isArrayIndex = false
   useEffect(() => {
     try {
       setValue(getKeyValueWithoutError(parentValue, key));
-    } catch (e) {
+    } catch (_error) {
       setValue(void 0);
     }
   }, [parentValue, key]);
@@ -388,202 +305,33 @@ var useDebugDependencies = (dependencies) => {
     prevDeps.current = dependencies;
   }, dependencies);
 };
-var getPascalCaseAreaName = (area) => {
-  return area.split("-").map((a) => a[0].toUpperCase() + a.slice(1)).join("");
+
+// src/common/IdGeneration/getSimpleId.ts
+var LAST_HAST_ID = 0;
+var textEncoder = new TextEncoder();
+var bytesToBinaryString = (bytes) => {
+  let out = "";
+  for (let i = 0; i < bytes.length; i++) {
+    out += String.fromCharCode(bytes[i]);
+  }
+  return out;
 };
-var convertLayoutToCSS = (layout = "") => {
-  const lines = layout.split("\n");
-  let areaRows = [];
-  let rows = [];
-  let css = "";
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i].trim();
-    if (line.indexOf("\\") === 0) {
-      css += `
-grid-template-columns: ${line.split("\\").join("").trim()};`;
+var getBase64EncodedString = (input) => {
+  const bytes = textEncoder.encode(input);
+  let base64 = "";
+  if (typeof globalThis.btoa === "function") {
+    const binary = bytesToBinaryString(bytes);
+    base64 = globalThis.btoa(binary);
+  } else {
+    const anyGlobal = globalThis;
+    if (typeof anyGlobal.Buffer === "function") {
+      base64 = anyGlobal.Buffer.from(bytes).toString("base64");
     } else {
-      const parts = line.split(",").map((p) => p && p.trim());
-      if (parts[0]) {
-        areaRows = [...areaRows, parts[0]];
-        if (parts[1]) {
-          rows = [...rows, parts[1]];
-        }
-      }
+      throw new Error("No base64 encoder available (need btoa or Buffer).");
     }
   }
-  css += `
-grid-template-areas:
-${areaRows.filter((a) => !!(a && a.trim())).map((a) => `  "${a}"`).join("\n")};`;
-  if (rows.length) {
-    css += `
-grid-template-rows: ${rows.filter((r) => !!(r && r.trim())).join(" ")};`;
-  }
-  const areasList = Object.keys(
-    areaRows.reduce(
-      (acc, a) => [
-        ...acc,
-        ...a.split(" ").map((a2) => a2 && a2.trim()).filter((a2) => !!a2)
-      ],
-      []
-    ).reduce((acc, a) => ({ ...acc, [a]: true }), {})
-  );
-  return {
-    areasList,
-    css
-  };
+  return base64;
 };
-var getEasyLayoutTemplateDetails = (layout = "") => convertLayoutToCSS(layout);
-var getEasyLayout = (extendFrom, areasExtendFrom) => {
-  return (layoutTemplate, ...expressions) => {
-    const mergedTemplate = layoutTemplate.reduce((acc, l, ind) => {
-      const expr = expressions[ind - 1];
-      const exprStr = typeof expr === "undefined" ? "" : expr;
-      return `${acc}${l}${exprStr}`;
-    }, "");
-    const { areasList, css } = convertLayoutToCSS(mergedTemplate);
-    const baseLayoutComp = extendFrom ? styled(extendFrom) : styled.div;
-    const layout = baseLayoutComp`
-    display: grid;
-    ${css}
-  `;
-    const areas = areasList.reduce((acc, area) => {
-      const pascalCaseAreaName = getPascalCaseAreaName(area);
-      const baseCompFunc = areasExtendFrom ? styled(areasExtendFrom) : styled.div;
-      const component = baseCompFunc`
-      grid-area: ${area};
-    `;
-      return {
-        ...acc,
-        [pascalCaseAreaName]: component
-      };
-    }, {});
-    return {
-      layout,
-      areas
-    };
-  };
-};
-(function(history2) {
-  const pushState = history2.pushState;
-  history2.pushState = function(state, ...remainingArguments) {
-    if (typeof history2.onpushstate == "function") {
-      history2.onpushstate({ state });
-    }
-    const result = pushState.apply(history2, [state, ...remainingArguments]);
-    window.dispatchEvent(new CustomEvent("statechanged", { detail: state }));
-    return result;
-  };
-})(window.history);
-var CURRENT_PATH = window.location.pathname;
-var RouteContext = createContext({
-  currentWindowPath: CURRENT_PATH,
-  parentPath: "",
-  params: {},
-  isTopLevel: true
-});
-var {
-  /**
-   * @ignore
-   * */
-  Provider: RouteContextProvider,
-  /**
-   * @ignore
-   * */
-  Consumer: RouteContextConsumer
-} = RouteContext;
-var useRouteContext = () => useContext(RouteContext);
-var Route = ({
-  /**
-   * Use `:` as the first character to denote a parameter in the path.
-   * */
-  path = "",
-  onParamsChange,
-  exact = false,
-  children
-}) => {
-  const [currentPath = "", setCurrentPath] = useState(CURRENT_PATH);
-  const {
-    currentWindowPath = "",
-    parentPath = "",
-    params: parentParams = {},
-    isTopLevel
-  } = useRouteContext();
-  const targetCurrentPath = useMemo(
-    () => isTopLevel ? currentPath : currentWindowPath,
-    [isTopLevel, currentPath, currentWindowPath]
-  );
-  const fullPath = useMemo(
-    () => mergeStringPaths(parentPath, path),
-    [parentPath, path]
-  );
-  const newParams = useMemo(
-    () => getParamsAndTestPath(targetCurrentPath, fullPath, exact),
-    [targetCurrentPath, fullPath, exact]
-  );
-  const params = useMemo(
-    () => ({
-      ...parentParams,
-      ...newParams ? newParams : {}
-    }),
-    [parentParams, newParams]
-  );
-  const newRouteContext = useMemo(
-    () => ({
-      currentWindowPath: targetCurrentPath,
-      parentPath: fullPath,
-      params,
-      isTopLevel: false
-    }),
-    [targetCurrentPath, fullPath, params]
-  );
-  useEffect(() => {
-    if (onParamsChange) {
-      onParamsChange(params);
-    }
-  }, [params, onParamsChange]);
-  useEffect(() => {
-    if (isTopLevel) {
-      const handleAnchorClick = (event) => {
-        let target = event.target;
-        while (target && target.nodeName !== "A") {
-          target = target.parentNode;
-        }
-        if (target && target.nodeName === "A") {
-          const aTarget = target;
-          const href = aTarget.getAttribute("href");
-          const title = aTarget.getAttribute("title") ?? "";
-          try {
-            new URL(href ? href : "");
-          } catch (error) {
-            const newPath = resolvePath(
-              window.location.pathname,
-              href ? href : ""
-            );
-            event.preventDefault();
-            history.pushState({}, title, newPath);
-            setCurrentPath(newPath);
-          }
-        }
-      };
-      const handlePopOrReplaceState = () => {
-        setCurrentPath(window.location.pathname);
-      };
-      window.document.addEventListener("click", handleAnchorClick);
-      window.addEventListener("popstate", handlePopOrReplaceState);
-      window.addEventListener("statechanged", handlePopOrReplaceState);
-      return () => {
-        window.document.removeEventListener("click", handleAnchorClick);
-        window.removeEventListener("popstate", handlePopOrReplaceState);
-        window.removeEventListener("statechanged", handlePopOrReplaceState);
-      };
-    }
-  }, [isTopLevel]);
-  return newParams ? /* @__PURE__ */ jsx(RouteContextProvider, { value: newRouteContext, children }) : null;
-};
-
-// src/common/IdGeneration/getSimpleId.ts
-var LAST_HAST_ID = 0;
-var getBase64EncodedString = (input) => Buffer.from(input).toString("base64");
 var getSimpleId = () => {
   const hashId = LAST_HAST_ID++;
   const base64Datetime = getBase64EncodedString(
@@ -653,8 +401,7 @@ var useTypeInfoORMAPI = (typeInfoORMAPI) => {
   );
   const api = useMemo(() => {
     const apiBase = {};
-    for (const aM in typeInfoORMAPI) {
-      const methodName = aM;
+    for (const methodName of Object.keys(typeInfoORMAPI)) {
       apiBase[methodName] = requestHandlerFactory(
         typeInfoORMAPI,
         methodName,
@@ -687,7 +434,11 @@ var TypeInfoORMClient = class {
    * @returns Parsed response payload.
    */
   makeRequest = async (path, args) => {
-    const result = await sendServiceRequest(this.config, path, args);
+    const cleanedArgs = [...args];
+    while (cleanedArgs.length > 0 && typeof cleanedArgs[cleanedArgs.length - 1] === "undefined") {
+      cleanedArgs.pop();
+    }
+    const result = await sendServiceRequest(this.config, path, cleanedArgs);
     return result;
   };
   /**
@@ -710,10 +461,11 @@ var TypeInfoORMClient = class {
    * @param primaryFieldValue - Primary field value to lookup.
    * @returns The retrieved item, if found.
    */
-  read = async (typeName, primaryFieldValue) => {
+  read = async (typeName, primaryFieldValue, selectedFields) => {
     return await this.makeRequest("read" /* READ */, [
       typeName,
-      primaryFieldValue
+      primaryFieldValue,
+      selectedFields
     ]);
   };
   /**
@@ -807,4 +559,23 @@ var TypeInfoORMClient = class {
   };
 };
 
-export { utils_exports as Utils };
+// src/app/forms/core/mergeSuites.ts
+var mergeSuites = (base, overrides) => {
+  return {
+    renderers: {
+      ...base.renderers ?? {},
+      ...overrides.renderers ?? {}
+    },
+    primitives: {
+      ...base.primitives ?? {},
+      ...overrides.primitives ?? {}
+    }
+  };
+};
+var withRendererOverride = (kind, renderer) => ({
+  renderers: {
+    [kind]: renderer
+  }
+});
+
+export { ApplicationStateContext, ApplicationStateProvider, TypeInfoORMClient, getApplicationStateIdentifier, getApplicationStateModified, getApplicationStateValue, getApplicationStateValueStructure, getChangedDependencyIndexes, getFullUrl, handleRequest, mergeSuites, requestHandlerFactory, sendServiceRequest, setApplicationStateModified, setApplicationStateValue, useApplicationStateLoader, useApplicationStateValue, useApplicationStateValueStructure, useController, useDebugDependencies, useTypeInfoORMAPI, withRendererOverride };