microboard-ui-temp 0.0.3

package/src/features/ImportMiro/ImportMiroBoards/Notifications/WarnNotification.tsx

@@ -0,0 +1,68 @@
+import styles from "../ImportMiro.module.css";
+import { useTranslation } from "react-i18next";
+import React, { useEffect } from "react";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Notification } from "shared/ui-lib/Notification";
+import { InfoColor } from "shared/ui-lib/Notification/Notification";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+
+interface WarnNotificationProps {
+	className?: string;
+}
+
+export const WARN_NOTIFICATION = Symbol("warnNotification");
+
+export const WarnNotification = ({
+	className,
+}: WarnNotificationProps): React.ReactElement => {
+	const { t } = useTranslation();
+	const { isModalOpen, closeModal } = useUiModalContext();
+	const isOpen = isModalOpen("warnNotification");
+
+	useEffect(() => {
+		if (isOpen) {
+			setTimeout(() => {
+				closeModal();
+			}, 10000);
+		}
+	}, [isOpen]);
+
+	return (
+		<Notification
+			isOpen={isOpen}
+			className={className}
+			setIsOpen={closeModal}
+			infoIcon
+			infoColor={InfoColor.warn}
+			cross
+		>
+			<div className={styles.notificationWr}>
+				<h4 className={styles.notificationTitle}>
+					{t("miro.notifications.warn")}
+				</h4>
+				<p className={styles.notificationSuccessDescription}>
+					{t("miro.notifications.warnFirstDescription")}
+					<a
+						href="https://developers.miro.com/docs/miro-rest-api-introduction#what-can-i-do-with-the-rest-api"
+						target="_blank"
+						rel="noreferrer"
+						className={styles.notificationSuccessLink}
+					>
+						{t("miro.notifications.warnLinkDescription")}
+					</a>
+					<br />
+					<br />
+					{t("miro.notifications.warnSecondDescription")}
+				</p>
+				<UiButton
+					variant="quaternary"
+					onClick={closeModal}
+					className={styles.notificationBtn}
+					size="lg"
+				>
+					{t("miro.notifications.okBtn")}
+				</UiButton>
+			</div>
+		</Notification>
+	);
+};

package/src/features/ImportMiro/ImportMiroBoards/Notifications/index.ts

@@ -0,0 +1,5 @@
+export { ErrorNotification } from "./ErrorNotification";
+export { LoadingNotification } from "./LoadingNotification";
+export { SuccessNotification } from "./SuccessNotification";
+export { WarnClipboardNotification } from "./WarnClipboardNotification";
+export { WarnNotification } from "./WarnNotification";

package/src/features/ImportMiro/ImportMiroStartModal/ImportMiroStartModal.module.css

@@ -0,0 +1,35 @@
+.modal {
+	max-width: 608px;
+	width: 100%;
+}
+
+.wr {
+	padding: 32px 64px !important;
+}
+
+.title {
+	font-size: 36px;
+	line-height: 1.22;
+	margin-bottom: 8px;
+}
+
+.text {
+	font-size: 14px;
+	line-height: 1.43;
+	margin-bottom: 16px;
+}
+
+.btnsWr {
+	display: flex;
+}
+
+.cancelBtn,
+.goToMiroBtn {
+	max-width: max-content;
+	padding: 10px 12px;
+}
+
+.cancelBtn {
+	margin-right: 1rem;
+	font-weight: 400;
+}

