reshaped 3.3.11 → 3.3.13

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

@@ -0,0 +1,101 @@
+import { expect, within, userEvent, waitFor } from "@storybook/test";
+import { useToast, ToastProvider } from "../index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Components/Toast/tests",
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/toast",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => {
+        const toast = useToast();
+        return (<Button onClick={() => {
+                const id = toast.show({
+                    title: "Title",
+                    text: "Text",
+                    children: "Children",
+                    startSlot: "Slot",
+                    actionsSlot: (<Button attributes={{ "data-testid": "trigger-id" }} onClick={() => toast.hide(id)}>
+								Trigger
+							</Button>),
+                });
+            }}>
+				Show toast
+			</Button>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const title = canvas.getByText("Title");
+        const text = canvas.getByText("Text");
+        const children = canvas.getByText("Children");
+        const slot = canvas.getByText("Slot");
+        const action = canvas.getByTestId("trigger-id");
+        expect(title).toBeInTheDocument();
+        expect(text).toBeInTheDocument();
+        expect(children).toBeInTheDocument();
+        expect(slot).toBeInTheDocument();
+        expect(action).toBeInTheDocument();
+        await userEvent.click(action);
+        await waitFor(() => {
+            expect(title).not.toBeInTheDocument();
+        });
+    },
+};
+const NestedDemo = () => {
+    const toast = useToast();
+    return (<Button onClick={() => {
+            toast.show({
+                text: "Content",
+            });
+        }}>
+			Show toast
+		</Button>);
+};
+export const nested = {
+    name: "ToastProvider",
+    render: () => {
+        return (<div data-testid="test-container-id">
+				<ToastProvider>
+					<NestedDemo />
+				</ToastProvider>
+			</div>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const container = canvas.getByTestId("test-container-id");
+        const toast = within(container).getByText("Content");
+        expect(toast).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => {
+        const toast = useToast();
+        return (<Button onClick={() => {
+                const id = toast.show({
+                    text: "Content",
+                    attributes: { "data-testid": "test-id" },
+                    className: "test-classname",
+                });
+            }}>
+				Show toast
+			</Button>);
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        const toast = canvas.getByTestId("test-id");
+        expect(toast).toBeInTheDocument();
+        expect(toast).toHaveClass("test-classname");
+    },
+};

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

@@ -4,7 +4,6 @@ import Popover from "../../Popover/index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
 import useResponsiveClientValue from "../../../hooks/useResponsiveClientValue.js";
-import Actionable from "../../Actionable/index.js";
 export default {
     title: "Components/Tooltip",
     component: Tooltip,
@@ -109,19 +108,6 @@ export const edgeCases = () => (<Example>
 			</Tooltip>
 		</Example.Item>
 
-		<Example.Item title="tooltip with popover on different elements">
-			<Tooltip text="Tooltip" position="top">
-				{(attributes) => (<Actionable attributes={attributes} as="span">
-						<Popover position="bottom">
-							<Popover.Trigger>
-								{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
-							</Popover.Trigger>
-							<Popover.Content>Popover</Popover.Content>
-						</Popover>
-					</Actionable>)}
-			</Tooltip>
-		</Example.Item>
-
 		<Example.Item title="nested popovers inside a tooltip">
 			<View direction="row" gap={2}>
 				<Tooltip position="top" text="Hello">

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

@@ -0,0 +1,19 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").TooltipProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;

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

@@ -0,0 +1,40 @@
+import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
+import Tooltip from "../index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Components/Tooltip/tests",
+    component: Tooltip,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/tooltip",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const defaultActive = {
+    name: "uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Tooltip text="Content" onOpen={args.handleOpen} onClose={args.handleClose}>
+			{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+		</Tooltip>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.hover(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+        await userEvent.unhover(trigger);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(item).not.toBeInTheDocument();
+        });
+    },
+};

package/dist/components/View/View.js

@@ -135,9 +135,8 @@ const View = (props) => {
             return child.props.children.map((child) => {
                 if (!child)
                     return null;
-                const index = usedIndex;
                 renderedItemIndex += 1;
-                return renderItem({ child, index });
+                return renderItem({ child, index: renderedItemIndex });
             });
         }
         return renderItem({ child, index: usedIndex });

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

@@ -13,31 +13,115 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const padding: () => React.JSX.Element;
-export declare const direction: () => React.JSX.Element;
-export declare const gap: () => React.JSX.Element;
-export declare const divided: () => React.JSX.Element;
-export declare const bleed: () => React.JSX.Element;
-export declare const wrap: () => React.JSX.Element;
-export declare const align: () => React.JSX.Element;
-export declare const justify: () => React.JSX.Element;
-export declare const textAlign: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const ratio: () => React.JSX.Element;
-export declare const maxSize: () => React.JSX.Element;
-export declare const minSize: () => React.JSX.Element;
-export declare const background: () => React.JSX.Element;
-export declare const border: () => React.JSX.Element;
-export declare const radius: () => React.JSX.Element;
-export declare const shadow: () => React.JSX.Element;
-export declare const overflow: () => React.JSX.Element;
-export declare const position: () => React.JSX.Element;
-export declare const inset: () => React.JSX.Element;
-export declare const animated: () => React.JSX.Element;
-export declare const itemGapBefore: () => React.JSX.Element;
-export declare const itemGrow: () => React.JSX.Element;
-export declare const itemColumns: () => React.JSX.Element;
-export declare const itemOrder: () => React.JSX.Element;
-export declare const testHiddenItem: () => React.JSX.Element;
-export declare const testNestedGaps: () => React.JSX.Element;
-export declare const testComposition: () => React.JSX.Element;
+export declare const padding: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const direction: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const gap: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const divided: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const bleed: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const wrap: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const align: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const justify: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const textAlign: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const ratio: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const maxSize: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const minSize: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const background: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const border: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const radius: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const shadow: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const overflow: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const positioning: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const inset: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const animated: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const itemGapBefore: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const itemGrow: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const itemColumns: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const itemOrder: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const hiddenItem: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const nestedGaps: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const testComposition: {
+    name: string;
+    render: () => React.JSX.Element;
+};