microboard-ui-temp 0.0.3

package/src/shared/ui-lib/UiButton/Tooltip.tsx

@@ -0,0 +1,98 @@
+import React, { CSSProperties, forwardRef } from "react";
+import style from "./UiButton.module.css";
+import clsx from "clsx";
+
+interface TooltipProps {
+	tooltip: string;
+	hotkey?: string;
+	tooltipPosition?:
+		| "right"
+		| "top"
+		| "top-left"
+		| "top-right"
+		| "top-center-fixed"
+		| "top-right-fixed"
+		| "bottom"
+		| "bottom-right"
+		| "bottom-left"
+		| "bottom-left-noWhitespace";
+	variant?: "primary" | "secondary";
+	tooltipAlign?: "center" | "left";
+	inlineStyle?: CSSProperties;
+	borderRadius?: "radiusMd";
+	padding?: "paddingMd";
+	className?: string;
+	width?: string | number;
+	allowTextWrap?: boolean;
+	[key: string]: unknown;
+}
+
+// eslint-disable-next-line react/display-name
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+	(
+		{
+			tooltip,
+			tooltipPosition = "right",
+			tooltipAlign = "center",
+			variant = "primary",
+			hotkey,
+			borderRadius,
+			padding,
+			inlineStyle,
+			className,
+			width,
+			allowTextWrap = false,
+			...props
+		},
+		ref,
+	): JSX.Element => {
+		return (
+			<div
+				ref={ref}
+				className={clsx(
+					style.tipContainer,
+					{
+						[style.right]: tooltipPosition === "right",
+						[style.top]: tooltipPosition === "top",
+						[style.topRight]: tooltipPosition === "top-right",
+						[style.topCenterFixed]:
+							tooltipPosition === "top-center-fixed",
+						[style.topRightFixed]:
+							tooltipPosition === "top-right-fixed",
+						[style.bottom]: tooltipPosition === "bottom",
+						[style.bottomRight]: tooltipPosition === "bottom-right",
+						[style.bottomLeft]: tooltipPosition === "bottom-left",
+						[style.bottomLeftNoWhitespace]:
+							tooltipPosition === "bottom-left-noWhitespace",
+					},
+					className,
+				)}
+				style={inlineStyle}
+				{...props}
+			>
+				<div
+					className={clsx(
+						style.tip,
+						{
+							[style.primaryTip]: variant === "primary",
+							[style.secondaryTip]: variant === "secondary",
+						},
+						borderRadius && style[borderRadius],
+						padding && style[padding],
+					)}
+					style={{ width: width || undefined }}
+				>
+					<span
+						className={clsx(style.tipText, {
+							[style.center]: tooltipAlign === "center",
+							[style.left]: tooltipAlign === "left",
+							[style.wrap]: allowTextWrap,
+						})}
+						dangerouslySetInnerHTML={{ __html: tooltip }}
+					/>
+					{hotkey && <span className={style.hotkey}>{hotkey}</span>}
+				</div>
+			</div>
+		);
+	},
+);

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

