reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,237 +0,0 @@
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import IconZap from "../../../icons/Zap.js";
-import TextField from "../index.js";
-import FormControl from "../../FormControl/index.js";
-import View from "../../View/index.js";
-import Text from "../../Text/index.js";
-import Button from "../../Button/index.js";
-import Badge from "../../Badge/index.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/TextField",
-    component: TextField,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/text-field",
-        },
-    },
-};
-export const variant = {
-    name: "variant",
-    render: () => (<Example>
-			<Example.Item title="variant: faded">
-				<TextField variant="faded" name="Name" placeholder="Enter your name"/>
-			</Example.Item>
-
-			<Example.Item title="variant: headless">
-				<TextField variant="headless" name="Name" placeholder="Enter your name"/>
-			</Example.Item>
-		</Example>),
-};
-export const rounded = {
-    name: "rounded",
-    render: () => (<Example>
-			<Example.Item title="rounded">
-				<TextField rounded name="Name" placeholder="Enter your name" icon={IconZap} prefix="+31" endSlot={<Button rounded size="small" icon={IconZap}/>}/>
-			</Example.Item>
-
-			<Example.Item title="rounded, variant: faded">
-				<View direction="row" gap={2}>
-					<View.Item grow>
-						<TextField rounded variant="faded" name="Name" placeholder="Enter your name" startSlot={<Badge rounded size="small">
-									Hello
-								</Badge>}/>
-					</View.Item>
-					<Button rounded>Submit</Button>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const error = {
-    name: "hasError",
-    render: () => (<Example>
-			<Example.Item title="error">
-				<TextField name="Name" placeholder="Enter your name" hasError/>
-			</Example.Item>
-		</Example>),
-};
-export const attachments = {
-    name: "icon, endIcon, suffix, prefix, startSlot, endSlot, startSlotPadding, endSlotPadding",
-    render: () => (<Example>
-			<Example.Item title="icon">
-				<TextField name="Name" placeholder="Enter your name" value="Reshaped" icon={IconZap}/>
-			</Example.Item>
-			<Example.Item title="endIcon">
-				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
-			</Example.Item>
-
-			<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
-				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={20}/>}/>
-			</Example.Item>
-
-			<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
-				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
-			</Example.Item>
-
-			<Example.Item title="paddingSlotStart=4, paddingSlotEnd=2">
-				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlotPadding={4} endSlotPadding={2} startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>}/>
-			</Example.Item>
-
-			<Example.Item title="with all affixes">
-				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2" startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>}/>
-			</Example.Item>
-
-			<Example.Item title="multiline wrap">
-				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge size="small" key={i}>
-							Item {i + 1}
-						</Badge>))} multiline/>
-			</Example.Item>
-		</Example>),
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: small">
-				<TextField name="Name" placeholder="Enter your name" size="small" icon={IconZap}/>
-			</Example.Item>
-
-			<Example.Item title="size: medium">
-				<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
-			</Example.Item>
-
-			<Example.Item title="size: large">
-				<TextField name="Name" placeholder="Enter your name" size="large" icon={IconZap}/>
-			</Example.Item>
-
-			<Example.Item title="size: xlarge">
-				<TextField name="Name" placeholder="Enter your name" size="xlarge" icon={IconZap}/>
-			</Example.Item>
-
-			<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
-				<TextField name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }} icon={IconZap}/>
-			</Example.Item>
-		</Example>),
-};
-export const aligner = {
-    name: "aligner",
-    render: () => (<Example>
-			<Example.Item title="aligner">
-				<View gap={2}>
-					<Text variant="featured-2">What problem are you trying to solve?</Text>
-					<TextField.Aligner>
-						<TextField variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
-					</TextField.Aligner>
-					<View.Item>
-						<Button>Next</Button>
-					</View.Item>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const render = {
-    name: "base",
-    render: () => <TextField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveAttribute("name", "test-name");
-        expect(input).toHaveAccessibleName("Label");
-    },
-};
-export const placeholder = {
-    name: "placeholder",
-    render: () => (<TextField name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveValue("");
-        expect(input).toHaveAttribute("placeholder", "Placeholder");
-    },
-};
-export const id = {
-    name: "id",
-    render: () => (<TextField name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveAttribute("id", "test-id");
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => <TextField name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toBeDisabled();
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<TextField name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveValue("value");
-        input.focus();
-        await userEvent.keyboard("2");
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "value2",
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toHaveValue("value2");
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<TextField name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("textbox");
-        expect(input).toHaveValue("value");
-        input.focus();
-        await userEvent.keyboard("2");
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "value2",
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toHaveValue("value");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<TextField className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const input = canvas.getByRole("textbox");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(input).toHaveAttribute("id", "test-input-id");
-    },
-};
-export const formControl = {
-    name: "test: form control",
-    render: () => (<Example>
-			<Example.Item title="with helper">
-				<FormControl>
-					<FormControl.Label>Name</FormControl.Label>
-					<TextField name="name" placeholder="Enter your name"/>
-					<FormControl.Helper>Helper</FormControl.Helper>
-					<FormControl.Error>This field is required</FormControl.Error>
-				</FormControl>
-			</Example.Item>
-			<Example.Item title="with error">
-				<FormControl hasError>
-					<FormControl.Label>Name</FormControl.Label>
-					<TextField name="name" placeholder="Enter your name"/>
-					<FormControl.Error>This field is required</FormControl.Error>
-				</FormControl>
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,25 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").ThemeProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const scoped: StoryObj;
-export declare const light: StoryObj;
-export declare const dark: StoryObj;
-export declare const inherited: StoryObj;
-export declare const inverted: StoryObj;
-export declare const controlled: StoryObj;
-export declare const uncontrolled: StoryObj;
-export declare const disabledTransition: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};

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

@@ -1,171 +0,0 @@
-import { expect, userEvent } from "storybook/test";
-import Card from "../../Card/index.js";
-import Button from "../../Button/index.js";
-import View from "../../View/index.js";
-import MenuItem from "../../MenuItem/index.js";
-import Theme, { useTheme } from "../index.js";
-import { Example } from "../../../utilities/storybook/index.js";
-import Popover from "../../Popover/index.js";
-export default {
-    title: "Utility components/Theme",
-    component: Theme,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/theme",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const scoped = {
-    name: "scoped",
-    render: () => (<Example>
-			<Example.Item title="scoped, single">
-				<Theme name="reshaped">
-					<Card attributes={{ "data-testid": "test-id" }}>
-						<Button color="primary">Action</Button>
-					</Card>
-				</Theme>
-			</Example.Item>
-
-			<Example.Item title="scoped, multiple">
-				<Theme name={["reshaped", "figma"]}>
-					<Card attributes={{ "data-testid": "test-id-multi" }}>
-						<View direction="row" gap={4}>
-							<Button color="primary">Action</Button>
-
-							<Popover>
-								<Popover.Trigger>
-									{(attributes) => <Button attributes={attributes}>Popover</Button>}
-								</Popover.Trigger>
-								<Popover.Content>Content</Popover.Content>
-							</Popover>
-						</View>
-					</Card>
-				</Theme>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const root = canvas.getByTestId("test-id").parentNode;
-        const rootMultiple = canvas.getByTestId("test-id-multi").parentNode;
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
-        expect(rootMultiple).toHaveAttribute("data-rs-theme", " reshaped figma ");
-        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
-    },
-};
-export const light = {
-    name: "light",
-    render: () => (<Theme name="reshaped" colorMode="light">
-			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
-		</Theme>),
-    play: ({ canvas }) => {
-        const root = canvas.getByTestId("test-id").parentNode;
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(root).toHaveAttribute("data-rs-color-mode", "light");
-    },
-};
-export const dark = {
-    name: "dark",
-    render: () => (<Theme name="reshaped" colorMode="dark">
-			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
-		</Theme>),
-    play: ({ canvas }) => {
-        const root = canvas.getByTestId("test-id").parentNode;
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
-    },
-};
-export const inherited = {
-    name: "inherited",
-    render: () => (<Theme name="reshaped">
-			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
-		</Theme>),
-    play: ({ canvas }) => {
-        const root = canvas.getByTestId("test-id").parentNode;
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        // Our storybook setup uses dark by default
-        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
-    },
-};
-export const inverted = {
-    name: "inverted",
-    render: () => (<Theme name="reshaped" colorMode="inverted">
-			<Card attributes={{ "data-testid": "test-id" }}>Content</Card>
-		</Theme>),
-    play: ({ canvas }) => {
-        const root = canvas.getByTestId("test-id").parentNode;
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(root).toHaveAttribute("data-rs-color-mode", "light");
-    },
-};
-export const controlled = {
-    name: "controlled",
-    render: () => {
-        const Internal = () => {
-            const { setTheme, theme } = useTheme();
-            return (<Button color="primary" onClick={() => setTheme("slate")}>
-					Switch to slate
-				</Button>);
-        };
-        return (<div data-testid="root">
-				<Theme name="reshaped">
-					<Internal />
-				</Theme>
-			</div>);
-    },
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const trigger = canvas.getAllByRole("button")[0];
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
-        await userEvent.click(trigger);
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
-    },
-};
-export const uncontrolled = {
-    name: "uncontrolled",
-    render: () => {
-        const Internal = () => {
-            const { setTheme } = useTheme();
-            return (<Button color="primary" onClick={() => setTheme("slate")}>
-					Switch to slate
-				</Button>);
-        };
-        return (<div data-testid="root">
-				<Theme defaultName="reshaped">
-					<Internal />
-				</Theme>
-			</div>);
-    },
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const trigger = canvas.getAllByRole("button")[0];
-        expect(root).toHaveAttribute("data-rs-theme", "reshaped");
-        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
-        await userEvent.click(trigger);
-        expect(root).toHaveAttribute("data-rs-theme", "slate");
-        expect(root).toHaveAttribute("data-rs-color-mode", "dark");
-    },
-};
-export const disabledTransition = {
-    name: "disabled transitions",
-    render: () => {
-        const { invertColorMode } = useTheme();
-        return (<Example>
-				<Example.Item title="should have no transitions while switching color mode">
-					<View gap={3}>
-						<Button onClick={invertColorMode}>Invert mode</Button>
-
-						<MenuItem selected>Test transition</MenuItem>
-
-						<Card>Default card</Card>
-
-						<Theme colorMode="inverted">
-							<Card>Inverted card</Card>
-						</Theme>
-					</View>
-				</Example.Item>
-			</Example>);
-    },
-};

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

