microboard-ui-temp 0.0.3

package/src/shared/lib/debounce.ts

@@ -0,0 +1,9 @@
+export function debounce(func: (...args: any[]) => void, wait: number) {
+	let timeout: NodeJS.Timeout | null;
+	return function (...args: any[]) {
+		if (timeout) {
+			clearTimeout(timeout);
+		}
+		timeout = setTimeout(() => func(...args), wait);
+	};
+}

package/src/shared/lib/getCorrectEnding.ts

@@ -0,0 +1,19 @@
+export const getCorrectEnding = (number: number): "one" | "few" | "many" => {
+	const cases = [
+		"many", // 0, 5-9, 11-14
+		"one", // 1
+		"few", // 2-4
+	] as const;
+
+	const n = number % 100;
+	const index =
+		n > 4 && n < 20
+			? 0
+			: n % 10 === 1
+				? 1
+				: n % 10 >= 2 && n % 10 <= 4
+					? 2
+					: 0;
+
+	return cases[index];
+};

package/src/shared/lib/getEmailPrefix.ts

@@ -0,0 +1,13 @@
+import { conf } from "microboard-temp";
+const { i18n } = conf;
+
+export function getEmailPrefix(
+	email: string | null,
+	placeholder = i18n.t("common.anonymous"),
+): string {
+	const atIndex = email?.indexOf("@");
+	if (email === null || atIndex === -1) {
+		return placeholder;
+	}
+	return email.substring(0, atIndex);
+}

package/src/shared/lib/handleClickDetection.ts

@@ -0,0 +1,25 @@
+import type { MouseEvent, MouseEventHandler } from "react";
+
+export function handleClickDetection(
+	singleClickCb: (ev: MouseEvent) => void,
+	doubleClickCb: (ev: MouseEvent) => void,
+	threshold = 300,
+): MouseEventHandler {
+	let clickTimeout: NodeJS.Timeout | null = null;
+
+	return ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		if (clickTimeout) {
+			clearTimeout(clickTimeout);
+			clickTimeout = null;
+			doubleClickCb(ev);
+		} else {
+			clickTimeout = setTimeout(() => {
+				singleClickCb(ev);
+				clickTimeout = null;
+			}, threshold);
+		}
+	};
+}

package/src/shared/lib/isIframe.ts

@@ -0,0 +1,3 @@
+export const isIframe = (): boolean => {
+	return window.self !== window.top;
+};

package/src/shared/lib/isMicroboardIframe.ts

@@ -0,0 +1,3 @@
+import { isIframe } from "./isIframe";
+
+export const isMicroboardIframe = () => isIframe();

package/src/shared/lib/queryStringParser.ts

@@ -0,0 +1,18 @@
+/** Default value is returned if did not find such param */
+function getBooleanParam(searchParam: string, defaultValue: boolean): boolean {
+	const param = new URLSearchParams(window.location.search).get(searchParam);
+	if (!param) {
+		return defaultValue;
+	}
+	return param === "true" ? true : false;
+}
+
+type PanelType = "titlePanel" | "userPanel";
+/** Tries to find panel in search param, returns default value if not found */
+export function shouldShow(panel: PanelType): boolean {
+	return getBooleanParam(panel, true);
+}
+
+export function isTemplateView(): boolean {
+	return getBooleanParam("isTemplateView", false);
+}

package/src/shared/lib/regex.ts

@@ -0,0 +1,4 @@
+export const isEmail = (email: string): boolean => {
+	const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+	return emailRegex.test(email);
+};

package/src/shared/lib/strictContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext, type Context } from "react";
+
+export function createStrictContext<T>() {
+	return createContext<T | null>(null);
+}
+
+export function useStrictContext<T>(ctx: Context<T | null>) {
+	const value = useContext(ctx);
+	if (!value) {
+		throw new Error("Strict context is null");
+	}
+
+	return value as T;
+}

package/src/shared/lib/throttle.ts

