microboard-ui-temp 0.0.3

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

@@ -0,0 +1,42 @@
+import { ReactNode, useState } from "react";
+import styles from "./Checkbox.module.css";
+import React from "react";
+import clsx from "clsx";
+
+type CheckboxProps = {
+	checked?: boolean;
+	children: ReactNode;
+	onChange?: (checked: boolean) => void;
+	className?: string;
+};
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+	className,
+	children,
+	onChange,
+	checked,
+	...props
+}: CheckboxProps): JSX.Element => {
+	const [isChecked, setIsChecked] = useState<boolean>(checked ?? false);
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+		const isChecked = event.target.checked;
+		setIsChecked(isChecked);
+		onChange?.(isChecked);
+	};
+
+	return (
+		<label className={clsx(styles.label, className)}>
+			<input
+				type="checkbox"
+				onChange={handleChange}
+				checked={isChecked}
+				className={clsx(styles.checkbox, {
+					[styles.checked]: isChecked,
+				})}
+				{...props}
+			/>
+			{children}
+		</label>
+	);
+};

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

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

package/src/shared/ui-lib/Dropdown/Chevron.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+interface Props {
+	fill?: string;
+	className?: string;
+}
+
+export const Chevron: React.FC<Props> = ({ fill = "#14151A", className }) => {
+	return (
+		<svg
+			width="16"
+			height="16"
+			viewBox="0 0 16 16"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={className}
+		>
+			<path
+				d="M8.00054 9.99985L5.17188 7.17118L6.11521 6.22852L8.00054 8.11452L9.88588 6.22852L10.8292 7.17118L8.00054 9.99985Z"
+				fill={fill}
+			/>
+		</svg>
+	);
+};

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

