microboard-ui-temp 0.0.3

package/src/features/Templates/SelectTemplateModal/TemplateItemPreview/TemplateItemPreview.module.css

@@ -0,0 +1,151 @@
+.wrapper {
+	font-family: "Manrope", "Arial";
+	width: 100%;
+}
+
+.scrollContainer {
+	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	max-height: calc(90vh - 60px);
+	padding-right: 6px;
+	scrollbar-gutter: stable;
+}
+
+.scrollContainer::-webkit-scrollbar {
+	appearance: none;
+	width: 4px;
+}
+
+.scrollContainer::-webkit-scrollbar-button {
+	display: none;
+}
+
+.scrollContainer::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 4px;
+}
+
+.header {
+	margin-top: 8px;
+	height: fit-content;
+}
+
+.backBtn {
+	display: flex;
+	gap: 4px;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 20px;
+	letter-spacing: -0.005em;
+	width: fit-content;
+	color: rgba(15, 19, 36, 0.6);
+	cursor: pointer;
+	align-items: center;
+}
+
+.mainSection {
+	margin-top: 16px;
+	display: flex;
+	width: 100%;
+	justify-content: center;
+	flex-wrap: nowrap;
+	border: 1px solid rgba(233, 234, 236, 1);
+	border-radius: 16px;
+	min-height: 362px;
+}
+
+.frame {
+	width: 100%;
+	border-top-left-radius: 16px;
+	border-bottom-left-radius: 16px;
+}
+
+.infoBox {
+	padding: 54px 24px;
+	width: 362px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.infoBox > h2 {
+	font-size: 20px;
+	font-weight: 500;
+	line-height: 28px;
+	letter-spacing: -0.012em;
+	word-break: break-word;
+}
+
+.description {
+	color: rgba(15, 19, 36, 0.6);
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 24px;
+	letter-spacing: -0.01em;
+	word-break: break-word;
+	display: inline-block;
+	overflow-y: auto;
+	max-height: 160px;
+	max-width: 268px;
+	scrollbar-gutter: stable;
+}
+
+.description::-webkit-scrollbar {
+	appearance: none;
+	width: 4px;
+}
+
+.description::-webkit-scrollbar-button {
+	display: none;
+}
+
+.description::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 4px;
+}
+
+.infoBox button {
+	width: 154px;
+}
+
+.relatedTemplatesHeader {
+	margin-top: 16px;
+	font-size: 18px;
+	font-weight: 600;
+	line-height: 26px;
+	letter-spacing: -0.012em;
+}
+
+@media (max-width: 900px) {
+	.mainSection {
+		flex-wrap: wrap;
+		height: fit-content;
+		min-height: fit-content;
+	}
+
+	.frame {
+		border-radius: 16px;
+		width: 60%;
+	}
+
+	.infoBox {
+		width: 100%;
+		align-items: center;
+		padding: 24px;
+	}
+
+	.infoBox > p {
+		max-width: 100%;
+		max-height: 256px;
+	}
+}
+
+@media (max-width: 420px) {
+	.frame {
+		width: 100%;
+	}
+}

package/src/features/Templates/SelectTemplateModal/TemplateItemPreview/TemplateItemPreview.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import styles from "./TemplateItemPreview.module.css";
+import { TemplateItemsGrid } from "../TemplateItemsGrid/TemplateItemsGrid";
+import { Template } from "microboard-temp";
+import type { BoardSnapshot } from "microboard-temp";
+import { useTranslation } from "react-i18next";
+import { pasteSnapshot } from "features/Templates/lib";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+
+interface TemplateItemPreviewProps {
+	name: string;
+	language: string;
+	description: string;
+	tags: string[];
+	snapshot: BoardSnapshot;
+	setPresentedTemplate: (template: null | Template) => void;
+	viewLinkId: string;
+	relatedTemplates: Template[];
+}
+
+export const TemplateItemPreview = ({
+	name,
+	description,
+	snapshot,
+	setPresentedTemplate,
+	viewLinkId,
+	relatedTemplates,
+}: TemplateItemPreviewProps) => {
+	const { board } = useAppContext();
+	const { closeModal } = useUiModalContext();
+	const { t } = useTranslation();
+
+	const pasteSnapshotAndClose = () => {
+		setPresentedTemplate(null);
+		closeModal();
+		pasteSnapshot({ board, snapshot });
+	};
+
+	return (
+		<div className={styles.wrapper}>
+			<div className={styles.header}>
+				<button
+					className={styles.backBtn}
+					onClick={() => setPresentedTemplate(null)}
+				>
+					<Icon iconName="BackArrow" width={14} height={14} />
+					{t("modalTemplate.backToTemplates")}
+				</button>
+			</div>
+			<div className={styles.scrollContainer}>
+				<div className={styles.mainSection}>
+					<iframe
+						className={styles.frame}
+						src={`${window.location.origin}/${viewLinkId}&userPanel=false&titlePanel=false&isTemplateView=true`}
+					></iframe>
+					<div className={styles.infoBox}>
+						<h2>{name}</h2>
+						<p className={styles.description}>{description}</p>
+						<UiButton onClick={pasteSnapshotAndClose} size="lg">
+							{t("modalTemplate.UI.buttons.Use")}
+						</UiButton>
+					</div>
+				</div>
+				<h3 className={styles.relatedTemplatesHeader}>
+					{t("modalTemplate.relatedTemplates")}
+				</h3>
+				<TemplateItemsGrid
+					templates={relatedTemplates}
+					setPresentedTemplate={setPresentedTemplate}
+				/>
+			</div>
+		</div>
+	);
+};

