@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.14

package/dist/ui/src/core/useTrashedResource/useTrashedResource.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+import { odeServices } from "edifice-ts-client";
+import useUser from "../useUser/useUser.js";
+import { useOdeClient } from "../OdeClientProvider/OdeClientProvider.js";
+const useTrashedResource = (id) => {
+  const {
+    appCode
+  } = useOdeClient(), {
+    user
+  } = useUser(), [trashed, setTrashed] = useState(!1);
+  useEffect(() => {
+    (async () => {
+      var _a, _b;
+      const explorerData = await odeServices.http().get(`/explorer/resources?application=${appCode}&resource_type=${appCode}&asset_id[]=${id}`), resource = (_a = explorerData == null ? void 0 : explorerData.resources) == null ? void 0 : _a.find((resource2) => resource2.assetId === id);
+      (resource != null && resource.trashed || (_b = resource == null ? void 0 : resource.trashedBy) != null && _b.includes(user == null ? void 0 : user.userId)) && setTrashed(!0);
+    })();
+  }, []), useEffect(() => {
+    if (trashed)
+      throw new Response("", {
+        status: 404,
+        statusText: "Not Found"
+      });
+  }, [trashed]);
+}, useTrashedResource$1 = useTrashedResource;
+export {
+  useTrashedResource$1 as default
+};

package/dist/ui/src/core/useUpload/useUpload.js

@@ -0,0 +1,106 @@
+import { useState, useCallback } from "react";
+import { ERROR_CODE, odeServices } from "edifice-ts-client";
+import useBrowserInfo from "../../hooks/useBrowserInfo/useBrowserInfo.js";
+import useWorkspaceFile from "../useWorkspaceFile/useWorkspaceFile.js";
+import { getOrGenerateBlobId } from "../../utils/blob.js";
+const useUpload = (visibility, application = "media-library") => {
+  const [status, setStatus] = useState({}), {
+    browser,
+    device
+  } = useBrowserInfo(navigator.userAgent), {
+    create
+  } = useWorkspaceFile(), getUploadStatus = useCallback((upload) => status[getOrGenerateBlobId(upload)], [status]), setUploadStatus = (blob, status2) => {
+    setStatus((prevStatus) => {
+      const key = getOrGenerateBlobId(blob);
+      return {
+        ...prevStatus,
+        [key]: status2
+      };
+    });
+  }, clearUploadStatus = (blob) => {
+    setStatus((prevStatus) => {
+      const key = getOrGenerateBlobId(blob), {
+        [key]: unused,
+        ...rest
+      } = prevStatus;
+      return rest;
+    });
+  };
+  async function uploadFile(file, metadata) {
+    setUploadStatus(file, "loading");
+    try {
+      let resource;
+      return application === "media-library" && file.type.includes("video") ? resource = await uploadVideo(file, {
+        filename: file.name,
+        ...metadata
+      }) : resource = await create(file, {
+        application,
+        visibility
+      }), setUploadStatus(file, "success"), resource;
+    } catch {
+      return setUploadStatus(file, "error"), null;
+    }
+  }
+  async function uploadBlob(blob, metadata) {
+    setUploadStatus(blob, "loading");
+    try {
+      let resource;
+      if (blob.type.includes("video"))
+        resource = await uploadVideo(blob, metadata);
+      else
+        throw new Error(ERROR_CODE.NOT_SUPPORTED);
+      return setUploadStatus(blob, "success"), resource;
+    } catch {
+      return setUploadStatus(blob, "error"), null;
+    }
+  }
+  const uploadVideo = async (blob, metadata) => {
+    const params = {
+      data: {
+        device: device.type,
+        browser: {
+          name: browser.name,
+          version: browser.version
+        },
+        url: window.location.hostname,
+        file: blob,
+        filename: (metadata == null ? void 0 : metadata.filename) ?? "filename",
+        weight: blob.size
+      },
+      appCode: application,
+      captation: !(blob instanceof File),
+      duration: (metadata == null ? void 0 : metadata.duration) ?? 0
+    }, uploadResponse = await odeServices.video().upload(params);
+    if (uploadResponse.state === "succeed")
+      return {
+        _id: uploadResponse.videoworkspaceid,
+        file: uploadResponse.videoid,
+        name: params.data.filename,
+        eType: "file",
+        eParent: "",
+        children: [],
+        created: /* @__PURE__ */ new Date(),
+        _shared: [],
+        _isShared: !1,
+        owner: {
+          userId: "",
+          displayName: ""
+        }
+      };
+    throw uploadResponse.state === "error" ? new Error(uploadResponse.code || "Error while uploading video") : new Error("Video encoding is still running");
+  };
+  function uploadAlternateFile(original, replacement, metadata) {
+    return getOrGenerateBlobId(replacement, getOrGenerateBlobId(original)), uploadFile(replacement, metadata);
+  }
+  return {
+    getUploadStatus,
+    setUploadStatus,
+    clearUploadStatus,
+    uploadFile,
+    uploadAlternateFile,
+    uploadBlob
+  };
+};
+export {
+  useUpload as default
+};

