microboard-ui-temp 0.0.3

package/src/features/Rename/RenameInput.tsx

@@ -0,0 +1,78 @@
+import clsx from "clsx";
+import React, {
+	ChangeEventHandler,
+	FocusEventHandler,
+	FormEventHandler,
+	KeyboardEventHandler,
+	useEffect,
+	useRef,
+	type SyntheticEvent,
+} from "react";
+
+import style from "./RenameInput.module.css";
+import { useRenameContext } from "./RenameContext";
+
+export function RenameInput() {
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const { newName, rename, setNewName, setRenamingId } = useRenameContext();
+
+	useEffect(() => {
+		if (!inputRef.current) {
+			return;
+		}
+		inputRef.current.focus();
+		setTimeout(() => {
+			inputRef.current?.select();
+		}, 0);
+	}, []);
+
+	const handleSubmit: FormEventHandler = event => {
+		event.preventDefault();
+
+		rename();
+		setNewName("");
+		setRenamingId(null);
+	};
+
+	const preventPropagation = (event: SyntheticEvent) =>
+		event.stopPropagation();
+
+	const handleCancel: KeyboardEventHandler = event => {
+		event.stopPropagation();
+		if (event.code === "Escape") {
+			setNewName("");
+			setRenamingId(null);
+		}
+	};
+
+	const handleBlur: FocusEventHandler = () => {
+		rename();
+
+		setTimeout(() => {
+			setNewName("");
+			setRenamingId(null);
+		}, 100);
+	};
+
+	const handleChange: ChangeEventHandler<HTMLInputElement> = ev => {
+		setNewName(ev.target.value);
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className={clsx(style.form)}>
+			<input
+				ref={inputRef}
+				className={clsx(style.input)}
+				onChange={handleChange}
+				onKeyDown={handleCancel}
+				onKeyUp={preventPropagation}
+				onClick={preventPropagation}
+				onPointerDown={preventPropagation}
+				onPointerUp={preventPropagation}
+				onBlur={handleBlur}
+				value={newName}
+				type="text"
+			/>
+		</form>
+	);
+}

package/src/features/Rename/index.ts

@@ -0,0 +1,2 @@
+export { RenameContextProvider, useRenameContext } from "./RenameContext";
+export { RenameInput } from "./RenameInput";

package/src/features/ShapesPanel/ShapesCategory/ShapesCategory.module.css

@@ -0,0 +1,29 @@
+.shapesGrid {
+	margin-top: 8px;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+	gap: 8px;
+	overflow: hidden;
+	transition: max-height 0.3s ease-in-out;
+	max-height: 100%;
+	width: 100%;
+}
+
+.closed {
+	max-height: 0;
+}
+
+.categoryHeader {
+	padding: 0 8px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+}
+
+.categoryContainer {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}

package/src/features/ShapesPanel/ShapesCategory/ShapesCategory.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import styles from "./ShapesCategory.module.css";
+import { ShapePicker } from "../../Pickers/ShapeTypePicker";
+import { useTranslation } from "react-i18next";
+import { ShapeCategoryName, ShapeType } from "microboard-temp";
+import { Icon } from "../../../shared/ui-lib/Icon";
+import clsx from "clsx";
+import { useAppContext } from "features/AppContext";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+interface Props {
+	handlePick: (
+		shape: ShapeType,
+		category?: ShapeCategoryName,
+		e?: MouseEvent,
+	) => void;
+	categoryName: ShapeCategoryName;
+}
+
+export const ShapesCategory = ({ handlePick, categoryName }: Props) => {
+	const [isPickerShown, setIsPickerShown] = useState(true);
+	const { board } = useAppContext();
+	const forceUpdate = useForceUpdate();
+	useAppSubscription({
+		subjects: ["tools"],
+		observer: forceUpdate,
+	});
+	const { t } = useTranslation();
+
+	return (
+		<div className={styles.categoryContainer}>
+			<div className={styles.categoryHeader}>
+				<p className={styles.categoryName}>
+					{t(`shapesPanel.${categoryName}`)}
+				</p>
+				<UiButton
+					onClick={() => setIsPickerShown(!isPickerShown)}
+					variant="secondary"
+					size={"sm"}
+					style={{ minWidth: "unset" }}
+				>
+					<Icon
+						iconName={
+							isPickerShown
+								? "StrokeChevronUp"
+								: "StrokeChevronDown"
+						}
+						width={16}
+						height={16}
+					/>
+				</UiButton>
+			</div>
+			<div
+				className={clsx(
+					styles.shapesGrid,
+					!isPickerShown && styles.closed,
+				)}
+			>
+				<ShapePicker
+					categoryName={categoryName}
+					onPick={handlePick}
+					buttonSize="lg"
+					selected={board.tools.getAddShape()?.type}
+				/>
+			</div>
+		</div>
+	);
+};

