microboard-ui-temp 0.0.3

package/src/shared/api/users/api.ts

@@ -0,0 +1,37 @@
+import { api } from "../base/base";
+import type { UpdateUserPayload, User, UpdateUserNewsletter } from "./types";
+
+export function getMe() {
+	return api.get<User>("/users/me");
+}
+
+export function getUsers(search?: string, limit = 20) {
+	return api.get<User[]>("/users", {
+		query: search
+			? new URLSearchParams({ search, limit: limit.toString() })
+			: undefined,
+	});
+}
+
+export function updateMe(payload: UpdateUserPayload, signal?: AbortSignal) {
+	return api.patch("/users/me", payload, {
+		signal,
+	});
+}
+
+export function updateNewsletter(
+	payload: UpdateUserNewsletter,
+	signal?: AbortSignal,
+) {
+	return api.patch("/users/me/newsletter", payload, {
+		signal,
+	});
+}
+
+export function uploadAvatar(avatar: File) {
+	return api.patchRaw("/users/me/avatar", avatar);
+}
+
+export function removeAvatar() {
+	return api.delete("/users/me/avatar");
+}

package/src/shared/api/users/index.ts

@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./types";

package/src/shared/api/users/types.ts

@@ -0,0 +1,17 @@
+export type User = {
+	id: number;
+	email?: string;
+	address?: string;
+	name: string;
+	avatar: string;
+	avatarGenerated: boolean;
+	newsletter: boolean;
+};
+
+export type UpdateUserNewsletter = {
+	newsletter: boolean;
+};
+
+export type UpdateUserPayload = {
+	name: string;
+};

package/src/shared/apiV2/base.ts

@@ -0,0 +1,9 @@
+import { getApiUrl, getApiUrlV2 } from "Config";
+import { HTTP } from "shared/api/base/base";
+
+export const apiV2 = new HTTP({
+	baseURL: getApiUrl(),
+	headers: {
+		"Content-Type": "application/json",
+	},
+});

package/src/shared/apiV2/boards/api.ts

@@ -0,0 +1,143 @@
+import { apiV2 } from "../base";
+import {
+	AUTHOR_KEY_HEADER,
+	type AccessKey,
+	type AccessKeyPayload,
+	type Board,
+	type BoardPayload,
+	type ClaimBoardsPayload,
+	type GrantAccessPayload,
+	type GrantedUser,
+	type ManageAccessPayload,
+} from "./types";
+
+export function createBoard(body: BoardPayload) {
+	return apiV2.post<Board>("/boards", body);
+}
+
+export function claimBoards(body: ClaimBoardsPayload) {
+	return apiV2.post("/boards/claim", body);
+}
+
+export function getBoard(boardId: string) {
+	return apiV2.get<Board>("/boards/:boardId", {
+		params: {
+			boardId,
+		},
+	});
+}
+
+export function editBoard(
+	boardId: string,
+	body: BoardPayload,
+	authorKey?: string | null,
+) {
+	return apiV2.patch<Board>("/boards/:boardId", body, {
+		params: {
+			boardId,
+		},
+		headers: {
+			...(authorKey && { [AUTHOR_KEY_HEADER]: authorKey }),
+		},
+	});
+}
+
+export function deleteBoard(boardId: string, authorKey?: string | null) {
+	return apiV2.delete("/boards/:boardId", {
+		params: {
+			boardId,
+		},
+		headers: {
+			...(authorKey && { [AUTHOR_KEY_HEADER]: authorKey }),
+		},
+	});
+}
+
+export function createAccessKey(
+	boardId: string,
+	body: AccessKeyPayload,
+	authorKey?: string,
+) {
+	return apiV2.post<AccessKey>("/boards/:boardId/access-key", body, {
+		params: {
+			boardId,
+		},
+		headers: {
+			...(authorKey && { [AUTHOR_KEY_HEADER]: authorKey }),
+		},
+	});
+}
+
+export function getAccessKeys(boardId: string, authorKey?: string) {
+	return apiV2.get<AccessKey[]>("/boards/:boardId/access-key", {
+		params: {
+			boardId,
+		},
+		headers: {
+			...(authorKey && { [AUTHOR_KEY_HEADER]: authorKey }),
+		},
+	});
+}
+
+export function getAccessKey(
+	boardId: string,
+	accessKey: string,
+	authorKey?: string,
+) {
+	return apiV2.get<AccessKey[]>("/boards/:boardId/access-key/:accessKey", {
+		params: {
+			boardId,
+			accessKey,
+		},
+		headers: {
+			...(authorKey && { [AUTHOR_KEY_HEADER]: authorKey }),
+		},
+	});
+}
+
+export function deleteAccessKey(
+	boardId: string,
+	accessKey: string,
+	authorKey?: string,
+) {
+	return apiV2.delete("/boards/:boardId/access-key/:accessKey", {
+		params: {
+			boardId,
+			accessKey,
+		},
+		headers: {
+			...(authorKey && { [AUTHOR_KEY_HEADER]: authorKey }),
+		},
+	});
+}
+
+export function getGrantedUsers(boardId: string) {
+	return apiV2.get<GrantedUser[]>("/boards/:boardId/grant-access", {
+		params: {
+			boardId,
+		},
+	});
+}
+
+export function grantAccess(boardId: string, users: GrantAccessPayload[]) {
+	return apiV2.post(
+		"/boards/:boardId/grant-access",
+		{ users },
+		{
+			params: {
+				boardId,
+			},
+		},
+	);
+}
+
+export function manageAccess(
+	boardId: string,
+	manageAccess: ManageAccessPayload,
+) {
+	return apiV2.post("/boards/:boardId/manage-access", manageAccess, {
+		params: {
+			boardId,
+		},
+	});
+}