package/dist/ui/src/core/useUploadFiles/useUploadFiles.js

@@ -0,0 +1,101 @@
+import { useState, useCallback, useEffect } from "react";
+import { useDropzoneContext } from "../../components/Dropzone/DropzoneContext.js";
+import useWorkspaceFile from "../useWorkspaceFile/useWorkspaceFile.js";
+import useUpload from "../useUpload/useUpload.js";
+import useImageResizer from "../../hooks/useImageResizer/useImageResizer.js";
+import { addTimestampToImageUrl } from "../../utils/addTimestampToUrl.js";
+const useUploadFiles = ({
+  handleOnChange,
+  visibility,
+  application
+}) => {
+  const [uploadedFiles, setUploadedFiles] = useState([]), [editingImage, setEditingImage] = useState(void 0), {
+    files,
+    deleteFile,
+    replaceFileAt
+  } = useDropzoneContext(), {
+    remove,
+    createOrUpdate
+  } = useWorkspaceFile(), {
+    getUploadStatus,
+    setUploadStatus,
+    clearUploadStatus,
+    uploadFile,
+    uploadAlternateFile
+  } = useUpload(visibility, application), {
+    resizeImageFile
+  } = useImageResizer(), tryUploading = useCallback((files2) => {
+    files2.forEach(async (file, index) => {
+      if (file == null) return;
+      let resource;
+      if (file.type.startsWith("image"))
+        try {
+          const replacement = await resizeImageFile(file);
+          resource = await uploadAlternateFile(file, replacement), replaceFileAt(index, replacement);
+        } catch (err) {
+          console.error(err);
+        }
+      resource || (resource = await uploadFile(file)), resource && setUploadedFiles((prevFiles) => [...prevFiles, resource]);
+    });
+  }, [resizeImageFile, uploadAlternateFile, uploadFile, replaceFileAt]);
+  useEffect(() => {
+    let numUploads = 0;
+    const newFiles = files.map((file) => {
+      if (numUploads >= 5) return null;
+      const status = getUploadStatus(file);
+      return status === "loading" && numUploads++, status ? null : file;
+    });
+    newFiles.forEach((file) => file && setUploadStatus(file, "idle")), tryUploading(newFiles);
+  }, [files, uploadedFiles, getUploadStatus, setUploadStatus, tryUploading]), useEffect(() => {
+    const sortedUploadedFiles = sortUploadedFiles(files, uploadedFiles);
+    handleOnChange(sortedUploadedFiles);
+  }, [uploadedFiles]);
+  const sortUploadedFiles = (filesArray, uploadedFilesArray) => {
+    const orderMap = filesArray.reduce((acc, item, index) => (acc[item.name] = index, acc), {});
+    return uploadedFilesArray.sort((a, b) => orderMap[a.name] - orderMap[b.name]);
+  };
+  async function removeFile(file) {
+    const resource = uploadedFiles.find((uploadedFile) => uploadedFile.name === file.name);
+    resource && (await remove(resource), clearUploadStatus(file), setUploadedFiles((prevFiles) => prevFiles.filter((prevFile) => prevFile.name !== (resource == null ? void 0 : resource.name)))), deleteFile(file);
+  }
+  async function updateImage({
+    blob,
+    legend,
+    altText: alt
+  }) {
+    if (editingImage)
+      try {
+        const res = await createOrUpdate({
+          blob,
+          legend,
+          alt,
+          uri: getUrl(editingImage)
+        });
+        res && typeof res == "object" && setUploadedFiles((prevFiles) => prevFiles.map((prevFile) => prevFile._id === res.file._id ? {
+          ...res.file
+        } : prevFile));
+      } finally {
+        setEditingImage(void 0);
+      }
+  }
+  const getUrl = (resource, timestamp) => {
+    const url = `/workspace/${resource != null && resource.public ? "pub/" : ""}document/${resource == null ? void 0 : resource._id}`;
+    return resource ? timestamp ? addTimestampToImageUrl(url) : url : "";
+  };
+  return {
+    /** List of files added from device */
+    files,
+    getUploadStatus,
+    clearUploadStatus,
+    uploadedFiles,
+    editingImage,
+    setEditingImage,
+    getUrl,
+    updateImage,
+    uploadFile,
+    removeFile
+  };
+}, useUploadFiles$1 = useUploadFiles;
+export {
+  useUploadFiles$1 as default
+};