@@ -0,0 +1,59 @@
+export function throttle<T extends (...args: any[]) => unknown>(
+	func: T,
+	delay: number,
+): (...args: Parameters<T>) => void {
+	let lastCall = 0;
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+	return function (...args: Parameters<T>) {
+		const now = Date.now();
+
+		if (lastCall + delay <= now) {
+			lastCall = now;
+			func(...args);
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+				timeoutId = null;
+			}
+		} else if (!timeoutId) {
+			timeoutId = setTimeout(
+				() => {
+					lastCall = Date.now();
+					timeoutId = null;
+					func(...args);
+				},
+				delay - (now - lastCall),
+			);
+		}
+	};
+}
+
+export function throttleWithDebounce<
+	T extends (...args: Parameters<T>) => void,
+>(fn: T, throttleDelay: number, debounceDelay: number): T {
+	let lastThrottleTime = 0;
+	let debounceTimeout: NodeJS.Timeout | number | null = null;
+	let lastArgs: Parameters<T> | null = null;
+
+	return function (...args: Parameters<T>) {
+		const now = Date.now();
+		const timeSinceLastThrottle = now - lastThrottleTime;
+
+		if (timeSinceLastThrottle >= throttleDelay) {
+			fn(...args);
+			lastThrottleTime = now;
+		} else {
+			lastArgs = args;
+		}
+
+		if (debounceTimeout) {
+			clearTimeout(debounceTimeout);
+		}
+		debounceTimeout = setTimeout(() => {
+			if (lastArgs) {
+				fn(...(lastArgs as Parameters<T>));
+				lastArgs = null;
+			}
+		}, debounceDelay);
+	} as T;
+}

package/src/shared/lib/useClickOutside.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef, RefObject } from "react";
+
+type ClickOutsideCb = () => void;
+
+export const useClickOutside = <T extends HTMLElement = HTMLDivElement>(
+	callback: ClickOutsideCb,
+	refs: (RefObject<HTMLElement> | undefined)[] = [],
+	considerCanvasAsOutside = false,
+	disable?: boolean,
+): RefObject<T> => {
+	const ref = useRef<T>(null);
+
+	const handleClickOutside = (event: MouseEvent): void => {
+		const isOutside =
+			ref.current &&
+			!ref.current.contains(event.target as Node) &&
+			refs.every(ref => {
+				if (!ref?.current) {
+					return true;
+				}
+				return (
+					ref.current && !ref.current.contains(event.target as Node)
+				);
+			});
+
+		if (
+			isOutside ||
+			(considerCanvasAsOutside &&
+				event.target instanceof HTMLCanvasElement &&
+				event.target.className === "NoContextMenu")
+		) {
+			callback();
+		}
+	};
+
+	useEffect(() => {
+		if (disable) {
+			return;
+		}
+		document.body.addEventListener("click", handleClickOutside);
+		return () => {
+			if (disable) {
+				return;
+			}
+			document.body.removeEventListener("click", handleClickOutside);
+		};
+	}, [callback]);
+
+	return ref;
+};

package/src/shared/lib/useClientRect.ts

@@ -0,0 +1,34 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+
+export function useBoundingClientRect<T extends HTMLElement>() {
+	const elementRef = useRef<T>(null);
+	const [rect, setRect] = useState<DOMRect | null>(null);
+
+	const updateRect = useCallback(() => {
+		if (elementRef.current) {
+			setRect(elementRef.current.getBoundingClientRect());
+		}
+	}, []);
+
+	useLayoutEffect(() => {
+		updateRect();
+
+		const observer = new MutationObserver(() => updateRect());
+		if (elementRef.current) {
+			observer.observe(elementRef.current, {
+				attributes: true,
+				childList: true,
+				subtree: true,
+			});
+		}
+
+		window.addEventListener("resize", updateRect);
+
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", updateRect);
+		};
+	}, [elementRef.current]);
+
+	return { elementRef, rect };
+}

package/src/shared/lib/useDebounce.ts

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from "react";
+
+export const useDebounce = (
+	callback: (...args: any[]) => unknown,
+	delay = 250,
+): ((...args: Parameters<(...args: unknown[]) => unknown>) => void) => {
+	const timer = useRef<ReturnType<typeof setTimeout>>();
+
+	const debouncedCallback = useCallback(
+		(...args: Parameters<typeof callback>) => {
+			if (timer.current) {
+				clearTimeout(timer.current);
+			}
+			timer.current = setTimeout(() => {
+				callback(...args);
+			}, delay);
+		},
+		[callback, delay],
+	);
+
+	return debouncedCallback;
+};

package/src/shared/lib/useForceUpdate.ts

@@ -0,0 +1,7 @@
+import { useReducer } from "react";
+
+export function useForceUpdate() {
+	const [, forceUpdate] = useReducer(c => c + 1, 0);
+
+	return forceUpdate;
+}

package/src/shared/lib/useHoverState.ts

@@ -0,0 +1,14 @@
+import { useState, type PointerEventHandler } from "react";
+
+export function useHoverState() {
+	const [isHover, setIsHover] = useState(false);
+
+	const handlePointerEnter: PointerEventHandler = () => setIsHover(true);
+	const handlePointerLeave: PointerEventHandler = () => setIsHover(false);
+
+	return {
+		isHover,
+		handlePointerEnter,
+		handlePointerLeave,
+	};
+}

