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

package/native/index.js

@@ -0,0 +1,748 @@
+import { computeTrackPixels } from '../chunk-TJFTWPXQ.js';
+import { createFormRenderer, createHistoryBackHandler, buildHistoryPath, AutoFormView, AutoForm, parseTemplate, validateAreas, computeAreaBounds, parseHistoryPath, createMemoryHistory, Route, buildRoutePath } from '../chunk-DT6WWJUI.js';
+import { ERROR_MESSAGE_CONSTANTS } from '../chunk-YCTVEW2I.js';
+import { resolveRouteAdapterPath, getPathArray } from '../chunk-WNFRDIBW.js';
+import '../chunk-I2KLQ2HA.js';
+import { createElement, useMemo } from 'react';
+import { Text, View, Platform, Switch, TextInput, Pressable, BackHandler } from 'react-native';
+import { jsx } from 'react/jsx-runtime';
+
+var FieldWrapper = (props) => {
+  return createElement(View, null, props.children);
+};
+var ErrorMessage = ({ children }) => {
+  return createElement(Text, { style: { color: "#AA0000" } }, children);
+};
+var ArrayContainer = (props) => {
+  return createElement(View, null, props.children);
+};
+var ArrayItemWrapper = (props) => {
+  return createElement(View, null, props.children);
+};
+var Button = ({
+  children,
+  disabled,
+  onPress
+}) => {
+  return createElement(
+    Pressable,
+    { onPress, disabled },
+    createElement(Text, null, children)
+  );
+};
+
+// src/native/forms/suite.ts
+var createArrayItemField = (field) => ({
+  ...field,
+  array: false,
+  tags: {
+    ...field.tags,
+    label: void 0
+  }
+});
+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 createElement(
+    View,
+    { style: { gap: 4 } },
+    descriptors.map((descriptor, index) => {
+      const message = translateValidationErrorCode(descriptor);
+      if (!message) {
+        return null;
+      }
+      return createElement(
+        ErrorMessage,
+        { key: `${descriptor.code}-${index}`, children: message }
+      );
+    })
+  );
+};
+var RelationSingleField = (context) => {
+  const { field, fieldKey, label, required, disabled, onRelationAction } = context;
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(Text, null, `${label} ${required ? "*" : ""}`),
+    onRelationAction ? createElement(
+      Button,
+      {
+        disabled,
+        onPress: () => onRelationAction({
+          action: "open",
+          fieldKey,
+          field,
+          value: void 0,
+          fullPaging: field.tags?.fullPaging,
+          onChange: context.onChange
+        })
+      },
+      "Manage"
+    ) : null,
+    renderErrorMessage(context)
+  );
+};
+var RelationArrayField = (context) => {
+  const { field, fieldKey, label, required, disabled, onRelationAction } = context;
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(Text, null, `${label} ${required ? "*" : ""}`),
+    onRelationAction ? createElement(
+      Button,
+      {
+        disabled,
+        onPress: () => onRelationAction({
+          action: "open",
+          fieldKey,
+          field,
+          value: void 0,
+          fullPaging: field.tags?.fullPaging,
+          onChange: context.onChange
+        })
+      },
+      "Manage"
+    ) : null,
+    renderErrorMessage(context)
+  );
+};
+var CustomSingleField = (context) => {
+  const { field, fieldKey, label, required, disabled } = context;
+  const customType = field.tags?.customType;
+  const onCustomTypeAction = context.onCustomTypeAction;
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(Text, null, `${label} ${required ? "*" : ""}`),
+    createElement(Text, null, formatCustomValue(context.value)),
+    customType && onCustomTypeAction ? createElement(
+      Button,
+      {
+        disabled,
+        onPress: () => onCustomTypeAction({
+          action: "open",
+          fieldKey,
+          field,
+          customType,
+          value: context.value,
+          onChange: context.onChange
+        })
+      },
+      "Manage"
+    ) : null,
+    renderErrorMessage(context)
+  );
+};
+var CustomArrayField = (context) => {
+  const { field, fieldKey, label, required, disabled } = context;
+  const customType = field.tags?.customType;
+  const onCustomTypeAction = context.onCustomTypeAction;
+  const arrayValue = Array.isArray(context.value) ? context.value : [];
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(Text, null, `${label} ${required ? "*" : ""}`),
+    createElement(
+      View,
+      { style: { gap: 8, marginBottom: 8 } },
+      arrayValue.length === 0 ? createElement(Text, null, "No items yet.") : arrayValue.map(
+        (item, index) => createElement(
+          View,
+          { key: `${fieldKey}-${index}`, style: { gap: 4 } },
+          createElement(Text, null, formatCustomValue(item)),
+          createElement(
+            View,
+            { style: { flexDirection: "row", gap: 8, flexWrap: "wrap" } },
+            customType && onCustomTypeAction ? createElement(
+              Button,
+              {
+                disabled,
+                onPress: () => onCustomTypeAction({
+                  action: "edit",
+                  fieldKey,
+                  field,
+                  customType,
+                  value: context.value,
+                  index,
+                  onChange: context.onChange
+                })
+              },
+              "Manage"
+            ) : null,
+            customType && onCustomTypeAction ? createElement(
+              Button,
+              {
+                disabled,
+                onPress: () => onCustomTypeAction({
+                  action: "remove",
+                  fieldKey,
+                  field,
+                  customType,
+                  value: context.value,
+                  index,
+                  onChange: context.onChange
+                })
+              },
+              "Remove"
+            ) : null
+          )
+        )
+      )
+    ),
+    customType && onCustomTypeAction ? createElement(
+      Button,
+      {
+        disabled,
+        onPress: () => onCustomTypeAction({
+          action: "add",
+          fieldKey,
+          field,
+          customType,
+          value: context.value,
+          onChange: context.onChange
+        })
+      },
+      "Add Item"
+    ) : null,
+    renderErrorMessage(context)
+  );
+};
+var ArrayField = (context) => {
+  const { field, fieldKey, label, required, disabled } = context;
+  const itemField = createArrayItemField(field);
+  const arrayValue = Array.isArray(context.value) ? [...context.value] : [];
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(Text, null, `${label} ${required ? "*" : ""}`),
+    createElement(
+      ArrayContainer,
+      null,
+      arrayValue.map(
+        (item, index) => createElement(
+          ArrayItemWrapper,
+          { key: index },
+          createElement(
+            View,
+            { style: { flex: 1 } },
+            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
+            })
+          ),
+          createElement(
+            Button,
+            {
+              disabled,
+              onPress: () => {
+                const newValue = [...arrayValue];
+                newValue.splice(index, 1);
+                context.onChange(newValue);
+              }
+            },
+            "Remove"
+          )
+        )
+      ),
+      createElement(
+        Button,
+        {
+          disabled,
+          onPress: () => {
+            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);
+          }
+        },
+        "Add Item"
+      )
+    ),
+    renderErrorMessage(context)
+  );
+};
+var StringField = (context) => {
+  const { label, required, disabled } = context;
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(Text, null, `${label} ${required ? "*" : ""}`),
+    createElement(TextInput, {
+      value: context.value || "",
+      onChangeText: (value) => context.onChange(value),
+      editable: !disabled,
+      placeholder: label
+    }),
+    renderErrorMessage(context)
+  );
+};
+var NumberField = (context) => {
+  const { label, required, disabled } = context;
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(Text, null, `${label} ${required ? "*" : ""}`),
+    createElement(TextInput, {
+      value: context.value !== void 0 ? String(context.value) : "",
+      onChangeText: (value) => context.onChange(parseNumberValue(value)),
+      editable: !disabled,
+      keyboardType: "numeric",
+      placeholder: label
+    }),
+    renderErrorMessage(context)
+  );
+};
+var BooleanField = (context) => {
+  const { label, disabled } = context;
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(
+      View,
+      { style: { flexDirection: "row", alignItems: "center", gap: 8 } },
+      createElement(Switch, {
+        value: !!context.value,
+        onValueChange: (value) => context.onChange(value),
+        disabled
+      }),
+      createElement(Text, null, label)
+    ),
+    renderErrorMessage(context)
+  );
+};
+var EnumSelectField = (context) => {
+  const { field, label, required, disabled } = context;
+  const selectableValues = getSelectableValues(context.possibleValues) ?? [];
+  return createElement(
+    FieldWrapper,
+    null,
+    createElement(Text, null, `${label} ${required ? "*" : ""}`),
+    createElement(
+      View,
+      { style: { gap: 8 } },
+      selectableValues.map(
+        (val) => createElement(
+          Button,
+          {
+            key: String(val),
+            disabled,
+            onPress: () => context.onChange(
+              field.type === "number" ? Number(val) : String(val)
+            )
+          },
+          String(val)
+        )
+      )
+    ),
+    renderErrorMessage(context)
+  );
+};
+var FormRoot = ({
+  children,
+  onSubmit
+}) => {
+  if (Platform?.OS === "web") {
+    return createElement(
+      "form",
+      {
+        onSubmit: (event) => {
+          event?.preventDefault?.();
+          onSubmit?.();
+        }
+      },
+      children
+    );
+  }
+  return createElement(View, null, children);
+};
+var SuiteButton = ({
+  children,
+  disabled,
+  onClick
+}) => {
+  return createElement(Button, { disabled, onPress: onClick }, children);
+};
+var nativeSuite = {
+  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 }) => createElement(Text, null, children),
+    Button: SuiteButton
+  }
+};
+var nativeAutoField = createFormRenderer({
+  fallbackSuite: nativeSuite
+}).AutoField;
+
+// src/native/forms/createNativeFormRenderer.ts
+var createNativeFormRenderer = (options) => {
+  return createFormRenderer({
+    fallbackSuite: nativeSuite,
+    suite: options?.suite
+  });
+};
+var defaultNativeRenderer = createNativeFormRenderer();
+var AutoField = (props) => {
+  return createElement(nativeAutoField, {
+    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: defaultNativeRenderer });
+};
+var AutoForm2 = (props) => {
+  return /* @__PURE__ */ jsx(AutoForm, { ...props, renderer: defaultNativeRenderer });
+};
+var roundTo = (value, decimals) => {
+  const places = Number.isFinite(decimals) ? Math.max(0, decimals) : 3;
+  const factor = Math.pow(10, places);
+  return Math.round(value * factor) / factor;
+};
+var sumTrackWindow = (tracks, startIndex, endIndex, gapPx) => {
+  if (endIndex < startIndex) {
+    return 0;
+  }
+  const trackSum = tracks.slice(startIndex, endIndex + 1).reduce((acc, value) => acc + value, 0);
+  const gaps = (endIndex - startIndex) * gapPx;
+  return trackSum + Math.max(0, gaps);
+};
+var sumBeforeTrack = (tracks, startIndex, gapPx) => {
+  if (startIndex <= 0) {
+    return 0;
+  }
+  const trackSum = tracks.slice(0, startIndex).reduce((acc, value) => acc + value, 0);
+  const gaps = startIndex * Math.max(0, gapPx);
+  return trackSum + gaps;
+};
+var computeCoords = (parsed, bounds, { width, height, padding = 0, gap = 0, roundToDecimals = 3 }) => {
+  const rowTracks = parsed.rowTracks.length ? parsed.rowTracks : parsed.areaGrid.map(() => ({ kind: "fr", value: 1 }));
+  const colTracks = parsed.colTracks.length ? parsed.colTracks : parsed.areaGrid[0].map(() => ({ kind: "fr", value: 1 }));
+  const rowPixels = computeTrackPixels({
+    tracks: rowTracks,
+    totalPx: Math.max(0, height),
+    gapPx: gap,
+    paddingPx: padding
+  });
+  const colPixels = computeTrackPixels({
+    tracks: colTracks,
+    totalPx: Math.max(0, width),
+    gapPx: gap,
+    paddingPx: padding
+  });
+  const result = {};
+  for (const areaName of parsed.areaNames) {
+    const area = bounds[areaName];
+    if (!area) {
+      continue;
+    }
+    const left = Math.max(0, padding) + sumBeforeTrack(colPixels, area.colStart - 1, Math.max(0, gap));
+    const top = Math.max(0, padding) + sumBeforeTrack(rowPixels, area.rowStart - 1, Math.max(0, gap));
+    const areaWidth = sumTrackWindow(
+      colPixels,
+      area.colStart - 1,
+      area.colEnd - 1,
+      Math.max(0, gap)
+    );
+    const areaHeight = sumTrackWindow(
+      rowPixels,
+      area.rowStart - 1,
+      area.rowEnd - 1,
+      Math.max(0, gap)
+    );
+    result[areaName] = {
+      left: roundTo(left, roundToDecimals),
+      top: roundTo(top, roundToDecimals),
+      width: roundTo(areaWidth, roundToDecimals),
+      height: roundTo(areaHeight, roundToDecimals)
+    };
+  }
+  return result;
+};
+var makeNativeEasyLayout = (template) => {
+  const parsed = parseTemplate(template);
+  validateAreas(parsed);
+  const bounds = computeAreaBounds(parsed);
+  return {
+    template,
+    parsed,
+    bounds,
+    areaNames: parsed.areaNames,
+    computeNativeCoords: (input) => computeCoords(parsed, bounds, input)
+  };
+};
+var useNativeEasyLayout = (layout, input) => {
+  return useMemo(
+    () => layout.computeNativeCoords(input),
+    [
+      layout,
+      input.width,
+      input.height,
+      input.padding,
+      input.gap,
+      input.roundToDecimals
+    ]
+  );
+};
+var NativeEasyLayoutView = ({
+  layout,
+  areaChildren = {},
+  ViewComponent,
+  containerStyle = {},
+  areaStyle = {},
+  onLayout,
+  ...input
+}) => {
+  const coords = useNativeEasyLayout(layout, input);
+  const Container = ViewComponent || "div";
+  return createElement(
+    Container,
+    {
+      onLayout,
+      style: {
+        position: "relative",
+        width: input.width,
+        height: input.height,
+        ...containerStyle
+      }
+    },
+    layout.areaNames.map(
+      (areaName) => createElement(
+        Container,
+        {
+          key: areaName,
+          style: {
+            position: "absolute",
+            ...coords[areaName],
+            ...areaStyle
+          }
+        },
+        areaChildren[areaName] ?? null
+      )
+    )
+  );
+};
+
+// src/native/utils/History.ts
+var mapNativeURLToPath = (url) => buildHistoryPath(parseHistoryPath(url));
+var createNativeHistory = (options = {}) => {
+  const {
+    adapter,
+    initialPath = "/",
+    onIncomingURL = "replace",
+    mapURLToPath = mapNativeURLToPath
+  } = options;
+  const history = createMemoryHistory(initialPath);
+  let unsubscribe;
+  let started = false;
+  const applyIncomingURL = (url) => {
+    if (!url) {
+      return;
+    }
+    const targetPath = mapURLToPath(url);
+    if (!targetPath) {
+      return;
+    }
+    if (onIncomingURL === "push") {
+      history.push(targetPath, { replaceSearch: true });
+    } else {
+      history.replace(targetPath, { replaceSearch: true });
+    }
+  };
+  return {
+    get location() {
+      return history.location;
+    },
+    get length() {
+      return history.length;
+    },
+    get index() {
+      return history.index;
+    },
+    push: history.push,
+    replace: history.replace,
+    go: history.go,
+    back: history.back,
+    forward: history.forward,
+    listen: history.listen,
+    start: async () => {
+      if (started) {
+        return;
+      }
+      started = true;
+      if (!adapter) {
+        return;
+      }
+      const startKey = history.location.key;
+      const startIndex = history.index;
+      unsubscribe = adapter.subscribe((url) => {
+        const targetPath = mapURLToPath(url);
+        if (!targetPath) {
+          return;
+        }
+        const userNavigated = history.location.key !== startKey || history.index !== startIndex;
+        if (userNavigated && targetPath === initialPath) {
+          return;
+        }
+        if (onIncomingURL === "push") {
+          history.push(targetPath, { replaceSearch: true });
+        } else {
+          history.replace(targetPath, { replaceSearch: true });
+        }
+      });
+      const initialURL = await adapter.getInitialURL();
+      if (history.location.key === startKey && history.index === startIndex) {
+        applyIncomingURL(initialURL);
+      }
+    },
+    stop: () => {
+      if (!started) {
+        return;
+      }
+      unsubscribe?.();
+      unsubscribe = void 0;
+      started = false;
+    }
+  };
+};
+var createNativeBackHandler = (history) => createHistoryBackHandler(history);
+var createNavigationStateRouteAdapter = (options) => {
+  const getPath = () => options.toPath(options.getState());
+  const resolvePath = (path) => resolveRouteAdapterPath(getPath(), path);
+  return {
+    getPath,
+    subscribe: (listener) => options.subscribe(() => {
+      listener(getPath());
+    }),
+    push: options.navigate ? (path) => options.navigate?.(resolvePath(path)) : void 0,
+    replace: options.replace ? (path) => options.replace?.(resolvePath(path)) : void 0
+  };
+};
+var createNativeHardwareBackHandler = (adapter) => {
+  return () => {
+    if (adapter.canGoBack?.()) {
+      adapter.back?.();
+      return true;
+    }
+    return false;
+  };
+};
+var registerNativeHardwareBackHandler = (adapter, backHandler) => {
+  const listener = createNativeHardwareBackHandler(adapter);
+  const subscription = backHandler.addEventListener(
+    "hardwareBackPress",
+    listener
+  );
+  return () => {
+    if (typeof subscription?.remove === "function") {
+      subscription.remove();
+      return;
+    }
+    backHandler.removeEventListener?.("hardwareBackPress", listener);
+  };
+};
+var createNativeRouteBackIntegration = (backHandler) => {
+  return {
+    setup: (adapter) => registerNativeHardwareBackHandler(adapter, backHandler)
+  };
+};
+var Route2 = (props) => {
+  const hasMatcherProps = typeof props.path !== "undefined" || typeof props.exact !== "undefined" || typeof props.onParamsChange !== "undefined";
+  const nativeRuntime = {
+    platformOS: String(Platform?.OS ?? ""),
+    backHandler: BackHandler
+  };
+  const runtimeIntegration = (() => {
+    if (hasMatcherProps || nativeRuntime.platformOS === "web") {
+      return void 0;
+    }
+    const backHandler = nativeRuntime.backHandler;
+    if (!backHandler) {
+      return void 0;
+    }
+    return createNativeRouteBackIntegration(backHandler);
+  })();
+  return /* @__PURE__ */ jsx(
+    Route,
+    {
+      ...props,
+      runtimeIntegration
+    }
+  );
+};
+var expandPattern = (pattern, params = {}) => {
+  const segments = getPathArray(pattern, "/", true, true, false, false);
+  return segments.map((segment) => {
+    if (segment.startsWith(":")) {
+      const key = segment.slice(1);
+      if (!(key in params)) {
+        throw new Error(`Missing param "${key}" for route pattern "${pattern}".`);
+      }
+      return params[key];
+    }
+    return segment;
+  });
+};
+var buildPathFromRouteChain = (routeChain, config, query) => {
+  const segments = [];
+  routeChain.forEach((route) => {
+    const pattern = config[route.name];
+    if (!pattern) {
+      throw new Error(`Missing route pattern for "${route.name}".`);
+    }
+    segments.push(...expandPattern(pattern, route.params));
+  });
+  return buildRoutePath(segments, query);
+};
+
+export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm2 as AutoForm, AutoFormView2 as AutoFormView, Button, ErrorMessage, FieldWrapper, NativeEasyLayoutView, Route2 as Route, buildPathFromRouteChain, createNativeBackHandler, createNativeFormRenderer, createNativeHardwareBackHandler, createNativeHistory, createNativeRouteBackIntegration, createNavigationStateRouteAdapter, makeNativeEasyLayout, mapNativeURLToPath, nativeAutoField, nativeSuite, registerNativeHardwareBackHandler, useNativeEasyLayout };