package/src/shared/apiV2/boards/index.ts

@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./types";

package/src/shared/apiV2/boards/types.ts

@@ -0,0 +1,66 @@
+export const AUTHOR_KEY_HEADER = "x-author-key";
+
+export enum DirectAccessType {
+	EDIT = "edit",
+	VIEW = "view",
+}
+
+export enum AccessKeyType {
+	EDIT = "edit",
+	VIEW = "view",
+}
+
+export type Board = {
+	id: string;
+	title: string;
+	authorKey: string | null;
+	isPublic: boolean;
+	directAccessType: DirectAccessType;
+	order: number;
+};
+
+export type BoardPayload = Partial<
+	Omit<Board, "id" | "authorKey"> & {
+		parentFolder: number;
+	}
+>;
+
+export type ClaimBoardsPayload = Partial<{
+	authorKeys: string[];
+	visited: string[];
+}>;
+
+export type AccessKey = {
+	boardId: string;
+	keyType: AccessKeyType;
+	accessKey: string;
+};
+
+export type AccessKeyPayload = Pick<AccessKey, "keyType">;
+
+export enum UserAccessType {
+	View = "view",
+	Edit = "edit",
+	NoAccess = "noAccess",
+}
+
+export type GrantedUser = {
+	id: number;
+	name: string | null;
+	email: string;
+	accessType: UserAccessType;
+	avatar: string | null;
+	isOwner: boolean;
+};
+
+export type GrantAccessPayload = {
+	userId: number | null;
+	accessType: UserAccessType;
+	email: string | null;
+};
+
+export type ManageAccessPayload = {
+	users: GrantAccessPayload[];
+	directAccessType: DirectAccessType;
+	isPublic: boolean;
+};

package/src/shared/apiV2/folders/api.ts

@@ -0,0 +1,81 @@
+import { apiV2 } from "../base";
+import type {
+	AddToFolderPayload,
+	Folder,
+	FolderPayload,
+	FolderType,
+	ReorderFolderPayload,
+} from "./types";
+
+export function getRootFolder(folderType?: FolderType) {
+	return apiV2.get<Folder>("/folders", {
+		query: folderType ? { type: folderType } : undefined,
+	});
+}
+
+export function createFolder(body: FolderPayload) {
+	return apiV2.post<Folder>("/folders", body);
+}
+
+export function initFolders() {
+	return apiV2.post("/folders/init");
+}
+
+export function getFodler(folderId: number) {
+	return apiV2.get("/folders/:folderId", {
+		params: {
+			folderId,
+		},
+	});
+}
+
+export function addToFolder(folderId: number, body: AddToFolderPayload) {
+	return apiV2.post("/folders/:folderId", body, {
+		params: {
+			folderId,
+		},
+	});
+}
+
+export function deleteFolder(folderId: number) {
+	return apiV2.delete("/folders/:folderId", {
+		params: {
+			folderId,
+		},
+	});
+}
+
+export function deleteFolderContent(
+	folderId: number,
+	body: AddToFolderPayload,
+) {
+	return apiV2.delete(
+		"/folders/:folderId",
+		{
+			params: {
+				folderId,
+			},
+		},
+		body,
+	);
+}
+
+export function editFolder(folderId: number, body: FolderPayload) {
+	return apiV2.patch("/folders/:folderId", body, {
+		params: {
+			folderId,
+		},
+	});
+}
+
+export function reorderFolder(folderId: number, body: ReorderFolderPayload[]) {
+	return apiV2.post(
+		"/folders/:folderId/reorder",
+		{ items: body },
+		{
+			params: {
+				folderId,
+			},
+		},
+	);
+}

