docs: 📝 add storybook story for sidebar-profile and docs

client/src/widgets/Sidebar/ui/sidebar-profile/sidebar-profile.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { SidebarProfile, SidebarProfileProps } from './sidebar-profile';
+import { User } from 'entities/user';
+
+const defaultUser: User = {
+  _id: '123123312',
+  email: '[email protected]',
+  password: '$2a$05$7AnHdyBKd7kh78kkSt4OIOaBAidnedL3Sr6ZfFOKG5xcVatrPT4kq',
+  isRegistered: true,
+  fullName: 'John Doe',
+  username: 'john.doe',
+  image: '/images/user-images/user-red.png',
+};
+
+const sidebarProfileProps: SidebarProfileProps = {
+  active: false,
+  user: defaultUser,
+};
+
+type Story = StoryObj<typeof SidebarProfile>;
+const SidebarProfileTemplate: Story = { render: args => <SidebarProfile {...args} /> };
+
+export const Playground = { ...SidebarProfileTemplate };
+Playground.args = sidebarProfileProps;
+
+// Active User Profile
+export const ActiveUserProfile = { ...SidebarProfileTemplate };
+ActiveUserProfile.args = {
+  ...sidebarProfileProps,
+  active: true,
+};
+
+// Inactive User Profile
+export const InactiveUserProfile = { ...SidebarProfileTemplate };
+InactiveUserProfile.args = {
+  ...sidebarProfileProps,
+  active: false,
+};
+
+// Unregistered User Profile
+export const UnregisteredUserProfile = { ...SidebarProfileTemplate };
+UnregisteredUserProfile.args = {
+  ...sidebarProfileProps,
+  user: undefined,
+};
+
+// Active Unregistered User Profile
+export const ActiveUnregisteredUserProfile = { ...SidebarProfileTemplate };
+ActiveUnregisteredUserProfile.args = {
+  ...sidebarProfileProps,
+  user: undefined,
+  active: true,
+};
+
+// User Profile with Long Name
+export const UserProfileWithLongName = { ...SidebarProfileTemplate };
+UserProfileWithLongName.args = {
+  ...sidebarProfileProps,
+  user: {
+    _id: '650544eead52282dbf4397aa',
+    email: '[email protected]',
+    password: '$2a$05$7AnHdyBKd7kh78kkSt4OIOaBAidnedL3Sr6ZfFOKG5xcVatrPT4kq',
+    isRegistered: true,
+    fullName: 'Johnathan Doe the Third',
+    username: 'john.doe.third',
+    image: '/images/user-images/user-blue.png',
+  },
+};
+
+// User Profile with No Image
+export const UserProfileWithNoImage = { ...SidebarProfileTemplate };
+UserProfileWithNoImage.args = {
+  ...sidebarProfileProps,
+  user: {
+    _id: '650544eead52282dbf4397ab',
+    email: '[email protected]',
+    password: '$2a$05$7AnHdyBKd7kh78kkSt4OIOaBAidnedL3Sr6ZfFOKG5xcVatrPT4kq',
+    isRegistered: true,
+    fullName: 'Jane Doe',
+    username: 'jane.doe',
+    image: '',
+  },
+};
+
+export default {
+  title: 'widgets/Sidebar/SidebarProfile',
+  component: SidebarProfile,
+  tags: ['autodocs'],
+} as Meta;

client/src/widgets/Sidebar/ui/sidebar-profile/sidebar-profile.tsx

@@ -23,11 +23,40 @@ interface UserData {
   userImg: string;
 }
 
-interface SidebarProfileProps {
+export interface SidebarProfileProps {
+  /**
+   * Determines the visual state of the user's real name and username. If true, they are highlighted.
+   */
   active: boolean;
+  /**
+   * The user object containing user information.
+   */
   user: User;
 }
 
+/**
+ * The SidebarProfile component displays the user's profile information in the sidebar.
+ * It shows the user's image, real name, and username. If the user is not registered, default data is shown.
+ *
+ * Example of usage:
+ *
+ * ```tsx
+ * import { SidebarProfile } from './SidebarProfile';
+ * import { User } from 'entities/user';
+ *
+ * const user = new User({
+ *   isRegistered: true,
+ *   fullName: 'John Doe',
+ *   username: 'john.doe',
+ *   image: '/images/user/john.png'
+ * });
+ *
+ * <SidebarProfile
+ *   active={true}
+ *   user={user}
+ * />
+ * ```
+ */
 export const SidebarProfile: React.FC<SidebarProfileProps> = props => {
   const { user, active } = props;
   // const { data: user } = useCheckAuth();