microboard-ui-temp 0.0.3

package/src/features/ShareSnapshotModal/SnapshotNameInput.tsx

@@ -0,0 +1,225 @@
+import React, { SyntheticEvent, useEffect, useRef, useState } from "react";
+import styles from "./SnapshotNameInput.module.css";
+import { notify } from "shared/ui-lib/Toast";
+import { useAppContext } from "features/AppContext";
+import { boardsApi, HTTPError } from "shared/api";
+import { UiButton } from "shared/ui-lib/UiButton";
+import clsx from "clsx";
+import { nanoid } from "nanoid";
+import { Icon } from "shared/ui-lib/Icon";
+import { useTranslation } from "react-i18next";
+import { Board } from "microboard-temp";
+import { TFunction } from "i18next";
+
+function getURLSafeBoardName(
+	board: Board,
+	tF: TFunction<"default", undefined>,
+) {
+	const boardName = board.getName();
+	if (boardName === tF("board.untitled")) {
+		return "Untitled";
+	}
+
+	return boardName;
+}
+
+const SnapshotNameInput: React.FC<{
+	buttonDisabled?: boolean;
+}> = ({ buttonDisabled }) => {
+	const inputRef = useRef<HTMLInputElement>(null);
+	const { t } = useTranslation();
+	const { board } = useAppContext();
+	const [snapshotName, setSnapshotName] = useState(
+		("Board" + getURLSafeBoardName(board, t)).replace(" ", ""),
+	);
+	const [errMsg, setErrMsg] = useState<null | string | "InvalidURL">(null);
+	const [snapshotURI, setSnapshotURI] = useState<null | string>(null);
+
+	const stopPropagation = (ev: SyntheticEvent): void => {
+		ev.stopPropagation();
+	};
+
+	const handleFocusInput = (): void => {
+		inputRef.current?.focus();
+	};
+
+	useEffect(() => {
+		if (inputRef.current) {
+			inputRef.current.focus();
+			inputRef.current.select();
+		}
+	}, []);
+
+	const handleInputChange = (
+		ev: React.ChangeEvent<HTMLInputElement>,
+	): void => {
+		ev.stopPropagation();
+		ev.preventDefault();
+		setSnapshotName(ev.target.value);
+		const forbiddenSymbols = ev.target.value
+			.trim()
+			.match(/[^A-Za-z0-9._~-]/g);
+		if (forbiddenSymbols) {
+			setErrMsg("InvalidURL");
+		} else {
+			setErrMsg(null);
+			setSnapshotURI(null);
+		}
+	};
+
+	const handleSnapshotSubmit = async (): Promise<void> => {
+		setSnapshotURI(null);
+		setErrMsg(null);
+
+		const trimmedName = snapshotName
+			.trim()
+			.replace(/[^A-Za-z0-9._~-]/g, "");
+		if (!trimmedName) {
+			setErrMsg(t("export.HTMLSnapshot.nameCantBeEmpty"));
+			return;
+		}
+
+		const uniqueSnapshotName = trimmedName + "?" + nanoid(10);
+		try {
+			const snapshot = board.serializeHTML();
+			const data = await boardsApi.publishSnapshot(
+				snapshot,
+				uniqueSnapshotName,
+				board.getBoardId(),
+			);
+			const userFriendlyURI = decodeURIComponent(data.snapshotURI);
+
+			setSnapshotURI(userFriendlyURI);
+			navigator.clipboard.writeText(userFriendlyURI);
+			notify({
+				body:
+					t("export.HTMLSnapshot.successNotificationStart") +
+					" " +
+					userFriendlyURI +
+					" " +
+					t("export.HTMLSnapshot.successNotificationEnd"),
+				variant: "success",
+			});
+		} catch (err) {
+			if (err instanceof HTTPError) {
+				setErrMsg(err.message);
+			}
+			console.error("Error occured during saving snapshot", err);
+			notify({
+				body: t("export.HTMLSnapshot.SnapshotSavingError"),
+				variant: "error",
+			});
+		}
+	};
+
+	const handleCopySnapshotURI = (
+		ev: React.MouseEvent<HTMLSpanElement>,
+	): void => {
+		ev.stopPropagation();
+		if (snapshotURI) {
+			navigator.clipboard.writeText(snapshotURI);
+			notify({ body: "Copied!", variant: "success" });
+		}
+	};
+
+	return (
+		<div className={styles.wrapper}>
+			<div className={styles.inputWrapper}>
+				<div className={styles.nativeInput}>
+					<div
+						className={styles.description}
+						onClick={handleFocusInput}
+						onFocus={handleFocusInput}
+						tabIndex={0}
+						style={{
+							whiteSpace: "nowrap",
+							flexShrink: 0,
+							display: "inline-block",
+						}}
+					>
+						{window.location.origin + "/snapshots/"}
+					</div>
+					<input
+						type="text"
+						className={styles.userInput}
+						onKeyDown={stopPropagation}
+						onChange={handleInputChange}
+						value={snapshotName}
+						ref={inputRef}
+					/>
+				</div>
+			</div>
+			<Description
+				error={errMsg}
+				successMsg={
+					snapshotURI &&
+					t("export.HTMLSnapshot.HTMLSnapshotLinkSuccess")
+				}
+			/>
+			<div className={styles.btns}>
+				{snapshotURI ? (
+					<UiButton
+						variant="primary"
+						onClick={handleCopySnapshotURI}
+						className={styles.btn}
+						disabled={buttonDisabled}
+						size="lg"
+					>
+						<Icon iconName="CopyLink" width={20} height={20} />
+						Copy link
+					</UiButton>
+				) : (
+					<UiButton
+						variant="primary"
+						onClick={handleSnapshotSubmit}
+						className={styles.btn}
+						disabled={
+							buttonDisabled ||
+							errMsg === "InvalidURL" ||
+							!snapshotName?.trim()
+						}
+						size="lg"
+					>
+						<Icon iconName="Tick" width={20} height={20} />
+						Save
+					</UiButton>
+				)}
+			</div>
+		</div>
+	);
+};
+
+const Description: React.FC<{
+	error?: string | null;
+	successMsg?: string | null;
+}> = ({ error, successMsg }) => {
+	const { t } = useTranslation();
+
+	if (!error && !successMsg) {
+		return null;
+	}
+
+	return (
+		<div
+			className={clsx(
+				styles.description,
+				error && styles.error,
+				successMsg && styles.success,
+			)}
+		>
+			{error &&
+				error === "id already taken" &&
+				t("export.HTMLSnapshot.alreadyTaken")}
+			{error &&
+				error === "InvalidURL" &&
+				t("export.HTMLSnapshot.invalidURL")}
+			{error &&
+				error !== "id already taken" &&
+				error !== "InvalidURL" &&
+				error}
+			{successMsg}
+		</div>
+	);
+};
+
+export default SnapshotNameInput;

