reshaped 3.9.0-canary.0 → 3.9.0-canary.10

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

@@ -1,220 +0,0 @@
-import { userEvent, expect, fn } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Actionable from "../index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Utility components/Actionable",
-    component: Actionable,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/actionable",
-        },
-    },
-};
-export const base = {
-    name: "href, onClick",
-    args: {
-        handleClick: fn(),
-        handleSecondClick: fn(),
-    },
-    render: (args) => (<Example>
-			<Example.Item title="span">
-				<Actionable>Span</Actionable>
-			</Example.Item>
-			<Example.Item title="onClick">
-				<Actionable onClick={args.handleClick}>Button</Actionable>
-			</Example.Item>
-			<Example.Item title="href">
-				<Actionable href="https://reshaped.so" attributes={{ target: "_blank" }}>
-					Link
-				</Actionable>
-			</Example.Item>
-
-			<Example.Item title="attributes.href">
-				<Actionable attributes={{ href: "https://reshaped.so" }}>Link with attributes</Actionable>
-			</Example.Item>
-
-			<Example.Item title="href, onClick">
-				<Actionable onClick={(e) => {
-            e.preventDefault();
-            args.handleSecondClick(e);
-        }} href="https://reshaped.so">
-					Link with onClick
-				</Actionable>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas, args }) => {
-        const span = canvas.getByText("Span");
-        const link = canvas.getByText("Link");
-        const button = canvas.getByText("Button");
-        const linkWithAttributes = canvas.getByText("Link with attributes");
-        const linkWithOnClick = canvas.getByText("Link with onClick");
-        expect(span).toBeInTheDocument();
-        expect(span.tagName).toBe("SPAN");
-        expect(link).toBeInTheDocument();
-        expect(link).toHaveRole("link");
-        expect(link).toHaveAttribute("href", "https://reshaped.so");
-        await userEvent.click(button);
-        expect(button).toBeInTheDocument();
-        expect(button).toHaveRole("button");
-        expect(button).toHaveAttribute("type", "button");
-        expect(args.handleClick).toHaveBeenCalledTimes(1);
-        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
-        expect(linkWithAttributes).toBeInTheDocument();
-        expect(linkWithAttributes).toHaveRole("link");
-        expect(linkWithAttributes).toHaveAttribute("href", "https://reshaped.so");
-        await userEvent.click(linkWithOnClick);
-        expect(linkWithOnClick).toBeInTheDocument();
-        expect(linkWithOnClick).toHaveRole("link");
-        expect(linkWithOnClick).toHaveAttribute("href", "https://reshaped.so");
-        expect(args.handleSecondClick).toHaveBeenCalledTimes(1);
-        expect(args.handleSecondClick).toHaveBeenCalledWith(expect.objectContaining({ target: linkWithOnClick }));
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Example>
-			<Example.Item title="disabled, button">
-				<Actionable disabled onClick={() => { }}>
-					Button
-				</Actionable>
-			</Example.Item>
-			<Example.Item title="disabled, link">
-				<Actionable disabled href="https://reshaped.so">
-					Link
-				</Actionable>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const button = canvas.getAllByRole("button")[0];
-        const link = canvas.getByText("Link");
-        expect(button).toBeDisabled();
-        expect(link).not.toHaveAttribute("href");
-        expect(link).not.toHaveRole("link");
-    },
-};
-export const fullWidth = {
-    name: "fullWidth",
-    render: () => (<Example>
-			<Example.Item title="fullWidth">
-				<Actionable fullWidth href="https://reshaped.so">
-					Actionable
-				</Actionable>
-			</Example.Item>
-		</Example>),
-    play: async () => {
-        await userEvent.keyboard("{Tab/}");
-    },
-};
-export const insetFocus = {
-    name: "insetFocus",
-    render: () => (<Example>
-			<Example.Item title="insetFocus">
-				<Actionable insetFocus onClick={() => { }}>
-					Actionable
-				</Actionable>
-			</Example.Item>
-		</Example>),
-    play: async () => {
-        await userEvent.keyboard("{Tab/}");
-    },
-};
-export const disableFocusRing = {
-    name: "disableFocusRing",
-    render: () => (<Example>
-			<Example.Item title="disableFocusRing">
-				<Actionable disableFocusRing onClick={() => { }}>
-					Actionable
-				</Actionable>
-			</Example.Item>
-		</Example>),
-    play: async () => {
-        await userEvent.keyboard("{Tab/}");
-    },
-};
-export const borderRadius = {
-    name: "borderRadius",
-    render: () => (<Example>
-			<Example.Item title="borderRadius: inherit">
-				<Actionable borderRadius="inherit" onClick={() => { }}>
-					<View borderRadius="large">Actionable</View>
-				</Actionable>
-			</Example.Item>
-		</Example>),
-    play: async () => {
-        await userEvent.keyboard("{Tab/}");
-    },
-};
-export const type = {
-    name: "type",
-    args: {
-        handleSubmit: fn(),
-    },
-    render: (args) => (<Example>
-			<Example.Item title="type: submit">
-				<form onSubmit={(e) => {
-            e.preventDefault();
-            args.handleSubmit();
-        }}>
-					<Actionable onClick={() => { }} type="submit">
-						Submit
-					</Actionable>
-				</form>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(button);
-        expect(args.handleSubmit).toHaveBeenCalledTimes(1);
-    },
-};
-export const as = {
-    name: "as, render",
-    render: () => (<Example>
-			<Example.Item title="as: span">
-				<Actionable onClick={() => { }} as="span">
-					Trigger
-				</Actionable>
-			</Example.Item>
-			<Example.Item title="render, disabled">
-				<Actionable disabled onClick={() => { }} render={(props) => <section {...props}/>}>
-					Trigger
-				</Actionable>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const [asEl, renderEl] = canvas.getAllByText("Trigger");
-        expect(asEl.tagName).toBe("SPAN");
-        expect(renderEl.tagName).toBe("SECTION");
-        expect(renderEl).toHaveAttribute("aria-disabled", "true");
-    },
-};
-export const stopPropagation = {
-    name: "stopPropagation",
-    args: {
-        handleParentClick: fn(),
-    },
-    render: (args) => (<div onClick={args.handleParentClick}>
-			<Actionable stopPropagation onClick={() => { }}>
-				Trigger
-			</Actionable>
-		</div>),
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(button);
-        expect(args.handleParentClick).not.toHaveBeenCalled();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Actionable className="test-classname" attributes={{ id: "test-id" }}>
-				Trigger
-			</Actionable>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

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

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

@@ -1,78 +0,0 @@
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import Alert from "../index.js";
-import Link from "../../Link/index.js";
-import IconZap from "../../../icons/Zap.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Alert",
-    component: Alert,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/alert",
-        },
-    },
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			{["neutral", "primary", "critical", "positive", "warning"].map((color) => (<Example.Item title={`color: ${color}`} key={color}>
-					<Alert color={color} title="Alert title goes here" icon={IconZap} actionsSlot={<>
-								<Link variant="plain" color={color === "neutral" ? "primary" : color} onClick={() => { }}>
-									View now
-								</Link>
-								<Link variant="plain" color={color === "neutral" ? "primary" : color} onClick={() => { }}>
-									Dismiss
-								</Link>
-							</>}>
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry's standard
-					</Alert>
-				</Example.Item>))}
-		</Example>),
-};
-export const inline = {
-    name: "inline",
-    render: () => (<Example>
-			<Example.Item title="inline: true">
-				<Alert inline title="Alert title goes here" icon={IconZap} actionsSlot={<>
-							<Link variant="plain" onClick={() => { }}>
-								View now
-							</Link>
-							<Link variant="plain" onClick={() => { }}>
-								Dismiss
-							</Link>
-						</>}>
-					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-					been the industry's standard
-				</Alert>
-			</Example.Item>
-		</Example>),
-};
-export const bleed = {
-    name: "bleed",
-    render: () => (<Example>
-			<Example.Item title="bleed: 4">
-				<Alert bleed={4} icon={IconZap}>
-					Content
-				</Alert>
-			</Example.Item>
-			<Example.Item title="bleed: [s] 4, [m+] 0">
-				<Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>
-					Content
-				</Alert>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Alert className="test-classname" attributes={{ id: "test-id" }}>
-				<Placeholder />
-			</Alert>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,32 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-import { Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./..").AutocompleteProps> & {
-        Item: typeof import("../Autocomplete").AutocompleteItem;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const active: StoryObj<{
-    handleOpen: Mock;
-    handleClose: Mock;
-}>;
-export declare const base: StoryObj<{
-    handleInput: Mock;
-    handleItemSelect: Mock;
-    handleBackspace: Mock;
-}>;
-export declare const itemData: StoryObj<{
-    handleItemSelect: Mock;
-}>;
-export declare const itemDisabled: StoryObj;
-export declare const multiselect: {
-    name: string;
-    render: () => React.JSX.Element;
-};

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;