feat: improve avatar ts-docs

Author: MrMaz

.gitignore

@@ -111,6 +111,6 @@ dist
 .idea
 
 # generated docs
-./docs
+/docs
 *storybook.log
-storybook-static
+/storybook-static

packages/react-material-ui/src/components/Avatar/Avatar.tsx

@@ -3,16 +3,46 @@ import Box from '@mui/material/Box';
 import { Image } from './Styles';
 import Text from '../Text';
 
-type Props = {
+/**
+ * Avatar component props.
+ */
+export type AvatarProps = {
+  /** Path or URL to image file */
   src?: string;
+  /** Alternate attribute text */
   alt?: string;
+  /** Size in pixels */
   size?: number;
+  /** Optional and/or fallback initials to display with the avatar */
   initials?: string;
+  /** Custom `onClick` handler */
   onClick?: () => void;
+  /** Background color name or code */
   backgroundColor?: string;
 };
 
-export const Avatar = (props: Props) => {
+/**
+ * The Avatar component is a UI element used to display a user's
+ * profile picture or initials. It supports various features such as image
+ * source handling, fallbacks (e.g., initials or default image),
+ * and customization options for styling and sizes.
+ * 
+ * @see [Storybook - Avatar](https://storybook.rockets.tools/?path=/docs/avatar)
+ * 
+ * @example
+ * ```tsx
+ * <Avatar 
+ *   src="https://example.com/nonexistent.jpg"
+ *   alt="Annabel B"
+ *   initials="AB"
+ *   size={40}
+ *   backgroundColor="#789abc"
+ * />
+ * ```
+ * 
+ * @param props - Avatar component props
+ */
+export const Avatar = (props: AvatarProps) => {
   const { src, alt, size = 30, initials, backgroundColor, onClick } = props;
   const [failed, setFailed] = useState(!src);
 
@@ -57,5 +87,3 @@ export const Avatar = (props: Props) => {
     </Box>
   );
 };
-
-export default Avatar;

packages/react-material-ui/src/components/Avatar/index.ts

@@ -1 +1 @@
-export { default } from './Avatar';
+export { Avatar, AvatarProps } from './Avatar';

packages/react-material-ui/src/components/HeaderAccount/HeaderAccount.tsx

@@ -1,7 +1,7 @@
 import React, { useState, ReactNode } from 'react';
 import Box from '@mui/material/Box';
 import Text from '../Text';
-import Avatar from '../Avatar';
+import { Avatar } from '../Avatar';
 import { TextProps } from 'interfaces';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import Button from '@mui/material/Button';

packages/react-material-ui/src/index.ts

@@ -1,4 +1,4 @@
-export { default as Avatar } from './components/Avatar';
+export { Avatar, AvatarProps } from './components/Avatar';
 export { default as Checkbox } from './components/Checkbox';
 
 import AppBar from './components/AppBar';