package/src/features/ShareSnapshotModal/index.ts

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

package/src/features/SidePanel/LocalSidePanelContext.tsx

@@ -0,0 +1,66 @@
+// import { useBoardsList } from "App/useBoardsList";
+import {
+	createStrictContext,
+	useStrictContext,
+} from "shared/lib/strictContext";
+import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { AIContextProvider } from "entities/AIInput/AIContext";
+// import { useNavigate } from "react-router-dom";
+// import { useAppContext } from "features/AppContext";
+// import { useContextMenuContext } from "features/ContextMenu";
+// import { useOpenedFoldersContext } from "features/Folder";
+
+type SidePanelContext = {
+	openMenu: (highlightTime?: number) => void;
+	stamp: number | null;
+	setStamp: React.Dispatch<React.SetStateAction<number | null>>;
+	isOpen: boolean;
+	isHighlighted: boolean;
+};
+
+export const LocalSidePanelContext = createStrictContext<SidePanelContext>();
+
+export function useLocalSidePanelContext(): SidePanelContext {
+	return useStrictContext(LocalSidePanelContext);
+}
+
+export function LocalSidePanelContextProvider({
+	children,
+}: PropsWithChildren<{}>): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [stamp, setStamp] = useState<null | number>(null);
+	const [highlighted, setHighlighted] = useState(false);
+	const timeoutRef = useRef<NodeJS.Timeout>();
+
+	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);
+	};
+
+	return (
+		<AIContextProvider>
+			<LocalSidePanelContext.Provider
+				value={{
+					isOpen,
+					openMenu,
+					stamp,
+					setStamp,
+					isHighlighted: highlighted,
+				}}
+			>
+				{children}
+			</LocalSidePanelContext.Provider>
+		</AIContextProvider>
+	);
+}

