@insticc/genericform 1.0.10 → 2.0.0

package/package.json

@@ -1,45 +1,59 @@
 {
   "name": "@insticc/genericform",
-  "version": "1.0.10",
-  "description": "a generic form with various types of fields",
+  "version": "2.0.0",
+  "description": "A generic form with a comprehensive set of field types, validation, and external state management",
   "main": "build/index.js",
   "scripts": {
     "build": "babel src -d build --copy-files"
   },
   "repository": {
     "type": "git",
-    "url": "https://set1.insticc.org/Bonobo.Git.Server/GenericForm.git"
+    "url": "https://gitlab.insticc.dev/npm-registry/genericform.git"
   },
   "keywords": [
     "generic",
-    "form"
+    "form",
+    "react",
+    "validation",
+    "fields"
   ],
-  "author": "Bernardo Lagos",
+  "author": "Mário Silva",
   "license": "ISC",
   "dependencies": {
+    "moment": "^2.30.1",
+    "prop-types": "^15.8.1",
+    "react-datetime": "^3.2.0"
+  },
+  "peerDependencies": {
     "bootstrap": "^5.3.3",
-    "moment": "^2.22.2",
-    "prop-types": "^15.6.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
-    "react-datetime": "^3.2.0",
     "react-dom": "^18.2.0",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5"
   },
+  "peerDependenciesMeta": {
+    "bootstrap": {
+      "optional": false
+    },
+    "react-bootstrap": {
+      "optional": true
+    },
+    "semantic-ui-css": {
+      "optional": false
+    },
+    "semantic-ui-react": {
+      "optional": false
+    }
+  },
   "devDependencies": {
     "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.26.3"
-  },
-  "peerDependencies": {
+    "@babel/preset-react": "^7.26.3",
     "bootstrap": "^5.3.3",
-    "moment": "^2.22.2",
-    "prop-types": "^15.6.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
-    "react-datetime": "^3.2.0",
     "react-dom": "^18.2.0",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5"

package/build/FormFields/CustomRadioButton.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _semanticUiReact = require("semantic-ui-react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var CustomRadioButton = function CustomRadioButton(_ref) {
-  var _onChange = _ref.onChange,
-    name = _ref.name,
-    displayName = _ref.displayName,
-    checked = _ref.checked,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$showHelp = _ref.showHelp,
-    showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
-    _ref$componentStyle = _ref.componentStyle,
-    componentStyle = _ref$componentStyle === void 0 ? {
-      display: 'inline-block',
-      margin: '0'
-    } : _ref$componentStyle,
-    tooltipStyle = _ref.tooltipStyle,
-    _ref$helpText = _ref.helpText,
-    helpText = _ref$helpText === void 0 ? "" : _ref$helpText;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    id: name,
-    className: "radioButtonDiv",
-    key: name
-  }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Radio, {
-    style: componentStyle,
-    label: displayName,
-    name: name,
-    checked: checked,
-    onChange: function onChange(checked) {
-      return _onChange(name);
-    },
-    disabled: disabled
-  }), showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
-    name: "help circle",
-    title: helpText,
-    style: tooltipStyle
-  }) : null);
-};
-CustomRadioButton.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  displayName: PropTypes.string,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  showHelp: PropTypes.bool,
-  tooltipStyle: PropTypes.object,
-  helpText: PropTypes.string
-};
-var _default = exports["default"] = CustomRadioButton;

package/build/FormFields/MultipleCheckbox.js

@@ -1,91 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _semanticUiReact = require("semantic-ui-react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var defaultStyles = {
-  mainDiv: {},
-  label: {
-    width: '161px',
-    fontSize: '10pt',
-    textAlign: 'left'
-  },
-  span: {
-    color: '#db2828',
-    position: 'relative',
-    top: '-2px'
-  },
-  component: {
-    display: 'inline-block',
-    margin: '0'
-  },
-  tooltip: {}
-};
-var MultipleCheckbox = function MultipleCheckbox(_ref) {
-  var _onChange = _ref.onChange,
-    name = _ref.name,
-    displayName = _ref.displayName,
-    options = _ref.options,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required,
-    _ref$mainDivStyle = _ref.mainDivStyle,
-    mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
-    _ref$labelStyle = _ref.labelStyle,
-    labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
-    _ref$spanStyle = _ref.spanStyle,
-    spanStyle = _ref$spanStyle === void 0 ? defaultStyles.span : _ref$spanStyle,
-    _ref$componentStyle = _ref.componentStyle,
-    componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle,
-    _ref$tooltipStyle = _ref.tooltipStyle,
-    tooltipStyle = _ref$tooltipStyle === void 0 ? defaultStyles.tooltip : _ref$tooltipStyle;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    key: name,
-    id: name,
-    className: "multipleCheckboxDiv",
-    style: mainDivStyle
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: 'form-input-' + name,
-    style: labelStyle
-  }, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
-    style: spanStyle
-  }, "*")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "multipleCheckboxGroupDiv"
-  }, options.map(function (option, index) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: index,
-      className: "checkboxDiv",
-      style: checkboxDivStyle
-    }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Checkbox, {
-      type: "checkbox",
-      style: componentStyle,
-      label: option.label,
-      name: option.name,
-      checked: option.checked,
-      onChange: function onChange() {
-        return _onChange(option.name);
-      },
-      disabled: option.disabled
-    }), option.showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
-      name: "help circle",
-      title: option.helpText,
-      style: tooltipStyle
-    }) : null);
-  })));
-};
-MultipleCheckbox.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  displayName: PropTypes.string,
-  required: PropTypes.bool,
-  options: PropTypes.array.isRequired,
-  mainDivStyle: PropTypes.object,
-  labelStyle: PropTypes.object,
-  spanStyle: PropTypes.object,
-  componentStyle: PropTypes.object,
-  tooltipStyle: PropTypes.object
-};
-var _default = exports["default"] = MultipleCheckbox;

