Components / Image

components/image/.npmignore

@@ -0,0 +1 @@
+src

components/image/README.md

@@ -0,0 +1,71 @@
+# `@byndyusoft-ui/image`
+---
+
+### Installation
+```sh
+npm i @byndyusoft-ui/image
+# or
+yarn add @byndyusoft-ui/image
+```
+
+
+### Usage Image
+#### Basic usage
+```jsx
+import React from 'react';
+import Image from '@byndyusoft-ui/image';
+
+const App = () => {
+  return (
+    <Image
+      src="https://example.com/image.jpg"
+      alt="Example Image"
+    />
+  );
+};
+
+export default App;
+```
+
+#### Fallback components
+```jsx
+<Image
+  src="https://example.com/image.jpg"
+  alt="Example Image"
+  fallback={<div>Loading...</div>}
+  errorFallback={<div>Error loading image</div>}
+/>
+```
+
+#### Fallback src images
+```jsx
+<Image
+  src="https://example.com/image.jpg"
+  alt="Example Image"
+  fallbackSrc="https://example.com/fallback.jpg"
+  errorFallbackSrc="https://example.com/error.jpg"
+/>
+```
+
+#### Custom class names
+The rootFallbackClassName parameter applies a class to the container that will display the fallback or errorFallback elements.
+```jsx
+ <Image
+  src="https://example.com/image.jpg"
+  alt="Example Image"
+  className="custom-image-class"
+  rootFallbackClassName="custom-root-fallback-class"
+  fallback={<div>Loading...</div>}
+  errorFallback={<div>Error loading image</div>}
+/>
+```
+
+#### Lazy loading
+By default, `lazy` is set to `true`, which means the image will only be loaded when it enters the viewport. 
+This is achieved using the Intersection Observer pattern. If `lazy` is set to `false`, the image will be loaded immediately.
+```jsx
+<Image
+  src="https://example.com/image.jpg"
+  alt="Example Image"
+  lazy={false}
+```

components/image/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@byndyusoft-ui/image",
+  "version": "0.0.2",
+  "description": "Byndyusoft UI Image React Component",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "component",
+    "image"
+  ],
+  "author": "Gleb Fomin <gleb.fom28@gmail.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/components/image#readme",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "clean": "rimraf dist",
+    "lint": "eslint src --config ../../eslint.config.js",
+    "test": "jest --config ../../jest.config.js --roots components/image/src"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "@byndyusoft-ui/use-intersection-observer": "^0.0.1"
+  }
+}

components/image/src/Image.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef, ReactElement, useImperativeHandle, useRef } from 'react';
+import { useImage } from './useImage';
+import type { IImageProps } from './Image.types';
+
+const Image = forwardRef<HTMLImageElement, IImageProps>((props, forwardedRef) => {
+    const {
+        src,
+        alt = '',
+        lazy = true,
+        fallback,
+        fallbackSrc,
+        errorFallback,
+        errorFallbackSrc,
+        className,
+        rootFallbackClassName,
+        ...otherProps
+    } = props;
+
+    const internalRef = useRef<HTMLImageElement | null>(null);
+
+    const { isLoading, isError, setObserverTargetRef } = useImage({ src, lazy });
+
+    const setRefs = (node: HTMLImageElement | null): void => {
+        internalRef.current = node;
+        setObserverTargetRef(node);
+    };
+
+    const renderImage = (imageSrc: string): JSX.Element => (
+        <img ref={setRefs} className={className} src={imageSrc} alt={alt} {...otherProps} />
+    );
+
+    const renderFallback = (content: ReactElement): JSX.Element => (
+        <div ref={setRefs} className={rootFallbackClassName}>
+            {content}
+        </div>
+    );
+
+    useImperativeHandle(forwardedRef, () => internalRef.current as HTMLImageElement);
+
+    if (fallback && isLoading) return renderFallback(fallback);
+
+    if (errorFallback && isError) return renderFallback(errorFallback);
+
+    if (fallbackSrc && isLoading) return renderImage(fallbackSrc);
+
+    if (errorFallbackSrc && isError) return renderImage(errorFallbackSrc);
+
+    return renderImage(src);
+});
+
+Image.displayName = 'Image';
+
+export default Image;

components/image/src/Image.types.ts

@@ -0,0 +1,30 @@
+import { Dispatch, ImgHTMLAttributes, ReactElement, SetStateAction } from 'react';
+import { Callback } from '@byndyusoft-ui/types';
+
+export interface IImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    className?: string;
+    rootFallbackClassName?: string;
+    fallback?: ReactElement;
+    fallbackSrc?: string;
+    errorFallback?: ReactElement;
+    errorFallbackSrc?: string;
+    lazy?: boolean;
+}
+
+type TSetState<T> = Dispatch<SetStateAction<T>>;
+
+export interface IUseImageProps {
+    src: string;
+    lazy?: boolean;
+}
+
+export interface IUseImageReturn {
+    setObserverTargetRef: TSetState<Element | null>;
+    isLoading: boolean;
+    isError: boolean;
+}
+
+export type TLoadImageFunction = Callback<
+    [src: string, setIsLoading: TSetState<boolean>, setIsError: TSetState<boolean>]
+>;

