@comet/admin 9.0.0-beta.4 → 9.0.0-beta.5

package/lib/form/__stories__/Select.stories.js

@@ -0,0 +1,187 @@
+import { Account } from "@comet/admin-icons";
+import { Box, Checkbox, InputAdornment, ListItemIcon, ListItemText, MenuItem } from "@mui/material";
+import { Form } from "react-final-form";
+import { FieldSet } from "../../common/FieldSet";
+import { SelectField } from "../../form/fields/SelectField";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/form"
+};
+export var Select = function Select() {
+  var options = [{
+    value: "chocolate",
+    label: "Chocolate"
+  }, {
+    value: "strawberry",
+    label: "Strawberry"
+  }, {
+    value: "raspberry",
+    label: "Raspberry"
+  }, {
+    value: "vanilla",
+    label: "Vanilla",
+    disabled: true
+  }, {
+    value: "mango",
+    label: "Mango"
+  }];
+  var numberOptions = [{
+    value: 0,
+    label: "Zero"
+  }, {
+    value: 1,
+    label: "One"
+  }, {
+    value: 2,
+    label: "Two"
+  }, {
+    value: 3,
+    label: "Three"
+  }, {
+    value: 4,
+    label: "Four",
+    disabled: true
+  }, {
+    value: 5,
+    label: "Five"
+  }];
+  return /*#__PURE__*/_jsx(Box, {
+    width: 500,
+    children: /*#__PURE__*/_jsx(Form, {
+      initialValues: {
+        multipleFlavors: [],
+        multipleNumbers: [],
+        multipleRequiredFlavors: []
+      },
+      onSubmit: function onSubmit() {
+        //
+      },
+      render: function render(_ref) {
+        var handleSubmit = _ref.handleSubmit,
+          values = _ref.values;
+        return /*#__PURE__*/_jsxs("form", {
+          onSubmit: handleSubmit,
+          children: [/*#__PURE__*/_jsxs(FieldSet, {
+            title: "Basic selects",
+            children: [/*#__PURE__*/_jsx(SelectField, {
+              name: "flavor",
+              label: "Select a flavor",
+              options: options,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(SelectField, {
+              name: "number",
+              label: "Select a number",
+              options: numberOptions,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(Box, {
+              component: "pre",
+              children: JSON.stringify({
+                flavor: values.flavor,
+                number: values.number
+              }, null, 2)
+            })]
+          }), /*#__PURE__*/_jsxs(FieldSet, {
+            title: "Multi selects",
+            children: [/*#__PURE__*/_jsx(SelectField, {
+              name: "multipleFlavors",
+              label: "Select multiple flavors",
+              options: options,
+              multiple: true,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(SelectField, {
+              name: "multipleNumbers",
+              label: "Select multiple numbers",
+              options: numberOptions,
+              multiple: true,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(Box, {
+              component: "pre",
+              children: JSON.stringify({
+                multipleFlavors: values.multipleFlavors,
+                multipleNumbers: values.multipleNumbers
+              }, null, 2)
+            })]
+          }), /*#__PURE__*/_jsxs(FieldSet, {
+            title: "Required selects",
+            children: [/*#__PURE__*/_jsx(SelectField, {
+              name: "requiredFlavor",
+              label: "Select a flavor",
+              options: options,
+              fullWidth: true,
+              required: true
+            }), /*#__PURE__*/_jsx(SelectField, {
+              name: "requiredNumber",
+              label: "Select a number",
+              options: numberOptions,
+              fullWidth: true,
+              required: true
+            }), /*#__PURE__*/_jsx(SelectField, {
+              name: "multipleRequiredFlavors",
+              label: "Select multiple flavors",
+              options: options,
+              multiple: true,
+              fullWidth: true,
+              required: true
+            }), /*#__PURE__*/_jsx(Box, {
+              component: "pre",
+              children: JSON.stringify({
+                requiredFlavor: values.requiredFlavor,
+                requiredNumber: values.requiredNumber,
+                multipleRequiredFlavors: values.multipleRequiredFlavors
+              }, null, 2)
+            })]
+          }), /*#__PURE__*/_jsxs(FieldSet, {
+            title: "Customization",
+            children: [/*#__PURE__*/_jsx(SelectField, {
+              name: "flavorMultipleAdornments",
+              label: "Flavor with adornments",
+              options: options,
+              fullWidth: true,
+              componentsProps: {
+                finalFormSelect: {
+                  startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                    position: "start",
+                    children: /*#__PURE__*/_jsx(Account, {})
+                  })
+                }
+              }
+            }), /*#__PURE__*/_jsx(SelectField, {
+              name: "flavorWithCustomOptionsRendering",
+              label: "Flavor with adornments",
+              fullWidth: true,
+              componentsProps: {
+                finalFormSelect: {
+                  renderValue: function renderValue(value) {
+                    var _options$find;
+                    return (_options$find = options.find(function (option) {
+                      return option.value === value;
+                    })) === null || _options$find === void 0 ? void 0 : _options$find.label;
+                  }
+                }
+              },
+              children: options.map(function (option) {
+                return /*#__PURE__*/_jsxs(MenuItem, {
+                  value: option.value,
+                  children: [/*#__PURE__*/_jsx(Checkbox, {
+                    checked: option.value === values.flavorWithCustomOptionsRendering
+                  }), /*#__PURE__*/_jsx(ListItemText, {
+                    primary: option.label,
+                    secondary: "The value is ".concat(option.value)
+                  }), /*#__PURE__*/_jsx(ListItemIcon, {
+                    children: /*#__PURE__*/_jsx(Account, {})
+                  })]
+                }, option.value);
+              })
+            }), /*#__PURE__*/_jsx(Box, {
+              component: "pre",
+              children: JSON.stringify({
+                flavorMultipleAdornments: values.flavorMultipleAdornments,
+                flavorWithCustomOptionsRendering: values.flavorWithCustomOptionsRendering
+              }, null, 2)
+            })]
+          })]
+        });
+      }
+    })
+  });
+};

package/lib/form/__stories__/SelectField.stories.js

@@ -0,0 +1,100 @@
+import { Lock } from "@comet/admin-icons";
+import { InputAdornment } from "@mui/material";
+import { Alert } from "../../alert/Alert";
+import { FinalForm } from "../../FinalForm";
+import { SelectField } from "../../form/fields/SelectField";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var config = {
+  component: SelectField,
+  title: "components/form/SelectField"
+};
+export default config;
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      initialValues: {
+        type: "value-1"
+      },
+      mode: "edit",
+      onSubmit: function onSubmit() {
+        // not handled
+      },
+      subscription: {
+        values: true
+      },
+      children: function children(_ref) {
+        var values = _ref.values;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(SelectField, {
+            name: "type",
+            label: "SelectField",
+            fullWidth: true,
+            variant: "horizontal",
+            options: [{
+              value: "value-1",
+              label: "Value 1"
+            }, {
+              value: "value-2",
+              label: "Value 2"
+            }, {
+              value: "value-3",
+              label: "Value 3"
+            }]
+          }), /*#__PURE__*/_jsx(Alert, {
+            title: "FormState",
+            children: /*#__PURE__*/_jsx("pre", {
+              children: JSON.stringify(values, null, 2)
+            })
+          })]
+        });
+      }
+    });
+  }
+};
+export var Readonly = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      initialValues: {
+        type: "value-1"
+      },
+      mode: "edit",
+      onSubmit: function onSubmit() {
+        // not handled
+      },
+      subscription: {
+        values: true
+      },
+      children: function children(_ref2) {
+        var values = _ref2.values;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(SelectField, {
+            name: "type",
+            label: "SelectField",
+            fullWidth: true,
+            variant: "horizontal",
+            disabled: true,
+            endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+              position: "end",
+              children: /*#__PURE__*/_jsx(Lock, {})
+            }),
+            options: [{
+              value: "value-1",
+              label: "Value 1"
+            }, {
+              value: "value-2",
+              label: "Value 2"
+            }, {
+              value: "value-3",
+              label: "Value 3"
+            }]
+          }), /*#__PURE__*/_jsx(Alert, {
+            title: "FormState",
+            children: /*#__PURE__*/_jsx("pre", {
+              children: JSON.stringify(values, null, 2)
+            })
+          })]
+        });
+      }
+    });
+  }
+};

