microboard-ui-temp 0.0.3

package/src/features/GenerateChart/lib/transformOutput.ts

@@ -0,0 +1,338 @@
+import {
+	AiConnector,
+	AiFrame,
+	AiItem,
+	AiShape,
+	AiSticker,
+	AiText,
+	Point,
+} from "./types";
+import {
+	Board,
+	Connector,
+	Frame,
+	Item,
+	Mbr,
+	Point as BoardPoint,
+	RichText,
+	Shape,
+	Sticker,
+	stickerColors,
+	BoardPoint as ConnectorPoint,
+	FixedPoint,
+	toRelativePoint,
+} from "microboard-temp";
+
+const SIZE_MULTIPLIER = 1;
+function multiplySize(x: number): number {
+	return x * SIZE_MULTIPLIER;
+}
+
+// Store references to created items by their IDs
+const itemsById = new Map<number, Item>();
+
+function applyTransformation(item: Item, x = 0, y = 0): void {
+	item.transformation.translateTo(multiplySize(x), multiplySize(y));
+}
+
+function applyScaleTransformation(item: Item, width = 100, height = 100): void {
+	item.transformation.scaleTo(
+		multiplySize(width) / 100,
+		multiplySize(height) / 100,
+	);
+}
+
+function transformSticker(data: AiSticker, board: Board): void {
+	const sticker = new Sticker(board);
+	sticker.setId(board.getNewItemId());
+	if (data.backgroundColor) {
+		sticker.setBackgroundColor(stickerColors[data.backgroundColor]);
+	}
+	if (data.text) {
+		sticker.text.editor.editor.children = [
+			{
+				type: "paragraph",
+				children: [
+					{
+						text: data.text,
+						type: "text",
+						bold: false,
+						italic: false,
+						underline: false,
+						"line-through": false,
+						fontColor: "#000000",
+						fontSize: 14,
+						overline: false,
+						subscript: false,
+						superscript: false,
+					},
+				],
+				horisontalAlignment: "center",
+			},
+		];
+	}
+	applyTransformation(sticker, data.x, data.y);
+	applyScaleTransformation(sticker, data.size, data.size);
+
+	const newSticker = board.add<Sticker>(sticker);
+	itemsById.set(data.id, newSticker);
+}
+
+function transformText(data: AiText, board: Board): void {
+	const textItem = new RichText(board, new Mbr());
+	textItem.setId(board.getNewItemId());
+
+	// Set text content with formatting
+	textItem.editor.editor.children = [
+		{
+			type: "paragraph",
+			children: [
+				{
+					text: data.text || "",
+					type: "text",
+					bold: data.bold,
+					italic: data.italic,
+					underline: data.underline,
+					"line-through": data["line-through"],
+					fontColor: data.fontColor,
+					fontSize: data.fontSize,
+					fontHighlight: data.fontHighlight,
+					overline: false,
+					subscript: false,
+					superscript: false,
+				},
+			],
+			horisontalAlignment: "left",
+		},
+	];
+
+	applyTransformation(textItem, data.x, data.y);
+	textItem.applyMaxWidth(multiplySize(data.width));
+
+	const newRichText = board.add<RichText>(textItem);
+	itemsById.set(data.id, newRichText);
+}
+
+const getPoint = (
+	position: number,
+	geometry: number,
+	percent: number,
+): number => {
+	if (geometry) {
+		return position + (geometry * percent) / 100;
+	}
+	return position;
+};
+
+function getConnectorPoint(point: Point): BoardPoint {
+	if (point.type === "Board") {
+		return new ConnectorPoint(point.x, point.y);
+	} else {
+		// Fixed point
+		const targetItem = itemsById.get(point.id);
+		if (!targetItem) {
+			// Fallback to board point if item not found
+			return new ConnectorPoint(0, 0);
+		}
+		const { left: itemX, top: itemY } = targetItem.getPath().getMbr();
+		const x = getPoint(
+			itemX,
+			targetItem.getMbr().getWidth(),
+			point.relativeX,
+		);
+		const y = getPoint(
+			itemY,
+			targetItem.getMbr().getHeight(),
+			point.relativeY,
+		);
+		const relativePoint = toRelativePoint(new BoardPoint(x, y), targetItem);
+		return relativePoint;
+
+		// const targetWidth = targetItem.getMbr().getWidth();
+		// const targetHeight = targetItem.getMbr().getHeight();
+		// const targetX = targetItem.getMbr().left;
+		// const targetY = targetItem.getMbr().top;
+		// const startX = targetX + targetWidth * (point.relativeX / 100);
+		// const startY = targetY + targetHeight * (point.relativeY / 100);
+		// return toRelativePoint(new BoardPoint(startX, startY), targetItem);
+		// return new FixedPoint(
+		// 	targetItem,
+		// 	new BoardPoint(point.relativeX / 100, point.relativeY / 100),
+		// );
+	}
+}
+
+function transformConnector(data: AiConnector, board: Board): void {
+	const startPoint = getConnectorPoint(data.startPoint);
+	const endPoint = getConnectorPoint(data.endPoint);
+	if (!data.startPoint?.id || !data.endPoint?.id) {
+		console.warn("Temporary not supported connector with Board point");
+		return;
+	}
+	const startItem = itemsById.get(data.startPoint.id);
+	const endItem = itemsById.get(data.endPoint.id);
+	if (!startItem || !endItem) {
+		return;
+	}
+
+	const connector = new Connector(
+		board,
+		new FixedPoint(startItem, startPoint),
+		new FixedPoint(endItem, endPoint),
+	);
+	connector.setId(board.getNewItemId());
+
+	// Set connector properties
+	connector.setLineStyle(data.lineType);
+
+	if (data.startPoint.style) {
+		connector.setStartPointerStyle(data.startPoint.style);
+	}
+	if (data.endPoint.style) {
+		connector.setEndPointerStyle(data.endPoint.style);
+	}
+
+	if (data.text) {
+		connector.text.editor.editor.children = [
+			{
+				type: "paragraph",
+				children: [
+					{
+						text: data.text,
+						type: "text",
+						bold: false,
+						italic: false,
+						underline: false,
+						"line-through": false,
+						fontColor: "#000000",
+						fontSize: 14,
+						overline: false,
+						subscript: false,
+						superscript: false,
+					},
+				],
+				horisontalAlignment: "center",
+			},
+		];
+	}
+
+	const newConnector = board.add<Connector>(connector);
+	itemsById.set(data.id, newConnector);
+}
+
+function transformShape(data: AiShape, board: Board): void {
+	const shape = new Shape(board, undefined, "Rectangle");
+	shape.setId(board.getNewItemId());
+	try {
+		shape.setShapeType(data.type);
+	} catch (err) {
+		shape.setShapeType("Rectangle");
+	}
+
+	// Apply styling
+	shape.setBackgroundColor(data.fill);
+	shape.setBorderColor(data.stroke);
+	shape.setBorderWidth(data.strokeWidth);
+
+	// Apply transformations
+	applyTransformation(shape, data.x, data.y);
+	applyScaleTransformation(shape, data.width, data.height);
+
+	if (data.rotation) {
+		shape.transformation.rotateBy(data.rotation);
+	}
+
+	if (data.text) {
+		shape.text.editor.editor.children = [
+			{
+				type: "paragraph",
+				children: [
+					{
+						text: data.text,
+						type: "text",
+						bold: false,
+						italic: false,
+						underline: false,
+						"line-through": false,
+						fontColor: "#000000",
+						fontSize: 14,
+						overline: false,
+						subscript: false,
+						superscript: false,
+					},
+				],
+				horisontalAlignment: "center",
+			},
+		];
+	}
+
+	const newShape = board.add<Shape>(shape);
+	itemsById.set(data.id, newShape);
+}
+
+function transformFrame(data: AiFrame, board: Board): void {
+	const frame = new Frame(
+		board,
+		board.items.getById.bind(board.items),
+		undefined,
+		data.title || "Frame",
+	);
+	frame.setId(board.getNewItemId());
+
+	// Apply transformations
+	applyTransformation(frame, data.x, data.y);
+	applyScaleTransformation(frame, data.width, data.height);
+
+	const newFrame = board.add<Frame>(frame);
+	itemsById.set(data.id, newFrame);
+
+	// Add items to frame if they exist
+	if (data.items && data.items.length > 0) {
+		data.items.forEach(itemId => {
+			const item = itemsById.get(itemId);
+			if (item?.itemType === "Connector") {
+				return;
+			}
+			if (item) {
+				frame.emitAddChild(item);
+			}
+		});
+	}
+}
+
+const transformers = {
+	RichText: transformText,
+	Shape: transformShape,
+	Frame: transformFrame,
+	Connector: transformConnector,
+	Sticker: transformSticker,
+};
+
+export function transformAiOutput(output: AiItem[], board: Board): void {
+	itemsById.clear(); // Clear previous items map
+
+	// First pass: create all non-connector items
+	output.forEach((item: AiItem) => {
+		if (item.itemType !== "Connector") {
+			transformers[item.itemType](item.data, board);
+		}
+	});
+
+	// Second pass: create connectors (now that all items exist)
+	output.forEach((item: AiItem) => {
+		if (item.itemType === "Connector") {
+			transformers[item.itemType](item.data, board);
+		}
+	});
+
+	itemsById.clear();
+	zoomToFit(board);
+}
+
+function zoomToFit(board: Board): void {
+	const items = board.items.listAll();
+	if (items.length > 0) {
+		const rect = board.items.getMbr();
+		board.camera.zoomToFit(rect);
+	}
+}

