@pinuts/bsr-uikit-relaunch 0.0.3

package/dist/hooks/useValidationMessage.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const convertUMTimeToDeFormat = dateData => {
+  const dateString = Object.values(dateData)[0];
+  const splitValue = dateString.split('-');
+  return {
+    [Object.keys(dateData)[0]]: `${splitValue[2]}.${splitValue[1]}.${splitValue[0]}`
+  };
+};
+const enrichDataWithDateFormates = data => Object.entries(data).reduce((lastResult, _ref) => {
+  let [nextKey, nextValue] = _ref;
+  if (typeof nextKey === 'string' && nextKey.includes('date')) {
+    lastResult[nextKey] = convertUMTimeToDeFormat(nextValue);
+  }
+  return lastResult;
+}, data);
+const getDefaultValidationMessage = (message, errorMessages, errorMessagesBaseKey) => (message === 'mandatory' ? errorMessages.required || errorMessages.requiredHTML || errorMessages[message] : errorMessages[message]) || [errorMessagesBaseKey, message].filter(Boolean).join('.');
+const getValidationStringAndData = (inputMessage, errorMessages, errorMessagesBaseKey) => {
+  // Beispiel: dateTimePicker Validation
+  if (Array.isArray(inputMessage)) {
+    return {
+      message: getDefaultValidationMessage(inputMessage[0], errorMessages, errorMessagesBaseKey),
+      data: enrichDataWithDateFormates(inputMessage[1])
+    };
+  }
+
+  // alles andere
+  if (typeof inputMessage === 'string') {
+    return {
+      message: getDefaultValidationMessage(inputMessage, errorMessages, errorMessagesBaseKey),
+      data: {}
+    };
+  }
+
+  // default
+  return {
+    message: '',
+    data: {}
+  };
+};
+
+// Achtung: i18next t Funktion als erster Parameter
+const useValidationMessage = function (t, validationMessage) {
+  let errorMessages = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let errorMessagesBaseKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'errorMessages';
+  const displayedMessage = (0, _react.useMemo)(() => {
+    if (!validationMessage) {
+      return '';
+    }
+    const fixedProps = getValidationStringAndData(validationMessage, errorMessages, errorMessagesBaseKey);
+    const errorMsg = t(
+    // Fallbacks
+    fixedProps.message,
+    // Input Data
+    fixedProps.data);
+    if (errorMsg.startsWith('errorMessages.')) {
+      return errorMsg.replace('errorMessages.', '');
+    }
+    return errorMsg;
+  }, [validationMessage, t, errorMessages, errorMessagesBaseKey]);
+  return displayedMessage;
+};
+var _default = exports.default = useValidationMessage;