@@ -0,0 +1,48 @@
+.dropdown {
+	position: relative;
+	display: inline-block;
+}
+.dropdownButton {
+	height: 32px;
+	background: white;
+	color: black;
+	padding: 8px 10px;
+	border: 1px solid #dee0e3;
+	border-radius: 10px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.dropdownButton:hover {
+	background-color: #f7f7f8;
+}
+
+.dropdownButton:active {
+	border: 1px solid #b78af0;
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.dropdownMenu {
+	position: fixed;
+	margin-top: 16px;
+	padding: 12px 16px;
+	background-color: #f9f9f9;
+	min-width: 160px;
+	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+	z-index: 1;
+	border-radius: 8px;
+	border: 1px solid #dee0e3;
+	box-shadow: 0 10px 16px rgba(20, 21, 26, 0.05);
+}
+.dropdownItem {
+	color: black;
+	text-decoration: none;
+	display: block;
+}
+/* .dropdownItem:hover {
+	background-color: #f1f1f1;
+} */

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

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { useClickOutside } from "shared/lib/useClickOutside";
+import { Chevron } from "./Chevron";
+import styles from "./Dropdown.module.css";
+
+interface DropdownProps {
+	items: React.ReactNode[];
+	label: React.ReactNode;
+}
+
+export const Dropdown: React.FC<DropdownProps> = ({ items, label }) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const toggleDropdown = (
+		event: React.MouseEvent<HTMLButtonElement>,
+	): void => {
+		event.preventDefault();
+		setIsOpen(!isOpen);
+	};
+
+	const closeDropdown = (): void => setIsOpen(false);
+
+	const ref = useClickOutside<HTMLUListElement>(closeDropdown);
+
+	return (
+		<div className={styles.dropdown}>
+			<button onClick={toggleDropdown} className={styles.dropdownButton}>
+				{label}
+				<Chevron />
+			</button>
+			{isOpen && (
+				<ul className={styles.dropdownMenu} ref={ref}>
+					{items.map((item, index) => (
+						<li key={index} className={styles.dropdownItem}>
+							{item}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+};

package/src/shared/ui-lib/Icon/ConnectorIcon.tsx

@@ -0,0 +1,33 @@
+import type { ConnectorLineStyle } from "microboard-temp";
+import React from "react";
+import sprite from "./sprite.svg";
+
+type Props = {
+	iconName: ConnectorLineStyle;
+	width?: number | string;
+	height?: number | string;
+	style?: React.CSSProperties;
+};
+
+export function ConnectorIcon({
+	iconName,
+	style,
+	height = 20,
+	width = 20,
+}: Props): React.ReactElement {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			width={width}
+			height={height}
+			style={style}
+		>
+			<use
+				width={width}
+				height={height}
+				xlinkHref={`${sprite}#${iconName}`}
+			/>
+		</svg>
+	);
+}

package/src/shared/ui-lib/Icon/ConnectorPointerIcon.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import sprite from "./sprite.svg";
+
+export type ConnectorPointerType =
+	| "None"
+	| "ArrowBroad"
+	| "ArrowThin"
+	| "TriangleFilled"
+	| "CircleFilled"
+	| "Angle"
+	| "TriangleEmpty"
+	| "DiamondFilled"
+	| "DiamondEmpty"
+	| "Zero"
+	| "One"
+	| "Many"
+	| "ManyMandatory"
+	| "OneMandatory"
+	| "ManyOptional"
+	| "OneOptional";
+
+type Props = {
+	iconName: ConnectorPointerType;
+	width?: number | string;
+	height?: number | string;
+	style?: React.CSSProperties;
+};
+
+export function ConnectorPointerIcon({
+	iconName,
+	style,
+	height = 24,
+	width = 24,
+}: Props): React.ReactElement {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			width={width}
+			height={height}
+			style={style}
+		>
+			<use
+				width={width}
+				height={height}
+				xlinkHref={`${sprite}#${iconName}`}
+			/>
+		</svg>
+	);
+}

package/src/shared/ui-lib/Icon/EyeClosed.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+export function EyeClosed(): React.ReactElement {
+	return (
+		<svg
+			id="EyeClosed"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M2 5.27L3.28 4L20 20.72L18.73 22L15.65 18.92C14.5 19.3 13.28 19.5 12 19.5C7 19.5 2.73 16.39 1 12C1.69 10.24 2.79 8.69 4.19 7.46L2 5.27ZM12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15.0005 12.3406 14.943 12.6787 14.83 13L11 9.17C11.3213 9.05698 11.6594 8.99949 12 9ZM12 4.5C17 4.5 21.27 7.61 23 12C22.1834 14.0729 20.7966 15.8723 19 17.19L17.58 15.76C18.9629 14.8034 20.0783 13.5091 20.82 12C20.0117 10.3499 18.7565 8.95963 17.1974 7.98735C15.6382 7.01508 13.8375 6.49976 12 6.5C10.91 6.5 9.84 6.68 8.84 7L7.3 5.47C8.74 4.85 10.33 4.5 12 4.5ZM3.18 12C3.98835 13.6501 5.24345 15.0404 6.80264 16.0126C8.36182 16.9849 10.1625 17.5002 12 17.5C12.69 17.5 13.37 17.43 14 17.29L11.72 15C11.0242 14.9254 10.3748 14.6149 9.87997 14.12C9.38512 13.6252 9.07458 12.9758 9 12.28L5.6 8.87C4.61 9.72 3.78 10.78 3.18 12Z"
+				fill="url(#paint0_linear_2031_1137)"
+			/>
+			<defs>
+				<linearGradient
+					id="paint0_linear_2031_1137"
+					x1="23"
+					y1="13"
+					x2="1"
+					y2="13"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#944FE7" />
+					<stop offset="0.241532" stopColor="#A347E7" />
+					<stop offset="0.669709" stopColor="#B240E7" />
+					<stop offset="1" stopColor="#C239E7" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

package/src/shared/ui-lib/Icon/EyeOpened.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+export function EyeOpened(): React.ReactElement {
+	return (
+		<svg
+			width="25"
+			height="24"
+			viewBox="0 0 25 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M2.92012 12.7132C2.78394 12.4975 2.71584 12.3897 2.67772 12.2234C2.64909 12.0985 2.64909 11.9015 2.67772 11.7766C2.71584 11.6103 2.78394 11.5025 2.92012 11.2868C4.04553 9.50484 7.3954 5 12.5004 5C17.6054 5 20.9553 9.50484 22.0807 11.2868C22.2169 11.5025 22.285 11.6103 22.3231 11.7766C22.3517 11.9015 22.3517 12.0985 22.3231 12.2234C22.285 12.3897 22.2169 12.4975 22.0807 12.7132C20.9553 14.4952 17.6054 19 12.5004 19C7.3954 19 4.04553 14.4952 2.92012 12.7132Z"
+				stroke="url(#paint0_linear_2031_3645)"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M12.5004 15C14.1573 15 15.5004 13.6569 15.5004 12C15.5004 10.3431 14.1573 9 12.5004 9C10.8435 9 9.5004 10.3431 9.5004 12C9.5004 13.6569 10.8435 15 12.5004 15Z"
+				stroke="url(#paint1_linear_2031_3645)"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<defs>
+				<linearGradient
+					id="paint0_linear_2031_3645"
+					x1="2.65625"
+					y1="0.916667"
+					x2="2.65625"
+					y2="21.9167"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#944FE7" />
+					<stop offset="0.241532" stopColor="#A347E7" />
+					<stop offset="0.669709" stopColor="#B240E7" />
+					<stop offset="1" stopColor="#C239E7" />
+				</linearGradient>
+				<linearGradient
+					id="paint1_linear_2031_3645"
+					x1="2.65625"
+					y1="0.916667"
+					x2="2.65625"
+					y2="21.9167"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#944FE7" />
+					<stop offset="0.241532" stopColor="#A347E7" />
+					<stop offset="0.669709" stopColor="#B240E7" />
+					<stop offset="1" stopColor="#C239E7" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+}

package/src/shared/ui-lib/Icon/FillColorIndicator/FillColorIndicator.module.css

@@ -0,0 +1,11 @@
+.indicator {
+	border-radius: 50%;
+	border: 1px solid rgba(15, 15, 15, 0.25);
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+.indicator.none {
+	background-image: url("./bg.png");
+}

package/src/shared/ui-lib/Icon/FillColorIndicator/FillColorIndicator.tsx

@@ -0,0 +1,26 @@
+import clsx from "clsx";
+import React from "react";
+import style from "./FillColorIndicator.module.css";
+
+type Props = {
+	color: string;
+	width?: number;
+	height?: number;
+};
+
+export function FillColorIndicator({
+	color,
+	height = 20,
+	width = 20,
+}: Props): React.ReactElement {
+	return (
+		<div
+			style={{
+				height,
+				width,
+				backgroundColor: color,
+			}}
+			className={clsx(style.indicator, color === "none" && style.none)}
+		/>
+	);
+}

package/src/shared/ui-lib/Icon/FillColorIndicator/index.ts

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

package/src/shared/ui-lib/Icon/FrameIcon.tsx

@@ -0,0 +1,33 @@
+import type { FrameType } from "microboard-temp";
+import React from "react";
+import sprite from "./sprite.svg";
+
+type Props = {
+	iconName: FrameType;
+	width?: number | string;
+	height?: number | string;
+	style?: React.CSSProperties;
+};
+
+export function FrameIcon({
+	iconName,
+	style,
+	height = 24,
+	width = 24,
+}: Props): React.ReactElement {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			width={width}
+			height={height}
+			style={style}
+		>
+			<use
+				width={width}
+				height={height}
+				xlinkHref={`${sprite}#${"Frame" + iconName}`}
+			/>
+		</svg>
+	);
+}

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

@@ -0,0 +1,11 @@
+.icon {
+	max-width: 24px;
+	max-height: 24px;
+}
+
+@media screen and (max-width: 748px) {
+	.icon {
+		max-width: 20px;
+		max-height: 20px;
+	}
+}

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

@@ -0,0 +1,212 @@
+import clsx from "clsx";
+import React from "react";
+import styles from "./Icon.module.css";
+import sprite from "./sprite.svg";
+
+export type IconId =
+	| "Select"
+	| "Pen"
+	| "Eraser"
+	| "Highlighter"
+	| "Text"
+	| "Shape"
+	| "Connector"
+	| "Sticker"
+	| "Frame"
+	| "AddMedia"
+	| "Image"
+	| "Audio"
+	| "Video"
+	| "Undo"
+	| "Redo"
+	| "Gear"
+	| "SidePanelOpen"
+	| "SidePanelClose"
+	| "Export"
+	| "ZoomToFit"
+	| "Minus"
+	| "Plus"
+	| "Close"
+	| "Folder"
+	| "Chevron"
+	| "ContextMenu"
+	| "Delete"
+	| "Board"
+	| "TextStyle"
+	| "TextBold"
+	| "TextItalic"
+	| "TextUnderline"
+	| "TextStrike"
+	| "TextAlignCenter"
+	| "TextAlignLeft"
+	| "TextAlignRight"
+	| "TextColor"
+	| "TextHighlight"
+	| "SolidLine"
+	| "DashedLine"
+	| "DottedLine"
+	| "Duplicate"
+	| "Dots"
+	| "Switch"
+	| "DiagonalLine"
+	| "CurvedLine"
+	| "LockFrameLocked"
+	| "LockFrameUnlocked"
+	| "Notification"
+	| "BringToFront"
+	| "SendToBack"
+	| "CopyLink"
+	| "SaveAsImage"
+	| "VerticalAlignTop"
+	| "VerticalAlignCenter"
+	| "VerticalAlignBottom"
+	| "AddText"
+	| "Rename"
+	| "myBoards"
+	| "publicDrafts"
+	| "sharedBoards"
+	| "import"
+	| "modalCross"
+	| "Search"
+	| "UserPic"
+	| "EmbedBoardIcon"
+	| "UploadBoardIcon"
+	| "EditBoardIcon"
+	| "addButton"
+	| "canEdit"
+	| "canView"
+	| "checkMark"
+	| "BurgerMenu"
+	| "loader"
+	| "TextLimitWarning"
+	| "lock"
+	| "unlock"
+	| "ArrowLeft"
+	| "ArrowLeft1"
+	| "BoxedPlus"
+	| "SignIn"
+	| "Info"
+	| "SendArrow"
+	| "CommentTippy"
+	| "Comment"
+	| "ArrowClock"
+	| "MarkAsUnreadComment"
+	| "MarkAsReadComment"
+	| "linkTo"
+	| "AllTemplates"
+	| "ResearchAnalysis"
+	| "Diagramming"
+	| "MeetingWorkshop"
+	| "StrategyPlanning"
+	| "Brainstorming"
+	| "AgileWorkflow"
+	| "IcebreakerGame"
+	| "Education"
+	| "Template"
+	| "Planet"
+	| "BackArrow"
+	| "StrokeChevronDown"
+	| "StrokeChevronUp"
+	| "human"
+	| "ThreeDots"
+	| "ArrowUp"
+	| "ArrowDown"
+	| "People"
+	| "Crown"
+	| "mark"
+	| "drawingPen"
+	| "Hand"
+	| "GearStroke"
+	| "ToggleCursors"
+	| "FollowUser"
+	| "BringToMe"
+	| "EyeDashed"
+	| "addLink"
+	| "Hyperlink"
+	| "EditPen"
+	| "StopAiGeneration"
+	| "AIChatArrowDisabled"
+	| "Vector"
+	| "ArrowUpCircle"
+	| "ai"
+	| "AIChatSendArrow"
+	| "ArrowRightFill"
+	| "quotedText"
+	| "ArrowRight"
+	| "ArrowRightSm"
+	| "CryptoIcon"
+	| "GoogleIcon"
+	| "Checkbox"
+	| "CheckboxFilled"
+	| "Visa"
+	| "Mastercard"
+	| "XRP"
+	| "BTC"
+	| "ETH"
+	| "POL"
+	| "ExportFile"
+	| "ExportPNG"
+	| "InformationLine"
+	| "Dropdown_speech"
+	| "Dropdown_img"
+	| "Dropdown_texts"
+	| "Save"
+	| "ShareSnapshotLink"
+	| "MediaLoader"
+	| "Play"
+	| "Pause"
+	| "Volume"
+	| "Download"
+	| "PlaybackRate"
+	| "Tick"
+	| "BulletedList"
+	| "NumberedList"
+	| "support"
+	| "Mouse"
+	| "Trackpad"
+	| "Auto"
+	| "MouseOrTrackpad"
+	| "Paste"
+	| "EyeOpen"
+	| "EyeCrossed"
+	| "MouseRightClick"
+	| "MouseRollClick"
+	| "TrackpadMove"
+	| "TrackpadPinch";
+
+type Props = {
+	iconName: IconId;
+	width?: number | string;
+	height?: number | string;
+	style?: React.CSSProperties;
+	className?: string;
+};
+
+export function Icon({
+	iconName,
+	style,
+	className,
+	height,
+	width,
+}: Props): React.ReactElement {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			width={width}
+			height={height}
+			style={style}
+			className={clsx(className, !width && !height && styles.icon)}
+		>
+			<use
+				width={width}
+				height={height}
+				xlinkHref={
+					window.location.protocol === "file:"
+						? `#${iconName}`
+						: `${sprite}#${iconName}`
+				}
+			/>
+		</svg>
+	);
+}

package/src/shared/ui-lib/Icon/Logo.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export function Logo({ id }: { id?: string }): JSX.Element {
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			version="1.1"
+			id={id}
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="m 12,2 c 3,1 5,3.8 4.5,7 l 4.5,1.5 c 0.7,0.2 1.2,0.8 1,1.5 -0.9,3.2 -3.8,5 -7,4.5 L 13.5,21 C 13.3,21.7 12.7,22.2 12,22 8.8,21.1 7,18.2 7.5,15 L 3,13.5 C 2.3,13.3 1.8,12.7 2,12 2.9,8.8 5.8,7 9,7.5 L 10.5,3 C 10.7,2.3 11.3,1.8 12,2 Z m 1.5,9 c -0.8,-0.8 -2.2,-0.8 -3,0 -0.8,0.8 -0.8,1.8 0,2.5 0.8,0.8 2.25,0.75 3,0 0.75,-0.75 0.75,-1.75 0,-2.5 z"
+				fill="#8041FF"
+				id="path1"
+			/>
+		</svg>
+	);
+}

package/src/shared/ui-lib/Icon/ShapeIcon.tsx

@@ -0,0 +1,33 @@
+import type { ShapeType } from "microboard-temp";
+import React from "react";
+import sprite from "./sprite.svg";
+
+type Props = {
+	iconName: ShapeType;
+	width?: number | string;
+	height?: number | string;
+	style?: React.CSSProperties;
+};
+
+export function ShapeIcon({
+	iconName,
+	style,
+	height = 30,
+	width = 30,
+}: Props): React.ReactElement {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			width={width}
+			height={height}
+			style={style}
+		>
+			<use
+				width={width}
+				height={height}
+				xlinkHref={`${sprite}#${iconName}`}
+			/>
+		</svg>
+	);
+}