@agilemotion/oui-react-js 1.8.27 → 1.8.29

package/dist/components/form/ImageEditor.js

@@ -8,10 +8,14 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _BaseField = require("./BaseField");
 var _styles = require("@mui/styles");
+var _DocumentViewer = _interopRequireDefault(require("../DocumentViewer"));
 var _Utils = _interopRequireDefault(require("../../Utils"));
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _reactPromiseTracker = require("react-promise-tracker");
+var _Event = _interopRequireDefault(require("../../event/Event"));
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+var _EventType = _interopRequireDefault(require("../../event/EventType"));
 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); }
 const useStyles = (0, _styles.makeStyles)(theme => ({
@@ -29,9 +33,10 @@ const status = response => {
   if (response.ok) {
     return Promise.resolve(response);
   } else {
-    let error = new Error(response.statusText);
-    error.code = response.status;
-    return Promise.reject(error);
+    return Promise.reject({
+      code: response.status,
+      message: response.statusText
+    });
   }
 };
 const json = response => {
@@ -39,16 +44,38 @@ const json = response => {
 };
 const location = window.location.protocol + "//" + window.location.hostname;
 const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const [multiple] = _react.default.useState(props.multiple === true);
+  const [viewerFile, setViewerFile] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? props.initialFile : null);
   const [angle, setAngle] = _react.default.useState(0);
   const [zoomDepth, setZoomDepth] = _react.default.useState(null);
   const [originalImageWidth, setOriginalImageWidth] = _react.default.useState(null);
   const [originalImageHeight, setOriginalImageHeight] = _react.default.useState(null);
+  const [payloadStorageMode, setPayloadStorageMode] = _react.default.useState(props.config.payloadStorageMode || 'base64');
+  const [files, setFiles] = _react.default.useState(!_Utils.default.isNull(props.initialFile) ? [props.initialFile] : null);
+  const [loading, setLoading] = _react.default.useState(true);
+  const [nullable] = _react.default.useState(_Utils.default.isNull(props.config.validator) || props.config.validator.nullable === true);
+  const [multiple] = _react.default.useState(props.multiple === true);
+  const [show, setShow] = _react.default.useState(false);
   const classes = useStyles();
-  const width = _Utils.default.getComponentAttribute(props.config, 'width', '320px');
-  const height = _Utils.default.getComponentAttribute(props.config, 'height', '320px');
+  const [reference, setReference] = _react.default.useState(ref ? ref : /*#__PURE__*/_react.default.createRef());
+  const [hasError, setHasError] = _react.default.useState(null);
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '200px');
+  const height = _Utils.default.getComponentAttribute(props.config, 'height', '200px');
+  const [errorMessage, setErrorMessage] = _react.default.useState("");
+  const cacheId = _react.default.useRef(!_Utils.default.isNull(props.base.value) ? props.base.value.documentRepositoryCacheId : null);
   const base = props.base;
-  _react.default.useEffect(() => {}, [props.initialFile]);
+  _react.default.useEffect(() => {
+    return () => {
+      if (cacheId.current) {
+        //remove().catch((e) => {});
+      }
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    setViewerFile(props.initialFile);
+  }, [props.initialFile]);
+  const handleViewerLoad = numPages => {
+    setLoading(false);
+  };
   function getFetchConfig(data) {
     const accessToken = sessionStorage.getItem("accessToken");
     const idToken = sessionStorage.getItem("idToken");
@@ -71,48 +98,154 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     }
     return rotateAngle;
   }
-  function process(callback, data, action) {
-    let fetchConfig = getFetchConfig(data);
-    let url = location + _ApplicationManager.default.getContextRoot() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
-    let rotateAngle = getRotateAngle(action);
-    if (rotateAngle) {
-      url += "?" + rotateAngle;
-    }
-    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
-      callback(data);
-    }).catch(e => {
-      if (e.code === 401) {
-        _ApplicationManager.default.clear();
-        _ApplicationManager.default.getApplicationHistory().push('/login');
-      }
-    }));
+  function base64ToFile(b64, originalFile) {
+    let mime = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "image/png";
+    const clean = b64.startsWith("data:") ? b64.split(",")[1] : b64;
+    const bin = atob(clean);
+    const arr = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+    const ext = mime.split("/")[1] || "png";
+    const base = originalFile.name.replace(/\.[^.]+$/, "");
+    return new File([arr], `${base}-processed.${ext}`, {
+      type: mime,
+      lastModified: Date.now()
+    });
   }
