reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,246 +0,0 @@
-import React from "react";
-import { fn, expect, within, waitFor, userEvent, fireEvent } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Autocomplete from "../index.js";
-import Badge from "../../Badge/index.js";
-import useToggle from "../../../hooks/useToggle.js";
-import FormControl from "../../FormControl/index.js";
-import { sleep } from "../../../utilities/helpers.js";
-export default {
-    title: "Components/Autocomplete",
-    component: Autocomplete,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/autocomplete",
-        },
-    },
-};
-export const active = {
-    name: "active, onOpen, onClose",
-    args: {
-        handleClose: fn(),
-        handleOpen: fn(),
-    },
-    render: (args) => {
-        const toggle = useToggle(true);
-        return (<Example>
-				<Example.Item title="active, onOpen, onClose">
-					<FormControl>
-						<FormControl.Label>Label</FormControl.Label>
-						<Autocomplete name="fruit" placeholder="Pick your food" active={toggle.active} onOpen={() => {
-                args.handleOpen();
-                toggle.activate();
-            }} onClose={() => {
-                args.handleClose();
-                toggle.deactivate();
-            }} onChange={(args) => console.log(args)}>
-							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
-                return (<Autocomplete.Item key={v} value={v}>
-										{v}
-									</Autocomplete.Item>);
-            })}
-						</Autocomplete>
-					</FormControl>
-				</Example.Item>
-			</Example>);
-    },
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        // const input = canvas.getByRole("combobox");
-        const list = await canvas.findByRole("listbox");
-        expect(list).toBeInTheDocument();
-        expect(args.handleOpen).not.toHaveBeenCalled();
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenLastCalledWith();
-        });
-        // TODO: Flaky behavior in node env tests, works in the browser
-        // await sleep(500);
-        // await userEvent.click(input);
-        // await waitFor(() => {
-        // 	expect(args.handleOpen).toHaveBeenCalledTimes(1);
-        // 	expect(args.handleOpen).toHaveBeenLastCalledWith();
-        // });
-    },
-};
-export const base = {
-    name: "onInput, onItemSelect, onBackspace",
-    args: {
-        handleInput: fn(),
-        handleBackspace: fn(),
-        handleItemSelect: fn(),
-    },
-    render: (args) => {
-        const [value, setValue] = React.useState("");
-        return (<Example>
-				<Example.Item title="Base">
-					<FormControl>
-						<FormControl.Label>Food</FormControl.Label>
-						<Autocomplete name="fruit" placeholder="Pick your food" value={value} onChange={(args) => setValue(args.value)} onBackspace={args.handleBackspace} onItemSelect={args.handleItemSelect}>
-							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
-                return (<Autocomplete.Item key={v} value={v}>
-										{v}
-									</Autocomplete.Item>);
-            })}
-						</Autocomplete>
-					</FormControl>
-				</Example.Item>
-			</Example>);
-    },
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const input = canvas.getByRole("combobox");
-        // Reset the focus
-        document.body.focus();
-        // Test keyboard selection after focusing the input
-        input.focus();
-        let options = [];
-        await waitFor(() => {
-            options = canvas.getAllByRole("option");
-        });
-        expect(options).toHaveLength(3);
-        await waitFor(() => {
-            expect(options[0]).toHaveAttribute("tabindex", "0");
-        });
-        expect(options[1]).toHaveAttribute("tabindex", "-1");
-        await userEvent.keyboard("{ArrowDown}");
-        await userEvent.keyboard("{Enter}");
-        expect(input).toHaveValue("Pie");
-        expect(args.handleItemSelect).toHaveBeenCalledTimes(1);
-        expect(args.handleItemSelect).toHaveBeenCalledWith({
-            value: "Pie",
-            data: undefined,
-        });
-        // Give browser time to focus on the input
-        await sleep(100);
-        // Test click selection after opening with down arrow
-        await userEvent.keyboard("{ArrowDown}");
-        await waitFor(() => {
-            options = canvas.getAllByRole("option");
-        });
-        await userEvent.click(options[0]);
-        expect(input).toHaveValue("Pizza");
-        expect(args.handleItemSelect).toHaveBeenCalledTimes(2);
-        expect(args.handleItemSelect).toHaveBeenCalledWith({
-            value: "Pizza",
-        });
-        input.focus();
-        await userEvent.keyboard("{Backspace}");
-        await waitFor(() => {
-            expect(args.handleBackspace).toHaveBeenCalledTimes(1);
-            expect(args.handleBackspace).toHaveBeenCalledWith();
-        });
-    },
-};
-export const itemData = {
-    name: "item data",
-    args: {
-        handleItemSelect: fn(),
-    },
-    render: (args) => {
-        return (<Example>
-				<Example.Item title="item data">
-					<FormControl>
-						<FormControl.Label>Label</FormControl.Label>
-						<Autocomplete name="fruit" placeholder="Pick your food" onItemSelect={args.handleItemSelect} active>
-							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
-                return (<Autocomplete.Item key={v} value={v} data={i === 1 ? { foo: true } : undefined}>
-										{v}
-									</Autocomplete.Item>);
-            })}
-						</Autocomplete>
-					</FormControl>
-				</Example.Item>
-			</Example>);
-    },
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const options = await canvas.findAllByRole("option");
-        await userEvent.click(options[0]);
-        expect(args.handleItemSelect).toHaveBeenLastCalledWith({ value: "Pizza" });
-        await userEvent.click(options[1]);
-        expect(args.handleItemSelect).toHaveBeenLastCalledWith({ value: "Pie", data: { foo: true } });
-    },
-};
-export const itemDisabled = {
-    name: "item disabled",
-    render: () => {
-        return (<Example>
-				<Example.Item title="item disabled">
-					<FormControl>
-						<FormControl.Label>Label</FormControl.Label>
-						<Autocomplete name="fruit" placeholder="Pick your food" active>
-							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
-                return (<Autocomplete.Item key={v} value={v} disabled={i === 1}>
-										{v}
-									</Autocomplete.Item>);
-            })}
-						</Autocomplete>
-					</FormControl>
-				</Example.Item>
-			</Example>);
-    },
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const input = canvas.getByRole("combobox");
-        const options = await canvas.findAllByRole("option");
-        await fireEvent.click(options[1]);
-        expect(options[1]).toBeDisabled();
-        // Check that focus stays on input when clicking on disabled elements
-        expect(document.activeElement).toBe(input);
-    },
-};
-export const multiselect = {
-    name: "test: multiselect",
-    render: () => {
-        const options = [
-            "Pizza",
-            "Pie",
-            "Ice-cream",
-            "Fries",
-            "Salad",
-            "Option 4",
-            "Option 5",
-            "Option 6",
-        ];
-        const inputRef = React.useRef(null);
-        const [values, setValues] = React.useState([
-            "Option 4",
-            "Option 5",
-            "Option 6",
-            "Pizza",
-            "Ice-cream",
-        ]);
-        const [query, setQuery] = React.useState("");
-        const handleDismiss = (dismissedValue) => {
-            const nextValues = values.filter((value) => value !== dismissedValue);
-            setValues(nextValues);
-            inputRef.current?.focus();
-        };
-        const valuesNode = values.map((value) => (<Badge dismissAriaLabel="Dismiss value" onDismiss={() => handleDismiss(value)} key={value}>
-				{value}
-			</Badge>));
-        return (<FormControl>
-				<FormControl.Label>Food</FormControl.Label>
-				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} multiline inputAttributes={{ ref: inputRef }} onChange={(args) => setQuery(args.value)} onBackspace={() => {
-                if (query.length === 0) {
-                    setValues((prev) => prev.slice(0, -1));
-                }
-            }} onItemSelect={(args) => {
-                setQuery("");
-                setValues((prev) => [...prev, args.value]);
-            }}>
-					{options.map((v) => {
-                if (!v.toLowerCase().includes(query.toLowerCase()))
-                    return;
-                if (values.includes(v))
-                    return;
-                return (<Autocomplete.Item key={v} value={v}>
-								{v}
-							</Autocomplete.Item>);
-            })}
-				</Autocomplete>
-			</FormControl>);
-    },
-};

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