@@ -0,0 +1,306 @@
+.default {
+	--background-color: rgba(146, 79, 232, 1);
+	--background-hover-color: rgb(115, 29, 226);
+	--background-active-color: rgb(115, 29, 226);
+	--background-disabled-color: rgb(233, 234, 236);
+
+	--content-color: rgba(255, 255, 255, 1);
+	--content-hover-color: rgba(255, 255, 255, 1);
+	--content-active-color: rgba(255, 255, 255, 1);
+	--content-disabled-color: rgb(177, 179, 187);
+
+	--focus-outline-color: rgb(227, 217, 255);
+}
+
+.secondary {
+	--background-color: rgb(255, 255, 255);
+	--background-hover-color: rgb(247, 247, 248);
+	--background-active-color: rgb(247, 247, 248);
+	--background-disabled-color: rgb(255, 255, 255);
+
+	--content-color: rgb(20, 21, 26);
+	--content-hover-color: rgb(20, 21, 26);
+	--content-active-color: rgb(146, 79, 232);
+	--content-disabled-color: rgb(177, 179, 187);
+
+	--focus-outline-color: rgb(227, 217, 255);
+}
+
+.tertiary {
+	--background-color: rgb(245, 246, 247);
+	--background-hover-color: rgb(236, 236, 238);
+	--background-active-color: rgb(236, 236, 238);
+
+	--content-color: var(--text-base-primary);
+	--content-hover-color: var(--text-base-primary);
+	--content-active-color: var(--text-base-primary);
+	--content-disabled-color: var(--text-base-quaternary);
+
+	--focus-outline-color: rgb(227, 217, 255);
+}
+
+.black {
+	--background-color: rgb(20, 21, 26);
+	--background-hover-color: rgb(31, 34, 40);
+	--background-active-color: rgb(236, 236, 238);
+	--background-disabled-color: rgb(233, 234, 236);
+
+	--content-color: rgb(255, 255, 255);
+	--content-hover-color: var(--text-base-primary);
+	--content-active-color: var(--text-base-primary);
+	--content-disabled-color: var(--text-base-quaternary);
+
+	--focus-outline-color: rgb(227, 217, 255);
+}
+
+.radius-xl {
+	--radius: 12px;
+}
+
+.radius-md {
+	--radius: 8px;
+}
+
+.radius-sm {
+	--radius: 4px;
+}
+
+.xl {
+	--min-width: 48px;
+	--min-height: 48px;
+	--padding: 0 12px;
+}
+
+.lg {
+	--min-width: 40px;
+	--min-height: 40px;
+	--padding: 0;
+}
+
+.md {
+	--min-width: 32px;
+	--min-height: 32px;
+	--padding: 0 4px;
+}
+
+.sm {
+	--min-width: 32px;
+	--min-height: 32px;
+	--padding: 6px 14px;
+	font-size: 14px;
+}
+
+.fullRounded {
+	border-radius: var(--radius);
+}
+
+.topRounded {
+	border-top-left-radius: var(--radius);
+	border-top-right-radius: var(--radius);
+}
+
+.bottomRounded {
+	border-bottom-left-radius: var(--radius);
+	border-bottom-right-radius: var(--radius);
+}
+
+.leftRounded {
+	border-top-left-radius: var(--radius);
+	border-bottom-left-radius: var(--radius);
+}
+
+.rightRounded {
+	border-top-right-radius: var(--radius);
+	border-bottom-right-radius: var(--radius);
+}
+
+.button {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-width: var(--min-width);
+	min-height: var(--min-height);
+	padding: var(--padding);
+	border: none;
+	cursor: pointer;
+	transition:
+		background ease-in 0.2s,
+		color ease-in 0.2s;
+	outline: none;
+	background-color: var(--background-color);
+	color: var(--content-color);
+	gap: 8px;
+	font-family: "Manrope", "Arial";
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.button:focus-visible {
+	outline: 2px solid var(--focus-outline-color);
+	z-index: 20;
+}
+
+@media (hover: hover) {
+	.button:hover {
+		background-color: var(--background-hover-color);
+		color: var(--content-hover-color);
+	}
+}
+
+.button.active:not([disabled]),
+.button:active:not([disabled]) {
+	background-color: var(--background-active-color);
+	color: var(--content-active-color);
+}
+
+.disableBg {
+	background-color: transparent;
+}
+
+.button:disabled {
+	color: var(--content-disabled-color);
+	background-color: var(--background-disabled-color);
+	cursor: not-allowed;
+}
+
+.hotkey {
+	color: rgb(246, 246, 246);
+	flex: 1 0;
+	white-space: nowrap;
+	padding: 0 4px;
+	border-radius: 2px;
+	background-color: rgb(94, 99, 110);
+}
+
+/* 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;
+	color: white;
+}
+
+.primary:active:not(:disabled) {
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.primary:disabled {
+	border-color: #e9eaec;
+	background-color: #e9eaec;
+	color: #0a0f2940;
+}
+
+.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;
+}
+
+/* quaternary */
+
+.quaternary,
+.quaternary:disabled {
+	color: #14151a;
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.quaternary:disabled {
+	color: #0a0f2940;
+}
+
+.quaternary:hover:not(:disabled) {
+	color: #14151a;
+	background-color: rgba(10, 15, 41, 0.08);
+}
+
+.quaternary: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;
+}
+
+/* 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);
+	color: #0a0f2940;
+}
+
+/* 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/UiButton/UiButton.tsx

@@ -0,0 +1,119 @@
+import clsx from "clsx";
+import React, { CSSProperties, forwardRef, ReactNode } from "react";
+import style from "./UiButton.module.css";
+import { Tooltip } from "shared/ui-lib/Tooltip/Tooltip";
+import { Loader } from "./Loader";
+
+type CommonUiButtonProps = {
+	active?: boolean;
+	disabled?: boolean;
+	tooltip?: string;
+	hotkey?: string;
+	tooltipPosition?:
+		| "right"
+		| "top"
+		| "top-left"
+		| "top-right"
+		| "top-center-fixed"
+		| "top-right-fixed"
+		| "bottom"
+		| "bottom-right"
+		| "bottom-left"
+		| "bottom-left-noWhitespace";
+	variant?:
+		| "default"
+		| "secondary"
+		| "tertiary"
+		| "quaternary"
+		| "primary"
+		| "ghost"
+		| "ghostFilled";
+	size?: "xl" | "lg" | "md" | "sm";
+	rounded?:
+		| "top"
+		| "bottom"
+		| "left"
+		| "right"
+		| "full"
+		| "none"
+		| "bottom-left"
+		| "bottom-right";
+	tooltipVariant?: "primary" | "secondary";
+	radius?: "xl" | "md" | "sm";
+	className?: string;
+	toolTipStyle?: CSSProperties;
+	children: ReactNode;
+	loading?: boolean;
+	[key: string]: unknown;
+};
+
+export const UiButton = forwardRef<HTMLButtonElement, CommonUiButtonProps>(
+	(
+		{
+			children,
+			className,
+			active = false,
+			disabled = false,
+			tooltip,
+			tooltipPosition = "right",
+			hotkey,
+			variant = "default",
+			size = "xl",
+			radius = "xl",
+			rounded = "full",
+			toolTipStyle,
+			tooltipVariant = "primary",
+			hideTooltip,
+			loading,
+			...props
+		},
+		ref,
+	) => {
+		return (
+			<button
+				className={clsx(
+					style.button,
+					active && style.active,
+					style[variant],
+					style[size],
+					{
+						[style.topRounded]: rounded === "top",
+						[style.bottomRounded]: rounded === "bottom",
+						[style.fullRounded]: rounded === "full",
+						[style.leftRounded]: rounded === "left",
+						[style.rightRounded]: rounded === "right",
+						[style.fullRounded]: rounded === "full",
+					},
+					{
+						[style.radiusXl]: radius === "xl",
+						[style.radiusMd]: radius === "md",
+						[style.radiusSm]: radius === "sm",
+					},
+					loading && style.loading, // Use loading here
+					className,
+				)}
+				ref={ref}
+				disabled={disabled}
+				{...props}
+			>
+				{loading && (
+					<div className={style.loader}>
+						<Loader />
+					</div>
+				)}
+				{children}
+				{tooltip && !hideTooltip && (
+					<Tooltip
+						variant={tooltipVariant}
+						inlineStyle={toolTipStyle}
+						tooltip={tooltip}
+						tooltipPosition={tooltipPosition}
+						hotkey={hotkey}
+					/>
+				)}
+			</button>
+		);
+	},
+);
+
+UiButton.displayName = "UiButton";

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

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

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

@@ -0,0 +1,66 @@
+.colorPickerContainer {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.colorPickerContainer.active::before {
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	position: absolute;
+	content: "";
+	width: 36px;
+	height: 36px;
+	border: 2px solid var(--border-select-primary);
+	border-radius: 50%;
+	z-index: 0;
+}
+
+.colorCircle {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	border: 1px solid rgba(31, 31, 31, 0.25);
+	cursor: pointer;
+	position: relative;
+	z-index: 1;
+	border: none;
+	display: inline-block;
+	padding: 0;
+	appearance: none;
+	padding-inline: 0;
+	padding-block: 0;
+}
+
+@media screen and (max-width: 748px) {
+	.colorPickerContainer.active::before {
+		width: 28px;
+		height: 28px;
+	}
+	.colorCircle {
+		width: 24px;
+		height: 24px;
+	}
+}
+
+.colorCircle.image {
+	background-position: center;
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-image: url(./palette.png);
+}
+
+.input {
+	position: absolute;
+	opacity: 0;
+	z-index: 10;
+}
+
+.input::-webkit-color-swatch-wrapper {
+	padding: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+}

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

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import React, { ChangeEvent, useRef } from "react";
+import styles from "./UiColorInput.module.css";
+import { rgbToHex } from "shared/lib/convertColors";
+
+interface Props {
+	onChange: (color: string) => void;
+	color?: string;
+	isActive?: boolean;
+	inputClassName?: string;
+	toggleMenu?: (menu: string) => void;
+	setIsCloseMenu?: (isColorSelected: boolean) => void;
+}
+
+export function UiColorInput({
+	onChange,
+	isActive,
+	color,
+	inputClassName,
+	toggleMenu,
+	setIsCloseMenu,
+}: Props): JSX.Element {
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const handleColorChange = (event: ChangeEvent<HTMLInputElement>): void => {
+		const newColor = event.target.value;
+		onChange(newColor);
+	};
+
+	const onBlur = (): void => {
+		toggleMenu?.("None");
+		setIsCloseMenu?.(true);
+	};
+
+	if (color && color !== "none" && !color.startsWith("#")) {
+		color = rgbToHex(color);
+	}
+
+	return (
+		<div
+			className={clsx(
+				isActive && styles.active,
+				styles.colorPickerContainer,
+			)}
+		>
+			<button
+				className={clsx(
+					styles.colorCircle,
+					color === "none" && styles.image,
+				)}
+				style={{
+					backgroundColor: color === "none" ? "transparent" : color,
+				}}
+				onClick={() => inputRef.current?.click()}
+			/>
+			<input
+				className={clsx(styles.input, inputClassName)}
+				ref={inputRef}
+				type="color"
+				value={color === "none" ? "#000000" : color}
+				onChange={handleColorChange}
+				onBlur={onBlur}
+			/>
+		</div>
+	);
+}

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

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