@wq/form-web 3.0.0-alpha.0

package/components/IconSubmitButton.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
+import { useFormikContext } from "formik";
+const IconSubmitButtonFallback = {
+    components: {
+        IconButton: createFallbackComponent("IconButton", "@wq/material"),
+    },
+};
+function IconSubmitButton(props) {
+    const { IconButton } = useComponents(),
+        { isSubmitting } = useFormikContext();
+    return /*#__PURE__*/ React.createElement(IconButton, {
+        type: "submit",
+        disabled: isSubmitting,
+        ...props,
+    });
+}
+export default withWQ(IconSubmitButton, {
+    fallback: IconSubmitButtonFallback,
+});

package/components/Image.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import File from "./File.js";
+function Image(props) {
+    return /*#__PURE__*/ React.createElement(File, {
+        accept: "image/*",
+        ...props,
+    });
+}
+export default withWQ(Image);

package/components/Input.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import { TextField } from "formik-mui";
+import { useHtmlInput } from "@wq/form-common";
+import PropTypes from "prop-types";
+function Input({ hint, inputProps, ...rest }) {
+    const { name, type, maxLength } = useHtmlInput(rest);
+    return /*#__PURE__*/ React.createElement(Field, {
+        name: name,
+        fullWidth: true,
+        margin: "dense",
+        component: TextField,
+        helperText: hint,
+        inputProps: {
+            maxLength,
+            ...inputProps,
+        },
+        ...rest,
+        type: type,
+    });
+}
+Input.propTypes = {
+    name: PropTypes.string,
+    hint: PropTypes.string,
+    inputProps: PropTypes.object,
+};
+export default withWQ(Input);

package/components/Radio.js

@@ -0,0 +1,53 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import { RadioGroup } from "formik-mui";
+import {
+    FormControl,
+    FormLabel,
+    FormControlLabel,
+    Radio as MuiRadio,
+} from "@mui/material";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+function Radio({ choices, label, ...rest }) {
+    return /*#__PURE__*/ React.createElement(
+        FormControl,
+        {
+            component: "fieldset",
+            fullWidth: true,
+            margin: "dense",
+        },
+        /*#__PURE__*/ React.createElement(
+            FormLabel,
+            {
+                component: "legend",
+            },
+            label,
+        ),
+        /*#__PURE__*/ React.createElement(
+            Field,
+            {
+                component: RadioGroup,
+                ...rest,
+            },
+            choices.map(({ name, label }) =>
+                /*#__PURE__*/ React.createElement(FormControlLabel, {
+                    key: name,
+                    value: name,
+                    label: label,
+                    control: /*#__PURE__*/ React.createElement(MuiRadio, null),
+                }),
+            ),
+        ),
+        /*#__PURE__*/ React.createElement(HelperText, {
+            name: rest.name,
+            hint: rest.hint,
+        }),
+    );
+}
+Radio.propTypes = {
+    choices: PropTypes.arrayOf(PropTypes.object),
+    label: PropTypes.string,
+};
+export default withWQ(Radio);

package/components/Select.js

