react-miui 0.32.0 → 0.32.2

package/src/components/layout/list/Item.tsx

@@ -1,29 +1,29 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
+import { fnWithProps } from "../../../types/fnWithProps";
 import { ICON } from "../../icons/Icon";
-
-import { Value } from "./Value";
-import { Label } from "./Label";
 import { StyledIcon, StyledInnerContainer, StyledItem, StyledNoIcon } from "./Item.styled";
+import { Label } from "./Label";
+import { Value } from "./Value";
 
 interface LinkProps {
     href: string;
     children: React.ReactNode;
 }
 
-type Ratio = `${number}` | ``;
+type Ratio = `${number}` | "";
 
-type SlashSeparatedNumbers =
-    | Ratio
-    | `${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
-    | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`;
+type SlashSeparatedNumbers
+    = | Ratio
+        | `${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`
+        | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`;
 
 interface Props {
     href?: string;
@@ -41,7 +41,7 @@ interface SubComponents {
 const icon = <StyledIcon name={ICON.forward} />;
 const noIcon = <StyledNoIcon />;
 
-const ItemInnerContainerClassName = StyledInnerContainer.toString();
+const ListItemInnerContainerClassNameSelector = StyledInnerContainer.toString();
 type StyledItemProps = React.ComponentProps<typeof StyledItem>;
 
 /**
@@ -66,7 +66,9 @@ type StyledItemProps = React.ComponentProps<typeof StyledItem>;
  * - `to`: if given it will render an anchor tag wrapped in a link using the given `Link` component
  * - `onClick`: if given it will render a button tag with the given onClick handler (it can be passed with `href` too)
  */
-const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onClick, Link, ratio, ...props }) => {
+const ItemBase = forwardRef<
+    HTMLLIElement, StyledItemProps & Props
+>(({ href, to, onClick, Link, ratio, ...props }, ref) => {
     const r = ratio ? ratio.split("/") : [];
 
     const pre = typeof props.selected === "boolean"
@@ -96,7 +98,7 @@ const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onC
         }
 
         return (
-            <StyledItem {...props}>
+            <StyledItem {...props} ref={ref}>
                 <Link href={to}><StyledInnerContainer as={"a"} href={to}>{pre}{ren}</StyledInnerContainer></Link>
             </StyledItem>
         );
@@ -104,7 +106,7 @@ const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onC
 
     if (href) {
         return (
-            <StyledItem {...props}>
+            <StyledItem {...props} ref={ref}>
                 <StyledInnerContainer as={"a"} href={href} onClick={onClick}>{pre}{ren}</StyledInnerContainer>
             </StyledItem>
         );
@@ -112,19 +114,24 @@ const Item: React.FC<StyledItemProps & Props> & SubComponents = ({ href, to, onC
 
     if (onClick) {
         return (
-            <StyledItem {...props}>
+            <StyledItem {...props} ref={ref}>
                 <StyledInnerContainer as={"button"} onClick={onClick}>{pre}{ren}</StyledInnerContainer>
             </StyledItem>
         );
     }
 
-    return <StyledItem {...props}><StyledInnerContainer>{pre}{ren}</StyledInnerContainer></StyledItem>;
-};
+    return <StyledItem {...props} ref={ref}><StyledInnerContainer>{pre}{ren}</StyledInnerContainer></StyledItem>;
+});
+
+ItemBase.displayName = "List.Item";
 
-Item.Label = Label;
-Item.Value = Value;
+const Item = fnWithProps(ItemBase, {
+    Label,
+    Value,
+});
+Item.toString = () => StyledItem.toString();
 
-export { Item, ItemInnerContainerClassName };
+export { Item, ListItemInnerContainerClassNameSelector };
 
 export type {
     Props as ItemProps,

package/src/components/layout/list/Label.stories.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { Item } from "./Item";
 import { Label } from "./Label";
 import { List } from "./List";
-import { Item } from "./Item";
 
 const meta: Meta = {
     title: "Components/Layout/List/Label",

package/src/components/layout/list/Label.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import type { ReactNode } from "react";
 
 import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";

package/src/components/layout/list/List.stories.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
-
-import { Icon, ICON } from "../../icons/Icon";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { ICON, Icon } from "../../icons/Icon";
 import { List } from "./List";
 
 const meta: Meta = {

package/src/components/layout/list/List.tsx

@@ -1,14 +1,9 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { pxToRem, styled } from "../../../theme";
-
+import { fnWithProps } from "../../../types/fnWithProps";
 import { Header } from "./Header";
-import { Item } from "./Item";
-
-interface SubComponents {
-    Header: typeof Header;
-    Item: typeof Item;
-}
+import { Item, ListItemInnerContainerClassNameSelector } from "./Item";
 
 const StyledList = styled("ul", {
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
@@ -38,7 +33,7 @@ type StyledListProps = React.ComponentProps<typeof StyledList>;
  *
  * See `Item` and `Header` for more information about their usage.
  */
-const List: React.FC<StyledListProps> & SubComponents = (props) => {
+const ListBase = forwardRef<HTMLUListElement, StyledListProps>((props, ref) => {
     const chld = React.Children.map(props.children, (child) => {
         if (child && typeof child === "object" && "type" in child && (child.type === Item || child.type === Header)) {
             return React.cloneElement(child, {
@@ -49,10 +44,15 @@ const List: React.FC<StyledListProps> & SubComponents = (props) => {
     });
 
     return (
-        <StyledList {...props}>{chld}</StyledList>
+        <StyledList {...props} ref={ref}>{chld}</StyledList>
     );
-};
-List.Header = Header;
-List.Item = Item;
+});
+ListBase.displayName = "List";
+
+const List = fnWithProps(ListBase, { // it will keep displayName
+    Header,
+    Item,
+});
+List.toString = () => StyledList.toString();
 
-export { List };
+export { List, ListItemInnerContainerClassNameSelector };

package/src/components/layout/list/Value.stories.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Value } from "./Value";
-import { List } from "./List";
 import { Item } from "./Item";
+import { List } from "./List";
+import { Value } from "./Value";
 
 const meta: Meta = {
     title: "Components/Layout/List/Value",

package/src/components/layout/section/Section.stories.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { List } from "../list/List";
 import { Item } from "../list/Item";
-
+import { List } from "../list/List";
 import { Section } from "./Section";
 
 const meta: Meta = {

package/src/components/layout/section/Section.tsx

@@ -1,6 +1,5 @@
 import { pxToRem, styled } from "../../../theme";
 import { fnWithProps } from "../../../types/fnWithProps";
-
 import { SectionContainer } from "./SectionContainer";
 
 const SectionCmp = styled("div", {

package/src/components/layout/table/Table.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Table } from "./Table";
 

package/src/components/ui/action/Action.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Action } from "./Action";
 

package/src/components/ui/action/Action.tsx

@@ -1,13 +1,12 @@
-import React from "react";
-import type { ReactNode } from "react";
+import React, { forwardRef } from "react";
 
 import { omit } from "@ezez/utils";
 
-import type { ICON } from "../../icons/Icon";
+import type { ReactNode } from "react";
 import type { ThemeCSS } from "../../../theme";
+import type { ICON } from "../../icons/Icon";
 
 import { Icon } from "../../icons/Icon";
-
 import { Anchor, Badge, Button, StyledAction } from "./Action.styled";
 
 interface LinkProps { // @TODO extract? - same on list item
@@ -73,7 +72,7 @@ type Props = (NativeLinkProps | RouterLinkProps | ButtonProps) & CommonProps;
  *
  * Its label is displayed below the circular shape.
  */
-const Action: React.FC<Props> = (props) => {
+const Action = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => { // eslint-disable-line max-lines-per-function
     const { icon, label, css, ..._restProps } = props;
     const restProps = omit(
         _restProps as Record<string, unknown>, ["to", "Link", "href", "type"],
@@ -82,7 +81,7 @@ const Action: React.FC<Props> = (props) => {
 
     let iconElem: ReactNode = icon;
     if (typeof icon === "string") {
-        iconElem = <Icon name={icon as ICON} />; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
+        iconElem = <Icon name={icon as ICON} />;
     }
 
     const labelElem = label ? <div>{label}</div> : null;
@@ -101,22 +100,47 @@ const Action: React.FC<Props> = (props) => {
 
         return (
             <props.Link href={props.to} {...restProps}>
-                <Anchor className={props.className} {...maybeCss}>{content}</Anchor>
+                <Anchor ref={ref as React.Ref<HTMLAnchorElement>} className={props.className} {...maybeCss}>
+                    {content}
+                </Anchor>
             </props.Link>
         );
     }
 
     if ("href" in props) {
-        return <Anchor href={props.href} className={props.className} {...restProps} {...maybeCss}>{content}</Anchor>;
+        return (
+            <Anchor
+                ref={ref as React.Ref<HTMLAnchorElement>}
+                href={props.href}
+                className={props.className}
+                {...restProps}
+                {...maybeCss}
+            >
+                {content}
+            </Anchor>
+        );
     }
 
     return (
-        <Button onClick={props.onClick} className={props.className} {...maybeCss} type={props.type ?? "button"}>
+
+        <Button
+            ref={ref as React.Ref<HTMLButtonElement>}
+            onClick={props.onClick}
+            className={props.className}
+            {...maybeCss}
+            type={props.type ?? "button"}
+        >
             {content}
         </Button>
     );
-};
+});
+
+Action.displayName = "Action";
+Action.toString = () => Button.toString();
+
+const ActionCircleSelector = StyledAction.toString();
+const ActionBadgeSelector = Badge.toString();
 
-export { Action };
+export { Action, ActionCircleSelector, ActionBadgeSelector };
 
 export type { Props as ActionProps };

package/src/components/ui/action/EqualActions.stories.tsx

@@ -3,9 +3,8 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { ICON } from "../../icons/Icon";
-
-import { EqualActions } from "./EqualActions";
 import { Action } from "./Action";
+import { EqualActions } from "./EqualActions";
 
 const meta: Meta<typeof EqualActions> = {
     title: "Components/UI/EqualActions",

package/src/components/ui/button/Button.stories.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback } from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-
 import { Button } from "./Button";
 
 // TODO better docs

package/src/components/ui/directionPad/Pad.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 

package/src/components/ui/directionPad/Pad.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 
 import { PadButton as Button, PadButtonDotSelector } from "./Button";
 import { PadMiddle as Middle } from "./Middle";
-import { StyledPad, StyledLine } from "./Pad.styled";
+import { StyledLine, StyledPad } from "./Pad.styled";
 
 type DirectionPadProps = {
     onUpPress?: () => void;

package/src/components/ui/drawer/Drawer.stories.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
 import { Section } from "../../layout/section/Section";
 import { Button } from "../button/Button";
-
 import { Drawer } from "./Drawer";
 
 const meta: Meta<typeof Drawer> = {
@@ -56,7 +55,6 @@ const Default: Story = {
  */
 const NoEscClose: Story = {
     render: () => {
-    // eslint-disable-next-line @typescript-eslint/no-shadow
         const [open, setOpen] = useState(false);
 
         const handleToggleOpen = useCallback(() => {
@@ -106,8 +104,8 @@ const WithLongContent: Story = {
                     <div style={{ padding: "20px" }}>
                         <h2>Drawer with Long Content</h2>
                         <p>This drawer has enough content to demonstrate scrolling behavior.</p>
-                        {Array(20).fill(0).map((_, i) => (
-                            <Section key={String(`${i}`)} vertical={true} horizontal={true}>
+                        {Array(20).fill(0).map((_: number, i) => (
+                            <Section key={i} vertical={true} horizontal={true}> {/* eslint-disable-line react/no-array-index-key */}
                                 <h3>Section {i + 1}</h3>
                                 <p>This is content section {i + 1} in the scrollable drawer.</p>
                             </Section>

package/src/components/ui/drawer/Drawer.tsx

@@ -3,8 +3,7 @@ import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { Timeout } from "oop-timers";
 
 import { HandleEsc } from "../../utils/HandleEsc";
-
-import { StyledDrawer, Content } from "./Drawer.styled";
+import { Content, StyledDrawer } from "./Drawer.styled";
 
 const RENDER_TIMEOUT = 500;
 
@@ -34,6 +33,7 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>((props, ref) => {
     useEffect(() => {
         if (props.isOpen) {
             timeoutRef.current?.stop();
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setShouldRenderWhenClosed(true);
         }
         else {

package/src/components/ui/keyValue/KeyValue.stories.tsx

@@ -5,9 +5,8 @@ import { omit } from "@ezez/utils";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-import { Icon, ICON } from "../../icons/Icon";
-
-import { KeyValue, KeyValueKeySelector, KeyValueValueSelector, KeyValueIconSelector } from "./KeyValue";
+import { ICON, Icon } from "../../icons/Icon";
+import { KeyValue, KeyValueIconSelector, KeyValueKeySelector, KeyValueValueSelector } from "./KeyValue";
 
 const meta: Meta<typeof KeyValue> = {
     title: "UI/KeyValue",
@@ -92,7 +91,7 @@ const items = [
  */
 const Default: Story = {
     args: {
-        items: items,
+        items,
         valueFirst: true,
         cols: 3,
     },
@@ -103,7 +102,7 @@ const Default: Story = {
  */
 const TwoColumn: Story = {
     args: {
-        items: items,
+        items,
         valueFirst: false,
         cols: 2,
     },
@@ -114,7 +113,7 @@ const TwoColumn: Story = {
  */
 const SingleColumn: Story = {
     args: {
-        items: items,
+        items,
         valueFirst: false,
         cols: 1,
     },

package/src/components/ui/keyValue/KeyValue.tsx

@@ -1,17 +1,18 @@
-import type { ReactElement } from "react";
 import React, { forwardRef } from "react";
 
+import type { ReactElement } from "react";
+
 import {
     Container,
+    Icon,
     Item,
     Key,
     KeyValuePair,
     Value,
-    Icon,
 } from "./KeyValue.styled";
 
 type KeyValueProps = {
-    items: { key?: React.ReactNode; value?: React.ReactNode; icon?: React.ReactNode; onClick?: () => void }[];
+    items: Array<{ key?: React.ReactNode; value?: React.ReactNode; icon?: React.ReactNode; onClick?: () => void }>;
     cols?: number;
     valueFirst?: boolean;
     className?: string;
@@ -43,8 +44,8 @@ const KeyValue = forwardRef<HTMLDivElement, KeyValueProps>((props, ref) => {
         const component = value.onClick ? "button" : "div";
         return React.createElement(Item, {
             // eslint-disable-next-line react/no-array-index-key
-            key: key,
-            style: style,
+            key,
+            style,
             // @ts-expect-error idk why ts can't figure it out, but it works
             as: component,
             notFirstRow: !isFirstRow,

package/src/components/ui/loader/CoveringLoader.tsx

@@ -40,6 +40,8 @@ const CoveringLoader = forwardRef<HTMLElement, Props>(({ // eslint-disable-line
     const id = "miui-" + useId().replace(/:/gu, "-");
     const stylesheet = useRef<HTMLStyleElement>();
 
+    const currentRef = innerRef.current;
+
     useEffect(() => {
         const styleEl = document.createElement("style");
         document.head.appendChild(styleEl);
@@ -52,7 +54,7 @@ const CoveringLoader = forwardRef<HTMLElement, Props>(({ // eslint-disable-line
 
     // eslint-disable-next-line max-lines-per-function,max-statements
     const effect = () => {
-        const current = innerRef.current as HTMLElement | null;
+        const current = currentRef as HTMLElement | null;
         if (current !== null && !(current instanceof HTMLElement)) {
             throw new Error(
                 "CoveringLoader child ref is not an HTMLElement, got: (" + typeof current + ") " + String(current),
@@ -65,13 +67,15 @@ const CoveringLoader = forwardRef<HTMLElement, Props>(({ // eslint-disable-line
         let extraLoaderElem: HTMLDivElement | null = null;
 
         if (mode === "over") {
-            const prnt = current.parentElement!;
-            prnt.classList.add("parent-" + id);
+            const prnt = current.parentElement;
             extraLoaderElem = document.createElement("div");
             extraLoaderElem.classList.add(id);
-            prnt.appendChild(extraLoaderElem);
-            if (inertMode === "block-interaction") {
-                prnt.inert = true;
+            if (prnt) {
+                prnt.classList.add("parent-" + id);
+                prnt.appendChild(extraLoaderElem);
+                if (inertMode === "block-interaction") {
+                    prnt.inert = true;
+                }
             }
         }
         else {
@@ -119,11 +123,13 @@ ${inertCss}`;
         return () => {
             stylesheet.current!.textContent = "";
             if (mode === "over") {
-                const prnt = current.parentElement!;
+                const prnt = current.parentElement;
                 extraLoaderElem?.remove();
-                prnt.classList.add("parent-" + id);
-                if (inertMode === "block-interaction") {
-                    prnt.inert = false;
+                if (prnt) {
+                    prnt.classList.add("parent-" + id);
+                    if (inertMode === "block-interaction") {
+                        prnt.inert = false;
+                    }
                 }
             }
             else {
@@ -135,7 +141,7 @@ ${inertCss}`;
         };
     };
 
-    useEffect(effect, [innerRef.current, spinnerBg, show, color, size, speed, mode, inertMode]);
+    useEffect(effect, [currentRef, spinnerBg, show, color, size, speed, mode, inertMode, id]);
 
     return cloneElement(Children.only(children), {
         ref: innerRef,

package/src/components/ui/loader/FullLoader.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { FullLoader } from "./FullLoader";
 

package/src/components/ui/loader/FullLoader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import type { LoaderProps } from "./Loader";
 
@@ -16,8 +16,11 @@ const Container = styled("div", {
 /**
  * A loader that renders in the middle of available space
  */
-const FullLoader: React.FC<LoaderProps> = (props) => {
-    return <Container><Loader {...props} /></Container>;
-};
+const FullLoader = forwardRef<HTMLDivElement, LoaderProps>(({ className, ...props }, ref) => {
+    return <Container ref={ref} className={className}><Loader {...props} /></Container>;
+});
+
+FullLoader.displayName = "FullLoader";
+FullLoader.toString = () => Container.toString();
 
 export { FullLoader };

package/src/components/ui/loader/Loader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { useTailSpin } from "../../../utils";
 import { Div } from "../../native";
@@ -20,6 +20,7 @@ interface Props {
      * Whether to show the spinner or not
      */
     show?: boolean | undefined | null;
+    className?: string;
 }
 
 const DEFAULT_SPEED = 400;
@@ -31,20 +32,28 @@ const DEFAULT_SIZE = "2rem";
  * Based on MIT licensed code by Sam Herbert
  * https://github.com/SamHerbert/SVG-Loaders/blob/master/svg-loaders/tail-spin.svg
  */
-const Loader: React.FC<Props> = ({
+const Loader = forwardRef<HTMLDivElement, Props>(({
     color = "currentColor", speed = DEFAULT_SPEED, size = DEFAULT_SIZE,
+    className, show,
     ...props
-}) => {
+}, ref) => {
     const spinnerBg = useTailSpin({ size, color, speed });
 
-    if (props.show === false) {
+    if (show === false) {
         return null;
     }
 
     return (
-        <Div css={{ width: size, height: size, backgroundImage: `url('${spinnerBg}')` }} />
+        <Div
+            ref={ref}
+            className={className}
+            css={{ width: size, height: size, backgroundImage: `url('${spinnerBg}')` }}
+        />
     );
-};
+});
+
+Loader.displayName = "Loader";
+Loader.toString = () => Div.toString();
 
 export { Loader };
 export type { Props as LoaderProps };

package/src/components/ui/loader/Loading.stories.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 
-import type { StoryObj, Meta } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { styled } from "../../../theme";
-
 import { Loading } from "./Loading";
 
 const meta: Meta = {