microboard-ui-temp 0.0.3

package/src/shared/ui-lib/Input/EyeClose.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface Props extends React.SVGProps<SVGSVGElement> {}
+
+export const EyeClose: React.FC<Props> = ({ ...props }) => {
+	return (
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path
+				d="M14.9019 16.0805C13.4362 17.0102 11.7358 17.5025 10.0002 17.4997C5.50687 17.4997 1.76854 14.2664 0.984375 9.99969C1.34273 8.05862 2.31907 6.28544 3.76771 4.94469L1.16021 2.33969L2.33937 1.16052L18.8385 17.6605L17.6594 18.8389L14.901 16.0805H14.9019ZM4.94604 6.12469C3.81355 7.15435 3.02464 8.50701 2.68604 9.99969C2.94629 11.1384 3.46876 12.2006 4.21188 13.1019C4.95499 14.0031 5.89823 14.7183 6.9665 15.1908C8.03477 15.6632 9.19858 15.8797 10.3653 15.8231C11.532 15.7665 12.6694 15.4383 13.6869 14.8647L11.9969 13.1747C11.2774 13.6279 10.4254 13.8231 9.58041 13.7284C8.73544 13.6337 7.94774 13.2546 7.34652 12.6534C6.74529 12.0522 6.36623 11.2645 6.27151 10.4195C6.17679 9.57452 6.37203 8.72245 6.82521 8.00302L4.94604 6.12469ZM10.7619 11.9397L8.06021 9.23802C7.91193 9.61547 7.87703 10.028 7.9598 10.425C8.04256 10.822 8.23939 11.1862 8.52614 11.4729C8.81289 11.7597 9.1771 11.9565 9.57409 12.0393C9.97108 12.122 10.3836 12.0871 10.761 11.9389L10.7619 11.9397ZM17.3394 13.8264L16.1469 12.6347C16.7039 11.8408 17.1005 10.9457 17.3144 9.99969C17.0879 9.00779 16.6621 8.07231 16.0628 7.2501C15.4636 6.42789 14.7034 5.73613 13.8284 5.21686C12.9535 4.69759 11.9821 4.36166 10.9733 4.22949C9.96452 4.09732 8.93938 4.17167 7.96021 4.44802L6.64521 3.13302C7.68437 2.72469 8.81687 2.49969 10.0002 2.49969C14.4935 2.49969 18.2319 5.73302 19.016 9.99969C18.7607 11.3878 18.1868 12.6977 17.3394 13.8264ZM9.76937 6.25636C10.2998 6.22358 10.8311 6.30391 11.3282 6.49204C11.8252 6.68016 12.2765 6.97178 12.6523 7.34756C13.0281 7.72335 13.3197 8.17471 13.5079 8.67174C13.696 9.16876 13.7763 9.7001 13.7435 10.2305L9.76854 6.25636H9.76937Z"
+				fill="#0D1126"
+				fillOpacity="0.4"
+			/>
+		</svg>
+	);
+};

