reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,113 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
-import Icon from "../index.js";
-import Text from "../../Text/index.js";
-import IconZap from "../../../icons/Zap.js";
-import IconMic from "../../../icons/Mic.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Utility components/Icon",
-    component: Icon,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/icon",
-        },
-    },
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: 4">
-				<Icon svg={IconZap} size={4}/>
-			</Example.Item>
-			<Example.Item title="size: 8">
-				<Icon svg={IconZap} size={8}/>
-			</Example.Item>
-			<Example.Item title="size: 100%">
-				<View width={25} height={25}>
-					<Icon svg={IconZap} size="100%"/>
-				</View>
-			</Example.Item>
-			<Example.Item title={["responsive size", "[s] 5", "[m]: 10"]}>
-				<Icon svg={IconZap} size={{ s: 5, m: 10 }}/>
-			</Example.Item>
-			<Example.Item title="size: inherit from font">
-				<Text variant="title-6">
-					<View direction="row" align="center" gap={2}>
-						<Icon svg={IconZap}/>
-						<View.Item>Reshaped</View.Item>
-					</View>
-				</Text>
-			</Example.Item>
-		</Example>),
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: neutral">
-				<Icon svg={IconZap} color="neutral"/>
-			</Example.Item>
-			<Example.Item title="color: neutral-faded">
-				<Icon svg={IconZap} color="neutral-faded"/>
-			</Example.Item>
-			<Example.Item title="color: primary">
-				<Icon svg={IconZap} color="primary"/>
-			</Example.Item>
-			<Example.Item title="color: critical">
-				<Icon svg={IconZap} color="critical"/>
-			</Example.Item>
-			<Example.Item title="color: positive">
-				<Icon svg={IconZap} color="positive"/>
-			</Example.Item>
-			<Example.Item title="color: disabled">
-				<Icon svg={IconZap} color="disabled"/>
-			</Example.Item>
-			<Example.Item title="color: inherit">
-				<div style={{ color: "tomato" }}>
-					<Icon svg={IconZap}/>
-				</div>
-			</Example.Item>
-		</Example>),
-};
-export const autoWidth = {
-    name: "autoWidth, blank",
-    render: () => (<Example>
-			<Example.Item title="square boundaries">
-				<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
-					<Icon svg={IconMic} size={10}/>
-				</div>
-			</Example.Item>
-			<Example.Item title="auto width boundaries">
-				<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
-					<Icon svg={IconMic} size={10} autoWidth/>
-				</div>
-			</Example.Item>
-			<Example.Item title="blank">
-				<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
-					<Icon svg={null} size={10}/>
-				</div>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Icon svg={IconZap} 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");
-    },
-};
-export const render = {
-    name: "test: hidden from sr",
-    render: () => (<div data-testid="root">
-			<Icon svg={IconZap}/>
-		</div>),
-    play: ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toBeInTheDocument();
-        expect(root).toHaveAttribute("aria-hidden");
-    },
-};

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

@@ -1,41 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn, Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("..").ImageProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const src: StoryObj;
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const radius: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const displayMode: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const onLoad: StoryObj<{
-    handleLoad: ReturnType<typeof fn>;
-}>;
-export declare const onError: StoryObj<{
-    handleError: Mock;
-}>;
-export declare const fallback: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const renderImage: StoryObj;
-export declare const imageAttributes: StoryObj;
-export declare const ratio: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};

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