@@ -0,0 +1,191 @@
+import React, { useMemo } from "react";
+import { withWQ } from "@wq/react";
+import { Field, getIn } from "formik";
+import { Select as FMuiSelect } from "formik-mui";
+import { MenuItem, Checkbox, ListItemText, ListSubheader } from "@mui/material";
+import PropTypes from "prop-types";
+import { useFormikContext } from "formik";
+function ContextCheckbox({ value, field }) {
+    const { values } = useFormikContext();
+    const checked = (getIn(values, field) || []).some((val) => val === value);
+    return /*#__PURE__*/ React.createElement(Checkbox, {
+        checked: checked,
+    });
+}
+ContextCheckbox.propTypes = {
+    value: PropTypes.string,
+    field: PropTypes.string,
+};
+function Select({
+    choices,
+    label,
+    required,
+    native,
+    placeholder,
+    renderValue,
+    InputLabelProps,
+    ...rest
+}) {
+    const { name: fieldName, type, hint } = rest,
+        { errors, touched } = useFormikContext(),
+        showError = !!getIn(errors, fieldName) && getIn(touched, fieldName),
+        multiple = type === "select";
+    if (multiple && !renderValue) {
+        renderValue = (sel) => sel.map(getLabel).join(", ");
+    }
+    if (placeholder && !renderValue) {
+        renderValue = (sel) => getLabel(sel) || sel || placeholder;
+    }
+    const getLabel = useMemo(() => {
+        const labels = {};
+        choices.forEach(({ name, label }) => {
+            labels[name] = label;
+        });
+        return (name) => labels[name];
+    }, [choices]);
+    const choiceGroups = useMemo(() => {
+        const choiceGroups = {};
+        choices.forEach((choice) => {
+            const group = choice.group || "";
+            if (!choiceGroups[group]) {
+                choiceGroups[group] = [];
+            }
+            choiceGroups[group].push(choice);
+        });
+        return choiceGroups;
+    }, [choices]);
+    const Option = useMemo(
+        () =>
+            native
+                ? ({ value, children }) =>
+                      /*#__PURE__*/ React.createElement(
+                          "option",
+                          {
+                              value: value,
+                          },
+                          children,
+                      )
+                : ({ children, ...rest }) =>
+                      /*#__PURE__*/ React.createElement(
+                          MenuItem,
+                          {
+                              ...rest,
+                          },
+                          multiple &&
+                              /*#__PURE__*/ React.createElement(
+                                  ContextCheckbox,
+                                  {
+                                      value: rest["data-value"],
+                                      field: fieldName,
+                                  },
+                              ),
+                          /*#__PURE__*/ React.createElement(ListItemText, {
+                              primary: children,
+                              "data-value": rest["data-value"],
+                              primaryTypographyProps: {
+                                  "data-value": rest["data-value"],
+                              },
+                          }),
+                      ),
+        [native, multiple, fieldName],
+    );
+    const renderChoices = (choices) =>
+        choices.map(({ name, label }) =>
+            /*#__PURE__*/ React.createElement(
+                Option,
+                {
+                    key: name,
+                    value: name,
+                },
+                label,
+            ),
+        );
+    const renderGroups = native
+        ? (choiceGroups) =>
+              Object.entries(choiceGroups).map(([group, choices]) =>
+                  group
+                      ? /*#__PURE__*/ React.createElement(
+                            "optgroup",
+                            {
+                                key: group,
+                                label: group,
+                            },
+                            renderChoices(choices),
+                        )
+                      : /*#__PURE__*/ React.createElement(
+                            React.Fragment,
+                            null,
+                            renderChoices(choices),
+                        ),
+              )
+        : (choiceGroups) => {
+              const flattened = [];
+              Object.entries(choiceGroups).forEach(([group, choices]) => {
+                  if (group) {
+                      flattened.push(
+                          /*#__PURE__*/ React.createElement(
+                              ListSubheader,
+                              {
+                                  style: {
+                                      backgroundColor: "white",
+                                  },
+                              },
+                              group,
+                          ),
+                      );
+                  }
+                  flattened.push(...renderChoices(choices));
+              });
+              return flattened;
+          };
+    return /*#__PURE__*/ React.createElement(
+        Field,
+        {
+            component: FMuiSelect,
+            formControl: {
+                fullWidth: true,
+                margin: "dense",
+            },
+            inputLabel: {
+                required,
+                error: showError,
+                ...InputLabelProps,
+            },
+            formHelperText: {
+                children: hint,
+            },
+            multiple: multiple,
+            required: required,
+            native: native,
+            label: label,
+            renderValue: renderValue,
+            displayEmpty: !!placeholder,
+            ...(InputLabelProps && InputLabelProps.shrink
+                ? {
+                      notched: true,
+                  }
+                : {}),
+            ...rest,
+        },
+        !multiple &&
+            /*#__PURE__*/ React.createElement(
+                Option,
+                {
+                    value: "",
+                    disabled: !!required,
+                },
+                required ? "Select one..." : "(No Selection)",
+            ),
+        renderGroups(choiceGroups),
+    );
+}
+Select.propTypes = {
+    choices: PropTypes.arrayOf(PropTypes.object),
+    label: PropTypes.string,
+    placeholder: PropTypes.string,
+    required: PropTypes.bool,
+    native: PropTypes.bool,
+    renderValue: PropTypes.func,
+    InputLabelProps: PropTypes.object,
+};
+export default withWQ(Select);