package/build/FormFields/MultipleDropdown.js

@@ -1,75 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _semanticUiReact = require("semantic-ui-react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var defaultStyles = {
-  mainDiv: {}
-};
-
-/**
- * Custom multiple dropdown component.
- * @param {Object} props
- * @param {function} props.onChange - Callback when dropdown value changes.
- * @param {string} props.name - Unique name of the dropdown.
- * @param {string} props.displayName - Label text displayed next to the dropdown.
- * @param {Array} props.value - Current selected values of the dropdown.
- * @param {boolean} [props.disabled=false] - Whether the dropdown is disabled.
- * @param {Array} props.options - Options for the dropdown.
- * @param {Object} [props.mainDivStyle] - Custom style for outer container.
- * @param {Object} [props.labelStyle] - Custom style for the label element.
- * @param {Object} [props.componentStyle] - Custom style for the dropdown element.
- */
-
-var MultipleDropdown = function MultipleDropdown(_ref) {
-  var onChange = _ref.onChange,
-    name = _ref.name,
-    displayName = _ref.displayName,
-    value = _ref.value,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    options = _ref.options,
-    _ref$mainDivStyle = _ref.mainDivStyle,
-    mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
-    _ref$labelStyle = _ref.labelStyle,
-    labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
-    _ref$componentStyle = _ref.componentStyle,
-    componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "multipleDropdownDiv",
-    id: name,
-    key: name,
-    style: mainDivStyle
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: "form-input-" + name,
-    style: labelStyle
-  }, displayName), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Dropdown, {
-    style: componentStyle,
-    placeholder: "Select " + name,
-    name: name,
-    fluid: true,
-    multiple: true,
-    selection: true,
-    search: true,
-    value: value,
-    options: options,
-    onChange: onChange,
-    disabled: disabled
-  }));
-};
-MultipleDropdown.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  displayName: PropTypes.string,
-  value: PropTypes.array,
-  disabled: PropTypes.bool,
-  options: PropTypes.array.isRequired,
-  mainDivStyle: PropTypes.object,
-  labelStyle: PropTypes.object,
-  componentStyle: PropTypes.object
-};
-var _default = exports["default"] = MultipleDropdown;

package/build/FormFields/MultipleRadioButton.js

@@ -1,89 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _semanticUiReact = require("semantic-ui-react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var defaultStyles = {
-  mainDiv: {},
-  label: {
-    width: '161px',
-    fontSize: '10pt',
-    textAlign: 'left'
-  },
-  span: {
-    color: '#db2828',
-    position: 'relative',
-    top: '-2px'
-  },
-  component: {
-    display: 'inline-block',
-    margin: '0'
-  }
-};
-var MultipleRadioButton = function MultipleRadioButton(_ref) {
-  var _onChange = _ref.onChange,
-    name = _ref.name,
-    displayName = _ref.displayName,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required,
-    options = _ref.options,
-    radioButtonDivStyle = _ref.radioButtonDivStyle,
-    component = _ref.component,
-    _ref$mainDivStyle = _ref.mainDivStyle,
-    mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
-    _ref$labelStyle = _ref.labelStyle,
-    labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
-    _ref$spanStyle = _ref.spanStyle,
-    spanStyle = _ref$spanStyle === void 0 ? defaultStyles.span : _ref$spanStyle,
-    _ref$componentStyle = _ref.componentStyle,
-    componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    id: name,
-    className: "multipleRadioDiv",
-    key: name,
-    style: mainDivStyle
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: 'form-input-' + name,
-    style: labelStyle
-  }, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
-    style: spanStyle
-  }, "*")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "multipleRadioGroupDiv",
-    style: radioButtonDivStyle
-  }, options.map(function (option, index) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: index,
-      className: "radioButtonDiv"
-    }, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Radio, {
-      style: componentStyle,
-      label: option.label,
-      name: option.name,
-      checked: option.checked,
-      onChange: function onChange() {
-        return _onChange(option.name);
-      },
-      disabled: option.disabled
-    }), option.showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
-      name: "help circle",
-      title: option.helpText
-    }) : null);
-  }), component ? component : null));
-};
-MultipleRadioButton.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  displayName: PropTypes.string,
-  required: PropTypes.bool,
-  options: PropTypes.array.isRequired,
-  radioButtonDivStyle: PropTypes.object,
-  component: PropTypes.node,
-  mainDivStyle: PropTypes.object,
-  labelStyle: PropTypes.object,
-  spanStyle: PropTypes.object,
-  componentStyle: PropTypes.object
-};
-var _default = exports["default"] = MultipleRadioButton;

