[homework4] review fixes

src/shared/modal/Modal.stories.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Modal } from './Modal';
 import type { Meta, StoryObj } from '@storybook/react';
+import { OpenModalByClickStory } from './OpenModalByClickStory';
 
 const meta: Meta<typeof Modal> = {
   title: 'Otus/Common/Modal',
@@ -23,33 +24,7 @@ export const Default: StoryObj<typeof Modal> = {
   },
 };
 
-const OpenModalByClick = () => {
-  const [visible, setVisible] = useState(false);
-  const [modalText, setModalText] = useState('Hello, world!');
-
-  const openModal = () => {
-    if (!visible) {
-      setVisible(true);
-      setTimeout(() => setVisible(false), 2000);
-    }
-  };
-
-  return (
-    <div style={{ display: 'flex', justifyContent: 'center' }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
-        <input type="text" value={modalText} onChange={(event) => setModalText(event.target.value)} />
-        <button onClick={openModal} disabled={modalText.length === 0}>
-          Show modal
-        </button>
-      </div>
-      <Modal visible={visible}>
-        <p style={{ textAlign: 'center' }}>{modalText}</p>
-      </Modal>
-    </div>
-  );
-};
-
 export const OpenModal: StoryObj<typeof Modal> = {
   name: 'Interactive modal example',
-  render: () => <OpenModalByClick />,
+  render: () => <OpenModalByClickStory />,
 };

src/shared/modal/Modal.tsx

@@ -4,14 +4,17 @@ import './modal.css';
 interface ModalProps {
   visible: boolean;
   children: React.ReactNode;
+  onClose: () => void;
 }
 
-export const Modal = ({ visible, children }: ModalProps): React.ReactElement => {
+export const Modal = ({ visible, children, onClose }: ModalProps): React.ReactElement => {
   if (!visible) return null;
   return (
     <div className="modal-background">
       <div className="modal-dialog">
-        <span className="modal-close">&times;</span>
+        <span className="modal-close" onClick={onClose}>
+          &times;
+        </span>
         <div className="modal-body">{children}</div>
       </div>
     </div>

src/shared/modal/OpenModalByClickStory.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Modal } from './Modal';
+
+export const OpenModalByClickStory = () => {
+  const [visible, setVisible] = useState(false);
+  const [modalText, setModalText] = useState('Hello, world!');
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
+        <input type="text" value={modalText} onChange={(event) => setModalText(event.target.value)} />
+        <button onClick={() => setVisible(true)} disabled={modalText.length === 0}>
+          Show modal
+        </button>
+      </div>
+      <Modal visible={visible} onClose={() => setVisible(false)}>
+        <p style={{ textAlign: 'center' }}>{modalText}</p>
+      </Modal>
+    </div>
+  );
+};

src/shared/themetogglebutton/ThemeToggleButton.stories.tsx

@@ -1,7 +1,8 @@
 import { ThemeToggleButton } from './ThemeToggleButton';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider, useTheme, Theme } from '../../theming/ThemeProvider';
+import { ThemeProvider } from '../../theming/ThemeProvider';
 import React from 'react';
+import { ThemeToggleButtonStory } from './ThemeToggleButtonStory';
 
 const meta: Meta<typeof ThemeToggleButton> = {
   title: 'Otus/Common/ThemeToggleButton',
@@ -10,25 +11,6 @@ const meta: Meta<typeof ThemeToggleButton> = {
 
 export default meta;
 
-const ThemeToggleButtonStory = () => {
-  const { theme } = useTheme();
-
-  return (
-    <div
-      style={{
-        width: 50,
-        height: 50,
-        backgroundColor: theme === Theme.light ? 'white' : 'black',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <ThemeToggleButton />
-    </div>
-  );
-};
-
 export const Default: StoryObj<typeof ThemeToggleButton> = {
   render: () => {
     return (

src/shared/themetogglebutton/ThemeToggleButtonStory.tsx

@@ -0,0 +1,22 @@
+import { ThemeToggleButton } from './ThemeToggleButton';
+import { useTheme, Theme } from '../../theming/ThemeProvider';
+import React from 'react';
+
+export const ThemeToggleButtonStory = () => {
+  const { theme } = useTheme();
+
+  return (
+    <div
+      style={{
+        width: 50,
+        height: 50,
+        backgroundColor: theme === Theme.light ? 'white' : 'black',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <ThemeToggleButton />
+    </div>
+  );
+};