microboard-ui-temp 0.0.3

package/src/features/ShareModal/SharePanel.tsx

@@ -0,0 +1,258 @@
+import React, { useState, forwardRef, ForwardedRef } from "react";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import styles from "./SharePanel.module.css";
+import { useTranslation } from "react-i18next";
+import { UserAvatar } from "features/UserPanel/UserAvatar/UserAvatar";
+import { SearchInput } from "features/ShareModal/SearchInput";
+import { GrantedUser } from "shared/apiV2/boards/types";
+import { usersApi } from "shared/api";
+import { useAccount } from "App/useAccount";
+import { UiButton } from "shared/ui-lib/UiButton/UiButton";
+import clsx from "clsx";
+import shareModalStyles from "./ShareModal.module.css";
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import { UiSelector, Option } from "shared/ui-lib/UiSelector";
+import { UserAccessType } from "shared/apiV2/boards";
+import i18next from "i18next";
+
+const MODE_SELECTOR_OPTIONS: Option[] = [
+	{
+		label: i18next.t("sharing.accessOptions.edit"),
+		value: "edit",
+		icon: <Icon width={20} height={20} iconName="drawingPen" />,
+	},
+	{
+		label: i18next.t("sharing.accessOptions.view"),
+		value: "view",
+		icon: <Icon width={20} height={20} iconName="canView" />,
+	},
+];
+
+interface Props {
+	boardName?: string;
+	grantedUsers: GrantedUser[];
+	onInput: (value: string) => void;
+	searchOptions: usersApi.User[];
+	userEmails2: string[];
+	userEmails: string[];
+	setUserEmails: (userEmails: string[]) => void;
+	setUserEmails2: (userEmails2: string[]) => void;
+	usersMode: UserAccessType;
+	usersMode2: UserAccessType;
+	setUsersMode: (newUsers: UserAccessType) => void;
+	setUsersMode2: (newUsers: UserAccessType) => void;
+	handleAddUser: (
+		setUserEmails: (val: string[]) => void,
+	) => (values: string[], currValue: string) => void;
+	isLoading: boolean;
+	onSubmit: () => Promise<void>;
+	toggleIsOpen: () => void;
+}
+
+export const SharePanel = forwardRef(
+	(
+		{
+			boardName,
+			userEmails2,
+			userEmails,
+			setUserEmails,
+			setUserEmails2,
+			handleAddUser,
+			onInput,
+			searchOptions,
+			isLoading,
+			grantedUsers,
+			usersMode,
+			usersMode2,
+			setUsersMode2,
+			setUsersMode,
+			onSubmit,
+			toggleIsOpen,
+		}: Props,
+		ref: ForwardedRef<HTMLDivElement>,
+	) => {
+		const { t } = useTranslation();
+		const account = useAccount();
+		const [isSecondInputVisible, setIsSecondInputVisible] = useState(false);
+
+		const handleSecondInputToggle = (event: React.MouseEvent) => {
+			event.stopPropagation();
+			setIsSecondInputVisible(!isSecondInputVisible);
+		};
+
+		return (
+			<div className={styles.blackout}>
+				<UiPanel ref={ref} className={styles.panel} vertical>
+					<UiButton
+						variant="secondary"
+						className={clsx(styles.closeBtn)}
+						onClick={toggleIsOpen}
+					>
+						<Icon width={28} height={28} iconName="Close" />
+					</UiButton>
+					<div className={styles.wrapper}>
+						<h1 className={styles.heading}>
+							{t("sharing.sharePanel.access")} - {boardName}
+						</h1>
+						<div
+							className={clsx(
+								shareModalStyles.selectors,
+								shareModalStyles.searchInputWrapper,
+								userEmails.length > 0 &&
+									shareModalStyles.modeVisibleShort,
+							)}
+						>
+							<div>
+								<SearchInput
+									excludeValues={grantedUsers.map(
+										({ email }) => email,
+									)}
+									isLoading={isLoading}
+									addedEmails={userEmails}
+									onValuesChange={handleAddUser(
+										setUserEmails,
+									)}
+									onInput={onInput}
+									options={searchOptions
+										.filter(
+											user =>
+												user.id !== account.info?.id &&
+												!grantedUsers.find(
+													granted =>
+														granted.id === user.id,
+												) &&
+												!userEmails2.find(
+													added =>
+														added === user.email,
+												),
+										)
+										.map(user => ({
+											value: user.email || "",
+											label: user.email || "",
+											icon: (
+												<UserAvatar
+													width={20}
+													height={20}
+													src={user.avatar}
+												/>
+											),
+										}))}
+									placeholder={t("sharing.addUsers")}
+								/>
+							</div>
+							<div className={shareModalStyles.selector}>
+								<UiSelector
+									value={usersMode}
+									options={MODE_SELECTOR_OPTIONS}
+									iconColor="rgba(105, 107, 118, 1)"
+									onChange={val => {
+										setUsersMode(val as UserAccessType);
+									}}
+								/>
+							</div>
+						</div>
+
+						{isSecondInputVisible && (
+							<div
+								className={clsx(
+									shareModalStyles.selectors,
+									shareModalStyles.searchInputWrapper,
+									userEmails2.length > 0 &&
+										shareModalStyles.modeVisibleShort,
+								)}
+							>
+								<div>
+									<SearchInput
+										excludeValues={grantedUsers.map(
+											({ email }) => email,
+										)}
+										isLoading={isLoading}
+										onValuesChange={handleAddUser(
+											setUserEmails2,
+										)}
+										onInput={onInput}
+										options={searchOptions
+											.filter(
+												user =>
+													user.id !==
+														account.info?.id &&
+													!grantedUsers.find(
+														granted =>
+															granted.id ===
+															user.id,
+													) &&
+													!userEmails.find(
+														added =>
+															added ===
+															user.email,
+													),
+											)
+											.map(user => ({
+												value: user.email || "",
+												label: user.email || "",
+												icon: (
+													<UserAvatar
+														width={20}
+														height={20}
+														src={user.avatar}
+													/>
+												),
+											}))}
+										placeholder={t("sharing.addUsers")}
+									/>
+								</div>
+								<div className={shareModalStyles.selector}>
+									<UiSelector
+										options={MODE_SELECTOR_OPTIONS}
+										value={usersMode2}
+										iconColor="rgba(105, 107, 118, 1)"
+										onChange={val => {
+											setUsersMode2(
+												val as UserAccessType,
+											);
+										}}
+									/>
+								</div>
+							</div>
+						)}
+
+						{!isSecondInputVisible && userEmails.length > 0 && (
+							<button
+								className={shareModalStyles.secondInputBtn}
+								onClick={handleSecondInputToggle}
+							>
+								<Icon iconName="Plus" width={20} height={20} />{" "}
+								{t("sharing.addAccessLevel")}
+							</button>
+						)}
+
+						<div className={styles.btns}>
+							<UiButton
+								variant="ghost"
+								onClick={evt => {
+									evt.stopPropagation();
+									toggleIsOpen();
+								}}
+								className={styles.btn}
+								size="lg"
+							>
+								{t("sharing.sharePanel.cancel")}
+							</UiButton>
+							<UiButton
+								onClick={() => {
+									onSubmit().then(toggleIsOpen);
+								}}
+								disabled={isLoading}
+								className={clsx(styles.btn)}
+								variant="primary"
+								size="lg"
+							>
+								{t("sharing.sharePanel.openAccess")}
+							</UiButton>
+						</div>
+					</div>
+				</UiPanel>
+			</div>
+		);
+	},
+);