package/dist/hooks/withFieldGroup.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _formBuilder = require("@pinuts/form-builder");
+var _reactI18next = require("react-i18next");
+var _FieldLabel = _interopRequireDefault(require("../items/FieldLabel/FieldLabel.jsx"));
+var _HTMLParserSanitized = require("../items/HTMLParserSanitized/HTMLParserSanitized.jsx");
+var _formModule = _interopRequireDefault(require("../styles/form.module.scss"));
+var _AlertTriangle = _interopRequireDefault(require("../icons/AlertTriangle.jsx"));
+var _Verify = _interopRequireDefault(require("../icons/Verify.jsx"));
+var _InfoOutline = _interopRequireDefault(require("../icons/InfoOutline.jsx"));
+var _isWindowAvailable = require("../utils/isWindowAvailable.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); } /* eslint-disable react/prop-types */ // import Icon from '../items/Icon/Icon.jsx';
+const {
+  useUniqueIds
+} = _formBuilder.hooks;
+const {
+  getClassNames,
+  getAriaAttributes
+} = _formBuilder.utils;
+const isFieldHiddenByEmptyValues = (value, isInvalid) => [undefined, ''].includes(value) && !isInvalid;
+const isHiddenByEmptyValues = (value, isInvalid, components, values, errors) => {
+  const allComponentsHidden = !components?.length || components.every(child => isHiddenByEmptyValues(values?.[child.config?.key], errors?.[child.config?.key], child.components, values, errors));
+  return isFieldHiddenByEmptyValues(value, isInvalid) && allComponentsHidden;
+};
+const getOuterComponent = (FieldComponent, viewMode) => {
+  if (FieldComponent.formFieldConfig?.isFieldset && !viewMode) {
+    return FieldSetComponent;
+  }
+  return DivComponent;
+};
+
+// eslint-disable-next-line react/display-name
+const withFieldGroup = FieldComponent => props => {
+  const [t] = (0, _reactI18next.useTranslation)();
+  const {
+    value,
+    helpText,
+    infoText,
+    helpTextPositionTop = false,
+    classNameHelperText,
+    label,
+    readOnly,
+    disabled,
+    viewMode,
+    stepId,
+    hideEmptyValues,
+    isInvalid,
+    isRequired,
+    validationMessage,
+    prefix,
+    withRowCols,
+    formGroupClassName,
+    // colClassName,
+    maxCharacters,
+    maxCharactersText = 'bsrItems.maxCharacters',
+    // maxSize,
+    components,
+    values,
+    errors,
+    meta
+  } = props;
+  const hookedFieldIds = useUniqueIds(prefix);
+  const [textLength, setTextLength] = (0, _react.useState)(value?.length || 0);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+  const fieldIds = props.fieldIds || hookedFieldIds;
+  const ariaAttributes = props.ariaAttributes || getAriaAttributes({
+    ...props,
+    fieldIds
+  });
+  const OuterComponent = getOuterComponent(FieldComponent, viewMode);
+  const usedHelpTextPositionTop = (0, _react.useMemo)(() => helpTextPositionTop || maxCharacters && helpText, [helpTextPositionTop, maxCharacters, helpText]);
+  const showHelpText = (0, _react.useMemo)(() => helpText && (!viewMode || FieldComponent.formFieldConfig?.showHelpTextInViewMode), [helpText, viewMode]);
+  const showMaxCharacters = maxCharacters && !(readOnly || disabled || viewMode);
+  const showIsInvalid = isInvalid && !viewMode && validationMessage;
+  const showIsSuccess = meta?.touched && !isInvalid;
+  const tooltipRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const adjustTooltipPosition = () => {
+      if (tooltipRef.current) {
+        const tooltipElement = tooltipRef.current;
+        const rect = tooltipElement.getBoundingClientRect();
+
+        // Adjust vertical position
+        if (rect.bottom > 200) {
+          tooltipElement.classList.remove(_formModule.default.bottom || '');
+        } else {
+          tooltipElement.classList.add(_formModule.default.bottom || '');
+        }
+
+        // Adjust horizontal position
+        if (rect.right > window.innerWidth) {
+          tooltipElement.classList.add(_formModule.default.adjustRight || '');
+        } else {
+          tooltipElement.classList.remove(_formModule.default.adjustRight || '');
+        }
+      }
+    };
+    if ((0, _isWindowAvailable.isWindowAvailable)()) {
+      window.addEventListener('scroll', adjustTooltipPosition);
+      window.addEventListener('resize', adjustTooltipPosition);
+      adjustTooltipPosition();
+      return () => {
+        window.removeEventListener('scroll', adjustTooltipPosition);
+        window.removeEventListener('resize', adjustTooltipPosition);
+      };
+    }
+  }, []);
+  const infoRow = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
+    className: _formModule.default.infoRow
+  }, showIsSuccess && /*#__PURE__*/_react.default.createElement("div", {
+    className: _formModule.default.success
+  }, /*#__PURE__*/_react.default.createElement(_Verify.default, {
+    width: 18,
+    height: 18
+  })), infoText && /*#__PURE__*/_react.default.createElement("div", {
+    className: _formModule.default.info
+  }, /*#__PURE__*/_react.default.createElement(_InfoOutline.default, {
+    width: 18,
+    height: 18,
+    stroke: _formModule.default.grey100
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _formModule.default.tooltip,
+    ref: tooltipRef
+  }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, t(infoText))))), [showIsSuccess, infoText, tooltipRef, t]);
+  const helpTextDiv = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
+    id: fieldIds.helpText,
+    className: getClassNames([_formModule.default.helperText, 'pb-1', classNameHelperText])
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, t(helpText)))), [fieldIds.helpText, helpText, classNameHelperText, t]);
+  const topRow = (0, _react.useMemo)(() => {
+    const labelComponent = label ? /*#__PURE__*/_react.default.createElement(_FieldLabel.default, {
+      id: fieldIds.label,
+      targetId: fieldIds.fieldId,
+      isInvalid: isInvalid,
+      isRequired: isRequired,
+      isFocused: isFocused,
+      labelText: label,
+      isLegend: FieldComponent.formFieldConfig?.labelIsLegend,
+      viewMode: viewMode,
+      stepId: stepId
+    }) : null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _formModule.default.topRow
+    }, labelComponent, infoRow);
+  }, [infoRow, fieldIds.label, fieldIds.fieldId, isInvalid, isRequired, isFocused, label, viewMode, stepId]);
+  if (viewMode && hideEmptyValues && isHiddenByEmptyValues(value, isInvalid, components, values, errors)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(OuterComponent, {
+    className: getClassNames([withRowCols && 'row', _formModule.default.formInput, isInvalid && _formModule.default.error, formGroupClassName])
+  }, topRow, showHelpText && usedHelpTextPositionTop && helpTextDiv, (!isInvalid || !viewMode) && /*#__PURE__*/_react.default.createElement(FieldComponent, _extends({}, props, {
+    setTextLength: setTextLength,
+    inputProps: {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      ...props.inputProps,
+      id: fieldIds.fieldId,
+      readOnly: props.disabled || props.readOnly,
+      // TODO: Muss das in den Form-Builder?
+      disabled: props.disabled || props.readOnly // TODO: Muss das in den Form-Builder?
+    },
+    fieldIds: fieldIds,
+    ariaAttributes: ariaAttributes
+  })), showHelpText && !usedHelpTextPositionTop && helpTextDiv, showMaxCharacters && /*#__PURE__*/_react.default.createElement("span", {
+    className: "helper-text align-items-start"
+  }, t(maxCharactersText, {
+    characters: textLength,
+    maxCharacters
+  })), showIsInvalid && /*#__PURE__*/_react.default.createElement("div", {
+    id: fieldIds.errorMessage,
+    className: _formModule.default.errorMessage,
+    "aria-live": "polite",
+    role: "region",
+    "aria-atomic": "true"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sr-only"
+  }, t('bsrItems.errorMsgPrefix')), /*#__PURE__*/_react.default.createElement(_AlertTriangle.default, {
+    width: 18,
+    height: 18,
+    className: _formModule.default.errorMessageIcon
+  }), validationMessage));
+};
+const FieldSetComponent = _ref => {
+  let {
+    children,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("fieldset", otherProps, children);
+};
+const DivComponent = _ref2 => {
+  let {
+    children,
+    ...otherProps
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement("div", otherProps, children);
+};
+var _default = exports.default = withFieldGroup;

package/dist/icons/AlertTriangle.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _defaultIconPropValuesModule = _interopRequireDefault(require("./_defaultIconPropValues.module.scss"));
+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); } /* eslint-disable react/prop-types */
+const {
+  defaultPropValues
+} = _defaultIconPropValuesModule.default;
+const AlertTriangle = props => {
+  const {
+    width = defaultPropValues.width,
+    height = defaultPropValues.height,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    width: width,
+    height: height
+  }, restProps, {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.73 21.5C2.425 21.495 2.14 21.415 1.89 21.27C1.495 21.04 1.215 20.675 1.095 20.235C0.974997 19.795 1.04 19.335 1.265 18.94L10.54 3.32C10.54 3.32 10.54 3.31 10.545 3.31C10.685 3.09 10.875 2.895 11.095 2.76C11.485 2.52 11.94 2.445 12.385 2.55C12.83 2.655 13.205 2.925 13.445 3.31L22.72 18.935C22.87 19.195 22.95 19.48 22.955 19.77C22.96 20.225 22.79 20.66 22.475 20.985C22.16 21.31 21.73 21.495 21.275 21.505H2.73V21.5Z",
+    fill: "#E42C1B"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "12",
+    cy: "18.6667",
+    r: "1.33333",
+    fill: "white"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M12 8L12 14.6667",
+    stroke: "white",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }));
+};
+var _default = exports.default = AlertTriangle;