package/src/shared/ui-lib/Input/EyeOpen.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface Props extends React.SVGProps<SVGSVGElement> {
+	isCurrentColor?: boolean;
+}
+
+export const EyeOpen: React.FC<Props> = ({ isCurrentColor, ...props }) => {
+	return (
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path
+				d="M10.0002 2.5C14.4935 2.5 18.2319 5.73333 19.016 10C18.2327 14.2667 14.4935 17.5 10.0002 17.5C5.50687 17.5 1.76854 14.2667 0.984375 10C1.76771 5.73333 5.50687 2.5 10.0002 2.5ZM10.0002 15.8333C11.6998 15.833 13.3489 15.2557 14.6776 14.196C16.0063 13.1363 16.936 11.6569 17.3144 10C16.9346 8.34442 16.0043 6.86667 14.6757 5.80835C13.3471 4.75004 11.6988 4.17377 10.0002 4.17377C8.30162 4.17377 6.65328 4.75004 5.32469 5.80835C3.99609 6.86667 3.06585 8.34442 2.68604 10C3.06446 11.6569 3.9941 13.1363 5.32283 14.196C6.65155 15.2557 8.30065 15.833 10.0002 15.8333ZM10.0002 13.75C9.00565 13.75 8.05182 13.3549 7.34856 12.6516C6.6453 11.9484 6.25021 10.9946 6.25021 10C6.25021 9.00544 6.6453 8.05161 7.34856 7.34835C8.05182 6.64509 9.00565 6.25 10.0002 6.25C10.9948 6.25 11.9486 6.64509 12.6519 7.34835C13.3551 8.05161 13.7502 9.00544 13.7502 10C13.7502 10.9946 13.3551 11.9484 12.6519 12.6516C11.9486 13.3549 10.9948 13.75 10.0002 13.75ZM10.0002 12.0833C10.5527 12.0833 11.0826 11.8638 11.4733 11.4731C11.864 11.0824 12.0835 10.5525 12.0835 10C12.0835 9.44747 11.864 8.91756 11.4733 8.52686C11.0826 8.13616 10.5527 7.91667 10.0002 7.91667C9.44767 7.91667 8.91777 8.13616 8.52707 8.52686C8.13637 8.91756 7.91687 9.44747 7.91687 10C7.91687 10.5525 8.13637 11.0824 8.52707 11.4731C8.91777 11.8638 9.44767 12.0833 10.0002 12.0833Z"
+				fill={isCurrentColor ? "currentColor" : "rgba(13, 17, 38, 0.4)"}
+			/>
+		</svg>
+	);
+};

package/src/shared/ui-lib/Input/Input.css

