reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,169 +0,0 @@
-import { expect, fn, userEvent } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import ToggleButtonGroup from "../index.js";
-import ToggleButton from "../../ToggleButton/index.js";
-import IconPlus from "../../../icons/Plus.js";
-import IconMinus from "../../../icons/Minus.js";
-import IconCheckmark from "../../../icons/Checkmark.js";
-export default {
-    title: "Components/ToggleButtonGroup",
-    component: ToggleButtonGroup,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/toggle-button-group",
-        },
-    },
-};
-export const single = {
-    name: "checked, defaultChecked, onChange",
-    args: {
-        handleUncontrolledChange: fn(),
-        handleControlledChange: fn(),
-        handleItemChange: fn(),
-    },
-    render: (args) => (<Example>
-			<Example.Item title="single, uncontrolled, onChange">
-				<ToggleButtonGroup onChange={args.handleUncontrolledChange}>
-					<ToggleButton value="1" onChange={args.handleItemChange}>
-						Button
-					</ToggleButton>
-					<ToggleButton value="2">Button</ToggleButton>
-				</ToggleButtonGroup>
-			</Example.Item>
-			<Example.Item title="single, controlled, onChange">
-				<ToggleButtonGroup onChange={args.handleControlledChange} value={[]}>
-					<ToggleButton value="3" onChange={args.handleItemChange}>
-						Button
-					</ToggleButton>
-					<ToggleButton value="4">Button</ToggleButton>
-				</ToggleButtonGroup>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas, args }) => {
-        const [uncontrolledButton1, uncontrolledButton2, controlledButton1, controlledButton2] = canvas.getAllByRole("button");
-        await userEvent.click(uncontrolledButton1);
-        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
-        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
-            value: ["1"],
-            event: expect.objectContaining({ target: uncontrolledButton1 }),
-        });
-        await userEvent.click(uncontrolledButton2);
-        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
-        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
-            value: ["2"],
-            event: expect.objectContaining({ target: uncontrolledButton2 }),
-        });
-        await userEvent.click(controlledButton1);
-        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
-        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
-            value: ["3"],
-            event: expect.objectContaining({ target: controlledButton1 }),
-        });
-        await userEvent.click(controlledButton2);
-        expect(args.handleControlledChange).toHaveBeenCalledTimes(2);
-        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
-            value: ["4"],
-            event: expect.objectContaining({ target: controlledButton2 }),
-        });
-        expect(args.handleItemChange).not.toHaveBeenCalled();
-    },
-};
-export const multiple = {
-    name: "selectionMode, checked, defaultChecked, onChange",
-    args: {
-        handleUncontrolledChange: fn(),
-        handleControlledChange: fn(),
-    },
-    render: (args) => (<Example>
-			<Example.Item title="multiple, uncontrolled, onChange">
-				<ToggleButtonGroup onChange={args.handleUncontrolledChange} selectionMode="multiple">
-					<ToggleButton value="1">Button</ToggleButton>
-					<ToggleButton value="2">Button</ToggleButton>
-				</ToggleButtonGroup>
-			</Example.Item>
-			<Example.Item title="multiple, controlled, onChange">
-				<ToggleButtonGroup onChange={args.handleControlledChange} value={[]} selectionMode="multiple">
-					<ToggleButton value="3">Button</ToggleButton>
-					<ToggleButton value="4">Button</ToggleButton>
-				</ToggleButtonGroup>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas, args }) => {
-        const [uncontrolledButton1, uncontrolledButton2, controlledButton1, controlledButton2] = canvas.getAllByRole("button");
-        await userEvent.click(uncontrolledButton1);
-        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
-        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
-            value: ["1"],
-            event: expect.objectContaining({ target: uncontrolledButton1 }),
-        });
-        await userEvent.click(uncontrolledButton2);
-        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
-        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
-            value: ["1", "2"],
-            event: expect.objectContaining({ target: uncontrolledButton2 }),
-        });
-        await userEvent.click(controlledButton1);
-        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
-        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
-            value: ["3"],
-            event: expect.objectContaining({ target: controlledButton1 }),
-        });
-        await userEvent.click(controlledButton2);
-        expect(args.handleControlledChange).toHaveBeenCalledTimes(2);
-        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
-            value: ["4"],
-            event: expect.objectContaining({ target: controlledButton2 }),
-        });
-    },
-};
-export const selectedColor = {
-    name: "color,selectedColor",
-    render: () => (<Example>
-			<Example.Item title="selectedColor: primary">
-				<ToggleButtonGroup selectedColor="primary" defaultValue={["2"]}>
-					<ToggleButton value="1">Button</ToggleButton>
-					<ToggleButton value="2">Button</ToggleButton>
-					<ToggleButton value="3">Button</ToggleButton>
-				</ToggleButtonGroup>
-			</Example.Item>
-			<Example.Item title="color: primary, selectedColor: critical">
-				<ToggleButtonGroup color="primary" selectedColor="critical" defaultValue={["2"]}>
-					<ToggleButton value="1" variant="ghost">
-						Button
-					</ToggleButton>
-					<ToggleButton value="2" variant="ghost">
-						Button
-					</ToggleButton>
-					<ToggleButton value="3" variant="ghost">
-						Button
-					</ToggleButton>
-				</ToggleButtonGroup>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<ToggleButtonGroup className="test-classname" attributes={{ id: "test-id" }}>
-				<ToggleButton>Button 1</ToggleButton>
-				<ToggleButton>Button 1</ToggleButton>
-			</ToggleButtonGroup>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};
-export const testIcon = {
-    name: "test: icon only",
-    render: () => (<Example>
-			<Example.Item title="icon only">
-				<ToggleButtonGroup selectedColor="primary">
-					<ToggleButton value="1" icon={IconPlus}/>
-					<ToggleButton value="2" icon={IconMinus}/>
-					<ToggleButton value="3" icon={IconCheckmark}/>
-				</ToggleButtonGroup>
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,28 +0,0 @@
-import { fn } from "storybook/test";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TooltipProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const position: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const color: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const defaultActive: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const edgeCases: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};

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

@@ -1,182 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Tooltip from "../index.js";
-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 { expect, fn, userEvent, waitFor, within } from "storybook/test";
-export default {
-    title: "Components/Tooltip",
-    component: Tooltip,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/tooltip",
-        },
-    },
-};
-const Demo = (props) => {
-    const { position, ...rest } = props;
-    return (<Tooltip text={position} position={position} {...rest}>
-			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
-		</Tooltip>);
-};
-const DemoResponsive = (props) => {
-    const { position, ...rest } = props;
-    const screenSize = useResponsiveClientValue({
-        s: "small",
-        m: "medium",
-    });
-    return (<Tooltip text={position} position={position} {...rest} active={screenSize === "small"}>
-			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
-		</Tooltip>);
-};
-export const position = {
-    name: "position",
-    render: () => (<Example>
-			<Example.Item title="position: bottom-start">
-				<View direction="row" gap={2}>
-					<Demo position="bottom-start" text="Tooltip 1"/>
-					<Demo position="bottom-start" text="Tooltip 2"/>
-					<Demo position="bottom-start" text="Tooltip 3"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="position: bottom">
-				<Demo position="bottom"/>
-			</Example.Item>
-			<Example.Item title="position: bottom-end">
-				<Demo position="bottom-end"/>
-			</Example.Item>
-			<Example.Item title="position: top-start">
-				<Demo position="top-start"/>
-			</Example.Item>
-			<Example.Item title="position: top">
-				<Demo position="top"/>
-			</Example.Item>
-			<Example.Item title="position: top-end">
-				<Demo position="top-end"/>
-			</Example.Item>
-
-			<Example.Item title="position: start">
-				<View align="end">
-					<Demo position="start"/>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="position: start-top">
-				<View align="end">
-					<Demo position="start-top"/>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="position: start-bottom">
-				<View align="end">
-					<Demo position="start-bottom"/>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="position: end">
-				<Demo position="end"/>
-			</Example.Item>
-
-			<Example.Item title="position: end-top">
-				<Demo position="end-top"/>
-			</Example.Item>
-
-			<Example.Item title="position: end-bottom">
-				<Demo position="end-bottom"/>
-			</Example.Item>
-		</Example>),
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: inverted">
-				<Demo color="inverted" position="bottom"/>
-			</Example.Item>
-			<Example.Item title="color: dark">
-				<Demo color="dark" position="bottom"/>
-			</Example.Item>
-		</Example>),
-};
-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();
-        });
-    },
-};
-export const edgeCases = {
-    name: "test: edge cases",
-    render: () => (<Example>
-			<Example.Item title="responsive visibility">
-				<DemoResponsive text="Responsive"/>
-			</Example.Item>
-
-			<Example.Item title="without text">
-				<Tooltip>{() => <Button>Button</Button>}</Tooltip>
-			</Example.Item>
-
-			<Example.Item title="tooltip with popover">
-				<Tooltip text="Tooltip" position="top">
-					{(attributes) => (<Popover position="bottom">
-							<Popover.Trigger>
-								{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
-							</Popover.Trigger>
-							<Popover.Content>Popover</Popover.Content>
-						</Popover>)}
-				</Tooltip>
-			</Example.Item>
-
-			<Example.Item title="nested popovers inside a tooltip">
-				<View direction="row" gap={2}>
-					<Tooltip position="top" text="Hello">
-						{(tooltipAttributes) => (<Popover position="bottom" width="300px">
-								<Popover.Trigger>
-									{(attributes) => (<Button attributes={{ ...tooltipAttributes, ...attributes }}>
-											Tooltip with popover
-										</Button>)}
-								</Popover.Trigger>
-								<Popover.Content>
-									<View gap={2} align="center" direction="row" justify="space-between">
-										Popover content
-										<Popover position="bottom" width="300px">
-											<Popover.Trigger>
-												{(attributes) => <Button attributes={attributes}>Open</Button>}
-											</Popover.Trigger>
-											<Popover.Content>
-												<Popover.Dismissible align="center" closeAriaLabel="Close">
-													Another popover content
-												</Popover.Dismissible>
-											</Popover.Content>
-										</Popover>
-									</View>
-								</Popover.Content>
-							</Popover>)}
-					</Tooltip>
-					<Tooltip position="top" text="Hello">
-						{(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}
-					</Tooltip>
-				</View>
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,141 +0,0 @@
-import React from "react";
-import { type ViewProps } from "./..";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
-        displayName: string;
-    } & {
-        Item: typeof import("../View").ViewItem;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-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 borderColor: {
-    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 keys: {
-    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;
-};
-export declare const asProp: StoryObj;
-export declare const className: StoryObj;
-export declare const itemClassName: StoryObj;