package/src/features/SidePanel/ResizableEdge.module.css

@@ -0,0 +1,9 @@
+.resizeHandle {
+	position: absolute;
+	top: 0;
+	right: -10px;
+	width: 20px;
+	height: 100%;
+	cursor: ew-resize;
+	z-index: 1;
+}

package/src/features/SidePanel/ResizableEdge.tsx

@@ -0,0 +1,77 @@
+import React, {
+	useEffect,
+	useRef,
+	useState,
+	type Dispatch,
+	type SetStateAction,
+} from "react";
+
+import style from "./ResizableEdge.module.css";
+
+type Props = {
+	panelWidth: number;
+	setWidth: Dispatch<SetStateAction<number>>;
+};
+
+export function ResizableEdge({ panelWidth, setWidth }: Props) {
+	const resizableRef = useRef<HTMLDivElement>(null);
+	const [isDown, setIsDown] = useState(false);
+
+	const pointerDown = (event: PointerEvent) => {
+		if (!event.currentTarget) {
+			return;
+		}
+		const target = event.currentTarget as HTMLDivElement;
+		target.setPointerCapture(event.pointerId);
+		setIsDown(true);
+	};
+
+	const pointerMove = (event: PointerEvent) => {
+		if (!isDown) {
+			return;
+		}
+		const currentX = event.clientX;
+		const newWidth = panelWidth + (currentX - panelWidth);
+		setWidth(newWidth);
+	};
+
+	const pointerUp = (event: PointerEvent) => {
+		if (!event.currentTarget) {
+			return;
+		}
+		const target = event.currentTarget as HTMLDivElement;
+		target.releasePointerCapture(event.pointerId);
+		setIsDown(false);
+	};
+
+	const pointerCancel = (event: PointerEvent) => {
+		if (!event.currentTarget) {
+			return;
+		}
+		const target = event.currentTarget as HTMLDivElement;
+		target.releasePointerCapture(event.pointerId);
+		setIsDown(false);
+	};
+
+	useEffect(() => {
+		const resizable = resizableRef.current;
+
+		if (resizable) {
+			resizable.addEventListener("pointerdown", pointerDown);
+			resizable.addEventListener("pointermove", pointerMove);
+			resizable.addEventListener("pointerup", pointerUp);
+			resizable.addEventListener("pointercancel", pointerCancel);
+		}
+
+		return () => {
+			if (resizable) {
+				resizable.removeEventListener("pointerdown", pointerDown);
+				resizable.removeEventListener("pointermove", pointerMove);
+				resizable.removeEventListener("pointerup", pointerUp);
+				resizable.removeEventListener("pointercancel", pointerCancel);
+			}
+		};
+	}, [isDown, panelWidth]);
+
+	return <div className={style.resizeHandle} ref={resizableRef} />;
+}

package/src/features/SidePanel/SidePanel.module.css