package/src/features/ShapesPanel/ShapesPanel.module.css

@@ -0,0 +1,75 @@
+.shapesPanel {
+	transition:
+		width 0.3s,
+		max-width 0.3s,
+		min-width 0.3s;
+	overflow: hidden;
+	width: 0;
+	box-shadow: none;
+	border: none;
+	margin-left: 0;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
+
+.shapesPanel.open {
+	max-width: 35dvw;
+	width: 292px;
+	min-width: 192px;
+	visibility: visible;
+	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+	border: 1px solid var(--border-action-normal);
+	margin-left: 12px;
+	gap: 12px;
+	padding: 8px 4px !important;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 4px;
+}
+
+.title {
+	font-weight: 500;
+	font-size: 18px;
+	flex: 1 0;
+	padding: 4px 8px;
+	line-height: 24px;
+}
+
+.close {
+	--padding: 4px;
+	--min-width: 28px;
+	--min-height: 28px;
+	color: var(--text-base-primary);
+	border-radius: 12px;
+}
+
+.scrollContainer {
+	overflow-y: auto;
+	scrollbar-gutter: stable;
+	width: 100%;
+	padding: 0 4px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.scrollContainer::-webkit-scrollbar {
+	appearance: none;
+	width: 2px;
+}
+
+.scrollContainer::-webkit-scrollbar-button {
+	display: none;
+}
+
+.scrollContainer::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 2px;
+}

package/src/features/ShapesPanel/ShapesPanel.tsx

@@ -0,0 +1,69 @@
+import clsx from "clsx";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import styles from "./ShapesPanel.module.css";
+import { useShapesPanelContext } from "./ShapesPanelContext";
+import {
+	ShapeCategoryName,
+	ShapeType,
+	SHAPES_CATEGORIES,
+} from "microboard-temp";
+import { Icon } from "../../shared/ui-lib/Icon";
+import { ShapesCategory } from "./ShapesCategory/ShapesCategory";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+export function ShapesPanel(): JSX.Element {
+	const { isOpen, closeShapesPanel, setSelectedCategory } =
+		useShapesPanelContext();
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handlePick = (
+		shape: ShapeType,
+		category?: ShapeCategoryName,
+		e?: MouseEvent,
+	) => {
+		if (!board.tools.getAddShape()) {
+			board.tools.addShape(true);
+		}
+		setSelectedCategory(category ? category : "basicShapes");
+		const tool = board.tools.getAddShape();
+		if (e && e.detail === 2) {
+			return tool?.createShapeInCenter(shape);
+		}
+		if (tool) {
+			tool.setShapeType(shape);
+		}
+	};
+
+	return (
+		<UiPanel
+			padding={0}
+			className={clsx(styles.shapesPanel, isOpen && styles.open)}
+		>
+			<div className={styles.header}>
+				<h3 className={styles.title}>{t("shapesPanel.title")}</h3>
+				<UiButton
+					onClick={closeShapesPanel}
+					variant="secondary"
+					className={styles.close}
+				>
+					<Icon iconName="Close" />
+				</UiButton>
+			</div>
+			<div className={styles.scrollContainer}>
+				{SHAPES_CATEGORIES.map(category => {
+					return (
+						<ShapesCategory
+							categoryName={category.name}
+							handlePick={handlePick}
+							key={category.name}
+						/>
+					);
+				})}
+			</div>
+		</UiPanel>
+	);
+}

package/src/features/ShapesPanel/ShapesPanelContext.tsx

@@ -0,0 +1,109 @@
+import {
+	createStrictContext,
+	useStrictContext,
+} from "shared/lib/strictContext";
+import React, { PropsWithChildren, useEffect, useState } from "react";
+import { ShapeCategoryName } from "microboard-temp";
+import { tempStorage } from "App/SessionStorage";
+
+type ShapesPanelContext = {
+	openShapesPanel: () => void;
+	closeShapesPanel: () => void;
+	isOpen: boolean;
+	selectedCategory: ShapeCategoryName;
+	setSelectedCategory: (selectedCategory: ShapeCategoryName) => void;
+};
+
+export const ShapesPanelContext = createStrictContext<ShapesPanelContext>();
+
+export function useShapesPanelContext(): ShapesPanelContext {
+	return useStrictContext(ShapesPanelContext);
+}
+
+const getInitialShapeCategory = (): ShapeCategoryName => {
+	const savedShapeData = tempStorage.getShapeData();
+
+	if (savedShapeData) {
+		const splitted = savedShapeData.shapeType.split("_");
+		if (splitted.length > 1) {
+			return splitted[0] as ShapeCategoryName;
+		}
+	}
+	return "basicShapes";
+};
+
+// was added to allow usage of ShapesPanelContextProvider outside of router provider
+// (inside of local app)
+function useLocation(): string {
+	const [location, setLocation] = useState(() => window.location.pathname);
+
+	useEffect(() => {
+		const handleUpdate = (): void => {
+			setLocation(window.location.pathname);
+		};
+		window.addEventListener("popstate", handleUpdate);
+
+		const originalPushState = history.pushState;
+		const originalReplaceState = history.replaceState;
+
+		function patchedPushState(
+			...args: Parameters<History["pushState"]>
+		): void {
+			originalPushState.apply(history, args);
+			handleUpdate();
+		}
+		function patchedReplaceState(
+			...args: Parameters<History["replaceState"]>
+		): void {
+			originalReplaceState.apply(history, args);
+			handleUpdate();
+		}
+
+		history.pushState = patchedPushState;
+		history.replaceState = patchedReplaceState;
+
+		return () => {
+			window.removeEventListener("popstate", handleUpdate);
+			history.pushState = originalPushState;
+			history.replaceState = originalReplaceState;
+		};
+	}, []);
+
+	return location;
+}
+
+export function ShapesPanelContextProvider({
+	children,
+}: PropsWithChildren<{}>): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [selectedCategory, setSelectedCategory] = useState<ShapeCategoryName>(
+		getInitialShapeCategory(),
+	);
+	const location = useLocation();
+
+	useEffect(() => {
+		setSelectedCategory(getInitialShapeCategory());
+	}, [location]);
+
+	const closePanel = (): void => {
+		setIsOpen(false);
+	};
+
+	const openPanel = (): void => {
+		setIsOpen(true);
+	};
+
+	return (
+		<ShapesPanelContext.Provider
+			value={{
+				closeShapesPanel: closePanel,
+				openShapesPanel: openPanel,
+				isOpen,
+				selectedCategory,
+				setSelectedCategory,
+			}}
+		>
+			{children}
+		</ShapesPanelContext.Provider>
+	);
+}

