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

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

@@ -1,137 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Switch from "../index.js";
-import View from "../../View/index.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/Switch",
-    component: Switch,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/switch",
-        },
-    },
-};
-export const size = () => (<Example>
-		<Example.Item title="size: medium">
-			<Switch name="active" size="medium" inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-		<Example.Item title="size: small">
-			<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-		<Example.Item title="size: large">
-			<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-		<Example.Item title="size: responsive, s: small, m: large">
-			<Switch name="active" size={{ s: "small", m: "large" }} inputAttributes={{ "aria-label": "test switch" }}/>
-		</Example.Item>
-	</Example>);
-export const label = () => (<Example>
-		<Example.Item title="size: medium">
-			<View direction="row" gap={8}>
-				<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}>
-					Wi-fi
-				</Switch>
-				<Switch reversed name="active" inputAttributes={{ "aria-label": "test switch" }}>
-					Wi-fi
-				</Switch>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: small">
-			<View direction="row" gap={8}>
-				<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
-					Wi-fi
-				</Switch>
-				<Switch reversed name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
-					Wi-fi
-				</Switch>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="size: large">
-			<View direction="row" gap={8}>
-				<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
-					Wi-fi
-				</Switch>
-				<Switch reversed name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}>
-					Wi-fi
-				</Switch>
-			</View>
-		</Example.Item>
-	</Example>);
-export const defaultChecked = {
-    name: "defaultChecked, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Switch name="test-name" defaultChecked onChange={args.handleChange}>
-			Label
-		</Switch>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input).toBeChecked();
-        await userEvent.click(input);
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            checked: false,
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).not.toBeChecked();
-    },
-};
-export const checked = {
-    name: "checked, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Switch name="test-name" checked onChange={args.handleChange}>
-			Label
-		</Switch>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("checkbox");
-        expect(input).toBeChecked();
-        await userEvent.click(input);
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            checked: false,
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toBeChecked();
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Example>
-			<Example.Item title="disabled, unselected">
-				<Switch name="active" disabled inputAttributes={{ "aria-label": "test switch" }}/>
-			</Example.Item>
-			<Example.Item title="disabled, selected">
-				<Switch name="active" disabled defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
-			</Example.Item>
-			<Example.Item title="disabled, with label">
-				<Switch name="active" disabled>
-					Switch
-				</Switch>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        const [input] = canvas.getAllByRole("checkbox");
-        expect(input).toBeDisabled();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Switch className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} name="name">
-				Label
-			</Switch>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const input = canvas.getByRole("checkbox");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(input).toHaveAttribute("id", "test-input-id");
-    },
-};

package/dist/components/Switch/tests/Switch.test.stories.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").SwitchProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;

package/dist/components/Switch/tests/Switch.test.stories.js

