@zextras/carbonio-ui-preview 0.0.1

package/dist/carbonio-ui-preview.es.js

@@ -0,0 +1,627 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useRef, useCallback, useEffect, useState, useMemo, createContext, useReducer } from "react";
+import { Text, Tooltip, IconButton, Container, useCombinedRefs, Portal, Button } from "@zextras/carbonio-design-system";
+import styled, { css } from "styled-components";
+import last from "lodash/last";
+import map from "lodash/map";
+import findIndex from "lodash/findIndex";
+import findLastIndex from "lodash/findLastIndex";
+import { Page, Document } from "react-pdf/dist/esm/entry.webpack";
+const FocusContainer = styled.span`
+	outline: none;
+	& > * {
+		outline: none;
+	}
+`;
+const FocusWithin = ({ children, returnFocus = true }) => {
+  const contentRef = useRef(null);
+  const startSentinelRef = useRef(null);
+  const endSentinelRef = useRef(null);
+  const onStartSentinelFocus = useCallback(() => {
+    if (contentRef.current) {
+      const node = last(contentRef.current.querySelectorAll("[tabindex]"));
+      node && node.focus();
+    }
+  }, []);
+  const onEndSentinelFocus = useCallback(() => {
+    if (contentRef.current) {
+      const node = contentRef.current.querySelector("[tabindex]");
+      node && node.focus();
+    }
+  }, []);
+  useEffect(() => {
+    var _a;
+    const documentElement = ((_a = window.top) == null ? void 0 : _a.document) || document;
+    const focusedElement = documentElement.activeElement;
+    contentRef.current && contentRef.current.focus();
+    startSentinelRef.current && startSentinelRef.current.addEventListener("focus", onStartSentinelFocus);
+    endSentinelRef.current && endSentinelRef.current.addEventListener("focus", onEndSentinelFocus);
+    const startSentinelRefSave = startSentinelRef.current;
+    const endSentinelRefSave = endSentinelRef.current;
+    return () => {
+      startSentinelRefSave && startSentinelRefSave.removeEventListener("focus", onStartSentinelFocus);
+      endSentinelRefSave && endSentinelRefSave.removeEventListener("focus", onEndSentinelFocus);
+      if (focusedElement && returnFocus) {
+        focusedElement.focus();
+      }
+    };
+  }, [onStartSentinelFocus, onEndSentinelFocus, returnFocus]);
+  return /* @__PURE__ */ React.createElement(FocusContainer, null, /* @__PURE__ */ React.createElement("span", {
+    tabIndex: 0,
+    ref: startSentinelRef
+  }), /* @__PURE__ */ React.createElement("div", {
+    tabIndex: -1,
+    ref: contentRef
+  }, children), /* @__PURE__ */ React.createElement("span", {
+    tabIndex: 0,
+    ref: endSentinelRef
+  }));
+};
+const HeaderContainer = styled.div`
+	display: flex;
+	justify-content: space-between;
+	padding: 16px;
+`;
+const LeftContainer = styled.div`
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 8px;
+`;
+const RightContainer = styled.div`
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	gap: 8px;
+`;
+const InfoContainer = styled.div`
+	width: fit-content;
+	& div {
+		line-height: 1.5;
+	}
+`;
+const UpperCaseText = styled(Text)`
+	text-transform: uppercase;
+`;
+const Header = ({ closeAction, actions, filename, extension, size }) => /* @__PURE__ */ React.createElement(HeaderContainer, null, /* @__PURE__ */ React.createElement(LeftContainer, null, closeAction && /* @__PURE__ */ React.createElement(Tooltip, {
+  label: closeAction.tooltipLabel,
+  disabled: !closeAction.tooltipLabel,
+  key: closeAction.id,
+  placement: closeAction.tooltipPlacement
+}, /* @__PURE__ */ React.createElement(IconButton, {
+  onClick: closeAction.onClick,
+  icon: closeAction.icon,
+  size: "medium",
+  backgroundColor: "transparent",
+  iconColor: "gray6"
+})), /* @__PURE__ */ React.createElement(InfoContainer, null, /* @__PURE__ */ React.createElement(Text, {
+  size: "small",
+  color: "gray6"
+}, filename), /* @__PURE__ */ React.createElement(UpperCaseText, {
+  size: "small",
+  color: "gray6"
+}, extension, extension && size && /* @__PURE__ */ React.createElement(React.Fragment, null, " \xB7 "), size))), /* @__PURE__ */ React.createElement(RightContainer, null, map(actions, ({ id, onClick, disabled, icon, tooltipLabel, tooltipPlacement }) => /* @__PURE__ */ React.createElement(Tooltip, {
+  label: tooltipLabel,
+  disabled: !tooltipLabel,
+  key: id,
+  placement: tooltipPlacement
+}, /* @__PURE__ */ React.createElement(IconButton, {
+  onClick,
+  disabled,
+  icon,
+  size: "medium",
+  backgroundColor: "transparent",
+  iconColor: "gray6"
+})))));
+const Overlay$1 = styled.div`
+	height: 100vh;
+	max-height: 100vh;
+	width: 100%;
+	max-width: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.8);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1003;
+`;
+const ExternalContainer$1 = styled.div`
+	height: 100vh;
+	max-height: 100vh;
+	width: 100vw;
+	max-width: 100vw;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+`;
+const MiddleContainer$1 = styled(Container)`
+	flex-grow: 1;
+`;
+const Image = styled.img`
+	max-height: 100%;
+	max-width: 100%;
+	min-height: 0;
+	min-width: 0;
+	align-self: center;
+	filter: drop-shadow(0px 5px 14px rgba(0, 0, 0, 0.35));
+	border-radius: 4px;
+`;
+const PreviewContainer$1 = styled.div.attrs({
+  $paddingVertical: "32px",
+  $paddingHorizontal: "16px",
+  $gap: "8px"
+})`
+	display: flex;
+	max-width: 100%;
+	max-height: calc(100vh - ${({ $paddingVertical }) => $paddingVertical} * 2);
+	flex-direction: column;
+	gap: ${({ $gap }) => $gap};
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	padding: ${({ $paddingVertical, $paddingHorizontal }) => `${$paddingVertical} ${$paddingHorizontal}`};
+	outline: none;
+	flex-grow: 1;
+`;
+const ImagePreview = React.forwardRef(function PreviewFn({
+  src,
+  show,
+  container,
+  disablePortal,
+  extension = "",
+  filename = "",
+  size = "",
+  actions = [],
+  closeAction,
+  onClose,
+  alt
+}, ref) {
+  const previewRef = useCombinedRefs(ref);
+  const imageRef = useRef(null);
+  const escapeEvent = useCallback((event) => {
+    if (event.key === "Escape") {
+      onClose(event);
+    }
+  }, [onClose]);
+  useEffect(() => {
+    if (show) {
+      document.addEventListener("keyup", escapeEvent);
+    }
+    return () => {
+      document.removeEventListener("keyup", escapeEvent);
+    };
+  }, [escapeEvent, show]);
+  const onOverlayClick = useCallback((event) => {
+    event.stopPropagation();
+    previewRef.current && !event.isDefaultPrevented() && (previewRef.current === event.target || !previewRef.current.contains(event.target)) && onClose(event);
+  }, [onClose, previewRef]);
+  return /* @__PURE__ */ React.createElement(Portal, {
+    show,
+    disablePortal,
+    container
+  }, /* @__PURE__ */ React.createElement(Overlay$1, {
+    onClick: onOverlayClick
+  }, /* @__PURE__ */ React.createElement(FocusWithin, null, /* @__PURE__ */ React.createElement(ExternalContainer$1, null, /* @__PURE__ */ React.createElement(Header, {
+    actions,
+    filename,
+    extension,
+    size,
+    closeAction
+  }), /* @__PURE__ */ React.createElement(MiddleContainer$1, {
+    orientation: "horizontal",
+    crossAlignment: "unset",
+    minHeight: 0
+  }, /* @__PURE__ */ React.createElement(PreviewContainer$1, {
+    ref: previewRef
+  }, /* @__PURE__ */ React.createElement(Image, {
+    alt: alt != null ? alt : filename,
+    src,
+    onError: () => console.log("TODO handle error"),
+    ref: imageRef
+  })))))));
+});
+const ContainerWithGap = styled(Container)`
+	gap: ${({ gap }) => gap};
+`;
+const FakeModalContainer = styled(ContainerWithGap)`
+	border-radius: 16px;
+	padding: 32px 64px 32px 64px;
+	margin: auto;
+`;
+const AttachmentLink = styled.a`
+	text-decoration: none;
+	//position: relative;
+`;
+const PreviewCriteriaAlternativeContent = ({ downloadSrc, openSrc }) => {
+  const ancRef = useRef(null);
+  const ancRef2 = useRef(null);
+  const downloadClick = useCallback((ev) => {
+    ev.preventDefault();
+    if (ancRef.current) {
+      ancRef.current.click();
+    }
+  }, [ancRef]);
+  const openClick = useCallback((ev) => {
+    ev.preventDefault();
+    if (ancRef2.current) {
+      ancRef2.current.click();
+    }
+  }, [ancRef2]);
+  return /* @__PURE__ */ React.createElement(FakeModalContainer, {
+    background: "gray0",
+    crossAlignment: "center",
+    height: "fit",
+    width: "fit",
+    gap: "16px"
+  }, /* @__PURE__ */ React.createElement(Text, {
+    size: "large",
+    color: "gray6"
+  }, "This item cannot be displayed"), /* @__PURE__ */ React.createElement(Text, {
+    size: "medium",
+    color: "gray6",
+    weight: "bold"
+  }, "This file exceeds the maximum weight we support and thus, it cannot be displayed"), /* @__PURE__ */ React.createElement(ContainerWithGap, {
+    orientation: "horizontal",
+    height: "fit",
+    gap: "8px"
+  }, downloadSrc && /* @__PURE__ */ React.createElement(Button, {
+    label: "DOWNLOAD FILE",
+    icon: "DownloadOutline",
+    size: "fill",
+    onClick: downloadClick
+  }), openSrc && /* @__PURE__ */ React.createElement(Button, {
+    label: "OPEN IN A SEPARATE TAB",
+    icon: "DiagonalArrowRightUp",
+    size: "fill",
+    onClick: openClick
+  })), /* @__PURE__ */ React.createElement(Text, {
+    size: "small",
+    color: "gray6"
+  }, "Please, download it or open it in a separate tab"), downloadSrc && /* @__PURE__ */ React.createElement(AttachmentLink, {
+    rel: "noopener",
+    ref: ancRef,
+    href: downloadSrc
+  }), openSrc && /* @__PURE__ */ React.createElement(AttachmentLink, {
+    rel: "noopener",
+    ref: ancRef2,
+    href: openSrc
+  }));
+};
+const CustomIconButton = styled(IconButton)`
+	${({ disabled }) => disabled && css`
+			background: rgba(204, 204, 204, 0.2);
+			& > svg {
+				background: unset;
+			}
+		`};
+	& > svg {
+		width: 20px;
+		height: 20px;
+	}
+`;
+const Overlay = styled.div`
+	height: 100vh;
+	max-height: 100vh;
+	width: 100%;
+	max-width: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.8);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 3;
+`;
+const MiddleContainer = styled(Container)`
+	flex-grow: 1;
+`;
+const ExternalContainer = styled.div`
+	height: 100vh;
+	max-height: 100vh;
+	width: 100vw;
+	max-width: 100vw;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+`;
+const Navigator = styled.div`
+	display: flex;
+	position: absolute;
+	z-index: 1;
+	bottom: 16px;
+	background-color: ${({ theme }) => theme.palette.gray0.regular};
+	align-self: center;
+	border-radius: 4px;
+	gap: 8px;
+	padding: 8px 16px;
+`;
+const PreviewContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	//  https://bhch.github.io/posts/2021/04/centring-flex-items-and-allowing-overflow-scroll/
+	//justify-content: center;
+	//align-items: center;
+	// justify-content and align-items conflict with overflow management
+	overflow: auto;
+	outline: none;
+
+	&::-webkit-scrollbar {
+		width: 7px;
+		height: 7px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background-color: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: ${({ theme }) => theme.palette.gray3.regular};
+		border-radius: 4px;
+	}
+
+	& > .react-pdf__Document {
+		//padding-right: 17px;
+		padding-bottom: 16px;
+		margin: auto;
+		display: flex;
+		gap: 16px;
+		flex-direction: column;
+	}
+
+	& .react-pdf__message {
+		color: white;
+	}
+`;
+const zoomStep = [800, 1e3, 1200, 1400, 1600, 2e3, 2400, 3200];
+const PdfPreview = React.forwardRef(function PreviewFn2({
+  src,
+  show,
+  container,
+  disablePortal,
+  extension = "",
+  filename = "",
+  size = "",
+  actions = [],
+  closeAction,
+  onClose,
+  useFallback = false,
+  customContent,
+  renderTextLayer = false,
+  openSrc
+}, ref) {
+  const previewRef = useCombinedRefs(ref);
+  const [numPages, setNumPages] = useState(null);
+  const $closeAction = useMemo(() => {
+    if (closeAction) {
+      return __spreadValues({
+        onClick: onClose
+      }, closeAction);
+    }
+    return closeAction;
+  }, [closeAction, onClose]);
+  const onOverlayClick = useCallback((event) => {
+    event.stopPropagation();
+    (useFallback || numPages) && previewRef.current && !event.isDefaultPrevented() && (previewRef.current === event.target || !previewRef.current.contains(event.target)) && onClose(event);
+  }, [numPages, onClose, previewRef, useFallback]);
+  const [currentZoom, setCurrentZoom] = useState(zoomStep[0]);
+  const [incrementable, setIncrementable] = useState(true);
+  const [decrementable, setDecrementable] = useState(false);
+  const [fitToWidthActive, setFitToWidthActive] = useState(false);
+  useEffect(() => {
+    if (!show) {
+      setCurrentZoom(zoomStep[0]);
+      setIncrementable(true);
+      setDecrementable(false);
+      setFitToWidthActive(false);
+    }
+  }, [show]);
+  const increaseOfOneStep = useCallback((ev) => {
+    ev.stopPropagation();
+    if (incrementable) {
+      const targetIndex = findIndex(zoomStep, (step) => step > currentZoom);
+      if (targetIndex >= 0) {
+        setCurrentZoom(zoomStep[targetIndex]);
+        if (targetIndex === zoomStep.length - 1) {
+          setIncrementable(false);
+        }
+        if (targetIndex > 0) {
+          setDecrementable(true);
+        }
+      }
+    }
+    setFitToWidthActive(false);
+  }, [currentZoom, incrementable]);
+  const decreaseOfOneStep = useCallback((ev) => {
+    ev.stopPropagation();
+    if (decrementable) {
+      const targetIndex = findLastIndex(zoomStep, (step) => step < currentZoom);
+      if (targetIndex >= 0) {
+        setCurrentZoom(zoomStep[targetIndex]);
+        if (targetIndex === 0) {
+          setDecrementable(false);
+        }
+        if (targetIndex < zoomStep.length - 1) {
+          setIncrementable(true);
+        }
+      }
+    }
+    setFitToWidthActive(false);
+  }, [currentZoom, decrementable]);
+  const fitToWidth = useCallback((ev) => {
+    var _a, _b, _c;
+    ev.stopPropagation();
+    if (previewRef.current) {
+      setCurrentZoom((_a = previewRef.current) == null ? void 0 : _a.clientWidth);
+      setIncrementable(((_b = previewRef.current) == null ? void 0 : _b.clientWidth) < zoomStep[zoomStep.length - 1]);
+      setDecrementable(((_c = previewRef.current) == null ? void 0 : _c.clientWidth) > zoomStep[0]);
+      setFitToWidthActive(true);
+    }
+  }, [previewRef]);
+  useEffect(() => {
+    if (show && fitToWidthActive) {
+      window.addEventListener("resize", fitToWidth);
+    }
+    return () => {
+      window.removeEventListener("resize", fitToWidth);
+    };
+  }, [fitToWidth, previewRef, show, fitToWidthActive]);
+  const resetWidth = useCallback((ev) => {
+    ev.stopPropagation();
+    setCurrentZoom(zoomStep[0]);
+    setIncrementable(true);
+    setDecrementable(false);
+    setFitToWidthActive(false);
+  }, []);
+  const pageElements = useMemo(() => {
+    if (numPages) {
+      return map(new Array(numPages), (el, index) => /* @__PURE__ */ React.createElement(Page, {
+        key: `page_${index + 1}`,
+        pageNumber: index + 1,
+        width: currentZoom,
+        renderTextLayer
+      }));
+    }
+    return [];
+  }, [currentZoom, numPages, renderTextLayer]);
+  const onDocumentLoadSuccess = useCallback((args) => {
+    setNumPages(args.numPages);
+  }, []);
+  const file = useMemo(() => ({ url: src }), [src]);
+  const $customContent = useMemo(() => {
+    if (useFallback) {
+      return customContent || /* @__PURE__ */ React.createElement(PreviewCriteriaAlternativeContent, {
+        downloadSrc: src,
+        openSrc
+      });
+    }
+    return void 0;
+  }, [customContent, openSrc, src, useFallback]);
+  return /* @__PURE__ */ React.createElement(Portal, {
+    show,
+    disablePortal,
+    container
+  }, /* @__PURE__ */ React.createElement(Overlay, {
+    onClick: onOverlayClick
+  }, /* @__PURE__ */ React.createElement(FocusWithin, null, /* @__PURE__ */ React.createElement(ExternalContainer, null, !$customContent && /* @__PURE__ */ React.createElement(Navigator, {
+    onClick: (ev) => ev.stopPropagation()
+  }, /* @__PURE__ */ React.createElement(Tooltip, {
+    label: decrementable ? "Zoom out" : "Minimum zoom level reached"
+  }, /* @__PURE__ */ React.createElement(CustomIconButton, {
+    disabled: !decrementable,
+    icon: "Minus",
+    size: "small",
+    backgroundColor: "gray0",
+    iconColor: "gray6",
+    onClick: decreaseOfOneStep
+  })), /* @__PURE__ */ React.createElement(Tooltip, {
+    label: fitToWidthActive ? "Reset zoom" : "Fit to width"
+  }, /* @__PURE__ */ React.createElement(CustomIconButton, {
+    icon: fitToWidthActive ? "MinimizeOutline" : "MaximizeOutline",
+    size: "small",
+    backgroundColor: "gray0",
+    iconColor: "gray6",
+    onClick: fitToWidthActive ? resetWidth : fitToWidth
+  })), /* @__PURE__ */ React.createElement(Tooltip, {
+    label: incrementable ? "Zoom in" : "Maximum zoom level reached"
+  }, /* @__PURE__ */ React.createElement(CustomIconButton, {
+    icon: "Plus",
+    size: "small",
+    backgroundColor: "gray0",
+    iconColor: "gray6",
+    onClick: increaseOfOneStep,
+    disabled: !incrementable
+  }))), /* @__PURE__ */ React.createElement(Header, {
+    actions,
+    filename,
+    extension,
+    size,
+    closeAction: $closeAction
+  }), /* @__PURE__ */ React.createElement(MiddleContainer, {
+    orientation: "horizontal",
+    crossAlignment: "unset",
+    minHeight: 0
+  }, /* @__PURE__ */ React.createElement(PreviewContainer, {
+    ref: previewRef
+  }, $customContent || /* @__PURE__ */ React.createElement(Document, {
+    file,
+    onLoadSuccess: onDocumentLoadSuccess
+  }, pageElements)))))));
+});
+const PreviewWrapper = (_a) => {
+  var _b = _a, { previewType } = _b, props = __objRest(_b, ["previewType"]);
+  return previewType === "pdf" ? /* @__PURE__ */ React.createElement(PdfPreview, __spreadValues({}, props)) : /* @__PURE__ */ React.createElement(ImagePreview, __spreadValues({}, props));
+};
+const PreviewsManagerContext = createContext({
+  createPreview: () => void 0
+});
+const PreviewManager = ({ children }) => {
+  const [previews, dispatchPreviews] = useReducer((state, action) => {
+    switch (action.type) {
+      case "set": {
+        return [...state, action.value];
+      }
+      case "empty": {
+        return [];
+      }
+      default: {
+        return state;
+      }
+    }
+  }, []);
+  const createPreview = useCallback((_a) => {
+    var _b = _a, { onClose } = _b, props = __objRest(_b, ["onClose"]);
+    const closePreview = (ev) => {
+      if (onClose)
+        onClose(ev);
+      dispatchPreviews({ type: "empty" });
+    };
+    const preview = /* @__PURE__ */ React.createElement(PreviewWrapper, __spreadProps(__spreadValues({
+      key: props.src
+    }, props), {
+      show: true,
+      onClose: closePreview
+    }));
+    dispatchPreviews({
+      type: "set",
+      value: preview
+    });
+  }, [dispatchPreviews]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PreviewsManagerContext.Provider, {
+    value: { createPreview }
+  }, children), previews);
+};
+export { ImagePreview, PdfPreview, PreviewManager, PreviewWrapper, PreviewsManagerContext };

package/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "@zextras/carbonio-ui-preview",
+	"version": "0.0.1",
+	"description": "Preview ui utility for Zextras Carbonio",
+	"main": "dist/carbonio-ui-preview.es.js",
+	"module": "dist/carbonio-ui-preview.es.js",
+	"types": "dist/carbonio-ui-preview.es.d.ts",
+	"scripts": {
+		"build": "vite build",
+		"build:watch": "vite build --watch",
+		"_postinstall": "is-ci || husky install",
+		"prepublishOnly": "pinst --disable",
+		"postpublish": "pinst --enable",
+		"type-check": "tsc --noEmit",
+		"type-check:watch": "npm run type-check -- --watch",
+		"lint": "eslint --ext .js,.jsx,.ts,.tsx --resolve-plugins-relative-to node_modules/@zextras/carbonio-ui-configs src",
+		"test": "jest"
+	},
+	"keywords": [],
+	"author": "Zextras SF Team <https://www.zextras.com/carbonio/>",
+	"license": "AGPL-3.0-only",
+	"devDependencies": {
+		"@commitlint/cli": "14.1.0",
+		"@commitlint/config-conventional": "14.1.0",
+		"@types/lodash": "^4.14.181",
+		"@types/react": "17.0.36",
+		"@types/react-dom": "17.0.11",
+		"@types/react-pdf": "^5.0.9",
+		"@types/styled-components": "^5.1.15",
+		"@zextras/carbonio-ui-configs": "^0.1.11",
+		"eslint-plugin-notice": "^0.9.10",
+		"husky": "^5.2.0",
+		"is-ci": "3.0.1",
+		"pinst": "2.1.6",
+		"vite": "^2.9.1",
+		"vite-dts": "^1.0.4"
+	},
+	"dependencies": {
+		"core-js": "3.19.1",
+		"react-pdf": "^5.7.1"
+	},
+	"peerDependencies": {
+		"@zextras/carbonio-design-system": "^0.1.4",
+		"lodash": "^4.17.21",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"styled-components": "^5.3.3"
+	},
+	"browserslist": [
+		">1%",
+		"last 1 version",
+		"Firefox ESR",
+		"not dead"
+	]
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/** Base components */
+export * from './preview/ImagePreview';
+export * from './preview/PdfPreview';
+/** Utils */
+export * from './preview/PreviewManager';
+export * from './preview/PreviewWrapper';

package/src/preview/ContainerWithGap.tsx

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { Container } from '@zextras/carbonio-design-system';
+import styled from 'styled-components';
+
+export const ContainerWithGap = styled(Container)`
+	gap: ${({ gap }): string => gap};
+`;