reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,224 +0,0 @@
-import React from "react";
-import { expect, fn, userEvent, waitFor } from "storybook/test";
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import Carousel from "../index.js";
-import Button from "../../Button/index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Components/Carousel",
-    component: Carousel,
-    parameters: {
-        // Skip because of the aria-hidden applied to buttons, they're replaced by screen reader navigation
-        a11y: {
-            disable: true,
-        },
-        iframe: {
-            url: "https://reshaped.so/docs/components/carousel",
-        },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => (<Carousel attributes={{ "data-testid": "test-id" }} visibleItems={3}>
-			<Placeholder h={100}>Content</Placeholder>
-			<Placeholder h={100}>Content</Placeholder>
-			<Placeholder h={100}>Content</Placeholder>
-			<Placeholder h={100}>Content</Placeholder>
-			<Placeholder h={100}>Content</Placeholder>
-			<Placeholder h={100}>Content</Placeholder>
-		</Carousel>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("test-id");
-        const items = canvas.getAllByText("Content");
-        const buttons = root.querySelectorAll("button");
-        expect(root).toBeInTheDocument();
-        expect(root.tagName).toBe("SECTION");
-        expect(items).toHaveLength(6);
-        expect(buttons).toHaveLength(2);
-    },
-};
-export const visibleItems = {
-    name: "visibleItems",
-    render: () => (<Example>
-			<Example.Item title="visibleItems: 3">
-				<Carousel visibleItems={3}>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-				</Carousel>
-			</Example.Item>
-
-			<Example.Item title={["responsive visibleItems", "s: 2, m+ 3"]}>
-				<Carousel visibleItems={{ s: 2, m: 3 }}>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-				</Carousel>
-			</Example.Item>
-
-			<Example.Item title="visibleItems: auto">
-				<Carousel>
-					<Placeholder h={100}/>
-					<Placeholder h={100} w={200}/>
-					<Placeholder h={100} w={300}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-				</Carousel>
-			</Example.Item>
-		</Example>),
-};
-export const gap = {
-    name: "gap",
-    render: () => (<Example>
-			<Example.Item title="gap: 2, visibleItems 3">
-				<Carousel visibleItems={3} gap={2}>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-				</Carousel>
-			</Example.Item>
-
-			<Example.Item title={["gap: responsive, visibleItems: 3", "s: 2, l: 8"]}>
-				<Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-				</Carousel>
-			</Example.Item>
-		</Example>),
-};
-export const bleed = {
-    name: "bleed",
-    render: () => (<Example>
-			<Example.Item title="bleed: 4, visibleItems: 3">
-				<Carousel visibleItems={3} bleed={4}>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-				</Carousel>
-			</Example.Item>
-
-			<Example.Item title={["responsive bleed, visibleItems: 3", "[s] 4, [l+] 0"]}>
-				<Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-				</Carousel>
-			</Example.Item>
-		</Example>),
-};
-export const navigationDisplay = {
-    name: "navigationDisplay",
-    render: () => (<Example>
-			<Example.Item title="navigationDisplay: hidden">
-				<Carousel visibleItems={3} navigationDisplay="hidden" attributes={{ "data-testid": "test-id" }}>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-					<Placeholder h={100}/>
-				</Carousel>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("test-id");
-        const buttons = root.querySelectorAll("button");
-        expect(buttons).toHaveLength(0);
-    },
-};
-export const instanceRef = {
-    name: "instanceRef, onChange",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => {
-        const carouselRef = React.useRef(null);
-        const [index, setIndex] = React.useState(0);
-        return (<Example>
-				<Example.Item title="instanceRef, onChange">
-					<View gap={3}>
-						<View gap={3} direction="row" align="center">
-							<Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>
-							<Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>
-							<Button onClick={() => carouselRef.current?.navigateTo(3)}>To 3</Button>
-							<View.Item>Index: {index}</View.Item>
-						</View>
-						<Carousel visibleItems={2} instanceRef={carouselRef} navigationDisplay="hidden" onChange={(changeArgs) => {
-                args.handleChange(changeArgs);
-                setIndex(changeArgs.index);
-            }}>
-							<Placeholder h={100}>Item 0</Placeholder>
-							<Placeholder h={100}>Item 1</Placeholder>
-							<Placeholder h={100}>Item 2</Placeholder>
-							<Placeholder h={100}>Item 3</Placeholder>
-							<Placeholder h={100}>Item 4</Placeholder>
-							<Placeholder h={100}>Item 5</Placeholder>
-						</Carousel>
-					</View>
-				</Example.Item>
-			</Example>);
-    },
-    play: async ({ canvas, args }) => {
-        const buttons = canvas.getAllByRole("button");
-        const backButton = buttons[0];
-        const forwardButton = buttons[1];
-        const toButton = buttons[2];
-        await userEvent.click(forwardButton);
-        await waitFor(() => {
-            expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
-            expect(args.handleChange).toHaveBeenCalledWith({ index: 2 });
-            expect(args.handleChange).not.toHaveBeenCalledWith({ index: 3 });
-        });
-        args.handleChange.mockClear();
-        await userEvent.click(backButton);
-        await waitFor(() => {
-            expect(args.handleChange).toHaveBeenCalledWith({ index: 0 });
-            expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
-        });
-        args.handleChange.mockClear();
-        await userEvent.click(toButton);
-        await waitFor(() => {
-            expect(args.handleChange).toHaveBeenCalledWith({ index: 1 });
-            expect(args.handleChange).toHaveBeenCalledWith({ index: 2 });
-            expect(args.handleChange).toHaveBeenCalledWith({ index: 3 });
-        });
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Carousel visibleItems={2} className="test-classname" attributes={{ id: "test-id" }}>
-				<Placeholder h={100}>Item 0</Placeholder>
-				<Placeholder h={100}>Item 1</Placeholder>
-				<Placeholder h={100}>Item 2</Placeholder>
-				<Placeholder h={100}>Item 3</Placeholder>
-				<Placeholder h={100}>Item 4</Placeholder>
-				<Placeholder h={100}>Item 5</Placeholder>
-			</Carousel>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,30 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").CheckboxProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const render: StoryObj;
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const error: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const disabled: StoryObj;
-export declare const checked: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const defaultChecked: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const indeterminate: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,171 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Checkbox from "../index.js";
-import View from "../../View/index.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/Checkbox",
-    component: Checkbox,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/checkbox",
-        },
-    },
-};
-export const render = {
-    name: "name, value",
-    render: () => (<Checkbox name="test-name" value="test-value">
-			Content
-		</Checkbox>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input).toHaveAttribute("value", "test-value");
-        expect(input).toHaveAttribute("name", "test-name");
-        expect(input).not.toBeChecked();
-    },
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: small">
-				<View gap={4} direction="row">
-					<Checkbox name="animal" value="dog" size="small" defaultChecked>
-						Checkbox
-					</Checkbox>
-					<Checkbox name="animal" value="dog" size="small" indeterminate>
-						Checkbox
-					</Checkbox>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: medium">
-				<View gap={4} direction="row">
-					<Checkbox name="animal" value="dog" size="medium" defaultChecked>
-						Checkbox
-					</Checkbox>
-					<Checkbox name="animal" value="dog" size="medium" indeterminate>
-						Checkbox
-					</Checkbox>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: large">
-				<View gap={4} direction="row">
-					<Checkbox name="animal" value="dog" size="large" defaultChecked>
-						Checkbox
-					</Checkbox>
-					<Checkbox name="animal" value="dog" size="large" indeterminate>
-						Checkbox
-					</Checkbox>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: responsive, s: small, m: large">
-				<View gap={4} direction="row">
-					<Checkbox name="animal" value="dog" size={{ s: "small", m: "large" }} defaultChecked>
-						Checkbox
-					</Checkbox>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const error = {
-    name: "hasError",
-    render: () => (<Example>
-			<Example.Item title="error">
-				<Checkbox name="animal" value="dog" hasError>
-					Checkbox
-				</Checkbox>
-			</Example.Item>
-		</Example>),
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Example>
-			<Example.Item title="disabled">
-				<Checkbox name="animal" value="dog" disabled>
-					Checkbox
-				</Checkbox>
-			</Example.Item>
-			<Example.Item title="disabled, checked">
-				<Checkbox name="animal" value="dog" disabled checked>
-					Checkbox
-				</Checkbox>
-			</Example.Item>
-			<Example.Item title="disabled, indeterminate">
-				<Checkbox name="animal" value="dog" disabled indeterminate>
-					Checkbox
-				</Checkbox>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        const [input] = canvas.getAllByRole("checkbox");
-        expect(input).toBeDisabled();
-    },
-};
-export const checked = {
-    name: "checked, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Checkbox name="test-name" value="test-value" checked onChange={args.handleChange}>
-			Content
-		</Checkbox>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input).toBeChecked();
-        await userEvent.click(input);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "test-value",
-            checked: false,
-            event: expect.objectContaining({ target: input }),
-        });
-        // Still checked because it's controlled
-        expect(input).toBeChecked();
-    },
-};
-export const defaultChecked = {
-    name: "defaultChecked, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Checkbox name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
-			Content
-		</Checkbox>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input).toBeChecked();
-        await userEvent.click(input);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "test-value",
-            checked: false,
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).not.toBeChecked();
-    },
-};
-export const indeterminate = {
-    name: "indeterminate",
-    render: () => (<Checkbox name="test-name" value="test-value" indeterminate>
-			Content
-		</Checkbox>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input.indeterminate).toBeTruthy();
-        await userEvent.click(input);
-        expect(input.indeterminate).toBeFalsy();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Checkbox className="test-classname" attributes={{ id: "test-id" }}>
-				Content
-			</Checkbox>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,19 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").CheckboxGroupProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const value: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const defaultValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj;

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

@@ -1,83 +0,0 @@
-import View from "../../View/index.js";
-import CheckboxGroup from "../index.js";
-import Checkbox from "../../Checkbox/index.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/CheckboxGroup",
-    component: CheckboxGroup,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/checkbox",
-        },
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<View gap={2}>
-			<CheckboxGroup name="test-name" value={["1"]} onChange={args.handleChange}>
-				{/* checked should be ignored */}
-				<Checkbox value="1" checked={false}>
-					Content
-				</Checkbox>
-
-				<Checkbox value="2">Content 2</Checkbox>
-			</CheckboxGroup>
-		</View>),
-    play: async ({ canvas, args }) => {
-        const inputs = canvas.getAllByRole("checkbox");
-        expect(inputs[0]).toBeChecked();
-        await userEvent.click(inputs[1]);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: ["1", "2"],
-            event: expect.objectContaining({ target: inputs[1] }),
-        });
-        // Still checked because it's controlled
-        expect(inputs[0]).toBeChecked();
-        expect(inputs[1]).not.toBeChecked();
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<View gap={2}>
-			<CheckboxGroup name="test-name" defaultValue={["1"]} onChange={args.handleChange}>
-				{/* checked should be ignored */}
-				<Checkbox value="1" checked={false}>
-					Content
-				</Checkbox>
-
-				<Checkbox value="2">Content 2</Checkbox>
-			</CheckboxGroup>
-		</View>),
-    play: async ({ canvas, args }) => {
-        const inputs = canvas.getAllByRole("checkbox");
-        expect(inputs[0]).toBeChecked();
-        await userEvent.click(inputs[1]);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: ["1", "2"],
-            event: expect.objectContaining({ target: inputs[1] }),
-        });
-        expect(inputs[0]).toBeChecked();
-        expect(inputs[1]).toBeChecked();
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<CheckboxGroup name="test-name" disabled>
-			<Checkbox value="test-value">Item 1</Checkbox>
-			<Checkbox value="test-value-2">Item 2</Checkbox>
-		</CheckboxGroup>),
-    play: async ({ canvas }) => {
-        const [input] = canvas.getAllByRole("checkbox");
-        expect(input).toBeDisabled();
-    },
-};

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

