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

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

@@ -0,0 +1,188 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+import { Form } from "react-final-form";
+import { Button } from "../../common/buttons/Button";
+import { FinalFormAutocomplete } from "../../form/Autocomplete";
+import { Field } from "../../form/Field";
+import { FinalFormSelect } from "../../form/FinalFormSelect";
+import { useAsyncOptionsProps } from "../../hooks/useAsyncOptionsProps";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var options = [{
+  value: "chocolate",
+  label: "Chocolate"
+}, {
+  value: "strawberry",
+  label: "Strawberry"
+}, {
+  value: "vanilla",
+  label: "Vanilla"
+}];
+var initialValues = {
+  autocomplete: {
+    value: "strawberry",
+    label: "Strawberry"
+  },
+  autocompleteAsync: {
+    value: "strawberry",
+    label: "Strawberry"
+  },
+  select: {
+    value: "strawberry",
+    label: "Strawberry"
+  },
+  selectAsync: {
+    value: "strawberry",
+    label: "Strawberry"
+  },
+  selectAsyncMultiple: [{
+    value: "strawberry",
+    label: "Strawberry"
+  }, {
+    value: "chocolate",
+    label: "Chocolate"
+  }]
+};
+export default {
+  title: "components/form"
+};
+export var AutocompleteAsyncSelect = {
+  render: function render() {
+    var acAsyncProps = useAsyncOptionsProps(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            return _context.a(2, new Promise(function (resolve) {
+              return setTimeout(function () {
+                return resolve(options);
+              }, 500);
+            }));
+        }
+      }, _callee);
+    })));
+    var selectAsyncProps = useAsyncOptionsProps(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.n) {
+          case 0:
+            return _context2.a(2, new Promise(function (resolve) {
+              return setTimeout(function () {
+                return resolve(options);
+              }, 500);
+            }));
+        }
+      }, _callee2);
+    })));
+    var selectAsyncMultipleProps = useAsyncOptionsProps(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            return _context3.a(2, new Promise(function (resolve) {
+              return setTimeout(function () {
+                return resolve(options);
+              }, 500);
+            }));
+        }
+      }, _callee3);
+    })));
+    return /*#__PURE__*/_jsxs("div", {
+      style: {
+        maxWidth: "800px"
+      },
+      children: [/*#__PURE__*/_jsx("p", {
+        children: "FinalFormAutocomplete provides a select with a search field. It can also be used asynchronously with the useAsyncOptionsProps-Hook. It expects the value to be an object to be able to display the current value without having to load the async options."
+      }), /*#__PURE__*/_jsx("p", {
+        children: "Furthermore FinalFormSelect can also be used like FinalFormAutocomplete (e.g. when no search field is needed)."
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          width: "300px"
+        },
+        children: /*#__PURE__*/_jsx(Form, {
+          mode: "edit",
+          onSubmit: function onSubmit(values) {
+            alert(JSON.stringify(values, null, 4));
+          },
+          initialValues: initialValues,
+          render: function render(_ref4) {
+            var handleSubmit = _ref4.handleSubmit;
+            return /*#__PURE__*/_jsxs("form", {
+              onSubmit: handleSubmit,
+              children: [/*#__PURE__*/_jsx(Field, {
+                component: FinalFormAutocomplete,
+                getOptionLabel: function getOptionLabel(option) {
+                  return option.label;
+                },
+                getOptionSelected: function getOptionSelected(option, value) {
+                  return option.value === value.value;
+                },
+                options: options,
+                name: "autocomplete",
+                label: "Autocomplete",
+                fullWidth: true
+              }), /*#__PURE__*/_jsx(Field, _objectSpread(_objectSpread({
+                component: FinalFormAutocomplete
+              }, acAsyncProps), {}, {
+                getOptionLabel: function getOptionLabel(option) {
+                  return option.label;
+                },
+                getOptionSelected: function getOptionSelected(option, value) {
+                  return option.value === value.value;
+                },
+                name: "autocompleteAsync",
+                label: "AutocompleteAsync",
+                fullWidth: true
+              })), /*#__PURE__*/_jsx(Field, {
+                component: FinalFormSelect,
+                getOptionLabel: function getOptionLabel(option) {
+                  return option.label;
+                },
+                getOptionSelected: function getOptionSelected(option, value) {
+                  return option.value === value.value;
+                },
+                options: options,
+                name: "select",
+                label: "Select",
+                fullWidth: true
+              }), /*#__PURE__*/_jsx(Field, _objectSpread(_objectSpread({
+                component: FinalFormSelect,
+                getOptionLabel: function getOptionLabel(option) {
+                  return option.label;
+                },
+                getOptionSelected: function getOptionSelected(option, value) {
+                  return option.value === value.value;
+                }
+              }, selectAsyncProps), {}, {
+                name: "selectAsync",
+                label: "SelectAsync",
+                fullWidth: true
+              })), /*#__PURE__*/_jsx(Field, _objectSpread(_objectSpread({
+                component: FinalFormSelect,
+                getOptionLabel: function getOptionLabel(option) {
+                  return option.label;
+                },
+                getOptionSelected: function getOptionSelected(option, value) {
+                  return option.value === value.value;
+                }
+              }, selectAsyncMultipleProps), {}, {
+                name: "selectAsyncMultiple",
+                label: "SelectAsyncMultiple",
+                multiple: true,
+                fullWidth: true
+              })), /*#__PURE__*/_jsx(Button, {
+                type: "submit",
+                children: "Submit"
+              })]
+            });
+          }
+        })
+      })]
+    });
+  },
+  name: "Autocomplete / Async Select"
+};

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

