microboard-ui-temp 0.0.3

package/src/shared/ui-lib/UiModal/UiModalBackground.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, type PropsWithChildren } from "react";
+import { createPortal } from "react-dom";
+import { OpacityTransition } from "../Transitions";
+import styles from "./UiModal.module.css";
+import { useUiModalContext } from "./UiModalContext";
+import clsx from "clsx";
+import { LOADING_NOTIFICATION } from "features/ImportMiro/ImportMiroBoards/Notifications/LoadingNotification";
+import { SUCCESS_NOTIFICATION } from "features/ImportMiro/ImportMiroBoards/Notifications/SuccessNotification";
+import { ERROR_NOTIFICATION } from "features/ImportMiro/ImportMiroBoards/Notifications/ErrorNotification";
+import { WARN_CLIPBOARD_NOTIFICATION } from "features/ImportMiro/ImportMiroBoards/Notifications/WarnClipboardNotification";
+import { WARN_NOTIFICATION } from "features/ImportMiro/ImportMiroBoards/Notifications/WarnNotification";
+
+const modalsContainer = document.getElementById("modal")!;
+
+export function UiModalBackground({
+	children,
+}: PropsWithChildren<{}>): JSX.Element {
+	const { openedModalId, closeModal, isRenderedAsPage } = useUiModalContext();
+
+	useEffect(() => {
+		const controller = new AbortController();
+		window.addEventListener(
+			"keydown",
+			ev => {
+				if (ev.key === "Escape" && openedModalId) {
+					closeModal();
+				}
+			},
+			{ signal: controller.signal },
+		);
+
+		return () => controller.abort();
+	});
+
+	const isBlackout =
+		openedModalId !== LOADING_NOTIFICATION &&
+		openedModalId !== SUCCESS_NOTIFICATION &&
+		openedModalId !== ERROR_NOTIFICATION &&
+		openedModalId !== WARN_CLIPBOARD_NOTIFICATION &&
+		openedModalId !== WARN_NOTIFICATION;
+
+	const renderAsPage = isRenderedAsPage(openedModalId);
+
+	return createPortal(
+		<OpacityTransition
+			timeout={500}
+			inProp={Boolean(openedModalId)}
+			unmountOnExit
+		>
+			<div
+				className={clsx({
+					[styles.blackout]: isBlackout,
+					[styles.page]: renderAsPage,
+				})}
+			>
+				{children}
+			</div>
+		</OpacityTransition>,
+
+		modalsContainer,
+	);
+}

package/src/shared/ui-lib/UiModal/UiModalContext.tsx

@@ -0,0 +1,90 @@
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { useLayoutEffect } from "react";
+import { Subject } from "shared/Subject";
+import { conf } from "microboard-temp";
+
+export type ModalId = string | symbol | null;
+
+class UiModalState {
+	openedModalId: ModalId = null;
+	isTransition = false;
+	transitionFrom: ModalId = null;
+	transitionTo: ModalId = null;
+	data: unknown | null;
+	subject = new Subject<void>();
+	private renderAsPageIds: ModalId[] = [];
+
+	setModalData = (data: unknown): void => {
+		this.data = data;
+		this.subject.publish();
+	};
+
+	isModalOpen = (modalId: ModalId): boolean => {
+		return this.openedModalId === modalId;
+	};
+
+	openModal = (modalId: ModalId): void => {
+		if (this.openedModalId && modalId) {
+			this.isTransition = true;
+			this.transitionFrom = this.openedModalId;
+			this.transitionTo = modalId;
+		}
+		this.openedModalId = modalId;
+		this.subject.publish();
+	};
+
+	addRenderAsPage = (id: ModalId) => {
+		this.renderAsPageIds = [...this.renderAsPageIds, id];
+		this.subject.publish();
+	};
+
+	removeRenderAsPage = (id: ModalId) => {
+		this.renderAsPageIds = this.renderAsPageIds.filter(item => item !== id);
+		this.subject.publish();
+	};
+
+	isRenderedAsPage = (id: ModalId) => {
+		return this.renderAsPageIds.includes(id);
+	};
+
+	closeModal = (): void => {
+		this.openedModalId = null;
+		this.isTransition = false;
+		this.transitionFrom = null;
+		this.transitionTo = null;
+		this.subject.publish();
+	};
+}
+
+export const UiModalStateInstance = new UiModalState();
+
+export const openModal = (modalId: ModalId): void => {
+	UiModalStateInstance.openModal(modalId);
+};
+
+conf.openModal = openModal;
+
+export const closeModal = (): void => {
+	UiModalStateInstance.closeModal();
+};
+
+export const isModalOpen = (modalId: ModalId): boolean => {
+	return UiModalStateInstance.isModalOpen(modalId);
+};
+
+export const setModalData = (data: unknown): void => {
+	UiModalStateInstance.setModalData(data);
+};
+
+export const useUiModalContext = (): UiModalState => {
+	const forceUpdate = useForceUpdate();
+	useLayoutEffect(() => {
+		UiModalStateInstance.subject.subscribe(forceUpdate);
+
+		return () => {
+			UiModalStateInstance.subject.unsubscribe(forceUpdate);
+		};
+	}, [forceUpdate]);
+
+	return UiModalStateInstance;
+};

