microboard-ui-temp 0.0.3

package/src/features/ToolsPanel/Buttons/AddMedia/AddMedia.tsx

@@ -0,0 +1,72 @@
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton/index";
+import style from "./AddMedia.module.css";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import { ButtonWithMenu } from "features/ToolsPanel/Buttons/ButtonWithMenu/ButtonWithMenu";
+import { AddMediaButton } from "features/ToolsPanel/Buttons/AddMedia/AddMediaButton";
+import { useAppContext } from "features/AppContext";
+import { useClickOutside } from "shared/lib/useClickOutside";
+
+export function AddMedia(): JSX.Element {
+	const { board } = useAppContext();
+	const [isOpen, setIsOpen] = useState(false);
+	const { t } = useTranslation();
+	const containerRef = useClickOutside(
+		() => {
+			if (isOpen) {
+				setIsOpen(false);
+			}
+		},
+		undefined,
+		true,
+	);
+
+	const toggleIsOpen = () => {
+		setIsOpen(!isOpen);
+		board.tools.cancel();
+	};
+
+	return (
+		<div ref={containerRef}>
+			<ButtonWithMenu
+				button={
+					<UiButton
+						id={"tool-add-media"}
+						tooltip={
+							isOpen
+								? undefined
+								: t("toolsPanel.addMedia.tooltip")
+						}
+						active={isOpen}
+						variant="secondary"
+						rounded="bottom"
+						onClick={toggleIsOpen}
+					>
+						<Icon iconName="AddMedia" />
+					</UiButton>
+				}
+				isOpen={isOpen}
+			>
+				<UiPanel vertical padding={0} className={style.panel}>
+					<AddMediaButton
+						type="Image"
+						rounded="top"
+						toggleMenu={toggleIsOpen}
+					/>
+					<AddMediaButton
+						type="Video"
+						rounded="none"
+						toggleMenu={toggleIsOpen}
+					/>
+					<AddMediaButton
+						type="Audio"
+						rounded="bottom"
+						toggleMenu={toggleIsOpen}
+					/>
+				</UiPanel>
+			</ButtonWithMenu>
+		</div>
+	);
+}

package/src/features/ToolsPanel/Buttons/AddMedia/AddMediaButton.tsx

