updates for latest @wq/react

wq · Mar 1, 2025 · 236ec0b · 236ec0b
1 parent 165237e
commit 236ec0b
Show file tree

Hide file tree

Showing 83 changed files with 10,864 additions and 13,912 deletions.
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -4,6 +4,6 @@ module.exports = {
     testMatch: ["**/__tests__/**/*.js?(x)"],
     testPathIgnorePatterns: ["/node_modules/", ".mock.js"],
     transformIgnorePatterns: [
-        "/node_modules/(?!(redux-orm|@mapbox/mapbox-gl-draw|@wq|query-string|decode-uri-component|split-on-first|filter-obj))",
+        "/node_modules/(?!(redux-orm|@mapbox/mapbox-gl-draw|@mapbox/point-geometry|@wq|query-string|decode-uri-component|split-on-first|filter-obj|nanoid))",
     ],
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/form-common/.gitignore b/packages/form-common/.gitignore
@@ -1,16 +1,5 @@
-/react.js
 /index.js
-/index.native.js
-/index.expo.js
-/App.js
-/Root.js
+/date-utils.js
 /hooks.js
-/icons.js
-/init.js
-/messages.js
-/validate.js
 /components/
-/inputs/
-/views/
-/vendor/
 /__tests__/
diff --git a/packages/form-common/package.json b/packages/form-common/package.json
@@ -1,46 +1,39 @@
 {
-    "name": "@wq/react",
+    "name": "@wq/form-common",
     "version": "2.2.0",
-    "description": "React renderer for use with @wq/app",
+    "description": "Schema-based form generation and validation",
     "type": "module",
     "main": "index.js",
-    "react-native": "src/index.native.js",
     "scripts": {
-        "test": "cd ../../ && npm run jest packages/react",
+        "test": "cd ../../ && npm run jest packages/form-common",
         "build": "npm run babel && npm run prettier",
-        "rollup": "cd ../../ && npm run rollup -- -c packages/react/rollup.config.js",
-        "babel": "cd ../../ && npm run babel -- packages/react/src --out-dir packages/react/",
-        "prettier": "cd ../../ && npm run prettier -- --write packages/react/",
-        "lint": "cd ../../ && npm run eslint packages/react/{,src/,src/*/,src/*/*/}*.js"
+        "rollup": "cd ../../ && npm run rollup -- -c packages/form-common/rollup.config.js",
+        "babel": "cd ../../ && npm run babel -- packages/form-common/src --out-dir packages/form-common/",
+        "prettier": "cd ../../ && npm run prettier -- --write packages/form-common/",
+        "lint": "cd ../../ && npm run eslint packages/form-common/{,src/,src/*/,src/*/*/}*.js"
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/wq/wq.app.git",
-        "directory": "packages/react"
+        "url": "git+https://github.com/wq/form.git",
+        "directory": "packages/form-common"
     },
     "keywords": [
         "wq",
-        "react"
+        "react",
+        "form"
     ],
     "author": "S. Andrew Sheppard",
     "license": "MIT",
     "bugs": {
-        "url": "https://github.com/wq/wq.app/issues"
+        "url": "https://github.com/wq/form/issues"
     },
-    "homepage": "https://wq.io/@wq/react",
+    "homepage": "https://wq.io/@wq/form",
     "dependencies": {
-        "@wq/model": "^2.1.0",
-        "@wq/outbox": "^2.1.0",
-        "@wq/router": "^2.0.0",
+        "@turf/circle": "^7.2.0",
+        "@wq/map": "^3.0.0-a1-dev5.g31f4b5c",
+        "@wq/react": "^3.0.0-a1-dev1.g760eb56",
+        "date-fns": "^3.6.0",
         "formik": "^2.4.2",
-        "param-case": "^3.0.4",
-        "pascal-case": "^3.1.2",
-        "react-redux": "^8.1.0"
-    },
-    "devDependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-test-renderer": "^18.2.0",
-        "redux-first-router-link": "https://github.com/faceyspacey/redux-first-router-link/archive/e68b143.tar.gz"
+        "pascal-case": "^3.1.2"
     }
 }
