microboard-ui-temp 0.0.3

package/src/features/Templates/SelectTemplateModal/CategoriesMenu/CategoriesMenu.module.css

@@ -0,0 +1,48 @@
+.navigation {
+	margin-top: 24px;
+	padding-top: 8px;
+	width: 100%;
+}
+
+.categoryName {
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 16px;
+	color: rgba(15, 19, 36, 0.6);
+}
+
+.categoryList {
+	margin-top: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.categoryItem {
+	display: flex;
+	align-items: center;
+	height: 36px;
+	border-radius: 10px;
+	column-gap: 8px;
+	padding-left: 8px;
+	transform: translateX(-8px);
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+	letter-spacing: -0.005em;
+	cursor: pointer;
+}
+
+.categoryItem:hover {
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.activeCategoryItem {
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+@media (max-width: 768px) {
+	.navigation {
+		margin-top: 0;
+	}
+}

package/src/features/Templates/SelectTemplateModal/CategoriesMenu/CategoriesMenu.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import styles from "./CategoriesMenu.module.css";
+import clsx from "clsx";
+import { Icon } from "../../../../shared/ui-lib/Icon";
+import { IconId } from "../../../../shared/ui-lib/Icon/Icon";
+import { TemplateCategory } from "microboard-temp";
+import { useTranslation } from "react-i18next";
+
+interface CategoriesMenuProps {
+	setSelectedCategory: (item: TemplateCategory) => void;
+	selectedCategory: TemplateCategory;
+}
+
+const USE_CASE_CATEGORIES: { iconName: IconId; value: TemplateCategory }[] = [
+	{ iconName: "AllTemplates", value: "All templates" },
+	{ iconName: "ResearchAnalysis", value: "Research & Analysis" },
+	{ iconName: "Diagramming", value: "Diagramming" },
+	{ iconName: "MeetingWorkshop", value: "Meeting & Workshop" },
+	{ iconName: "StrategyPlanning", value: "Strategy & Planning" },
+	{ iconName: "Brainstorming", value: "Brainstorming" },
+	{ iconName: "AgileWorkflow", value: "Agile Workflow" },
+	{ iconName: "IcebreakerGame", value: "Icebreaker & Game" },
+	{ iconName: "Education", value: "Education" },
+];
+
+export const CategoriesMenu = ({
+	setSelectedCategory,
+	selectedCategory,
+}: CategoriesMenuProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<nav className={styles.navigation}>
+			<ul className={styles.categoryList}>
+				{USE_CASE_CATEGORIES.map(item => {
+					return (
+						<li
+							onClick={() => setSelectedCategory(item.value)}
+							key={item.value}
+							className={clsx(
+								styles.categoryItem,
+								selectedCategory === item.value &&
+									styles.activeCategoryItem,
+							)}
+						>
+							<Icon
+								width={20}
+								height={20}
+								iconName={item.iconName}
+							/>
+							<p>
+								{t(
+									`modalTemplate.category.useCaseItems.${item.value}`,
+								)}
+							</p>
+						</li>
+					);
+				})}
+			</ul>
+		</nav>
+	);
+};

package/src/features/Templates/SelectTemplateModal/LanguagesDropdown/LanguagesDropdown.module.css

@@ -0,0 +1,61 @@
+.dropdown {
+	position: relative;
+	display: inline-block;
+	text-align: left;
+	color: rgba(15, 19, 36, 0.6);
+}
+
+.dropdownButton {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	border: none;
+	height: 32px;
+	padding: 8px;
+	gap: 8px;
+	background: none;
+	border-radius: 8px;
+	color: #0f132499;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+	letter-spacing: -0.005em;
+	font-family: "Manrope", "Arial";
+}
+
+.dropdownButton:hover {
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.dropdownMenu {
+	position: absolute;
+	top: 34px;
+	transform: translateX(-68px);
+	padding: 4px;
+	background-color: #ffffff;
+	width: 180px;
+	z-index: 1;
+	border: 1px solid rgba(222, 224, 227, 1);
+	border-radius: 8px;
+	box-shadow: 0px 3px 6px -2px rgba(20, 21, 26, 0.05);
+	box-shadow: 0px 10px 16px -3px rgba(20, 21, 26, 0.08);
+}
+
+.dropdownItem {
+	text-decoration: none;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-radius: 6px;
+	width: 100%;
+	padding: 4px;
+	cursor: pointer;
+}
+
+.dropdownItemActive {
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.dropdownItem:hover {
+	background-color: rgba(10, 15, 41, 0.04);
+}

package/src/features/Templates/SelectTemplateModal/LanguagesDropdown/LanguagesDropdown.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import clsx from "clsx";
+import { Icon } from "../../../../shared/ui-lib/Icon";
+import styles from "./LanguagesDropdown.module.css";
+import { conf } from "microboard-temp";
+import { useTranslation } from "react-i18next";
+import { useClickOutside } from "shared/lib/useClickOutside";
+
+interface Props {
+	setSelectedLanguage: (lan: string) => void;
+	selectedLanguage: string;
+}
+
+export const LanguagesDropdown = ({
+	setSelectedLanguage,
+	selectedLanguage,
+}: Props) => {
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const dropdownRef = useClickOutside(() => setIsDropdownOpen(false));
+	const { t } = useTranslation();
+
+	const toggleDropdown = (): void => {
+		setIsDropdownOpen(!isDropdownOpen);
+	};
+
+	const handleSelectLanguage =
+		(language: string) => (ev: React.MouseEvent<HTMLLIElement>) => {
+			ev.stopPropagation();
+			setSelectedLanguage(language);
+			setIsDropdownOpen(false);
+		};
+
+	return (
+		<div ref={dropdownRef} className={styles.dropdown}>
+			<button onClick={toggleDropdown} className={styles.dropdownButton}>
+				<Icon width={16} height={16} iconName="Planet" />
+				{t(`common.languages.${selectedLanguage}`)}
+				<Icon
+					iconName={
+						isDropdownOpen ? "StrokeChevronUp" : "StrokeChevronDown"
+					}
+					width={14}
+					height={14}
+				/>
+			</button>
+			{isDropdownOpen && (
+				<ul className={styles.dropdownMenu}>
+					{conf.TEMPLATE_LANGUAGES.map(({ value }) => (
+						<li
+							key={value}
+							className={clsx(
+								styles.dropdownItem,
+								selectedLanguage === value &&
+									styles.dropdownItemActive,
+							)}
+							onClick={handleSelectLanguage(value)}
+						>
+							{t(`common.languages.${value}`)}
+							{selectedLanguage === value && (
+								<Icon
+									iconName="checkMark"
+									width={20}
+									height={20}
+								/>
+							)}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+};

package/src/features/Templates/SelectTemplateModal/SelectTemplateModal.module.css

@@ -0,0 +1,152 @@
+.modal {
+	max-width: 988px;
+	width: 100%;
+}
+
+.modalWr {
+	padding: 0 4px 0 16px;
+}
+
+.wrapper {
+	display: flex;
+	width: 100%;
+	height: 90vh;
+	font-family: "Manrope", "Arial";
+	color: rgba(20, 21, 26, 1);
+	gap: 16px;
+	touch-action: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+.sidebar {
+	padding: 16px 0;
+	width: 280px;
+	border-right: 1px solid rgba(233, 234, 236, 1);
+}
+
+.sidebarHeader {
+	display: flex;
+	height: 32px;
+	align-items: center;
+	column-gap: 8px;
+}
+
+.sidebarHeaderIcon {
+	max-width: 30px;
+	max-height: 30px;
+}
+
+.sidebarHeader > img {
+	display: block;
+	width: 30px;
+	height: 30px;
+}
+
+.sidebarHeader > h3 {
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: -0.01em;
+}
+
+.templatesContainer {
+	padding: 16px 0;
+	width: 100%;
+	touch-action: pan-y;
+	-webkit-overflow-scrolling: touch;
+	overflow-scrolling: touch;
+	overscroll-behavior: contain;
+	position: relative;
+	overflow-y: auto;
+	height: auto;
+	display: flex;
+	flex-direction: column;
+}
+
+.searchOptions {
+	padding-right: 12px;
+	display: flex;
+	justify-content: space-between;
+	margin-top: 32px;
+}
+
+.searchOptions > p {
+	font-size: 24px;
+	font-weight: 500;
+	line-height: 32px;
+	letter-spacing: -0.014em;
+}
+
+.templatesContainerHeader {
+	padding-right: 12px;
+	display: flex;
+	gap: 12px;
+	height: 40px;
+	min-width: 208px;
+	max-width: 408px;
+}
+
+.resizeMarker {
+	width: 36px;
+	height: 100%;
+	display: block;
+}
+
+.burgerMenuContainer {
+	display: none;
+}
+
+.noTemplatesText {
+	color: #0f132499;
+	margin-top: 12px;
+	font-family: Manrope;
+	font-size: 24px;
+	font-weight: 500;
+	line-height: 32px;
+	letter-spacing: -0.014em;
+}
+
+@media (max-width: 768px) {
+	.sidebar {
+		display: none;
+	}
+
+	.templatesContainer {
+		height: auto;
+		position: relative;
+		touch-action: auto;
+		-webkit-overflow-scrolling: touch;
+		overflow-y: auto;
+	}
+
+	.burgerMenuContainer {
+		display: block;
+		position: relative;
+		padding-top: 4px;
+	}
+
+	.burgerMenuContainer > button {
+		cursor: pointer;
+		border-radius: 10px;
+	}
+
+	.burgerMenuContainer > button:hover {
+		background-color: rgba(10, 15, 41, 0.04);
+	}
+
+	.burgerMenu {
+		display: none;
+		min-width: 200px;
+		position: absolute;
+		top: 36px;
+		z-index: 5;
+		padding: 0 8px 12px 16px;
+		border-radius: 10px;
+		border: 1px solid rgba(233, 234, 236, 1);
+	}
+
+	.activeBurgerMenu {
+		display: block;
+		background-color: #ffffff;
+	}
+}

package/src/features/Templates/SelectTemplateModal/SelectTemplateModal.tsx

@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "./SelectTemplateModal.module.css";
+import { TemplateItemPreview } from "./TemplateItemPreview/TemplateItemPreview";
+import { getApiUrl } from "Config";
+import { Icon } from "../../../shared/ui-lib/Icon";
+import { Input } from "shared/ui-lib/Input/Input";
+import clsx from "clsx";
+import { CategoriesMenu } from "./CategoriesMenu/CategoriesMenu";
+import i18next from "i18next";
+import { useDebounce } from "shared/lib/useDebounce";
+import { TemplateItemsGrid } from "./TemplateItemsGrid/TemplateItemsGrid";
+import { Template, TemplateCategory } from "microboard-temp";
+import { LanguagesDropdown } from "./LanguagesDropdown/LanguagesDropdown";
+import { getCorrectEnding } from "shared/lib/getCorrectEnding";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+
+export const SELECT_TEMPLATE_MODAL = Symbol("selectTemplate");
+
+export const SelectTemplateModal = (): JSX.Element => {
+	const { t } = useTranslation();
+	const [templates, setTemplates] = useState<Template[]>([]);
+	const [presentedTemplate, setPresentedTemplate] = useState<Template | null>(
+		null,
+	);
+	const { isModalOpen } = useUiModalContext();
+	const [selectedLanguage, setSelectedLanguage] = useState<string>(
+		i18next.language,
+	);
+	const [selectedCategory, setSelectedCategory] =
+		useState<TemplateCategory>("All templates");
+	const [inputValue, setInputValue] = useState<string>("");
+	const [isBurgerActive, setIsBurgerActive] = useState(false);
+
+	useEffect(() => {
+		if (isModalOpen(SELECT_TEMPLATE_MODAL)) {
+			const tag =
+				selectedCategory === "All templates"
+					? undefined
+					: selectedCategory;
+			const term = inputValue || undefined;
+			getTemplates({ language: selectedLanguage, tag, term }).then(
+				templates => setTemplates(templates),
+			);
+		}
+	}, [
+		isModalOpen(SELECT_TEMPLATE_MODAL),
+		selectedCategory,
+		selectedLanguage,
+		inputValue,
+	]);
+
+	const handleInputChange = useDebounce(
+		(ev: React.ChangeEvent<HTMLInputElement>) =>
+			setInputValue(ev.target.value),
+	);
+
+	const getTemplates = async ({
+		term,
+		language,
+		tag,
+	}: {
+		term?: string;
+		language: string;
+		tag?: TemplateCategory;
+	}) => {
+		const params = new URLSearchParams(
+			Object.entries({ term, language, tag }).filter(([_, v]) => v),
+		);
+
+		try {
+			const response = await fetch(`${getApiUrl()}/templates?${params}`, {
+				method: "GET",
+			});
+			return await response.json();
+		} catch (error) {
+			console.error(error);
+			return [];
+		}
+	};
+
+	const hideModalAndReset = () => {
+		setSelectedCategory("All templates");
+		setSelectedLanguage(i18next.language);
+		setPresentedTemplate(null);
+	};
+
+	return (
+		<UiModal
+			modalId={SELECT_TEMPLATE_MODAL}
+			wrClassName={styles.modal}
+			className={styles.modalWr}
+			onKeyDown={(ev: React.KeyboardEvent<HTMLDivElement>) =>
+				ev.stopPropagation()
+			}
+			onClose={hideModalAndReset}
+			closeOnClickOutside={false}
+		>
+			<div className={styles.wrapper}>
+				<div className={styles.sidebar}>
+					<div className={styles.sidebarHeader}>
+						<Icon
+							width={30}
+							height={30}
+							iconName="Template"
+							className={styles.sidebarHeaderIcon}
+						/>
+						<h3>{t("modalTemplate.templates")}</h3>
+					</div>
+					<CategoriesMenu
+						setSelectedCategory={setSelectedCategory}
+						selectedCategory={selectedCategory}
+					/>
+				</div>
+				<div className={styles.templatesContainer}>
+					{presentedTemplate ? (
+						<TemplateItemPreview
+							name={presentedTemplate.name}
+							language={presentedTemplate.lan}
+							description={presentedTemplate.description}
+							snapshot={presentedTemplate.snapshot}
+							setPresentedTemplate={setPresentedTemplate}
+							tags={presentedTemplate.tags}
+							viewLinkId={presentedTemplate.uniqId}
+							relatedTemplates={templates.filter(
+								t => t.uniqId !== presentedTemplate.uniqId,
+							)}
+						/>
+					) : (
+						<>
+							<div className={styles.templatesContainerHeader}>
+								<div className={styles.burgerMenuContainer}>
+									<button
+										onClick={() =>
+											setIsBurgerActive(!isBurgerActive)
+										}
+									>
+										<Icon
+											iconName="BurgerMenu"
+											width={32}
+											height={32}
+										/>
+									</button>
+									<div
+										className={clsx(
+											styles.burgerMenu,
+											isBurgerActive &&
+												styles.activeBurgerMenu,
+										)}
+									>
+										<CategoriesMenu
+											setSelectedCategory={
+												setSelectedCategory
+											}
+											selectedCategory={selectedCategory}
+										/>
+									</div>
+								</div>
+								<Input
+									id="search-template"
+									placeholder={t(
+										"modalTemplate.UI.inputs.search",
+									)}
+									onChange={handleInputChange}
+									prefixIcon={
+										<Icon
+											iconName="Search"
+											width={20}
+											height={20}
+										/>
+									}
+								/>
+								<span className={styles.resizeMarker}></span>
+							</div>
+							<div className={styles.searchOptions}>
+								<p>
+									{inputValue
+										? `${templates.length} \"${inputValue}\" ${t("modalTemplate.searchResults." + getCorrectEnding(templates.length))}`
+										: t(
+												`modalTemplate.category.useCaseItems.${selectedCategory}`,
+											)}
+								</p>
+								<LanguagesDropdown
+									setSelectedLanguage={setSelectedLanguage}
+									selectedLanguage={selectedLanguage}
+								/>
+							</div>
+							{templates.length ? (
+								<TemplateItemsGrid
+									templates={templates}
+									setPresentedTemplate={setPresentedTemplate}
+									data-testid="templates-grid"
+								/>
+							) : (
+								<p className={styles.noTemplatesText}>
+									{t("modalTemplate.noTemplates")}
+								</p>
+							)}
+						</>
+					)}
+				</div>
+			</div>
+		</UiModal>
+	);
+};