@@ -0,0 +1,146 @@
+import { useAccount } from "App/useAccount";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import { notify } from "shared/ui-lib/Toast/index";
+import React, { ChangeEventHandler, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton/index";
+import { conf } from "microboard-temp";
+import { mediaApi } from "shared/api";
+import { validateMediaFile } from "App/MediaHelpers";
+
+function bytesToGigabytes(bytes: number): number {
+	return bytes / 1024 ** 3;
+}
+
+function bytesToMegabytes(bytes: number): number {
+	return bytes / 1024 ** 2;
+}
+
+const MAX_FILE_SIZE = 50 * 1024 * 1024;
+
+interface Props {
+	type: "Video" | "Audio" | "Image";
+	toggleMenu: () => void;
+	rounded?: "top" | "bottom" | "none";
+}
+
+export function AddMediaButton({
+	type,
+	rounded = "none",
+	toggleMenu,
+}: Props): JSX.Element {
+	const { board } = useAppContext();
+	const account = useAccount();
+	const inputRef = useRef<HTMLInputElement>(null);
+	const { t } = useTranslation();
+
+	const handleClick = (): void => {
+		const input = inputRef.current;
+		if (!input) {
+			return;
+		}
+		board.tools.cancel();
+		input.click();
+	};
+
+	const notifyAboutUnsupportedFormat = () => {
+		if (inputRef.current) {
+			inputRef.current.value = "";
+		}
+		notify({
+			variant: "warning",
+			header: t("toolsPanel.addMedia.unsupportedFormat.header"),
+			body: t("toolsPanel.addMedia.unsupportedFormat.body"),
+			duration: 4000,
+		});
+	};
+
+	const handleChange: ChangeEventHandler<HTMLInputElement> = async ev => {
+		const input = ev.target;
+		const file = input.files?.[0];
+		if (!file) {
+			return;
+		}
+
+		if (!validateMediaFile(file, account)) {
+			if (inputRef.current) {
+				inputRef.current.value = "";
+			}
+			return;
+		}
+
+		// if (!(await account.checkMediaStorageSpace())) {
+		// 	openModal(USER_PLAN_MODAL_ID)
+		// }
+
+		const fileExtension = file.name.split(".").pop()?.toLowerCase();
+
+		switch (type) {
+			case "Video":
+				if (
+					!fileExtension ||
+					!conf.VIDEO_FORMATS.includes(fileExtension)
+				) {
+					return notifyAboutUnsupportedFormat();
+				}
+				mediaApi.uploadVideo(
+					file,
+					board,
+					notify,
+					fileExtension,
+					account.accessToken,
+				);
+				break;
+			case "Audio":
+				if (
+					!fileExtension ||
+					!conf.AUDIO_FORMATS.includes(fileExtension)
+				) {
+					return notifyAboutUnsupportedFormat();
+				}
+				mediaApi.uploadAudio(
+					file,
+					board,
+					notify,
+					fileExtension,
+					account.accessToken,
+				);
+				break;
+			default:
+				mediaApi.uploadImage(file, board, account.accessToken);
+		}
+
+		input.value = "";
+		toggleMenu();
+	};
+
+	let accept = "image/*,application/pdf";
+
+	if (type === "Video") {
+		accept = conf.VIDEO_MIME_TYPES.join(",");
+	}
+
+	if (type === "Audio") {
+		accept = conf.AUDIO_MIME_TYPES.join(",");
+	}
+
+	return (
+		<UiButton
+			id={`tool-add-${type}`}
+			tooltip={t(`toolsPanel.addMedia.${type}`)}
+			onClick={handleClick}
+			rounded={rounded}
+			variant="secondary"
+		>
+			<Icon iconName={type} width={20} height={20} />
+			<input
+				onChange={handleChange}
+				ref={inputRef}
+				type="file"
+				style={{ display: "none" }}
+				accept={accept}
+			/>
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/Buttons/AddShape/AddShape.module.css

@@ -0,0 +1,18 @@
+.panel {
+	display: grid;
+	grid-template-columns: repeat(3, 32px);
+	justify-content: center;
+	overflow: hidden;
+}
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 8px;
+	height: 192px;
+}
+
+.button {
+	white-space: nowrap;
+}

package/src/features/ToolsPanel/Buttons/AddShape/AddShape.tsx

@@ -0,0 +1,97 @@
+import { getHotkeyLabel, ShapeType } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import { ShapePicker } from "features/Pickers/ShapeTypePicker";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Icon, ShapeIcon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import { useShapesPanelContext } from "../../../ShapesPanel";
+import { ButtonWithMenu } from "../ButtonWithMenu";
+import style from "./AddShape.module.css";
+
+export function AddShape() {
+	const [isShapeSelected, setIsShapeSelected] = useState(false);
+	const { board } = useAppContext();
+	const { isOpen, openShapesPanel, selectedCategory } =
+		useShapesPanelContext();
+	const { t } = useTranslation();
+
+	const addShape = board.tools.getAddShape();
+	const isActive = Boolean(addShape);
+	const selectedShape = addShape?.type;
+	const isDown = addShape?.isDown;
+
+	useEffect(() => {
+		if (isDown) {
+			setIsShapeSelected(true);
+		}
+	}, [isDown]);
+
+	const handleClick = () => {
+		if (isActive && selectedShape !== "None" && isShapeSelected) {
+			setIsShapeSelected(false);
+		} else if (isActive && selectedShape !== "None") {
+			setIsShapeSelected(true);
+		}
+		if (!isActive || (isActive && selectedShape === "None")) {
+			board.tools.addShape(true);
+			setIsShapeSelected(false);
+		}
+	};
+
+	const handlePick = (shape: ShapeType) => {
+		const tool = board.tools.getAddShape();
+		if (tool) {
+			tool.setShapeType(shape);
+			setIsShapeSelected(true);
+		}
+	};
+
+	return (
+		<ButtonWithMenu
+			button={
+				<UiButton
+					id={"tool-add-shape"}
+					tooltip={
+						isActive ? undefined : t("toolsPanel.addShape.tooltip")
+					}
+					hotkey={getHotkeyLabel("shape")}
+					active={isActive}
+					onClick={handleClick}
+					variant="secondary"
+					rounded="none"
+				>
+					{isActive && selectedShape !== "None" ? (
+						<ShapeIcon
+							height={24}
+							width={24}
+							iconName={selectedShape!}
+						/>
+					) : (
+						<Icon iconName="Shape" />
+					)}
+				</UiButton>
+			}
+			isOpen={isActive && !isShapeSelected && !isOpen}
+		>
+			<UiPanel className={style.wrapper}>
+				<div className={style.panel}>
+					<ShapePicker
+						categoryName={selectedCategory}
+						selected={selectedShape}
+						onPick={handlePick}
+					/>
+				</div>
+				<UiButton
+					onClick={openShapesPanel}
+					variant="quaternary"
+					className={style.button}
+					size="sm"
+				>
+					{t("toolsPanel.addShape.showAll")}
+				</UiButton>
+			</UiPanel>
+		</ButtonWithMenu>
+	);
+}

package/src/features/ToolsPanel/Buttons/AddShape/index.ts

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

package/src/features/ToolsPanel/Buttons/AddSticker.tsx

@@ -0,0 +1,73 @@
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { ColorPicker } from "features/Pickers/ColorPicker/ColorPicker";
+import { conf, getHotkeyLabel } from "microboard-temp";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ButtonWithMenu } from "./ButtonWithMenu";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+export function AddSticker() {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+	const [isActive, setIsActive] = useState(
+		Boolean(board.tools.getAddConnector()),
+	);
+
+	const addTool = board.tools.getAddSticker();
+	useEffect(() => {
+		if (addTool) {
+			setIsActive(true);
+		} else {
+			setIsActive(false);
+		}
+	}, [addTool]);
+
+	const handleClick = () => {
+		board.tools.addSticker(true);
+		setIsActive(false);
+	};
+
+	const handlePick = (color: string) => {
+		const tool = board.tools.getAddSticker();
+		if (tool) {
+			tool.setBackgroundColor(color);
+			setIsActive(false);
+		}
+	};
+
+	const selectedColor = board.tools.getAddSticker()?.getBackgroundColor();
+
+	return (
+		<ButtonWithMenu
+			button={
+				<UiButton
+					id={"tool-add-sticker"}
+					tooltip={
+						isActive
+							? undefined
+							: t("toolsPanel.addSticker.tooltip")
+					}
+					hotkey={getHotkeyLabel("sticker")}
+					active={isActive || !!addTool}
+					onClick={handleClick}
+					variant="secondary"
+					rounded="none"
+				>
+					<Icon iconName="Sticker" />
+				</UiButton>
+			}
+			isOpen={isActive}
+		>
+			<UiPanel grid columns={2}>
+				<ColorPicker
+					selectedColor={selectedColor}
+					colors={conf.STICKER_COLORS}
+					onPick={handlePick}
+					variant="square"
+				/>
+			</UiPanel>
+		</ButtonWithMenu>
+	);
+}

package/src/features/ToolsPanel/Buttons/AddTemplate.tsx

@@ -0,0 +1,28 @@
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { SELECT_TEMPLATE_MODAL } from "features/Templates/SelectTemplateModal/SelectTemplateModal";
+
+export function AddTemplate() {
+	const { openModal } = useUiModalContext();
+	const { t } = useTranslation();
+
+	const handleClick = async event => {
+		event.stopPropagation();
+		openModal(SELECT_TEMPLATE_MODAL);
+	};
+
+	return (
+		<UiButton
+			id={"tool-add-template"}
+			tooltip={t("toolsPanel.addTemplate.tooltip")}
+			onClick={handleClick}
+			variant="secondary"
+			rounded="top"
+		>
+			<Icon iconName="Template" />
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/Buttons/AddText.tsx

@@ -0,0 +1,31 @@
+import { getHotkeyLabel } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+export function AddText() {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handleClick = () => {
+		board.tools.addText(true);
+	};
+
+	const isActive = Boolean(board.tools.getAddText());
+
+	return (
+		<UiButton
+			id={"tool-add-text"}
+			tooltip={isActive ? undefined : t("toolsPanel.addText.tooltip")}
+			hotkey={getHotkeyLabel("text")}
+			onClick={handleClick}
+			active={isActive}
+			variant="secondary"
+			rounded="none"
+		>
+			<Icon iconName="Text" />
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/Buttons/ButtonWithMenu/ButtonWithMenu.module.css

@@ -0,0 +1,9 @@
+.container {
+	position: relative;
+}
+
+.menu {
+	position: absolute;
+	left: calc(100% + 0.8rem);
+	top: 0;
+}

package/src/features/ToolsPanel/Buttons/ButtonWithMenu/ButtonWithMenu.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef, PropsWithChildren, ReactNode } from "react";
+import style from "./ButtonWithMenu.module.css";
+import clsx from "clsx";
+
+type Props = PropsWithChildren<{
+	isOpen: boolean;
+	button: ReactNode;
+	className?: string;
+}>;
+
+export const ButtonWithMenu = forwardRef<HTMLDivElement, Props>(
+	({ button, children, isOpen, className }, ref) => {
+		return (
+			<div
+				className={clsx(style.container, className && className)}
+				ref={ref}
+			>
+				{button}
+				{isOpen && <div className={style.menu}>{children}</div>}
+			</div>
+		);
+	},
+);
+ButtonWithMenu.displayName = "ButtonWithMenu";

package/src/features/ToolsPanel/Buttons/ButtonWithMenu/index.ts

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

package/src/features/ToolsPanel/Buttons/EventList/EventList.module.css

@@ -0,0 +1,5 @@
+@media screen and (max-width: 1028px) {
+	.panel {
+		display: none;
+	}
+}

package/src/features/ToolsPanel/Buttons/EventList/EventList.tsx

@@ -0,0 +1,144 @@
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import React, { CSSProperties, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { ButtonWithMenu } from "../ButtonWithMenu";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import { History } from "./History";
+import { SyncJournal } from "./SyncJournal";
+import style from "./EventList.module.css";
+
+export const EventList = React.memo(function EventList(): JSX.Element {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+	const [opened, setOpened] = useState(false);
+	const forceUpdate = useForceUpdate();
+	const buttonWithMenuRef = useRef<HTMLDivElement>(null);
+	const [viewMode, setViewMode] = useState<"history" | "syncJournal">(
+		"history",
+	);
+
+	useAppSubscription({
+		subjects: ["board"], // previously used syncLog subject
+		observer: forceUpdate,
+	});
+
+	const handleClick = (): void => {
+		setOpened(prev => !prev);
+	};
+
+	const getPanelTransform = (): string => {
+		if (buttonWithMenuRef.current) {
+			const buttonHeight = buttonWithMenuRef.current.offsetHeight;
+			return `translateY(calc(-100% + ${buttonHeight}px))`;
+		}
+		return "translateY(-100%)";
+	};
+
+	const listStyle: CSSProperties = {
+		width: "100%",
+	};
+
+	return (
+		<UiPanel vertical padding={0} zIndex={101} className={style.panel}>
+			<ButtonWithMenu
+				ref={buttonWithMenuRef}
+				button={
+					<UiButton
+						id={"EventList"}
+						// tooltip={t("toolsPanel.eventList.tooltip")}
+						// hotkey={getHotkeyLabel("eventList")}
+						onClick={handleClick}
+						rounded="full"
+						variant="secondary"
+					>
+						<Icon iconName="Gear" />
+					</UiButton>
+				}
+				isOpen={opened}
+			>
+				<UiPanel
+					key="EventList_Panel"
+					vertical
+					gap={3}
+					padding={6}
+					style={{
+						display: "flex",
+						flexDirection: "column",
+						maxHeight: "90vh",
+						width: "40vw",
+						padding: "6px",
+						overflowY: "auto",
+						transform: getPanelTransform(),
+						userSelect: "auto",
+						overflowX: "hidden",
+						flexGrow: 1,
+						flexShrink: 0,
+					}}
+				>
+					<UiPanel
+						key="EventList_Mode_Selector"
+						padding={3}
+						gap={3}
+						style={{
+							display: "flex",
+							justifyContent: "space-between",
+							width: "100%",
+						}}
+					>
+						<UiButton
+							onClick={() => setViewMode("history")}
+							style={{ width: "100%" }}
+							variant={
+								viewMode === "history"
+									? "tertiary"
+									: "secondary"
+							}
+							key="EventList_Mode_Selector_History"
+						>
+							Events History
+						</UiButton>
+						<UiButton
+							style={{ width: "100%" }}
+							onClick={() => setViewMode("syncJournal")}
+							variant={
+								viewMode === "syncJournal"
+									? "tertiary"
+									: "secondary"
+							}
+							key="EventList_Mode_Selector_SyncJournal"
+						>
+							Synchronization Journal
+						</UiButton>
+					</UiPanel>
+					{!board.events && "Events not found"}
+					{board.events && viewMode === "history" && (
+						<History
+							style={listStyle}
+							events={{
+								confirmedEvents: board.events.log.list
+									.getConfirmedRecords()
+									.map(record => record.event),
+								eventsToSend: board.events.log.list
+									.getRecordsToSend()
+									.map(record => record.event),
+								newEvents: board.events.log.list
+									.getNewRecords()
+									.map(record => record.event),
+							}}
+						/>
+					)}
+					{board.events && viewMode === "syncJournal" && (
+						<SyncJournal
+							style={listStyle}
+							log={board.events.log.getSyncLog()}
+						/>
+					)}
+				</UiPanel>
+			</ButtonWithMenu>
+		</UiPanel>
+	);
+});