update layout and story of UploadAvatar component, update few stories

stasguma · Apr 30, 2024 · ea6771a · ea6771a
1 parent 36dc369
commit ea6771a
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 23 deletions.
diff --git a/src/features/profile/UploadAvatar/ui/UploadAvatar.module.scss b/src/features/profile/UploadAvatar/ui/UploadAvatar.module.scss
@@ -1,3 +1,9 @@
-.upload-btn {
-  margin-top: 10px;
+.upload-avatar {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+
+  &__btn {
+    margin-top: 10px;
+  }
 }
diff --git a/src/features/profile/UploadAvatar/ui/UploadAvatar.stories.tsx b/src/features/profile/UploadAvatar/ui/UploadAvatar.stories.tsx
@@ -16,4 +16,11 @@ export const Default: Story = {
   args: {
     imageUrl: 'https://media.tacdn.com/media/attractions-splice-spp-674x446/07/03/1c/9c.jpg',
   },
+  decorators: [
+    Story => (
+      <div style={{ display: 'flex' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
diff --git a/src/features/profile/UploadAvatar/ui/UploadAvatar.tsx b/src/features/profile/UploadAvatar/ui/UploadAvatar.tsx
@@ -1,10 +1,10 @@
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { classNames } from '@/shared/lib';
 import { Avatar, Button } from '@/shared/ui';
 
 import classes from './UploadAvatar.module.scss';
-import { classNames } from '@/shared/lib';
 
 interface IProps {
   imageUrl: string;
@@ -17,22 +17,20 @@ export const UploadAvatar = memo<IProps>(function UploadAvatar(props) {
   const { t } = useTranslation();
 
   return (
-    <div className={classNames(className)}>
+    <div className={classNames(classes['upload-avatar'], className)}>
       <Avatar
         imageUrl={imageUrl}
         size="xl"
         alt="Avatar"
       />
-      <div>
-        <Button
-          className={classes['upload-btn']}
-          variant="filled"
-          color="primary"
-          full
-        >
-          {t('Upload')}
-        </Button>
-      </div>
+      <Button
+        className={classes['upload-avatar__btn']}
+        variant="filled"
+        color="primary"
+        full
+      >
+        {t('Upload')}
+      </Button>
     </div>
   );
 });
diff --git a/src/widgets/EntireArticle/ui/EntireArticle.stories.tsx b/src/widgets/EntireArticle/ui/EntireArticle.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { withStoreDecorator } from '@/shared/config/storybook/decorators/withStoreDecorator';
+import { commentSlice } from '@/entities/Comment';
 import { articleSlice } from '@/entities/Article';
 import { EntireArticle } from './EntireArticle';
 
@@ -9,7 +10,22 @@ const meta: Meta<typeof EntireArticle> = {
   component: EntireArticle,
   decorators: [
     withStoreDecorator({
-      asyncReducers: { [articleSlice.name]: articleSlice.reducer },
+      initialState: {
+        session: {
+          data: {
+            id: 2,
+            username: 'pespatron',
+            isAuthenticated: true,
+            token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ik5vdCBHb29kIEZvciBZb3UiLCJpYXQiOjE1MTYyMzkwMjJ9.PuT8C27aM6eEWFws3c4Negisv_wWtmlT4Eg9Gn-AnNT',
+            avatarUrl: 'https://static.espreso.tv/uploads/photobank/240000_241000/240133_photo5201982866597200294_new_960x380_0.webp',
+            role: 'user',
+          },
+        },
+      },
+      asyncReducers: {
+        [articleSlice.name]: articleSlice.reducer,
+        [commentSlice.name]: commentSlice.reducer,
+      },
     }),
   ],
 };

diff --git a/src/widgets/Navbar/ui/Navbar.stories.tsx b/src/widgets/Navbar/ui/Navbar.stories.tsx
@@ -12,7 +12,7 @@ const meta: Meta<typeof Navbar> = {
 export default meta;
 type Story = StoryObj<typeof Navbar>;
 
-export const NotLoggedIn: Story = {
+export const LoggedOut: Story = {
   args: {},
   decorators: [withStoreDecorator()],
 };
@@ -23,10 +23,14 @@ export const LoggedIn: Story = {
     withStoreDecorator({
       initialState: {
         session: {
-          id: '1',
-          username: 'Stas',
-          token: 'Bearer asdasdadasdasdasdasd',
-          isAuthenticated: true,
+          data: {
+            id: 2,
+            username: 'pespatron',
+            isAuthenticated: true,
+            token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ik5vdCBHb29kIEZvciBZb3UiLCJpYXQiOjE1MTYyMzkwMjJ9.PuT8C27aM6eEWFws3c4Negisv_wWtmlT4Eg9Gn-AnNT',
+            avatarUrl: 'https://static.espreso.tv/uploads/photobank/240000_241000/240133_photo5201982866597200294_new_960x380_0.webp',
+            role: 'user',
+          },
         },
       },
     }),

diff --git a/src/widgets/ProfileSettings/ui/ProfileSettings/ProfileSettings.stories.tsx b/src/widgets/ProfileSettings/ui/ProfileSettings/ProfileSettings.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { withStoreDecorator } from '@/shared/config/storybook/decorators/withStoreDecorator';
+import { ProfileSettings } from './ProfileSettings';
+
+const meta: Meta<typeof ProfileSettings> = {
+  title: 'Widgets/ProfileSettings',
+  component: ProfileSettings,
+  decorators: [withStoreDecorator()],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProfileSettings>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/widgets/Sidebar/ui/Sidebar/Sidebar.stories.tsx b/src/widgets/Sidebar/ui/Sidebar/Sidebar.stories.tsx
@@ -3,16 +3,38 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Sidebar } from './Sidebar';
 import { withStoreDecorator } from '@/shared/config/storybook/decorators/withStoreDecorator';
 
-// 👇 This default export determines where your story goes in the story list
 const meta: Meta<typeof Sidebar> = {
   title: 'Widgets/Sidebar',
   component: Sidebar,
-  decorators: [withStoreDecorator()],
+  tags: ['autodocs'],
 };
 
 export default meta;
 type Story = StoryObj<typeof Sidebar>;
 
-export const Default: Story = {
+export const LoggedOut: Story = {
   args: {},
+  decorators: [
+    withStoreDecorator({}),
+  ],
+};
+
+export const LoggedIn: Story = {
+  args: {},
+  decorators: [
+    withStoreDecorator({
+      initialState: {
+        session: {
+          data: {
+            id: 2,
+            username: 'pespatron',
+            isAuthenticated: true,
+            token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ik5vdCBHb29kIEZvciBZb3UiLCJpYXQiOjE1MTYyMzkwMjJ9.PuT8C27aM6eEWFws3c4Negisv_wWtmlT4Eg9Gn-AnNT',
+            avatarUrl: 'https://static.espreso.tv/uploads/photobank/240000_241000/240133_photo5201982866597200294_new_960x380_0.webp',
+            role: 'user',
+          },
+        },
+      },
+    }),
+  ],
 };