reshaped 3.9.0-canary.0 → 3.9.0-canary.1

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;

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;