@@ -0,0 +1,140 @@
+.sidePanel {
+	transition:
+		max-width 0.3s,
+		outline 0.3s 0.35s,
+		box-shadow 0.3s 0.35s;
+	overflow: hidden;
+	max-width: 0;
+	display: block;
+	box-shadow: none;
+	border: none;
+	margin-left: 0;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
+
+.sidePanel.open {
+	max-width: 35dvw;
+	min-width: 150px;
+	visibility: visible;
+	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+	border: 1px solid var(--border-action-normal);
+	margin-left: 12px;
+}
+
+.sidePanel.open.highlited {
+	box-shadow: 0px 0px 0px 4px rgba(200, 178, 255, 0.5);
+	outline: 1px solid rgba(183, 138, 240, 1);
+}
+
+@media screen and (max-width: 640px) {
+	.sidePanel.open {
+		max-width: calc(100dvw - 86px);
+	}
+}
+
+.content {
+	display: grid;
+	grid-template-rows: max-content minmax(0, 1fr) max-content;
+	padding: 8px 8px;
+	padding-right: 3px;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	flex: 1 0;
+	padding-bottom: 0;
+	padding-left: 14px;
+}
+
+.folders {
+	flex: 1 1 50vh;
+	overflow: auto;
+	width: auto;
+	height: calc(100% - 100px);
+}
+
+.foldersWrapper {
+	max-width: 100%;
+}
+
+/* .rootFolder {
+	overflow-x: auto;
+	overflow-y: hidden;
+} */
+
+.folders::-webkit-scrollbar {
+	appearance: none;
+	width: 4px;
+	height: 4px;
+}
+
+.folders::-webkit-scrollbar-button {
+	display: none;
+}
+
+.folders::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 2px;
+}
+
+.header {
+	padding: 6px 12px;
+	display: flex;
+	gap: 4px;
+	align-items: center;
+}
+
+.title {
+	font-weight: 500;
+	font-size: 14px;
+	flex: 1 0;
+	padding: 4px 8px;
+	line-height: 20px;
+}
+
+.close {
+	--padding: 4px;
+	--radius: 0;
+	--min-width: 28px;
+	--min-height: 28px;
+	color: var(--text-base-primary);
+}
+
+.importMiroBtnWr {
+	padding: 0 16px 16px;
+}
+
+.importMiroBtn {
+	width: 100%;
+}
+
+.bottom {
+	padding: 14px 16px;
+	display: flex;
+	flex-direction: column;
+	justify-content: stretch;
+	align-items: center;
+	gap: 6px;
+}
+
+.add {
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	flex: 1 0;
+	padding: 6px;
+	font-size: 1.4rem;
+	line-height: 2rem;
+	font-weight: 500;
+	cursor: pointer;
+	background: none;
+	border: 1px solid rgb(222, 223, 227);
+	border-radius: 10px;
+	box-shadow: 0px 1px 2px 0px rgba(20, 21, 26, 0.05);
+	font-family: Manrope;
+}

package/src/features/SidePanel/SidePanel.tsx