@@ -1,196 +0,0 @@
-import { expect, fn, waitFor } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
-import Icon from "../../Icon/index.js";
-import IconZap from "../../../icons/Zap.js";
-import Image from "../Image.js";
-export default {
-    title: "Utility components/Image",
-    component: Image,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/image",
-        },
-    },
-};
-const imgUrl = "https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80";
-export const src = {
-    name: "src, alt",
-    render: () => (<Example>
-			<Example.Item title="src, alt">
-				<Image src={imgUrl} alt="Image alt"/>
-			</Example.Item>
-
-			<Example.Item title="src">
-				<Image src={imgUrl}/>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const presentation = canvas.getByRole("presentation");
-        const img = canvas.getByRole("img");
-        expect(presentation).toBeInTheDocument();
-        expect(img).toBeInTheDocument();
-        expect(img).toHaveAccessibleName("Image alt");
-    },
-};
-export const size = {
-    name: "width, height, maxWidth, aspectRatio",
-    render: () => (<Example>
-			<Example.Item title="width: 200px">
-				<Image src={imgUrl} width="200px"/>
-			</Example.Item>
-			<Example.Item title="height: 200px">
-				<Image src={imgUrl} height="200px"/>
-			</Example.Item>
-			<Example.Item title="maxWidth: 200px">
-				<Image src={imgUrl} maxWidth="200px"/>
-			</Example.Item>
-			<Example.Item title="aspectRatio: 1/1">
-				<Image src={imgUrl} aspectRatio={1 / 1} width="300px"/>
-			</Example.Item>
-			<Example.Item title={["responsive width", "[s] 200px", "[m+] 300px"]}>
-				<Image src={imgUrl} width={{ s: "200px", m: "300px" }}/>
-			</Example.Item>
-		</Example>),
-};
-export const radius = {
-    name: "borderRadius",
-    render: () => (<Example>
-			<Example.Item title="radius: small">
-				<View width="300px">
-					<Image src={imgUrl} borderRadius="small"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="radius: medium">
-				<View width="300px">
-					<Image src={imgUrl} borderRadius="medium"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="radius: large">
-				<View width="300px">
-					<Image src={imgUrl} borderRadius="large"/>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const displayMode = {
-    name: "displayMode",
-    render: () => (<Example>
-			<Example.Item title="mode: cover">
-				<Image src={imgUrl} height="200px" width="100%" displayMode="cover"/>
-			</Example.Item>
-			<Example.Item title="mode: contain">
-				<Image src={imgUrl} height="200px" width="100%" displayMode="contain"/>
-			</Example.Item>
-		</Example>),
-};
-export const onLoad = {
-    name: "onLoad",
-    args: {
-        handleLoad: fn(),
-    },
-    render: (args) => <Image src={imgUrl} alt="photo" onLoad={args.handleLoad}/>,
-    play: async ({ canvas, args }) => {
-        const { handleLoad } = args;
-        const img = canvas.getByRole("img");
-        await waitFor(() => {
-            expect(handleLoad).toHaveBeenCalledTimes(1);
-            expect(handleLoad).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "load" }));
-        });
-    },
-};
-export const onError = {
-    name: "onError",
-    args: {
-        handleError: fn(),
-    },
-    render: (args) => <Image src="/invalid.png" alt="photo" onError={args.handleError}/>,
-    play: async ({ canvas, args }) => {
-        const { handleError } = args;
-        const img = canvas.getByRole("img");
-        await waitFor(() => {
-            expect(handleError).toHaveBeenCalledTimes(1);
-            expect(handleError).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "error" }));
-        });
-    },
-};
-export const fallback = {
-    name: "fallback",
-    render: () => (<Example>
-			<Example.Item title="fallback, background, on error">
-				<View width="300px">
-					<View aspectRatio={16 / 9}>
-						<Image src="error" fallback/>
-					</View>
-				</View>
-			</Example.Item>
-			<Example.Item title="fallback, image, on error">
-				<View width="300px">
-					<View aspectRatio={16 / 9}>
-						<Image src="error" fallback={imgUrl}/>
-					</View>
-				</View>
-			</Example.Item>
-
-			<Example.Item title="fallback, icon, on error">
-				<View width="300px">
-					<View aspectRatio={16 / 9}>
-						<Image src="error" fallback={<Icon svg={IconZap} size={10}/>}/>
-					</View>
-				</View>
-			</Example.Item>
-			<Example.Item title="fallback, icon, no url">
-				<View width="300px">
-					<View aspectRatio={16 / 9}>
-						<Image fallback={<Icon svg={IconZap} size={10}/>}/>
-					</View>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const renderImage = {
-    name: "renderImage",
-    render: () => (<Example>
-			<Example.Item title="renderImage">
-				<Image src={imgUrl} alt="Amsterdam canal" renderImage={(attributes) => <img {...attributes} id="test-image"/>}/>
-			</Example.Item>
-			<Example.Item title="renderImage, fallback">
-				<Image src="error" fallback={imgUrl} alt="Amsterdam canal 2" renderImage={(attributes) => <img {...attributes} id="test-image-fallback"/>}/>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const images = canvas.getAllByRole("img");
-        expect(images[0]).toHaveAccessibleName("Amsterdam canal");
-        expect(images[0]).toHaveAttribute("id", "test-image");
-        expect(images[1]).toHaveAccessibleName("Amsterdam canal 2");
-        expect(images[1]).toHaveAttribute("id", "test-image-fallback");
-    },
-};
-export const imageAttributes = {
-    name: "className, attributes,imageAttributes",
-    render: () => (<div data-testid="root">
-			<Image src={imgUrl} alt="photo" className="test-classname" attributes={{ id: "test-id" }} imageAttributes={{ "data-testid": "test-img-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const img = canvas.getByRole("img");
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(img).toHaveAttribute("data-testid", "test-img-id");
-    },
-};
-export const ratio = {
-    name: "test: aspectRatio",
-    render: () => (<Example>
-			<Example.Item title="ratio: 16/9">
-				<View aspectRatio={16 / 9}>
-					<Image src={imgUrl}/>
-				</View>
-			</Example.Item>
-			<Example.Item title="ratio: 16/9, displayMode: contain">
-				<View aspectRatio={16 / 9}>
-					<Image src={imgUrl} displayMode="contain"/>
-				</View>
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,42 +0,0 @@
-import { fn } from "storybook/test";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
-        icon?: import("../../Icon").IconProps["svg"];
-        color?: "inherit" | "critical" | "primary" | "positive" | "warning";
-        variant?: "plain" | "underline";
-    } & import("react").RefAttributes<import("../../Actionable").ActionableRef>>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const variant: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const color: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const icon: {
-    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 disabled: StoryObj;
-export declare const render: StoryObj;
-export declare const className: StoryObj;
-export declare const testMultilineInText: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};

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

@@ -1,155 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Link from "../index.js";
-import Text from "../../Text/index.js";
-import IconZap from "../../../icons/Zap.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/Link",
-    component: Link,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/breadcrumbs",
-        },
-    },
-};
-export const variant = {
-    name: "variant",
-    render: () => (<Example>
-			<Example.Item title="variant: underline">
-				<Link href="http://reshaped.so" attributes={{ target: "_blank" }}>
-					Reshaped
-				</Link>
-			</Example.Item>
-			<Example.Item title="variant: plain">
-				<Link onClick={() => { }} variant="plain">
-					Link
-				</Link>
-			</Example.Item>
-		</Example>),
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: primary">
-				<Link color="primary">Link</Link>
-			</Example.Item>
-			<Example.Item title="color: critical">
-				<Link color="critical">Link</Link>
-			</Example.Item>
-			<Example.Item title="color: positive">
-				<Link color="positive">Link</Link>
-			</Example.Item>
-			<Example.Item title="color: warning">
-				<Link color="warning">Link</Link>
-			</Example.Item>
-			<Example.Item title="color: inherit">
-				<Link color="inherit">Link</Link>
-			</Example.Item>
-		</Example>),
-};
-export const icon = {
-    name: "icon",
-    render: () => (<Example>
-			<Example.Item title="icon, variant: underline">
-				<Link icon={IconZap}>Link</Link>
-			</Example.Item>
-			<Example.Item title="icon, variant: plain">
-				<Link icon={IconZap} variant="plain">
-					Link
-				</Link>
-			</Example.Item>
-			<Example.Item title={["icon, variant: underline", "should inherit display-1 size from the parent"]}>
-				<Text variant="title-3">
-					<Link icon={IconZap} variant="underline">
-						Instant delivery
-					</Link>
-				</Text>
-			</Example.Item>
-		</Example>),
-};
-export const href = {
-    name: "href",
-    render: () => <Link href="https://reshaped.so">Trigger</Link>,
-    play: async ({ canvas }) => {
-        const el = canvas.getByRole("link");
-        expect(el).toHaveAttribute("href", "https://reshaped.so");
-    },
-};
-export const onClick = {
-    name: "onClick",
-    args: {
-        handleClick: fn(),
-    },
-    render: (args) => <Link onClick={args.handleClick}>Trigger</Link>,
-    play: async ({ canvas, args }) => {
-        const { handleClick } = args;
-        const el = canvas.getAllByRole("button")[0];
-        await userEvent.click(el);
-        expect(el).toHaveAttribute("type", "button");
-        expect(handleClick).toHaveBeenCalledTimes(1);
-        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
-    },
-};
-export const hrefOnClick = {
-    name: "href + onClick",
-    args: {
-        handleClick: fn(),
-    },
-    render: (args) => (<Link onClick={(e) => {
-            e.preventDefault();
-            args.handleClick(e);
-        }} href="https://reshaped.so">
-			Trigger
-		</Link>),
-    play: async ({ canvas, args }) => {
-        const { handleClick } = args;
-        const el = canvas.getByRole("link");
-        await userEvent.click(el);
-        expect(el).toHaveAttribute("href", "https://reshaped.so");
-        expect(handleClick).toHaveBeenCalledTimes(1);
-        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Link disabled onClick={() => { }}>
-			Trigger
-		</Link>),
-    play: async ({ canvas }) => {
-        const el = canvas.getAllByRole("button")[0];
-        expect(el).toBeDisabled();
-    },
-};
-export const render = {
-    name: "render",
-    render: () => <Link render={(props) => <section {...props}/>}>Trigger</Link>,
-    play: async ({ canvas }) => {
-        const el = canvas.getByText("Trigger");
-        expect(el).toBeInTheDocument();
-        expect(el.tagName).toBe("SECTION");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Link className="test-classname" attributes={{ id: "test-id" }}>
-				Trigger
-			</Link>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};
-export const testMultilineInText = {
-    name: "test: multiline",
-    render: () => (<Example>
-			<Example.Item title="should wrap inside the text">
-				<div>
-					Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;
-					<Link href="/">this very very long link</Link> to it.
-				</div>
-			</Example.Item>
-		</Example>),
-};

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

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

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

@@ -1,68 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Loader from "../index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Loader",
-    component: Loader,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/loader",
-        },
-    },
-};
-export const size = {
-    name: "size",
-    render: () => {
-        return (<Example>
-				<Example.Item title="size: medium">
-					<Loader size="medium" ariaLabel="Loading"/>
-				</Example.Item>
-				<Example.Item title="size: small">
-					<Loader size="small" ariaLabel="Loading"/>
-				</Example.Item>
-				<Example.Item title="size: large">
-					<Loader size="large" ariaLabel="Loading"/>
-				</Example.Item>
-				<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
-					<Loader size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
-				</Example.Item>
-			</Example>);
-    },
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: primary">
-				<Loader ariaLabel="Loading"/>
-			</Example.Item>
-			<Example.Item title="color: critical">
-				<Loader color="critical" ariaLabel="Loading"/>
-			</Example.Item>
-			<Example.Item title="color: positive">
-				<Loader color="positive" ariaLabel="Loading"/>
-			</Example.Item>
-			<Example.Item title="color: inherit">
-				<Loader color="inherit" ariaLabel="Loading"/>
-			</Example.Item>
-		</Example>),
-};
-export const ariaLabel = {
-    name: "ariaLabel",
-    render: () => <Loader ariaLabel="Loading" attributes={{ "data-testid": "root" }}/>,
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root");
-        expect(root).toHaveAttribute("aria-live", "assertive");
-        expect(root).toHaveAttribute("aria-label", "Loading");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Loader className="test-classname" attributes={{ id: "test-id" }} ariaLabel="Loading"/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};