microboard-ui-temp 0.0.3

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

@@ -0,0 +1,38 @@
+.link {
+	font-family: "Manrope", Arial;
+	font-size: 14px;
+
+	position: relative;
+	color: rgba(15, 19, 36, 0.6);
+	text-decoration: none;
+}
+
+.link:hover {
+	color: #b78af0;
+}
+
+.link::after {
+	content: "";
+	position: absolute;
+	bottom: -3px;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: rgba(10, 15, 41, 0.08);
+}
+
+.link:hover::after {
+	content: "";
+	position: absolute;
+	bottom: -3px;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: rgba(200, 178, 255, 0.5);
+}
+
+@media screen and (max-width: 640px) {
+	.link::after {
+		content: none;
+	}
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./OuterLink.module.css";
+import clsx from "clsx";
+
+interface Props
+	extends React.PropsWithChildren<
+		React.AnchorHTMLAttributes<HTMLAnchorElement>
+	> {}
+
+export const OuterLink: React.FC<Props> = ({ children, className, ...props }) => {
+	return (
+		<a {...props} className={clsx(styles.link, className)}>
+			{children}
+		</a>
+	);
+};

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

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

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

@@ -0,0 +1,16 @@
+.progress {
+	border-radius: 20px;
+	height: 4px;
+	width: 100%;
+}
+
+.progress-done {
+	background: #924fe8;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	width: 0;
+	opacity: 0;
+	transition: 1s ease 0.3s;
+}

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

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import styles from "./Progress.module.css";
+import clsx from "clsx";
+
+interface IProgressBar {
+	width: number;
+	classnames?: string;
+}
+
+export const ProgressBar = ({
+	width,
+	classnames,
+	...props
+}: IProgressBar): JSX.Element => {
+	const [style, setStyle] = useState({});
+
+	useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			const newStyle = {
+				opacity: 1,
+				width: `${width}%`,
+			};
+
+			setStyle(newStyle);
+		}, 50);
+
+		return () => clearTimeout(timeoutId);
+	});
+
+	return (
+		<div className={clsx(styles.progress, classnames)} {...props}>
+			<div className={styles.progressDone} style={style}></div>
+		</div>
+	);
+};

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

@@ -0,0 +1,91 @@
+.selectorContainer {
+	margin-bottom: 6px;
+	position: relative;
+}
+
+.label {
+	font-size: 14px;
+	color: #111827;
+}
+
+.selector {
+	padding: 10px 12px;
+	margin-top: 10px;
+	border: 1px solid #dee0e3;
+	border-radius: 8px;
+	background-color: #ffffff;
+	font-size: 14px;
+	color: #111827;
+	display: inline-flex;
+	align-items: center;
+	flex-direction: row;
+	cursor: pointer;
+	width: 100%;
+	justify-content: space-between;
+}
+
+.selectorText {
+	margin-right: 12px;
+}
+
+.selector:focus {
+	outline: none;
+	border-color: #924fe8;
+}
+
+.arrow {
+	border: solid rgba(13, 17, 38, 0.4);
+	border-width: 0 2px 2px 0;
+	margin-right: 6px;
+	display: inline-block;
+	padding: 3px;
+	transform: rotate(45deg);
+}
+
+.dropdown {
+	font-size: 14px;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	right: 0;
+	background-color: #fff;
+	border: 1px solid #dee0e3;
+	border-radius: 8px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	z-index: 10;
+	margin-top: 4px;
+	padding: 4px;
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	max-height: 260px;
+	overflow-y: auto;
+}
+
+.option {
+	padding: 8px 12px;
+	cursor: pointer;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: 8px;
+}
+
+.option:hover {
+	background-color: #f3f4f6;
+}
+
+.selected {
+	background-color: #f3f4f6;
+}
+
+.checkmark {
+	display: none;
+}
+
+.option.selected .checkmark {
+	display: inline-block;
+	margin-left: 8px;
+	color: #924fe8;
+}

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