package/src/features/ShareModal/index.ts

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

package/src/features/ShareSnapshotModal/ShareSnapshotModal.module.css

@@ -0,0 +1,286 @@
+.heading {
+	font-size: 30px;
+	font-weight: 600;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	max-width: 100%;
+}
+
+.description {
+	font-family: "Manrope", sans-serif;
+	font-weight: 400;
+	font-size: 14px;
+	color: rgba(13, 17, 38, 0.4);
+}
+
+.notAuth {
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.modalContainer {
+	max-width: 800px;
+	overflow: hidden;
+	padding: 0 !important;
+	border-radius: 24px;
+}
+
+@media screen and (min-width: 960px) {
+	.modalContainer {
+		min-width: 700px;
+	}
+}
+
+.wrapper {
+	width: 100%;
+	padding: 32px 64px;
+}
+
+.settings {
+	padding-top: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.searchInputWrapper {
+	padding-top: 12px;
+}
+
+.settingsHeading {
+	font-size: 14px;
+	font-weight: 700;
+}
+
+.publicMsg {
+	font-size: 12px;
+}
+
+.selectors {
+	display: grid;
+	grid-template-columns: 1fr 0px;
+	padding-bottom: 8px;
+	transition: grid-template-columns 0.3s ease;
+	align-items: stretch;
+}
+
+.selector {
+	overflow: hidden;
+}
+
+.grantedUserSelector {
+	min-width: 190px;
+}
+
+.secondInputBtn {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	cursor: pointer;
+	border: none;
+	background: none;
+	margin-top: 4px;
+	margin-bottom: 8px;
+	font-size: 16px;
+	color: #4778f5;
+	font-weight: 500;
+}
+
+.selectors.modeVisible {
+	grid-template-columns: 1fr 230px;
+	gap: 16px;
+}
+
+.selectors.modeVisibleShort {
+	grid-template-columns: 1fr 190px;
+	gap: 16px;
+}
+
+.btns {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	padding-top: 24px;
+	padding-bottom: 8px;
+	gap: 16px;
+}
+
+.btns .btn {
+	width: auto;
+	padding: 10px 12px;
+}
+
+.grantedUser {
+	display: flex;
+	justify-content: space-between;
+	transition: 0.3s;
+	gap: 16px;
+}
+
+.highlighted {
+	background-color: rgb(237, 253, 244);
+}
+
+.userInfo {
+	display: flex;
+	gap: 12px;
+}
+
+.userInfoText {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: 2px;
+}
+
+.avatar {
+	width: 40px;
+	height: 40px;
+}
+
+.avatar img {
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+	object-position: center;
+}
+
+.userStatus {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.userName {
+	font-size: 14px;
+	font-weight: 400;
+	max-width: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.userEmail {
+	font-size: 14px;
+	font-weight: 400;
+	color: rgba(13, 17, 38, 0.4);
+	max-width: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.usersList {
+	padding-top: 12px;
+	padding-bottom: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	max-height: 186px;
+	overflow-y: auto;
+	padding-right: 4px;
+}
+
+.usersList::-webkit-scrollbar {
+	appearance: none;
+	width: 3px;
+}
+
+.usersList::-webkit-scrollbar-button {
+	display: none;
+}
+
+.usersList::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 2px;
+}
+
+.ownerLabel {
+	font-size: 14px;
+	font-weight: 500;
+	color: rgba(13, 17, 38, 0.4);
+}
+
+.grantedUsers {
+	padding-top: 16px;
+}
+
+.copyBtn {
+	color: rgba(20, 21, 26, 1);
+	font-weight: 500;
+}
+
+.copyIcon {
+	color: rgba(105, 107, 118, 1);
+	display: grid;
+	place-items: center;
+}
+
+.fadeEnter {
+	opacity: 0;
+	transform: translateX(-6px);
+}
+.fadeEnterActive {
+	opacity: 1;
+	transform: translateX(0px);
+	transition:
+		opacity 500ms,
+		transform 500ms;
+}
+.fadeExit {
+	opacity: 1;
+	transform: translateX(0);
+}
+.fadeExitActive {
+	opacity: 0;
+	transform: translateX(-6px);
+	transition:
+		opacity 500ms,
+		transform 500ms;
+}
+
+.skeletonAvatar {
+	border-radius: 50%;
+}
+
+.skeletonInfo {
+	width: 200px;
+	height: 14px;
+}
+
+.skeletonSelector {
+	width: 200px;
+	height: 40px;
+}
+
+.loader {
+	width: calc(100% + 24px);
+	height: 4px;
+	overflow: hidden;
+	position: relative;
+}
+
+.loader::after {
+	content: "";
+	background-color: #924fe8;
+	display: block;
+	width: 30%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: -30%;
+	animation: loading 1.5s linear infinite;
+}
+
+@keyframes loading {
+	0% {
+		left: -30%;
+	}
+	50% {
+		left: 100%;
+	}
+	100% {
+		left: 100%;
+	}
+}

package/src/features/ShareSnapshotModal/ShareSnapshotModal.tsx

@@ -0,0 +1,41 @@
+import { useBoardsList } from "App/useBoardsList";
+import { useContextMenuContext } from "features/ContextMenu";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import styles from "./ShareSnapshotModal.module.css";
+import SnapshotNameInput from "./SnapshotNameInput";
+
+export const SHARE_SNAPSHOT_MODAL_ID = Symbol("shareSnapshotModal");
+
+export function ShareSnapshotModal() {
+	const { boardId } = useContextMenuContext();
+	const boardsList = useBoardsList();
+	const { t } = useTranslation();
+
+	const boardInfo = boardsList.getBoardInfo(boardId);
+
+	return (
+		<>
+			<UiModal
+				className={styles.modalContainer}
+				modalId={SHARE_SNAPSHOT_MODAL_ID}
+			>
+				<div className={styles.wrapper}>
+					<h1 className={styles.heading}>
+						{t("export.HTMLSnapshot.HTMLSnapshotLink")}{" "}
+						{boardInfo?.title ? `- ${boardInfo?.title}` : ""}
+					</h1>
+					<div className={styles.settings}>
+						<div className={styles.description}>
+							You can edit the link by adding the board name.
+						</div>
+						<SnapshotNameInput />
+						{/* <SnapshotNameInput buttonDisabled={disabled} /> */}
+					</div>
+				</div>
+				{/* {isSubmitting && <div className={styles.loader} />} */}
+			</UiModal>
+		</>
+	);
+}

package/src/features/ShareSnapshotModal/SnapshotNameInput.module.css

@@ -0,0 +1,92 @@
+.inputWrapper {
+	border: 1px solid #dee0e3;
+	border-radius: 12px;
+	overflow: hidden;
+	width: 100%;
+}
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin-top: 8px;
+}
+
+.inputWrapper:focus-within {
+	border: 1px solid rgb(176, 140, 234);
+	box-shadow: 0px 0px 0px 2px rgba(200, 178, 255, 0.5);
+}
+
+.btns {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	padding-top: 24px;
+	padding-bottom: 8px;
+	gap: 16px;
+}
+
+.btns .btn {
+	width: auto;
+	padding: 10px 12px;
+}
+
+.nativeInput {
+	border-radius: 12px;
+	padding: 10px 5px;
+	resize: none;
+	outline: none;
+	flex-grow: 1;
+	overflow: hidden;
+	font-size: 14px;
+	font-family: Manrope, sans-serif;
+	font-weight: 400;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	line-height: 22px;
+}
+
+.nativeInput::placeholder {
+	font-size: 14px;
+	font-family: Manrope, sans-serif;
+	font-weight: 400;
+	color: rgba(13, 17, 38, 0.4);
+}
+
+.user-input {
+	width: 100%;
+	height: 100%;
+	border: none;
+	outline: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+.user-input:focus {
+	border: none;
+	outline: none;
+}
+
+.description {
+	font-family: "Manrope", sans-serif;
+	font-weight: 400;
+	font-size: 14px;
+	color: rgba(13, 17, 38, 0.4);
+}
+
+.snapshot {
+	text-decoration: underline;
+	font-weight: 600;
+	font-size: 16px;
+	cursor: pointer;
+	user-select: text;
+}
+
+.error {
+	color: red;
+}
+.success {
+	color: #26bd6c;
+}