reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,328 +0,0 @@
-import React from "react";
-import { expect, fn } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Avatar from "../../Avatar/index.js";
-import View from "../../View/index.js";
-import Badge from "../index.js";
-import Icon from "../../Icon/index.js";
-import Button from "../../Button/index.js";
-import IconCheckmark from "../../../icons/Checkmark.js";
-import IconChevronRight from "../../../icons/ChevronRight.js";
-import userEvent from "@testing-library/user-event";
-export default {
-    title: "Components/Badge",
-    component: Badge,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/badge",
-        },
-    },
-};
-export const variant = {
-    name: "variant",
-    render: () => (<Example>
-			<Example.Item title="variant: default">
-				<Badge>Badge</Badge>
-			</Example.Item>
-			<Example.Item title="variant: faded">
-				<Badge variant="faded">Badge</Badge>
-			</Example.Item>
-			<Example.Item title="variant: outline">
-				<Badge variant="outline">Badge</Badge>
-			</Example.Item>
-		</Example>),
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: primary, all variants">
-				<View direction="row" gap={3}>
-					<Badge color="primary">Badge</Badge>
-					<Badge variant="faded" color="primary">
-						Badge
-					</Badge>
-					<Badge variant="outline" color="primary">
-						Badge
-					</Badge>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="color: positive, all variants">
-				<View direction="row" gap={3}>
-					<Badge color="positive">Badge</Badge>
-					<Badge variant="faded" color="positive">
-						Badge
-					</Badge>
-					<Badge variant="outline" color="positive">
-						Badge
-					</Badge>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="color: critical, all variants">
-				<View direction="row" gap={3}>
-					<Badge color="critical">Badge</Badge>
-					<Badge variant="faded" color="critical">
-						Badge
-					</Badge>
-					<Badge variant="outline" color="critical">
-						Badge
-					</Badge>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="color: warning, all variants">
-				<View direction="row" gap={3}>
-					<Badge color="warning">Badge</Badge>
-					<Badge variant="faded" color="warning">
-						Badge
-					</Badge>
-					<Badge variant="outline" color="warning">
-						Badge
-					</Badge>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: small, not rounded and rounded">
-				<View gap={3} direction="row">
-					<Badge size="small">Badge</Badge>
-					<Badge rounded size="small">
-						Badge
-					</Badge>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: medium, not rounded and rounded">
-				<View gap={3} direction="row">
-					<Badge>Badge</Badge>
-					<Badge rounded>Badge</Badge>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: large, not rounded and rounded">
-				<View gap={3} direction="row">
-					<Badge size="large">Badge</Badge>
-					<Badge rounded size="large">
-						Badge
-					</Badge>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const icon = {
-    name: "icon",
-    render: () => (<Example>
-			<Example.Item title="size: small">
-				<View gap={3} direction="row">
-					<Badge icon={IconCheckmark} endIcon={IconChevronRight} size="small">
-						Badge
-					</Badge>
-					<Badge icon={IconCheckmark} size="small"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: medium">
-				<View gap={3} direction="row">
-					<Badge icon={IconCheckmark} endIcon={IconChevronRight}>
-						Badge
-					</Badge>
-					<Badge icon={IconCheckmark}/>
-				</View>
-			</Example.Item>
-			<Example.Item title="size: large">
-				<View gap={3} direction="row">
-					<Badge size="large" icon={IconCheckmark} endIcon={IconChevronRight}>
-						Badge
-					</Badge>
-
-					<Badge icon={IconCheckmark} size="large"/>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const onDismiss = {
-    name: "onDismiss, dismissAriaLabel",
-    args: {
-        handleDismiss: fn(),
-    },
-    render: (args) => (<Example>
-			<Example.Item title="onDismiss">
-				<Badge onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss">
-					Badge
-				</Badge>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas, args }) => {
-        const dismissTrigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(dismissTrigger);
-        expect(dismissTrigger).toHaveAccessibleName("Dismiss");
-        expect(args.handleDismiss).toHaveBeenCalledTimes(1);
-        expect(args.handleDismiss).toHaveBeenCalledWith();
-    },
-};
-export const rounded = {
-    name: "rounded",
-    render: () => (<Example>
-			<Example.Item title="rounded, all variants">
-				<View direction="row" gap={3}>
-					<Badge rounded>Badge</Badge>
-					<Badge rounded variant="faded">
-						Badge
-					</Badge>
-					<Badge rounded variant="outline">
-						Badge
-					</Badge>
-				</View>
-			</Example.Item>
-			<Example.Item title={["rounded, all sizes, color: critical", "one character, renders as circle"]}>
-				<View direction="row" gap={3}>
-					<Badge rounded color="critical" size="small">
-						2
-					</Badge>
-					<Badge rounded color="critical">
-						2
-					</Badge>
-					<Badge rounded color="critical" size="large">
-						2
-					</Badge>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const empty = {
-    name: "empty",
-    render: () => (<Example>
-			<Example.Item title="empty, not rounded, all sizes, color: critical">
-				<View direction="row" gap={3}>
-					<Badge size="small" color="critical"/>
-					<Badge color="critical"/>
-					<Badge size="large" color="critical"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="empty, rounded, all sizes, color: critical">
-				<View direction="row" gap={3}>
-					<Badge rounded size="small" color="critical"/>
-					<Badge rounded color="critical"/>
-					<Badge rounded size="large" color="critical"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="empty, rounded, all sizes, color: neutral">
-				<View direction="row" gap={3}>
-					<Badge rounded size="small" color="neutral"/>
-					<Badge rounded/>
-					<Badge rounded size="large"/>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const highlighted = {
-    name: "highlighted",
-    render: () => (<Example>
-			<Example.Item title="highlighted, color: neutral">
-				<View gap={3} direction="row">
-					<Badge highlighted>Badge</Badge>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const container = {
-    name: "container",
-    render: () => {
-        const [hidden, setHidden] = React.useState(false);
-        return (<Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>
-				<Example.Item title="position: top-end">
-					<Badge.Container>
-						<Badge color="primary" hidden={hidden}>
-							5
-						</Badge>
-						<Avatar initials="A" squared/>
-					</Badge.Container>
-				</Example.Item>
-
-				<Example.Item title="position: bottom-end">
-					<Badge.Container position="bottom-end">
-						<Badge color="primary" hidden={hidden}>
-							5
-						</Badge>
-						<Avatar initials="A" squared/>
-					</Badge.Container>
-				</Example.Item>
-
-				<Example.Item title="position: top-end, rounded, multiple digits">
-					<Badge.Container>
-						<Badge size="small" color="primary" rounded hidden={hidden}>
-							123
-						</Badge>
-						<Avatar initials="A" squared/>
-					</Badge.Container>
-				</Example.Item>
-
-				<Example.Item title="position: top-end, rounded, empty">
-					<Badge.Container>
-						<Badge color="primary" rounded hidden={hidden}/>
-						<Avatar initials="A" squared/>
-					</Badge.Container>
-				</Example.Item>
-
-				<Example.Item title={["position: top-end, overlap", "should cover the circular avatar"]}>
-					<Badge.Container overlap>
-						<Badge size="small" color="primary" rounded hidden={hidden}>
-							2
-						</Badge>
-						<Avatar initials="A"/>
-					</Badge.Container>
-				</Example.Item>
-
-				<Example.Item title={["position: bottom-end, overlap", "should cover the circular avatar"]}>
-					<Badge.Container overlap position="bottom-end">
-						<Badge size="small" color="primary" rounded hidden={hidden}>
-							2
-						</Badge>
-						<Avatar initials="A"/>
-					</Badge.Container>
-				</Example.Item>
-
-				<Example.Item title={["position: top-end, overlap", "should cover the icon"]}>
-					<Badge.Container overlap position="top-end">
-						<Badge size="small" color="primary" rounded hidden={hidden}/>
-						<Icon svg={IconCheckmark} size={5}/>
-					</Badge.Container>
-				</Example.Item>
-			</Example>);
-    },
-};
-export const href = {
-    name: "href",
-    render: () => (<Badge href="https://reshaped.so" dismissAriaLabel="Dismiss">
-			Badge
-		</Badge>),
-    play: async ({ canvas }) => {
-        const link = canvas.getByRole("link");
-        expect(link).toHaveAttribute("href", "https://reshaped.so");
-    },
-};
-export const onClick = {
-    name: "onClick",
-    args: {
-        handleClick: fn(),
-    },
-    render: (args) => <Badge onClick={args.handleClick}>Badge</Badge>,
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(button);
-        expect(args.handleClick).toHaveBeenCalledTimes(1);
-        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Badge color="primary" 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");
-    },
-};

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

@@ -1,40 +0,0 @@
-import { fn } from "storybook/test";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").BreadcrumbsProps> & {
-        Item: import("react").FC<import("../Breadcrumbs.types").ItemProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const color: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const item: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const icon: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const slots: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const collapsed: StoryObj;
-export declare const multiline: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const onClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const href: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,187 +0,0 @@
-import { expect, fn, userEvent } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Breadcrumbs from "../index.js";
-import Badge from "../../Badge/index.js";
-import IconZap from "../../../icons/Zap.js";
-export default {
-    title: "Components/Breadcrumbs",
-    component: Breadcrumbs,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/breadcrumbs",
-        },
-    },
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: neutral">
-				<Breadcrumbs ariaLabel="breadcrumb neutral">
-					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-
-			<Example.Item title="color: primary">
-				<Breadcrumbs color="primary" ariaLabel="breadcrumb primary">
-					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-		</Example>),
-};
-export const item = {
-    name: "item, disabled",
-    render: () => (<Example>
-			<Example.Item title="disabled item">
-				<Breadcrumbs color="primary" ariaLabel="breadcrumb disabled">
-					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }} disabled>
-						Disabled item 2
-					</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-		</Example>),
-};
-export const icon = {
-    name: "item, icon",
-    render: () => (<Example>
-			<Example.Item title="item with icon">
-				<Breadcrumbs color="primary" ariaLabel="breadcrumb with icon">
-					<Breadcrumbs.Item icon={IconZap} onClick={() => { }}>
-						Item 1
-					</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-		</Example>),
-};
-export const slots = {
-    name: "separator, children",
-    render: () => (<Example>
-			<Example.Item title="slot: separator">
-				<Breadcrumbs color="primary" separator="/" ariaLabel="breadcrumb with separator">
-					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-
-			<Example.Item title="custom child content">
-				<Breadcrumbs ariaLabel="breadcrumb with custom children">
-					<Breadcrumbs.Item onClick={() => { }}>
-						<Badge>Item 1</Badge>
-					</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>
-						<Badge>Item 2</Badge>
-					</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-		</Example>),
-};
-export const collapsed = {
-    name: "collapsed",
-    render: () => (<Example>
-			<Example.Item title="collapsed, 3 items shown by default">
-				<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumbs one" expandAriaLabel="Expand items">
-					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-
-			<Example.Item title="collapsed, 4 items shown by default">
-				<Breadcrumbs defaultVisibleItems={4} ariaLabel="breadcrumb two" expandAriaLabel="Expand items">
-					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-
-			<Example.Item title="collapsed, 3 items shown by default, not expandable">
-				<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumb three" disableExpand>
-					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
-					<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
-					<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
-				</Breadcrumbs>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        let triggers = canvas.getAllByRole("button");
-        expect(triggers[0]).toHaveTextContent("Item 1");
-        expect(triggers[1]).toHaveAccessibleName("Expand items");
-        expect(triggers[2]).toHaveTextContent("Item 4");
-        await userEvent.click(triggers[1]);
-        triggers = canvas.getAllByRole("button");
-        expect(triggers[0]).toHaveTextContent("Item 1");
-        expect(triggers[1]).toHaveTextContent("Item 2");
-        expect(triggers[2]).toHaveTextContent("Item 3");
-        expect(triggers[3]).toHaveTextContent("Item 4");
-    },
-};
-export const multiline = {
-    name: "composition, multiline",
-    render: () => (<Example>
-			<Example.Item title="wraps content when multiline">
-				<Breadcrumbs ariaLabel="breadcrumb multiline">
-					{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (<Breadcrumbs.Item onClick={() => { }} key={i}>
-							Item {i}
-						</Breadcrumbs.Item>))}
-				</Breadcrumbs>
-			</Example.Item>
-		</Example>),
-};
-export const onClick = {
-    name: "item, onClick, disabled",
-    args: {
-        handleClick: fn(),
-    },
-    render: (args) => (<Breadcrumbs>
-			<Breadcrumbs.Item onClick={args.handleClick}>Trigger</Breadcrumbs.Item>
-			<Breadcrumbs.Item onClick={args.handleClick} disabled>
-				Trigger
-			</Breadcrumbs.Item>
-		</Breadcrumbs>),
-    play: async ({ args, canvas }) => {
-        const triggers = canvas.getAllByRole("button");
-        await userEvent.click(triggers[0]);
-        expect(args.handleClick).toHaveBeenCalledTimes(1);
-        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: triggers[0] }));
-        await userEvent.click(triggers[1]);
-        expect(args.handleClick).toHaveBeenCalledTimes(1);
-    },
-};
-export const href = {
-    name: "item, href",
-    render: () => (<Breadcrumbs>
-			<Breadcrumbs.Item href="https://reshaped.so">Trigger</Breadcrumbs.Item>
-		</Breadcrumbs>),
-    play: async ({ canvas }) => {
-        const triggers = canvas.getAllByRole("link");
-        expect(triggers[0]).toHaveAttribute("href", "https://reshaped.so");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Breadcrumbs className="test-classname" attributes={{ id: "test-id" }}>
-				<Breadcrumbs.Item>Trigger</Breadcrumbs.Item>
-			</Breadcrumbs>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,79 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "as" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
-        color?: "primary" | "critical" | "positive" | "neutral" | "media" | "inherit";
-        variant?: "solid" | "outline" | "ghost" | "faded";
-        icon?: import("../../Icon").IconProps["svg"];
-        endIcon?: import("../../Icon").IconProps["svg"];
-        size?: import("../../../types/global").Responsive<import("../Button.types").Size>;
-        rounded?: boolean;
-        loading?: boolean;
-        loadingAriaLabel?: string;
-        elevated?: boolean;
-        fullWidth?: import("../../../types/global").Responsive<boolean>;
-        highlighted?: boolean;
-    } & import("react").RefAttributes<import("../../Actionable").ActionableRef>> & {
-        Aligner: import("react").FC<import("./..").ButtonAlignerProps>;
-        Group: import("react").FC<import("./..").ButtonGroupProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const variantAndColor: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const icon: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const elevated: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const rounded: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const fullWidth: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const loading: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const highlighted: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const disabled: StoryObj;
-export declare const aligner: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const composition: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const href: StoryObj;
-export declare const onClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const hrefOnClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const as: StoryObj;
-export declare const className: StoryObj;
-export declare const group: StoryObj;
-export declare const groupClassName: StoryObj;