@@ -0,0 +1,48 @@
+import { Alert } from "../../alert/Alert";
+import { FinalForm } from "../../FinalForm";
+import { AutocompleteField } from "../../form/fields/AutocompleteField";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var config = {
+  component: AutocompleteField,
+  title: "components/form/AutocompleteField"
+};
+export default config;
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      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(AutocompleteField, {
+            name: "value",
+            label: "Autocomplete Field",
+            fullWidth: true,
+            variant: "horizontal",
+            options: [{
+              label: "Option 1",
+              value: "option1"
+            }, {
+              label: "Option 2",
+              value: "option2"
+            }, {
+              label: "Option 3",
+              value: "option3"
+            }]
+          }), /*#__PURE__*/_jsx(Alert, {
+            title: "FormState",
+            children: /*#__PURE__*/_jsx("pre", {
+              children: JSON.stringify(values, null, 2)
+            })
+          })]
+        });
+      }
+    });
+  }
+};

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

@@ -0,0 +1,70 @@
+import { Card, CardContent, Grid } from "@mui/material";
+import { Form } from "react-final-form";
+import { FieldContainer } from "../../form/FieldContainer";
+import { CheckboxField } from "../../form/fields/CheckboxField";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/form"
+};
+export var Checkbox = function Checkbox() {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 600
+    },
+    children: /*#__PURE__*/_jsx(Form, {
+      initialValues: {
+        unchecked: false,
+        checked: true,
+        disabledUnchecked: false,
+        disabledChecked: true,
+        uncheckedSecondary: false,
+        checkedSecondary: true,
+        disabledUncheckedSecondary: false,
+        disabledCheckedSecondary: true
+      },
+      onSubmit: function onSubmit(values) {
+        //
+      },
+      render: function render(_ref) {
+        var handleSubmit = _ref.handleSubmit;
+        return /*#__PURE__*/_jsx("form", {
+          onSubmit: handleSubmit,
+          children: /*#__PURE__*/_jsx(Grid, {
+            container: true,
+            spacing: 4,
+            children: /*#__PURE__*/_jsx(Grid, {
+              size: 6,
+              children: /*#__PURE__*/_jsx(Card, {
+                variant: "outlined",
+                children: /*#__PURE__*/_jsx(CardContent, {
+                  children: /*#__PURE__*/_jsxs(FieldContainer, {
+                    label: "Checkboxes",
+                    children: [/*#__PURE__*/_jsx(CheckboxField, {
+                      name: "unchecked",
+                      label: "Unchecked",
+                      fullWidth: true
+                    }), /*#__PURE__*/_jsx(CheckboxField, {
+                      name: "checked",
+                      label: "Checked",
+                      fullWidth: true
+                    }), /*#__PURE__*/_jsx(CheckboxField, {
+                      name: "disabledUnchecked",
+                      label: "Disabled",
+                      fullWidth: true,
+                      disabled: true
+                    }), /*#__PURE__*/_jsx(CheckboxField, {
+                      name: "disabledChecked",
+                      label: "Disabled & Checked",
+                      fullWidth: true,
+                      disabled: true
+                    })]
+                  })
+                })
+              })
+            })
+          })
+        });
+      }
+    })
+  });
+};

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

