microboard-ui-temp 0.0.3

package/src/features/Notifications/index.ts

@@ -0,0 +1,8 @@
+export {
+	SigninErrorNotification,
+	ERROR_SIGNIN_NOTIFY,
+} from "./SigninErrorNotification";
+export {
+	SignupErrorNotification,
+	ERROR_SIGNUP_NOTIFY,
+} from "./SignupErrorNotification";

package/src/features/Pickers/ColorPicker/ColorItem.module.css

@@ -0,0 +1,44 @@
+.button {
+	cursor: pointer;
+	margin: 0;
+	padding: 0;
+	position: relative;
+	border-radius: 50%;
+	border: 1px solid rgba(31, 31, 31, 0.25);
+	width: 32px;
+	height: 32px;
+}
+
+.button.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%;
+}
+
+@media screen and (max-width: 748px) {
+	.button {
+		width: 24px;
+		height: 24px;
+	}
+	.button.active::before {
+		width: 28px;
+		height: 28px;
+	}
+}
+
+.none::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%) rotate(45deg);
+	height: 100%;
+	width: 1px;
+	background-color: rgb(219, 219, 219);
+}

package/src/features/Pickers/ColorPicker/ColorItem.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import clsx from "clsx";
+import style from "./ColorItem.module.css";
+
+type Props = {
+	color: string;
+	active?: boolean;
+	id?: string;
+	onPick: (color: string) => void;
+};
+
+export function ColorItem({
+	color,
+	active,
+	onPick,
+	id,
+}: Props): React.ReactElement {
+	return (
+		<button
+			onClick={() => onPick(color)}
+			id={id}
+			style={{
+				backgroundColor: color === "none" ? "transparent" : color,
+			}}
+			className={clsx(
+				style.button,
+				active && style.active,
+				color === "none" && style.none,
+			)}
+		/>
+	);
+}

package/src/features/Pickers/ColorPicker/ColorPicker.module.css

@@ -0,0 +1,12 @@
+.button {
+	width: 30;
+	height: 30;
+	cursor: pointer;
+	border: none;
+	background: none;
+	padding: 0;
+	margin: 0;
+	cursor:
+		url("../../Cursors/pointer.svg") 13 9,
+		auto;
+}

package/src/features/Pickers/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { ColorItem } from "./ColorItem";
+import { SquareColorItem } from "./SquareColorItem";
+
+type Props = {
+	onPick: (color: string) => void;
+	selectedColor?: string;
+	colors: string[];
+	id?: string;
+	variant?: "circle" | "square";
+};
+
+export function ColorPicker({
+	onPick,
+	selectedColor,
+	colors,
+	id = "",
+	variant = "circle",
+}: Props): React.ReactElement {
+	return (
+		<>
+			{colors.map(color =>
+				variant === "circle" ? (
+					<ColorItem
+						key={color}
+						id={id ? `${id}${color}` : ""}
+						color={color}
+						active={color === selectedColor}
+						onPick={onPick}
+					/>
+				) : (
+					<SquareColorItem
+						key={color}
+						id={id ? `${id}${color}` : ""}
+						color={color}
+						selected={color === selectedColor}
+						onPick={onPick}
+					/>
+				),
+			)}
+		</>
+	);
+}

package/src/features/Pickers/ColorPicker/SquareColorItem.module.css

@@ -0,0 +1,41 @@
+.button {
+	background: none;
+	width: 40px;
+	height: 40px;
+	border-radius: 5px;
+	display: flex;
+	padding: 7.5px;
+	align-items: center;
+	justify-content: center;
+	transition: 0.2s ease-out;
+	cursor: pointer;
+}
+
+@media (hover: hover) {
+	.button:hover {
+		background-color: rgb(233, 234, 236);
+	}
+}
+
+.button.active {
+	background-color: rgb(233, 234, 236);
+}
+
+.button span {
+	width: 25px;
+	height: 25px;
+	border: 1px solid rgba(31, 31, 31, 0.25);
+}
+
+@media screen and (max-width: 748px) {
+	.button {
+		width: 30px;
+		height: 30px;
+		padding: 5px;
+	}
+
+	.button span {
+		width: 20px;
+		height: 20px;
+	}
+}