package/dist/ui/src/core/useUser/useUser.js

@@ -0,0 +1,22 @@
+import { useOdeClient } from "../OdeClientProvider/OdeClientProvider.js";
+import { useOdeTheme } from "../ThemeProvider/ThemeProvider.js";
+function useUser() {
+  const {
+    user,
+    userDescription
+  } = useOdeClient(), {
+    theme
+  } = useOdeTheme();
+  function avatarUrl() {
+    let avatar = userDescription == null ? void 0 : userDescription.picture;
+    return (!avatar || avatar === "no-avatar.jpg" || avatar === "no-avatar.svg") && (avatar = `${theme == null ? void 0 : theme.basePath}/img/illustrations/no-avatar.svg`), avatar;
+  }
+  return {
+    user,
+    avatar: avatarUrl(),
+    userDescription
+  };
+}
+export {
+  useUser as default
+};

package/dist/ui/src/core/useWorkspaceFile/useWorkspaceFile.js

@@ -0,0 +1,49 @@
+import { odeServices } from "edifice-ts-client";
+const useWorkspaceFile = () => ({
+  createOrUpdate: async ({
+    alt,
+    uri,
+    blob,
+    legend,
+    parentId,
+    application,
+    visibility
+  }) => {
+    const regex = /\/workspace\/document\/([0-9a-fA-F-]+)/, matches = (uri ?? "").match(regex);
+    if (matches && matches.length === 2) {
+      const uuid = matches[1], existingDocuments = await odeServices.workspace().searchDocuments({
+        filter: "all",
+        id: uuid,
+        limit: 1
+      }), name = existingDocuments.length ? existingDocuments[0].name : void 0;
+      await odeServices.workspace().updateFile(uuid, blob, {
+        alt,
+        legend,
+        name
+      });
+      const updatedFile = (await odeServices.workspace().searchDocuments({
+        filter: "all",
+        id: uuid,
+        limit: 1
+      }))[0];
+      return {
+        file: updatedFile,
+        src: `/workspace/${updatedFile.public ? "pub/" : ""}document/${uuid}`
+      };
+    } else {
+      const res = await odeServices.workspace().saveFile(blob, {
+        application,
+        parentId,
+        visibility
+      });
+      return `/workspace/${res.public ? "pub/" : ""}document/${res._id}`;
+    }
+  },
+  // get,
+  create: async (file, params) => await odeServices.workspace().saveFile(file, params),
+  // put,
+  remove: async (file) => !file || Array.isArray(file) && file.length === 0 ? Promise.resolve() : await odeServices.workspace().deleteFile(Array.isArray(file) ? file : [file])
+}), useWorkspaceFile$1 = useWorkspaceFile;
+export {
+  useWorkspaceFile$1 as default
+};