@@ -0,0 +1,87 @@
+import { Stack } from "@mui/material";
+import { Alert } from "../../alert/Alert";
+import { FieldSet } from "../../common/FieldSet";
+import { FinalForm } from "../../FinalForm";
+import { CheckboxField } from "../../form/fields/CheckboxField";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var config = {
+  component: CheckboxField,
+  title: "components/form/CheckboxField"
+};
+export default config;
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      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(CheckboxField, {
+            name: "value",
+            label: "Checkbox Field",
+            fullWidth: true,
+            variant: "horizontal"
+          }), /*#__PURE__*/_jsx(Alert, {
+            title: "FormState",
+            children: /*#__PURE__*/_jsx("pre", {
+              children: JSON.stringify(values, null, 2)
+            })
+          })]
+        });
+      }
+    });
+  }
+};
+export var LayoutVariants = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      mode: "edit",
+      onSubmit: function onSubmit() {
+        // not handled
+      },
+      children: function children() {
+        return /*#__PURE__*/_jsxs(Stack, {
+          spacing: 5,
+          p: 5,
+          children: [/*#__PURE__*/_jsxs(FieldSet, {
+            title: "Single line CheckboxField",
+            children: [/*#__PURE__*/_jsx(CheckboxField, {
+              name: "singleLineHorizontal",
+              fieldLabel: "Single Line Horizontal",
+              label: "Hello Checkbox",
+              variant: "horizontal",
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(CheckboxField, {
+              name: "singleLineVertical",
+              fieldLabel: "Single Line Vertical",
+              label: "Hello Checkbox",
+              variant: "vertical",
+              fullWidth: true
+            })]
+          }), /*#__PURE__*/_jsxs(FieldSet, {
+            title: "Multi line CheckboxField",
+            children: [/*#__PURE__*/_jsx(CheckboxField, {
+              name: "multiLineHorizontal",
+              fieldLabel: "Multi Line Horizontal",
+              label: "Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.",
+              variant: "horizontal",
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(CheckboxField, {
+              name: "multiLineVertical",
+              fieldLabel: "Multi Line Vertical",
+              label: "Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.",
+              variant: "vertical",
+              fullWidth: true
+            })]
+          })]
+        });
+      }
+    });
+  }
+};

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