package/src/shared/apiV2/folders/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./api";

package/src/shared/apiV2/folders/types.ts

@@ -0,0 +1,35 @@
+import type { Board } from "../boards";
+
+export enum FolderType {
+	ROOT = "root",
+	NESTED = "nested",
+	VISITED = "visited",
+	TRASH = "trash",
+	DRAFTS = "drafts",
+}
+
+export type Folder = {
+	id: number;
+	items: (NestedFolder | NestedBoard)[];
+	type: FolderType;
+	title: string;
+};
+
+export type NestedFolder = Folder & { itemType: "folder" };
+export type NestedBoard = Board & { itemType: "board" };
+
+export type FolderPayload = Partial<
+	Pick<Folder, "title"> & {
+		parentFolder: number;
+	}
+>;
+
+export type AddToFolderPayload = Partial<{
+	nestedFolderId: number;
+	nestedBoardId: string;
+}>;
+
+export type ReorderFolderPayload = {
+	id: string | number;
+	order: number;
+};

package/src/shared/apiV2/index.ts

@@ -0,0 +1,2 @@
+export * as boardsApiV2 from "./boards";
+export * as foldersApi from "./folders";

package/src/shared/assets/imgs/default-user-icon.svg

@@ -0,0 +1,12 @@
+<svg
+        width="12"
+        height="15"
+        viewBox="0 0 12 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+            d="M11.3327 14.666H9.99935V13.3327C9.99935 12.8022 9.78863 12.2935 9.41356 11.9185C9.03849 11.5434 8.52978 11.3327 7.99935 11.3327H3.99935C3.46892 11.3327 2.96021 11.5434 2.58514 11.9185C2.21006 12.2935 1.99935 12.8022 1.99935 13.3327V14.666H0.666016V13.3327C0.666016 12.4486 1.01721 11.6008 1.64233 10.9757C2.26745 10.3505 3.11529 9.99935 3.99935 9.99935H7.99935C8.8834 9.99935 9.73125 10.3505 10.3564 10.9757C10.9815 11.6008 11.3327 12.4486 11.3327 13.3327V14.666ZM5.99935 8.66602C5.47406 8.66602 4.95392 8.56255 4.46861 8.36153C3.98331 8.16051 3.54236 7.86588 3.17092 7.49444C2.79949 7.12301 2.50485 6.68205 2.30383 6.19675C2.10281 5.71145 1.99935 5.1913 1.99935 4.66602C1.99935 4.14073 2.10281 3.62058 2.30383 3.13528C2.50485 2.64998 2.79949 2.20902 3.17092 1.83759C3.54236 1.46615 3.98331 1.17152 4.46861 0.970497C4.95392 0.769479 5.47406 0.666016 5.99935 0.666016C7.06021 0.666016 8.07763 1.08744 8.82778 1.83759C9.57792 2.58773 9.99935 3.60515 9.99935 4.66602C9.99935 5.72688 9.57792 6.7443 8.82778 7.49444C8.07763 8.24459 7.06021 8.66602 5.99935 8.66602V8.66602ZM5.99935 7.33268C6.70659 7.33268 7.38487 7.05173 7.88497 6.55163C8.38506 6.05154 8.66602 5.37326 8.66602 4.66602C8.66602 3.95877 8.38506 3.28049 7.88497 2.7804C7.38487 2.2803 6.70659 1.99935 5.99935 1.99935C5.2921 1.99935 4.61383 2.2803 4.11373 2.7804C3.61363 3.28049 3.33268 3.95877 3.33268 4.66602C3.33268 5.37326 3.61363 6.05154 4.11373 6.55163C4.61383 7.05173 5.2921 7.33268 5.99935 7.33268V7.33268Z"
+            fill="currentColor"
+    />
+</svg>