+  const upload = (metadata, file, payload) => {
+    let uploadUrl = _Utils.default.getComponentAttribute(props.config, 'uploadUrl', null);
+    if (uploadUrl === null) {
+      uploadUrl = _ApplicationManager.default.getContextRoot() + "/docs/api/v1/manager/upload/save";
+    }
+    let payloadStorageMode = props.config.payloadStorageMode;
+    if (payloadStorageMode === 'post') {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let data = new FormData();
+      metadata.correlationId = props.viewId + "." + props.config.id;
+      data.append("metadata", JSON.stringify(metadata));
+      const processedFile = base64ToFile(payload, file, "image/png");
+      data.append("file", processedFile);
+      let fetchConfig = getFetchConfig(data);
+      let url = location + uploadUrl;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+        metadata.documentRepositoryId = !_Utils.default.isNull(base.value) ? base.value.documentRepositoryId : null;
+        metadata.documentRepositoryCacheId = data;
+        cacheId.current = data;
+        base.handleValueChange(metadata);
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        }
+        let message = {
+          messageType: 'ERROR',
+          message: 'An error has accurred while uploading file'
+        };
+        let event = new _Event.default(_ApplicationManager.default, props.viewId, message);
+        _Observable.default.fireEvent(_EventType.default.MESSAGE_ARRIVED, event);
+      }));
+    } else {
+      metadata.payload = payload;
+      base.handleValueChange(metadata);
+    }
+  };
+  const remove = () => {
+    return new Promise((resolve, reject) => {
+      const accessToken = sessionStorage.getItem("accessToken");
+      const idToken = sessionStorage.getItem("idToken");
+      let fetchConfig = {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Authorization': 'Bearer ' + accessToken,
+          'idToken': idToken,
+          'tenant': _ApplicationManager.default.getActiveTenant()
+        }
+      };
+      let url = location + _ApplicationManager.default.getContextRoot() + '/docs/api/v1/manager/upload/remove/' + cacheId.current;
+      (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(() => {
+        resolve();
+      }).catch(e => {
+        if (e.code === 401) {
+          _ApplicationManager.default.clear();
+          _ApplicationManager.default.getApplicationHistory().push('/login');
+        } else {
+          reject(e);
+        }
+      }));
+    });
+  };
   const handleChange = () => event => {
     let files = event.target.files;
-    let file = files[0];
-    let reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => {
-      if (!_Utils.default.isNull(file)) {
-        let fileMetaData = {};
-        fileMetaData.name = file.name;
-        fileMetaData.type = file.type;
-        fileMetaData.size = file.size;
-        if (base.value) {
-          fileMetaData.id = base.value.id;
+    var allFiles = [];
+    for (var i = 0; i < files.length; i++) {
+      let file = files[i];
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        let fileInfo = {
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          base64: reader.result,
+          file: file
+        };
+        console.log("\n\n\n\nFILE : ", file);
+        allFiles.push(fileInfo);
+        if (allFiles.length === files.length) {
+          if (multiple === true) {
+            if (!_Utils.default.isNull(props.onUploadHandler)) {
+              props.onUploadHandler(allFiles);
+            }
+          } else {
+            if (!_Utils.default.isNull(props.onUploadHandler)) {
+              props.onUploadHandler(allFiles[0]);
+            }
+            setLoading(true);
+          }
+          setFiles(allFiles);
         }
-        if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
-          process(data => {
-            fileMetaData.url = data;
-            base.handleValueChange(fileMetaData);
-          }, reader.result, 'removeBackground');
-        } else {
-          fileMetaData.url = file.base64;
-          base.handleValueChange(fileMetaData);
+      };
+      reader.onloadend = () => {
+        if (!_Utils.default.isNull(props.form)) {
+          if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+            process(data => {
+              allFiles[0].base64 = data;
+              setViewerFile(allFiles[0]);
+              handleloadEnded(allFiles, data);
+            }, allFiles[0].base64, 'removeBackground');
+          } else {
+            handleloadEnded(allFile, reader.payload);
+            setViewerFile(allFiles[0]);
+          }
         }
+      };
+    }
+  };
+  const handleloadEnded = (allFiles, payload) => {
+    let fileMetaData = {};
+    fileMetaData.name = allFiles[0].name;
+    fileMetaData.type = allFiles[0].type;
+    fileMetaData.size = allFiles[0].size;
+    if (base.value) {
+      fileMetaData.id = base.value.id;
+      fileMetaData.documentRepositoryId = base.value.documentRepositoryId;
+    }
+    if ('base64' === payloadStorageMode) {
+      fileMetaData.payload = allFiles[0].base64;
+      base.handleValueChange(fileMetaData);
+    } else {
+      fileMetaData.correlationId = props.config.id;
+      fileMetaData.domain = props.viewId;
+      if (cacheId.current) {
+        remove().then(() => {
+          cacheId.current = null;
+          upload(fileMetaData, allFiles[0].file, payload);
+        }).catch(e => {});
+      } else {
+        upload(fileMetaData, allFiles[0].file, payload);
       }
-    };
-    reader.onloadend = () => {};
+    }
   };
   _react.default.useEffect(() => {
     let container = document.getElementById("__image_container");
@@ -125,6 +258,22 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
       image.style.height = container.style.height;
     }
   }, [zoomDepth]);
