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

package/web/index.js

@@ -0,0 +1,668 @@
+import { createEasyLayout } from '../chunk-2MOLWZMQ.js';
+import { createFormRenderer, AutoFormView, AutoForm, createBrowserRouteAdapter, Route } from '../chunk-DT6WWJUI.js';
+import { ERROR_MESSAGE_CONSTANTS } from '../chunk-YCTVEW2I.js';
+import '../chunk-WNFRDIBW.js';
+import { __export, __reExport } from '../chunk-I2KLQ2HA.js';
+import { createElement, useCallback, useRef } from 'react';
+import * as styledBase from 'styled-components';
+import styledBase__default from 'styled-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/app/helpers/styled.ts
+var styled_exports = {};
+__export(styled_exports, {
+  default: () => styled_default
+});
+__reExport(styled_exports, styledBase);
+var styled = typeof styledBase__default.default === "function" ? styledBase__default.default : styledBase__default;
+var styled_default = styled;
+
+// src/web/forms/primitives/index.ts
+var FieldWrapper = styled_default("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.25em;
+`;
+var ErrorMessage = styled_default("span")`
+  color: #AA0000;
+`;
+var ArrayContainer = styled_default("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.5em;
+`;
+var ArrayItemWrapper = styled_default("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.5em;
+`;
+var createArrayItemField = (field) => ({
+  ...field,
+  array: false,
+  tags: {
+    ...field.tags,
+    label: void 0
+  }
+});
+var toOptionValue = (val) => {
+  if (val === null || val === void 0) return void 0;
+  if (typeof val === "boolean") return void 0;
+  return String(val);
+};
+var parseNumberValue = (raw) => raw === "" ? null : Number(raw);
+var getSelectableValues = (possibleValues) => {
+  return possibleValues?.filter(
+    (v) => typeof v === "string" || typeof v === "number"
+  );
+};
+var formatCustomValue = (val) => {
+  if (val === null || val === void 0) return "None";
+  if (typeof val === "string" || typeof val === "number") return String(val);
+  return JSON.stringify(val, null, 2);
+};
+var renderErrorMessage = (context) => {
+  const { error, errors = [], translateValidationErrorCode } = context;
+  const descriptors = (errors.length ? errors : error ? [error] : []).filter(
+    (descriptor) => descriptor.code !== ERROR_MESSAGE_CONSTANTS.NONE
+  );
+  if (!descriptors.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: descriptors.map((descriptor, index) => {
+    const message = translateValidationErrorCode(descriptor);
+    if (!message) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(ErrorMessage, { children: message }, `${descriptor.code}-${index}`);
+  }) });
+};
+var RelationSingleField = (context) => {
+  const { field, fieldKey, label, required, disabled, onRelationAction } = context;
+  const id = `field-${fieldKey}`;
+  const handleManageRelation = useCallback(() => {
+    onRelationAction?.({
+      action: "open",
+      fieldKey,
+      field,
+      value: void 0,
+      fullPaging: field.tags?.fullPaging,
+      onChange: context.onChange
+    });
+  }, [context.onChange, field, fieldKey, onRelationAction]);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    onRelationAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-signifier": "manage",
+        type: "button",
+        disabled,
+        onClick: handleManageRelation,
+        children: "Manage"
+      }
+    ) : void 0,
+    renderErrorMessage(context)
+  ] });
+};
+var RelationArrayField = (context) => {
+  const { field, fieldKey, label, required, disabled, onRelationAction } = context;
+  const id = `field-${fieldKey}`;
+  const handleManageRelation = useCallback(() => {
+    onRelationAction?.({
+      action: "open",
+      fieldKey,
+      field,
+      value: void 0,
+      fullPaging: field.tags?.fullPaging,
+      onChange: context.onChange
+    });
+  }, [context.onChange, field, fieldKey, onRelationAction]);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    onRelationAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-signifier": "manage-related",
+        type: "button",
+        disabled,
+        onClick: handleManageRelation,
+        children: "Manage"
+      }
+    ) : void 0,
+    renderErrorMessage(context)
+  ] });
+};
+var CustomSingleField = (context) => {
+  const { field, fieldKey, label, required, disabled } = context;
+  const id = `field-${fieldKey}`;
+  const customType = field.tags?.customType;
+  const onCustomTypeAction = context.onCustomTypeAction;
+  const handleManageCustomType = useCallback(() => {
+    if (!customType) {
+      return;
+    }
+    onCustomTypeAction?.({
+      action: "open",
+      fieldKey,
+      field,
+      customType,
+      value: context.value,
+      onChange: context.onChange
+    });
+  }, [context.onChange, context.value, customType, field, fieldKey, onCustomTypeAction]);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsx(RelationValue, { children: formatCustomValue(context.value) }),
+    customType && onCustomTypeAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-signifier": "manage",
+        type: "button",
+        disabled,
+        onClick: handleManageCustomType,
+        children: "Manage"
+      }
+    ) : void 0,
+    renderErrorMessage(context)
+  ] });
+};
+var CustomArrayField = (context) => {
+  const { field, fieldKey, label, required, disabled } = context;
+  const id = `field-${fieldKey}`;
+  const customType = field.tags?.customType;
+  const onCustomTypeAction = context.onCustomTypeAction;
+  const arrayValue = Array.isArray(context.value) ? context.value : [];
+  const handleEditItem = useCallback((event) => {
+    if (!customType) {
+      return;
+    }
+    const indexRaw = event.currentTarget.getAttribute("data-array-index");
+    if (!indexRaw) {
+      return;
+    }
+    const index = Number(indexRaw);
+    if (!Number.isFinite(index)) {
+      return;
+    }
+    onCustomTypeAction?.({
+      action: "edit",
+      fieldKey,
+      field,
+      customType,
+      value: context.value,
+      index,
+      onChange: context.onChange
+    });
+  }, [context.onChange, context.value, customType, field, fieldKey, onCustomTypeAction]);
+  const handleRemoveItem = useCallback((event) => {
+    if (!customType) {
+      return;
+    }
+    const indexRaw = event.currentTarget.getAttribute("data-array-index");
+    if (!indexRaw) {
+      return;
+    }
+    const index = Number(indexRaw);
+    if (!Number.isFinite(index)) {
+      return;
+    }
+    onCustomTypeAction?.({
+      action: "remove",
+      fieldKey,
+      field,
+      customType,
+      value: context.value,
+      index,
+      onChange: context.onChange
+    });
+  }, [context.onChange, context.value, customType, field, fieldKey, onCustomTypeAction]);
+  const handleAddItem = useCallback(() => {
+    if (!customType) {
+      return;
+    }
+    onCustomTypeAction?.({
+      action: "add",
+      fieldKey,
+      field,
+      customType,
+      value: context.value,
+      onChange: context.onChange
+    });
+  }, [context.onChange, context.value, customType, field, fieldKey, onCustomTypeAction]);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsxs(RelationList, { children: [
+      arrayValue.length === 0 && /* @__PURE__ */ jsx(RelationValue, { children: "No items yet." }),
+      arrayValue.map((item, index) => /* @__PURE__ */ jsxs(RelationItem, { children: [
+        /* @__PURE__ */ jsx(RelationValue, { children: formatCustomValue(item) }),
+        /* @__PURE__ */ jsxs(RelationActions, { children: [
+          customType && onCustomTypeAction ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-signifier": "manage",
+              "data-array-index": String(index),
+              type: "button",
+              disabled,
+              onClick: handleEditItem,
+              children: "Manage"
+            }
+          ) : void 0,
+          customType && onCustomTypeAction ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-array-index": String(index),
+              disabled,
+              onClick: handleRemoveItem,
+              children: "Remove"
+            }
+          ) : void 0
+        ] })
+      ] }, `${fieldKey}-${index}`))
+    ] }),
+    customType && onCustomTypeAction ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: handleAddItem,
+        children: "Add Item"
+      }
+    ) : void 0,
+    renderErrorMessage(context)
+  ] });
+};
+var ArrayField = (context) => {
+  const { field, fieldKey, label, required, disabled } = context;
+  const id = `field-${fieldKey}`;
+  const itemField = createArrayItemField(field);
+  const arrayValue = Array.isArray(context.value) ? [...context.value] : [];
+  const handleRemoveArrayItem = useCallback((event) => {
+    const indexRaw = event.currentTarget.getAttribute("data-array-index");
+    if (!indexRaw) {
+      return;
+    }
+    const index = Number(indexRaw);
+    if (!Number.isFinite(index)) {
+      return;
+    }
+    const newValue = [...arrayValue];
+    newValue.splice(index, 1);
+    context.onChange(newValue);
+  }, [arrayValue, context]);
+  const handleAddArrayItem = useCallback(() => {
+    const baseValue = Array.isArray(context.value) ? context.value : [];
+    const newValue = [...baseValue];
+    const newItem = field.type === "number" ? 0 : field.type === "boolean" ? false : "";
+    newValue.push(newItem);
+    context.onChange(newValue);
+  }, [context, field.type]);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsxs(ArrayContainer, { children: [
+      arrayValue.map((item, index) => /* @__PURE__ */ jsxs(ArrayItemWrapper, { children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: context.renderField({
+          field: itemField,
+          fieldKey: `${fieldKey}[${index}]`,
+          value: item,
+          onChange: (newItem) => {
+            const newValue = [...arrayValue];
+            newValue[index] = newItem;
+            context.onChange(newValue);
+          },
+          errors: context.arrayItemErrorMap?.[index] ?? [],
+          error: context.arrayItemErrorMap?.[index]?.find(
+            (descriptor) => descriptor.code !== ERROR_MESSAGE_CONSTANTS.NONE
+          ) ?? void 0,
+          translateValidationErrorCode: context.translateValidationErrorCode,
+          disabled
+        }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-array-index": String(index),
+            disabled,
+            onClick: handleRemoveArrayItem,
+            children: "Remove"
+          }
+        )
+      ] }, index)),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: handleAddArrayItem,
+          children: "Add Item"
+        }
+      )
+    ] }),
+    renderErrorMessage(context)
+  ] });
+};
+var StringField = (context) => {
+  const { fieldKey, label, required, disabled } = context;
+  const id = `field-${fieldKey}`;
+  const handleChange = useCallback((event) => {
+    context.onChange(event.target.value);
+  }, [context]);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: context.format || "text",
+        value: context.value || "",
+        onChange: handleChange,
+        disabled,
+        pattern: context.constraints?.pattern
+      }
+    ),
+    renderErrorMessage(context)
+  ] });
+};
+var NumberField = (context) => {
+  const { fieldKey, label, required, disabled } = context;
+  const id = `field-${fieldKey}`;
+  const handleChange = useCallback((event) => {
+    context.onChange(parseNumberValue(event.target.value));
+  }, [context]);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "number",
+        value: context.value ?? "",
+        onChange: handleChange,
+        disabled,
+        min: context.constraints?.min,
+        max: context.constraints?.max,
+        step: context.constraints?.step
+      }
+    ),
+    renderErrorMessage(context)
+  ] });
+};
+var BooleanField = (context) => {
+  const { fieldKey, label, disabled } = context;
+  const id = `field-${fieldKey}`;
+  const handleChange = useCallback((event) => {
+    context.onChange(event.target.checked);
+  }, [context]);
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          checked: !!context.value,
+          onChange: handleChange,
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+        " ",
+        label,
+        " "
+      ] })
+    ] }),
+    renderErrorMessage(context)
+  ] });
+};
+var EnumSelectField = (context) => {
+  const { field, fieldKey, label, required, disabled } = context;
+  const id = `field-${fieldKey}`;
+  const selectableValues = getSelectableValues(context.possibleValues);
+  const allowCustom = context.allowCustomSelection;
+  const handleCustomSelectionChange = useCallback(
+    (event) => {
+      context.onChange(
+        field.type === "number" ? parseNumberValue(event.target.value) : event.target.value
+      );
+    },
+    [context, field.type]
+  );
+  const handleSelectChange = useCallback(
+    (event) => {
+      context.onChange(
+        field.type === "number" ? parseNumberValue(event.target.value) : event.target.value
+      );
+    },
+    [context, field.type]
+  );
+  return /* @__PURE__ */ jsxs(FieldWrapper, { children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, children: [
+      label,
+      " ",
+      required && "*"
+    ] }),
+    (field.type === "string" || field.type === "number") && selectableValues && allowCustom && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "text",
+          list: `list-${id}`,
+          value: context.value ?? "",
+          onChange: handleCustomSelectionChange,
+          placeholder: "Select or type...",
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx("datalist", { id: `list-${id}`, children: selectableValues.map((val) => /* @__PURE__ */ jsx("option", { value: toOptionValue(val) }, String(val))) })
+    ] }),
+    (field.type === "string" || field.type === "number") && selectableValues && !allowCustom && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        value: context.value ?? "",
+        onChange: handleSelectChange,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+          selectableValues.map((val) => /* @__PURE__ */ jsx("option", { value: toOptionValue(val), children: String(val) }, String(val)))
+        ]
+      }
+    ),
+    renderErrorMessage(context)
+  ] });
+};
+var FormRoot = ({
+  children,
+  onSubmit
+}) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children });
+};
+var SuiteButton = ({
+  children,
+  disabled,
+  type,
+  onClick,
+  "data-signifier": dataSignifier
+}) => {
+  return createElement(
+    "button",
+    {
+      type: type ?? "button",
+      disabled,
+      onClick: type === "submit" ? void 0 : onClick,
+      "data-signifier": dataSignifier
+    },
+    children
+  );
+};
+var webSuite = {
+  renderers: {
+    string: StringField,
+    number: NumberField,
+    boolean: BooleanField,
+    enum_select: EnumSelectField,
+    array: ArrayField,
+    relation_single: RelationSingleField,
+    relation_array: RelationArrayField,
+    custom_single: CustomSingleField,
+    custom_array: CustomArrayField
+  },
+  primitives: {
+    FormRoot,
+    FieldWrapper,
+    ErrorMessage,
+    Label: ({ children, htmlFor }) => createElement("label", { htmlFor }, children),
+    Button: SuiteButton
+  }
+};
+var webAutoField = createFormRenderer({
+  fallbackSuite: webSuite
+}).AutoField;
+var RelationList = styled_default("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+`;
+var RelationItem = styled_default("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  padding: 0.5em;
+`;
+var RelationValue = styled_default("pre")`
+  margin: 0;
+  padding: 0.5em;
+  font-size: 0.85em;
+  white-space: pre-wrap;
+`;
+var RelationActions = styled_default("div")`
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
+`;
+
+// src/web/forms/createWebFormRenderer.ts
+var createWebFormRenderer = (options) => {
+  return createFormRenderer({
+    fallbackSuite: webSuite,
+    suite: options?.suite
+  });
+};
+var defaultWebRenderer = createWebFormRenderer();
+var AutoField = (props) => {
+  return createElement(webAutoField, {
+    field: props.field,
+    fieldKey: props.fieldKey,
+    value: props.value,
+    onChange: props.onChange,
+    error: props.error,
+    errors: props.errors,
+    arrayItemErrorMap: props.arrayItemErrorMap,
+    translateValidationErrorCode: props.translateValidationErrorCode,
+    disabled: props.disabled,
+    onRelationAction: props.onRelationAction,
+    onCustomTypeAction: props.onCustomTypeAction
+  });
+};
+var AutoFormView2 = (props) => {
+  return /* @__PURE__ */ jsx(AutoFormView, { ...props, renderer: defaultWebRenderer });
+};
+var AutoForm2 = (props) => {
+  return /* @__PURE__ */ jsx(AutoForm, { ...props, renderer: defaultWebRenderer });
+};
+var EasyLayoutBase = styled_default("div")`
+  display: grid;
+  ${({ $layoutCss }) => $layoutCss}
+`;
+var EasyAreaBase = styled_default("div")`
+  grid-area: ${({ $area }) => $area};
+`;
+var styledFactory = {
+  createLayout: ({ base, css }) => {
+    const LayoutComponent = ({ children }) => {
+      const layoutProps = {
+        $layoutCss: css,
+        children
+      };
+      if (base) {
+        layoutProps.as = base;
+      }
+      return /* @__PURE__ */ jsx(EasyLayoutBase, { ...layoutProps });
+    };
+    return LayoutComponent;
+  },
+  createArea: ({ base, area }) => {
+    const AreaComponent = ({ children }) => {
+      const areaProps = {
+        $area: area,
+        children
+      };
+      if (base) {
+        areaProps.as = base;
+      }
+      return /* @__PURE__ */ jsx(EasyAreaBase, { ...areaProps });
+    };
+    return AreaComponent;
+  }
+};
+var getEasyLayout = (extendFrom, areasExtendFrom, options = {}) => {
+  return createEasyLayout(styledFactory, extendFrom, areasExtendFrom, options);
+};
+var Route2 = (props) => {
+  const hasMatcherProps = typeof props.path !== "undefined" || typeof props.exact !== "undefined" || typeof props.onParamsChange !== "undefined";
+  const adapterRef = useRef(null);
+  const shouldUseAutoBrowserAdapter = !hasMatcherProps && typeof props.adapter === "undefined" && typeof props.ingress === "undefined";
+  const routeProps = props;
+  if (shouldUseAutoBrowserAdapter && !adapterRef.current) {
+    adapterRef.current = createBrowserRouteAdapter();
+  }
+  return shouldUseAutoBrowserAdapter ? /* @__PURE__ */ jsx(
+    Route,
+    {
+      ...routeProps,
+      adapter: adapterRef.current ?? void 0
+    }
+  ) : /* @__PURE__ */ jsx(Route, { ...routeProps });
+};
+
+export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm2 as AutoForm, AutoFormView2 as AutoFormView, ErrorMessage, FieldWrapper, Route2 as Route, createWebFormRenderer, getEasyLayout, webAutoField, webSuite };

package/web/utils/EasyLayout.d.ts

@@ -0,0 +1,47 @@
+import { type EasyLayoutSpacing, type FCWithChildren, type LayoutComponents } from "../../app/utils/EasyLayout";
+/**
+ * Quickly express advanced, extensible grid layouts with styled-components.
+ * Template syntax:
+ * - Row lines: `<area area ...>, <track>`
+ * - Optional column line: `\\ <track> <track> ...`
+ *
+ * Supported track units are `fr`, `px`, and `%`.
+ * Parsing and area-shape validation are shared from the app EasyLayout core.
+ * On web, final pixel distribution is resolved by the browser CSS Grid engine.
+ * Optional spacing (`gap`, `padding`) can be provided in `options`.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   layout: Container,
+ *   areas: {
+ *     Header,
+ *     Side,
+ *     Main,
+ *     Footer,
+ *   },
+ * } = getEasyLayout(styled.div)`
+ *   header header header, 1fr
+ *   side main main, 5fr
+ *   footer footer footer, 1fr
+ *   \\ 1fr 1fr 1fr
+ * `;
+ *
+ * const App = () => {
+ *   return (
+ *     <Container>
+ *       <Header>Header Content</Header>
+ *       <Side>Side Content</Side>
+ *       <Main>Main Content</Main>
+ *       <Footer>Footer Content</Footer>
+ *     </Container>
+ *   );
+ * };
+ * ```
+ *
+ * @param extendFrom - Base component to extend for the layout container.
+ * @param areasExtendFrom - Base component to extend for each area component.
+ * @param options - Optional layout spacing (`gap`, `padding`).
+ * @returns Tagged template function that builds layout components.
+ * */
+export declare const getEasyLayout: (extendFrom?: FCWithChildren, areasExtendFrom?: FCWithChildren, options?: EasyLayoutSpacing) => ((layoutTemplate: TemplateStringsArray, ...expressions: any[]) => LayoutComponents);