@@ -1,22 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TimelineProps> & {
-        Item: typeof import("../Timeline").TimelineItem;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const marker: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;

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

@@ -1,86 +0,0 @@
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import Timeline from "../index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Timeline",
-    component: Timeline,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/timeline",
-        },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => (<Example>
-			<Example.Item title="children passed directly">
-				<Timeline>
-					<Placeholder />
-					<Placeholder />
-					<Placeholder />
-				</Timeline>
-			</Example.Item>
-			<Example.Item title="children wrapped with Timeline.Item">
-				<Timeline>
-					<Timeline.Item>
-						<Placeholder />
-					</Timeline.Item>
-					<Timeline.Item>
-						<Placeholder />
-					</Timeline.Item>
-					<Timeline.Item>
-						<Placeholder />
-					</Timeline.Item>
-				</Timeline>
-			</Example.Item>
-		</Example>),
-};
-export const marker = {
-    name: "markerSlot",
-    render: () => (<Example>
-			<Example.Item title="slot">
-				<Timeline>
-					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
-						<Placeholder />
-					</Timeline.Item>
-					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
-						<Placeholder />
-					</Timeline.Item>
-					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
-						<Placeholder />
-					</Timeline.Item>
-				</Timeline>
-			</Example.Item>
-
-			<Example.Item title="null marker">
-				<Timeline>
-					<Timeline.Item markerSlot={null}>
-						<Placeholder />
-					</Timeline.Item>
-					<Timeline.Item markerSlot={null}>
-						<Placeholder />
-					</Timeline.Item>
-				</Timeline>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Timeline className="test-classname" attributes={{ id: "test-id" }}>
-				<Timeline.Item className="test-item-classname" attributes={{ id: "test-item-id" }}>
-					Content
-				</Timeline.Item>
-				<Timeline.Item>Content</Timeline.Item>
-			</Timeline>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const items = canvas.getAllByRole("listitem");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(items).toHaveLength(2);
-        expect(items[0]).toHaveClass("test-item-classname");
-        expect(items[0]).toHaveAttribute("id", "test-item-id");
-    },
-};

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

@@ -1,41 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const position: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const color: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const timeout: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const regionOptions: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const slots: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const base: StoryObj;
-export declare const nested: StoryObj;
-export declare const className: StoryObj;
-export declare const edgeCases: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};