package/src/features/Templates/SelectTemplateModal/TemplateItemsGrid/TemplateItem/TemplateItem.tsx

@@ -0,0 +1,119 @@
+import React, { SyntheticEvent, useState, useRef } from "react";
+import styles from "./templateItem.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext";
+import { Template } from "microboard-temp";
+import PlaceholderImg from "shared/assets/imgs/no-img-icon.svg";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { pasteSnapshot } from "features/Templates/lib";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+
+interface TemplateItemProps {
+	template: Template;
+	setPresentedTemplate: (template: null | Template) => void;
+}
+
+export const TemplateItem = ({
+	template,
+	setPresentedTemplate,
+}: TemplateItemProps) => {
+	const [isLoading, setIsLoading] = useState(true);
+	const [isImageError, setIsImageError] = useState(!template.preview);
+	const { board } = useAppContext();
+	const { closeModal } = useUiModalContext();
+	const { t } = useTranslation();
+	const cardRef = useRef<HTMLDivElement>(null);
+
+	// Состояние для отслеживания начала касания
+	const [isTouchStart, setIsTouchStart] = useState(false);
+	const [touchStartY, setTouchStartY] = useState(0);
+
+	const handleImageLoad = () => {
+		setIsLoading(false);
+	};
+
+	const handleImageError = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+		setIsLoading(false);
+		setIsImageError(true);
+	};
+
+	const pasteSnapshotAndClose = () => {
+		setPresentedTemplate(null);
+		closeModal();
+		pasteSnapshot({ board, snapshot: template.snapshot });
+	};
+
+	// Обрабатываем события касания для пропуска жестов скролла на родительский контейнер
+	const handleTouchStart = (e: React.TouchEvent) => {
+		setIsTouchStart(true);
+		setTouchStartY(e.touches[0].clientY);
+	};
+
+	const handleTouchMove = (e: React.TouchEvent) => {
+		if (!isTouchStart) {
+			return;
+		}
+
+		// Вычисляем вертикальное смещение
+		const touchY = e.touches[0].clientY;
+		const deltaY = touchStartY - touchY;
+
+		// Если обнаружен вертикальный скролл, предотвращаем обработку события карточкой
+		if (Math.abs(deltaY) > 10) {
+			e.stopPropagation();
+		}
+	};
+
+	const handleTouchEnd = () => {
+		setIsTouchStart(false);
+	};
+
+	return (
+		<div
+			className={styles.card}
+			ref={cardRef}
+			onTouchStart={handleTouchStart}
+			onTouchMove={handleTouchMove}
+			onTouchEnd={handleTouchEnd}
+		>
+			<div className={styles.imageBox}>
+				<img
+					onClick={() => setPresentedTemplate(template)}
+					className={clsx(
+						styles.image,
+						isImageError && styles.noImage,
+					)}
+					src={
+						isLoading || isImageError
+							? PlaceholderImg
+							: (template.preview as string) || ""
+					}
+					alt={template.name}
+					onLoad={handleImageLoad}
+					onError={handleImageError}
+				/>
+				<div
+					className={styles.buttonsBox}
+					onClick={() => setPresentedTemplate(template)}
+				>
+					<div>
+						<UiButton
+							onClick={() => setPresentedTemplate(template)}
+							variant="tertiary"
+							size="lg"
+						>
+							{t("modalTemplate.UI.buttons.Preview")}
+						</UiButton>
+						<UiButton onClick={pasteSnapshotAndClose} size="lg">
+							{t("modalTemplate.UI.buttons.Use")}
+						</UiButton>
+					</div>
+				</div>
+			</div>
+			<div className={styles.info}>
+				<p>{template.name}</p>
+			</div>
+		</div>
+	);
+};