diff --git a/packages/form-common/src/__tests__/index.js b/packages/form-common/src/__tests__/index.js
@@ -1,5 +1,5 @@
-import reactRenderer from "../index.js";
+import { AutoFormBase } from "../index.js";
 
 test("it loads", () => {
-    expect(reactRenderer.name).toBe("react");
+    expect(AutoFormBase.displayName).toBe("AutoFormBase:wq");
 });
diff --git a/packages/form-common/src/components/AutoFormBase.js b/packages/form-common/src/components/AutoFormBase.js
@@ -1,8 +1,42 @@
 import React from "react";
-import { useComponents } from "../hooks.js";
+import { useField } from "formik";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
+import AutoInput from "./AutoInput.js";
+import Form from "./Form.js";
+import CancelButton from "./CancelButton.js";
+import { initFormData } from "../hooks.js";
 import PropTypes from "prop-types";
 
-export default function AutoForm({
+const AutoFormBaseDefaults = {
+        components: {
+            AutoInput,
+            Form,
+            CancelButton,
+        },
+    },
+    AutoFormBaseFallback = {
+        components: {
+            FormError() {
+                const [, { error }] = useField("__other__");
+                if (!error) {
+                    return null;
+                }
+                return error;
+            },
+            SubmitButton: createFallbackComponent(
+                "SubmitButton",
+                "@wq/form",
+                "AutoForm"
+            ),
+            View: createFallbackComponent("View", "@wq/material"),
+            HorizontalView: createFallbackComponent(
+                "HorizontalView",
+                "@wq/material"
+            ),
+        },
+    };
+
+function AutoFormBase({
     action,
     cancel,
     method,
@@ -18,7 +52,6 @@ export default function AutoForm({
     children,
 }) {
     const {
-        Message,
         AutoInput,
         Form,
         FormError,
@@ -28,7 +61,7 @@ export default function AutoForm({
         SubmitButton,
     } = useComponents();
 
-    const formData = initData(form, data);
+    const formData = initFormData(form, data);
 
     if (!modelConf) {
         modelConf = { form };
@@ -53,22 +86,14 @@ export default function AutoForm({
             ))}
             <FormError />
             <HorizontalView>
-                {cancel ? (
-                    <CancelButton to={cancel}>
-                        <Message id="CANCEL" />
-                    </CancelButton>
-                ) : (
-                    <View />
-                )}
-                <SubmitButton>
-                    <Message id="SUBMIT" />
-                </SubmitButton>
+                {cancel ? <CancelButton to={cancel} /> : <View />}
+                <SubmitButton />
             </HorizontalView>
         </Form>
     );
 }
 
-AutoForm.propTypes = {
+AutoFormBase.propTypes = {
     action: PropTypes.string,
     cancel: PropTypes.object,
     method: PropTypes.string,
@@ -84,69 +109,7 @@ AutoForm.propTypes = {
     children: PropTypes.node,
 };
 
-export function initData(form, data) {
-    if (!data) {
-        data = {};
-    }
-
-    const formData = {};
-
-    if (data.id) {
-        formData.id = data.id;
-    }
-
-    form.forEach((field) => {
-        let fieldName = field.name;
-        if (field["wq:ForeignKey"]) {
-            const naturalKey = field.name.match(/^([^\]]+)\[([^\]]+)\]$/);
-            if (
-                naturalKey &&
-                data[naturalKey[1]] &&
-                data[naturalKey[1]][naturalKey[2]]
-            ) {
-                fieldName = naturalKey[1];
-            } else {
-                fieldName = `${field.name}_id`;
-            }
-        }
-
-        let value;
-        if (field.type === "repeat") {
-            value = (data[fieldName] || []).map((row) =>
-                initData(field.children, row)
-            );
-        } else if (field.type === "group") {
-            if (fieldName) {
-                value = initData(field.children, data[fieldName] || {});
-            } else {
-                value = initData(field.children, data);
-            }
-        } else if (fieldName in data) {
-            value = data[fieldName];
-        } else {
-            value = defaultValue(field);
-        }
-
-        if (fieldName) {
-            formData[fieldName] = value;
-        } else {
-            Object.assign(formData, value);
-        }
-    });
-
-    return formData;
-
-    function defaultValue(field) {
-        if (field.type === "select") {
-            return [];
-        } else if (NULL_FIELDS.includes(field.type)) {
-            return null;
-        } else {
-            return "";
-        }
-    }
-}
-
-const NULL_FIELDS = ["date", "time", "dateTime", "int", "integer", "decimal"];
-
-AutoForm.initData = initData;
+export default withWQ(AutoFormBase, {
+    defaults: AutoFormBaseDefaults,
+    fallback: AutoFormBaseFallback,
+});
diff --git a/packages/form-common/src/components/AutoInput.js b/packages/form-common/src/components/AutoInput.js
@@ -1,10 +1,46 @@
-import React from "react";
-import { useComponents, useInputComponents } from "../hooks.js";
+import React, { Fragment } from "react";
+import { useComponents, withWQ, createFallbackComponents } from "@wq/react";
+import AutoSubform from "./AutoSubform.js";
+import AutoSubformArray from "./AutoSubformArray.js";
+import ForeignKey from "./ForeignKey.js";
+import GeoInput from "./GeoInput.js";
 import PropTypes from "prop-types";
 import { pascalCase } from "pascal-case";
 
-export default function AutoInput({ name, choices, type, bind = {}, ...rest }) {
-    const inputs = useInputComponents(),
+const AutoInputDefaults = {
+        components: {
+            AutoSubform,
+            AutoSubformArray,
+            ForeignKey,
+            Geo: GeoInput,
+            GeoPoint: GeoInput,
+            GeoTrace: GeoInput,
+            GeoShape: GeoInput,
+        },
+    },
+    AutoInputFallback = {
+        components: {
+            Text: Fragment,
+            ...createFallbackComponents(
+                [
+                    "Checkbox",
+                    "DateTime",
+                    "File",
+                    "Hidden",
+                    "Image",
+                    "Input",
+                    "Radio",
+                    "Select",
+                    "Toggle",
+                ],
+                "@wq/form",
+                "AutoForm"
+            ),
+        },
+    };
+
+function AutoInput({ name, choices, type, bind = {}, ...rest }) {
+    const inputs = useComponents(),
         { AutoSubform, AutoSubformArray, Text } = useComponents();
 
     if (type === "group") {
@@ -41,9 +77,6 @@ export default function AutoInput({ name, choices, type, bind = {}, ...rest }) {
             inputType = "image";
         } else if (type === "video" || type === "audio") {
             inputType = "file";
-        } else if (type === "binary") {
-            // wq.db <1.3
-            inputType = "file";
         } else {
             inputType = "input";
         }
@@ -58,8 +91,8 @@ export default function AutoInput({ name, choices, type, bind = {}, ...rest }) {
     if (!Input) {
         return (
             <Text>
-                Unknown input type &quot;{inputType}&quot;. Perhaps you need to
-                define inputs.{pascalCase(inputType)} in a plugin?
+                Unknown input type &quot;{inputType}&quot;. Try registering via{" "}
+                {`wq={{components: { ${pascalCase(inputType)} }}}.`}
             </Text>
         );
     }
@@ -82,3 +115,8 @@ AutoInput.propTypes = {
     "wq:ForeignKey": PropTypes.string,
     choices: PropTypes.arrayOf(PropTypes.object),
 };
+
+export default withWQ(AutoInput, {
+    defaults: AutoInputDefaults,
+    fallback: AutoInputFallback,
+});