reshaped 3.9.0-canary.0 → 3.9.0-canary.2

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

@@ -1,63 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Skeleton from "../index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Skeleton",
-    component: Skeleton,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/skeleton",
-        },
-    },
-};
-export const variant = {
-    name: "variant",
-    render: () => (<Example>
-			<Example.Item title="text">
-				<Skeleton />
-			</Example.Item>
-
-			<Example.Item title="view, rectangle">
-				<Skeleton width="100px" height="100px"/>
-			</Example.Item>
-
-			<Example.Item title="view, circle">
-				<Skeleton width="100px" height="100px" borderRadius="circular"/>
-			</Example.Item>
-
-			<Example.Item title="view, rectangle, responsive">
-				<Skeleton width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}/>
-			</Example.Item>
-		</Example>),
-};
-export const radius = {
-    name: "radius",
-    render: () => (<Example>
-			<Example.Item title="radius=small">
-				<Skeleton width="60px" height="60px" borderRadius="small"/>
-			</Example.Item>
-
-			<Example.Item title="radius=medium">
-				<Skeleton width="60px" height="60px" borderRadius="medium"/>
-			</Example.Item>
-
-			<Example.Item title="radius=large">
-				<Skeleton width="60px" height="60px" borderRadius="large"/>
-			</Example.Item>
-
-			<Example.Item title="radius=circular">
-				<Skeleton width="60px" height="60px" borderRadius="circular"/>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Skeleton 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/Slider/tests/Slider.stories.d.ts

@@ -1,47 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-import { Mock } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./..").SliderProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj;
-export declare const orientation: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const minMax: StoryObj;
-export declare const step: StoryObj;
-export declare const disabled: StoryObj;
-export declare const renderValue: StoryObj;
-export declare const defaultValue: StoryObj<{
-    handleChange: Mock;
-    handleChangeCommit: Mock;
-}>;
-export declare const value: StoryObj<{
-    handleChange: Mock;
-    handleChangeCommit: Mock;
-}>;
-export declare const rangeDefaultValue: StoryObj<{
-    handleChange: Mock;
-    handleChangeCommit: Mock;
-}>;
-export declare const rangeValue: StoryObj<{
-    handleChange: Mock;
-    handleChangeCommit: Mock;
-}>;
-export declare const className: StoryObj;
-export declare const testForm: StoryObj<{
-    handleFormChange: Mock;
-    handleFormInit: Mock;
-}>;
-export declare const testSwipe: {
-    name: string;
-    render: () => React.JSX.Element;
-};

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

@@ -1,279 +0,0 @@
-import React from "react";
-import { expect, fireEvent, fn } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Slider from "../index.js";
-import View from "../../View/index.js";
-import Modal from "../../Modal/index.js";
-import useToggle from "../../../hooks/useToggle.js";
-export default {
-    title: "Components/Slider",
-    component: Slider,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/slider",
-        },
-    },
-};
-export const base = {
-    name: "name, minName, maxName, range",
-    render: () => (<Example>
-			<Example.Item title="single, name">
-				<Slider name="slider-single" defaultValue={30}/>
-			</Example.Item>
-			<Example.Item title="range, name">
-				<Slider range name="slider-range" defaultMinValue={30} defaultMaxValue={85}/>
-			</Example.Item>
-			<Example.Item title="range, minName, maxName">
-				<Slider range minName="slider-min" maxName="slider-max" defaultMinValue={30} defaultMaxValue={85}/>
-			</Example.Item>
-			<div style={{ height: 2000 }}/>
-		</Example>),
-    play: ({ canvas }) => {
-        const inputs = canvas.getAllByRole("slider");
-        expect(inputs[0]).toHaveAttribute("name", "slider-single");
-        expect(inputs[1]).toHaveAttribute("name", "slider-range");
-        expect(inputs[2]).toHaveAttribute("name", "slider-range");
-        expect(inputs[3]).toHaveAttribute("name", "slider-min");
-        expect(inputs[4]).toHaveAttribute("name", "slider-max");
-    },
-};
-export const orientation = {
-    name: "orientation",
-    render: () => (<Example>
-			<Example.Item title="orientation: vertical">
-				<View height="200px">
-					<Slider range name="slider" defaultMinValue={30} defaultMaxValue={85} orientation="vertical"/>
-				</View>
-			</Example.Item>
-			<View height="2000px"/>
-		</Example>),
-};
-export const minMax = {
-    name: "min, max",
-    render: () => (<Example>
-			<Example.Item title="min, max">
-				<Slider name="name" min={50} max={70} defaultValue={60}/>
-			</Example.Item>
-			<Example.Item title="min, max, value < min">
-				<Slider name="name" min={50} max={70} defaultValue={30}/>
-			</Example.Item>
-			<Example.Item title="min, max, value > max">
-				<Slider name="name" min={50} max={70} defaultValue={80}/>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        const inputs = canvas.getAllByRole("slider");
-        expect(inputs[0]).toHaveAttribute("min", "50");
-        expect(inputs[0]).toHaveAttribute("max", "70");
-        expect(inputs[0]).toHaveValue("60");
-        fireEvent.change(inputs[0], { target: { value: 30 } });
-        expect(inputs[0]).toHaveValue("50");
-        fireEvent.change(inputs[0], { target: { value: 80 } });
-        expect(inputs[0]).toHaveValue("70");
-        expect(inputs[1]).toHaveValue("50");
-        expect(inputs[2]).toHaveValue("70");
-    },
-};
-export const step = {
-    name: "step",
-    render: () => (<Example>
-			<Example.Item title="step: 5">
-				<Slider name="slider" defaultValue={30} step={5}/>
-			</Example.Item>
-
-			<Example.Item title="step: 5, defaultValue: 31, rounded down to 30">
-				<Slider name="slider" defaultValue={31} step={5}/>
-			</Example.Item>
-
-			<Example.Item title="step: 0.01, float">
-				<Slider name="slider" defaultValue={30} step={0.01}/>
-			</Example.Item>
-		</Example>),
-    play: ({ canvas }) => {
-        const inputs = canvas.getAllByRole("slider");
-        expect(inputs[0]).toHaveValue("30");
-        fireEvent.change(inputs[0], { target: { value: 31 } });
-        expect(inputs[0]).toHaveValue("30");
-        fireEvent.change(inputs[0], { target: { value: 34 } });
-        expect(inputs[0]).toHaveValue("35");
-        expect(inputs[1]).toHaveValue("30");
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Example>
-			<Example.Item title="disabled">
-				<Slider name="slider" defaultValue={30} disabled/>
-			</Example.Item>
-
-			<Example.Item title="disabled, range">
-				<Slider name="slider" range defaultMinValue={30} defaultMaxValue={80} disabled/>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        const inputs = canvas.getAllByRole("slider");
-        expect(inputs[0]).toBeDisabled();
-        expect(inputs[1]).toBeDisabled();
-    },
-};
-export const renderValue = {
-    name: "renderValue",
-    render: () => (<Example>
-			<Example.Item title="renderValue: $">
-				<Slider name="name" defaultValue={50} renderValue={(args) => `$${args.value}`}/>
-			</Example.Item>
-			<Example.Item title="renderValue: false">
-				<Slider name="name" defaultValue={50} renderValue={false}/>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        const tooltip = canvas.getByText("$50");
-        const hiddenTooltip = canvas.queryByText("50");
-        expect(tooltip).toBeInTheDocument();
-        expect(hiddenTooltip).not.toBeInTheDocument();
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, onChange, onChangeCommit",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<View paddingTop={10}>
-			<Slider name="test-name" defaultValue={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
-		</View>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("slider");
-        expect(input).toHaveValue("50");
-        fireEvent.change(input, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        expect(input).toHaveValue("51");
-    },
-};
-export const value = {
-    name: "value, onChange, onChangeCommit",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<View paddingTop={10}>
-			<Slider name="test-name" value={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
-		</View>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("slider");
-        expect(input).toHaveValue("50");
-        fireEvent.change(input, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        expect(input).toHaveValue("50");
-    },
-};
-export const rangeDefaultValue = {
-    name: "range, defaultValue, onChange, onChangeCommit",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<View paddingTop={10}>
-			<Slider range name="test-name" defaultMinValue={50} defaultMaxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
-		</View>),
-    play: async ({ canvas, args }) => {
-        const [minInput, maxInput] = canvas.getAllByRole("slider");
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-        fireEvent.change(minInput, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            minValue: 51,
-            maxValue: 70,
-            name: "test-name",
-            minName: "test-name",
-            maxName: "test-name",
-        });
-        expect(minInput).toHaveValue("51");
-        expect(maxInput).toHaveValue("70");
-    },
-};
-export const rangeValue = {
-    name: "range, value, onChange, onChangeCommit, minName, maxName",
-    args: {
-        handleChange: fn(),
-        handleChangeCommit: fn(),
-    },
-    render: (args) => (<View paddingTop={10}>
-			<Slider range minName="test-name-min" maxName="test-name-max" minValue={50} maxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
-		</View>),
-    play: async ({ canvas, args }) => {
-        const [minInput, maxInput] = canvas.getAllByRole("slider");
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-        fireEvent.change(minInput, { target: { value: 51 } });
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            minValue: 51,
-            maxValue: 70,
-            minName: "test-name-min",
-            maxName: "test-name-max",
-        });
-        expect(minInput).toHaveValue("50");
-        expect(maxInput).toHaveValue("70");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Slider name="name" 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 testForm = {
-    name: "test: form onChange",
-    args: {
-        handleFormChange: fn(),
-        handleFormInit: fn(),
-    },
-    render: (args) => {
-        const formRef = React.useRef(null);
-        const [data, setData] = React.useState([]);
-        const handleChange = (e) => {
-            const formData = new FormData(e.currentTarget);
-            const nextState = [...formData.entries()];
-            args.handleFormChange({ formData: nextState });
-            setData(nextState);
-        };
-        return (<View paddingTop={10} gap={4}>
-				<form onChange={handleChange} ref={formRef}>
-					<Slider range minName="slider-min" maxName="slider-max" defaultMinValue={30} defaultMaxValue={50}/>
-				</form>
-
-				{data.map((v) => v.join(": ")).join(", ")}
-			</View>);
-    },
-    play: async () => {
-        /**
-         * Placeholder
-         *
-         * No way to test dragging here without calling fireEvent.change
-         * Which defeats the purpose of testing custom emitted events
-         *
-         * Test this behavior manually in Storybook by dragging the thumbs
-         */
-    },
-};
-export const testSwipe = {
-    name: "test: prevents parent swipe",
-    render: () => {
-        const toggle = useToggle(true);
-        return (<Modal active={toggle.active} onClose={toggle.deactivate} position="end">
-				<View gap={4}>
-					<Modal.Title>Modal</Modal.Title>
-					<Slider name="slider" defaultValue={30}/>
-				</View>
-			</Modal>);
-    },
-};

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

@@ -1,31 +0,0 @@
-import React from "react";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./..").StepperProps> & {
-        Item: typeof import("../Stepper").StepperItem;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const direction: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const labelDisplay: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const gap: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const className: StoryObj;
-export declare const edgeCases: {
-    name: string;
-    render: () => React.JSX.Element;
-};

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

@@ -1,135 +0,0 @@
-import React from "react";
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import Stepper from "../index.js";
-import Button from "../../Button/index.js";
-import View from "../../View/index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Stepper",
-    component: Stepper,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/stepper",
-        },
-    },
-};
-const Demo = (props) => {
-    const [activeId, setActiveId] = React.useState(props.activeId ?? 1);
-    const content = (<View gap={3}>
-			<Placeholder />
-			<View direction="row" gap={3}>
-				<Button onClick={() => setActiveId((prev) => Math.max(0, prev - 1))}>Previous</Button>
-				<Button onClick={() => setActiveId((prev) => Math.min(2, prev + 1))}>Next</Button>
-			</View>
-		</View>);
-    return (<Stepper activeId={activeId} direction="column">
-			<Stepper.Item completed={activeId > 0} title="Step 1" subtitle={props.subtitle || "Step subtitle"}>
-				{content}
-			</Stepper.Item>
-			<Stepper.Item completed={activeId > 1} title="Step 2">
-				{content}
-			</Stepper.Item>
-			<Stepper.Item completed={activeId > 2} title="Step 3 very long title">
-				{content}
-			</Stepper.Item>
-		</Stepper>);
-};
-export const direction = {
-    name: "direction",
-    render: () => (<Example>
-			<Example.Item title="direction: row">
-				<Stepper activeId="1">
-					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-					<Stepper.Item title="Step 2"/>
-					<Stepper.Item title="Step 3 very long title"/>
-				</Stepper>
-			</Example.Item>
-			<Example.Item title="direction: column">
-				<Stepper activeId="1" direction="column">
-					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-					<Stepper.Item title="Step 2"/>
-					<Stepper.Item title="Step 3 very long title"/>
-				</Stepper>
-			</Example.Item>
-		</Example>),
-};
-export const labelDisplay = {
-    name: "labelDisplay",
-    render: () => (<Example>
-			<Example.Item title="direction: row, labels hidden">
-				<Stepper activeId="1" labelDisplay="hidden">
-					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-					<Stepper.Item title="Step 2"/>
-					<Stepper.Item title="Step 3 very long title"/>
-				</Stepper>
-			</Example.Item>
-			<Example.Item title="direction: column, labels hiden">
-				<Stepper activeId="1" direction="column" labelDisplay="hidden">
-					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-					<Stepper.Item title="Step 2"/>
-					<Stepper.Item title="Step 3 very long title"/>
-				</Stepper>
-			</Example.Item>
-			<Example.Item title="direction: row, labels hidden on s">
-				<Stepper activeId="1" labelDisplay={{ s: "hidden", m: "inline" }}>
-					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-					<Stepper.Item title="Step 2"/>
-					<Stepper.Item title="Step 3 very long title"/>
-				</Stepper>
-			</Example.Item>
-		</Example>),
-};
-export const gap = {
-    name: "gap",
-    render: () => (<Example>
-			<Example.Item title="gap: 6, direction: row">
-				<Stepper activeId="1" gap={6}>
-					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-					<Stepper.Item title="Step 2"/>
-					<Stepper.Item title="Step 3 very long title"/>
-				</Stepper>
-			</Example.Item>
-			<Example.Item title="gap: 6, direction: column">
-				<Stepper activeId="1" direction="column" gap={6}>
-					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-					<Stepper.Item title="Step 2"/>
-					<Stepper.Item title="Step 3 very long title"/>
-				</Stepper>
-			</Example.Item>
-			<Example.Item title={["responsive gap", "[s] 2", "[m+] 5"]}>
-				<Stepper activeId="1" gap={{ s: 2, m: 5 }}>
-					<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
-					<Stepper.Item title="Step 2"/>
-					<Stepper.Item title="Step 3 very long title"/>
-				</Stepper>
-			</Example.Item>
-		</Example>),
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Stepper className="test-classname" attributes={{ id: "test-id" }}>
-				<Stepper.Item attributes={{ id: "test-item-id" }} className="test-item-classname"/>
-			</Stepper>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const item = root?.firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(item).toHaveClass("test-item-classname");
-        expect(item).toHaveAttribute("id", "test-item-id");
-    },
-};
-export const edgeCases = {
-    name: "test: edge cases",
-    render: () => (<Example>
-			<Example.Item title={[
-            "multiline subtitle",
-            "should wrap the text correctly",
-            "should display the connector correctly",
-        ]}>
-				<Demo activeId={0} subtitle="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy"/>
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,22 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").SwitchProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const size: () => import("react").JSX.Element;
-export declare const label: () => import("react").JSX.Element;
-export declare const defaultChecked: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const checked: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj;
-export declare const className: StoryObj;