@envive-ai/react-toolkit-v3 0.3.5

package/src/components/Image/__tests__/Image.test.tsx

@@ -0,0 +1,571 @@
+import '@testing-library/jest-dom';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Image } from '../Image';
+import { ImageAspectRatio, ImageObjectFit } from '../types';
+
+describe('Image', () => {
+  describe('Basic rendering', () => {
+    it('should render image with required props', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
+      expect(img).toHaveAttribute('alt', 'Test image');
+    });
+
+    it('should render container div with correct classes', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toBeInTheDocument();
+      expect(wrapper.tagName).toBe('DIV');
+      expect(wrapper).toHaveClass('envive-tw-relative');
+      expect(wrapper).toHaveClass('envive-tw-overflow-hidden');
+    });
+
+    it('should apply id to container', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          id="test-image-id"
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveAttribute('id', 'test-image-id');
+    });
+
+    it('should apply testId to container', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          testId="test-image"
+        />,
+      );
+
+      expect(screen.getByTestId('test-image')).toBeInTheDocument();
+    });
+  });
+
+  describe('Aspect ratio', () => {
+    it('should apply square aspect ratio class', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          aspectRatio={ImageAspectRatio.SQUARE}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('envive-tw-aspect-square');
+    });
+
+    it('should apply portrait aspect ratio class', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          aspectRatio={ImageAspectRatio.PORTRAIT}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('envive-tw-aspect-portrait');
+    });
+
+    it('should not apply aspect ratio class when not provided', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).not.toHaveClass('envive-tw-aspect-square');
+      expect(wrapper).not.toHaveClass('envive-tw-aspect-[3/4]');
+    });
+  });
+
+  describe('Object fit', () => {
+    it('should apply cover object fit class by default', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveClass('envive-tw-object-cover');
+    });
+
+    it('should apply cover object fit class', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          objectFit={ImageObjectFit.COVER}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveClass('envive-tw-object-cover');
+    });
+
+    it('should apply contain object fit class', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          objectFit={ImageObjectFit.CONTAIN}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveClass('envive-tw-object-contain');
+    });
+
+    it('should apply fill object fit class', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          objectFit={ImageObjectFit.FILL}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveClass('envive-tw-object-fill');
+    });
+
+    it('should apply none object fit class', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          objectFit={ImageObjectFit.NONE}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveClass('envive-tw-object-none');
+    });
+
+    it('should apply scale-down object fit class', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          objectFit={ImageObjectFit.SCALE_DOWN}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveClass('envive-tw-object-scale-down');
+    });
+  });
+
+  describe('Rounded corners', () => {
+    it('should not apply rounded class by default', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).not.toHaveClass('envive-tw-rounded-[--envive-global-custom-border-radius]');
+    });
+
+    it('should apply rounded class when rounded is true', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          rounded
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('envive-tw-rounded-global-custom');
+    });
+
+    it('should not apply rounded class when rounded is false', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          rounded={false}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).not.toHaveClass('envive-tw-rounded-global-custom');
+    });
+  });
+
+  describe('Width', () => {
+    it('should apply width style when width is provided as number', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          width={200}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveStyle({ width: '200px' });
+    });
+
+    it('should apply width style when width is provided as string', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          width="50%"
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveStyle({ width: '50%' });
+    });
+
+    it('should apply full width class when width is not provided', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('envive-tw-w-full');
+    });
+
+    it('should not apply width class when width is provided', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          width={200}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).not.toHaveClass('envive-tw-w-full');
+    });
+  });
+
+  describe('Loading state', () => {
+    it('should show skeleton when isLoading prop is true', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          isLoading
+        />,
+      );
+
+      const skeleton = container.querySelector('[role="img"]');
+      expect(skeleton).toBeInTheDocument();
+      expect(skeleton?.tagName).toBe('DIV');
+    });
+
+    it('should show skeleton while image is loading', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const skeleton = container.querySelector('[role="img"]');
+      expect(skeleton).toBeInTheDocument();
+    });
+
+    it('should hide image while loading', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveClass('envive-tw-opacity-0');
+    });
+
+    it('should apply skeleton class to container when loading', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          isLoading
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('envive-tw-animate-pulse');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should apply role attribute', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveAttribute('role', 'img');
+    });
+
+    it('should apply presentation role', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt=""
+          role="presentation"
+          aria-hidden={false}
+        />,
+      );
+
+      const img = screen.getByRole('presentation');
+      expect(img).toBeInTheDocument();
+    });
+
+    it('should apply none role', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt=""
+          role="none"
+        />,
+      );
+
+      const img = screen.getByRole('none');
+      expect(img).toBeInTheDocument();
+    });
+
+    it('should apply aria-hidden attribute', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    it('should apply aria-hidden false', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveAttribute('aria-hidden', 'false');
+    });
+
+    it('should apply aria-label when provided', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          aria-label="Custom label"
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveAttribute('aria-label', 'Custom label');
+    });
+
+    it('should apply aria-labelledby when provided', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          aria-labelledby="label-id"
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveAttribute('aria-labelledby', 'label-id');
+    });
+
+    it('should apply aria-describedby when provided', () => {
+      render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          aria-describedby="description-id"
+        />,
+      );
+
+      const img = screen.getByAltText('Test image');
+      expect(img).toHaveAttribute('aria-describedby', 'description-id');
+    });
+
+    it('should use aria-label in skeleton when provided', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          isLoading
+          aria-label="Skeleton label"
+        />,
+      );
+
+      const skeleton = container.querySelector('[role="img"]');
+      expect(skeleton).toHaveAttribute('aria-label', 'Skeleton label');
+    });
+
+    it('should use alt text in skeleton when aria-label is not provided', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          isLoading
+        />,
+      );
+
+      const skeleton = container.querySelector('[role="img"]');
+      expect(skeleton).toHaveAttribute('aria-label', 'Test image');
+    });
+
+    it('should apply aria-hidden to skeleton when provided', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden
+          isLoading
+        />,
+      );
+
+      const skeleton = container.querySelector('[role="img"]');
+      expect(skeleton).toHaveAttribute('aria-hidden', 'true');
+    });
+  });
+
+  describe('Custom props', () => {
+    it('should apply custom className to container', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          className="custom-class"
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveClass('custom-class');
+    });
+
+    it('should apply custom style to container', () => {
+      const { container } = render(
+        <Image
+          src="https://example.com/image.jpg"
+          alt="Test image"
+          role="img"
+          aria-hidden={false}
+          style={{ marginTop: '20px' }}
+        />,
+      );
+
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper).toHaveStyle({ marginTop: '20px' });
+    });
+  });
+});