package/src/features/Pickers/ColorPicker/SquareColorItem.tsx

@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import React from "react";
+import styles from "./SquareColorItem.module.css";
+
+type Props = {
+	color: string;
+	selected: boolean;
+	onPick: (color: string) => void;
+	id?: string;
+};
+
+export function SquareColorItem({
+	color,
+	selected,
+	onPick,
+	id,
+}: Props): React.ReactElement {
+	return (
+		<button
+			onClick={() => onPick(color)}
+			id={id}
+			className={clsx(selected && styles.active, styles.button)}
+		>
+			<span style={{ backgroundColor: color }} />
+		</button>
+	);
+}

package/src/features/Pickers/ColorPicker/index.ts

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

package/src/features/Pickers/ConnectorLineStylePicker.tsx

@@ -0,0 +1,52 @@
+import { ConnectorLineStyle } from "microboard-temp";
+import { ConnectorIcon } from "shared/ui-lib/Icon";
+import React from "react";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+type Props = {
+	onPick: (type: ConnectorLineStyle) => void;
+	selected?: string;
+};
+
+export function ConnectorLineStylePicker({
+	onPick,
+	selected,
+}: Props): React.ReactElement {
+	const handleStraightPick = (): void => {
+		onPick("straight");
+	};
+	const handleCurvedPick = (): void => {
+		onPick("curved");
+	};
+	const handleOrthogonalPick = (): void => {
+		onPick("orthogonal");
+	};
+	return (
+		<>
+			<UiButton
+				id={"connector-straight"}
+				onClick={handleStraightPick}
+				active={selected === "straight"}
+				variant="secondary"
+			>
+				<ConnectorIcon iconName="straight" />
+			</UiButton>
+			<UiButton
+				id={"connector-curved"}
+				onClick={handleCurvedPick}
+				active={selected === "curved"}
+				variant="secondary"
+			>
+				<ConnectorIcon iconName="curved" />
+			</UiButton>
+			<UiButton
+				id={"connector-orthogonal"}
+				onClick={handleOrthogonalPick}
+				active={selected === "orthogonal"}
+				variant="secondary"
+			>
+				<ConnectorIcon iconName="orthogonal" />
+			</UiButton>
+		</>
+	);
+}

package/src/features/Pickers/ConnectorPointerPicker/ConnectorPointerPicker.module.css

@@ -0,0 +1,4 @@
+.button {
+	--min-width: 52px;
+	--min-height: 36px;
+}

package/src/features/Pickers/ConnectorPointerPicker/ConnectorPointerPicker.tsx

@@ -0,0 +1,39 @@
+import {
+	ConnectorPointerStyle,
+	CONNECTOR_POINTER_TYPES,
+} from "microboard-temp";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ConnectorPointerIcon } from "shared/ui-lib/Icon";
+import { UiButton } from "shared/ui-lib/UiButton";
+import style from "./ConnectorPointerPicker.module.css";
+
+type Props = {
+	onPick: (pointer: ConnectorPointerStyle) => void;
+	selected: string;
+};
+
+export function ConnectorPointerPicker({
+	onPick,
+	selected,
+}: Props): React.ReactElement {
+	const { t } = useTranslation();
+	return (
+		<>
+			{CONNECTOR_POINTER_TYPES.map(type => (
+				<UiButton
+					id={`pointer-${type}`}
+					key={type}
+					onClick={() => {
+						onPick(type);
+					}}
+					active={selected === type}
+					variant="secondary"
+					className={style.button}
+				>
+					<ConnectorPointerIcon iconName={type} />
+				</UiButton>
+			))}
+		</>
+	);
+}

package/src/features/Pickers/ConnectorPointerPicker/index.ts

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

