First commit

src/components/article-params-form/ArticleParamsForm.module.scss

@@ -16,6 +16,7 @@
 	display: flex;
 	flex-shrink: 0;
 	flex-direction: column;
+	gap: 48px;
 	box-sizing: border-box;
 	width: 616px;
 	height: auto;

src/components/article-params-form/ArticleParamsForm.tsx

@@ -1,14 +1,137 @@
+import { FormEvent, useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
 import { ArrowButton } from 'src/ui/arrow-button';
 import { Button } from 'src/ui/button';
+import { RadioGroup } from 'src/ui/radio-group';
+import { Select } from 'src/ui/select';
+import { Separator } from 'src/ui/separator';
+import { Text } from 'src/ui/text';
+
+import {
+	OptionType,
+	fontFamilyOptions,
+	fontColors,
+	backgroundColors,
+	contentWidthArr,
+	fontSizeOptions,
+	ArticleStateType,
+} from 'src/constants/articleProps';
 
 import styles from './ArticleParamsForm.module.scss';
 
-export const ArticleParamsForm = () => {
+type ArticleParamsFormProps = {
+	isOpen: boolean;
+	onToggle: () => void;
+	initialState: ArticleStateType;
+	currentState: ArticleStateType;
+	onApply?: (values: ArticleStateType) => void;
+	onReset?: (values: ArticleStateType) => void;
+	onClose?: () => void;
+};
+
+export const ArticleParamsForm = ({
+	isOpen,
+	onToggle,
+	initialState,
+	currentState,
+	onApply,
+	onReset,
+	onClose,
+}: ArticleParamsFormProps) => {
+	const [formState, setFormState] = useState<ArticleStateType>(currentState);
+	const containerRef = useRef<HTMLElement | null>(null);
+
+	useEffect(() => {
+		setFormState(currentState);
+	}, [currentState]);
+
+	useEffect(() => {
+		if (!isOpen) {
+			return;
+		}
+
+		const handleClickOutside = (event: MouseEvent) => {
+			const root = containerRef.current;
+			const target = event.target as Node | null;
+			if (root && target && !root.contains(target)) {
+				onClose?.();
+			}
+		};
+
+		window.addEventListener('mousedown', handleClickOutside);
+
+		return () => {
+			window.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [isOpen, onClose]);
+
+	const handleChange =
+		<Key extends keyof ArticleStateType>(key: Key) =>
+		(option: OptionType) => {
+			setFormState((prev) => ({
+				...prev,
+				[key]: option,
+			}));
+		};
+
+	const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		onApply?.(formState);
+	};
+
+	const handleReset = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		setFormState(initialState);
+		onReset?.(initialState);
+	};
+
 	return (
 		<>
-			<ArrowButton isOpen={false} onClick={() => {}} />
-			<aside className={styles.container}>
-				<form className={styles.form}>
+			<ArrowButton isOpen={isOpen} onClick={onToggle} />
+			<aside
+				className={clsx(styles.container, {
+					[styles.container_open]: isOpen,
+				})}
+				ref={containerRef}>
+				<form
+					className={styles.form}
+					onSubmit={handleSubmit}
+					onReset={handleReset}>
+					<Text as='h2' size={31} weight={800} uppercase>
+						Задайте параметры
+					</Text>
+					<Select
+						title='Шрифт'
+						options={fontFamilyOptions}
+						selected={formState.fontFamilyOption}
+						onChange={handleChange('fontFamilyOption')}
+					/>
+					<RadioGroup
+						title='Размер шрифта'
+						name='font-size'
+						options={fontSizeOptions}
+						selected={formState.fontSizeOption}
+						onChange={handleChange('fontSizeOption')}
+					/>
+					<Select
+						title='Цвет текста'
+						options={fontColors}
+						selected={formState.fontColor}
+						onChange={handleChange('fontColor')}
+					/>
+					<Separator />
+					<Select
+						title='Цвет фона'
+						options={backgroundColors}
+						selected={formState.backgroundColor}
+						onChange={handleChange('backgroundColor')}
+					/>
+					<Select
+						title='Ширина контента'
+						options={contentWidthArr}
+						selected={formState.contentWidth}
+						onChange={handleChange('contentWidth')}
+					/>
 					<div className={styles.bottomContainer}>
 						<Button title='Сбросить' htmlType='reset' type='clear' />
 						<Button title='Применить' htmlType='submit' type='apply' />

src/index.tsx

@@ -1,10 +1,13 @@
 import { createRoot } from 'react-dom/client';
-import { StrictMode, CSSProperties } from 'react';
+import { CSSProperties, StrictMode, useState } from 'react';
 import clsx from 'clsx';
 
 import { Article } from './components/article/Article';
 import { ArticleParamsForm } from './components/article-params-form/ArticleParamsForm';
-import { defaultArticleState } from './constants/articleProps';
+import {
+	ArticleStateType,
+	defaultArticleState,
+} from './constants/articleProps';
 
 import './styles/index.scss';
 import styles from './styles/index.module.scss';
@@ -13,19 +16,49 @@ const domNode = document.getElementById('root') as HTMLDivElement;
 const root = createRoot(domNode);
 
 const App = () => {
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const [articleState, setArticleState] =
+		useState<ArticleStateType>(defaultArticleState);
+
+	const handleTogglePanel = () => {
+		setIsPanelOpen((prev) => !prev);
+	};
+
+	const handleClosePanel = () => {
+		setIsPanelOpen(false);
+	};
+
+	const handleApplyParams = (values: ArticleStateType) => {
+		setArticleState({ ...values });
+		handleClosePanel();
+	};
+
+	const handleResetParams = (values: ArticleStateType) => {
+		setArticleState({ ...values });
+		handleClosePanel();
+	};
+
 	return (
 		<main
 			className={clsx(styles.main)}
 			style={
 				{
-					'--font-family': defaultArticleState.fontFamilyOption.value,
-					'--font-size': defaultArticleState.fontSizeOption.value,
-					'--font-color': defaultArticleState.fontColor.value,
-					'--container-width': defaultArticleState.contentWidth.value,
-					'--bg-color': defaultArticleState.backgroundColor.value,
+					'--font-family': articleState.fontFamilyOption.value,
+					'--font-size': articleState.fontSizeOption.value,
+					'--font-color': articleState.fontColor.value,
+					'--container-width': articleState.contentWidth.value,
+					'--bg-color': articleState.backgroundColor.value,
 				} as CSSProperties
 			}>
-			<ArticleParamsForm />
+			<ArticleParamsForm
+				isOpen={isPanelOpen}
+				onToggle={handleTogglePanel}
+				initialState={defaultArticleState}
+				currentState={articleState}
+				onApply={handleApplyParams}
+				onReset={handleResetParams}
+				onClose={handleClosePanel}
+			/>
 			<Article />
 		</main>
 	);