components/image/src/__stories__/Image.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+import { Markdown } from '@storybook/blocks';
+import Readme from '../../README.md';
+
+<Meta title="components/Image" />
+
+<Markdown>{Readme}</Markdown>

components/image/src/__stories__/Image.stories.module.css

@@ -0,0 +1,35 @@
+.wrapper {
+    margin: auto;
+    width: 800px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: 4px;
+}
+
+.errorFallback {
+    box-sizing: border-box;
+    border: 4px solid #7a0000;
+    background: #ffa9a9;
+    color: #b30000;
+    font-size: 32px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}

components/image/src/__stories__/Image.stories.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import Image from '../Image';
+import { IImageProps } from '../Image.types';
+import imagePlaceholder from './image-placeholder.png';
+import cls from './Image.stories.module.css';
+
+interface ISkeletonProps {
+    width: number | string;
+    height: number | string;
+}
+
+interface ITemplateProps {
+    mockImageIds: Array<number>;
+    imageProps: Partial<IImageProps>;
+}
+
+const generateRandomArray = (maxNumber: number, length: number): number[] => {
+    const randomArray = [];
+    for (let i = 0; i < length; i++) {
+        const randomNumber = Math.floor(Math.random() * maxNumber) + 1;
+        randomArray.push(randomNumber);
+    }
+    return randomArray;
+};
+
+const FallbackSkeleton = ({ width, height }: ISkeletonProps): JSX.Element => (
+    <div className={cls.skeleton} style={{ width, height }} />
+);
+
+const ErrorFallbackComponent = ({ width, height }: ISkeletonProps): JSX.Element => (
+    <div className={cls.errorFallback} style={{ width, height }}>
+        Error Fallback
+    </div>
+);
+
+const Template = ({ mockImageIds, imageProps }: ITemplateProps): JSX.Element => (
+    <div className={cls.wrapper}>
+        {mockImageIds?.map((id, index) => (
+            <Image
+                {...imageProps}
+                key={`${id}_${index + 1}`}
+                src={`https://rickandmortyapi.com/api/character/avatar/${id}.jpeg`}
+            />
+        ))}
+    </div>
+);
+
+export const LazyFallbackSkeleton: StoryObj<typeof Template> = {
+    args: {
+        mockImageIds: generateRandomArray(826, 100),
+        imageProps: {
+            width: 300,
+            height: 300,
+            fallback: <FallbackSkeleton width={300} height={300} />,
+            errorFallback: <ErrorFallbackComponent width={300} height={300} />
+        }
+    }
+};
+
+export const LazyFallbackSrc: StoryObj<typeof Template> = {
+    args: {
+        mockImageIds: generateRandomArray(826, 100),
+        imageProps: {
+            width: 300,
+            height: 300,
+            fallbackSrc: imagePlaceholder,
+            errorFallback: <ErrorFallbackComponent width={300} height={300} />
+        }
+    }
+};
+
+export const PreloadFallbackSkeleton: StoryObj<typeof Template> = {
+    args: {
+        mockImageIds: generateRandomArray(826, 30),
+        imageProps: {
+            width: 300,
+            height: 300,
+            lazy: false,
+            fallback: <FallbackSkeleton width={300} height={300} />,
+            errorFallback: <ErrorFallbackComponent width={300} height={300} />
+        }
+    }
+};
+
+export const PreloadFallbackSrc: StoryObj<typeof Template> = {
+    args: {
+        mockImageIds: generateRandomArray(826, 30),
+        imageProps: {
+            width: 300,
+            height: 300,
+            lazy: false,
+            fallbackSrc: imagePlaceholder,
+            errorFallback: <ErrorFallbackComponent width={300} height={300} />
+        }
+    }
+};
+
+export const ErrorFallback: StoryObj<typeof Template> = {
+    args: {
+        mockImageIds: [-1, -2, -3, -4, -5, -6],
+        imageProps: {
+            width: 300,
+            height: 300,
+            fallback: <FallbackSkeleton width={300} height={300} />,
+            errorFallback: <ErrorFallbackComponent width={300} height={300} />
+        }
+    }
+};
+
+export const ErrorFallbackSrc: StoryObj<typeof Template> = {
+    args: {
+        mockImageIds: [-1, -2, -3, -4, -5, -6],
+        imageProps: {
+            width: 300,
+            height: 300,
+            fallback: <FallbackSkeleton width={300} height={300} />,
+            errorFallbackSrc: imagePlaceholder
+        }
+    }
+};
+
+export default {
+    title: 'components/Image',
+    component: Template
+};