From d34adacb8a0f85dd1f6d0b85681b8f89761f57c1 Mon Sep 17 00:00:00 2001
From: Daria Dmitrienko <ishmizh@gmail.com>
Date: Thu, 10 Oct 2024 19:19:32 +0400
Subject: [PATCH] =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=BD=D0=B5=D1=81=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D0=BD=D0=B0=20=D0=B4=D1=80=D1=83=D0=B3=D1=83=D1=8E=20?=
 =?UTF-8?q?=D0=B2=D0=B5=D1=82=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/arrow-button/ArrowButton.tsx   |   8 +-
 .../article-params-form/ArticleParamsForm.tsx | 127 +++++++++++++++++-
 .../select/hooks/useOutsideClickClose.ts      |   4 +-
 src/components/separator/index.module.scss    |   2 +-
 src/components/spacer/Spacer.stories.tsx      |  16 +++
 src/components/spacer/Spacer.tsx              |   5 +
 src/components/spacer/index.module.scss       |   4 +
 src/components/spacer/index.tsx               |   1 +
 src/index.tsx                                 |  23 ++--
 9 files changed, 171 insertions(+), 19 deletions(-)
 create mode 100644 src/components/spacer/Spacer.stories.tsx
 create mode 100644 src/components/spacer/Spacer.tsx
 create mode 100644 src/components/spacer/index.module.scss
 create mode 100644 src/components/spacer/index.tsx

diff --git a/src/components/arrow-button/ArrowButton.tsx b/src/components/arrow-button/ArrowButton.tsx
index 5e2e0f7..1cc0946 100644
--- a/src/components/arrow-button/ArrowButton.tsx
+++ b/src/components/arrow-button/ArrowButton.tsx
@@ -5,10 +5,14 @@ import styles from './ArrowButton.module.scss';
 /** Функция для обработки открытия/закрытия формы */
 export type OnClick = () => void;
 
-export const ArrowButton = () => {
+export interface ArrowButtonProps {
+	onClick?: OnClick
+}
+
+export const ArrowButton = ({ onClick }: ArrowButtonProps) => {
 	return (
 		/* Не забываем указаывать role и aria-label атрибуты для интерактивных элементов */
-		<div
+		<div onClick={onClick}
 			role='button'
 			aria-label='Открыть/Закрыть форму параметров статьи'
 			tabIndex={0}
diff --git a/src/components/article-params-form/ArticleParamsForm.tsx b/src/components/article-params-form/ArticleParamsForm.tsx
index 8f213da..e82527a 100644
--- a/src/components/article-params-form/ArticleParamsForm.tsx
+++ b/src/components/article-params-form/ArticleParamsForm.tsx
@@ -1,20 +1,135 @@
 import { ArrowButton } from 'components/arrow-button';
 import { Button } from 'components/button';
+import { useRef, useState } from 'react';
 
 import styles from './ArticleParamsForm.module.scss';
+import { Select } from '../select';
+import { RadioGroup } from '../radio-group'
+import { fontFamilyOptions, fontColors, backgroundColors, contentWidthArr, fontSizeOptions, defaultArticleState, ArticleStateType } from 'src/constants/articleProps';
+import { useOutsideClickClose } from '../select/hooks/useOutsideClickClose';
+import { Separator } from '../separator';
+import { Spacer } from '../spacer';
+
+
+interface propsArticleParamsForm {
+	onChange?: (data: ArticleStateType) => void;
+}
+
+export const ArticleParamsForm = ({ onChange }: propsArticleParamsForm) => {
+	const [sidebarIsOpen, setIsSidebarOpen] = useState(false);
+	const [selectedFont, setSelectedFont] = useState(defaultArticleState.fontFamilyOption);
+	const [selectedFontSize, setSelectedFontSize] = useState(defaultArticleState.fontSizeOption);
+	const [selectedFontColor, setSelectedFontColor] = useState(defaultArticleState.fontColor);
+	const [selectedBackgroundColor, setSelectedBackgroundColor] = useState(defaultArticleState.backgroundColor);
+	const [selectedWidthContent, setSelectedWidthContent] = useState(defaultArticleState.contentWidth);
+
+	const rootRef = useRef<HTMLDivElement>(null);
+	let lastStyles = useRef(defaultArticleState);
+
+	useOutsideClickClose({
+		isOpen: sidebarIsOpen,
+		rootRef: rootRef,
+		onClose: () => {
+			setSelectedFont(lastStyles.current.fontFamilyOption)
+			setSelectedFontSize(lastStyles.current.fontSizeOption)
+			setSelectedFontColor(lastStyles.current.fontColor)
+			setSelectedBackgroundColor(lastStyles.current.backgroundColor)
+			setSelectedWidthContent(lastStyles.current.contentWidth)
+		},
+		onChange: setIsSidebarOpen,
+	});
+
+	const toggleSidebar = () => {
+		// Вызов функции для изменения состояния
+		setIsSidebarOpen(!sidebarIsOpen);
+	}
+
+	const submitHandler = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+
+		lastStyles.current = {
+			fontFamilyOption: selectedFont,
+			fontColor: selectedFontColor,
+			backgroundColor: selectedBackgroundColor,
+			contentWidth: selectedWidthContent,
+			fontSizeOption: selectedFontSize,
+		};
+
+		if (onChange) {
+			onChange(lastStyles.current)
+		}
+	}
+
+	const resetHandler = (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		setSelectedFontColor(defaultArticleState.fontColor)
+		setSelectedFont(defaultArticleState.fontFamilyOption)
+		setSelectedFontSize(defaultArticleState.fontSizeOption)
+		setSelectedBackgroundColor(defaultArticleState.backgroundColor)
+		setSelectedWidthContent(defaultArticleState.contentWidth)
+		if (onChange) {
+			onChange(defaultArticleState)
+		}
+	}
 
-export const ArticleParamsForm = () => {
 	return (
-		<>
-			<ArrowButton />
-			<aside className={styles.container}>
-				<form className={styles.form}>
+		<div ref={rootRef}>
+			<ArrowButton onClick={toggleSidebar} />
+			<aside className={`${styles.container} ${sidebarIsOpen ? styles.container_open : ''}`}>
+
+				<form className={styles.form} onSubmit={submitHandler} onReset={resetHandler} >
+
+					<Select
+						selected={selectedFont}
+						onChange={setSelectedFont}
+						options={fontFamilyOptions}
+						title='шрифт'
+					/>
+
+					<Spacer />
+
+					<RadioGroup
+						selected={selectedFontSize}
+						name='radio'
+						onChange={setSelectedFontSize}
+						options={fontSizeOptions}
+						title='размер шрифта'
+					/>
+
+					<Spacer />
+
+					<Select
+						selected={selectedFontColor}
+						onChange={setSelectedFontColor}
+						options={fontColors}
+						title='цвет шрифта'
+					/>
+					<Spacer />
+
+					<Separator />
+					<Spacer />
+
+					<Select
+						selected={selectedBackgroundColor}
+						onChange={setSelectedBackgroundColor}
+						options={backgroundColors}
+						title='цвет фона'
+					/>
+					<Spacer />
+
+					<Select
+						selected={selectedWidthContent}
+						onChange={setSelectedWidthContent}
+						options={contentWidthArr}
+						title='ширина контента'
+					/>
+
 					<div className={styles.bottomContainer}>
 						<Button title='Сбросить' type='reset' />
 						<Button title='Применить' type='submit' />
 					</div>
 				</form>
 			</aside>
-		</>
+		</div>
 	);
 };
diff --git a/src/components/select/hooks/useOutsideClickClose.ts b/src/components/select/hooks/useOutsideClickClose.ts
index 653f263..9ed8666 100644
--- a/src/components/select/hooks/useOutsideClickClose.ts
+++ b/src/components/select/hooks/useOutsideClickClose.ts
@@ -22,10 +22,10 @@ export const useOutsideClickClose = ({
 			}
 		};
 
-		window.addEventListener('click', handleClick);
+		window.addEventListener('mousedown', handleClick);
 
 		return () => {
-			window.removeEventListener('click', handleClick);
+			window.removeEventListener('mousedown', handleClick);
 		};
 	}, [onClose, onChange, isOpen]);
 };