@@ -1,31 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").AvatarProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const src: StoryObj;
-export declare const initials: StoryObj;
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const squared: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const colors: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const fallback: StoryObj<{
-    handleError: Mock;
-}>;
-export declare const renderImage: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,176 +0,0 @@
-import { useState } from "react";
-import { expect, fn, waitFor } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Avatar from "../index.js";
-import View from "../../View/index.js";
-import IconZap from "../../../icons/Zap.js";
-export default {
-    title: "Components/Avatar",
-    component: Avatar,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/avatar",
-        },
-    },
-};
-export const src = {
-    name: "src, alt",
-    render: () => (<Example>
-			<Example.Item title="src, alt">
-				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal" size={12}/>
-			</Example.Item>
-
-			<Example.Item title="src">
-				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80"/>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const presentation = canvas.getByRole("presentation");
-        const img = canvas.getByRole("img");
-        expect(presentation).toBeInTheDocument();
-        expect(img).toBeInTheDocument();
-        expect(img).toHaveAccessibleName("Amsterdam canal");
-    },
-};
-export const initials = {
-    name: "initials, icon",
-    render: () => (<Example>
-			<Example.Item title="initials">
-				<Avatar initials="RS"/>
-			</Example.Item>
-
-			<Example.Item title="icon">
-				<Avatar icon={IconZap}/>
-			</Example.Item>
-		</Example>),
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: 6">
-				<View direction="row" gap={3}>
-					<Avatar size={6} icon={IconZap}/>
-					<Avatar size={6} initials="RS" squared/>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="size: 15">
-				<View direction="row" gap={3}>
-					<Avatar size={15} icon={IconZap}/>
-					<Avatar size={15} initials="RS" squared/>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="size: 40">
-				<View direction="row" gap={3}>
-					<Avatar size={40} icon={IconZap}/>
-					<Avatar size={40} initials="RS" squared/>
-				</View>
-			</Example.Item>
-
-			<Example.Item title={["responsive size", "[s] 10", "[m+] 20"]}>
-				<View direction="row" gap={3}>
-					<Avatar size={{ s: 10, m: 20 }} icon={IconZap}/>
-					<Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared/>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const squared = {
-    name: "squared",
-    render: () => (<Example>
-			<Example.Item title="squared, with image">
-				<Avatar squared src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80"/>
-			</Example.Item>
-			<Example.Item title="squared, with initials">
-				<Avatar squared initials="RS"/>
-			</Example.Item>
-			<Example.Item title="squared, with initials">
-				<Avatar squared icon={IconZap}/>
-			</Example.Item>
-		</Example>),
-};
-export const colors = {
-    name: "color, variant",
-    render: () => (<Example>
-			<Example.Item title="color: neutral">
-				<View gap={4} direction="row">
-					<Avatar color="neutral" icon={IconZap}/>
-					<Avatar color="neutral" variant="faded" icon={IconZap}/>
-				</View>
-			</Example.Item>
-			<Example.Item title="color: primary">
-				<View gap={4} direction="row">
-					<Avatar color="primary" icon={IconZap}/>
-					<Avatar color="primary" variant="faded" icon={IconZap}/>
-				</View>
-			</Example.Item>
-			<Example.Item title="color: positive">
-				<View gap={4} direction="row">
-					<Avatar color="positive" icon={IconZap}/>
-					<Avatar color="positive" variant="faded" icon={IconZap}/>
-				</View>
-			</Example.Item>
-			<Example.Item title="color: warning">
-				<View gap={4} direction="row">
-					<Avatar color="warning" icon={IconZap}/>
-					<Avatar color="warning" variant="faded" icon={IconZap}/>
-				</View>
-			</Example.Item>
-			<Example.Item title="color: critical">
-				<View gap={4} direction="row">
-					<Avatar color="critical" icon={IconZap}/>
-					<Avatar color="critical" variant="faded" icon={IconZap}/>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const fallback = {
-    name: "test: fallback",
-    args: {
-        handleError: fn(),
-    },
-    render: (args) => {
-        const [error, setError] = useState(false);
-        return (<Avatar src={error ? undefined : "/foo"} icon={IconZap} imageAttributes={{
-                onError: () => {
-                    setError(true);
-                    args.handleError();
-                },
-            }}/>);
-    },
-    play: async ({ args }) => {
-        await waitFor(() => {
-            expect(args.handleError).toHaveBeenCalledTimes(1);
-        });
-    },
-};
-export const renderImage = {
-    name: "renderImage",
-    render: () => (<Example>
-			<Example.Item title="renderImage">
-				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal" renderImage={(attributes) => <img {...attributes} id="test-image"/>}/>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const img = canvas.getByRole("img");
-        expect(img).toBeInTheDocument();
-        expect(img).toHaveAccessibleName("Amsterdam canal");
-        expect(img).toHaveAttribute("id", "test-image");
-    },
-};
-export const className = {
-    name: "className, attributes, imageAttributes",
-    render: () => (<div data-testid="root">
-			<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" className="test-classname" attributes={{ id: "test-id" }} imageAttributes={{ id: "test-image-id", alt: "test image" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const img = canvas.getByRole("img");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(img).toHaveAttribute("id", "test-image-id");
-        // Uses alt attribute in case prop is not passed
-        expect(img).toHaveAccessibleName("test image");
-    },
-};

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

@@ -1,55 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./..").BadgeProps & React.RefAttributes<import("../../Actionable").ActionableRef>> & {
-        Container: React.FC<import("../Badge.types").ContainerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const variant: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const color: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const icon: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const onDismiss: StoryObj<{
-    handleDismiss: ReturnType<typeof fn>;
-}>;
-export declare const rounded: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const empty: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const highlighted: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const container: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const href: StoryObj;
-export declare const onClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;