package/src/shared/lib/useIsPhoneScreen.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useIsPhoneScreen(): boolean {
+	const isPhoneScreenCheck = (): boolean =>
+		matchMedia("screen and (max-width: 640px)").matches;
+
+	const [isPhoneScreen, setIsPhoneScreen] = useState(isPhoneScreenCheck);
+
+	useEffect(() => {
+		const setScreen = (): void => {
+			setIsPhoneScreen(isPhoneScreenCheck());
+		};
+
+		window.addEventListener("resize", setScreen);
+		return () => {
+			window.removeEventListener("resize", setScreen);
+		};
+	}, []);
+
+	return isPhoneScreen;
+}

package/src/shared/lib/useMediaQuery.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string) {
+	const getIsMediaMatches = () => matchMedia(query).matches;
+
+	const [isMediaMatches, setIsMediaMatches] = useState(getIsMediaMatches);
+
+	useEffect(() => {
+		const handleWindowSizeChange = () =>
+			setIsMediaMatches(getIsMediaMatches());
+
+		window.addEventListener("resize", handleWindowSizeChange);
+
+		return () =>
+			window.removeEventListener("resize", handleWindowSizeChange);
+	}, []);
+
+	return isMediaMatches;
+}

package/src/shared/lib/withRouter.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+
+export interface WithRouterProps {
+	router: {
+		location: ReturnType<typeof useLocation>;
+		navigate: ReturnType<typeof useNavigate>;
+		params: ReturnType<typeof useParams>;
+	};
+}
+
+export function withRouter(Component) {
+	function ComponentWithRouterProp(props) {
+		const location = useLocation();
+		const navigate = useNavigate();
+		const params = useParams();
+		return <Component {...props} router={{ location, navigate, params }} />;
+	}
+
+	return ComponentWithRouterProp;
+}

package/src/shared/sha256.ts

@@ -0,0 +1,22 @@
+export async function sha256(message): Promise<string> {
+	// encode as UTF-8
+	const msgBuffer = new TextEncoder().encode(message);
+	// hash the message
+	const hashBuffer = await crypto.subtle.digest("SHA-256", msgBuffer);
+	// convert ArrayBuffer to Array
+	const hashArray = Array.from(new Uint8Array(hashBuffer));
+	// convert bytes to hex string
+	const hashHex = hashArray
+		.map(byte => byte.toString(16).padStart(2, "0"))
+		.join("");
+	return hashHex;
+}
+
+export async function fileTosha256(file: File): Promise<string> {
+	const buffer = await file.arrayBuffer();
+
+	const hashBuffer = await crypto.subtle.digest("SHA-256", buffer);
+
+	const hashArray = Array.from(new Uint8Array(hashBuffer));
+	return hashArray.map(byte => byte.toString(16).padStart(2, "0")).join("");
+}

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

