added stories for ui kit, change auth forms

Author: Meow-Double

client/configs/storybook/preview.ts

@@ -1,4 +1,4 @@
-import { withThemeByClassName } from '@storybook/addon-themes';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/react-vite';
 import { setupWorker } from 'msw/browser';
 
@@ -28,12 +28,11 @@ const preview: Preview = {
   decorators: [
     StyleDecorator,
     RouterDecorator,
-    withThemeByClassName({
-      themes: {
-        twitter: 'theme-twt',
-        facebook: 'theme-fb',
-      },
-      defaultTheme: 'twitter',
+    withThemeByDataAttribute({
+      themes: { light: 'light', dark: 'dark' },
+      defaultTheme: 'dark',
+      attributeName: 'data-theme',
+      parentSelector: 'body',
     }),
   ],
 };

client/src/app/providers/router/ui/MainLayout/Layout.module.scss

@@ -1,8 +1,8 @@
 .layout {
   display: grid;
-  grid-template-columns: 280px auto;
-  gap: 20px;
-  margin: 20px;
 
   height: var(--layout-height);
+  margin: 20px;
+  gap: 20px;
+  grid-template-columns: 280px auto;
 }

client/src/app/providers/router/ui/WithoutAside/WithoutAside.module.scss

@@ -1,6 +1,6 @@
 .layout {
 
-  margin: 20px;
-
   height: var(--layout-height);
+
+  margin: 20px;
 }

client/src/app/styles/index.scss

@@ -1,3 +1,4 @@
-@use "./scss/reset.scss";
-@use "./scss/vars.scss";
-@use "./scss/base.scss";
+@use "./scss/reset";
+@use "./scss/vars";
+@use "./scss/fonts";
+@use "./scss/base";

client/src/app/styles/scss/base.scss

@@ -5,9 +5,9 @@
 }
 
 body {
+  overflow: hidden;
   width: 100%;
   height: 100vh;
-  color: var(--color-text);
   background: conic-gradient(
     from 330deg at 50% 50%,
     var(--grad-1) 0deg,
@@ -16,10 +16,10 @@ body {
     var(--grad-4) 270deg,
     var(--grad-1) 360deg
   );
+  background-blend-mode: screen;
 
   background-size: 100% 100%;
-  background-blend-mode: screen;
-  overflow: hidden;
+  color: var(--color-text);
 
   font: var(--font-m);
 }

client/src/app/styles/scss/fonts.scss

@@ -1,21 +1,21 @@
 @font-face {
-  font-family: "Manrope-Custom";
-  src: url("/fonts/Manrope-Medium.ttf") format("truetype");
-  font-weight: 500;
+  font-family: Manrope-Custom;
   font-style: normal;
+  font-weight: 500;
+  src: url("/fonts/Manrope-Medium.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: "Manrope-Custom";
-  src: url("/fonts/Manrope-Regular.ttf") format("truetype");
-  font-weight: 400;
+  font-family: Manrope-Custom;
   font-style: normal;
+  font-weight: 400;
+  src: url("/fonts/Manrope-Regular.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: "Manrope-Custom";
-  src: url("/fonts/Manrope-SemiBold.ttf") format("truetype");
-  font-weight: 600;
+  font-family: Manrope-Custom;
   font-style: normal;
+  font-weight: 600;
+  src: url("/fonts/Manrope-SemiBold.ttf") format("truetype");
 }
 

client/src/app/styles/scss/vars.scss

@@ -1,17 +1,15 @@
-@use './fonts.scss';
+@use './fonts';
 
 :root {
+
   /* Шрифты */
   --family-main: 'Manrope-Custom';
-
   --font-size-m: 16px;
   --font-line-m: 24px;
   --font-m: 16px / 24px var(--family-main);
-
   --font-size-l: 24px;
   --font-line-l: 32px;
   --font-l: 24px / 32px var(--family-main);
-
   --font-size-xl: 32px;
   --font-line-xl: 40px;
   --font-xl: 32px / 40px var(--family-main);
@@ -25,7 +23,7 @@
   --z-index-modal: 10;
 
   /* Цвета */
-  --overlay: rgba(0, 0, 0, 0.5);
+  --overlay: rgb(0 0 0 / 0.5);
   --red-light: #ff0000;
   --red-dark: #c50a0a;
   --color-error: #ff0000;
@@ -38,6 +36,6 @@
 
   /* Модальное окно */
 
-  --modal-background: #fff;
+  --modal-background: #ffffff;
 
 }

client/src/app/styles/themes/index.scss

@@ -2,15 +2,12 @@
   --color-primary-dark: #0f4c81;
   --color-primary: #2a73ff;
   --color-primary-light: #dde8ff;
-
   --grad-1: #e8f1ff;
   --grad-2: #c9ddff;
   --grad-3: #8bb2ff;
   --grad-4: #3b6ec8;
-
   --color-background: #eaf6ff;
   --color-section: #ffffff;
-
   --color-title: #0a3d62;
   --color-text: #4a4a4a;
   --color-active-link: #dde8ff;
@@ -20,15 +17,12 @@
   --color-primary: #6366f1;
   --color-primary-light: #a5b4fc;
   --color-primary-dark: #4338ca;
-
   --color-background: #0f172a;
   --color-section: #1e293b;
-
   --grad-1: #1e293b;
   --grad-2: #334155;
   --grad-3: #475569;
   --grad-4: #64748b;
-
   --color-title: #e2e8f0;
   --color-text: #cbd5e1;
   --color-active-link: #4338ca;

client/src/features/auth/model/hooks/useLoginForm.ts

@@ -15,14 +15,14 @@ export const useLoginForm = () => {
     },
   });
 
+  const onSubmit = form.handleSubmit((values) => {
+    alert(JSON.stringify(values));
+  });
+
   useEffect(() => {
     form.setFocus('login');
   }, [form, form.setFocus]);
 
-  const onSubmit = (values: LoginFormValues) => {
-    alert(values?.login);
-  };
-
   return {
     form,
     onSubmit,

client/src/features/auth/model/hooks/useRegisterForm.ts

@@ -20,9 +20,9 @@ export const useRegisterForm = () => {
     form.setFocus('email');
   }, [form, form.setFocus]);
 
-  const onSubmit = (values: RegisterFormValues) => {
-    alert(values?.email);
-  };
+  const onSubmit = form.handleSubmit((values) => {
+    alert(JSON.stringify(values));
+  });
 
   return {
     form,