Improve

package.json

@@ -69,7 +69,6 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "json-server": "^0.17.0",

src/features/AuthByUsername/ui/LoginForm/LoginForm.module.scss

@@ -11,4 +11,4 @@
 .loginBtn {
   margin-top: 15px;
   margin-left: auto;
-}
+}

src/features/AuthByUsername/ui/LoginForm/LoginForm.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { LoginForm } from './LoginForm';
+
+export default {
+  title: 'features/LoginForm',
+  component: LoginForm,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof LoginForm>;
+
+const Template: ComponentStory<typeof LoginForm> = (args) => <LoginForm {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {};

src/features/AuthByUsername/ui/LoginModal/LoginModal.tsx

@@ -1,6 +1,5 @@
 import { classNames } from 'shared/lib/classNames/classNames';
 import { Modal } from 'shared/ui/Modal/Modal';
-import cls from './LoginModal.module.scss';
 import { LoginForm } from '../LoginForm/LoginForm';
 
 interface LoginModalProps {
@@ -11,7 +10,7 @@ interface LoginModalProps {
 
 export const LoginModal = ({ className, isOpen, onClose }: LoginModalProps) => (
   <Modal
-    className={classNames(cls.LoginModal, {}, [className])}
+    className={classNames('', {}, [className])}
     isOpen={isOpen}
     onClose={onClose}
     lazy

src/pages/MainPage/ui/MainPage.tsx

@@ -14,7 +14,7 @@ const MainPage = () => {
     <div>
       {t('main_page')}
       <Input
-        placeholder="Введите текст"
+        placeholder=""
         value={value}
         onChange={onChange}
       />

src/shared/ui/Input/Input.module.scss

@@ -38,10 +38,12 @@
   0% {
     opacity: 0;
   }
+
   50% {
     opacity: 0.01;
   }
+
   100% {
     opacity: 1;
   }
-}
+}

src/shared/ui/Input/Input.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Input } from 'shared/ui/Input/Input';
+
+export default {
+  title: 'shared/Input',
+  component: Input,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  placeholder: 'Type text',
+  value: 'Введите текст',
+};