package/components/SubmitButton.js

@@ -0,0 +1,36 @@
+import React from "react";
+import {
+    useMessage,
+    useComponents,
+    withWQ,
+    createFallbackComponent,
+} from "@wq/react";
+import { useFormikContext } from "formik";
+const SubmitButtonFallback = {
+    messages: {
+        SUBMIT: "Submit",
+    },
+    components: {
+        Button: createFallbackComponent("Button", "@wq/material"),
+    },
+};
+function SubmitButton(props) {
+    const { Button } = useComponents(),
+        defaultLabel = useMessage("SUBMIT"),
+        label = props.children || defaultLabel,
+        { isSubmitting } = useFormikContext();
+    return /*#__PURE__*/ React.createElement(
+        Button,
+        {
+            type: "submit",
+            color: "primary",
+            variant: "contained",
+            disabled: isSubmitting,
+            ...props,
+        },
+        label,
+    );
+}
+export default withWQ(SubmitButton, {
+    fallback: SubmitButtonFallback,
+});

package/components/Toggle.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import { ToggleButton, FormControl, FormLabel } from "@mui/material";
+import { ToggleButtonGroup } from "formik-mui";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+function Toggle({ choices, label, ...rest }) {
+    return /*#__PURE__*/ React.createElement(
+        FormControl,
+        {
+            component: "fieldset",
+            fullWidth: true,
+            margin: "dense",
+        },
+        /*#__PURE__*/ React.createElement(
+            FormLabel,
+            {
+                component: "legend",
+            },
+            label,
+        ),
+        /*#__PURE__*/ React.createElement(
+            Field,
+            {
+                component: ToggleButtonGroup,
+                exclusive: true,
+                ...rest,
+                type: "checkbox",
+            },
+            choices.map(({ name, label }) =>
+                /*#__PURE__*/ React.createElement(
+                    ToggleButton,
+                    {
+                        key: name,
+                        value: name,
+                    },
+                    label,
+                ),
+            ),
+        ),
+        /*#__PURE__*/ React.createElement(HelperText, {
+            name: rest.name,
+            hint: rest.hint,
+        }),
+    );
+}
+Toggle.propTypes = {
+    choices: PropTypes.arrayOf(PropTypes.object),
+    label: PropTypes.string,
+};
+export default withWQ(Toggle);

package/components/index.js

@@ -0,0 +1,50 @@
+import FormRoot from "./FormRoot.js";
+import FormError from "./FormError.js";
+import Input from "./Input.js";
+import Checkbox from "./Checkbox.js";
+import DateTime from "./DateTime.js";
+import File from "./File.js";
+import Image from "./Image.js";
+import Select from "./Select.js";
+import Radio from "./Radio.js";
+import Toggle from "./Toggle.js";
+import Hidden from "./Hidden.js";
+import HelperText from "./HelperText.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
+import SubmitButton from "./SubmitButton.js";
+import IconSubmitButton from "./IconSubmitButton.js";
+import DeleteForm from "./DeleteForm.js";
+import Draw from "./Draw.js";
+import GeoHelpIcon from "./GeoHelpIcon.js";
+const Date = DateTime;
+const Time = DateTime;
+const dateTime = DateTime;
+export {
+    FormRoot,
+    FormError,
+    Input,
+    Checkbox,
+    DateTime,
+    Date,
+    Time,
+    dateTime,
+    File,
+    Image,
+    Select,
+    Radio,
+    Toggle,
+    Hidden,
+    HelperText,
+    Fieldset,
+    FlatFieldset,
+    FieldsetArray,
+    FileArray,
+    SubmitButton,
+    IconSubmitButton,
+    DeleteForm,
+    Draw,
+    GeoHelpIcon,
+};

package/index.js