package/lib/form/__stories__/ShowErrorStrategies.stories.js

@@ -0,0 +1,107 @@
+import { Stack, Typography } from "@mui/material";
+import { Button } from "../../common/buttons/Button";
+import { FinalForm } from "../../FinalForm";
+import { Field } from "../../form/Field";
+import { FinalFormInput } from "../../form/FinalFormInput";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function validate(_ref) {
+  var foo = _ref.foo,
+    bar = _ref.bar;
+  var errors = {};
+  if (foo !== "foo") {
+    errors.foo = "".concat(foo, " is not foo");
+  }
+  if (bar !== "bar") {
+    errors.bar = "".concat(bar, " is not bar");
+  }
+  return errors;
+}
+var strategies = {
+  always: function always() {
+    return true;
+  },
+  "on-blur": function onBlur(_ref2) {
+    var touched = _ref2.touched;
+    return !!touched;
+  },
+  "while-typing": function whileTyping(_ref3) {
+    var touched = _ref3.touched,
+      active = _ref3.active;
+    return !!(touched || active);
+  },
+  "when-submitted": function whenSubmitted(_ref4) {
+    var submitFailed = _ref4.submitFailed;
+    return !!submitFailed;
+  }
+};
+export default {
+  title: "components/form",
+  args: {
+    strategy: "when-submitted"
+  },
+  argTypes: {
+    strategy: {
+      name: "Show Error Strategy",
+      control: "select",
+      options: ["always", "on-blur", "while-typing", "when-submitted"]
+    }
+  }
+};
+export var ShowErrorStrategies = {
+  render: function render(_ref5) {
+    var strategy = _ref5.strategy;
+    var initialValues = {
+      foo: "foo",
+      bar: ""
+    };
+    var shouldShowFieldError = strategies[strategy];
+    return /*#__PURE__*/_jsx(FinalForm, {
+      mode: "edit",
+      onSubmit: function onSubmit() {
+        // noop
+      },
+      initialValues: initialValues,
+      validate: validate,
+      formContext: {
+        shouldShowFieldError: shouldShowFieldError
+      },
+      children: function children(_ref6) {
+        var form = _ref6.form;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            children: "Demonstrates different implementations of \"shouldShowFieldError\". Use Knob to switch strategies."
+          }), /*#__PURE__*/_jsxs(Typography, {
+            variant: "h3",
+            children: ["Show-Error-Strategy: \"", strategy, "\""]
+          }), /*#__PURE__*/_jsx(Field, {
+            label: "Foo",
+            name: "foo",
+            component: FinalFormInput,
+            fullWidth: true
+          }), /*#__PURE__*/_jsx(Field, {
+            label: "Bar",
+            name: "bar",
+            component: FinalFormInput,
+            fullWidth: true
+          }), /*#__PURE__*/_jsxs(Stack, {
+            direction: "row",
+            spacing: 2,
+            children: [/*#__PURE__*/_jsx(Button, {
+              type: "submit",
+              children: "Submit"
+            }), /*#__PURE__*/_jsx(Button, {
+              variant: "secondary",
+              onClick: function onClick() {
+                form.reset();
+                form.resetFieldState("foo");
+                form.resetFieldState("bar");
+              },
+              children: "Reset form and field state"
+            })]
+          })]
+        });
+      }
+    });
+  }
+};