+  function process(callback, data, action) {
+    let fetchConfig = getFetchConfig(data);
+    let url = location + _ApplicationManager.default.getContextRoot() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
+    let rotateAngle = getRotateAngle(action);
+    if (rotateAngle) {
+      url += "?angle=" + rotateAngle;
+    }
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      callback(data);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationManager.default.clear();
+        _ApplicationManager.default.getApplicationHistory().push('/login');
+      }
+    }));
+  }
   const zoom = direction => {
     if (originalImageWidth === null) {
       setOriginalImageWidth(document.getElementById("__image").width);
@@ -140,11 +289,13 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     let rotateMode = _Utils.default.getComponentAttribute(props.config, "rotateMode", null);
     if (rotateMode === null || rotateMode === 'SERVER') {
       process(data => {
-        base.handleValueChange({
-          ...base.value,
-          url: data
+        files[0].base64 = data;
+        setViewerFile({
+          ...files[0],
+          base64: data
         });
-      }, base.value.url, 'rotate' + direction);
+        handleloadEnded(files, data);
+      }, files[0].base64, 'rotate' + direction);
     } else {
       let rotateAngle = angle + getRotateAngle("rotate" + direction);
       document.getElementById("__image_container").style.transform = "rotate(" + rotateAngle + "deg)";
@@ -264,7 +415,7 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
       id: 'ZOOM_IN'
     })
-  }) : null)), !_Utils.default.isNull(base.value) ? /*#__PURE__*/_react.default.createElement("div", {
+  }) : null)), !_Utils.default.isNull(base.value) || !_Utils.default.isNull(viewerFile) ? /*#__PURE__*/_react.default.createElement("div", {
     className: "row",
     style: {
       padding: "8px 0",
@@ -300,7 +451,7 @@ const ImageEditorComponent = exports.ImageEditorComponent = /*#__PURE__*/_react.
     id: "__image_container"
   }, /*#__PURE__*/_react.default.createElement("img", {
     id: "__image",
-    src: base.value.url,
+    src: viewerFile?.base64 || base.value?.url,
     alt: '',
     style: {
       maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px'
@@ -313,41 +464,6 @@ const ImageEditor = exports.ImageEditor = /*#__PURE__*/_react.default.memo(/*#__
   return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
     handle: props.handle,
     valueParser: (value, inbound) => {
-      if (inbound) {
-        clearTrigger.current = !clearTrigger.current;
-        if (!_Utils.default.isNull(value)) {
-          let val = value;
-
-          // TODO : Support multiple file upload
-          if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
-            if (typeof value.length !== 'undefined' && value.length > 0) {
-              val = value[0];
-            } else {
-              if (value.documentRepositoryId) {
-                return value;
-              }
-              return null;
-            }
-          }
-          if (val.map) {
-            val = val.map;
-          }
-          let fileMetaData = {};
-          fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
-          fileMetaData.id = val.id;
-          fileMetaData.type = val.type;
-          fileMetaData.size = val.size;
-          fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
-          fileMetaData.documentRepositoryCacheId = val.documentRepositoryCacheId;
-          fileMetaData.url = val.url;
-          if (!_Utils.default.isNull(val.url)) {
-            let file = {};
-            file.base64 = val.url;
-            setFile(file);
-          }
-          return fileMetaData;
-        }
-      }
       return value;
     },
     valueChangeCallback: value => {

package/dist/components/form/LookupField.js

@@ -105,11 +105,11 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
   }, "...")), /*#__PURE__*/_react.default.createElement("div", {
     className: 'col-*-* no-margin no-padding',
     style: {
-      width: 'calc(100% - 72px)',
+      width: !base.disabled ? 'calc(100% - 72px)' : '100%',
       marginBottom: value ? '0' : '8px',
       position: 'relative'
     }
-  }, !base.required && /*#__PURE__*/_react.default.createElement("div", {
+  }, !base.required && !base.disabled && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '32px',
       height: '32px',
@@ -119,8 +119,7 @@ const LookupFieldComponent = exports.LookupFieldComponent = /*#__PURE__*/_react.
     }
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     variant: 'outlined',
-    onClick: clearValue,
-    disabled: base.disabled
+    onClick: clearValue
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: "CLEAR"
   }))), /*#__PURE__*/_react.default.createElement(_TextField.default, {

package/dist/components/form/RadioGroup.js

@@ -44,7 +44,7 @@ const RadioGroupWrapper = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.d
       borderRadius: '4px',
       padding: '8px 4px 4px 8px'
     } : {
-      padding: '8px 4px 4px 8px'
+      padding: 0
     },
     onChange: e => {
       base.handleValueChange(e.target.value);

package/dist/components/layout/Layout.js

@@ -30,6 +30,8 @@ var _DocumentTemplateDesigner = _interopRequireDefault(require("../DocumentTempl
 var _ChatRoomWrapper = _interopRequireDefault(require("../media/chat/ChatRoomWrapper"));
 var _ProgressTracker = _interopRequireDefault(require("../ProgressTracker"));
 var _Chart = _interopRequireDefault(require("../Chart"));
+var _FacialRegistration = _interopRequireDefault(require("../facialRecognition/FacialRegistration"));
+var _FacialVerification = _interopRequireDefault(require("../facialRecognition/FacialVerification"));
 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; }
@@ -251,6 +253,20 @@ const Layout = props => {
             key: index,
             viewId: props.viewId
           });
+        case 'facialRegistration':
+          return /*#__PURE__*/_react.default.createElement(_FacialRegistration.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            key: index,
+            viewId: props.viewId
+          });
+        case 'facialVerification':
+          return /*#__PURE__*/_react.default.createElement(_FacialVerification.default, {
+            config: component,
+            handle: createComponentHandle(component),
+            key: index,
+            viewId: props.viewId
+          });
         case 'chart':
           return /*#__PURE__*/_react.default.createElement(_Chart.default, {
             config: component,

package/dist/components/layout/View.js

@@ -130,6 +130,7 @@ const View = props => {
         return props.parameters;
       },
       get model() {
+        _ApplicationManager.default.enableFormMarkers(false);
         let children = layoutHandle.api.getChildren();
         for (const child of children) {
           if (!_Utils.default.isNull(child.api)) {
@@ -139,6 +140,7 @@ const View = props => {
             }
           }
         }
+        _ApplicationManager.default.enableFormMarkers(true);
         return model;
       },
       getChild: id => {

package/dist/components/signatures/DocumentContainer.js

@@ -104,7 +104,7 @@ const DocumentContainer = props => {
             placeholder: 'Enter text here...',
             style: {
               position: 'absolute',
-              top: -4,
+              top: -2,
               left: 0,
               width: 'calc(100% - 4px)',
               height: 'calc(100% - 4px)',

package/dist/components/signatures/ViewUtils.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _reactPromiseTracker = require("react-promise-tracker");
 class ViewUtils {
   constructor() {}
-  SYSTEM_ERROR_MESSAGE = "A system error has accured. Please contact your system administrator";
+  SYSTEM_ERROR_MESSAGE = "A system error has occurred. Please contact your system administrator";
   isNull(value) {
     return value === null || typeof value === 'undefined';
   }

package/dist/event/ActionHandlers.js

@@ -52,7 +52,7 @@ class ActionHandlers {
     if (!actionHandler) {
       throw new Error("No action handler found for [" + action.actionType + "]");
     }
-    let message = action.confirmationMessage;
+    let message = action.confirmationMessage ? _DynamicJS.default.executeScript("__confirmation_messaage_" + viewId + "_" + component.id, action.confirmationMessage) : null;
     let condition = action.condition;
     let shouldRun = true;
     if (!_Utils.default.isNull(condition)) {

package/dist/event/ServiceCallActionHandler.js

@@ -59,12 +59,13 @@ class ServiceCallActionHandler {
     }
   }
   handleError(e, invalidParameterCallback, currentViewId, component, errorCallback) {
-    console.error(e);
     if (e && e.errorType === 'INVALID_PARAMETER') {
+      console.warn("The service was not be called because of a null required parameter : ", e.parameter);
       if (invalidParameterCallback) {
         invalidParameterCallback();
       }
     } else {
+      console.error(e);
       _Utils.default.publishErrorMessage(e, currentViewId, component);
       if (!_Utils.default.isNull(errorCallback)) {
         errorCallback(e);

package/dist/js/Validators.js

@@ -23,7 +23,8 @@ class Validators {
           messageType: 'ERROR',
           message: ''
         };
-      }
+      } //0179a4f4-99b9-4d6b-b2ba-d9eb381748b7 0179a4f4-99b9-4d6b-b2ba-d9eb381748b5
+
       if (item.procurementMethod.type === 'CONTRACT' || item.procurementMethod.type === 'TRANSVERSAL_CONTRACT') {
         if (item.procurementMethod.type === 'TRANSVERSAL_CONTRACT' && !item.contract.owner) {
           return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.27",
+  "version": "1.8.29",
   "files": [
     "dist"
   ],
@@ -42,6 +42,7 @@
     "dayjs": "^1.11.13",
     "dotenv-webpack": "^8.1.0",
     "emotion-theming": "^11.0.0",
+    "face-api.js": "^0.22.2",
     "handlebars": "^4.7.7",
     "html-to-image": "^1.6.2",
     "install": "^0.13.0",
@@ -84,9 +85,13 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "rrule": "^2.8.1",
-    "save-dev": "^0.0.1-security",
     "socket.io-client": "^4.7.5",
-    "styled-components": "^5.2.3"
+    "styled-components": "^5.2.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "web-vitals": "^2.1.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.14",
@@ -113,7 +118,11 @@
     "url-loader": "^4.1.1",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.0"
+    "webpack-dev-server": "^5.2.0",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "react-app-rewired": "^2.2.1",
+    "tailwindcss": "^3.4.1"
   },
   "scripts": {
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/lib -d dist --copy-files",