package/dist/ui/src/core/useWorkspaceSearch/useWorkspaceSearch.js

@@ -0,0 +1,58 @@
+import { useReducer, useCallback } from "react";
+import { odeServices, DocumentHelper } from "edifice-ts-client";
+import useHasWorkflow from "../useHasWorkflow/useHasWorkflow.js";
+import { findTreeNode } from "../../utils/findTreeNode.js";
+import { useMockedData } from "../../utils/MockedDataProvider/MockedDataProvider.js";
+function useWorkspaceSearch(rootId, rootName, filter, format) {
+  const mock = useMockedData(), canListDocs = useHasWorkflow("org.entcore.workspace.controllers.WorkspaceController|listDocuments"), canListFolders = useHasWorkflow("org.entcore.workspace.controllers.WorkspaceController|listFolders");
+  function treeReducer(state, action) {
+    switch (action.type) {
+      case "update": {
+        const node = findTreeNode(state, (child) => child.id === action.folderId);
+        return node && (node.children = action.subfolders.map((f) => ({
+          id: f._id || "",
+          name: f.name
+        })), node.files = action.files), {
+          ...state
+        };
+      }
+      default:
+        throw Error("[useWorkspaceSearch] Unknown action type: " + action.type);
+    }
+  }
+  const [root, dispatch] = useReducer(treeReducer, {
+    id: rootId,
+    name: rootName,
+    section: !0
+  }), loadContent = useCallback(async (folderId) => {
+    var _a;
+    if (canListDocs && canListFolders) {
+      const realWorkspaceId = folderId === rootId ? "" : folderId, payload = mock != null && mock.listWorkspaceDocuments ? await ((_a = mock == null ? void 0 : mock.listWorkspaceDocuments) == null ? void 0 : _a.call(mock).then((results) => results.map((result) => {
+        const ret = {
+          ...result,
+          _id: "" + Math.round(Math.random() * 9999)
+        };
+        return ret.name = result.eType == "folder" ? "folder id=" + ret._id : "file id=" + ret._id, ret;
+      }))) : await odeServices.workspace().listDocuments(filter, realWorkspaceId), subfolders = [], files = [];
+      payload.filter((f) => {
+        if (!format || f.eType === "folder") return !0;
+        const role = DocumentHelper.getRole(f);
+        return typeof format == "string" ? format === role : Array.isArray(format) ? format.findIndex((format2) => format2 === role) >= 0 : !1;
+      }).forEach((doc) => {
+        doc.eType === "folder" ? subfolders.push(doc) : files.push(doc);
+      }), dispatch({
+        folderId,
+        subfolders,
+        files,
+        type: "update"
+      });
+    }
+  }, [canListDocs, canListFolders, rootId, mock, filter, format]);
+  return {
+    root,
+    loadContent
+  };
+}
+export {
+  useWorkspaceSearch as default
+};

package/dist/ui/src/core/useXitiTrackPageLoad/useXitiTrackPageLoad.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+import { odeServices } from "edifice-ts-client";
+import { useOdeClient } from "../OdeClientProvider/OdeClientProvider.js";
+function useXitiTrackPageLoad() {
+  const [xitiStatus, setXitiStatus] = useState("pending"), {
+    currentApp
+  } = useOdeClient();
+  useEffect(() => {
+    trackPageLoad();
+  }, []);
+  const trackPageLoad = async () => {
+    if (!currentApp) {
+      setXitiStatus("[Xiti] Error, currentApp is not defined.");
+      return;
+    }
+    try {
+      await odeServices.analytics().trackPageLoad(window.location.pathname, currentApp), console.info(`[Xiti] Success tracking page ${window.location.pathname}`), setXitiStatus(`[Xiti] Success tracking page ${window.location.pathname}`);
+    } catch (e) {
+      console.error("[Xiti] Error Tracking Page Load", e), setXitiStatus(`[Xiti] Error Tracking Page Load: ${e}`);
+    }
+  };
+  return {
+    xitiStatus
+  };
+}
+export {
+  useXitiTrackPageLoad as default
+};