package/src/features/ShapesPanel/index.ts

@@ -0,0 +1,5 @@
+export { ShapesPanel } from "./ShapesPanel";
+export {
+	ShapesPanelContextProvider,
+	useShapesPanelContext,
+} from "./ShapesPanelContext";

package/src/features/ShareModal/SaveShareModal.module.css

@@ -0,0 +1,31 @@
+.modalWr {
+	max-width: 528px;
+	width: 100%;
+	border-radius: 24px;
+}
+
+.wr {
+	padding: 32px 64px !important;
+}
+
+.container {
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+}
+
+.title {
+	font-size: 24px;
+	font-weight: 500;
+	margin-bottom: 12px;
+}
+
+.btn {
+	width: 100%;
+}
+
+.backBtn {
+	margin-top: 24px;
+}

package/src/features/ShareModal/SaveShareModal.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import styles from "./SaveShareModal.module.css";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { SHARE_MODAL_ID } from "./ShareModal";
+import { Icon } from "shared/ui-lib/Icon";
+import { useTranslation } from "react-i18next";
+
+export const SAVE_SHARE_MODAL = Symbol("saveShareModal");
+type SaveShareModalType = {
+	onSave: () => Promise<void>;
+};
+
+export function SaveShareModal({ onSave }: SaveShareModalType): JSX.Element {
+	const { openModal, closeModal } = useUiModalContext();
+	const { t } = useTranslation();
+	const onBackBtnClick: React.MouseEventHandler<HTMLButtonElement> = (
+		ev,
+	): void => {
+		ev.stopPropagation();
+		closeModal();
+		openModal(SHARE_MODAL_ID);
+	};
+
+	return (
+		<UiModal
+			modalId={SAVE_SHARE_MODAL}
+			wrClassName={styles.modalWr}
+			className={styles.wr}
+			closeByBgClick={false}
+			disableClose
+		>
+			<div className={styles.container}>
+				<h2 className={styles.title}>
+					{t("sharing.saveSharing.title")}
+				</h2>
+				<UiButton
+					variant="quaternary"
+					onClick={closeModal}
+					className={styles.btn}
+				>
+					{t("sharing.saveSharing.notSaveBtn")}
+				</UiButton>
+				<UiButton
+					variant="primary"
+					onClick={() => onSave().finally(() => closeModal())}
+					className={styles.btn}
+				>
+					{t("sharing.saveSharing.saveBtn")}
+				</UiButton>
+			</div>
+			<UiButton
+				variant="ghost"
+				onClick={onBackBtnClick}
+				className={styles.backBtn}
+			>
+				<Icon iconName={"ArrowLeft1"} />
+				{t("sharing.saveSharing.backBtn")}
+			</UiButton>
+		</UiModal>
+	);
+}