@@ -0,0 +1,3 @@
+import AutoForm from "./AutoForm.js";
+export { AutoForm };
+export * from "./components/index.js";

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "@wq/form-web",
+    "version": "3.0.0-alpha.0",
+    "description": "Web bindings for @wq/form",
+    "type": "module",
+    "main": "index.js",
+    "scripts": {
+        "test": "cd ../../ && npm run jest packages/form-web",
+        "build": "npm run babel && npm run prettier",
+        "babel": "cd ../../ && npm run babel -- packages/form-web/src --out-dir packages/form-web/",
+        "prettier": "cd ../../ && npm run prettier -- --write packages/form-web/",
+        "lint": "cd ../../ && npm run eslint packages/form-web/{,src/,src/*/,src/*/*/}*.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/wq/form.git",
+        "directory": "packages/form-web"
+    },
+    "keywords": [
+        "wq",
+        "react",
+        "material",
+        "material-ui"
+    ],
+    "author": "S. Andrew Sheppard",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/wq/form/issues"
+    },
+    "homepage": "https://form.wq.io/@wq/form-web",
+    "dependencies": {
+        "@wq/form-common": "^3.0.0-alpha.0",
+        "@wq/react": "^3.0.0-alpha.0"
+    },
+    "peerDependencies": {
+        "@mapbox/mapbox-gl-draw": "*",
+        "@mui/material": "*",
+        "formik-mui": "*",
+        "mui2-file-dropzone": "*"
+    },
+    "devDependencies": {
+        "@mapbox/mapbox-gl-draw": "^1.5.1",
+        "@mui/material": "^6.5.0",
+        "formik-mui": "^5.0.0-alpha.1",
+        "mui2-file-dropzone": "^6.3.0"
+    }
+}

package/src/AutoForm.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { AutoFormBase, AutoInput, Form, CancelButton } from "@wq/form-common";
+import * as components from "./components/index.js";
+
+const AutoFormDefaults = {
+    components: { ...components, AutoForm, AutoInput, Form, CancelButton },
+};
+
+function AutoForm(props) {
+    if (!props.action && !props.onSubmit && !props.form) {
+        return props.children || null;
+    }
+    return <AutoFormBase {...props} />;
+}
+
+export default withWQ(AutoForm, { defaults: AutoFormDefaults });

package/src/components/Checkbox.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import { CheckboxWithLabel } from "formik-mui";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+function Checkbox({ label, ...props }) {
+    return (
+        <>
+            <Field
+                component={CheckboxWithLabel}
+                Label={{ label }}
+                {...props}
+                type="checkbox"
+            />
+            <HelperText name={props.name} hint={props.hint} />
+        </>
+    );
+}
+
+Checkbox.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(Checkbox);

package/src/components/DateTime.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import Input from "./Input.js";
+
+function DateTime({ InputLabelProps: overrides, ...rest }) {
+    const InputLabelProps = {
+        shrink: true,
+        ...overrides,
+    };
+    return <Input InputLabelProps={InputLabelProps} {...rest} />;
+}
+
+export default withWQ(DateTime);

package/src/components/DeleteForm.js

@@ -0,0 +1,52 @@
+import React from "react";
+import {
+    useComponents,
+    useMessage,
+    withWQ,
+    createFallbackComponents,
+} from "@wq/react";
+import { Form } from "@wq/form-common";
+import SubmitButton from "./SubmitButton.js";
+import PropTypes from "prop-types";
+
+const DeleteFormFallback = {
+    messages: {
+        CONFIRM_DELETE: "Are you sure you want to delete this record?",
+    },
+    components: {
+        Form,
+        SubmitButton,
+        ...createFallbackComponents(["View", "HorizontalView"], "@wq/material"),
+    },
+};
+
+function DeleteForm({ action }) {
+    const { Form, SubmitButton, View, HorizontalView } = useComponents(),
+        message = useMessage("CONFIRM_DELETE");
+
+    function confirmSubmit() {
+        return window.confirm(message);
+    }
+
+    return (
+        <Form
+            action={action}
+            method="DELETE"
+            backgroundSync={false}
+            onSubmit={confirmSubmit}
+        >
+            <HorizontalView>
+                <View />
+                <SubmitButton icon="delete" variant="text" color="secondary">
+                    Delete
+                </SubmitButton>
+            </HorizontalView>
+        </Form>
+    );
+}
+
+DeleteForm.propTypes = {
+    action: PropTypes.string,
+};
+
+export default withWQ(DeleteForm, { fallback: DeleteFormFallback });