package/lib/form/__stories__/SingleTextField.stories.js

@@ -0,0 +1,108 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { Search } from "@comet/admin-icons";
+import { Card, CardContent, Checkbox, FormControlLabel, Grid, InputAdornment, InputBase, Typography } from "@mui/material";
+import { useState } from "react";
+import { FieldContainer } from "../../form/FieldContainer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/form"
+};
+export var SingleTextField = {
+  render: function render() {
+    var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchString1 = _useState2[0],
+      setSearchString1 = _useState2[1];
+    var _useState3 = useState(""),
+      _useState4 = _slicedToArray(_useState3, 2),
+      searchString2 = _useState4[0],
+      setSearchString2 = _useState4[1];
+    var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      checkboxValue = _useState6[0],
+      setCheckboxValue = _useState6[1];
+    return /*#__PURE__*/_jsxs("div", {
+      style: {
+        width: 400
+      },
+      children: [/*#__PURE__*/_jsxs(Grid, {
+        container: true,
+        spacing: 4,
+        children: [/*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(Card, {
+            variant: "outlined",
+            children: /*#__PURE__*/_jsxs(CardContent, {
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "h4",
+                gutterBottom: true,
+                children: "Single TextField outside of form"
+              }), /*#__PURE__*/_jsx(FieldContainer, {
+                fullWidth: true,
+                children: /*#__PURE__*/_jsx(InputBase, {
+                  autoFocus: true,
+                  placeholder: "Search...",
+                  startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                    position: "start",
+                    children: /*#__PURE__*/_jsx(Search, {})
+                  }),
+                  onChange: function onChange(e) {
+                    return setSearchString1(e.target.value);
+                  },
+                  value: searchString1
+                })
+              })]
+            })
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          size: 12,
+          children: /*#__PURE__*/_jsx(Card, {
+            variant: "outlined",
+            children: /*#__PURE__*/_jsxs(CardContent, {
+              children: [/*#__PURE__*/_jsx(Typography, {
+                variant: "h4",
+                gutterBottom: true,
+                children: "With Checkbox"
+              }), /*#__PURE__*/_jsx(FieldContainer, {
+                fullWidth: true,
+                children: /*#__PURE__*/_jsx(InputBase, {
+                  placeholder: "Search...",
+                  startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                    position: "start",
+                    children: /*#__PURE__*/_jsx(Search, {})
+                  }),
+                  onChange: function onChange(e) {
+                    return setSearchString2(e.target.value);
+                  },
+                  value: searchString2
+                })
+              }), /*#__PURE__*/_jsx(FormControlLabel, {
+                control: /*#__PURE__*/_jsx(Checkbox, {
+                  checked: checkboxValue,
+                  onChange: function onChange(e) {
+                    return setCheckboxValue(e.target.checked);
+                  }
+                }),
+                label: "Additional Setting"
+              })]
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx("pre", {
+          children: JSON.stringify({
+            searchString1: searchString1,
+            searchString2: searchString2,
+            checkboxValue: checkboxValue
+          }, undefined, 2)
+        })
+      })]
+    });
+  },
+  name: "Single TextField"
+};