@@ -1,11 +0,0 @@
-import Switch from "../index.js";
-export default {
-    title: "Components/Switch/tests",
-    component: Switch,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/switch",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};

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

@@ -1,42 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./..").TableProps> & {
-        Cell: typeof import("../Table").TableCell;
-        Heading: typeof import("../Table").TableHeading;
-        Row: typeof import("../Table").TableRow;
-        Body: typeof import("../Table").TableBody;
-        Head: typeof import("../Table").TableHead;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const layout: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const border: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const rows: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const render: StoryObj;
-export declare const tbody: StoryObj;
-export declare const tabIndex: StoryObj;
-export declare const className: StoryObj;
-export declare const edgeCases: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const examples: {
-    name: string;
-    render: () => React.JSX.Element;
-};

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

@@ -1,348 +0,0 @@
-import React from "react";
-import { Example } from "../../../utilities/storybook/index.js";
-import Table from "../index.js";
-import Checkbox from "../../Checkbox/index.js";
-import Card from "../../Card/index.js";
-import View from "../../View/index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Table",
-    component: Table,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/table",
-        },
-    },
-};
-export const layout = {
-    name: "base",
-    render: () => (<Example>
-			<Example.Item title="base">
-				<Table>
-					<Table.Head>
-						<Table.Row>
-							<Table.Heading>Column 1</Table.Heading>
-							<Table.Heading>Column 2</Table.Heading>
-						</Table.Row>
-					</Table.Head>
-					<Table.Body>
-						<Table.Row>
-							<Table.Cell>Cell 1</Table.Cell>
-							<Table.Cell>Cell 2</Table.Cell>
-						</Table.Row>
-					</Table.Body>
-				</Table>
-			</Example.Item>
-			<Example.Item title="colspan: 2 for col 2, rowspan: 2 for cell 3">
-				<Table>
-					<Table.Row>
-						<Table.Heading>Column 1</Table.Heading>
-						<Table.Heading colSpan={2}>Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-						<Table.Cell rowSpan={2}>Cell 3</Table.Cell>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-			<Example.Item title="align: center for heading 1, align: end for heading 2">
-				<Table>
-					<Table.Row>
-						<Table.Heading align="center">Column 1</Table.Heading>
-						<Table.Heading align="end">Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-			<Example.Item title="valign: center for cell 2, valign: end for cell 3">
-				<Table>
-					<Table.Row>
-						<Table.Heading>Column 1</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>
-							<View height={15} backgroundColor="neutral-faded"/>
-						</Table.Cell>
-						<Table.Cell verticalAlign="center">Cell 2</Table.Cell>
-						<Table.Cell verticalAlign="end">Cell 3</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-			<Example.Item title="width: 40%, minWidth: 200px for col 1">
-				<Table>
-					<Table.Row>
-						<Table.Heading width="40%" minWidth="200px">
-							Column 1
-						</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-		</Example>),
-};
-export const border = {
-    name: "border",
-    render: () => (<Example>
-			<Example.Item title="border: true">
-				<Table border>
-					<Table.Row>
-						<Table.Heading>Column 1</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-			<Example.Item title="columnBorder: true">
-				<Table columnBorder>
-					<Table.Row>
-						<Table.Heading>Column 1</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-			<Example.Item title="columnBorder: true, border: true">
-				<Table columnBorder border>
-					<Table.Row>
-						<Table.Heading>Column 1</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-		</Example>),
-};
-export const rows = {
-    name: "rows",
-    render: () => (<Example>
-			<Example.Item title="highlighted for row 2">
-				<Table>
-					<Table.Row>
-						<Table.Heading>Column 1</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row highlighted>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-			<Example.Item title="clickable row 2, focus ring">
-				<Table>
-					<Table.Row>
-						<Table.Heading>Column 1</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row onClick={() => { }}>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-		</Example>),
-};
-export const render = {
-    name: "rendering",
-    render: () => (<Table>
-			<Table.Head>
-				<Table.Row>
-					<Table.Heading>Heading</Table.Heading>
-					<Table.Heading>Heading</Table.Heading>
-				</Table.Row>
-			</Table.Head>
-			<Table.Body>
-				<Table.Row>
-					<Table.Cell>Content</Table.Cell>
-					<Table.Cell>Content</Table.Cell>
-				</Table.Row>
-			</Table.Body>
-		</Table>),
-    play: async ({ canvas }) => {
-        const body = canvas.getAllByRole("rowgroup");
-        const rows = canvas.getAllByRole("row");
-        const headings = canvas.getAllByRole("columnheader");
-        const cells = canvas.getAllByRole("cell");
-        expect(body).toHaveLength(2);
-        expect(rows).toHaveLength(2);
-        expect(headings).toHaveLength(2);
-        expect(cells).toHaveLength(2);
-        expect(canvas.getAllByText("Heading")).toHaveLength(2);
-        expect(canvas.getAllByText("Content")).toHaveLength(2);
-    },
-};
-export const tbody = {
-    name: "tbody rendering",
-    render: () => (<Table>
-			<Table.Row>
-				<Table.Heading>Heading</Table.Heading>
-				<Table.Heading>Heading</Table.Heading>
-			</Table.Row>
-		</Table>),
-    play: async ({ canvas }) => {
-        const body = canvas.getByRole("rowgroup");
-        expect(body).toBeInTheDocument();
-    },
-};
-export const tabIndex = {
-    name: "adds tabIndex for clickable rows",
-    render: () => (<Table>
-			<Table.Row>
-				<Table.Cell />
-			</Table.Row>
-			<Table.Row onClick={() => { }}>
-				<Table.Cell />
-			</Table.Row>
-			<Table.Row attributes={{ onClick: () => { } }}>
-				<Table.Cell />
-			</Table.Row>
-		</Table>),
-    play: async ({ canvas }) => {
-        const elRows = canvas.getAllByRole("row");
-        expect(elRows[0]).not.toHaveAttribute("tabIndex");
-        expect(elRows[1]).toHaveAttribute("tabIndex", "0");
-        expect(elRows[2]).toHaveAttribute("tabIndex", "0");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Table className="test-classname" attributes={{ id: "test-id" }}>
-				<Table.Row attributes={{ id: "test-row-id" }}>
-					<Table.Cell attributes={{ id: "test-cell-id" }}></Table.Cell>
-				</Table.Row>
-			</Table>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const row = canvas.getByRole("row");
-        const cell = canvas.getByRole("cell");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(row).toHaveAttribute("id", "test-row-id");
-        expect(cell).toHaveAttribute("id", "test-cell-id");
-    },
-};
-export const edgeCases = {
-    name: "test: edge cases",
-    render: () => (<Example>
-			<Example.Item title="scroll fade">
-				<Table>
-					<Table.Row>
-						<Table.Heading width="500px">Column 1</Table.Heading>
-						<Table.Heading width="500px">Column 2</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-			<Example.Item title="card with highlighted heading">
-				<Card elevated padding={0}>
-					<Table>
-						<Table.Row highlighted>
-							<Table.Heading width="50%" minWidth="200px">
-								Column 1
-							</Table.Heading>
-							<Table.Heading colSpan={2} align="end">
-								Column 2
-							</Table.Heading>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>Cell 1</Table.Cell>
-							<Table.Cell align="center">Cell 2</Table.Cell>
-							<Table.Cell align="end">Cell 3</Table.Cell>
-						</Table.Row>
-						<Table.Row>
-							<Table.Cell>Cell 1</Table.Cell>
-							<Table.Cell align="center">Cell 2</Table.Cell>
-							<Table.Cell align="end">Cell 3</Table.Cell>
-						</Table.Row>
-					</Table>
-				</Card>
-			</Example.Item>
-			<Example.Item title="width: auto, nowrap">
-				<Table>
-					<Table.Row>
-						<Table.Heading width="50%">Column 1</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
-						<Table.Heading>Column 3</Table.Heading>
-						<Table.Heading width="auto">Long heading title</Table.Heading>
-					</Table.Row>
-					<Table.Row>
-						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell>Cell 2</Table.Cell>
-						<Table.Cell>Cell 3</Table.Cell>
-						<Table.Cell>Cell 4</Table.Cell>
-					</Table.Row>
-				</Table>
-			</Example.Item>
-		</Example>),
-};
-const SelectionDemo = () => {
-    const [value, setValue] = React.useState([]);
-    const rows = [
-        {
-            value: "1",
-        },
-        { value: "2" },
-    ];
-    const allSelected = value.length === rows.length;
-    return (<Table>
-			<Table.Row>
-				<Table.Heading width="auto">
-					<Checkbox inputAttributes={{ "aria-label": "Select all" }} name="hey" checked={allSelected} indeterminate={!!value.length && value.length < rows.length} onChange={() => {
-            setValue(allSelected ? [] : rows.map((row) => row.value));
-        }}/>
-				</Table.Heading>
-				<Table.Heading>Column 1</Table.Heading>
-				<Table.Heading>Column 2</Table.Heading>
-			</Table.Row>
-			{rows.map((row) => (<Table.Row key={row.value} highlighted={value.includes(row.value)}>
-					<Table.Cell>
-						<Checkbox name="hey" value={row.value} inputAttributes={{ "aria-label": "Select the row" }} checked={value.includes(row.value)} onChange={(args) => {
-                setValue((prev) => {
-                    if (!args.value)
-                        return prev;
-                    if (args.checked)
-                        return [...prev, args.value];
-                    return prev.filter((item) => item !== args.value);
-                });
-            }}/>
-					</Table.Cell>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>))}
-		</Table>);
-};
-export const examples = {
-    name: "test: selectable",
-    render: () => (<Example>
-			<Example.Item title="selectable">
-				<SelectionDemo />
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,62 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./..").TabsProps> & {
-        Item: React.ForwardRefExoticComponent<import("./..").TabsItemProps & React.RefAttributes<import("../../Actionable").ActionableRef>>;
-        List: React.FC<import("../Tabs.types").ListProps>;
-        Panel: React.FC<import("../Tabs.types").PanelProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj;
-export declare const variant: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const direction: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const icon: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const equalWidth: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const href: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const disabled: StoryObj;
-export declare const defaultValue: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const value: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;
-export declare const testFocusableContent: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const testComposition: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const testEdgeCaseDom: {
-    name: string;
-    render: () => React.JSX.Element;
-};