added stories for ui kit, change auth forms

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: rgba(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,

client/src/features/auth/ui/LoginForm/LoginForm.tsx

@@ -13,7 +13,7 @@ export const LoginForm = memo(({ onSwap }: LoginFormProps) => {
   const { register, formState } = form;
 
   return (
-    <Form form={form} onSubmit={onSubmit}>
+    <Form onSubmit={onSubmit}>
       <Typography tag={'h2'} variant={'bold_24'}>
         Authorization
       </Typography>

client/src/features/auth/ui/RegisterForm/RegisterForm.tsx

@@ -3,8 +3,6 @@ import { memo } from 'react';
 import { useRegisterForm } from '@/features/auth/model/hooks/useRegisterForm.ts';
 import { Button, Checkbox, Form, Input, Typography } from '@/shared/ui';
 
-import styles from './RegisterForm.module.scss';
-
 interface RegisterFormProps {
   onSwap: () => void;
 }
@@ -17,7 +15,7 @@ export const RegisterForm = memo(({ onSwap }: RegisterFormProps) => {
   } = form;
 
   return (
-    <Form form={form} onSubmit={onSubmit} className={styles.form}>
+    <Form onSubmit={onSubmit}>
       <Typography tag='h2' variant='bold_24'>
         Registration
       </Typography>
@@ -38,7 +36,7 @@ export const RegisterForm = memo(({ onSwap }: RegisterFormProps) => {
         error={errors.password?.message}
       />
 
-      <Checkbox {...register('agreeToTerms')} error={errors.agreeToTerms}>
+      <Checkbox {...register('agreeToTerms')} error={errors.agreeToTerms?.message}>
         I agree to the <a>Terms and Conditions</a>
       </Checkbox>
 

client/src/features/journey/ui/Journey.tsx

@@ -1,9 +1,5 @@
 import { memo } from 'react';
 
-interface JourneyProps {}
-
-export const Journey = memo((props: JourneyProps) => {
-  const {} = props;
-
+export const Journey = memo(() => {
   return <div>Journey</div>;
 });

client/src/pages/AuthPage/ui/AuthPage/AuthPage.module.scss

@@ -1,7 +1,7 @@
 .auth {
   display: flex;
+  width: 100%;
+  min-height: 100vh;
   align-items: center;
   justify-content: center;
-  min-height: 100vh;
-  width: 100%;
 }

client/src/pages/ErrorPage/ui/ErrorPage/ErrorPage.tsx

@@ -1,7 +1,5 @@
-import styles from './ErrorPage.module.scss';
-
 const ErrorPage = () => {
-  return <div className={styles.error}>404</div>;
+  return <div>404</div>;
 };
 
 export default ErrorPage;

client/src/pages/LoaderPage/ui/LoaderPage/LoaderPage.module.scss

@@ -1,6 +1,6 @@
 .page {
-  width: 100%;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: center;
 }

client/src/pages/MainPage/ui/DashboardPage/DashboardPage.module.scss

@@ -1,12 +1,12 @@
 .main {
-  font-size: 40px;
-  font-weight: 700;
-
-  color: var(--color-title);
 
   width: 100%;
   height: 100%;
   padding: 20px;
   border-radius: 12px;
   background-color: var(--color-section);
+
+  color: var(--color-title);
+  font-size: 40px;
+  font-weight: 700;
 }

client/src/shared/config/storybook/decorators/StyleDecorator.tsx

@@ -2,5 +2,6 @@ import type { Decorator } from '@storybook/react';
 
 import '@/app/styles/index.scss';
 import '../styles/index.scss';
+import '@/app/styles/themes/index.scss';
 
 export const StyleDecorator: Decorator = (StoryComponent) => <StoryComponent />;

client/src/shared/config/storybook/styles/index.scss

@@ -1,5 +1,5 @@
-*{
-  width: #000;
+* {
+  width: #000000;
 }
 
 .title {
@@ -8,10 +8,10 @@
   font-weight: 600;
 }
 
-//------Typography---
+// ------Typography---
 
 .typography_inner {
-  color: #ffffff;
+  color: #7f7f7f;
   font-family: Helvetica, sans-serif;
 }
 
@@ -23,7 +23,7 @@
 
 .typography_block {
   display: flex;
-  color: #ffffff;
+  color: #1c1c1c;
   gap: 20px;
 }
 
@@ -34,6 +34,7 @@
 }
 
 // ------Icons---
+
 .icons_wrapper {
   display: grid;
   gap: 20px;
@@ -45,7 +46,6 @@
   width: 100%;
   align-items: center;
   padding: 12px;
-  border: 1px solid #575970;
   border-radius: 4px;
   gap: 12px;
 }

client/src/shared/ui/Button/Button.module.scss

@@ -2,10 +2,10 @@
   display: flex;
   width: 100%;
   align-items: center;
-  color: var(--color-title);
 
   padding: 6px 12px;
   border-radius: 4px;
+  color: var(--color-title);
   cursor: pointer;
   font-size: 1rem;
   gap: 8px;
@@ -19,9 +19,11 @@
 .start {
   justify-content: flex-start;
 }
+
 .center {
   justify-content: center;
 }
+
 .end {
   justify-content: flex-end;
 }