Add StatefullModalForm

Author: webdevia

src/shared/button/Button.tsx

@@ -1,12 +1,15 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import cn from 'clsx';
 import s from './Button.modules.scss';
 
 type ButtonProps = {
   children: ReactNode;
   disabled?: boolean;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const Button = ({ children, disabled = false }: ButtonProps) => (
-  <button className={cn(s.button, { [s.disabled]: disabled })}>{children}</button>
+export const Button = ({ children, onClick, disabled = false }: ButtonProps) => (
+  <button className={cn(s.button, { [s.disabled]: disabled })} onClick={onClick}>
+    {children}
+  </button>
 );

src/shared/modal-form/ModalForm.module.scss

@@ -1,5 +1,6 @@
 .modal {
   display: flex;
+  position: fixed;
   align-items: center;
   z-index: 1;
   left: 0;

src/shared/modal-form/ModalForm.tsx

@@ -1,17 +1,20 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import cn from 'clsx';
 import s from './ModalForm.module.scss';
 
 type ModalFormProps = {
   visible: boolean;
   children: ReactNode;
+  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const ModalForm = ({ visible = true, children }: ModalFormProps) => {
+export const ModalForm = ({ visible = true, onClose, children }: ModalFormProps) => {
   return (
     <div id="myModal" className={cn(s.modal, { [s['modal-hide']]: !visible })}>
       <div className={s['modal-content']}>
-        <span className={s.close}>&times;</span>
+        <span className={s.close} onClick={onClose}>
+          &times;
+        </span>
         {children}
       </div>
     </div>

src/shared/statefull-modal-form/StatefullModalForm.module.scss

@@ -0,0 +1,10 @@
+.statefull-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+
+  input {
+    align-self: stretch;
+  }
+}

src/shared/statefull-modal-form/StatefullModalForm.tsx

@@ -0,0 +1,24 @@
+import React, { useState, FormEvent } from 'react';
+import { Button } from '../button/Button';
+import { TextInput } from '../text-input/TextInput';
+import { ModalForm } from '../modal-form/ModalForm';
+import s from './StatefullModalForm.module.scss';
+
+export const StatefullModalForm = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [isModalFormVisible, setIsModalFormVisible] = useState(false);
+
+  const openModalForm = () => setIsModalFormVisible(true);
+  const closeModalForm = () => setIsModalFormVisible(false);
+  const saveInputValue = (event: FormEvent<HTMLInputElement>) => setInputValue(event.currentTarget.value);
+
+  return (
+    <div className={s['statefull-modal']}>
+      <TextInput value={inputValue} onInput={saveInputValue} />
+      <Button onClick={openModalForm}>Открыть модальное окно</Button>
+      <ModalForm visible={isModalFormVisible} onClose={closeModalForm}>
+        <p>{inputValue}</p>
+      </ModalForm>
+    </div>
+  );
+};

src/shared/text-input/TextInput.module.scss

@@ -0,0 +1,12 @@
+.text-input {
+  padding: 8px;
+  font-size: 1em;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  outline: none;
+  &:focus {
+    border: 2px solid #555;
+  }
+}

src/shared/text-input/TextInput.tsx

@@ -0,0 +1,11 @@
+import React, { FormEvent } from 'react';
+import s from './TextInput.module.scss';
+
+type TextInputProps = {
+  value: string;
+  onInput?: (event: FormEvent<HTMLInputElement>) => void;
+};
+
+export const TextInput = ({ value, onInput }: TextInputProps) => (
+  <input className={s['text-input']} type="text" value={value} onInput={onInput} />
+);

src/stories/InputToModal.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta } from '@storybook/react';
+
+import { StatefullModalForm } from '../shared/statefull-modal-form/StatefullModalForm';
+
+const meta: Meta<typeof StatefullModalForm> = {
+  component: StatefullModalForm,
+  title: 'Общее задание/Состояние модального окна',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        height: '500px',
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Test = {};