reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,223 +0,0 @@
-import { expect } from "storybook/test";
-import { Placeholder, Example } from "../../../utilities/storybook/index.js";
-import ActionBar from "../index.js";
-import View from "../../View/index.js";
-import Button from "../../Button/index.js";
-import useToggle from "../../../hooks/useToggle.js";
-export default {
-    title: "Components/ActionBar",
-    component: ActionBar,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/action-bar",
-        },
-    },
-};
-const Fixtures = {
-    Container: (props) => (<View backgroundColor="neutral-faded" height="160px" overflow="hidden" borderRadius="medium">
-			{props.children}
-		</View>),
-    Actions: () => (<View direction="row" gap={2}>
-			<Button onClick={() => { }}>Action</Button>
-			<Button onClick={() => { }} variant="outline">
-				Action
-			</Button>
-		</View>),
-};
-export const positionRelative = {
-    name: "position, positionType: relative",
-    render: () => (<Example>
-			<Example.Item title="position: top">
-				<ActionBar position="top">
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="position: bottom">
-				<ActionBar position="bottom">
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-		</Example>),
-};
-export const positionAbsolute = {
-    name: "position, positionType: absolute",
-    render: () => (<Example>
-			<Example.Item title="position: top-start">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top-start" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: top">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: top-end">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="top-end" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom-start">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom-start" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar padding={2} position="bottom-end" positionType="absolute">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const positionFixed = {
-    name: "position, positionType: fixed",
-    render: () => (<>
-			<ActionBar padding={2} position="top-start" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="top" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="top-end" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom-start" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<ActionBar padding={2} position="bottom-end" positionType="fixed">
-				<Fixtures.Actions />
-			</ActionBar>
-
-			<div style={{ height: 2000 }}/>
-		</>),
-};
-export const elevated = {
-    name: "elevated",
-    render: () => (<Example>
-			<Example.Item title="elevated, position: top">
-				<ActionBar position="top" elevated>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="elevated, position: bottom">
-				<ActionBar elevated>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="auto elevated, position: bottom">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end">
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const offset = {
-    name: "offset",
-    render: () => (<Example>
-			<Example.Item title="offset 2, position: top">
-				<Fixtures.Container>
-					<ActionBar position="top" positionType="absolute" offset={2}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="offset 2, position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end" offset={2}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-
-			<Example.Item title="offset s: 2, m: 4, position: bottom-end">
-				<Fixtures.Container>
-					<ActionBar position="bottom-end" offset={{ s: 2, m: 4 }}>
-						<Fixtures.Actions />
-					</ActionBar>
-				</Fixtures.Container>
-			</Example.Item>
-		</Example>),
-};
-export const active = {
-    name: "active",
-    render: () => {
-        const barToggle = useToggle();
-        return (<>
-				<Button onClick={() => barToggle.toggle()}>Toggle</Button>
-				<ActionBar active={barToggle.active} positionType="fixed" position="top-end">
-					<Fixtures.Actions />
-				</ActionBar>
-			</>);
-    },
-};
-export const padding = {
-    name: "padding, paddingBlock, paddingInline",
-    render: () => (<Example>
-			<Example.Item title="padding: 6">
-				<ActionBar padding={6}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="paddingBlock: 2, paddingInline: 4">
-				<ActionBar paddingBlock={2} paddingInline={4}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-
-			<Example.Item title="padding: [s] 4, [m+] 6">
-				<ActionBar padding={{ s: 4, m: 6 }}>
-					<Placeholder />
-				</ActionBar>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<ActionBar className="test-classname" attributes={{ id: "test-id" }}>
-				<Placeholder />
-			</ActionBar>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,41 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-    handleSecondClick: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj;
-export declare const fullWidth: StoryObj;
-export declare const insetFocus: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => Promise<void>;
-};
-export declare const disableFocusRing: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => Promise<void>;
-};
-export declare const borderRadius: {
-    name: string;
-    render: () => import("react").JSX.Element;
-    play: () => Promise<void>;
-};
-export declare const type: StoryObj<{
-    handleSubmit: ReturnType<typeof fn>;
-}>;
-export declare const as: StoryObj;
-export declare const stopPropagation: StoryObj<{
-    handleParentClick: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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;
-};