package/src/shared/ui-lib/UiModal/index.ts

@@ -0,0 +1,2 @@
+export { useUiModalContext } from "./UiModalContext";
+export { UiModalBackground } from "./UiModalBackground";

package/src/shared/ui-lib/UiPanel/UiPanel.module.css

@@ -0,0 +1,52 @@
+.panel {
+	user-select: none;
+	display: flex;
+	align-items: center;
+	border: 1px solid var(--border-action-normal);
+	box-shadow:
+		0px 10px 10px -3px rgba(20, 21, 26, 0.08),
+		0px 3px 6px -2px rgba(20, 21, 26, 0.05);
+	background-color: var(--background-surface-default);
+	z-index: 1;
+	touch-action: pan-y pan-x;
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+}
+
+.top {
+	border-top-left-radius: 12px;
+	border-top-right-radius: 12px;
+}
+
+.top-right-bottom {
+	border-top-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	border-bottom-right-radius: 12px;
+}
+
+.bottom-right-top {
+	border-top-left-radius: 12px;
+	border-top-right-radius: 12px;
+	border-bottom-right-radius: 12px;
+}
+
+.bottom {
+	border-bottom-left-radius: 12px;
+	border-bottom-right-radius: 12px;
+}
+
+.full {
+	border-radius: 12px;
+}
+
+.panel.padding {
+	padding: 12px;
+}
+
+.grid {
+	display: grid;
+}
+
+.vertical {
+	flex-direction: column;
+}

package/src/shared/ui-lib/UiPanel/UiPanel.tsx