@@ -1,24 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ContainerProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const padding: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const flex: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;

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

@@ -1,75 +0,0 @@
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import Container from "../index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Utility components/Container",
-    component: Container,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/container",
-        },
-    },
-};
-export const padding = {
-    name: "padding",
-    render: () => (<Example>
-			<Example.Item title="padding: default">
-				<Container>
-					<Placeholder />
-				</Container>
-			</Example.Item>
-			<Example.Item title="padding: 0">
-				<Container padding={0}>
-					<Placeholder />
-				</Container>
-			</Example.Item>
-		</Example>),
-};
-export const size = {
-    name: "width, height, maxHeight",
-    render: () => (<Example>
-			<Example.Item title="width: 200px, height: 200px">
-				<Container width="200px" height="200px">
-					<Placeholder h="100%"/>
-				</Container>
-			</Example.Item>
-			<Example.Item title="width: 200px, height: 200px, maxHeight: 100px">
-				<Container width="200px" height="200px" maxHeight="100px">
-					<Placeholder h="100%"/>
-				</Container>
-			</Example.Item>
-			<Example.Item title="width, height: [s] 100px, [m+] 200px">
-				<Container width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}>
-					<Placeholder h="100%"/>
-				</Container>
-			</Example.Item>
-			<Example.Item title="width, height: [s] 100px, [m+] 200px, maxHeight: [s] 50px, [m+]: 100px">
-				<Container width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }} maxHeight={{ s: "50px", m: "100px" }}>
-					<Placeholder h="100%"/>
-				</Container>
-			</Example.Item>
-		</Example>),
-};
-export const flex = {
-    name: "align, justify",
-    render: () => (<Example>
-			<Example.Item title="align: center, justify: center">
-				<Container align="center" justify="center" height="200px">
-					<Placeholder />
-				</Container>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Container className="test-classname" attributes={{ id: "test-id" }}>
-				<Placeholder />
-			</Container>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,26 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ContextMenuProps> & {
-        Content: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ContentProps>;
-        Item: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ItemProps>;
-        Section: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SectionProps>;
-        SubMenu: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubMenuProps>;
-        SubTrigger: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const handlers: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;