package/src/features/Templates/SelectTemplateModal/TemplateItemsGrid/TemplateItem/templateItem.module.css

@@ -0,0 +1,88 @@
+.card {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	border: 1px solid rgba(233, 234, 236, 1);
+	border-radius: 16px;
+	gap: 16px;
+	font-family: "Manrope", "Arial";
+	color: rgba(20, 21, 26, 1);
+	height: auto;
+	touch-action: auto;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.imageBox {
+	width: 100%;
+	height: fit-content;
+	position: relative;
+}
+
+.buttonsBox {
+	width: 100%;
+	background-color: rgba(217, 217, 217, 1);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 16px;
+	position: absolute;
+	bottom: 0;
+	/*visibility: hidden;*/
+	/*height: 75%;*/
+	/*bottom: 0;*/
+	/*animation-direction: alternate;*/
+	height: 100%;
+	opacity: 0;
+	transition: opacity 0.3s;
+}
+
+.buttonsBox > div {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 120px;
+}
+
+.imageBox:hover > .buttonsBox {
+	/*animation: showButtons 250ms ease-out alternate;*/
+	/*animation-fill-mode: both;*/
+	opacity: 1;
+}
+
+.image {
+	display: block;
+	width: 100%;
+	border-radius: 16px;
+	aspect-ratio: 1/0.6;
+	object-fit: cover;
+	background-color: rgba(217, 217, 217, 0.8);
+}
+
+.noImage {
+	object-fit: contain;
+}
+
+.info {
+	width: 100%;
+	padding: 0 8px 16px 8px;
+	font-size: 20px;
+	font-weight: 500;
+	line-height: 28px;
+	letter-spacing: -0.012em;
+	word-break: break-word;
+}
+
+/*@keyframes showButtons {*/
+/*	0% {*/
+/*		bottom: 0;*/
+/*		height: 75%;*/
+/*		visibility: hidden;*/
+/*	}*/
+/*	10% {*/
+/*		visibility: visible;*/
+/*	}*/
+/*	100% {*/
+/*		visibility: visible;*/
+/*		height: 100%;*/
+/*	}*/
+/*}*/

package/src/features/Templates/SelectTemplateModal/TemplateItemsGrid/TemplateItemsGrid.module.css

@@ -0,0 +1,51 @@
+.templatesGrid {
+	margin-top: 16px;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 16px;
+	max-height: calc(90vh - 152px);
+	height: auto;
+	overflow-y: scroll;
+	padding-right: 8px;
+	scrollbar-gutter: stable;
+	-webkit-overflow-scrolling: touch;
+	overflow-scrolling: touch;
+	touch-action: auto;
+	overscroll-behavior: contain;
+	-webkit-tap-highlight-color: transparent;
+	position: relative;
+	user-select: none;
+}
+
+.templatesGrid::-webkit-scrollbar {
+	appearance: none;
+	width: 4px;
+}
+
+.templatesGrid::-webkit-scrollbar-button {
+	display: none;
+}
+
+.templatesGrid::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 4px;
+}
+
+.placeholder {
+}
+
+@media (max-width: 768px) {
+	.templatesGrid {
+		max-height: 70vh;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+		touch-action: auto;
+	}
+}
+
+.templatesGrid > * {
+	touch-action: auto;
+	pointer-events: auto;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}