package/src/shared/assets/imgs/no-img-icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 11.1L7 9.1L12.5 14.6L16 11.1L19 14.1V5H5V11.1ZM4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3ZM15.5 10C15.1022 10 14.7206 9.84196 14.4393 9.56066C14.158 9.27936 14 8.89782 14 8.5C14 8.10218 14.158 7.72064 14.4393 7.43934C14.7206 7.15804 15.1022 7 15.5 7C15.8978 7 16.2794 7.15804 16.5607 7.43934C16.842 7.72064 17 8.10218 17 8.5C17 8.89782 16.842 9.27936 16.5607 9.56066C16.2794 9.84196 15.8978 10 15.5 10Z" fill="white" fill-opacity="0.6"/>
+</svg>

package/src/shared/lib/IframeModule.ts

@@ -0,0 +1,223 @@
+import Cookies from "js-cookie";
+import { isIframe } from "./isIframe";
+import {
+	Board,
+	exportBoardSnapshot,
+	BoardTool,
+	ExportSnapshot,
+} from "microboard-temp";
+import { App } from "App";
+
+// type MessagePattern = "updateUserToken" | "iframeEvent" | "makeSnapshot";
+
+interface SetAuthPayload {
+	accessToken: string;
+	refreshToken: string;
+}
+
+interface KeyboardPayload {
+	tagName?: string;
+	event: {
+		type: "keyboardEvent";
+		eventType: string;
+		eventData: {
+			key: string;
+			code: string;
+			ctrlKey: string;
+			shiftKey: boolean;
+			altKey: boolean;
+			bubbles?: boolean;
+			metaKey: boolean;
+			repeat: boolean;
+			target?: string | HTMLElement;
+		};
+	};
+}
+
+interface SnapshotPayload {
+	name?: string;
+}
+
+interface SetAuthTokenMessage {
+	pattern: "updateUserToken";
+	payload: SetAuthPayload;
+}
+
+interface KeyboardEventMessage {
+	pattern: "iframeEvent";
+	payload: KeyboardPayload;
+}
+
+interface MakeSnapshotMessage {
+	pattern: "makeSnapshot";
+	payload: SnapshotPayload;
+}
+
+interface FireSnapshotEvent {
+	pattern: "fireSnapshotEvent";
+	payload: unknown;
+}
+
+type Message =
+	| SetAuthTokenMessage
+	| KeyboardEventMessage
+	| MakeSnapshotMessage
+	| FireSnapshotEvent;
+
+export class IframeModule {
+	private static instance: IframeModule | null = null;
+	// private origins: string[];
+	private app: App;
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	constructor(app: App, origins?: string[]) {
+		// this.origins = origins || [];
+		this.app = app;
+		this.setEventListeners();
+	}
+
+	private setEventListeners(): void {
+		if (!isIframe()) {
+			return;
+		}
+		window.addEventListener(
+			"message",
+			async (event: MessageEvent<Message>) => {
+				// if (!this.allowOrigins(event, this.origins)) {
+				//   return;
+				// }
+				await this.handleCustomMessages(event.data);
+			},
+			false,
+		);
+	}
+
+	static getInstance(app: App, origins?: string[]): IframeModule {
+		if (!IframeModule.instance) {
+			IframeModule.instance = new IframeModule(app, origins);
+		}
+		return IframeModule.instance;
+	}
+
+	// No feature requests for now
+	// private allowOrigins(
+	//     event: MessageEvent<Message>,
+	//     origins: string[],
+	// ): boolean {
+	//     for (const origin of origins) {
+	//         if (event.origin !== origin) {
+	//             return false;
+	//         }
+	//     }
+	//     return true;
+	// }
+
+	private async handleCustomMessages(data: Message): Promise<void> {
+		try {
+			console.log("Message: ", data);
+
+			if (data.pattern === "updateUserToken") {
+				Cookies.set("mb_accessToken", data.payload.accessToken, {
+					secure: false,
+				});
+				Cookies.set("mb_refreshToken", data.payload.refreshToken, {
+					secure: false,
+				});
+			}
+
+			if (data.pattern === "makeSnapshot") {
+				if (!isIframe()) {
+					console.warn("Not in an iframe, snapshot creation aborted");
+					return;
+				}
+
+				const board: Board = this.app.getBoard() as Board;
+
+				if (!board) {
+					console.error("Board not found");
+					this.sendSnapshotError("Board not found");
+					return;
+				}
+
+				try {
+					const cachedSelection = board.selection.items.list();
+					board.selection.addAll();
+
+					const snapshot = await exportBoardSnapshot({
+						board,
+						selection: board.selection.getMbr()!,
+						nameToExport:
+							data.payload.name ||
+							`board-${board.getBoardId()}.png`,
+						upscaleTo: 4000,
+					});
+
+					board.selection.removeAll();
+					board.selection.add(cachedSelection);
+
+					if (snapshot && snapshot.dataUrl) {
+						this.sendSnapshotCreated(snapshot);
+					} else {
+						this.sendSnapshotError("Invalid snapshot data");
+					}
+				} catch (error) {
+					console.error("Error creating snapshot:", error);
+					this.sendSnapshotError("Failed to create snapshot");
+				} finally {
+					board.selection.removeAll();
+				}
+			}
+
+			if (data.pattern === "fireSnapshotEvent") {
+				const board: Board = this.app.getBoard() as Board;
+				board.tools.setTool(
+					new ExportSnapshot(board) as unknown as BoardTool,
+				);
+				board.tools.publish();
+			}
+
+			if (data.pattern === "iframeEvent") {
+				if (isIframe()) {
+					const keyboardEvent = new KeyboardEvent(
+						data.payload.event.eventType,
+						{
+							...data.payload.event.eventData,
+						} as unknown as KeyboardEventInit,
+					);
+					window.self.dispatchEvent(keyboardEvent);
+				}
+			}
+		} catch (error: Error) {
+			window.parent.postMessage(
+				{
+					pattern: "MicroboardError",
+					payload: JSON.stringify({ error: error.message }),
+				},
+				"*",
+			);
+		}
+	}
+
+	private sendSnapshotCreated(snapshot: {
+		dataUrl: string;
+		nameToExport: string;
+	}): void {
+		window.parent.postMessage(
+			{
+				pattern: "snapshotCreated",
+				payload: JSON.stringify(snapshot),
+			},
+			"*",
+		);
+	}
+
+	private sendSnapshotError(errorMessage: string): void {
+		window.parent.postMessage(
+			{
+				pattern: "snapshotError",
+				payload: JSON.stringify({ error: errorMessage }),
+			},
+			"*",
+		);
+	}
+}

