refactor: forward refs in Skeleton (#1450)

Author: kotAPI

src/components/ui/Skeleton/Skeleton.tsx

@@ -2,34 +2,52 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
 import { clsx } from 'clsx';
+
 const COMPONENT_NAME = 'Skeleton';
 
-export type SkeletonProps = {
-    loading:boolean;
-    className?:string;
-    customRootClass?:string;
-    children:React.ReactNode;
-    height:string;
-    width:string;
-    radius?:string;
+export type SkeletonProps = React.ComponentPropsWithoutRef<'div'> & {
+    loading: boolean;
+    customRootClass?: string;
+    height: string;
+    width: string;
+    radius?: string;
+};
 
-}
+const Skeleton = React.forwardRef<React.ElementRef<'div'>, SkeletonProps>(
+    (
+        {
+            loading = true,
+            className = '',
+            customRootClass = '',
+            children,
+            height,
+            width,
+            radius,
+            style,
+            ...props
+        },
+        ref
+    ) => {
+        if (!loading) return <>{children}</>;
 
-const Skeleton = ({ loading = true, className = '', customRootClass = '', children, height, width, radius, ...props }:SkeletonProps) => {
-    // If loading is false, return the children
-    if (!loading) return children;
+        const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <div
-        className={clsx(rootClass, className)} {...props} style={{
-
-            ['--skeleton-height' as any]: height,
-            ['--skeleton-width' as any]: width,
-            ['--skeleton-radius' as any]: radius
-        }}
-    >
-    </div>;
-};
+        return (
+            <div
+                ref={ref}
+                className={clsx(rootClass, className)}
+                style={{
+                    ...style,
+                    ['--skeleton-height' as any]: height,
+                    ['--skeleton-width' as any]: width,
+                    ['--skeleton-radius' as any]: radius
+                }}
+                {...props}
+            />
+        );
+    }
+);
 
 Skeleton.displayName = COMPONENT_NAME;
+
 export default Skeleton;

src/components/ui/Skeleton/tests/Skeleton.test.tsx

@@ -63,4 +63,45 @@ describe('Skeleton', () => {
         expect(div.style.getPropertyValue('--skeleton-width')).toBe('200px');
         expect(div.style.getPropertyValue('--skeleton-radius')).toBe('10px');
     });
+
+    it('merges custom style with skeleton variables', () => {
+        const { container } = render(
+            <Skeleton
+                {...defaultProps}
+                loading={true}
+                style={{ marginTop: '4px' }}
+            >
+                <div>Child</div>
+            </Skeleton>
+        );
+
+        const div = container.querySelector('div')!;
+        expect(div.style.getPropertyValue('--skeleton-height')).toBe('100px');
+        expect(div.style.marginTop).toBe('4px');
+    });
+
+    it('forwards refs to the underlying element', () => {
+        const ref = React.createRef<HTMLDivElement>();
+        render(
+            <Skeleton {...defaultProps} loading ref={ref}>
+                <p>Hidden content</p>
+            </Skeleton>
+        );
+        expect(ref.current).not.toBeNull();
+        expect(ref.current?.tagName).toBe('DIV');
+    });
+
+    it('renders without console errors', () => {
+        const consoleError = jest
+            .spyOn(console, 'error')
+            .mockImplementation(() => {});
+
+        render(
+            <Skeleton {...defaultProps} loading>
+                <p>Hidden content</p>
+            </Skeleton>
+        );
+        expect(consoleError).not.toHaveBeenCalled();
+        consoleError.mockRestore();
+    });
 });