package/src/features/ImportMiro/ImportMiroStartModal/ImportMiroStartModal.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./ImportMiroStartModal.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+
+export const IMPORT_MIRO_START_MODAL = Symbol("startImportMiro");
+
+export const ImportMiroStartModal = (): JSX.Element => {
+	const { t } = useTranslation();
+	const { closeModal } = useUiModalContext();
+
+	const onClick = (): void => {
+		window.location.href = "https://miro.com/app/dashboard/";
+	};
+
+	return (
+		<UiModal
+			modalId={IMPORT_MIRO_START_MODAL}
+			className={styles.wr}
+			wrClassName={styles.modal}
+		>
+			<h3 className={styles.title}>{t("miro.importMiro")}</h3>
+			<p className={styles.text}>{t("miro.startModal.text")}</p>
+			<div className={styles.btnsWr}>
+				<UiButton
+					variant="tertiary"
+					onClick={closeModal}
+					className={styles.cancelBtn}
+					size="lg"
+				>
+					{t("miro.startModal.cancel")}
+				</UiButton>
+				<UiButton
+					id={"miro"}
+					variant="primary"
+					onClick={onClick}
+					className={styles.goToMiroBtn}
+					size="lg"
+				>
+					{t("miro.startModal.goToMiroBtn")}
+				</UiButton>
+			</div>
+		</UiModal>
+	);
+};

package/src/features/ImportMiro/index.ts

@@ -0,0 +1,5 @@
+export { ImportMiroStartModal } from "./ImportMiroStartModal/ImportMiroStartModal";
+export { AuthClipboardModal } from "./AuthClipboardModal/AuthClipboardModal";
+export { ImgAuthClipboardModal } from "./ImgAuthClipboardModal/ImgAuthClipboardModal";
+
+export { ImportMiro } from "./ImportMiroBoards/ImportMiro";

package/src/features/ItemTooltip/ItemTooltip.tsx

@@ -0,0 +1,77 @@
+import { useDomMbr } from "App/useDomMbr";
+import { useAppContext } from "features/AppContext";
+import { PanelContext } from "features/ContextPanel/PanelContext";
+import { MiroBoardItemTypes } from "features/ImportMiro/ImportMiroBoards/MiroModels";
+import React, { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Tooltip } from "shared/ui-lib/Tooltip";
+
+export function ItemTooltip(): JSX.Element {
+	const { app, board } = useAppContext();
+	const { t } = useTranslation();
+	const { items, camera } = board;
+	const [openedMenu, setOpenedMenu] = useState("HoverUnderPointer");
+	const panelRef = useRef<HTMLDivElement>(null);
+
+	const placeholders = items
+		.getUnderPointer()
+		.filter(
+			item =>
+				item.itemType === "Placeholder" &&
+				item.getMiroData()?.type !== MiroBoardItemTypes.IMAGE,
+		);
+
+	const mbr = useDomMbr({
+		app,
+		board,
+		ref: panelRef,
+		subjects: undefined,
+		targetMbr: placeholders[0]?.getMbr(),
+	});
+
+	const toggleMenu = (menu: string): void => {
+		setOpenedMenu(prev => (prev === menu ? "HoverUnderPointer" : menu));
+	};
+
+	const windowHeight = board.camera.window.height;
+
+	const isHoverUnderPointer =
+		board.selection.getContext() === "HoverUnderPointer";
+
+	const isPlaceholder = placeholders.length === 1;
+
+	const placeholderMbr = placeholders[0]
+		?.getMbr()
+		.getTransformed(camera.getMatrix());
+	const tooltipPosition =
+		placeholderMbr && placeholderMbr.bottom < mbr.top ? "bottom" : "top";
+
+	return (
+		<PanelContext.Provider
+			value={{
+				openedMenu,
+				panelMbr: mbr,
+				toggleMenu,
+				windowHeight,
+			}}
+		>
+			{isHoverUnderPointer && isPlaceholder && (
+				<Tooltip
+					tooltipAlign={"left"}
+					tooltip={t("itemTooltips.placeholder")}
+					borderRadius="radiusMd"
+					padding="paddingMd"
+					style={{
+						display: "flex",
+						position: "absolute",
+						left: mbr.left,
+						top: mbr.top,
+						height: "fit-content",
+					}}
+					ref={panelRef}
+					tooltipPosition={tooltipPosition}
+				/>
+			)}
+		</PanelContext.Provider>
+	);
+}