@@ -0,0 +1,179 @@
+import { SortableContext } from "@dnd-kit/sortable";
+import { useAccount } from "App/useAccount";
+import { useBoardsList } from "App/useBoardsList";
+import clsx from "clsx";
+import {
+	Folder,
+	FoldersDndContext,
+	useOpenedFoldersContext,
+} from "entities/Folder";
+import { DraggingWrapper } from "entities/Folder/DraggingWrapper";
+import { DraggingItem } from "entities/Folder/DragOverlay";
+import { useAppContext } from "features/AppContext";
+import { useContextMenuContext } from "features/ContextMenu";
+import { IMPORT_MIRO_START_MODAL } from "features/ImportMiro/ImportMiroStartModal/ImportMiroStartModal";
+import React, {
+	useEffect,
+	useRef,
+	useState,
+	type MouseEventHandler,
+} from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { useClickOutside } from "shared/lib/useClickOutside";
+import { Icon } from "shared/ui-lib/Icon";
+import { Tooltip } from "shared/ui-lib/Tooltip";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import { ResizableEdge } from "./ResizableEdge";
+import style from "./SidePanel.module.css";
+import { useSidePanelContext } from "./SidePanelContext";
+import { useIsPhoneScreen } from "shared/lib/useIsPhoneScreen";
+
+const MIN_PANEL_WIDTH = 280;
+
+export function SidePanel(): JSX.Element {
+	const { board } = useAppContext();
+	const { isOpen, toggleSideMenu, isHighlighted, openMenu } =
+		useSidePanelContext();
+	const { setFoldersRefState, setId } = useOpenedFoldersContext();
+	const { open, close } = useContextMenuContext();
+	const { t } = useTranslation();
+	const [width, setWidth] = useState(300);
+	const account = useAccount();
+	const boardsList = useBoardsList();
+	const foldersRef = useRef<HTMLDivElement>(null);
+	const { openModal } = useUiModalContext();
+	const isPhoneScreen = useIsPhoneScreen();
+
+	useEffect(() => {
+		if (!foldersRef.current) {
+			return;
+		}
+
+		setFoldersRefState(foldersRef.current);
+	}, [foldersRef.current]);
+
+	useEffect(() => {
+		setId(board.getBoardId());
+	}, [board.getBoardId()]);
+
+	const panelRef = useClickOutside(() => {
+		close();
+	});
+
+	const handleContextMenuOpen: MouseEventHandler = event => {
+		event.preventDefault();
+		close();
+		open(event.clientX, event.clientY);
+	};
+
+	const handleAddNewMenu: MouseEventHandler<HTMLButtonElement> = ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		const MENU_Y_POS_OFFSET = -85;
+		const buttonRect = ev.currentTarget.getBoundingClientRect();
+		open(ev.clientX, buttonRect.top + MENU_Y_POS_OFFSET);
+	};
+
+	useEffect(() => {
+		if (board.getBoardId() === "blank" && !isPhoneScreen) {
+			openMenu();
+		}
+
+		if (board.getBoardId() !== "blank" && isPhoneScreen) {
+			if (isOpen) {
+				toggleSideMenu();
+				return;
+			}
+			close();
+		}
+	}, [board.getBoardId()]);
+
+	const newWidth = width <= MIN_PANEL_WIDTH ? MIN_PANEL_WIDTH : width;
+	return (
+		<UiPanel
+			ref={panelRef}
+			onContextMenu={handleContextMenuOpen}
+			padding={0}
+			className={clsx(style.sidePanel, {
+				[style.open]: isOpen,
+				[style.highlited]: isHighlighted,
+			})}
+			style={{ width: newWidth }}
+		>
+			<div className={style.content}>
+				<div className={style.header}>
+					<h3 className={style.title}>{t("sidePanel.title")}</h3>
+					<UiButton
+						onClick={toggleSideMenu}
+						variant="secondary"
+						className={style.close}
+					>
+						<Icon iconName="Close" />
+					</UiButton>
+				</div>
+				<div className={style.folders} ref={foldersRef}>
+					<div className={style.foldersWrapper}>
+						<FoldersDndContext>
+							<SortableContext
+								items={[
+									boardsList.getRootFolder()?.id ?? 0,
+									boardsList.getDraftsFolder()?.id ?? 1,
+									boardsList.getSharedFolder()?.id ?? 2,
+								]}
+							>
+								<Folder
+									accordionClassName={style.rootFolder}
+									folder={boardsList.getRootFolder()}
+								/>
+								<Folder
+									accordionClassName={style.rootFolder}
+									folder={boardsList.getDraftsFolder()}
+								/>
+								<Folder folder={boardsList.getSharedFolder()} />
+							</SortableContext>
+							{createPortal(
+								<DraggingWrapper>
+									<DraggingItem />
+								</DraggingWrapper>,
+								document.body,
+							)}
+						</FoldersDndContext>
+					</div>
+				</div>
+			</div>
+			<div className={style.bottom}>
+				<button className={style.add} onClick={handleAddNewMenu}>
+					<Icon iconName="Plus" width={16} height={16} />
+					<span>{t("sidePanel.addNew")}</span>
+				</button>
+				<UiButton
+					id={"miro"}
+					variant="primary"
+					onClick={e => {
+						e.stopPropagation();
+						openModal(IMPORT_MIRO_START_MODAL);
+					}}
+					disabled={!account.isLoggedIn}
+					className={style.importMiroBtn}
+					size="lg"
+				>
+					<span>{t("miro.importMiroBtn")}</span>
+					<Tooltip
+						tooltip={
+							!account.isLoggedIn
+								? t("miro.authTooltip")
+								: t("miro.tooltipClipboardImport")
+						}
+						tooltipPosition="top-center-fixed"
+						tooltipAlign="left"
+					/>
+				</UiButton>
+			</div>
+			<ResizableEdge panelWidth={width} setWidth={setWidth} />
+		</UiPanel>
+	);
+}