feat: storybook - image

packages/react-material-ui/__tests__/Image.spec.tsx

@@ -5,7 +5,7 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import Image from '../src/components/Image/Image';
+import { Image } from '../src/components/Image';
 
 describe('Image component', () => {
   const defaultSrc = 'fakeImage.jpg';

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

@@ -6,7 +6,7 @@ import IconButton from '@mui/material/IconButton';
 import ChevronLeft from '@mui/icons-material/ChevronLeft';
 import ChevronRight from '@mui/icons-material/ChevronRight';
 import { DrawerItem, DrawerItemProps } from './DrawerItem';
-import Image from '../Image';
+import { Image } from '../Image';
 import Box from '@mui/material/Box';
 import { TextProps } from 'interfaces';
 import { SxProps, Theme } from '@mui/material/styles';

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

@@ -1,16 +1,49 @@
 import React from 'react';
 import { Box, BoxProps } from '@mui/material';
 
-type Props = {
+/**
+ * Image component props.
+ */
+export type ImageProps = BoxProps & {
+  /** Path or URL to image file */
   src: string;
+  /** Alternate attribute text */
   alt?: string;
+  /** If true, the image will be displayed as a fluid element, adapting to the size of its container */
   imgFluid?: boolean;
+  /** Path or URL to a fallback image */
   defaultImage?: string;
+  /** Event handler for the image load event */
   onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  /** Event handler for the image error event */
   onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
 };
 
-const Image = (props: BoxProps & Props) => {
+/**
+ * The Image component is a UI element used to display an image
+ * with optional fluid resizing and error handling. It supports
+ * features such as fallback to a default image on error and
+ * custom event handlers for load and error events. It's props extend from
+ * [Material UI's Box](https://mui.com/material-ui/api/box/#props) component props, so every prop is interchangeable between those two.
+ *
+ * @see {@link [MUI Box Component](https://mui.com/material-ui/react-box/)}
+ * @see [Storybook - Image](https://storybook.rockets.tools/?path=/docs/image)
+ *
+ * @example
+ * ```tsx
+ * <Image
+ *   src="https://example.com/nonexistent.jpg"
+ *   alt="Example image"
+ *   imgFluid={true}
+ *   defaultImage="https://example.com/default.jpg"
+ *   onLoad={(event) => console.log('Image loaded', event)}
+ *   onError={(event) => console.log('Image failed to load', event)}
+ * />
+ * ```
+ *
+ * @param props - Image component props
+ */
+export const Image = (props: ImageProps) => {
   const { imgFluid, defaultImage, onLoad, onError, sx, ...otherProps } = props;
 
   const imageOnLoadHandler = (
@@ -41,5 +74,3 @@ const Image = (props: BoxProps & Props) => {
     />
   );
 };
-
-export default Image;

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

@@ -1 +1 @@
-export { default } from './Image';
+export { Image, ImageProps } from './Image';

packages/react-material-ui/src/components/submodules/AuthForm/index.tsx

@@ -16,7 +16,7 @@ import { Box, Button, Container, Card, CircularProgress } from '@mui/material';
 import Text from '../../../components/Text';
 import Link from '../../../components/Link';
 import { SchemaForm } from '../../../components/SchemaForm';
-import Image from '../../../components/Image';
+import { Image } from '../../../components/Image';
 
 import { CustomTextFieldWidget } from '../../../styles/CustomWidgets';
 

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

@@ -22,7 +22,7 @@ export { default as FormTemplate } from './components/FormTemplate';
 import HeaderAccount, { HeaderAccountProps } from './components/HeaderAccount';
 export { HeaderAccount, HeaderAccountProps };
 
-export { default as Image } from './components/Image';
+export { Image, ImageProps } from './components/Image';
 export { default as Link } from './components/Link';
 
 export { Navbar, NavbarProps } from './components/Navbar';

stories/Image.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import Box from '@mui/material/Box';
+import { Image } from '@concepta/react-material-ui';
+import rockets from './assets/rockets.svg';
+
+const meta = {
+  component: Image,
+  tags: ['autodocs'],
+  args: {
+    src: 'https://picsum.photos/400/200',
+  },
+  argTypes: {},
+  parameters: {
+    layout: 'centered', // or `padded` by default
+  },
+} satisfies Meta<typeof Image>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    imgFluid: true,
+    alt: 'Example image',
+  },
+};
+
+export const Alt: Story = {
+  args: {
+    alt: 'This is the alt text',
+  },
+};
+
+export const FallbackImage: Story = {
+  args: {
+    src: 'https://example.com/nonexistent.jpg',
+    defaultImage: rockets,
+  },
+};
+
+export const FluidImage: Story = {
+  args: {
+    src: 'https://picsum.photos/300/150',
+    imgFluid: true,
+  },
+  render: (args) => (
+    <Box sx={{ background: '#ffcccc', width: 400, height: 300 }}>
+      <Image {...args} />
+    </Box>
+  ),
+};
+
+export const ErrorHandler: Story = {
+  tags: ['!autodocs'],
+  args: {
+    src: 'https://example.com/nonexistent.jpg',
+    onError: () => {
+      fn();
+      window.alert('Image failed');
+    },
+  },
+};
+
+export const LoadHandler: Story = {
+  tags: ['!autodocs'],
+  args: {
+    onLoad: () => {
+      fn();
+      window.alert('Image loaded');
+    },
+  },
+};
+
+export const CustomStyles: Story = {
+  args: {
+    imgFluid: true,
+    sx: {
+      borderRadius: '20px',
+      // styles for example
+      border: '4px dashed #0000ff',
+    },
+  },
+};
+
+export const BoxProps: Story = {
+  args: {
+    src: rockets,
+    bgcolor: 'primary.main',
+    boxShadow: 3,
+    m: 4,
+    onClick: fn(),
+  },
+};