package/src/features/Pickers/DrawingToolPicker.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Icon } from "../../shared/ui-lib/Icon";
+import { conf, DrawingTool } from "microboard-temp";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+type Props = {
+	onPick: (type: DrawingTool) => void;
+	selected?: DrawingTool | "None";
+};
+
+export const DrawingToolPicker = ({
+	selected,
+	onPick,
+}: Props): React.ReactElement => {
+	return (
+		<>
+			{conf.DRAWING_TOOLS.map(drawing => (
+				<UiButton
+					id={`drawing-${drawing}`}
+					onClick={() => onPick(drawing)}
+					key={drawing}
+					size="md"
+					variant="secondary"
+					active={selected === drawing}
+				>
+					<Icon iconName={drawing} width={24} height={24} />
+				</UiButton>
+			))}
+		</>
+	);
+};

package/src/features/Pickers/FontSizePicker/FontSizePicker.module.css

@@ -0,0 +1,8 @@
+.button {
+	min-width: auto;
+	min-height: auto;
+	font-size: 1.6rem;
+	line-height: 2.4rem;
+	font-weight: 400;
+	padding: 6px 0;
+}

package/src/features/Pickers/FontSizePicker/FontSizePicker.tsx

@@ -0,0 +1,61 @@
+import clsx from "clsx";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import style from "./FontSizePicker.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+type Props = {
+	onPick: (size: number | "auto") => void;
+	max?: number;
+	fontSizes: number[];
+	currentFontSize: number | "auto";
+	showAuto: boolean;
+	id?: string;
+};
+
+export function FontSizePicker({
+	onPick,
+	max,
+	fontSizes,
+	currentFontSize,
+	showAuto,
+	id = "",
+}: Props): React.ReactElement {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			{showAuto && (
+				<UiButton
+					onClick={() => onPick("auto")}
+					className={clsx(
+						style.button,
+						currentFontSize === "auto" && style.active,
+					)}
+					variant="secondary"
+					rounded={"none"}
+					active={currentFontSize === "auto"}
+				>
+					{t("contextPanel.fontSize.auto")}
+				</UiButton>
+			)}
+			{fontSizes.map(size => (
+				<UiButton
+					id={id ? `${id}${size}` : ""}
+					key={`fontSize_${size}_button`}
+					onClick={() => onPick(size)}
+					className={clsx(
+						style.button,
+						size === currentFontSize && style.active,
+					)}
+					disabled={Boolean(max && size > max)}
+					variant="secondary"
+					rounded={"none"}
+					active={size === currentFontSize}
+				>
+					{size}
+				</UiButton>
+			))}
+		</>
+	);
+}

package/src/features/Pickers/FontSizePicker/index.ts

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

package/src/features/Pickers/FontStylePicker.tsx

@@ -0,0 +1,88 @@
+import { getHotkeyLabel, TextStyle } from "microboard-temp";
+import { Icon } from "shared/ui-lib/Icon";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+type Props = {
+	onPick: (style: TextStyle) => void;
+	fontStyles?: string[];
+};
+
+export function FontStylePicker({
+	onPick,
+	fontStyles,
+}: Props): React.ReactElement {
+	const { t } = useTranslation();
+
+	const handleBoldPick = (): void => {
+		onPick("bold");
+	};
+	const handleItalicsPick = (): void => {
+		onPick("italic");
+	};
+	const handleLineThroughPick = (): void => {
+		onPick("line-through");
+	};
+	const handleUnderlinePick = (): void => {
+		onPick("underline");
+	};
+
+	const isBold = fontStyles?.includes("bold");
+	const isItalic = fontStyles?.includes("italic");
+	const isLineThrough = fontStyles?.includes("line-through");
+	const isUnderline = fontStyles?.includes("underline");
+
+	return (
+		<>
+			<UiButton
+				id="ChangeFontBold"
+				tooltip={t("contextPanel.fontStyle.bold")}
+				hotkey={getHotkeyLabel("textBold")}
+				tooltipPosition="bottom"
+				active={isBold}
+				onClick={handleBoldPick}
+				variant="secondary"
+				size="sm"
+			>
+				<Icon width={24} height={24} iconName="TextBold" />
+			</UiButton>
+			<UiButton
+				id="ChangeFontItalics"
+				tooltip={t("contextPanel.fontStyle.italic")}
+				hotkey={getHotkeyLabel("textItalic")}
+				tooltipPosition="bottom"
+				active={isItalic}
+				onClick={handleItalicsPick}
+				size="sm"
+				variant="secondary"
+			>
+				<Icon width={24} height={24} iconName="TextItalic" />
+			</UiButton>
+			<UiButton
+				id="ChangeFontUnderline"
+				tooltip={t("contextPanel.fontStyle.underline")}
+				hotkey={getHotkeyLabel("textUnderline")}
+				tooltipPosition="bottom"
+				active={isUnderline}
+				onClick={handleUnderlinePick}
+				size="sm"
+				variant="secondary"
+			>
+				<Icon width={24} height={24} iconName="TextUnderline" />
+			</UiButton>
+			<UiButton
+				id="ChangeFontStrikethrough"
+				tooltip={t("contextPanel.fontStyle.strike")}
+				hotkey={getHotkeyLabel("textStrike")}
+				tooltipPosition="bottom"
+				active={isLineThrough}
+				onClick={handleLineThroughPick}
+				size="sm"
+				variant="secondary"
+			>
+				<Icon width={24} height={24} iconName="TextStrike" />
+			</UiButton>
+		</>
+	);
+}

