microboard-ui-temp 0.0.3

package/src/features/SidePanel/SidePanelContext.tsx

@@ -0,0 +1,108 @@
+import { useBoardsList } from "App/useBoardsList";
+import {
+	createStrictContext,
+	useStrictContext,
+} from "shared/lib/strictContext";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAppContext } from "features/AppContext";
+import { useContextMenuContext } from "features/ContextMenu";
+import { useOpenedFoldersContext } from "entities/Folder";
+
+type SidePanelContext = {
+	toggleSideMenu: () => void;
+	openMenu: (highlightTime?: number) => void;
+	handleAddNew: (cb?: (boardId: string) => void) => Promise<void>;
+	stamp: number | null;
+	setStamp: React.Dispatch<React.SetStateAction<number | null>>;
+	isOpen: boolean;
+	isHighlighted: boolean;
+};
+
+export const SidePanelContext = createStrictContext<SidePanelContext>();
+
+export function useSidePanelContext(): SidePanelContext {
+	return useStrictContext(SidePanelContext);
+}
+
+export function SidePanelContextProvider({
+	children,
+}: PropsWithChildren<{}>): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [stamp, setStamp] = useState<null | number>(null);
+	const [highlighted, setHighlighted] = useState(false);
+	const { app } = useAppContext();
+	const navigate = useNavigate();
+	const boardsList = useBoardsList();
+	const timeoutRef = useRef<NodeJS.Timeout>();
+	const { close } = useContextMenuContext();
+	const forceUpdate = useForceUpdate();
+	useEffect(() => {
+		app.boardSubject.subscribe(forceUpdate);
+
+		return () => app.boardSubject.unsubscribe(forceUpdate);
+	}, []);
+
+	const toggleSideMenu = (): void => {
+		setIsOpen(prev => {
+			if (prev) {
+				close();
+			}
+			return !prev;
+		});
+	};
+
+	useEffect(() => {
+		return () => clearTimeout(timeoutRef.current);
+	}, []);
+
+	const openMenu = (highlightTime = 0): void => {
+		clearTimeout(timeoutRef.current);
+
+		if (highlightTime > 0) {
+			setHighlighted(true);
+			timeoutRef.current = setTimeout(() => {
+				setHighlighted(false);
+			}, highlightTime);
+		}
+		setIsOpen(true);
+	};
+
+	useEffect(() => {
+		if (!isOpen) {
+			return;
+		}
+
+		boardsList.loadBoards();
+	}, [isOpen]);
+
+	const handleAddNew = async (
+		cb?: (boardId: string) => void,
+	): Promise<void> => {
+		const boardId = await boardsList.createBoard();
+		await app.openBoard(boardId);
+		navigate(`/boards/${boardId}`, {
+			replace: true,
+		});
+		if (cb) {
+			cb(boardId);
+		}
+	};
+
+	return (
+		<SidePanelContext.Provider
+			value={{
+				toggleSideMenu,
+				isOpen,
+				openMenu,
+				handleAddNew,
+				stamp,
+				setStamp,
+				isHighlighted: highlighted,
+			}}
+		>
+			{children}
+		</SidePanelContext.Provider>
+	);
+}

package/src/features/SidePanel/index.ts

@@ -0,0 +1,3 @@
+export { SidePanel } from "./SidePanel";
+export { useSidePanelContext } from "./SidePanelContext";
+export { useLocalSidePanelContext } from "./LocalSidePanelContext";

package/src/features/SidePanelsContainer/SidePanelsContainer.module.css

@@ -0,0 +1,15 @@
+.sidePanels {
+	display: flex;
+	/*grid-template-columns: auto 48px;*/
+	gap: var(--absolute-position-panel-padding);
+	position: absolute;
+	height: calc(100% - 84px);
+	top: 72px;
+	left: 0;
+	z-index: 100;
+}
+
+.hidingPanels {
+	display: flex;
+	gap: 0;
+}

package/src/features/SidePanelsContainer/SidePanelsContainer.tsx

