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

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

@@ -1,187 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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"
-};