package/src/features/ItemTooltip/index.ts

@@ -0,0 +1 @@
+export { ItemTooltip } from "./ItemTooltip";

package/src/features/ItemsProvider/ItemsProvider.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { useAppContext } from "features/AppContext";
+import { VideoCanvasControls } from "features/VideoPlayer/VideoCanvasControls";
+
+interface Props {
+	itemsComponents: Record<string, React.ComponentType<any>>;
+}
+
+export const ItemsProvider = ({ itemsComponents }: Props): JSX.Element => {
+	const { board } = useAppContext();
+	const forceUpdate = useForceUpdate();
+
+	useAppSubscription({
+		subjects: ["items", "camera"],
+		observer: () => {
+			forceUpdate();
+		},
+	});
+
+	const items = board.items.listAll().filter(item => {
+		if (!item.shouldUseCustomRender) {
+			return false;
+		}
+
+		if (!item.shouldRenderOutsideViewRect) {
+			return item.isEnclosedOrCrossedBy(board.camera.getMbr());
+		}
+		return true;
+	});
+
+	return (
+		<>
+			{items.map(item => {
+				const ItemComponent = itemsComponents[item.itemType];
+				if (!ItemComponent) {
+					return null;
+				}
+				return <ItemComponent key={item.id} item={item} />;
+			})}
+			<VideoCanvasControls />
+		</>
+	);
+};

package/src/features/ItemsProvider/index.ts

@@ -0,0 +1 @@
+export { ItemsProvider } from "./ItemsProvider.tsx";

package/src/features/LandingMenu/LandingMenu.module.css