package/lib/form/__stories__/StackInForm.stories.js

@@ -0,0 +1,53 @@
+import { FinalForm } from "../../FinalForm";
+import { Field } from "../../form/Field";
+import { FinalFormInput } from "../../form/FinalFormInput";
+import { StackBreadcrumbs } from "../../stack/breadcrumbs/StackBreadcrumbs";
+import { StackPage } from "../../stack/Page";
+import { Stack } from "../../stack/Stack";
+import { StackLink } from "../../stack/StackLink";
+import { StackSwitch } from "../../stack/Switch";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/form"
+};
+export var StackInForm = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      mode: "edit",
+      onSubmit: function onSubmit(values) {
+        alert(JSON.stringify(values));
+      },
+      initialValues: {
+        foo: "foo",
+        bar: "bar"
+      },
+      children: function children() {
+        return /*#__PURE__*/_jsxs(Stack, {
+          topLevelTitle: "Stack",
+          children: [/*#__PURE__*/_jsx(StackBreadcrumbs, {}), /*#__PURE__*/_jsxs(StackSwitch, {
+            children: [/*#__PURE__*/_jsxs(StackPage, {
+              name: "page1",
+              children: [/*#__PURE__*/_jsx(Field, {
+                label: "Foo",
+                name: "foo",
+                component: FinalFormInput
+              }), /*#__PURE__*/_jsx(StackLink, {
+                pageName: "page2",
+                payload: "xx",
+                children: "go to page2"
+              })]
+            }), /*#__PURE__*/_jsx(StackPage, {
+              name: "page2",
+              children: /*#__PURE__*/_jsx(Field, {
+                label: "Bar",
+                name: "bar",
+                component: FinalFormInput
+              })
+            })]
+          })]
+        });
+      }
+    });
+  },
+  name: "StackInForm"
+};

package/lib/form/__stories__/SubmitErrors.stories.js

@@ -0,0 +1,90 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { Box, Card, CardContent } from "@mui/material";
+import { FinalForm } from "../../FinalForm";
+import { FinalFormSaveCancelButtonsLegacy } from "../../FinalFormSaveCancelButtonsLegacy";
+import { Field } from "../../form/Field";
+import { FinalFormInput } from "../../form/FinalFormInput";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var onSubmit = function onSubmit(_ref) {
+  var foo = _ref.foo,
+    bar = _ref.bar;
+  var errors = [];
+  if (foo !== "foo") {
+    errors.push({
+      foo: "".concat(foo, " is not foo")
+    });
+  }
+  if (bar !== "bar") {
+    errors.push({
+      bar: "".concat(bar, " is not bar")
+    });
+  }
+  return Promise.reject({
+    errors: errors
+  });
+};
+var resolveSubmitErrors = function resolveSubmitErrors(error) {
+  // error = { errors: [{fieldName: errorMessage},...] }
+  var result = {};
+  if (error) {
+    var _iterator = _createForOfIteratorHelper(error.errors),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var submitError = _step.value;
+        Object.assign(result, submitError);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+
+  // result = {fieldName: errorMessage, ...}
+  return result;
+};
+export default {
+  title: "components/form"
+};
+export var SubmitErrors = {
+  render: function render() {
+    var initialValues = {
+      foo: "foo"
+    };
+    return /*#__PURE__*/_jsxs(FinalForm, {
+      mode: "edit",
+      onSubmit: onSubmit,
+      initialValues: initialValues,
+      resolveSubmitErrors: resolveSubmitErrors,
+      children: [/*#__PURE__*/_jsx(Box, {
+        marginBottom: 4,
+        children: /*#__PURE__*/_jsx(Card, {
+          variant: "outlined",
+          children: /*#__PURE__*/_jsx(CardContent, {
+            children: /*#__PURE__*/_jsx(Field, {
+              label: "Foo",
+              name: "foo",
+              component: FinalFormInput
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        marginBottom: 4,
+        children: /*#__PURE__*/_jsx(Card, {
+          variant: "outlined",
+          children: /*#__PURE__*/_jsx(CardContent, {
+            children: /*#__PURE__*/_jsx(Field, {
+              label: "Bar",
+              name: "bar",
+              component: FinalFormInput
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx(FinalFormSaveCancelButtonsLegacy, {})]
+    });
+  },
+  name: "SubmitErrors"
+};