reshaped 3.3.10 → 3.3.12

package/dist/components/Loader/tests/Loader.stories.js

@@ -12,30 +12,30 @@ export default {
 export const size = () => {
     return (<Example>
 			<Example.Item title="size: medium">
-				<Loader size="medium"/>
+				<Loader size="medium" ariaLabel="Loading"/>
 			</Example.Item>
 			<Example.Item title="size: small">
-				<Loader size="small"/>
+				<Loader size="small" ariaLabel="Loading"/>
 			</Example.Item>
 			<Example.Item title="size: large">
-				<Loader size="large"/>
+				<Loader size="large" ariaLabel="Loading"/>
 			</Example.Item>
 			<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
-				<Loader size={{ s: "small", m: "medium" }}/>
+				<Loader size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
 			</Example.Item>
 		</Example>);
 };
 export const color = () => (<Example>
 		<Example.Item title="color: primary">
-			<Loader />
+			<Loader ariaLabel="Loading"/>
 		</Example.Item>
 		<Example.Item title="color: critical">
-			<Loader color="critical"/>
+			<Loader color="critical" ariaLabel="Loading"/>
 		</Example.Item>
 		<Example.Item title="color: positive">
-			<Loader color="positive"/>
+			<Loader color="positive" ariaLabel="Loading"/>
 		</Example.Item>
 		<Example.Item title="color: inherit">
-			<Loader color="inherit"/>
+			<Loader color="inherit" ariaLabel="Loading"/>
 		</Example.Item>
 	</Example>);

package/dist/components/Loader/tests/Loader.test.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").LoaderProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const ariaLabel: StoryObj;
+export declare const className: StoryObj;

package/dist/components/Loader/tests/Loader.test.stories.js

@@ -0,0 +1,32 @@
+import { expect } from "@storybook/test";
+import Loader from "../index.js";
+export default {
+    title: "Components/Loader/tests",
+    component: Loader,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/loader",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const ariaLabel = {
+    name: "ariaLabel",
+    render: () => <Loader ariaLabel="Loading" attributes={{ "data-testid": "root" }}/>,
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root");
+        expect(root).toHaveAttribute("aria-live", "assertive");
+        expect(root).toHaveAttribute("aria-label", "Loading");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Loader className="test-classname" attributes={{ id: "test-id" }} ariaLabel="Loading"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/MenuItem/tests/MenuItem.test.stories.d.ts

@@ -0,0 +1,26 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: import("../MenuItem.types").Export;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const children: StoryObj;
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const hrefOnClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;
+export declare const alignerClassName: StoryObj;

package/dist/components/MenuItem/tests/MenuItem.test.stories.js

@@ -0,0 +1,100 @@
+import { userEvent, expect, fn } from "@storybook/test";
+import MenuItem from "../index.js";
+export default {
+    title: "Components/MenuItem/tests",
+    component: MenuItem,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/menu-item",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const children = {
+    name: "children",
+    render: () => <MenuItem>Trigger</MenuItem>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByText("Trigger");
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe("DIV");
+    },
+};
+export const href = {
+    name: "href",
+    render: () => <MenuItem href="https://reshaped.so">Trigger</MenuItem>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("link");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <MenuItem onClick={args.handleClick}>Trigger</MenuItem>,
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getAllByRole("button")[0];
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("type", "button");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const hrefOnClick = {
+    name: "href + onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<MenuItem onClick={(e) => {
+            e.preventDefault();
+            args.handleClick(e);
+        }} href="https://reshaped.so">
+			Trigger
+		</MenuItem>),
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getByRole("link");
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<MenuItem disabled onClick={() => { }}>
+			Trigger
+		</MenuItem>),
+    play: async ({ canvas }) => {
+        const el = canvas.getAllByRole("button")[0];
+        expect(el).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<MenuItem className="test-classname" attributes={{ id: "test-id" }}>
+				Trigger
+			</MenuItem>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const alignerClassName = {
+    name: "aligner, className, attributes",
+    render: () => (<div data-testid="root">
+			<MenuItem.Aligner className="test-classname" attributes={{ id: "test-id" }}>
+				<MenuItem>Trigger</MenuItem>
+			</MenuItem.Aligner>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Modal/Modal.types.d.ts

@@ -32,6 +32,6 @@ export type Props = {
     className?: G.ClassName;
     overlayClassName?: G.ClassName;
     attributes?: G.Attributes<"div"> & {
-        ref?: React.RefObject<HTMLDivElement>;
+        ref?: React.RefObject<HTMLDivElement | null>;
     };
 } & Pick<OverlayProps, "onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef">;

package/dist/components/Modal/tests/Modal.test.stories.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").ModalProps): React.JSX.Element;
+        Title: (props: import("../Modal.types").TitleProps) => React.JSX.Element;
+        Subtitle: (props: import("../Modal.types").SubtitleProps) => React.JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const renderProps: StoryObj;
+export declare const handlers: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleAfterOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+    handleAfterClose: ReturnType<typeof fn>;
+}>;
+export declare const disableCloseOnClick: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const containerRef: StoryObj;
+export declare const className: StoryObj;

package/dist/components/Modal/tests/Modal.test.stories.js

@@ -0,0 +1,149 @@
+import React from "react";
+import { within, expect, fn, userEvent, waitFor } from "@storybook/test";
+import Button from "../../Button/index.js";
+import Modal from "../index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { sleep } from "../../../utilities/helpers.js";
+export default {
+    title: "Components/Modal/tests",
+    component: Modal,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/modal",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const renderProps = {
+    name: "children, render props",
+    render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByText("Content");
+        expect(root).toBeInTheDocument();
+    },
+};
+export const handlers = {
+    name: "onOpen, onClose, onAfterOpen, onAfterClose",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+        handleAfterClose: fn(),
+        handleAfterOpen: fn(),
+    },
+    render: (args) => {
+        const overlayToggle = useToggle();
+        return (<>
+				<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+				<Modal active={overlayToggle.active} onClose={(closeArgs) => {
+                overlayToggle.deactivate();
+                args.handleClose(closeArgs);
+            }} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
+					<Modal.Title>Title</Modal.Title>
+					Content
+				</Modal>
+			</>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let overlay;
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterOpen).toHaveBeenCalledWith();
+        });
+        // Close by changing the state after the trigger click
+        await userEvent.click(trigger);
+        // Wait for transition
+        await waitFor(() => {
+            // Changing state doesn't trigger onClose
+            expect(args.handleClose).toHaveBeenCalledTimes(0);
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        await sleep(100);
+        overlay = canvas.getAllByRole("button", { hidden: true }).at(-1);
+        // Close by clicking on the overlay
+        await userEvent.click(overlay);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        await sleep(100);
+        // Close by pressing Escape
+        await userEvent.keyboard("{Escape/}");
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(2);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const disableCloseOnClick = {
+    name: "disableCloseOnOutsideClick",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Modal active disableCloseOnOutsideClick onClose={(closeArgs) => {
+            args.handleClose(closeArgs);
+        }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const overlay = canvas.getByText("Content");
+        await userEvent.click(overlay);
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("{Escape/}");
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+    },
+};
+export const containerRef = {
+    name: "containerRef",
+    render: () => {
+        const containerRef = React.useRef(null);
+        return (<>
+				<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
+				<Modal active containerRef={containerRef}>
+					<Modal.Title>Title</Modal.Title>
+					Content
+				</Modal>
+			</>);
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const container = canvas.getByTestId("test-id");
+        const overlay = canvas.getByText("Content");
+        expect(container).toContainElement(overlay);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("test-id");
+        expect(root).toHaveClass("test-classname");
+    },
+};

package/dist/components/Overlay/Overlay.types.d.ts

@@ -15,7 +15,7 @@ export type Props = {
     onOpen?: () => void;
     onAfterOpen?: () => void;
     disableCloseOnClick?: boolean;
-    containerRef?: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement | null>;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Overlay/tests/Overlay.stories.d.ts

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: (props: import("./..").OverlayProps) => import("react").JSX.Element | null;
@@ -8,5 +9,6 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const shadowDom: () => import("react").JSX.Element;
+export declare const base: StoryObj;
+export declare const transparent: StoryObj;
+export declare const blurred: StoryObj;

package/dist/components/Overlay/tests/Overlay.stories.js

@@ -1,8 +1,7 @@
-import { createRoot } from "react-dom/client";
+import { userEvent } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Overlay from "../index.js";
 import Button from "../../Button/index.js";
-import Reshaped from "../../Reshaped/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Utilities/Overlay",
@@ -13,56 +12,57 @@ export default {
         },
     },
 };
-export const base = () => {
-    const baseToggle = useToggle(false);
-    const transparentToggle = useToggle(false);
-    const blurredToggle = useToggle(false);
-    return (<Example>
-			<Example.Item title="locks scroll">
-				<Button onClick={() => baseToggle.activate()}>Open overlay</Button>
-				<Overlay active={baseToggle.active} onClose={() => baseToggle.deactivate()}>
-					Overlay content
-				</Overlay>
-			</Example.Item>
-
-			<Example.Item title="transparent, doesn't lock scroll">
-				<Button onClick={() => transparentToggle.activate()}>Open overlay</Button>
-				<Overlay active={transparentToggle.active} onClose={() => transparentToggle.deactivate()} transparent>
-					Overlay content
-				</Overlay>
-			</Example.Item>
-
-			<Example.Item title="blurred">
-				<Button onClick={() => blurredToggle.activate()}>Open overlay</Button>
-				<Overlay active={blurredToggle.active} onClose={() => blurredToggle.deactivate()} blurred>
-					Overlay content
-				</Overlay>
-			</Example.Item>
-
-			<div style={{ height: 1000 }}/>
-		</Example>);
+export const base = {
+    name: "base",
+    render: () => {
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate}>
+						Overlay content
+					</Overlay>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+    },
 };
-class CustomElement extends window.HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: "open" });
-        if (!this.shadowRoot)
-            return;
-        const overlay = (<Reshaped>
-				<Overlay active>Content</Overlay>
-			</Reshaped>);
-        const root = createRoot(this.shadowRoot);
-        root.render(overlay);
-    }
-}
-if (!window.customElements.get("custom-element")) {
-    window.customElements.define("custom-element", CustomElement);
-}
-export const shadowDom = () => {
-    return (<Example>
-			<Example.Item>
-				{/* @ts-ignore */}
-				<custom-element />
-			</Example.Item>
-		</Example>);
+export const transparent = {
+    name: "transparent",
+    render: () => {
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>
+						Overlay content
+					</Overlay>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+    },
+};
+export const blurred = {
+    name: "blurred",
+    render: () => {
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>
+						Overlay content
+					</Overlay>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+    },
 };

package/dist/components/Overlay/tests/Overlay.test.stories.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").OverlayProps) => React.JSX.Element | null;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const renderProps: StoryObj;
+export declare const handlers: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleAfterOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+    handleAfterClose: ReturnType<typeof fn>;
+}>;
+export declare const disableCloseOnClick: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const containerRef: StoryObj;
+export declare const className: StoryObj;