package/build/FormFields/YearDatePicker.js

@@ -1,114 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactDatetime = _interopRequireDefault(require("react-datetime"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-var defaultStyles = {
-  mainDiv: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  label: {
-    width: '161px',
-    fontSize: '10pt',
-    textAlign: 'left'
-  },
-  span: {
-    color: '#db2828',
-    position: 'relative',
-    top: '-2px'
-  },
-  component: {
-    maxWidth: 350,
-    display: 'inline-block'
-  }
-};
-var YearDatePicker = function YearDatePicker(_ref) {
-  var _onChange = _ref.onChange,
-    name = _ref.name,
-    displayName = _ref.displayName,
-    value = _ref.value,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required,
-    _ref$mainDivStyle = _ref.mainDivStyle,
-    mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
-    _ref$labelStyle = _ref.labelStyle,
-    labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
-    _ref$spanStyle = _ref.spanStyle,
-    spanStyle = _ref$spanStyle === void 0 ? defaultStyles.span : _ref$spanStyle,
-    _ref$componentStyle = _ref.componentStyle,
-    componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle,
-    _ref$dateFormat = _ref.dateFormat,
-    dateFormat = _ref$dateFormat === void 0 ? "DD/MM/YYYY" : _ref$dateFormat,
-    _ref$timeFormat = _ref.timeFormat,
-    timeFormat = _ref$timeFormat === void 0 ? false : _ref$timeFormat,
-    _ref$input = _ref.input,
-    input = _ref$input === void 0 ? true : _ref$input,
-    _ref$viewMode = _ref.viewMode,
-    viewMode = _ref$viewMode === void 0 ? "years" : _ref$viewMode,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? "Select year" : _ref$placeholder,
-    isValidDateFunction = _ref.isValidDateFunction;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "yearDateDiv",
-    key: name,
-    id: 'form-dateYearDiv-' + name,
-    style: mainDivStyle
-  }, /*#__PURE__*/_react["default"].createElement("label", {
-    id: 'form-dateYearlabel-' + name,
-    htmlFor: "form-dateYear-" + name,
-    style: labelStyle
-  }, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
-    style: spanStyle
-  }, "*")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactDatetime["default"], {
-    style: componentStyle,
-    id: "form-dateYear-" + name,
-    value: value,
-    dateFormat: dateFormat,
-    timeFormat: timeFormat,
-    input: input,
-    onChange: function onChange(date) {
-      return _onChange(date, name);
-    },
-    viewMode: viewMode,
-    disabled: disabled,
-    isValidDate: function isValidDate(current) {
-      return isValidDateFunction(current);
-    },
-    renderInput: function renderInput(props, openCalendar) {
-      return /*#__PURE__*/_react["default"].createElement("input", _extends({}, props, {
-        readOnly: true,
-        onClick: openCalendar // Ensures the calendar opens when the input is clicked
-      }));
-    },
-    inputProps: {
-      placeholder: placeholder
-    }
-  })));
-};
-YearDatePicker.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  displayName: PropTypes.string,
-  value: PropTypes.any,
-  disabled: PropTypes.bool,
-  required: PropTypes.bool,
-  mainDivStyle: PropTypes.object,
-  labelStyle: PropTypes.object,
-  spanStyle: PropTypes.object,
-  componentStyle: PropTypes.object,
-  dateFormat: PropTypes.string,
-  timeFormat: PropTypes.bool,
-  input: PropTypes.bool,
-  viewMode: PropTypes.string,
-  placeholder: PropTypes.string,
-  isValidDateFunction: PropTypes.func
-};
-var _default = exports["default"] = YearDatePicker;