@@ -0,0 +1,179 @@
+.button {
+	font-family: "Manrope", "Arial";
+	font-size: 14px;
+	font-weight: 500;
+	width: 100%;
+	height: 40px;
+
+	border-radius: 12px;
+
+	cursor: pointer;
+	outline-color: transparent;
+	box-sizing: border-box;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	gap: 8px;
+}
+
+.button:disabled {
+	color: rgba(10, 15, 41, 0.25);
+}
+
+.button:disabled:hover {
+	cursor: not-allowed;
+}
+
+/* PRIMARY */
+
+.primary {
+	border: 1px solid #14151a;
+	background-color: #14151a;
+	color: white;
+
+	box-shadow: 0 1px 2px rgba(20, 21, 26, 0.05);
+}
+
+.primary:hover:not(:disabled) {
+	background-color: #1f2228;
+}
+
+.primary:active:not(:disabled) {
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.primary:disabled {
+	border-color: #e9eaec;
+	background-color: #e9eaec;
+}
+
+.primary:disabled:hover {
+	border-color: #e9eaec;
+	background-color: #e9eaec;
+	color: rgba(10, 15, 41, 0.25);
+}
+
+.primary.loading {
+	border-color: #14151a;
+	background-color: #14151a;
+	color: white;
+}
+
+/* SECONDARY */
+
+.secondary {
+	color: #14151a;
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.secondary:hover:not(:disabled) {
+	color: #14151a;
+	background-color: rgba(10, 15, 41, 0.08);
+}
+
+.secondary:active:not(:disabled),
+.tertiary:active:not(:disabled) {
+	border: 1px solid #b78af0;
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+/* TERTIARY */
+
+.tertiary {
+	color: #14151a;
+	background-color: #ffffff;
+	border: 1px solid #dee0e3;
+}
+
+.tertiary:hover:not(:disabled) {
+	background-color: #f7f7f8;
+}
+
+/* QUATERNARY */
+
+.quaternary {
+	color: #ffffff;
+	background-color: rgba(146, 79, 232, 1);
+	border: 1px solid rgba(146, 79, 232, 1);
+}
+
+.quaternary:hover {
+	background-color: rgb(183, 153, 245);
+	border: 1px solid rgba(146, 79, 232, 1);
+}
+
+.quaternary {
+	background-color: #924fe8;
+	border: 1px solid transparent;
+	color: #ffffff;
+}
+
+.quaternary:active {
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.quaternary:hover {
+	background-color: #1f2228;
+	color: #ffffff;
+}
+
+/* GHOST */
+
+.ghost {
+	background-color: transparent;
+	color: rgba(15, 19, 36, 0.6);
+
+	font-weight: 600;
+}
+
+.ghost:hover {
+	color: rgba(10, 15, 41, 0.6);
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.ghost:active {
+	border: 1px solid #b78af0;
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.ghost:disabled {
+	color: rgba(10, 15, 41, 0.25);
+}
+
+/* GHOST FILLED */
+
+.ghostFilled {
+	font-weight: 600;
+	color: rgba(10, 15, 41, 0.6);
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.ghostFilled:active {
+	border: 1px solid #b78af0;
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.ghostFilled:disabled {
+	color: rgba(10, 15, 41, 0.25);
+}
+
+.loader {
+	width: 20px;
+	height: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

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

@@ -0,0 +1,43 @@
+import React from "react";
+import styles from "./Button.module.css";
+import clsx from "clsx";
+import { Loader } from "./Loader";
+
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	pattern?:
+		| "primary"
+		| "secondary"
+		| "tertiary"
+		| "ghost"
+		| "quaternary"
+		| "ghostFilled";
+	loading?: boolean;
+}
+
+export const Button: React.FC<Props> = ({
+	pattern = "primary",
+	children,
+	className,
+	loading,
+	...props
+}) => {
+	return (
+		<button
+			className={clsx(
+				styles.button,
+				styles[pattern],
+				className,
+				loading && styles.loading, // Use loading here
+			)}
+			disabled={loading || props.disabled}
+			{...props}
+		>
+			{loading && (
+				<div className={styles.loader}>
+					<Loader />
+				</div>
+			)}
+			{children}
+		</button>
+	);
+};

package/src/shared/ui-lib/Button/Loader.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export const Loader: React.FC<{ color?: string }> = ({
+	color = "currentColor",
+}) => {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M13.3033 2.69674L12.125 3.87508C11.1708 2.92074 9.91514 2.3268 8.57208 2.19444C7.22902 2.06209 5.88162 2.39952 4.75945 3.14923C3.63728 3.89895 2.80978 5.01457 2.41795 6.306C2.02612 7.59743 2.09419 8.98477 2.61057 10.2316C3.12695 11.4785 4.05969 12.5078 5.24986 13.144C6.44003 13.7803 7.81399 13.9842 9.13765 13.721C10.4613 13.4578 11.6527 12.7438 12.509 11.7006C13.3652 10.6574 13.8332 9.34964 13.8333 8.00008H15.5C15.5 9.73524 14.8983 11.4167 13.7975 12.758C12.6968 14.0993 11.1649 15.0174 9.46312 15.3559C7.76129 15.6944 5.99475 15.4324 4.46448 14.6144C2.9342 13.7964 1.73489 12.4732 1.07088 10.8701C0.406878 9.267 0.319262 7.48327 0.822965 5.82283C1.32667 4.16238 2.39053 2.72796 3.83327 1.76396C5.27601 0.799966 7.00837 0.366044 8.73518 0.536131C10.462 0.706218 12.0764 1.46979 13.3033 2.69674V2.69674Z"
+				fill={color}
+			/>
+		</svg>
+	);
+};

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

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

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

@@ -0,0 +1,44 @@
+.label {
+	cursor: pointer;
+	display: grid;
+	grid-template-columns: auto auto;
+	gap: 8px;
+}
+
+.checkbox {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 17px;
+	height: 16px;
+	border-radius: 4px;
+	margin: 2px 0 0;
+	border: 1px solid #c8cad0;
+	outline-offset: 1px;
+	box-shadow: 0 0 2px #14151a0d;
+	transition: all 0.35s ease-out;
+	outline-color: #ded1ff;
+	outline-width: 1.5px;
+	cursor: pointer;
+}
+
+.checkbox.checked {
+	background-color: #14151a;
+	border: 1px solid #14151a;
+	position: relative;
+}
+
+.checkbox.checked::before {
+	content: "";
+	background: url('data:image/svg+xml;utf8,<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 3.28571L3.91667 7L9 1" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>')
+		no-repeat;
+	top: 3px;
+	right: 3px;
+	width: 9px;
+	height: 8px;
+	position: absolute;
+}
+
+.checkbox:focus,
+.checkbox:hover {
+	outline: 1.5px solid #ded1ff;
+}