package/src/features/GoogleAuthBtn/GoogleAuthBtn.module.css

@@ -0,0 +1,19 @@
+.baseStyle {
+	height: 40px;
+	max-width: 252px;
+	width: 100%;
+	margin: 0 auto;
+	border: none;
+	text-align: center;
+	font-size: 14px;
+	font-family: "Manrope";
+	font-weight: 600;
+	background-color: #5980de;
+	color: #ffffff;
+	border-radius: 12px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 4px;
+	cursor: pointer;
+}

package/src/features/GoogleAuthBtn/GoogleAuthBtn.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "shared/ui-lib/Icon";
+import styles from "./GoogleAuthBtn.module.css";
+
+export function GoogleAuthBtn() {
+	const { t } = useTranslation();
+
+	const handleClick = (_ev): void => {
+		window.location.replace(`${window.location.origin}/api/v1/auth/google`);
+	};
+
+	return (
+		<button onClick={handleClick} className={styles.baseStyle}>
+			<Icon iconName={"GoogleIcon"} />
+			<span>{t("auth.googleAuth")}</span>
+		</button>
+	);
+}

package/src/features/GoogleAuthBtn/icons.tsx

@@ -0,0 +1,301 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { iconStyle, disabledIconStyle, svgStyle } from "./styles";
+
+const darkSvg = (
+	<svg
+		version="1.1"
+		xmlns="http://www.w3.org/2000/svg"
+		width="46px"
+		height="46px"
+		viewBox="0 0 46 46"
+		style={svgStyle}
+	>
+		<defs>
+			<filter
+				x="-50%"
+				y="-50%"
+				width="200%"
+				height="200%"
+				filterUnits="objectBoundingBox"
+				id="filter-1"
+			>
+				<feOffset
+					dx="0"
+					dy="1"
+					in="SourceAlpha"
+					result="shadowOffsetOuter1"
+				/>
+				<feGaussianBlur
+					stdDeviation="0.5"
+					in="shadowOffsetOuter1"
+					result="shadowBlurOuter1"
+				/>
+				<feColorMatrix
+					values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.168 0"
+					in="shadowBlurOuter1"
+					type="matrix"
+					result="shadowMatrixOuter1"
+				/>
+				<feOffset
+					dx="0"
+					dy="0"
+					in="SourceAlpha"
+					result="shadowOffsetOuter2"
+				/>
+				<feGaussianBlur
+					stdDeviation="0.5"
+					in="shadowOffsetOuter2"
+					result="shadowBlurOuter2"
+				/>
+				<feColorMatrix
+					values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.084 0"
+					in="shadowBlurOuter2"
+					type="matrix"
+					result="shadowMatrixOuter2"
+				/>
+				<feMerge>
+					<feMergeNode in="shadowMatrixOuter1" />
+					<feMergeNode in="shadowMatrixOuter2" />
+					<feMergeNode in="SourceGraphic" />
+				</feMerge>
+			</filter>
+			<rect id="path-2" x="0" y="0" width="40" height="40" rx="2" />
+			<rect id="path-3" x="5" y="5" width="38" height="38" rx="1" />
+		</defs>
+		<g
+			id="Google-Button"
+			stroke="none"
+			strokeWidth="1"
+			fill="none"
+			fillRule="evenodd"
+		>
+			<g id="9-PATCH" transform="translate(-608.000000, -219.000000)" />
+			<g
+				id="btn_google_dark_normal"
+				transform="translate(-1.000000, -1.000000)"
+			>
+				<g
+					id="button"
+					transform="translate(4.000000, 4.000000)"
+					filter="url(#filter-1)"
+				>
+					<g id="button-bg">
+						<use fill="#4285F4" fillRule="evenodd" />
+						<use fill="none" />
+						<use fill="none" />
+						<use fill="none" />
+					</g>
+				</g>
+				<g id="button-bg-copy">
+					<use fill="#FFFFFF" fillRule="evenodd" />
+					<use fill="none" />
+					<use fill="none" />
+					<use fill="none" />
+				</g>
+				<g
+					id="logo_googleg_48dp"
+					transform="translate(15.000000, 15.000000)"
+				>
+					<path
+						d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"
+						id="Shape"
+						fill="#4285F4"
+					/>
+					<path
+						d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"
+						id="Shape"
+						fill="#34A853"
+					/>
+					<path
+						d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"
+						id="Shape"
+						fill="#FBBC05"
+					/>
+					<path
+						d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"
+						id="Shape"
+						fill="#EA4335"
+					/>
+					<path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape" />
+				</g>
+				<g id="handles_square" />
+			</g>
+		</g>
+	</svg>
+);
+
+const lightSvg = (
+	<svg
+		version="1.1"
+		xmlns="http://www.w3.org/2000/svg"
+		width="46px"
+		height="46px"
+		viewBox="0 0 46 46"
+		style={svgStyle}
+	>
+		<defs>
+			<filter
+				x="-50%"
+				y="-50%"
+				width="200%"
+				height="200%"
+				filterUnits="objectBoundingBox"
+				id="filter-1"
+			>
+				<feOffset
+					dx="0"
+					dy="1"
+					in="SourceAlpha"
+					result="shadowOffsetOuter1"
+				/>
+				<feGaussianBlur
+					stdDeviation="0.5"
+					in="shadowOffsetOuter1"
+					result="shadowBlurOuter1"
+				/>
+				<feColorMatrix
+					values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.168 0"
+					in="shadowBlurOuter1"
+					type="matrix"
+					result="shadowMatrixOuter1"
+				/>
+				<feOffset
+					dx="0"
+					dy="0"
+					in="SourceAlpha"
+					result="shadowOffsetOuter2"
+				/>
+				<feGaussianBlur
+					stdDeviation="0.5"
+					in="shadowOffsetOuter2"
+					result="shadowBlurOuter2"
+				/>
+				<feColorMatrix
+					values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.084 0"
+					in="shadowBlurOuter2"
+					type="matrix"
+					result="shadowMatrixOuter2"
+				/>
+				<feMerge>
+					<feMergeNode in="shadowMatrixOuter1" />
+					<feMergeNode in="shadowMatrixOuter2" />
+					<feMergeNode in="SourceGraphic" />
+				</feMerge>
+			</filter>
+			<rect id="path-2" x="0" y="0" width="40" height="40" rx="2" />
+		</defs>
+		<g
+			id="Google-Button"
+			stroke="none"
+			strokeWidth="1"
+			fill="none"
+			fillRule="evenodd"
+		>
+			<g id="9-PATCH" transform="translate(-608.000000, -160.000000)" />
+			<g
+				id="btn_google_light_normal"
+				transform="translate(-1.000000, -1.000000)"
+			>
+				<g
+					id="button"
+					transform="translate(4.000000, 4.000000)"
+					filter="url(#filter-1)"
+				>
+					<g id="button-bg">
+						<use fill="#FFFFFF" fillRule="evenodd" />
+						<use fill="none" />
+						<use fill="none" />
+						<use fill="none" />
+					</g>
+				</g>
+				<g
+					id="logo_googleg_48dp"
+					transform="translate(15.000000, 15.000000)"
+				>
+					<path
+						d="M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z"
+						id="Shape"
+						fill="#4285F4"
+					/>
+					<path
+						d="M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z"
+						id="Shape"
+						fill="#34A853"
+					/>
+					<path
+						d="M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z"
+						id="Shape"
+						fill="#FBBC05"
+					/>
+					<path
+						d="M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z"
+						id="Shape"
+						fill="#EA4335"
+					/>
+					<path d="M0,0 L18,0 L18,18 L0,18 L0,0 Z" id="Shape" />
+				</g>
+				<g id="handles_square" />
+			</g>
+		</g>
+	</svg>
+);
+
+const disabledSvg = (
+	<svg
+		width="46px"
+		height="46px"
+		viewBox="0 0 46 46"
+		version="1.1"
+		xmlns="http://www.w3.org/2000/svg"
+		style={svgStyle}
+	>
+		<defs>
+			<rect id="path-1" x="0" y="0" width="40" height="40" rx="2" />
+		</defs>
+		<g
+			id="Google-Button"
+			stroke="none"
+			strokeWidth="1"
+			fill="none"
+			fillRule="evenodd"
+		>
+			<g id="9-PATCH" transform="translate(-788.000000, -219.000000)" />
+			<g
+				id="btn_google_dark_disabled"
+				transform="translate(-1.000000, -1.000000)"
+			>
+				<g id="button" transform="translate(4.000000, 4.000000)">
+					<g id="button-bg">
+						<use
+							fillOpacity="0.08"
+							fill="#000000"
+							fillRule="evenodd"
+						/>
+						<use fill="none" />
+						<use fill="none" />
+						<use fill="none" />
+					</g>
+				</g>
+				<path
+					d="M24.001,25.71 L24.001,22.362 L32.425,22.362 C32.551,22.929 32.65,23.46 32.65,24.207 C32.65,29.346 29.203,33 24.01,33 C19.042,33 15.01,28.968 15.01,24 C15.01,19.032 19.042,15 24.01,15 C26.44,15 28.474,15.891 30.031,17.349 L27.475,19.833 C26.827,19.221 25.693,18.501 24.01,18.501 C21.031,18.501 18.601,20.976 18.601,24.009 C18.601,27.042 21.031,29.517 24.01,29.517 C27.457,29.517 28.726,27.132 28.96,25.719 L24.001,25.719 L24.001,25.71 Z"
+					id="Shape-Copy"
+					fillOpacity="0.4"
+					fill="#000000"
+				/>
+				<g id="handles_square" />
+			</g>
+		</g>
+	</svg>
+);
+
+export const GoogleIcon = ({ disabled, type = "dark" }) => (
+	<div style={!disabled ? iconStyle : { ...iconStyle, ...disabledIconStyle }}>
+		{!disabled ? (type === "dark" ? darkSvg : lightSvg) : disabledSvg}
+	</div>
+);
+
+GoogleIcon.propTypes = {
+	disabled: PropTypes.bool,
+	type: PropTypes.oneOf(["light", "dark"]),
+};

package/src/features/GoogleAuthBtn/index.ts

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

package/src/features/ImportMiro/AuthClipboardModal/AuthClipboardModal.module.css

@@ -0,0 +1,26 @@
+.modal {
+	max-width: 608px;
+	width: 100%;
+}
+
+.wr {
+	padding: 32px 64px !important;
+}
+
+.title {
+	font-size: 30px;
+	font-weight: 600;
+	margin: 28px 0 8px;
+}
+
+.text {
+	text-align: left;
+	font-size: 14px;
+	margin-bottom: 16px;
+}
+
+.btn {
+	margin-bottom: 40px;
+	max-width: 73px;
+	border-radius: 12px;
+}