reshaped 3.6.0-canary.0 → 3.6.0-canary.2

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

@@ -1,167 +0,0 @@
-import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
-import Popover from "../index.js";
-import Button from "../../Button/index.js";
-import { sleep } from "../../../utilities/helpers.js";
-export default {
-    title: "Components/Popover/tests",
-    component: Popover,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/popover",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const defaultActive = {
-    name: "defaultActive, uncontrolled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        let item = canvas.getByText("Content");
-        // Wait for the open animation
-        await sleep(500);
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-            expect(item).not.toBeInTheDocument();
-        });
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        item = canvas.getByText("Content");
-        expect(item).toBeInTheDocument();
-    },
-};
-export const active = {
-    name: "active, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const item = canvas.getByText("Content");
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-        });
-        expect(item).toBeInTheDocument();
-    },
-};
-export const activeFalse = {
-    name: "active false, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        const item = canvas.queryByText("Content");
-        expect(item).not.toBeInTheDocument();
-    },
-};
-export const dismissible = {
-    name: "dismissible, onClose, className, attributes, closeAriaLabel",
-    args: {
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onClose={args.handleClose} defaultActive>
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>
-				<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
-					Content
-				</Popover.Dismissible>
-			</Popover.Content>
-		</Popover>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const dismissible = canvas.getByTestId("test-id");
-        const closeButton = within(dismissible).getByRole("button");
-        expect(dismissible).toHaveClass("test-classname");
-        expect(closeButton).toHaveAccessibleName("Close");
-        await userEvent.click(closeButton);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({});
-        });
-    },
-};
-export const triggerType = {
-    name: "triggerType hover",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} triggerType="hover">
-			<Popover.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</Popover.Trigger>
-			<Popover.Content>Content</Popover.Content>
-		</Popover>),
-    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();
-        });
-        await userEvent.unhover(trigger);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({});
-        });
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Popover active>
-				<Popover.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</Popover.Trigger>
-				<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					Content
-				</Popover.Content>
-			</Popover>
-		</div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const menu = await canvas.findByTestId("test-id");
-        expect(menu).toHaveClass("test-classname");
-    },
-};

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

