@insticc/genericform 1.0.11 → 2.0.0

package/build/Demo.js

@@ -0,0 +1,559 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _index = _interopRequireDefault(require("./index"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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; } /**
+ * @file Demo.jsx
+ * Full GenericForm demo — every field type + every key scenario.
+ * 
+ * Mount anywhere:  <Demo />
+ */
+// ── Shared option sets ────────────────────────────────────────────────────────
+var COUNTRIES = [{
+  value: "PT",
+  text: "Portugal"
+}, {
+  value: "ES",
+  text: "Spain"
+}, {
+  value: "FR",
+  text: "France"
+}, {
+  value: "DE",
+  text: "Germany"
+}];
+var ROLES = [{
+  id: "admin",
+  label: "Administrator"
+}, {
+  id: "editor",
+  label: "Editor"
+}, {
+  id: "viewer",
+  label: "Viewer"
+}];
+var TAGS = [{
+  name: "react",
+  text: "React"
+}, {
+  name: "vue",
+  text: "Vue"
+}, {
+  name: "svelte",
+  text: "Svelte"
+}, {
+  name: "solid",
+  text: "SolidJS"
+}];
+
+// ── Demo ──────────────────────────────────────────────────────────────────────
+var Demo = function Demo() {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    lastSubmit = _useState2[0],
+    setLastSubmit = _useState2[1];
+  var _useState3 = (0, _react.useState)([{
+      title: "Alice Johnson",
+      description: "alice@example.com"
+    }, {
+      title: "Bob Smith",
+      description: "bob@example.com"
+    }]),
+    _useState4 = _slicedToArray(_useState3, 1),
+    searchResults = _useState4[0];
+
+  // Checkbox group state (controlled externally, as the field expects)
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    interests = _useState6[0],
+    setInterests = _useState6[1];
+  var fields = [
+  // ── Section header ─────────────────────────────────────────────────────
+  {
+    name: "sep1",
+    type: "separator"
+  }, {
+    name: "lbl1",
+    type: "label",
+    displayName: "① Text inputs"
+  }, {
+    name: "firstName",
+    type: "text",
+    displayName: "First name",
+    required: false,
+    inline: true,
+    value: ""
+  }, {
+    name: "lastName",
+    type: "text",
+    displayName: "Last name",
+    required: false,
+    inline: true,
+    value: ""
+  }, {
+    name: "email",
+    type: "email",
+    displayName: "Email",
+    required: false,
+    value: "",
+    validate: function validate(v) {
+      return v && !v.includes("@demo") ? "Use a @demo address for this example" : null;
+    }
+  }, {
+    name: "age",
+    type: "int",
+    displayName: "Age",
+    value: "",
+    min: 0,
+    max: 120
+  }, {
+    name: "score",
+    type: "number",
+    displayName: "Score (0–100)",
+    value: "",
+    min: 0,
+    max: 100,
+    step: 0.5
+  }, {
+    name: "bio",
+    type: "textArea",
+    displayName: "Biography",
+    value: "",
+    rows: 4,
+    maxLength: 300,
+    tooltip: "Max 300 characters"
+  },
+  // ── Select ────────────────────────────────────────────────────────────
+  {
+    name: "sep2",
+    type: "separator"
+  }, {
+    name: "lbl2",
+    type: "label",
+    displayName: "② Select / dropdown"
+  },
+  // select with { value, text } options — returns full object
+  {
+    name: "country",
+    type: "select",
+    displayName: "Country (value/text)",
+    required: false,
+    value: "",
+    options: COUNTRIES,
+    onChange: function onChange(val, fd) {
+      return console.log("country full option →", fd);
+    }
+  },
+  // select with { id, label } options
+  {
+    name: "role",
+    type: "select",
+    displayName: "Role (id/label)",
+    value: "",
+    options: ROLES
+  },
+  // select with { name, text } options
+  {
+    name: "framework",
+    type: "select",
+    displayName: "Framework (name/text)",
+    value: "",
+    options: TAGS
+  },
+  // multi-select
+  {
+    name: "langs",
+    type: "multipleDropdown",
+    displayName: "Languages (multi)",
+    value: [],
+    options: [{
+      value: "js",
+      text: "JavaScript"
+    }, {
+      value: "ts",
+      text: "TypeScript"
+    }, {
+      value: "py",
+      text: "Python"
+    }, {
+      value: "go",
+      text: "Go"
+    }]
+  },
+  // ── Date / time ───────────────────────────────────────────────────────
+  {
+    name: "sep3",
+    type: "separator"
+  }, {
+    name: "lbl3",
+    type: "label",
+    displayName: "③ Date / time pickers"
+  }, {
+    name: "dob",
+    type: "date",
+    displayName: "Date of birth",
+    value: ""
+  }, {
+    name: "meeting",
+    type: "datetime",
+    displayName: "Meeting at",
+    value: ""
+  }, {
+    name: "alarm",
+    type: "time",
+    displayName: "Alarm time",
+    value: ""
+  }, {
+    name: "startYear",
+    type: "year",
+    displayName: "Start year",
+    value: "",
+    minYear: 2000,
+    maxYear: 2030
+  },
+  // ── Boolean controls ──────────────────────────────────────────────────
+  {
+    name: "sep4",
+    type: "separator"
+  }, {
+    name: "lbl4",
+    type: "label",
+    displayName: "④ Boolean controls"
+  }, {
+    name: "terms",
+    type: "checkbox",
+    displayName: "I accept the terms",
+    value: false,
+    required: false
+  }, {
+    name: "newsletter",
+    type: "toggle",
+    displayName: "Subscribe to newsletter",
+    value: false
+  },
+  // ── Radio ─────────────────────────────────────────────────────────────
+  {
+    name: "sep5",
+    type: "separator"
+  }, {
+    name: "lbl5",
+    type: "label",
+    displayName: "⑤ Radio buttons"
+  },
+  // Radio group (controlled by options)
+  {
+    name: "priority",
+    type: "radioGroup",
+    displayName: "Priority",
+    value: "medium",
+    options: [{
+      value: "low",
+      text: "Low"
+    }, {
+      value: "medium",
+      text: "Medium"
+    }, {
+      value: "high",
+      text: "High"
+    }]
+  },
+  // Radio group inline
+  {
+    name: "size",
+    type: "radioGroupInline",
+    displayName: "Size",
+    value: "md",
+    options: [{
+      value: "sm",
+      text: "Small"
+    }, {
+      value: "md",
+      text: "Medium"
+    }, {
+      value: "lg",
+      text: "Large"
+    }]
+  },
+  // ── Checkbox groups ───────────────────────────────────────────────────
+  {
+    name: "sep6",
+    type: "separator"
+  }, {
+    name: "lbl6",
+    type: "label",
+    displayName: "⑥ Checkbox groups"
+  },
+  // checkboxGroup — option-level onChange
+  {
+    name: "perms",
+    type: "checkboxGroup",
+    displayName: "Permissions",
+    value: ["read"],
+    options: [{
+      name: "read",
+      label: "Read"
+    }, {
+      name: "write",
+      label: "Write"
+    }, {
+      name: "delete",
+      label: "Delete"
+    }]
+  }, {
+    name: "interests",
+    type: "checkboxGroup",
+    displayName: "Interests",
+    value: [],
+    options: [{
+      name: "tech",
+      label: "Technology"
+    }, {
+      name: "sports",
+      label: "Sports"
+    }, {
+      name: "music",
+      label: "Music"
+    }]
+    // onOptionChange: setInterests // !warnnig updating state cause re-rendering
+  },
+  // ── JSON ──────────────────────────────────────────────────────────────
+  {
+    name: "sep7",
+    type: "separator"
+  }, {
+    name: "lbl7",
+    type: "label",
+    displayName: "⑦ JSON editor"
+  }, {
+    name: "config",
+    type: "json",
+    displayName: "Config object",
+    datatype: "object",
+    value: "",
+    allowModeSwitch: false,
+    rows: 6,
+    showHelp: true,
+    helpText: "Enter a valid JSON object"
+  }, {
+    name: "tags",
+    type: "json",
+    displayName: "Tags (string)",
+    datatype: "string",
+    value: "",
+    allowModeSwitch: true,
+    rows: 4
+  },
+  // ── Accordion ─────────────────────────────────────────────────────────
+  {
+    name: "sep8",
+    type: "separator"
+  }, {
+    name: "lbl8",
+    type: "label",
+    displayName: "⑧ Accordion"
+  }, {
+    name: "advanced",
+    type: "accordion",
+    defaultOpen: false,
+    sections: [{
+      title: "Advanced settings",
+      icon: "⚙️",
+      content: /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 8
+        }
+      }, /*#__PURE__*/React.createElement("label", {
+        style: {
+          fontSize: "0.9rem"
+        }
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        style: {
+          marginRight: 6
+        }
+      }), "Enable experimental features"), /*#__PURE__*/React.createElement("label", {
+        style: {
+          fontSize: "0.9rem"
+        }
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        style: {
+          marginRight: 6
+        }
+      }), "Verbose logging"))
+    }, {
+      title: "Danger zone",
+      icon: "⚠️",
+      content: /*#__PURE__*/React.createElement("p", {
+        style: {
+          color: "#db2828",
+          fontSize: "0.9rem"
+        }
+      }, "Destructive actions go here.")
+    }]
+  },
+  // ── Custom component ──────────────────────────────────────────────────
+  {
+    name: "sep9",
+    type: "separator"
+  }, {
+    name: "lbl9",
+    type: "label",
+    displayName: "⑨ Custom component"
+  }, {
+    name: "avatar",
+    type: "component",
+    displayName: "Avatar preview",
+    component: /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 64,
+        height: 64,
+        borderRadius: "50%",
+        background: "#2185d0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#fff",
+        fontSize: 24,
+        fontWeight: 600
+      }
+    }, "A")
+  },
+  // ── Conditional (hide as function) ────────────────────────────────────
+  {
+    name: "sep10",
+    type: "separator"
+  }, {
+    name: "lbl10",
+    type: "label",
+    displayName: "⑩ Conditional visibility (hide a field when newsletter is off)"
+  }, {
+    name: "newsletterFreq",
+    type: "radioGroupInline",
+    displayName: "Frequency",
+    value: "weekly",
+    options: [{
+      value: "daily",
+      text: "Daily"
+    }, {
+      value: "weekly",
+      text: "Weekly"
+    }, {
+      value: "monthly",
+      text: "Monthly"
+    }],
+    hide: function hide(formData) {
+      return !formData.newsletter;
+    }
+  },
+  // ── Validation showcase ───────────────────────────────────────────────
+  {
+    name: "sep11",
+    type: "separator"
+  }, {
+    name: "lbl11",
+    type: "label",
+    displayName: "⑪ Validation (minLength, maxLength, custom)"
+  }, {
+    name: "username",
+    type: "text",
+    displayName: "Username",
+    value: "",
+    required: false,
+    minLength: 3,
+    maxLength: 20,
+    tooltip: "3–20 characters, no spaces",
+    validate: function validate(v) {
+      return v && /\s/.test(v) ? "No spaces allowed" : null;
+    }
+  }, {
+    name: "website",
+    type: "text",
+    displayName: "Website URL",
+    value: "",
+    validate: function validate(v) {
+      return v && !v.startsWith("https://") ? "Must start with https://" : null;
+    }
+  }];
+
+  // ── Custom action buttons ──────────────────────────────────────────────────
+  var customActions = [{
+    label: "Reset",
+    className: "ufg-button-secondary",
+    onClick: function onClick() {
+      return alert("Reset clicked");
+    }
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 800,
+      margin: "2rem auto",
+      fontFamily: "sans-serif"
+    }
+  }, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      fontSize: "1.4rem",
+      marginBottom: "0.5rem"
+    }
+  }, "GenericForm \u2014 full demo"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      color: "#666",
+      marginBottom: "1.5rem",
+      fontSize: "0.9rem"
+    }
+  }, "Every field type, conditional visibility, validation, custom actions, and onSubmit."), /*#__PURE__*/React.createElement(_index["default"], {
+    title: "Demo form",
+    fields: fields,
+    submitText: "Submit demo",
+    cancelText: "Clear",
+    customActions: customActions,
+    validateOnChange: true,
+    validateOnSubmit: true,
+    onSubmit: function onSubmit(data) {
+      console.log("Submitted:", data);
+      setLastSubmit(data);
+    },
+    onCancel: function onCancel() {
+      return setLastSubmit(null);
+    }
+    // Date handlers
+    ,
+    onChangeTime: function onChangeTime(date, name) {
+      return console.log("date:", name, date);
+    },
+    onChangeYear: function onChangeYear(date, name) {
+      return console.log("year:", name, date);
+    }
+    // Search
+    ,
+    handleSearchChange: function handleSearchChange() {},
+    handleResultSelect: function handleResultSelect() {}
+  }), lastSubmit && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "2rem",
+      padding: "1rem",
+      background: "#f0f8f0",
+      borderRadius: 8,
+      border: "1px solid #b2dfb2"
+    }
+  }, /*#__PURE__*/React.createElement("strong", null, "Last submitted data:"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      marginTop: 8,
+      fontSize: "0.8rem",
+      overflow: "auto"
+    }
+  }, JSON.stringify(lastSubmit, null, 2))));
+};
+var _default = exports["default"] = Demo;