reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,59 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "as" | "render" | "onClick" | "href" | "stopPropagation"> & {
-        color?: "neutral" | "critical" | "primary";
-        icon?: import("../../Icon").IconProps["svg"];
-        children: React.ReactNode;
-        startSlot?: React.ReactNode;
-        endSlot?: React.ReactNode;
-        highlighted?: boolean;
-        selected?: boolean;
-        size?: import("../../../types/global").Responsive<import("../MenuItem.types").Size>;
-        roundedCorners?: import("../../../types/global").Responsive<boolean>;
-    } & import("react").RefAttributes<import("../../Actionable").ActionableRef>> & {
-        Aligner: import("react").FC<import("../../_private/Aligner").AlignerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const color: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const selected: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const roundedCorners: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const slots: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const aligner: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-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 as: StoryObj;
-export declare const className: StoryObj;
-export declare const alignerClassName: StoryObj;

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

@@ -1,236 +0,0 @@
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
-import Text from "../../Text/index.js";
-import MenuItem from "../index.js";
-import IconZap from "../../../icons/Zap.js";
-import Hotkey from "../../Hotkey/index.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/MenuItem",
-    component: MenuItem,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/menu-item",
-        },
-    },
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: small">
-				<MenuItem size="small" icon={IconZap} onClick={() => { }} endSlot={<Hotkey>⌘K</Hotkey>}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-			<Example.Item title="size: medium">
-				<MenuItem icon={IconZap} onClick={() => { }}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-			<Example.Item title="size: large">
-				<MenuItem size="large" icon={IconZap} onClick={() => { }}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-			<Example.Item title={["responsive size", "[s] small", "[m] medium", "[l+] large"]}>
-				<MenuItem size={{ s: "small", m: "medium", l: "large" }} icon={IconZap} onClick={() => { }}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-		</Example>),
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: neutral">
-				<MenuItem color="neutral" icon={IconZap}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-			<Example.Item title="color: primary">
-				<MenuItem color="primary" icon={IconZap}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-			<Example.Item title="color: critical">
-				<MenuItem color="critical" icon={IconZap}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-		</Example>),
-};
-export const selected = {
-    name: "selected",
-    render: () => (<Example>
-			<Example.Item title="selected, color: neutral">
-				<MenuItem color="neutral" selected icon={IconZap}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-			<Example.Item title="selected, color: primary">
-				<MenuItem color="primary" selected icon={IconZap}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-			<Example.Item title="selected, color: critical">
-				<MenuItem color="critical" selected icon={IconZap}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-		</Example>),
-};
-export const roundedCorners = {
-    name: "roundedCorners",
-    render: () => (<Example>
-			<Example.Item title="roundedCorners">
-				<MenuItem roundedCorners selected icon={IconZap}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-
-			<Example.Item title={["responsive roundedCorners", "[s]: false", "[m+]: true"]}>
-				<MenuItem roundedCorners={{ s: false, m: true }} selected icon={IconZap}>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-		</Example>),
-};
-export const slots = {
-    name: "startSlot, endSlot",
-    render: () => (<Example>
-			<Example.Item title="startSlot, endSlot, selected">
-				<MenuItem startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>} selected>
-					Menu item
-				</MenuItem>
-			</Example.Item>
-		</Example>),
-};
-export const aligner = {
-    name: "aligner",
-    render: () => (<Example>
-			<Example.Item title="size: small">
-				<View gap={2}>
-					<Text variant="title-6">Heading</Text>
-					<MenuItem.Aligner>
-						<MenuItem size="small" selected onClick={() => { }}>
-							Menu item
-						</MenuItem>
-					</MenuItem.Aligner>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="size: medium">
-				<View gap={2}>
-					<Text variant="title-6">Heading</Text>
-					<MenuItem.Aligner>
-						<MenuItem selected>Menu item</MenuItem>
-					</MenuItem.Aligner>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="size: large">
-				<View gap={2}>
-					<Text variant="title-6">Heading</Text>
-					<MenuItem.Aligner>
-						<MenuItem size="large" selected>
-							Menu item
-						</MenuItem>
-					</MenuItem.Aligner>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-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 as = {
-    name: "as, render",
-    render: () => (<Example>
-			<Example.Item title="render, disabled">
-				<MenuItem disabled onClick={() => { }} render={(props) => <section {...props}/>} attributes={{ "data-testid": "render-el" }}>
-					Trigger
-				</MenuItem>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const renderEl = canvas.getByTestId("render-el");
-        expect(renderEl.tagName).toBe("SECTION");
-        expect(renderEl).toHaveAttribute("aria-disabled", "true");
-    },
-};
-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/tests/Modal.stories.d.ts

@@ -1,64 +0,0 @@
-import React from "react";
-import { type ModalProps } from "./..";
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: React.FC<ModalProps> & {
-        Title: typeof import("../Modal").ModalTitle;
-        Subtitle: typeof import("../Modal").ModalSubtitle;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const position: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const padding: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const overflow: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const composition: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const overlay: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const flags: StoryObj<{
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const containerRef: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-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 className: StoryObj;
-export declare const edgeCases: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const trapFocusEdgeCases: {
-    name: string;
-    render: () => React.JSX.Element;
-};