feat: add image component (#44590)

Co-authored-by: IsmailTlemcani <ismail.tlemcani@gmail.com>

tools/ui-components/src/image/image.stories.tsx

@@ -0,0 +1,31 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+import { Image } from './image';
+import { ImageProps } from './image.types';
+const story = {
+  title: 'Example/Image',
+  component: Image
+};
+
+const ref = React.createRef<HTMLImageElement>();
+
+const Template: Story<ImageProps> = args => {
+  return <Image {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  alt: "Quincy Larson's signature",
+  ref: ref,
+  src: 'https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
+};
+
+export const Avatar = Template.bind({});
+Avatar.args = {
+  ref: ref,
+  alt: "camper's avatar",
+  src: 'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png',
+  className: 'object-cover img-fluid max-w-full h-auto'
+};
+
+export default story;

tools/ui-components/src/image/image.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Image } from './image';
+
+describe('Render the image', () => {
+  it('sould render the image with the alt and src attributes', () => {
+    render(
+      <Image
+        alt="Quincy Larson's Signature"
+        src='https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
+      />
+    );
+    const image = screen.getByRole('img');
+    expect(image).toHaveAttribute(
+      'src',
+      'https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
+    );
+    expect(image).toHaveAttribute('alt', "Quincy Larson's Signature");
+  });
+});

tools/ui-components/src/image/image.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+
+import React from 'react';
+import { ImageProps } from './image.types';
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  ({ alt, className, src }, ref): JSX.Element => {
+    return <img ref={ref} alt={alt} src={src} className={className} />;
+  }
+);

tools/ui-components/src/image/image.types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ImageProps {
+  alt: string;
+  className?: string;
+  src: string;
+  ref: React.RefObject<HTMLImageElement>;
+}

tools/ui-components/src/image/index.tsx

@@ -0,0 +1 @@
+export { Image } from './image';

tools/ui-components/src/index.ts

@@ -2,3 +2,4 @@
 import './global.css';
 export { Button } from './button';
 export { Alert } from './alert';
+export { Image } from './image';