@@ -0,0 +1,130 @@
+.InputWrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	font-family: "Manrope", Arial;
+	font-size: 14px;
+	font-weight: 400;
+
+	width: 100%;
+}
+
+.InputTabWrapper {
+	display: flex;
+	width: 100%;
+}
+
+.InputWrapper .Input {
+	outline: none;
+}
+
+/* .InputWrapper .InputLabel {
+} */
+
+.InputWrapper .Text {
+	min-height: 20px;
+}
+
+.InputWrapper .InputHelperText {
+	font-size: 14px;
+	color: rgba(15, 19, 36, 0.6);
+}
+
+.InputWrapper .InputErrorText {
+	font-size: 14px;
+	color: #e6483d;
+}
+
+.InputWrapper .InputSuccessText {
+	font-size: 14px;
+	color: rgba(38, 189, 108, 1);
+}
+
+.InputContainer {
+	display: flex;
+	border: 1px solid #dee0e3;
+	width: 100%;
+
+	padding: 10px 12px;
+	border-radius: 12px;
+
+	box-shadow: 0 1px 2px rgba(20, 21, 26, 0.05);
+}
+
+.InputContainer input {
+	font-family: "Manrope", Arial;
+	outline: none;
+	font-size: 14px;
+
+	width: 100%;
+}
+
+.InputContainer.InputSuccess {
+	border: 1px solid rgba(38, 189, 108, 1);
+	outline: none;
+}
+
+.InputContainer:focus-within:not(.InputSuccess) {
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+	border: 1px solid #b78af0;
+}
+
+.InputContainer input::placeholder {
+	font-family: "Manrope", Arial;
+}
+
+.InputContainer input:focus:not(.InputSuccess) {
+	border-color: #b78af0;
+}
+
+.InputContainer.InputError {
+	outline: none;
+	border: 1px solid #f7c3c0;
+}
+
+.InputContainer.InputError:focus-within {
+	outline: 1px solid rgba(255, 178, 178, 0.6);
+	border: 1px solid #f7c3c0;
+}
+
+.InputPrefix {
+	width: 20px;
+	height: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	margin-right: 8px;
+}
+
+.InputPostfix {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.InputWrapper .Eye {
+	cursor: pointer;
+	width: 20px;
+	height: 20px;
+}
+
+.textarea {
+	font-family: "Manrope", Arial;
+	outline: none;
+	font-size: 14px;
+	width: 100%;
+	resize: none;
+	overflow: hidden;
+	height: 20px;
+}
+
+.InputLabel.Disabled {
+	color: rgba(10, 15, 41, 0.25);
+}
+
+.Input:disabled,
+.Input:disabled::placeholder {
+	color: rgba(10, 15, 41, 0.25);
+}

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

@@ -0,0 +1,205 @@
+import clsx from "clsx";
+import React, {
+	useEffect,
+	useRef,
+	useState,
+	type KeyboardEventHandler,
+	type MouseEventHandler,
+} from "react";
+import { EyeClose } from "./EyeClose";
+import { EyeOpen } from "./EyeOpen";
+import "./Input.css";
+
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+	id: string;
+	placeholder?: string;
+	label?: string;
+	helperText?: string;
+	successText?: string;
+	errorText?: string;
+	isSuccess?: boolean;
+	tab?: string;
+	postTab?: string;
+	prefixIcon?: React.ReactNode;
+	iconColor?: string;
+	postfixButton?: React.ReactNode;
+	postfix?: string;
+	keyhint?: string;
+	password?: boolean;
+	hasError?: boolean;
+	multiline?: boolean;
+	inputContainerClassName?: string;
+	shouldFocus?: boolean;
+	shouldSelect?: boolean;
+}
+
+export const Input: React.FC<Props> = ({
+	id,
+	prefixIcon,
+	label,
+	tab,
+	keyhint,
+	errorText,
+	helperText,
+	password,
+	type,
+	isSuccess,
+	hasError,
+	iconColor,
+	postfixButton,
+	multiline = false,
+	inputContainerClassName,
+	shouldFocus,
+	successText,
+	shouldSelect,
+	disabled,
+	...props
+}) => {
+	const [inputType, setInputType] = useState<string>(() => {
+		if (password) {
+			return "password";
+		}
+		return type || "text";
+	});
+	const inputRef = useRef<HTMLInputElement>(null);
+	const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+	const handleInput = (): void => {
+		if (
+			textareaRef.current &&
+			textareaRef.current.textLength >=
+				Number(textareaRef.current.style.width)
+		) {
+			textareaRef.current.style.height = "auto";
+			textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+		}
+	};
+
+	useEffect(() => {
+		if (multiline) {
+			handleInput();
+		}
+	}, [textareaRef.current?.textLength === 0]);
+
+	useEffect(() => {
+		const textarea = textareaRef.current;
+		const input = inputRef.current;
+		if (shouldFocus) {
+			if (input) {
+				input.focus();
+			} else if (textarea) {
+				textarea.focus();
+			}
+		}
+		if (shouldSelect) {
+			if (input) {
+				input.select();
+			} else if (textarea) {
+				textarea.select();
+			}
+		}
+	}, []);
+
+	const togglePassword: MouseEventHandler = ev => {
+		ev.stopPropagation();
+		ev.preventDefault();
+		setInputType(inputType === "text" ? "password" : "text");
+	};
+	const stopPropagation =
+		(cb?: KeyboardEventHandler): KeyboardEventHandler =>
+		ev => {
+			ev.stopPropagation();
+			cb?.(ev);
+		};
+
+	return (
+		<div className="InputWrapper">
+			{label && (
+				<label
+					htmlFor={id}
+					className={clsx("InputLabel", disabled && "Disabled")}
+				>
+					{label}
+				</label>
+			)}
+			<div className="InputTabWrapper">
+				{tab && <span className="InputTab">{tab}</span>}
+				<div
+					className={clsx(
+						"InputContainer",
+						hasError && "InputError",
+						isSuccess && "InputSuccess",
+						inputContainerClassName,
+					)}
+				>
+					{prefixIcon && (
+						<span
+							style={{ color: iconColor }}
+							className="InputPrefix"
+						>
+							{prefixIcon}
+						</span>
+					)}
+					{multiline ? (
+						<textarea
+							ref={textareaRef}
+							className="textarea"
+							disabled={disabled}
+							id={id}
+							rows={1}
+							{...props}
+							onInput={() => {
+								handleInput();
+								if (props.onInput) {
+									props.onInput();
+								}
+							}}
+						/>
+					) : (
+						<input
+							ref={inputRef}
+							onPaste={event => event.stopPropagation()}
+							onCopy={event => event.stopPropagation()}
+							id={id}
+							type={inputType}
+							className="Input"
+							disabled={disabled}
+							onKeyDown={stopPropagation(props.onKeyDown)}
+							onKeyUp={stopPropagation(props.onKeyUp)}
+							onKeyPress={stopPropagation(props.onKeyPress)}
+							{...props}
+						/>
+					)}
+					{password && inputType === "text" && (
+						<div className="Eye">
+							<EyeClose onClick={togglePassword} />
+						</div>
+					)}
+					{password && inputType === "password" && (
+						<div className="Eye">
+							<EyeOpen onClick={togglePassword} />
+						</div>
+					)}
+					{postfixButton && (
+						<span className="InputPostfix">{postfixButton}</span>
+					)}
+					{keyhint && <div className="InputKeyHint">{keyhint}</div>}
+				</div>
+				<span className="InputPostTab">{props.postTab}</span>
+			</div>
+			{(errorText || helperText || successText) && (
+				<div className="Text">
+					{errorText && (
+						<span className="InputErrorText">{errorText}</span>
+					)}
+					{helperText && !errorText && (
+						<span className="InputHelperText">{helperText}</span>
+					)}
+					{successText && (
+						<span className="InputSuccessText">{successText}</span>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};

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

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

package/src/shared/ui-lib/Link/Link.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/Link/Link.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./Link.module.css";
+import { Link as RRDLink } from "react-router-dom";
+import clsx from "clsx";
+
+interface Props
+	extends React.PropsWithChildren<
+		React.AnchorHTMLAttributes<HTMLAnchorElement>
+	> {
+	to: string;
+}
+
+export const Link: React.FC<Props> = ({ children, className, ...props }) => {
+	return (
+		<RRDLink {...props} className={clsx(styles.link, className)}>
+			{children}
+		</RRDLink>
+	);
+};

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

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

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

@@ -0,0 +1,9 @@
+.loader {
+	animation: loaderAnimation 1s infinite steps(12);
+}
+
+@keyframes loaderAnimation {
+	100% {
+		transform: rotate(1turn);
+	}
+}

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

@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import styles from "./Loader.module.css";
+import React from "react";
+import { Icon } from "shared/ui-lib/Icon";
+
+interface LoaderProps {
+	className?: string;
+	width?: number;
+	height?: number;
+	variant?: "loader" | "MediaLoader";
+}
+
+export const Loader: React.FC<LoaderProps> = ({
+	variant = "loader",
+	className,
+	width = 32,
+	height = 32,
+}: LoaderProps) => {
+	return (
+		<Icon
+			iconName={variant}
+			width={width}
+			height={height}
+			className={clsx(styles.loader, className)}
+		/>
+	);
+};

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

@@ -0,0 +1,26 @@
+.message {
+	position: absolute;
+	left: 0;
+	right: 0;
+	padding: 9px 20px;
+	background-color: #000000;
+	color: #ffffff;
+	margin: 0 auto;
+	width: max-content;
+	visibility: hidden;
+	opacity: 0;
+	transition: opacity 0.45s ease-out, visibility 0.45s ease-out;
+}
+
+.open {
+	visibility: visible;
+	opacity: 1;
+}
+
+.bottom {
+	bottom: 12px;
+}
+
+.top {
+	top: 12px;
+}

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

@@ -0,0 +1,37 @@
+import React, { ReactNode } from "react";
+import styles from "./Message.module.css";
+import clsx from "clsx";
+
+export enum MessagePosition {
+	BOTTOM = "bottom",
+	TOP = "top",
+}
+
+interface MessageProps {
+	className?: string;
+	position?: MessagePosition;
+	children: ReactNode;
+	isOpen: boolean;
+}
+
+export const Message: React.FC<MessageProps> = (props: MessageProps) => {
+	const {
+		className,
+		position = MessagePosition.BOTTOM,
+		children,
+		isOpen,
+	} = props;
+
+	return (
+		<div
+			className={clsx(
+				styles.message,
+				styles[position],
+				isOpen && styles.open,
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
+};

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

@@ -0,0 +1,58 @@
+.notification {
+	position: absolute;
+	z-index: 5;
+	background: white;
+	padding: 16px 16px 16px 48px;
+	border-radius: 12px;
+	border: 1px solid #dee0e3;
+	/* box-shadow: 0 4px 4px #00000040; */
+	box-shadow:
+		0 10px 10px -3px #14151a14,
+		0 3px 6px -2px #14151a0d;
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity 0.2s ease-out,
+		visibility 0.2s ease-out;
+}
+
+.top {
+	right: 10px;
+	top: 70px;
+}
+
+.bottom {
+	right: 12px;
+	bottom: 78px;
+}
+
+.open {
+	visibility: visible;
+	opacity: 1;
+}
+
+.with-cross {
+	padding: 16px 48px;
+}
+
+.notification-loader {
+	width: 20px;
+	height: 20px;
+}
+
+.cross {
+	position: absolute;
+	top: 16px;
+	right: 16px;
+	padding: 4px;
+	cursor: pointer;
+	color: #696b76;
+	width: 20px;
+	height: 20px;
+}
+
+.notification-icon {
+	position: absolute;
+	top: 16px;
+	left: 16px;
+}

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

@@ -0,0 +1,75 @@
+import React, { ReactNode } from "react";
+import styles from "./Notification.module.css";
+import clsx from "clsx";
+import { Icon } from "shared/ui-lib/Icon";
+import { createPortal } from "react-dom";
+
+export enum InfoColor {
+	error = "#E6483D",
+	success = "#26BD6C",
+	warn = "#F48E2F",
+	info = "#4778F5",
+}
+
+interface NotificationProps {
+	className?: string;
+	children: ReactNode;
+	isOpen: boolean;
+	cross?: boolean;
+	setIsOpen: (isOpen: unknown) => void;
+	infoIcon?: boolean;
+	infoColor?: InfoColor;
+	position?: "top" | "bottom";
+}
+
+export const Notification: React.FC<NotificationProps> = (
+	props: NotificationProps,
+) => {
+	const {
+		className,
+		children,
+		isOpen,
+		setIsOpen,
+		cross,
+		infoIcon,
+		infoColor = InfoColor.error,
+		position = "top",
+		...rest
+	} = props;
+
+	return isOpen
+		? createPortal(
+				<div
+					className={clsx(
+						styles.notification,
+						{ [styles.open]: isOpen, [styles.withCross]: cross },
+						styles[position],
+						[className],
+					)}
+					{...rest}
+				>
+					{infoIcon && (
+						<Icon
+							iconName={"Notification"}
+							className={styles.notificationIcon}
+							width={20}
+							height={20}
+							style={{ color: infoColor }}
+						/>
+					)}
+					{cross && (
+						<div onClick={setIsOpen}>
+							<Icon
+								iconName={"modalCross"}
+								className={styles.cross}
+								width={11}
+								height={11}
+							/>
+						</div>
+					)}
+					{children}
+				</div>,
+				window.document.body,
+			)
+		: null;
+};

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

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