@@ -0,0 +1,172 @@
+import { Alert } from "../../alert/Alert";
+import { FieldSet } from "../../common/FieldSet";
+import { FinalForm } from "../../FinalForm";
+import { CheckboxListField } from "../../form/fields/CheckboxListField";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var config = {
+  component: CheckboxListField,
+  title: "components/form/CheckboxListField"
+};
+export default config;
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      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(CheckboxListField, {
+            options: [{
+              label: "Option 1",
+              value: "option1"
+            }, {
+              label: "Option 2",
+              value: "option2"
+            }, {
+              label: "Option 3",
+              value: "option3"
+            }],
+            name: "value",
+            label: "Checkbox List Field",
+            fullWidth: true,
+            variant: "horizontal"
+          }), /*#__PURE__*/_jsx(Alert, {
+            title: "FormState",
+            children: /*#__PURE__*/_jsx("pre", {
+              children: JSON.stringify(values, null, 2)
+            })
+          })]
+        });
+      }
+    });
+  }
+};
+var optionsWithShortNames = [{
+  label: "Option 1",
+  value: "option1"
+}, {
+  label: "[disabled] Option 2",
+  value: "option2",
+  disabled: true
+}, {
+  label: "Option 3",
+  value: "option3"
+}, {
+  label: "Option 4",
+  value: "option4"
+}, {
+  label: "Option 5",
+  value: "option5"
+}, {
+  label: "Option 6",
+  value: "option6"
+}, {
+  label: "Option 7",
+  value: "option7"
+}];
+var optionsWithLongNames = [{
+  label: "Donec sed odio dui.",
+  value: "donec"
+}, {
+  label: "[disabled] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
+  value: "lorem",
+  disabled: true
+}, {
+  label: "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
+  value: "duis"
+}, {
+  label: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.",
+  value: "aenean"
+}, {
+  label: "Donec id elit non mi porta gravida at eget metus.",
+  value: "donec-id"
+}, {
+  label: "Etiam porta sem malesuada magna mollis euismod.",
+  value: "etiam"
+}, {
+  label: "Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.",
+  value: "curabitur"
+}];
+export var LayoutVariants = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(FinalForm, {
+      mode: "edit",
+      onSubmit: function onSubmit() {
+        // not handled
+      },
+      children: function children() {
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(FieldSet, {
+            title: "Horizontal Field-Variant",
+            children: [/*#__PURE__*/_jsx(CheckboxListField, {
+              name: "horizontalRowShortOptions",
+              label: "Row Layout",
+              variant: "horizontal",
+              layout: "row",
+              options: optionsWithShortNames,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(CheckboxListField, {
+              name: "horizontalColumnShortOptions",
+              label: "Column Layout",
+              variant: "horizontal",
+              layout: "column",
+              options: optionsWithShortNames,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(CheckboxListField, {
+              name: "horizontalRowLongOptions",
+              label: "Row Layout",
+              variant: "horizontal",
+              layout: "row",
+              options: optionsWithLongNames,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(CheckboxListField, {
+              name: "horizontalColumnLongOptions",
+              label: "Column Layout",
+              variant: "horizontal",
+              layout: "column",
+              options: optionsWithLongNames,
+              fullWidth: true
+            })]
+          }), /*#__PURE__*/_jsxs(FieldSet, {
+            title: "Vertical Field-Variant",
+            children: [/*#__PURE__*/_jsx(CheckboxListField, {
+              name: "verticalRowShortOptions",
+              label: "Row Layout",
+              variant: "vertical",
+              layout: "row",
+              options: optionsWithShortNames,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(CheckboxListField, {
+              name: "verticalColumnShortOptions",
+              label: "Column Layout",
+              variant: "vertical",
+              layout: "column",
+              options: optionsWithShortNames,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(CheckboxListField, {
+              name: "verticalRowLongOptions",
+              label: "Row Layout",
+              variant: "vertical",
+              layout: "row",
+              options: optionsWithLongNames,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(CheckboxListField, {
+              name: "verticalColumnLongOptions",
+              label: "Column Layout",
+              variant: "vertical",
+              layout: "column",
+              options: optionsWithLongNames,
+              fullWidth: true
+            })]
+          })]
+        });
+      }
+    });
+  }
+};

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

@@ -0,0 +1,78 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Master } from "@comet/admin-icons";
+import { Box, Card, CardContent } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { useFormState } from "react-final-form";
+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 } from "react/jsx-runtime";
+var StyledButton = /*#__PURE__*/styled(Button, process.env.NODE_ENV === "production" ? {
+  target: "e30wl2v0"
+} : {
+  target: "e30wl2v0",
+  label: "StyledButton"
+})(process.env.NODE_ENV === "production" ? {
+  name: "4g6iwk",
+  styles: "text-transform:capitalize;background-color:#006699;color:white;&:disabled{color:lightgrey;background-color:slategrey;}&:hover{background-color:#006699;}"
+} : {
+  name: "4g6iwk",
+  styles: "text-transform:capitalize;background-color:#006699;color:white;&:disabled{color:lightgrey;background-color:slategrey;}&:hover{background-color:#006699;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9mb3JtL19fc3Rvcmllc19fL0N1c3RvbUJ1dHRvbnMuc3Rvcmllcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVW1DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9mb3JtL19fc3Rvcmllc19fL0N1c3RvbUJ1dHRvbnMuc3Rvcmllcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBNYXN0ZXIgfSBmcm9tIFwiQGNvbWV0L2FkbWluLWljb25zXCI7XG5pbXBvcnQgeyBCb3gsIENhcmQsIENhcmRDb250ZW50IH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IHN0eWxlZCB9IGZyb20gXCJAbXVpL21hdGVyaWFsL3N0eWxlc1wiO1xuaW1wb3J0IHsgdXNlRm9ybVN0YXRlIH0gZnJvbSBcInJlYWN0LWZpbmFsLWZvcm1cIjtcblxuaW1wb3J0IHsgQnV0dG9uIH0gZnJvbSBcIi4uLy4uL2NvbW1vbi9idXR0b25zL0J1dHRvblwiO1xuaW1wb3J0IHsgRmluYWxGb3JtIH0gZnJvbSBcIi4uLy4uL0ZpbmFsRm9ybVwiO1xuaW1wb3J0IHsgRmllbGQgfSBmcm9tIFwiLi4vLi4vZm9ybS9GaWVsZFwiO1xuaW1wb3J0IHsgRmluYWxGb3JtSW5wdXQgfSBmcm9tIFwiLi4vLi4vZm9ybS9GaW5hbEZvcm1JbnB1dFwiO1xuXG5jb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uKWBcbiAgICB0ZXh0LXRyYW5zZm9ybTogY2FwaXRhbGl6ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA2Njk5O1xuICAgIGNvbG9yOiB3aGl0ZTtcblxuICAgICY6ZGlzYWJsZWQge1xuICAgICAgICBjb2xvcjogbGlnaHRncmV5O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBzbGF0ZWdyZXk7XG4gICAgfVxuXG4gICAgJjpob3ZlciB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMwMDY2OTk7XG4gICAgfVxuYDtcblxuY29uc3QgQ3VzdG9tQnV0dG9ucyA9ICgpID0+IHtcbiAgICBjb25zdCB7IHZhbHVlcywgcHJpc3RpbmUsIGhhc1ZhbGlkYXRpb25FcnJvcnMsIHN1Ym1pdHRpbmcgfSA9IHVzZUZvcm1TdGF0ZSgpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPFN0eWxlZEJ1dHRvblxuICAgICAgICAgICAgc3RhcnRJY29uPXs8TWFzdGVyIC8+fVxuICAgICAgICAgICAgdmFyaWFudD1cInRleHREYXJrXCJcbiAgICAgICAgICAgIGRpc2FibGVkPXtwcmlzdGluZSB8fCBoYXNWYWxpZGF0aW9uRXJyb3JzIHx8IHN1Ym1pdHRpbmd9XG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDdXN0b21CdXR0b25DbGlja31cbiAgICAgICAgPlxuICAgICAgICAgICAge3ByaXN0aW5lID8gXCJQbGVhc2UgZmlsbCBvdXQgdGhlIGZvcm1cIiA6IFwiQ2xpY2sgTWUgLSBJJ20gYSBDdXN0b20gYnV0dG9uXCJ9XG4gICAgICAgIDwvU3R5bGVkQnV0dG9uPlxuICAgICk7XG5cbiAgICBmdW5jdGlvbiBoYW5kbGVDdXN0b21CdXR0b25DbGljaygpIHtcbiAgICAgICAgd2luZG93LmFsZXJ0KGBGb3JtIHZhbHVlczogJHtKU09OLnN0cmluZ2lmeSh2YWx1ZXMpfWApO1xuICAgIH1cbn07XG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgICB0aXRsZTogXCJjb21wb25lbnRzL2Zvcm1cIixcbn07XG5cbmV4cG9ydCBjb25zdCBfQ3VzdG9tQnV0dG9ucyA9IHtcbiAgICByZW5kZXI6ICgpID0+IHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgIDxkaXYgc3R5bGU9e3sgd2lkdGg6IDMwMCB9fT5cbiAgICAgICAgICAgICAgICA8RmluYWxGb3JtXG4gICAgICAgICAgICAgICAgICAgIG1vZGU9XCJlZGl0XCJcbiAgICAgICAgICAgICAgICAgICAgb25TdWJtaXQ9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIC8vIGFkZCB5b3VyIGZvcm0tc3VibWl0IGZ1bmN0aW9uIGhlcmVcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIDxDYXJkIHZhcmlhbnQ9XCJvdXRsaW5lZFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPENhcmRDb250ZW50PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxGaWVsZCBsYWJlbD1cIkZvb1wiIG5hbWU9XCJmb29cIiBjb21wb25lbnQ9e0ZpbmFsRm9ybUlucHV0fSBmdWxsV2lkdGggLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8RmllbGQgbGFiZWw9XCJCYXJcIiBuYW1lPVwiYmFyXCIgY29tcG9uZW50PXtGaW5hbEZvcm1JbnB1dH0gZnVsbFdpZHRoIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L0NhcmRDb250ZW50PlxuICAgICAgICAgICAgICAgICAgICA8L0NhcmQ+XG4gICAgICAgICAgICAgICAgICAgIDxCb3ggcGFkZGluZ1RvcD17NH0+XG4gICAgICAgICAgICAgICAgICAgICAgICA8Q3VzdG9tQnV0dG9ucyAvPlxuICAgICAgICAgICAgICAgICAgICA8L0JveD5cbiAgICAgICAgICAgICAgICA8L0ZpbmFsRm9ybT5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICApO1xuICAgIH0sXG5cbiAgICBuYW1lOiBcIkN1c3RvbUJ1dHRvbnNcIixcbn07XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var CustomButtons = function CustomButtons() {
+  var _useFormState = useFormState(),
+    values = _useFormState.values,
+    pristine = _useFormState.pristine,
+    hasValidationErrors = _useFormState.hasValidationErrors,
+    submitting = _useFormState.submitting;
+  return /*#__PURE__*/_jsx(StyledButton, {
+    startIcon: /*#__PURE__*/_jsx(Master, {}),
+    variant: "textDark",
+    disabled: pristine || hasValidationErrors || submitting,
+    onClick: handleCustomButtonClick,
+    children: pristine ? "Please fill out the form" : "Click Me - I'm a Custom button"
+  });
+  function handleCustomButtonClick() {
+    window.alert("Form values: ".concat(JSON.stringify(values)));
+  }
+};
+export default {
+  title: "components/form"
+};
+export var _CustomButtons = {
+  render: function render() {
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 300
+      },
+      children: /*#__PURE__*/_jsxs(FinalForm, {
+        mode: "edit",
+        onSubmit: function onSubmit() {
+          // add your form-submit function here
+        },
+        children: [/*#__PURE__*/_jsx(Card, {
+          variant: "outlined",
+          children: /*#__PURE__*/_jsxs(CardContent, {
+            children: [/*#__PURE__*/_jsx(Field, {
+              label: "Foo",
+              name: "foo",
+              component: FinalFormInput,
+              fullWidth: true
+            }), /*#__PURE__*/_jsx(Field, {
+              label: "Bar",
+              name: "bar",
+              component: FinalFormInput,
+              fullWidth: true
+            })]
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          paddingTop: 4,
+          children: /*#__PURE__*/_jsx(CustomButtons, {})
+        })]
+      })
+    });
+  },
+  name: "CustomButtons"
+};