diff --git a/src/components/separator/index.module.scss b/src/components/separator/index.module.scss
index e8f67f8..4a954c0 100644
--- a/src/components/separator/index.module.scss
+++ b/src/components/separator/index.module.scss
@@ -1,5 +1,5 @@
 .separator {
 	width: 100%;
 	height: 1px;
-	background: #000000;
+	background: #D7D7D7;
 }
diff --git a/src/components/spacer/Spacer.stories.tsx b/src/components/spacer/Spacer.stories.tsx
new file mode 100644
index 0000000..2e81c09
--- /dev/null
+++ b/src/components/spacer/Spacer.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Spacer } from './Spacer';
+
+const meta: Meta<typeof Spacer> = {
+	component: Spacer,
+};
+
+export default meta;
+type Story = StoryObj<typeof Spacer>;
+
+export const SelectStory: Story = {
+	render: () => {
+		return <Spacer />;
+	},
+};
diff --git a/src/components/spacer/Spacer.tsx b/src/components/spacer/Spacer.tsx
new file mode 100644
index 0000000..1e45197
--- /dev/null
+++ b/src/components/spacer/Spacer.tsx
@@ -0,0 +1,5 @@
+import styles from './index.module.scss';
+
+export const Spacer = () => {
+	return <div className={styles.spacer}></div>;
+};
diff --git a/src/components/spacer/index.module.scss b/src/components/spacer/index.module.scss
new file mode 100644
index 0000000..401700f
--- /dev/null
+++ b/src/components/spacer/index.module.scss
@@ -0,0 +1,4 @@
+.spacer {
+	width: 100%;
+	height: 50px;
+}
diff --git a/src/components/spacer/index.tsx b/src/components/spacer/index.tsx
new file mode 100644
index 0000000..e7a837e
--- /dev/null
+++ b/src/components/spacer/index.tsx
@@ -0,0 +1 @@
+export { Spacer } from './Spacer';
diff --git a/src/index.tsx b/src/index.tsx
index d7476bf..36d9439 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,10 @@
 import { createRoot } from 'react-dom/client';
-import { StrictMode, CSSProperties } from 'react';
+import { StrictMode, CSSProperties, 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, fontFamilyOptions } from './constants/articleProps';
 
 import './styles/index.scss';
 import styles from './styles/index.module.scss';
@@ -13,19 +13,26 @@ const domNode = document.getElementById('root') as HTMLDivElement;
 const root = createRoot(domNode);
 
 const App = () => {
+	const [appState, setAppState] = useState(defaultArticleState);
+
+	const changeHandler = (newAppState: ArticleStateType) => {
+		console.log('changeee')
+		setAppState(newAppState)
+	}
+
 	return (
 		<div
 			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': appState.fontFamilyOption.value,
+					'--font-size': appState.fontSizeOption.value,
+					'--font-color': appState.fontColor.value,
+					'--container-width': appState.contentWidth.value,
+					'--bg-color': appState.backgroundColor.value,
 				} as CSSProperties
 			}>
-			<ArticleParamsForm />
+			<ArticleParamsForm onChange={changeHandler} />
 			<Article />
 		</div>
 	);