@@ -0,0 +1,61 @@
+import { isIframe } from "shared/lib/isIframe";
+import { shouldShow } from "shared/lib/queryStringParser";
+import { useClickOutside } from "shared/lib/useClickOutside";
+import React, { memo } from "react";
+import { InactiveBoardHidder } from "features/AppView/InactiveBoardHidder";
+import { useRenameContext } from "features/Rename";
+import { SidePanel, useSidePanelContext } from "features/SidePanel";
+import { TitlePanel } from "features/TitlePanel";
+import { ToolsPanel } from "features/ToolsPanel";
+import { ViewToolsPanel } from "features/ToolsPanel/ViewToolsPanel";
+import { ViewModeGuard } from "features/ViewModeGuard";
+import { ShapesPanel, ShapesPanelContextProvider } from "../ShapesPanel";
+import style from "./SidePanelsContainer.module.css";
+
+interface SidePanelsContainerProps {
+	isBlank: boolean;
+}
+
+export const SidePanelsContainer = memo(
+	({ isBlank }: SidePanelsContainerProps) => {
+		const { toggleSideMenu, isOpen } = useSidePanelContext();
+		const { renamingId } = useRenameContext();
+		const containerRef = useClickOutside(() => {
+			if (isOpen && renamingId !== null) {
+				toggleSideMenu();
+			}
+		});
+
+		return (
+			<ShapesPanelContextProvider>
+				<div ref={containerRef} className={style.sidePanels}>
+					{(shouldShow("titlePanel") || !isIframe()) && (
+						<TitlePanel />
+					)}
+					<ViewModeGuard iframe>
+						<div className={style.hidingPanels}>
+							<SidePanel />
+							<ShapesPanel />
+						</div>
+						<InactiveBoardHidder>
+							<ViewModeGuard mode={["edit", "view"]}>
+								{interfaceType => {
+									switch (interfaceType) {
+										case "view":
+											return <ViewToolsPanel />;
+										case "edit":
+											return <ToolsPanel />;
+										default:
+											return null;
+									}
+								}}
+							</ViewModeGuard>
+						</InactiveBoardHidder>
+					</ViewModeGuard>
+				</div>
+			</ShapesPanelContextProvider>
+		);
+	},
+);
+
+SidePanelsContainer.displayName = "SidePanelsContainer";

package/src/features/SidePanelsContainer/index.ts

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

package/src/features/Templates/CreateTemplateModal/CreateTemplateModal.module.css

@@ -0,0 +1,34 @@
+.modal {
+	max-width: 608px;
+	width: 100%;
+}
+
+.wr {
+	padding: 32px 64px !important;
+}
+
+.form {
+	display: flex;
+	flex-wrap: nowrap;
+	flex-direction: column;
+	gap: 12px;
+	align-items: center;
+	overflow-y: auto;
+	max-height: calc(90vh - 64px);
+}
+
+.errorText {
+	color: red;
+}
+
+.categoriesSelector {
+	width: 100%;
+}
+
+.languagesSelector {
+	width: 50%;
+}
+
+.btn {
+	width: 100%;
+}

package/src/features/Templates/CreateTemplateModal/CreateTemplateModal.tsx