package/dist/ui/src/core/useZendeskGuide/useZendeskGuide.js

@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import { odeServices } from "edifice-ts-client";
+import useUser from "../useUser/useUser.js";
+import useIsAdml from "../useIsAdml/useIsAdml.js";
+import useHasWorkflow from "../useHasWorkflow/useHasWorkflow.js";
+import { useOdeClient } from "../OdeClientProvider/OdeClientProvider.js";
+import { useOdeTheme } from "../ThemeProvider/ThemeProvider.js";
+function useZendeskGuide() {
+  const {
+    currentLanguage
+  } = useOdeClient(), {
+    userDescription
+  } = useUser(), {
+    isAdml
+  } = useIsAdml(), {
+    theme
+  } = useOdeTheme(), isMobileView = window.innerWidth <= 768, hasSupportWorkflow = useHasWorkflow("net.atos.entng.support.controllers.DisplayController|view"), [locationPathname, setLocationPathname] = useState(""), [dataModule, setDataModule] = useState(void 0), setZendeskGuideLabels = () => {
+    const modulePathnameSplit = locationPathname.split("/");
+    let moduleLabel = "", labels = "";
+    if (dataModule != null && dataModule.labels && Object.keys(dataModule == null ? void 0 : dataModule.labels).length > 0 && modulePathnameSplit.length > 1) {
+      for (let i = 1; i < modulePathnameSplit.length; i++)
+        modulePathnameSplit[i].length > 0 && modulePathnameSplit[i].match(/\d/) == null && (moduleLabel.length === 0 ? moduleLabel = modulePathnameSplit[i] : moduleLabel = moduleLabel + "/" + modulePathnameSplit[i]);
+      dataModule != null && dataModule.labels && Object.prototype.hasOwnProperty.call(dataModule == null ? void 0 : dataModule.labels, moduleLabel) ? labels = dataModule == null ? void 0 : dataModule.labels[moduleLabel] : dataModule != null && dataModule.default && String(dataModule.default).length > 0 && (labels = dataModule == null ? void 0 : dataModule.default);
+    } else dataModule != null && dataModule.default && String(dataModule == null ? void 0 : dataModule.default).length > 0 && (labels = dataModule == null ? void 0 : dataModule.default);
+    if (modulePathnameSplit.includes("collaborativewall") && modulePathnameSplit.includes("id") && isMobileView && window.zE("webWidget", "hide"), labels.includes("${adml}") && (isAdml ? labels = labels.replace("${adml}", "adml") : labels = labels.replace("/${adml}", "")), labels.includes("${profile}")) {
+      const userProfile = userDescription == null ? void 0 : userDescription.profiles;
+      labels = labels.replace("${profile}", userProfile[0].toLowerCase());
+    }
+    labels.includes("${theme") && (theme != null && theme.is1d ? labels = labels.replace("${theme}", "1D") : labels = labels.replace("${theme}", "2D")), window.zE("webWidget", "helpCenter:setSuggestions", {
+      labels: [labels]
+    });
+  };
+  return useEffect(() => {
+    window.location.pathname !== locationPathname && setLocationPathname(window.location.pathname), !(dataModule === void 0 || Object.keys(dataModule).length === 0) && setZendeskGuideLabels();
+  }, [window.location.pathname, dataModule]), useEffect(() => {
+    document.getElementById("ze-snippet") || hasSupportWorkflow === void 0 || (async () => {
+      const zendeskGuideConfig = await odeServices.http().get("/zendeskGuide/config");
+      if (zendeskGuideConfig && zendeskGuideConfig.key && zendeskGuideConfig.key !== "") {
+        const scriptZendesk = document.createElement("script");
+        scriptZendesk.id = "ze-snippet", scriptZendesk.src = `https://static.zdassets.com/ekr/snippet.js?key=${zendeskGuideConfig.key}`, document.body.appendChild(scriptZendesk).onload = () => {
+          currentLanguage === "es" ? window.zE(function() {
+            window.zE.setLocale("es-419");
+          }) : window.zE(function() {
+            window.zE.setLocale("fr");
+          }), Object.keys(zendeskGuideConfig.module).length > 0 && setDataModule(zendeskGuideConfig.module), window.zE("webWidget", "show"), window.zE("webWidget", "updateSettings", {
+            webWidget: {
+              color: {
+                theme: zendeskGuideConfig.color || "#ffc400"
+              },
+              zIndex: 3,
+              launcher: {
+                mobile: {
+                  labelVisible: !0
+                }
+              },
+              contactForm: {
+                suppress: !hasSupportWorkflow
+              },
+              helpCenter: {
+                messageButton: {
+                  "*": "Assistance ENT",
+                  "es-419": "Asistencia ENT"
+                }
+              }
+            }
+          }), window.addEventListener("scroll", () => {
+            window.zE("webWidget", "updateSettings", {
+              webWidget: {
+                launcher: {
+                  mobile: {
+                    labelVisible: window.scrollY <= 5
+                  }
+                }
+              }
+            });
+          }), window.zE("webWidget:on", "open", function() {
+            hasSupportWorkflow && window.zE("webWidget", "updateSettings", {
+              webWidget: {
+                contactForm: {
+                  suppress: !1
+                }
+              }
+            });
+          }), window.zE("webWidget:on", "userEvent", function(ref) {
+            const category = ref.category, action = ref.action, properties = ref.properties;
+            action === "Contact Form Shown" && category === "Zendesk Web Widget" && properties && properties.name === "contact-form" && hasSupportWorkflow && (window.zE("webWidget", "updateSettings", {
+              webWidget: {
+                contactForm: {
+                  suppress: !0
+                }
+              }
+            }), window.zE("webWidget", "close"), window.open("/support", "_blank"));
+          });
+        };
+      }
+    })();
+  }, [hasSupportWorkflow]), null;
+}
+export {
+  useZendeskGuide as default
+};