package/src/shared/lib/convertColors.ts

@@ -0,0 +1,51 @@
+export const convertHexToRGBA = (hex: string, rgba = true, alpha = 0.5) => {
+	const tempHex = hex.replace("#", "");
+	const r = parseInt(tempHex.substring(0, 2), 16);
+	const g = parseInt(tempHex.substring(2, 4), 16);
+	const b = parseInt(tempHex.substring(4, 6), 16);
+
+	return rgba ? `rgba(${r},${g},${b},${alpha})` : `rgb(${r},${g},${b})`;
+};
+
+export function rgbToRgba(rgbColor: string, alpha = 0.5, defaultColor: string) {
+	const rgb = rgbColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+	if (!rgb) {
+		return defaultColor;
+	}
+	const [r, g, b] = rgb.slice(1);
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export function rgbaToRgb(rgbaColor: string, defaultColor: string) {
+	try {
+		const rgba = rgbaColor.match(
+			/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(?:\.\d+)?)\)$/,
+		);
+		if (!rgba) {
+			return defaultColor;
+		}
+		const [r, g, b, a] = rgba.slice(1);
+		return `rgb(${r}, ${g}, ${b})`;
+	} catch {
+		return defaultColor;
+	}
+}
+
+export function rgbToHex(rgb: string) {
+	let r, g, b;
+
+	const rgbArr = rgb.match(/\d+/g);
+	if (!rgbArr) {
+		return "#000000";
+	}
+	[r, g, b] = rgbArr.map(Number);
+
+	const clamp = (value: number) => Math.min(255, Math.max(0, value));
+
+	const toHex = (n: number) => {
+		const hex = clamp(n).toString(16);
+		return hex.length === 1 ? "0" + hex : hex;
+	};
+
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toLowerCase();
+}