package/src/components/Image/hooks/useGetAccessibilityProperties.ts

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import type { ImageProps } from '../types';
+
+export const useGetAccessibilityProperties = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  role = 'img',
+  'aria-hidden': ariaHidden,
+}: {
+  'aria-label'?: ImageProps['aria-label'];
+  'aria-labelledby'?: ImageProps['aria-labelledby'];
+  'aria-describedby'?: ImageProps['aria-describedby'];
+  role?: ImageProps['role'];
+  'aria-hidden'?: ImageProps['aria-hidden'];
+}) => {
+  const accessibilityProps = useMemo(() => {
+    const props: Record<string, string | boolean> = {};
+
+    if (ariaLabel) {
+      props['aria-label'] = ariaLabel;
+    }
+
+    if (ariaLabelledBy) {
+      props['aria-labelledby'] = ariaLabelledBy;
+    }
+
+    if (ariaDescribedBy) {
+      props['aria-describedby'] = ariaDescribedBy;
+    }
+
+    // role defaults to 'img' if not specified, so we always include it
+    props.role = role;
+
+    if (ariaHidden !== undefined) {
+      props['aria-hidden'] = ariaHidden;
+    }
+
+    return props;
+  }, [ariaLabel, ariaLabelledBy, ariaDescribedBy, role, ariaHidden]);
+
+  return { accessibilityProps };
+};

package/src/components/Image/hooks/useGetAspectRatioProperties.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { ImageAspectRatio } from '../types';
+import type { ImageProps } from '../types';
+
+export const useGetAspectRatioProperties = (aspectRatio?: ImageProps['aspectRatio']) => {
+  const aspectRatioClass = useMemo(() => {
+    if (!aspectRatio) return undefined;
+
+    const aspectRatioClassMap: Record<ImageAspectRatio, string> = {
+      [ImageAspectRatio.SQUARE]: 'envive-tw-aspect-square',
+      [ImageAspectRatio.PORTRAIT]: 'envive-tw-aspect-portrait',
+      [ImageAspectRatio.LANDSCAPE]: 'envive-tw-aspect-landscape',
+      [ImageAspectRatio.GLOBAL_CUSTOM]: 'envive-tw-aspect-global-custom',
+    };
+
+    return aspectRatioClassMap[aspectRatio];
+  }, [aspectRatio]);
+
+  return { aspectRatioClass };
+};

package/src/components/Image/hooks/useGetObjectFitProperties.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { ImageObjectFit } from '../types';
+import type { ImageProps } from '../types';
+
+export const useGetObjectFitProperties = (objectFit: ImageProps['objectFit']) => {
+  const objectFitClass = useMemo(() => {
+    const objectFitClassMap: Record<ImageObjectFit, string> = {
+      [ImageObjectFit.CONTAIN]: 'envive-tw-object-contain',
+      [ImageObjectFit.COVER]: 'envive-tw-object-cover',
+      [ImageObjectFit.FILL]: 'envive-tw-object-fill',
+      [ImageObjectFit.NONE]: 'envive-tw-object-none',
+      [ImageObjectFit.SCALE_DOWN]: 'envive-tw-object-scale-down',
+    };
+
+    return (
+      objectFitClassMap[objectFit as ImageObjectFit] || objectFitClassMap[ImageObjectFit.COVER]
+    );
+  }, [objectFit]);
+
+  return { objectFitClass };
+};

package/src/components/Image/hooks/useGetRoundedProperties.ts

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+import type { ImageProps } from '../types';
+
+export const useGetRoundedProperties = (rounded: ImageProps['rounded']) => {
+  const roundedClass = useMemo(() => {
+    return rounded ? 'envive-tw-rounded-global-custom' : undefined;
+  }, [rounded]);
+
+  return { roundedClass };
+};

package/src/components/Image/hooks/useGetSkeletonProperties.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import type { ImageProps } from '../types';
+
+export const useGetSkeletonProperties = (isLoading?: ImageProps['isLoading']) => {
+  const skeletonClass = useMemo(() => {
+    if (!isLoading) return undefined;
+
+    return 'envive-tw-animate-pulse';
+  }, [isLoading]);
+
+  return { skeletonClass };
+};

package/src/components/Image/hooks/useGetWidthProperties.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import type { ImageProps } from '../types';
+
+export const useGetWidthProperties = (width: ImageProps['width']) => {
+  const sizeStyle = useMemo(() => {
+    const style: React.CSSProperties = {};
+
+    if (width) {
+      style.width = typeof width === 'number' ? `${width}px` : width;
+    }
+
+    return Object.keys(style).length > 0 ? style : undefined;
+  }, [width]);
+
+  const widthClass = useMemo(() => {
+    return !width ? 'envive-tw-w-full' : undefined;
+  }, [width]);
+
+  return {
+    sizeStyle,
+    widthClass,
+  };
+};