@@ -1,23 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        a11y: {
-            disable: boolean;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const onScroll: StoryObj<{
-    handleScroll: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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

@@ -1,66 +0,0 @@
-import React from "react";
-import { expect, fn, userEvent, waitFor } from "@storybook/test";
-import Button from "../../Button/index.js";
-import ScrollArea from "../index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Utility components/ScrollArea/tests",
-    component: ScrollArea,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/text",
-        },
-        // Skip because axe core incorrectly reports contrast issues
-        a11y: {
-            disable: true,
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const onScroll = {
-    name: "ref, onScroll",
-    args: {
-        handleScroll: fn(),
-    },
-    render: (args) => {
-        const ref = React.useRef(null);
-        return (<View gap={4}>
-				<View.Item>
-					<Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>
-				</View.Item>
-				<ScrollArea height="100px" ref={ref} scrollbarDisplay="visible" onScroll={args.handleScroll}>
-					<View backgroundColor="neutral-faded" padding={4} width="1000px" height="200px">
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard dummy text ever since the 1500s, when an unknown
-						printer took a galley of type and scrambled it to make a type specimen book. It has
-						survived not only five centuries, but also the leap into electronic typesetting,
-						remaining essentially unchanged. It was popularised in the 1960s with the release of
-						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View>
-				</ScrollArea>
-			</View>);
-    },
-    play: async ({ canvas, args }) => {
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleScroll).toHaveBeenCalledTimes(1);
-            // x value is flaky, so only testing y here
-            expect(args.handleScroll).toHaveBeenCalledWith(expect.objectContaining({ y: 0.5 }));
-        });
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<ScrollArea className="test-classname" attributes={{ id: "test-id" }}>
-				Content
-			</ScrollArea>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,38 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").SliderProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const defaultValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-    handleChangeCommit: ReturnType<typeof fn>;
-}>;
-export declare const value: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-    handleChangeCommit: ReturnType<typeof fn>;
-}>;
-export declare const rangeDefaultValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-    handleChangeCommit: ReturnType<typeof fn>;
-}>;
-export declare const rangeValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-    handleChangeCommit: ReturnType<typeof fn>;
-}>;
-export declare const minMax: StoryObj;
-export declare const step: StoryObj;
-export declare const stepFloat: StoryObj;
-export declare const renderValue: StoryObj;
-export declare const withoutTooltipValue: StoryObj;
-export declare const disabled: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,150 +0,0 @@
-import { expect, fn, fireEvent } from "@storybook/test";
-import Slider from "../index.js";
-export default {
-    title: "Components/Slider/tests",
-    component: Slider,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/slider",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<Slider name="test-name" defaultValue={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("slider");
-        expect(input).toHaveValue("50");
-        fireEvent.change(input, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        expect(input).toHaveValue("51");
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<Slider name="test-name" value={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("slider");
-        expect(input).toHaveValue("50");
-        fireEvent.change(input, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        expect(input).toHaveValue("50");
-    },
-};
-export const rangeDefaultValue = {
-    name: "range, defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<Slider range name="test-name" defaultMinValue={50} defaultMaxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
-    play: async ({ canvas, args }) => {
-        const [minInput, maxInput] = canvas.getAllByRole("slider");
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-        fireEvent.change(minInput, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            minValue: 51,
-            maxValue: 70,
-            name: "test-name",
-        });
-        expect(minInput).toHaveValue("51");
-        expect(maxInput).toHaveValue("70");
-    },
-};
-export const rangeValue = {
-    name: "range, value, controlled",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<Slider range name="test-name" minValue={50} maxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
-    play: async ({ canvas, args }) => {
-        const [minInput, maxInput] = canvas.getAllByRole("slider");
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-        fireEvent.change(minInput, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            minValue: 51,
-            maxValue: 70,
-            name: "test-name",
-        });
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-    },
-};
-export const minMax = {
-    name: "min, max",
-    render: () => <Slider name="nmae" range min={50} max={70}/>,
-    play: async ({ canvas }) => {
-        const [minInputEl, maxInputEl] = canvas.getAllByRole("slider");
-        expect(minInputEl).toHaveAttribute("min", "50");
-        expect(minInputEl).toHaveAttribute("max", "70");
-        expect(maxInputEl).toHaveAttribute("min", "50");
-        expect(maxInputEl).toHaveAttribute("max", "70");
-    },
-};
-export const step = {
-    name: "step",
-    render: () => <Slider name="name" defaultValue={11} step={5}/>,
-    play: async ({ canvas }) => {
-        const inputEl = canvas.getByRole("slider");
-        expect(inputEl).toHaveValue("10");
-    },
-};
-export const stepFloat = {
-    name: "step, float",
-    render: () => <Slider name="name" defaultValue={20.24} step={0.1}/>,
-    play: async ({ canvas }) => {
-        const inputEl = canvas.getByRole("slider");
-        expect(inputEl).toHaveValue("20.2");
-    },
-};
-export const renderValue = {
-    name: "renderValue",
-    render: () => <Slider name="name" defaultValue={50} renderValue={(args) => `$${args.value}`}/>,
-    play: async ({ canvas }) => {
-        const tooltipEl = canvas.getByText(`$50`);
-        expect(tooltipEl).toBeInTheDocument();
-    },
-};
-export const withoutTooltipValue = {
-    name: "renderValue=false",
-    render: () => <Slider name="name" defaultValue={50} renderValue={false}/>,
-    play: async ({ canvas }) => {
-        const tooltipEl = canvas.queryByText(`$50`);
-        expect(tooltipEl).not.toBeInTheDocument();
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => <Slider name="name" defaultValue={50} disabled/>,
-    play: async ({ canvas }) => {
-        const inputEl = canvas.getByRole("slider");
-        expect(inputEl).toBeDisabled();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Slider name="name" className="test-classname" attributes={{ id: "test-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};