@@ -0,0 +1,54 @@
+.menuPanel {
+	position: absolute;
+	top: 12px;
+	left: 50%;
+	transform: translateX(-50%);
+	border-radius: 900px;
+	overflow: hidden;
+}
+
+.link {
+	padding-left: 18px;
+	padding-right: 18px;
+	background: linear-gradient(
+		270deg,
+		#944fe7 0%,
+		#a347e7 24.15%,
+		#b240e7 66.97%,
+		#c239e7 100%
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+	font-weight: 500;
+	font-size: 16px;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.linksWrapper {
+	display: flex;
+	align-items: center;
+	max-width: 0px;
+	transition: max-width 0.3s ease-in-out;
+}
+
+.open .linksWrapper {
+	max-width: 999px;
+}
+
+.menuPanel:not(.open) .openBtn {
+	--padding: 12px 24px;
+}
+
+@media screen and (max-width: 1620px) {
+	.menuPanel {
+		transform: translateX(-24%);
+	}
+}
+
+@media screen and (max-width: 1360px) {
+	.menuPanel {
+		display: none;
+	}
+}

package/src/features/LandingMenu/LandingMenu.tsx

@@ -0,0 +1,88 @@
+import clsx from "clsx";
+import { isMicroboardIframe } from "shared/lib/isMicroboardIframe";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { EyeClosed, EyeOpened } from "../../shared/ui-lib/Icon";
+import { UiLink } from "shared/ui-lib/UiLink";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import { LANDING_URL, LANDING_URL_EN } from "./const";
+import style from "./LandingMenu.module.css";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+export function LandingMenu(): React.ReactElement | null {
+	const [isOpen, setIsOpen] = useState(true);
+	const { t, i18n } = useTranslation();
+	const isRu = i18n.language === "ru";
+	const landingUrl = isRu ? LANDING_URL : LANDING_URL_EN;
+	if (!isMicroboardIframe()) {
+		return null;
+	}
+
+	const handleMenuToggle = (): void => setIsOpen(prev => !prev);
+	return (
+		<UiPanel
+			padding={0}
+			className={clsx(style.menuPanel, isOpen && style.open)}
+			zIndex={2}
+		>
+			<div className={style.linksWrapper}>
+				<UiLink
+					className={style.link}
+					rounded="none"
+					variant="secondary"
+					target="_parent"
+					href={`${landingUrl}#about`}
+				>
+					{t("landing.menu.about")}
+				</UiLink>
+				<UiSeparator vertical />
+				<UiLink
+					className={style.link}
+					rounded="none"
+					variant="secondary"
+					target="_parent"
+					href={
+						isRu
+							? `${landingUrl}/perenos-dannih-iz-miro`
+							: `${landingUrl}#features`
+					}
+				>
+					{isRu
+						? t("landing.menu.importFromMiro")
+						: t("landing.menu.features")}
+				</UiLink>
+				<UiSeparator vertical />
+
+				<UiLink
+					className={style.link}
+					rounded="none"
+					target="_parent"
+					variant="secondary"
+					href={`${landingUrl}#pricing`}
+				>
+					{t("landing.menu.price")}
+				</UiLink>
+				<UiSeparator vertical />
+				<UiLink
+					className={style.link}
+					rounded="none"
+					target="_parent"
+					variant="secondary"
+					href={`${landingUrl}#forma`}
+				>
+					{t("landing.menu.buy")}
+				</UiLink>
+				<UiSeparator vertical />
+			</div>
+			<UiButton
+				onClick={handleMenuToggle}
+				variant="secondary"
+				rounded="none"
+				className={style.openBtn}
+			>
+				{isOpen ? <EyeClosed /> : <EyeOpened />}
+			</UiButton>
+		</UiPanel>
+	);
+}

package/src/features/LandingMenu/MobileLandingMenu.module.css

@@ -0,0 +1,78 @@
+.mobileLandingMenuWrapper {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	display: none;
+}
+
+@media screen and (max-width: 1360px) {
+	.mobileLandingMenuWrapper {
+		display: block;
+	}
+}
+
+.menuWrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.2);
+	z-index: 10000;
+	padding: 10px;
+}
+
+.menu {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 20px;
+	overflow: hidden;
+}
+
+.links {
+	display: flex;
+	flex-direction: column;
+}
+
+.link {
+	padding: 10px 16px;
+	justify-content: flex-start;
+	color: rgba(33, 33, 33, 1);
+	font-size: 16px;
+	font-weight: 500;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-left: 16px;
+}
+
+.mobileLogo {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 16px;
+	font-weight: 500;
+}
+
+.authBtns {
+	display: flex;
+	align-items: center;
+	padding: 16px;
+	gap: 8px;
+}
+
+.authBtn {
+	flex: 1;
+	flex-basis: 50%;
+	box-shadow:
+		0px 10px 16px -3px rgba(20, 21, 26, 0.08),
+		0px 3px 6px -2px rgba(20, 21, 26, 0.05);
+	height: 48px;
+	font-size: 16px;
+	font-weight: 600;
+	border: 1px solid rgba(222, 224, 227, 1);
+}

package/src/features/LandingMenu/MobileLandingMenu.tsx