@@ -0,0 +1,463 @@
+import React, { ChangeEventHandler, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Input } from "shared/ui-lib/Input/Input";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext.tsx";
+import { getApiUrl } from "Config";
+import Cookies from "js-cookie";
+import styles from "./CreateTemplateModal.module.css";
+import { conf } from "microboard-temp";
+import { useTolgee } from "@tolgee/react";
+import { useForceUpdate } from "shared/lib/useForceUpdate.ts";
+import { notify } from "shared/ui-lib/Toast/notify.tsx";
+import { TolgeeProviderProvider } from "../TolgeeProvider.tsx";
+import { getTolgeeApiUrl } from "features/Templates/config.ts";
+import { createAccessKey } from "shared/apiV2/boards/api";
+import { AccessKeyType } from "shared/apiV2/boards/types";
+import { detectLanguage } from "../lib.ts";
+import { Selector, type SelectorHandle } from "shared/ui-lib/Selector";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal.tsx";
+import { useUiModalContext } from "shared/ui-lib/UiModal/UiModalContext.tsx";
+
+interface TranslatableInput {
+	id: string;
+	placeholder: string;
+	label?: string;
+	defaultValue?: string;
+}
+
+export const CREATE_TEMPLATE_MODAL = Symbol("createTemplate");
+
+const CreateTemplate = (): JSX.Element => {
+	const formRef = useRef<HTMLFormElement>(null);
+	const categoriesSelectorRef = useRef<SelectorHandle<true>>(null);
+	const languagesSelectorRef = useRef<SelectorHandle<true>>(null);
+	const [imageSrc, setImageSrc] = useState<string | null>(null);
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const [submitDisabled, setSubmitDisabled] = useState<boolean>(false);
+	const [translateDisabled, setTranslateDisabled] = useState<boolean>(false);
+	const [isSubmitLoading, setIsSubmitLoading] = useState<boolean>(false);
+	const [errors, setErrors] = useState<string[]>([]);
+	const [nameInputs, setNameInputs] = useState<TranslatableInput[]>([
+		{ id: "templateName", placeholder: "Template name" },
+	]);
+	const [descriptionInputs, setDescriptionInputs] = useState<
+		TranslatableInput[]
+	>([{ id: "description", placeholder: "Description" }]);
+	const { t } = useTranslation();
+	const { board } = useAppContext();
+	const { closeModal } = useUiModalContext();
+	const forceUpdate = useForceUpdate();
+
+	const categories = conf.TEMPLATE_CATEGORIES.map(category => {
+		return {
+			value: category,
+			label: t(`modalTemplate.category.useCaseItems.${category}`),
+		};
+	});
+
+	const hideModalAndResetForm = () => {
+		formRef.current?.reset();
+		categoriesSelectorRef.current?.setSelectedOptions([categories[0]]);
+		languagesSelectorRef.current?.setSelectedOptions([
+			conf.TEMPLATE_LANGUAGES[0],
+		]);
+	};
+
+	const getLanguages = async () => {
+		try {
+			const response = await fetch(getTolgeeApiUrl("/languages"), {
+				method: "get",
+				headers: {
+					Accept: "application/json",
+					"X-API-Key": import.meta.env.TOLGEE_API_KEY,
+				},
+			});
+			return (await response.json())._embedded.languages as {
+				id: number;
+				name: string;
+				tag: string;
+				originalName: string;
+			}[];
+		} catch (error) {
+			console.log(error);
+			return null;
+		}
+	};
+
+	const createTranslationRequest = async (data: string) => {
+		return fetch(getTolgeeApiUrl("/suggest/machine-translations"), {
+			method: "post",
+			headers: {
+				"Content-Type": "application/json",
+				Accept: "application/json",
+				"X-API-Key": import.meta.env.TOLGEE_API_KEY,
+			},
+			body: data,
+		})
+			.then(response => response.json())
+			.catch(error => console.log(error));
+	};
+
+	const handleFileChange: ChangeEventHandler<HTMLInputElement> = async e => {
+		const file = e.target.files?.[0];
+		if (!file) {
+			return;
+		}
+		setErrors([]);
+
+		const headers = new Headers();
+		headers.append("content-type", "image/png");
+		headers.append("x-image-id", Date.now().toString());
+
+		setSubmitDisabled(true);
+
+		const response = await fetch(getApiUrl("/media"), {
+			method: "POST",
+			headers,
+			body: file,
+		});
+		if (!response.ok) {
+			setErrors(["Error while uploading image"]);
+		}
+		setImageSrc((await response.json()).src);
+		setSubmitDisabled(false);
+	};
+
+	async function createTemplate(body: any) {
+		const boardId = board.getBoardId();
+		const viewLink = (
+			await createAccessKey(boardId, {
+				boardUUID: boardId,
+				keyType: AccessKeyType.VIEW,
+			})
+		).data?.accessKey;
+		if (!viewLink) {
+			throw new Error("Can not create access key.");
+		}
+
+		await fetch(`${getApiUrl()}/templates/${boardId}`, {
+			method: "POST",
+			mode: "cors",
+			cache: "no-cache",
+			credentials: "same-origin",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${Cookies.get("accessToken")}`,
+			},
+			body: JSON.stringify({ ...body, viewLink }),
+			redirect: "follow",
+			referrerPolicy: "no-referrer",
+		});
+	}
+
+	const tolgee = useTolgee();
+
+	const handleChangeImageClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+		e.preventDefault();
+		const input = inputRef.current;
+		if (!input) {
+			return;
+		}
+		input.click();
+	};
+
+	const handleTranslateClick = async (
+		ev: React.MouseEvent<HTMLButtonElement>,
+	) => {
+		ev.preventDefault();
+		setTranslateDisabled(true);
+		const languages = await getLanguages();
+		if (!languages) {
+			return setErrors(["Cant get languages to translate"]);
+		}
+
+		const form = formRef.current;
+		const description = form?.description.value as string;
+		const name = form?.templateName.value as string;
+		const nameLanguage = detectLanguage(name);
+		const descriptionLanguage = detectLanguage(description);
+
+		const translationData = {
+			targetLanguageId: 0,
+			baseText: "",
+			isPlural: false,
+			services: ["TOLGEE"],
+		};
+
+		const promises: Promise<void>[] = [];
+
+		const getInputConfig = (type: string, finalLang = "") =>
+			({
+				name: {
+					label: `Template name ${finalLang}`,
+					id: `templateName${finalLang}`,
+				},
+				description: {
+					label: `Description ${finalLang}`,
+					id: `description${finalLang}`,
+				},
+			})[type];
+
+		const updateInputs = (
+			language: string,
+			type: "description" | "name",
+		) => {
+			let targetLanguage = nameLanguage;
+			translationData.baseText = name;
+			if (type === "description") {
+				targetLanguage = descriptionLanguage;
+				translationData.baseText = description;
+			}
+
+			if (language !== targetLanguage) {
+				const languageToTranslate = languages.find(lan => {
+					return language === tolgee.getLanguage()
+						? lan.tag === targetLanguage
+						: lan.tag === language;
+				});
+				if (!languageToTranslate) {
+					return;
+				}
+				translationData.targetLanguageId = languageToTranslate.id;
+
+				const res = createTranslationRequest(
+					JSON.stringify(translationData),
+				).then(data => {
+					const finalLang =
+						languageToTranslate.tag === targetLanguage
+							? tolgee.getLanguage()
+							: languageToTranslate.tag;
+					const defaultValue = data.result.TOLGEE.output as string;
+					const config = getInputConfig(type, finalLang);
+					if (config) {
+						const newInput = {
+							defaultValue,
+							label: config.label,
+							placeholder: config.label,
+							id: config.id,
+						};
+
+						type === "name"
+							? setNameInputs(inputs => [...inputs, newInput])
+							: setDescriptionInputs(inputs => [
+									...inputs,
+									newInput,
+								]);
+					}
+				});
+				promises.push(res);
+			}
+		};
+
+		for (const language of languagesSelectorRef
+			.current!.getSelectedOptions()
+			.map(o => o.value)) {
+			updateInputs(language, "name");
+			updateInputs(language, "description");
+		}
+		Promise.all(promises).finally(() => {
+			setSubmitDisabled(false);
+		});
+	};
+
+	const onSubmit = async (
+		event: React.FormEvent<HTMLFormElement>,
+	): Promise<void> => {
+		event.preventDefault();
+		setErrors([]);
+
+		const form = formRef.current;
+		if (!form) {
+			return setErrors(["Unexpeced error"]);
+		}
+		const multilanguageDescription: Record<string, string> = {};
+		const multilanguageName: Record<string, string> = {};
+		if (descriptionInputs.length === 1) {
+			multilanguageDescription[
+				languagesSelectorRef.current!.getSelectedOptions()[0].value
+			] = form?.description.value;
+		} else {
+			descriptionInputs.forEach(desc => {
+				const value = form[desc.id].value as string;
+				let language = desc.id.split("description")[1];
+				if (!language) {
+					language = detectLanguage(value);
+				}
+
+				multilanguageDescription[language] = value;
+			});
+		}
+		if (nameInputs.length === 1) {
+			multilanguageName[
+				languagesSelectorRef.current!.getSelectedOptions()[0].value
+			] = form?.templateName.value;
+		} else {
+			nameInputs.forEach(name => {
+				const value = form[name.id].value as string;
+				let language = name.id.split("templateName")[1];
+				if (!language) {
+					language = detectLanguage(value);
+				}
+
+				multilanguageName[language] = value;
+			});
+		}
+		const tags = categoriesSelectorRef
+			.current!.getSelectedOptions()
+			.map(o => o.value);
+		const snapshot = board.getSnapshot();
+
+		setIsSubmitLoading(true);
+		setSubmitDisabled(true);
+
+		const body = {
+			description: multilanguageDescription,
+			languages: languagesSelectorRef
+				.current!.getSelectedOptions()
+				.map(o => o.value),
+			tags,
+			snapshot,
+			name: multilanguageName,
+			preview: imageSrc,
+		};
+
+		await createTemplate(body)
+			.then(res => {
+				formRef.current?.reset();
+				categoriesSelectorRef.current?.setSelectedOptions([
+					categories[0],
+				]);
+				languagesSelectorRef.current?.setSelectedOptions([
+					conf.TEMPLATE_LANGUAGES[0],
+				]);
+				notify({
+					body: t("template.createSuccess"),
+					variant: "info",
+					duration: 3000,
+				});
+				setSubmitDisabled(false);
+				setIsSubmitLoading(false);
+				closeModal();
+			})
+			.catch(() => {
+				setErrors([t("template.createError")]);
+			})
+			.finally(() => {
+				setSubmitDisabled(false);
+				setIsSubmitLoading(false);
+			});
+	};
+
+	return (
+		<UiModal
+			modalId={CREATE_TEMPLATE_MODAL}
+			onClose={hideModalAndResetForm}
+			onKeyDown={(ev: React.KeyboardEvent<HTMLDivElement>) =>
+				ev.stopPropagation()
+			}
+			className={styles.wr}
+			wrClassName={styles.modal}
+		>
+			<form
+				id="create-template-form"
+				onSubmit={onSubmit}
+				ref={formRef}
+				className={styles.form}
+			>
+				<h1>{t("modalTemplate.createTemplate")}</h1>
+				<Selector
+					multiselect={true}
+					options={categories}
+					ref={categoriesSelectorRef}
+					containerClassName={styles.categoriesSelector}
+				/>
+				<input
+					ref={inputRef}
+					onChange={handleFileChange}
+					type="file"
+					style={{ display: "none" }}
+				/>
+				<UiButton
+					variant="primary"
+					disabled={submitDisabled}
+					onClick={handleChangeImageClick}
+					className={styles.btn}
+					size="lg"
+				>
+					{t(
+						`modalTemplate.UI.buttons.${imageSrc ? "previewChosen" : "choosePreview"}`,
+					)}
+				</UiButton>
+				<Selector
+					multiselect={true}
+					options={conf.TEMPLATE_LANGUAGES.map(item => {
+						item.label = t(`common.languages.${item.value}`);
+						return item;
+					})}
+					ref={languagesSelectorRef}
+					onChange={forceUpdate}
+					containerClassName={styles.languagesSelector}
+				/>
+				{nameInputs.map(input => {
+					return (
+						<Input
+							id={input.id}
+							defaultValue={input.defaultValue}
+							placeholder={t("modalTemplate.UI.inputs.name")}
+							label={input.label}
+							key={input.id}
+						/>
+					);
+				})}
+				{descriptionInputs.map(input => {
+					return (
+						<Input
+							id={input.id}
+							defaultValue={input.defaultValue}
+							placeholder={t(
+								"modalTemplate.UI.inputs.description",
+							)}
+							label={input.label}
+							key={input.id}
+						/>
+					);
+				})}
+				{languagesSelectorRef.current &&
+					languagesSelectorRef.current.getSelectedOptions().length >
+						1 && (
+						<UiButton
+							variant="primary"
+							className={styles.btn}
+							disabled={submitDisabled || translateDisabled}
+							onClick={handleTranslateClick}
+							size="lg"
+						>
+							{t("modalTemplate.UI.buttons.translate")}
+						</UiButton>
+					)}
+				<UiButton
+					variant="primary"
+					className={styles.btn}
+					type="submit"
+					disabled={submitDisabled && translateDisabled}
+					loading={isSubmitLoading}
+					size="lg"
+				>
+					{t("modalTemplate.UI.buttons.save")}
+				</UiButton>
+				{errors.length > 0 && (
+					<p className={styles.errorText}>{errors[0]}</p>
+				)}
+			</form>
+		</UiModal>
+	);
+};
+
+export const CreateTemplateModal = () => {
+	return (
+		<TolgeeProviderProvider>
+			<CreateTemplate />
+		</TolgeeProviderProvider>
+	);
+};