@@ -0,0 +1,170 @@
+import { useClickOutside } from "shared/lib/useClickOutside";
+import React, {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react";
+import { Icon } from "shared/ui-lib/Icon";
+import style from "./Selector.module.css";
+import clsx from "clsx";
+
+interface SelectorProps {
+	label?: string;
+	options: { value: string; label: React.ReactNode }[];
+	customOpener?: React.ReactNode;
+	customSelectorClassName?: string;
+	containerClassName?: string;
+	multiselect?: boolean;
+	onChange?: () => void;
+}
+
+export interface SelectorHandle<T extends boolean> {
+	getSelectedOptions: () => T extends true
+		? { value: string; label: React.ReactNode }[]
+		: { value: string; label: React.ReactNode };
+	setSelectedOptions: (
+		options: {
+			value: string;
+			label: React.ReactNode;
+		}[],
+	) => void;
+}
+
+export const Selector = forwardRef<SelectorHandle<true | false>, SelectorProps>(
+	(
+		{
+			label,
+			options,
+			customOpener,
+			customSelectorClassName,
+			multiselect = false,
+			onChange,
+			containerClassName,
+		},
+		ref,
+	) => {
+		const [selectedOptions, setSelectedOptions] = useState<
+			{ value: string; label: React.ReactNode }[]
+		>([options[0]]);
+		const selectorOpenerRef = useRef<HTMLSpanElement>(null);
+		const dropdownRef = useClickOutside(() => {
+			setIsOpen(false);
+		}, [selectorOpenerRef]);
+		const [isOpen, setIsOpen] = useState(false);
+
+		useImperativeHandle(ref, () => ({
+			getSelectedOptions: () =>
+				multiselect ? selectedOptions : selectedOptions[0],
+			setSelectedOptions: (
+				options: {
+					value: string;
+					label: React.ReactNode;
+				}[],
+			) => setSelectedOptions(options),
+		}));
+
+		useEffect(() => {
+			if (onChange) {
+				onChange();
+			}
+		}, [selectedOptions]);
+
+		const selectorContainerRef = useClickOutside(() => setIsOpen(false));
+
+		const handleOptionClick = (option: {
+			value: string;
+			label: React.ReactNode;
+		}): void => {
+			if (multiselect) {
+				const isSelected = selectedOptions.find(
+					selOpt => selOpt.value === option.value,
+				);
+				if (isSelected) {
+					setSelectedOptions(
+						selectedOptions.filter(
+							selOpt => selOpt.value !== option.value,
+						),
+					);
+				} else {
+					setSelectedOptions([...selectedOptions, option]);
+				}
+			} else {
+				setSelectedOptions([option]);
+				setIsOpen(false);
+			}
+		};
+
+		return (
+			<div
+				ref={selectorContainerRef}
+				className={clsx(style.selectorContainer, containerClassName)}
+			>
+				{label && (
+					<>
+						<label className={style.label}>{label}</label>
+						<br />
+					</>
+				)}
+				{!customOpener ? (
+					<span
+						ref={selectorOpenerRef}
+						className={style.selector}
+						onClick={() => setIsOpen(!isOpen)}
+					>
+						<span className={style.selectorText}>
+							{!customSelectorClassName
+								? selectedOptions.map((option, index) => (
+										<span key={index}>
+											{option.label}
+											{index <
+												selectedOptions.length - 1 &&
+												", "}
+										</span>
+									))
+								: customSelectorClassName}
+						</span>
+						<span className={style.arrow}></span>
+					</span>
+				) : (
+					<span
+						ref={selectorOpenerRef}
+						className={style.selector}
+						onClick={() => setIsOpen(!isOpen)}
+					>
+						{customOpener}
+					</span>
+				)}
+
+				{isOpen && (
+					<div ref={dropdownRef} className={style.dropdown}>
+						{options.map(option => (
+							<div
+								key={option.value}
+								className={`${style.option} ${
+									selectedOptions.find(
+										selOpt => selOpt.value === option.value,
+									)
+										? style.selected
+										: ""
+								}`}
+								onClick={() => handleOptionClick(option)}
+							>
+								{option.label}
+								<Icon
+									className={style.checkmark}
+									iconName="checkMark"
+									width={20}
+									height={20}
+								/>
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		);
+	},
+);
+
+Selector.displayName = "Selector";

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

@@ -0,0 +1 @@
+export * from "./Selector";

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

@@ -0,0 +1,142 @@
+.container {
+	background-color: #ffffff;
+	border: 1px solid var(--border-action-normal, rgba(222, 224, 227, 1));
+	border-radius: 12px;
+	box-shadow:
+		0px 3px 10px -2px #14151a0d,
+		0px 10px 16px -3px #14151a0d;
+	padding: 16px;
+	gap: 12px;
+	display: grid;
+	grid-template-columns: 20px 1fr 20px;
+	align-items: center;
+}
+
+.headerContainer {
+	display: flex;
+	gap: 12px;
+}
+
+@media screen and (max-width: 640px) {
+	.container {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.black {
+	background-color: #000000;
+	border-radius: 0px;
+	gap: 9px;
+	transform: translate(0px, 4px);
+	padding: 12px 20px;
+
+	.title {
+		color: #fff;
+	}
+	.description {
+		color: #fff;
+	}
+
+	.content {
+		width: auto;
+	}
+}
+
+.container.black .icon {
+	visibility: hidden;
+}
+
+.container.info .icon {
+	color: rgb(71, 120, 245);
+}
+
+.container.warning .icon {
+	color: rgba(244, 142, 47, 1);
+}
+
+.container.success .icon {
+	color: rgba(38, 189, 108, 1);
+}
+
+.container.error .icon {
+	color: rgb(230, 72, 61);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	flex: 1 1 290px;
+	width: 290px;
+}
+
+.icon {
+	margin-top: 3px;
+	align-self: flex-start;
+}
+
+.closeButton {
+	--padding: 4px;
+	--radius: 0;
+	--min-width: 28px;
+	--min-height: 28px;
+	color: var(--text-base-primary);
+	align-self: flex-start;
+}
+
+.title {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+	color: var(--text-base-primary);
+}
+
+.description {
+	font-size: 14px;
+	line-height: 20px;
+	word-wrap: normal;
+	color: var(--text-base-secondary);
+}
+
+.button {
+	width: fit-content;
+	border-radius: 8px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 4px 8px;
+	background-color: rgba(20, 21, 26, 1);
+	box-shadow: 0px 1px 2px 0px rgba(20, 21, 26, 0.05);
+	cursor: pointer;
+	color: #ffffff;
+	font-family: Manrope;
+	font-weight: 500;
+	font-size: 12px;
+	line-height: 16px;
+	text-align: center;
+	margin-top: 8px;
+}
+
+.button:active {
+	border: 1px solid #b78af0;
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeOut {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}

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

@@ -0,0 +1,2 @@
+export { notify } from "./notify";
+export type { NotifyFunction } from "./notify";

package/src/shared/ui-lib/Toast/notify.tsx

@@ -0,0 +1,119 @@
+import clsx from "clsx";
+import React, { CSSProperties, ReactNode } from "react";
+import toast, { ToastPosition } from "react-hot-toast";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiButton } from "../UiButton";
+import style from "./Toast.module.css";
+import { conf } from "microboard-temp";
+import { Loader } from "shared/ui-lib/Loader/Loader.tsx";
+
+type Props = {
+	header?: ReactNode;
+	body?: ReactNode;
+	footer?: ReactNode;
+	duration?: number;
+	variant?: "success" | "error" | "info" | "warning" | "black";
+	position?: ToastPosition;
+	unclosable?: boolean;
+	inlineStyle?: CSSProperties;
+	button?: { text: string; onClick: () => void };
+	loader?: "loader" | "MediaLoader";
+};
+
+/** Triggers toast notification and returns notification id */
+export function notify({
+	header,
+	body,
+	footer,
+	duration = 4000,
+	variant = "info",
+	unclosable = false,
+	position = "top-right",
+	inlineStyle,
+	button,
+	loader,
+}: Props): string {
+	return toast.custom(
+		toastMsg => (
+			<div
+				onClick={
+					!unclosable ? () => toast.dismiss(toastMsg.id) : undefined
+				}
+				className={clsx(style.container, style[variant])}
+				style={{
+					opacity: toastMsg.visible ? 1 : 0,
+					animation: `${
+						toastMsg.visible ? style.fadeIn : style.fadeOut
+					} 0.3s ease`,
+				}}
+			>
+				{loader ? (
+					<Loader width={20} height={20} variant={loader} />
+				) : (
+					<Icon
+						className={style.icon}
+						iconName="Notification"
+						width={20}
+						height={20}
+					/>
+				)}
+				<div className={style.content}>
+					{header && typeof header === "string" ? (
+						<h3 className={style.title}>{header}</h3>
+					) : (
+						header
+					)}
+					{body && typeof body === "string" ? (
+						<p className={style.description}>
+							{body.split("\n").map((line, index) => (
+								<span key={index}>
+									{line}
+									{index < body.split("\n").length - 1 && (
+										<br />
+									)}
+								</span>
+							))}
+						</p>
+					) : (
+						body
+					)}
+					{footer}
+					{button && (
+						<button
+							className={style.button}
+							onClick={button.onClick}
+						>
+							{button.text}
+						</button>
+					)}
+				</div>
+				{!unclosable && (
+					<UiButton
+						size="sm"
+						rounded="none"
+						className={style.closeButton}
+						onClick={() => toast.dismiss(toastMsg.id)}
+						variant="secondary"
+					>
+						<Icon iconName="Close" width={20} height={20} />
+					</UiButton>
+				)}
+			</div>
+		),
+		{ duration, position, style: inlineStyle },
+	);
+}
+
+conf.notify = notify;
+conf.disMissNotification = toast.dismiss;
+
+export interface NotifyFunction {
+	(options: {
+		header: string;
+		body: string;
+		variant?: "info" | "success" | "warning" | "error";
+		duration?: number;
+		button?: { text: string; onClick: () => void };
+		loader?: "loader" | "MediaLoader";
+	}): string; // Returns notification id
+}

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

@@ -0,0 +1,22 @@
+.toggle {
+	width: 28px;
+	height: 16px;
+	background: #babdc5;
+	border-radius: 8px;
+	display: flex;
+	padding: 0 2px;
+	align-items: center;
+}
+
+.toggle > span {
+	display: block;
+	background: #ffffff;
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+}
+
+.toggle.active {
+	justify-content: end;
+	background: #924fe8;
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./ToggleMark.module.css";
+
+interface Props {
+	isActive: boolean;
+}
+
+export const ToggleMark = ({ isActive }: Props): JSX.Element => {
+	return (
+		<div className={clsx(styles.toggle, isActive && styles.active)}>
+			<span></span>
+		</div>
+	);
+};