package/src/features/Templates/SelectTemplateModal/TemplateItemsGrid/TemplateItemsGrid.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styles from "./TemplateItemsGrid.module.css";
+import { TemplateItem } from "./TemplateItem/TemplateItem";
+import clsx from "clsx";
+import { Template } from "microboard-temp";
+
+interface TemplateItemsGridProps {
+	templates: Template[];
+	setPresentedTemplate: (template: null | Template) => void;
+	className?: string;
+}
+
+export const TemplateItemsGrid = ({
+	templates,
+	setPresentedTemplate,
+	className,
+}: TemplateItemsGridProps) => {
+	const getPlaceHolders = () => {
+		if (templates.length < 3 && templates.length > 0) {
+			return Array(3)
+				.fill(3 - templates.length)
+				.map((_, index) => <div key={index}></div>);
+		}
+		return [];
+	};
+
+	return (
+		<div className={clsx(styles.templatesGrid, className)}>
+			{templates.map(template => (
+				<TemplateItem
+					key={template.uniqId}
+					template={template}
+					setPresentedTemplate={setPresentedTemplate}
+				/>
+			))}
+			{getPlaceHolders()}
+		</div>
+	);
+};

package/src/features/Templates/TolgeeProvider.tsx

@@ -0,0 +1,29 @@
+import React, { memo, PropsWithChildren, useMemo } from "react";
+import { DevTools, FormatSimple, Tolgee, TolgeeProvider } from "@tolgee/react";
+
+export const TolgeeProviderProvider = memo(
+	({ children }: PropsWithChildren<{}>) => {
+		const tolgee = useMemo(
+			() =>
+				Tolgee()
+					.use(DevTools())
+					.use(FormatSimple())
+					.init({
+						language: "en",
+						availableLanguages: ["en", "ru"],
+						observerType: "text",
+						// observerOptions: {},
+
+						apiUrl: import.meta.env.TOLGEE_API_URL,
+						apiKey: import.meta.env.TOLGEE_API_KEY,
+						projectId: import.meta.env.TOLGEE_PROJECT_ID,
+
+						// for production
+						staticData: {},
+					}),
+			[],
+		);
+
+		return <TolgeeProvider tolgee={tolgee}>{children}</TolgeeProvider>;
+	},
+);

package/src/features/Templates/config.ts

@@ -0,0 +1,6 @@
+export function getTolgeeApiUrl(path?: string): string {
+	if (!path) {
+		path = "";
+	}
+	return `${import.meta.env.TOLGEE_API_URL}/v2/projects/${import.meta.env.TOLGEE_PROJECT_ID}${path}`;
+}

package/src/features/Templates/index.ts

@@ -0,0 +1,2 @@
+export { CreateTemplateModal } from "./CreateTemplateModal/CreateTemplateModal";
+export { SelectTemplateModal } from "./SelectTemplateModal/SelectTemplateModal";

package/src/features/Templates/lib.ts

@@ -0,0 +1,59 @@
+import { Board } from "microboard-temp";
+import type { BoardSnapshot } from "microboard-temp";
+
+export function detectLanguage(text: string) {
+	const scores = {};
+
+	const regexes = {
+		en: /[\u0000-\u007F]/gi,
+		zh: /[\u3000\u3400-\u4DBF\u4E00-\u9FFF]/gi,
+		hi: /[\u0900-\u097F]/gi,
+		ar: /[\u0621-\u064A\u0660-\u0669]/gi,
+		bn: /[\u0995-\u09B9\u09CE\u09DC-\u09DF\u0985-\u0994\u09BE-\u09CC\u09D7\u09BC]/gi,
+		he: /[\u0590-\u05FF]/gi,
+		ru: /[\u0400-\u04FF]/gi,
+	};
+	for (const [lang, regex] of Object.entries(regexes)) {
+		// detect occurances of lang in a word
+		const matches = text.match(regex) || [];
+		const score = matches.length / text.length;
+		if (score) {
+			// high percentage, return result
+			if (score > 0.85) {
+				return lang;
+			}
+			scores[lang] = score;
+		}
+	}
+	// not detected
+	if (Object.keys(scores).length == 0) {
+		return "en";
+	}
+	// pick lang with highest percentage
+	return Object.keys(scores).reduce((a, b) =>
+		scores[a] > scores[b] ? a : b,
+	);
+}
+
+export const pasteSnapshot = ({
+	board,
+	snapshot,
+}: {
+	board: Board;
+	snapshot: BoardSnapshot;
+}) => {
+	const itemsMap = {};
+	for (const itemData of snapshot.items) {
+		const id = itemData.id;
+		delete itemData.id;
+		itemsMap[id] = itemData;
+	}
+	if (board.events && snapshot) {
+		board.paste(itemsMap, true, false);
+		if (!board.tools.getSelect()) {
+			board.tools.select();
+		}
+		const itemsMbr = board.items.getMbr();
+		board.camera.zoomToFit(itemsMbr);
+	}
+};