[New Component] Aspect Ratio component (#656)

src/components/ui/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,25 @@
+'use client';
+import React from 'react';
+import { customClassSwitcher } from '~/core';
+import { clsx } from 'clsx';
+const COMPONENT_NAME = 'AspectRatio';
+
+export type AspectRatioProps = {
+    children: React.ReactNode;
+    customRootClass?: string;
+    className?: string;
+    ratio?: string;
+    props: Record<string, any>[];
+}
+
+const AspectRatio = ({ children, customRootClass, className, ratio="1", ...props }: AspectRatioProps) => {
+
+    if (isNaN(Number(ratio)) && !ratio.match(/^(\d+)\/(\d+)$/)) ratio = "1"
+    if (Number(ratio) <= 0) ratio = "1"
+
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    return <div style={{aspectRatio:ratio}} className={clsx(rootClass, className)} {...props}>{children} </div>
+}
+AspectRatio.displayName = COMPONENT_NAME;
+
+export default AspectRatio;

src/components/ui/AspectRatio/stories/AspectRatio.stories.js

@@ -0,0 +1,25 @@
+import AspectRatio from '../AspectRatio';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Components/AspectRatio',
+    component: AspectRatio,
+    render: (args) => <SandboxEditor>
+        <AspectRatio {...args} >
+            <img
+				className="Image"
+				src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?cs=srgb&dl=pexels-bri-schneiter-28802-346529.jpg&fm=jpg"
+				alt="Landscape photograph"
+			/>
+            </AspectRatio>
+    </SandboxEditor>
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+    args: {
+        className:"",
+        ratio: "16/9"
+    }
+};

src/components/ui/AspectRatio/tests/AspectRatio.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AspectRatio from '../AspectRatio';
+
+describe('AspectRatio', () => {
+    test('renders AspectRatio component', () => {
+        render(<AspectRatio>Content</AspectRatio>);
+        expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+
+    test('applies custom classes correctly', () => {
+        render(<AspectRatio  className="additional-class">Content</AspectRatio>);
+        const divElement = screen.getByText('Content');
+        expect(divElement).toHaveClass('additional-class');
+    });
+
+    test('applies correct aspect ratio', () => {
+        render(<AspectRatio ratio="16/9">Content</AspectRatio>);
+        expect(screen.getByText('Content').style.aspectRatio).toBe('16/9');
+    });
+
+    test('applies correct aspect ratio when ratio is not provided', () => {
+        render(<AspectRatio >Content</AspectRatio>);
+        expect(screen.getByText('Content').style.aspectRatio).toBe('1');
+    });
+
+    test('applies correct aspect ratio when ratio is invalid', () => {
+        render(<AspectRatio ratio="invalid">Content</AspectRatio>);
+        expect(screen.getByText('Content').style.aspectRatio).toBe('1');
+    });
+
+    test('applies correct aspect ratio when ratio contains a character', () => {
+        render(<AspectRatio ratio="16/o">Content</AspectRatio>);
+        expect(screen.getByText('Content').style.aspectRatio).toBe('1');
+    });
+
+    test('applies correct aspect ratio when ratio is negative', () => {
+        render(<AspectRatio ratio="-5">Content</AspectRatio>);
+        expect(screen.getByText('Content').style.aspectRatio).toBe('1');
+    });
+
+
+});