@@ -0,0 +1,70 @@
+import clsx from "clsx";
+import React, { forwardRef, ReactNode, type HTMLAttributes } from "react";
+import style from "./UiPanel.module.css";
+
+type UiPanelProps = HTMLAttributes<HTMLDivElement> & {
+	vertical?: boolean;
+	grid?: boolean;
+	rows?: number;
+	columns?: number;
+	zIndex?: number;
+	padding?: number;
+	gap?: number;
+	rounded?: "top" | "bottom" | "full" | "topRightBottom" | "bottomRightTop";
+	children: ReactNode;
+	className?: string;
+	style?: unknown;
+};
+
+export const UiPanel = forwardRef<HTMLDivElement, UiPanelProps>(
+	(
+		{
+			zIndex = 1,
+			children,
+			className,
+			grid = false,
+			rows,
+			columns,
+			padding = 12,
+			vertical = false,
+			style: inlineStyle,
+			gap,
+			rounded = "full",
+			...props
+		},
+		ref,
+	) => {
+		return (
+			<div
+				ref={ref}
+				className={clsx([
+					style.panel,
+					grid && style.grid,
+					vertical && style.vertical,
+					className,
+					style[rounded],
+				])}
+				style={
+					grid
+						? {
+								gridTemplateColumns: columns
+									? `repeat(${columns}, 1fr)`
+									: undefined,
+								gridTemplateRows: rows
+									? `repeat(${rows}, 1fr)`
+									: undefined,
+								zIndex,
+								padding,
+								gap,
+								...inlineStyle,
+							}
+						: { zIndex, padding, gap, ...inlineStyle }
+				}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	},
+);
+UiPanel.displayName = "UiPanel";

package/src/shared/ui-lib/UiPanel/index.ts

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

package/src/shared/ui-lib/UiSelector/UiSelector.module.css

@@ -0,0 +1,143 @@
+.selectedOption {
+	display: flex;
+	align-items: center;
+	padding: 10px 12px;
+	gap: 8px;
+	font-size: 14px;
+	position: relative;
+	padding-right: 36px;
+	cursor: pointer;
+	height: 100%;
+}
+
+.disabled .selectedOption {
+	cursor: not-allowed;
+}
+
+.selectorWrapper {
+	position: relative;
+	z-index: 500;
+	border-radius: 12px;
+	border: 1px solid #dee0e3;
+	overflow: hidden;
+	min-height: 40px;
+}
+
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mark {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	right: 12px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: transform 0.2s ease;
+}
+
+.open .mark {
+	transform: translateY(-50%) rotate(-180deg);
+}
+
+.optionsListWrapper {
+	box-shadow:
+		0px 10px 16px -3px rgba(20, 21, 26, 0.08),
+		0px 3px 6px -2px rgba(20, 21, 26, 0.05);
+	position: absolute;
+	width: 100%;
+	background-color: #fff;
+	border-radius: 12px;
+	border: 1px solid #dee0e3;
+	padding: 6px;
+	overflow: hidden;
+	z-index: 1000;
+}
+
+.optionsList {
+	display: flex;
+	flex-direction: column;
+	list-style: none;
+	gap: 2px;
+}
+
+.optionWrapper {
+	display: flex;
+	justify-content: stretch;
+	align-items: center;
+	padding: 0;
+	margin: 0;
+}
+
+.optionBtn {
+	display: flex;
+	align-items: center;
+	flex: 1 0;
+	padding: 6px;
+	cursor: pointer;
+	transition: background 0.3s ease;
+	gap: 8px;
+	border-radius: 6px;
+	position: relative;
+}
+
+@media screen and (hover: hover) {
+	.optionBtn:hover {
+		background-color: rgba(10, 15, 41, 0.04);
+	}
+}
+
+.optionBtn.selected {
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.optionIcon {
+	position: static;
+	left: auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.optionText {
+	position: static;
+	left: auto;
+	font-size: 14px;
+	font-weight: 400;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.disabled .selectedOptionText {
+	color: rgba(10, 15, 41, 0.25);
+}
+
+.checkMark {
+	color: rgba(105, 107, 118, 1);
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: auto;
+	right: 6px;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+}
+
+.selected .checkMark {
+	opacity: 1;
+}
+
+.skeleton {
+	min-height: 40px;
+}

package/src/shared/ui-lib/UiSelector/UiSelector.tsx

@@ -0,0 +1,202 @@
+import clsx, { type ClassValue } from "clsx";
+import React, { useState, type MouseEventHandler, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useClickOutside } from "shared/lib/useClickOutside";
+import { Icon } from "shared/ui-lib/Icon";
+import { Tooltip } from "../Tooltip";
+import { TopFade } from "../Transitions/TopFade";
+import { UiSkeleton } from "../UiSkeleton";
+import styles from "./UiSelector.module.css";
+
+export type Option = {
+	label: string;
+	value: string | number;
+	icon?: ReactNode;
+};
+
+type Props = {
+	value: string | number;
+	options: Option[];
+	icon?: ReactNode;
+	iconColor?: string;
+	onChange?: (value: string | number) => void;
+	disabled?: boolean;
+	isLoading?: boolean;
+	className?: ClassValue;
+	disabledTooltip?: string;
+};
+
+export function UiSelector({
+	options,
+	icon,
+	iconColor,
+	onChange,
+	disabled,
+	isLoading,
+	className,
+	value,
+	disabledTooltip,
+}: Props): JSX.Element {
+	const selectedOption = options.find(opt => opt.value === value);
+	const [isOpen, setIsOpen] = useState(false);
+	const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+	const ref = useClickOutside(() => setIsOpen(false));
+
+	const [showTooltip, setShowTooltip] = useState(false);
+	const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+
+	const handleSelectedOptionClick: MouseEventHandler = () => {
+		if (disabled || isLoading) {
+			return;
+		}
+		setIsOpen(prev => !prev);
+		if (!isOpen) {
+			const rect = ref.current?.getBoundingClientRect();
+			if (rect) {
+				setPosition({
+					top: rect.bottom + 8,
+					left: rect.left,
+					width: rect.width,
+				});
+			}
+		}
+	};
+
+	const handleOptionClick =
+		(option: Option): MouseEventHandler =>
+		ev => {
+			ev.stopPropagation();
+			ev.preventDefault();
+			if (disabled) {
+				return;
+			}
+			setIsOpen(false);
+			onChange?.(option.value);
+		};
+
+	// Handle mouse events for tooltip
+	const handleMouseMove = (e: React.MouseEvent) => {
+		if (disabled && disabledTooltip) {
+			setTooltipPosition({ x: e.clientX + 10, y: e.clientY + 10 });
+		}
+	};
+
+	const handleMouseEnter = () => {
+		if (disabled && disabledTooltip) {
+			setShowTooltip(true);
+		}
+	};
+
+	const handleMouseLeave = () => {
+		setShowTooltip(false);
+	};
+
+	return (
+		<div
+			ref={ref}
+			className={clsx(
+				styles.selectorWrapper,
+				isOpen && styles.open,
+				(disabled || isLoading) && styles.disabled,
+				className,
+			)}
+			onMouseMove={handleMouseMove}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
+		>
+			{isLoading ? (
+				<UiSkeleton className={styles.skeleton} />
+			) : (
+				<div
+					className={styles.selectedOption}
+					onClick={handleSelectedOptionClick}
+				>
+					{selectedOption?.icon && (
+						<div
+							className={styles.icon}
+							style={{ color: iconColor }}
+						>
+							{selectedOption.icon}
+						</div>
+					)}
+					{icon && !selectedOption?.icon && (
+						<div
+							className={styles.icon}
+							style={{ color: iconColor }}
+						>
+							{icon}
+						</div>
+					)}
+					<p className={styles.selectedOptionText}>
+						{selectedOption?.label}
+					</p>
+					<div className={styles.mark}>
+						<Icon width={20} height={20} iconName="mark" />
+					</div>
+				</div>
+			)}
+			{createPortal(
+				<TopFade
+					inProp={isOpen && !disabled && !isLoading}
+					unmountOnExit
+				>
+					<div className={styles.optionsListWrapper} style={position}>
+						<ul className={styles.optionsList}>
+							{options.map(opt => (
+								<li
+									className={styles.optionWrapper}
+									key={opt.value}
+								>
+									<button
+										onClick={handleOptionClick(opt)}
+										className={clsx(
+											styles.optionBtn,
+											opt.value ===
+												selectedOption?.value &&
+												styles.selected,
+										)}
+									>
+										<span
+											style={{ color: iconColor }}
+											className={styles.optionIcon}
+										>
+											{opt.icon}
+										</span>
+										<span className={styles.optionText}>
+											{opt.label}
+										</span>
+										<span className={styles.checkMark}>
+											<Icon
+												width={20}
+												height={20}
+												iconName="checkMark"
+											/>
+										</span>
+									</button>
+								</li>
+							))}
+						</ul>
+					</div>
+				</TopFade>,
+				document.getElementById("selector")!,
+			)}
+
+			{showTooltip &&
+				disabledTooltip &&
+				createPortal(
+					<Tooltip
+						variant="withoutArrow"
+						tooltip={disabledTooltip}
+						inlineStyle={{
+							position: "fixed",
+							top: `${tooltipPosition.y}px`,
+							left: `${tooltipPosition.x}px`,
+							zIndex: 10000,
+							pointerEvents: "none",
+						}}
+					/>,
+					document.body,
+				)}
+		</div>
+	);
+}

package/src/shared/ui-lib/UiSelector/index.ts

@@ -0,0 +1,2 @@
+export { UiSelector } from "./UiSelector";
+export type { Option } from "./UiSelector";

package/src/shared/ui-lib/UiSeparator/UiSeparator.module.css

@@ -0,0 +1,18 @@
+.container {
+	align-self: stretch;
+}
+.separator {
+	background-color: var(--border-action-normal);
+	align-self: center;
+	content: "";
+}
+
+.separator.vertical {
+	width: 0.1rem;
+	height: 100%;
+}
+
+.separator.horizontal {
+	height: 0.1rem;
+	width: 100%;
+}

package/src/shared/ui-lib/UiSeparator/UiSeparator.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import React from "react";
+import style from "./UiSeparator.module.css";
+
+type Props = {
+	vertical?: boolean;
+	className?: string;
+	color?: string;
+};
+
+export function UiSeparator({
+	vertical = false,
+	className,
+	color,
+}: Props): JSX.Element {
+	return (
+		<div
+			className={clsx(
+				style.container,
+				vertical ? style.vertical : style.horizontal,
+				className,
+			)}
+		>
+			<div
+				style={{ color }}
+				className={clsx([
+					style.separator,
+					vertical ? style.vertical : style.horizontal,
+				])}
+			/>
+		</div>
+	);
+}

package/src/shared/ui-lib/UiSeparator/index.ts

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