package/dist/icons/InfoOutline.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _defaultIconPropValuesModule = _interopRequireDefault(require("./_defaultIconPropValues.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); } /* eslint-disable react/prop-types */
+const {
+  defaultPropValues
+} = _defaultIconPropValuesModule.default;
+const InfoOutline = props => {
+  const {
+    width = defaultPropValues.width,
+    height = defaultPropValues.height,
+    stroke = defaultPropValues.stroke,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    width: width,
+    height: height
+  }, restProps, {
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "9",
+    cy: "9",
+    r: "8",
+    fill: "white",
+    stroke: stroke,
+    strokeWidth: "1.4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9 8L9 13",
+    stroke: stroke,
+    strokeWidth: "1.4",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "9",
+    cy: "5",
+    r: "0.5",
+    fill: stroke,
+    stroke: "#1E1E1E"
+  }));
+};
+var _default = exports.default = InfoOutline;
+/*#__PURE__*/React.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  fill: "none"
+});

package/dist/icons/Verify.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _defaultIconPropValuesModule = _interopRequireDefault(require("./_defaultIconPropValues.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); } /* eslint-disable react/prop-types */
+const {
+  defaultPropValues
+} = _defaultIconPropValuesModule.default;
+const Verify = props => {
+  const {
+    width = defaultPropValues.width,
+    height = defaultPropValues.height,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: width,
+    height: height
+  }, restProps, {
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("rect", {
+    width: "24",
+    height: "24",
+    rx: "12",
+    fill: "#07885B"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M10.1982 17C10.0542 17 9.90725 16.949 9.79328 16.8411L6.19404 13.5423C5.95109 13.3174 5.9331 12.9396 6.15805 12.6937C6.383 12.4507 6.76092 12.4328 7.00687 12.6577L10.1652 15.5516L16.9588 8.19239C17.1837 7.94948 17.5616 7.93449 17.8076 8.1594C18.0505 8.38431 18.0655 8.76217 17.8406 9.00807L10.6421 16.8051C10.5251 16.934 10.3632 16.997 10.2012 16.997L10.1982 17Z",
+    fill: "white",
+    stroke: 'white'
+  }));
+};
+var _default = exports.default = Verify;