package/dist/ui/src/hooks/useBrowserInfo/useBrowserInfo.js

@@ -0,0 +1,16 @@
+import UAParser from "ua-parser-js";
+function useBrowserInfo(userAgent) {
+  var _a, _b, _c;
+  const uaParser = new UAParser(userAgent), os = uaParser.getOS(), device = uaParser.getDevice(), browser = uaParser.getBrowser(), isIphone = ((_a = device.model) == null ? void 0 : _a.indexOf("iPhone")) != -1, isIpod = ((_b = device.model) == null ? void 0 : _b.indexOf("iPod")) != -1, isIpad = ((_c = device.model) == null ? void 0 : _c.indexOf("iPad")) != -1;
+  return {
+    os,
+    device,
+    browser,
+    isIphone,
+    isIpod,
+    isIpad
+  };
+}
+export {
+  useBrowserInfo as default
+};

package/dist/ui/src/hooks/useClickOutside/useClickOutside.js

@@ -0,0 +1,26 @@
+import { useRef, useEffect } from "react";
+const DEFAULT_EVENTS = ["mousedown", "touchstart"];
+function useClickOutside(handler, events, nodes) {
+  const ref = useRef();
+  return useEffect(() => {
+    const listener = (event) => {
+      const {
+        target
+      } = event ?? {};
+      if (Array.isArray(nodes)) {
+        const shouldIgnore = (target == null ? void 0 : target.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(target) && target.tagName !== "HTML";
+        nodes.every((node) => !!node && !event.composedPath().includes(node)) && !shouldIgnore && handler();
+      } else ref.current && !ref.current.contains(target) && handler();
+    };
+    return (events || DEFAULT_EVENTS).forEach((fn) => {
+      document.addEventListener(fn, listener);
+    }), () => {
+      (events || DEFAULT_EVENTS).forEach((fn) => {
+        document.removeEventListener(fn, listener);
+      });
+    };
+  }, [ref, handler, nodes, events]), ref;
+}
+export {
+  useClickOutside as default
+};

package/dist/ui/src/hooks/useDebounce/useDebounce.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  return useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]), debouncedValue;
+}
+export {
+  useDebounce as default
+};