@zextras/carbonio-ui-preview 0.1.3 → 0.2.0

package/package.json

@@ -1,44 +1,73 @@
 {
 	"name": "@zextras/carbonio-ui-preview",
-	"version": "0.1.3",
-	"description": "Preview utility for Zextras Carbonio",
-	"main": "src/index.ts",
+	"version": "0.2.0",
+	"description": "Preview ui utility for Zextras Carbonio",
+	"main": "lib/index.js",
+	"module": "lib-esm/index.js",
+	"types": "lib/index.d.ts",
 	"files": [
-		"src/*",
-		"babel.config.js"
+		"/lib",
+		"/lib-esm"
 	],
 	"scripts": {
-		"_postinstall": "is-ci || husky install",
-		"prepublishOnly": "pinst --disable",
-		"postpublish": "pinst --enable",
+		"build": "tsc",
+		"build-esm": "tsc -m es6 --outDir lib-esm",
+		"clean": "rm -rf lib lib-esm",
+		"build-all": "npm run clean && npm run build && npm run build-esm",
+		"prepare": "is-ci || husky install",
+		"prepack": "npm run build-all",
 		"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": "echo jest"
+		"packTo": "npm pack --pack-destination $PKG_PATH && cd $PKG_PATH && npm i zextras-carbonio-ui-preview-$npm_package_version.tgz",
+		"deploy": "npm pack && rm -rf $PKG_PATH/node_modules/@zextras/carbonio-ui-preview/* && tar -xf zextras-carbonio-ui-preview-$npm_package_version.tgz -C $PKG_PATH/node_modules/@zextras/carbonio-ui-preview/ --strip-components 1",
+		"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",
+		"@babel/core": "^7.16.0",
+		"@babel/plugin-proposal-class-properties": "^7.16.0",
+		"@babel/plugin-transform-runtime": "^7.16.4",
+		"@babel/preset-env": "^7.16.4",
+		"@babel/preset-react": "^7.16.0",
+		"@babel/preset-typescript": "^7.16.0",
+		"@commitlint/cli": "^17.0.3",
+		"@commitlint/config-conventional": "^17.0.3",
+		"@faker-js/faker": "^7.3.0",
+		"@testing-library/jest-dom": "^5.16.4",
+		"@testing-library/react": "^12.1.5",
+		"@testing-library/user-event": "^14.4.0",
+		"@types/jest": "^28.1.6",
 		"@types/lodash": "^4.14.181",
-		"@types/react": "17.0.36",
-		"@types/react-dom": "17.0.11",
+		"@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",
+		"babel-jest": "^28.1.3",
+		"babel-plugin-i18next-extract": "^0.8.3",
+		"babel-plugin-styled-components": "^2.0.1",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jest-dom": "^4.0.2",
 		"eslint-plugin-notice": "^0.9.10",
-		"husky": "^5.2.0",
-		"is-ci": "3.0.1",
-		"pinst": "2.1.6"
+		"eslint-plugin-testing-library": "^5.6.0",
+		"eslint-plugin-unused-imports": "^2.0.0",
+		"husky": "^8.0.1",
+		"is-ci": "^3.0.1",
+		"jest": "^28.1.3",
+		"jest-canvas-mock": "^2.4.0",
+		"jest-environment-jsdom": "^28.1.3",
+		"jest-fail-on-console": "^2.4.2",
+		"jest-junit": "^14.0.0"
 	},
 	"dependencies": {
-		"@types/react-pdf": "^5.0.9",
-		"core-js": "3.19.1",
-		"react-pdf": "^5.7.1"
+		"core-js": "^3.19.1",
+		"react-pdf": "^5.7.2"
 	},
 	"peerDependencies": {
-		"@zextras/carbonio-design-system": "^0.2.0",
+		"@zextras/carbonio-design-system": "^0.4.0",
 		"lodash": "^4.17.21",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",

package/babel.config.js

@@ -1,13 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-module.exports = {
-	presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
-	plugins: [
-		'@babel/plugin-transform-runtime',
-		'@babel/plugin-proposal-class-properties',
-		'babel-plugin-styled-components'
-	]
-};

package/src/preview/ContainerWithGap.tsx

@@ -1,11 +0,0 @@
-/*
- * 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};
-`;

package/src/preview/FocusWithin.tsx

@@ -1,76 +0,0 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import last from 'lodash/last';
-import styled from 'styled-components';
-
-const FocusContainer = styled.span`
-	outline: none;
-	& > * {
-		outline: none;
-	}
-`;
-
-interface FocusContainerProps {
-	returnFocus?: boolean;
-	children: React.ReactChild | React.ReactChildren;
-}
-
-const FocusWithin = ({ children, returnFocus = true }: FocusContainerProps): JSX.Element => {
-	const contentRef = useRef<HTMLDivElement | null>(null);
-	const startSentinelRef = useRef<HTMLDivElement | null>(null);
-	const endSentinelRef = useRef<HTMLDivElement | null>(null);
-
-	const onStartSentinelFocus = useCallback(() => {
-		if (contentRef.current) {
-			const node = last(contentRef.current.querySelectorAll<HTMLElement>('[tabindex]'));
-			node && node.focus();
-		}
-	}, []);
-
-	const onEndSentinelFocus = useCallback(() => {
-		if (contentRef.current) {
-			const node = contentRef.current.querySelector<HTMLElement>('[tabindex]');
-			node && node.focus();
-		}
-	}, []);
-
-	useEffect(() => {
-		const documentElement = window.top?.document || document;
-		const focusedElement = documentElement.activeElement as HTMLElement;
-
-		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 (): void => {
-			startSentinelRefSave &&
-				startSentinelRefSave.removeEventListener('focus', onStartSentinelFocus);
-			endSentinelRefSave && endSentinelRefSave.removeEventListener('focus', onEndSentinelFocus);
-			// return focus to previous initial element
-			if (focusedElement && returnFocus) {
-				focusedElement.focus();
-			}
-		};
-	}, [onStartSentinelFocus, onEndSentinelFocus, returnFocus]);
-
-	return (
-		<FocusContainer>
-			<span tabIndex={0} ref={startSentinelRef} />
-			<div tabIndex={-1} ref={contentRef}>
-				{children}
-			</div>
-			<span tabIndex={0} ref={endSentinelRef} />
-		</FocusContainer>
-	);
-};
-
-export default FocusWithin;

package/src/preview/Header.tsx

@@ -1,122 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import React from 'react';
-
-import { IconButton, Text, Tooltip } from '@zextras/carbonio-design-system';
-import map from 'lodash/map';
-import styled from 'styled-components';
-
-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;
-`;
-
-interface HeaderAction {
-	/** id used as key */
-	id: string;
-	/** Action called on click */
-	onClick?: React.ReactEventHandler;
-	/** Icon from the theme */
-	icon: string;
-	/** Label to show as tooltip for the action */
-	tooltipLabel?: string;
-	tooltipPlacement?: React.ComponentPropsWithRef<typeof Tooltip>['placement'];
-	/** Disabled status for the action */
-	disabled?: boolean;
-}
-
-export interface HeaderProps {
-	/** Left Action for the preview */
-	closeAction?: HeaderAction;
-	/** Actions for the preview */
-	actions: HeaderAction[];
-	/** Extension of the file, shown as info */
-	extension: string;
-	/** Name of the file, shown as info */
-	filename: string;
-	/** Size of the file, shown as info */
-	size: string;
-}
-
-const Header: React.VFC<HeaderProps> = ({ closeAction, actions, filename, extension, size }) => (
-	<HeaderContainer>
-		<LeftContainer>
-			{closeAction && (
-				<Tooltip
-					label={closeAction.tooltipLabel}
-					disabled={!closeAction.tooltipLabel}
-					key={closeAction.id}
-					placement={closeAction.tooltipPlacement}
-				>
-					<IconButton
-						onClick={closeAction.onClick}
-						icon={closeAction.icon}
-						size="medium"
-						backgroundColor="transparent"
-						iconColor="gray6"
-					/>
-				</Tooltip>
-			)}
-			<InfoContainer>
-				<Text size="small" color="gray6">
-					{filename}
-				</Text>
-				<UpperCaseText size="small" color="gray6">
-					{extension}
-					{extension && size && <> &middot; </>}
-					{size}
-				</UpperCaseText>
-			</InfoContainer>
-		</LeftContainer>
-		<RightContainer>
-			{map(actions, ({ id, onClick, disabled, icon, tooltipLabel, tooltipPlacement }) => (
-				<Tooltip
-					label={tooltipLabel}
-					disabled={!tooltipLabel}
-					key={id}
-					placement={tooltipPlacement}
-				>
-					<IconButton
-						onClick={onClick}
-						disabled={disabled}
-						icon={icon}
-						size="medium"
-						backgroundColor="transparent"
-						iconColor="gray6"
-					/>
-				</Tooltip>
-			))}
-		</RightContainer>
-	</HeaderContainer>
-);
-
-export default Header;

package/src/preview/ImagePreview.tsx

@@ -1,194 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { Container, Portal, useCombinedRefs } from '@zextras/carbonio-design-system';
-import styled from 'styled-components';
-
-import FocusWithin from './FocusWithin';
-import Header, { HeaderProps } from './Header';
-
-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: 1003;
-`;
-
-const ExternalContainer = styled.div`
-	height: 100vh;
-	max-height: 100vh;
-	width: 100vw;
-	max-width: 100vw;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-`;
-
-const MiddleContainer = 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 = styled.div.attrs({
-	$paddingVertical: '32px',
-	$paddingHorizontal: '16px',
-	$gap: '8px'
-})`
-	display: flex;
-	max-width: 100%;
-	max-height: calc(100vh - ${({ $paddingVertical }): string => $paddingVertical} * 2);
-	flex-direction: column;
-	gap: ${({ $gap }): string => $gap};
-	justify-content: center;
-	align-items: center;
-	overflow: hidden;
-	padding: ${({ $paddingVertical, $paddingHorizontal }): string =>
-		`${$paddingVertical} ${$paddingHorizontal}`};
-	outline: none;
-	flex-grow: 1;
-`;
-
-type ImagePreviewProps = Partial<HeaderProps> & {
-	/**
-	 * HTML node where to insert the Portal's children.
-	 * The default value is 'window.top.document'.
-	 * */
-	container?: React.RefObject<HTMLElement>;
-	/** Flag to disable the Portal implementation */
-	disablePortal?: boolean;
-	/** Flag to show or hide Portal's content */
-	show: boolean;
-	/** preview img source */
-	src: string;
-	/** Callback to hide the preview */
-	onClose: (e: React.SyntheticEvent | KeyboardEvent) => void;
-	/** Alternative text for image */
-	alt?: string;
-};
-
-const ImagePreview = React.forwardRef<HTMLDivElement, ImagePreviewProps>(function PreviewFn(
-	{
-		src,
-		show,
-		container,
-		disablePortal,
-		extension = '',
-		filename = '',
-		size = '',
-		actions = [],
-		closeAction,
-		onClose,
-		alt
-	},
-	ref
-) {
-	const previewRef: React.MutableRefObject<HTMLDivElement | null> = useCombinedRefs(ref);
-	const imageRef = useRef<HTMLImageElement | null>(null);
-
-	const escapeEvent = useCallback<(e: KeyboardEvent) => void>(
-		(event) => {
-			if (event.key === 'Escape') {
-				onClose(event);
-			}
-		},
-		[onClose]
-	);
-
-	useEffect(() => {
-		if (show) {
-			document.addEventListener('keyup', escapeEvent);
-		}
-
-		return (): void => {
-			document.removeEventListener('keyup', escapeEvent);
-		};
-	}, [escapeEvent, show]);
-
-	const onOverlayClick = useCallback<React.ReactEventHandler>(
-		(event) => {
-			// TODO: stop propagation or not?
-			event.stopPropagation();
-			previewRef.current &&
-				!event.isDefaultPrevented() &&
-				(previewRef.current === event.target ||
-					!previewRef.current.contains(event.target as Node)) &&
-				onClose(event);
-		},
-		[onClose, previewRef]
-	);
-
-	return (
-		<Portal show={show} disablePortal={disablePortal} container={container}>
-			<Overlay onClick={onOverlayClick}>
-				<FocusWithin>
-					<ExternalContainer>
-						<Header
-							actions={actions}
-							filename={filename}
-							extension={extension}
-							size={size}
-							closeAction={closeAction}
-						/>
-						<MiddleContainer orientation="horizontal" crossAlignment="unset" minHeight={0}>
-							{/* TODO: uncomment when navigation between items will be implemented */}
-							{/* <Container width="fit"> */}
-							{/*	<Padding left="small" right="small"> */}
-							{/*		<IconButton */}
-							{/*			icon="ArrowBackOutline" */}
-							{/*			size="medium" */}
-							{/*			backgroundColor="gray0" */}
-							{/*			iconColor="gray6" */}
-							{/*			borderRadius="round" */}
-							{/*		/> */}
-							{/*	</Padding> */}
-							{/* </Container> */}
-							<PreviewContainer ref={previewRef}>
-								<Image
-									alt={alt ?? filename}
-									src={src}
-									onError={(): void => console.log('TODO handle error')}
-									ref={imageRef}
-								/>
-							</PreviewContainer>
-							{/* TODO: uncomment when navigation between items will be implemented */}
-							{/* <Container width="fit"> */}
-							{/*	<Padding left="small" right="small"> */}
-							{/*		<IconButton */}
-							{/*			icon="ArrowForwardOutline" */}
-							{/*			size="medium" */}
-							{/*			backgroundColor="gray0" */}
-							{/*			iconColor="gray6" */}
-							{/*			borderRadius="round" */}
-							{/*		/> */}
-							{/*	</Padding> */}
-							{/* </Container> */}
-						</MiddleContainer>
-					</ExternalContainer>
-				</FocusWithin>
-			</Overlay>
-		</Portal>
-	);
-});
-
-export { ImagePreview, ImagePreviewProps };