package/src/features/Pickers/FramePicker/FramePicker.module.css

@@ -0,0 +1,11 @@
+.button {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 40px;
+	gap: 2px;
+}
+
+/* .button svg {
+	flex-grow: 1;
+} */

package/src/features/Pickers/FramePicker/FramePicker.tsx

@@ -0,0 +1,40 @@
+import type { FrameType } from "microboard-temp";
+import { FRAME_TYPES } from "microboard-temp";
+import React from "react";
+import { FrameIcon } from "shared/ui-lib/Icon";
+import style from "./FramePicker.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+type Props = {
+	onPick: (type: FrameType) => void;
+	selected: FrameType;
+	onPointerEnter?: (type: FrameType) => void;
+	onPointerLeave?: (type: FrameType) => void;
+};
+
+export function FramePicker({
+	onPick,
+	onPointerEnter,
+	onPointerLeave,
+	selected,
+}: Props): React.ReactElement {
+	return (
+		<>
+			{FRAME_TYPES.map(({ id, label }) => (
+				<UiButton
+					onClick={() => onPick(id)}
+					className={style.button}
+					variant="secondary"
+					active={id === selected}
+					onPointerEnter={() => onPointerEnter && onPointerEnter(id)}
+					onPointerLeave={() => onPointerLeave && onPointerLeave(id)}
+					key={id}
+					id={`frame-picker-${id}`}
+				>
+					<FrameIcon iconName={id} />
+					<span>{label}</span>
+				</UiButton>
+			))}
+		</>
+	);
+}

package/src/features/Pickers/FramePicker/index.ts

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

package/src/features/Pickers/HorizontalAlignmentPicker.tsx

@@ -0,0 +1,49 @@
+import { HorisontalAlignment } from "microboard-temp";
+import React from "react";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Icon } from "shared/ui-lib/Icon";
+
+type Props = {
+	onPick: (alignment: HorisontalAlignment) => void;
+	alignment: "center" | "left" | "right";
+};
+
+export function HorizontalAlignmentPicker({
+	alignment,
+	onPick,
+}: Props): React.ReactElement {
+	const handlePick = (alignment: HorisontalAlignment) => () => {
+		onPick(alignment);
+	};
+	return (
+		<>
+			<UiButton
+				id={"ChangeHorisontalAlignmentLeft"}
+				onClick={handlePick("left")}
+				active={alignment === "left"}
+				variant="secondary"
+				size="sm"
+			>
+				<Icon iconName="TextAlignLeft" width={24} height={24} />
+			</UiButton>
+			<UiButton
+				id={"ChangeHorisontalAlignmentCenter"}
+				onClick={handlePick("center")}
+				active={alignment === "center"}
+				variant="secondary"
+				size="sm"
+			>
+				<Icon iconName="TextAlignCenter" width={24} height={24} />
+			</UiButton>
+			<UiButton
+				id={"ChangeHorisontalAlignmentRight"}
+				onClick={handlePick("right")}
+				active={alignment === "right"}
+				variant="secondary"
+				size="sm"
+			>
+				<Icon iconName="TextAlignRight" width={24} height={24} />
+			</UiButton>
+		</>
+	);
+}