@@ -0,0 +1,133 @@
+import Cookies from "js-cookie";
+import { isMicroboardIframe } from "shared/lib/isMicroboardIframe";
+import React, { useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { Icon, Logo } from "../../shared/ui-lib/Icon";
+import { UiLink } from "shared/ui-lib/UiLink";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import { LANDING_URL, LANDING_URL_EN } from "./const";
+import style from "./MobileLandingMenu.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+export function MobileLandingMenu(): React.ReactElement | null {
+	const [isOpen, setIsOpen] = useState(false);
+	const { t, i18n } = useTranslation();
+	const isRu = i18n.language === "ru";
+	const landingUrl = isRu ? LANDING_URL : LANDING_URL_EN;
+
+	if (!isMicroboardIframe()) {
+		return null;
+	}
+
+	const handleOpen = (): void => setIsOpen(true);
+	const handleClose = (): void => setIsOpen(false);
+	const isAuthorized = Cookies.get("refreshToken");
+	return (
+		<UiPanel padding={0} className={style.mobileLandingMenuWrapper}>
+			<UiButton variant="secondary" onClick={handleOpen}>
+				<Icon width={20} height={20} iconName="BurgerMenu" />
+			</UiButton>
+			{isOpen
+				? createPortal(
+						<div
+							className={style.menuWrapper}
+							onClick={handleClose}
+						>
+							<UiPanel
+								padding={0}
+								onClick={evt => evt.stopPropagation()}
+								className={style.menu}
+							>
+								<header className={style.header}>
+									<div className={style.mobileLogo}>
+										<Logo id="mobile-logo" />
+										<span translate="no">
+											{t("appTitle")}
+										</span>
+									</div>
+									<UiButton
+										variant="secondary"
+										onClick={handleClose}
+									>
+										<Icon iconName="Close" />
+									</UiButton>
+								</header>
+								<nav className={style.links}>
+									<UiLink
+										onClick={handleClose}
+										className={style.link}
+										rounded="none"
+										variant="secondary"
+										target="_parent"
+										href={`${landingUrl}#about`}
+									>
+										{t("landing.menu.about")}
+									</UiLink>
+									<UiLink
+										onClick={handleClose}
+										className={style.link}
+										rounded="none"
+										variant="secondary"
+										target="_parent"
+										href={
+											isRu
+												? `${landingUrl}/perenos-dannih-iz-miro`
+												: `${landingUrl}#features`
+										}
+									>
+										{isRu
+											? t("landing.menu.importFromMiro")
+											: t("landing.menu.features")}
+									</UiLink>
+
+									<UiLink
+										onClick={handleClose}
+										className={style.link}
+										rounded="none"
+										target="_parent"
+										variant="secondary"
+										href={`${landingUrl}#pricing`}
+									>
+										{t("landing.menu.price")}
+									</UiLink>
+									<UiLink
+										onClick={handleClose}
+										className={style.link}
+										rounded="none"
+										target="_parent"
+										variant="secondary"
+										href={`${landingUrl}#forma`}
+									>
+										{t("landing.menu.buy")}
+									</UiLink>
+								</nav>
+								{!isAuthorized ? (
+									<div className={style.authBtns}>
+										<UiLink
+											variant="secondary"
+											className={style.authBtn}
+											href={`/auth/sign-in`}
+											target="_parent"
+											size="sm"
+										>
+											{t("auth.login")}
+										</UiLink>
+										<UiLink
+											className={style.authBtn}
+											href={`/auth/sign-up`}
+											size="sm"
+											target="_parent"
+										>
+											{t("auth.signUp")}
+										</UiLink>
+									</div>
+								) : null}
+							</UiPanel>
+						</div>,
+						document.getElementById("modal")!,
+					)
+				: null}
+		</UiPanel>
+	);
+}

package/src/features/LandingMenu/const.ts

@@ -0,0 +1,2 @@
+export const LANDING_URL = "https://microboard.ru";
+export const LANDING_URL_EN = "https://microboard.io/";

package/src/features/LandingMenu/index.ts

@@ -0,0 +1,2 @@
+export { LandingMenu } from "./LandingMenu";
+export { MobileLandingMenu } from "./MobileLandingMenu";

package/src/features/LinksProvider/LinkToButton/LinkToButton.module.css

@@ -0,0 +1,34 @@
+.btn {
+	min-width: 24px;
+	min-height: 24px;
+	background-color: #ffffff;
+	padding: 0;
+	border-radius: 2px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon {
+	display: block;
+	width: 20px;
+	height: 20px;
+	background: none;
+}
+
+.tooltip {
+	position: fixed;
+	z-index: 100;
+	gap: 4px;
+	font-size: 1.4rem;
+	font-weight: 400;
+	display: block;
+	padding: 12px;
+	border-radius: 12px;
+	box-shadow: 0px 10px 16px -3px rgba(20, 21, 26, 0.08);
+	color: rgba(71, 120, 245, 1);
+	background-color: #ffffff;
+	max-width: 400px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}