reshaped 3.8.8 → 3.9.0-canary.1

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

@@ -1,201 +0,0 @@
-import { expect } from "storybook/test";
-import { Example } from "../../../utilities/storybook/index.js";
-import Text from "../index.js";
-export default {
-    title: "Utility components/Text",
-    component: Text,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/text",
-        },
-    },
-};
-export const variant = {
-    name: "variant",
-    render: () => (<Example>
-			<Example.Item title="variant: title-1">
-				<Text variant="title-1">Title 1</Text>
-			</Example.Item>
-			<Example.Item title="variant: title-2">
-				<Text variant="title-2">Title 2</Text>
-			</Example.Item>
-			<Example.Item title="variant: title-3">
-				<Text variant="title-3">Title 3</Text>
-			</Example.Item>
-			<Example.Item title="variant: title-4">
-				<Text variant="title-4">Title 4</Text>
-			</Example.Item>
-			<Example.Item title="variant: title-5">
-				<Text variant="title-5">Title 5</Text>
-			</Example.Item>
-			<Example.Item title="variant: title-6">
-				<Text variant="title-6">Title 6</Text>
-			</Example.Item>
-			<Example.Item title="variant: featured-1">
-				<Text variant="featured-1">Featured 1</Text>
-			</Example.Item>
-			<Example.Item title="variant: featured-2">
-				<Text variant="featured-2">Featured 2</Text>
-			</Example.Item>
-			<Example.Item title="variant: featured-3">
-				<Text variant="featured-3">Featured 3</Text>
-			</Example.Item>
-			<Example.Item title="variant: body-1">
-				<Text variant="body-1">Body 1</Text>
-			</Example.Item>
-			<Example.Item title="variant: body-2">
-				<Text variant="body-2">Body 2</Text>
-			</Example.Item>
-			<Example.Item title="variant: body-3">
-				<Text variant="body-3">Body 3</Text>
-			</Example.Item>
-			<Example.Item title="variant: caption-1">
-				<Text variant="caption-1">Caption 1</Text>
-			</Example.Item>
-			<Example.Item title="variant: caption-2">
-				<Text variant="caption-2">Caption 2</Text>
-			</Example.Item>
-			<Example.Item title={["responsive variant", "[s] body-3", "[m+] title-4"]}>
-				<Text variant={{ s: "body-3", m: "title-4" }}>Responsive</Text>
-			</Example.Item>
-		</Example>),
-};
-export const weight = {
-    name: "weight",
-    render: () => (<Example>
-			<Example.Item title="weight: regular">
-				<Text weight="regular">Regular</Text>
-			</Example.Item>
-			<Example.Item title="weight: medium">
-				<Text weight="medium">Medium</Text>
-			</Example.Item>
-			<Example.Item title="weight: bold">
-				<Text weight="bold">Bold</Text>
-			</Example.Item>
-			<Example.Item title={["responsive", "[s] weight: regular", "[m+] bold"]}>
-				<Text weight={{ s: "regular", m: "bold" }}>Responsive</Text>
-			</Example.Item>
-		</Example>),
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="color: inherit">
-				<Text>Neutral</Text>
-			</Example.Item>
-			<Example.Item title="color: neutral-faded">
-				<Text color="neutral-faded">Faded</Text>
-			</Example.Item>
-			<Example.Item title="color: positive">
-				<Text color="positive">Positive</Text>
-			</Example.Item>
-			<Example.Item title="color: warning">
-				<Text color="warning">Warning</Text>
-			</Example.Item>
-			<Example.Item title="color: critical">
-				<Text color="critical">Critical</Text>
-			</Example.Item>
-			<Example.Item title="color: primary">
-				<Text color="primary">Primary</Text>
-			</Example.Item>
-			<Example.Item title="color: disabled">
-				<Text color="disabled" attributes={{ "aria-disabled": true }}>
-					Disabled
-				</Text>
-			</Example.Item>
-		</Example>),
-};
-export const decoration = {
-    name: "decoration",
-    render: () => (<Example>
-			<Example.Item title="decoration: line-through">
-				<Text decoration="line-through">Line through</Text>
-			</Example.Item>
-		</Example>),
-};
-export const wrap = {
-    name: "wrap",
-    render: () => (<Example>
-			<Example.Item title="wrap: balance">
-				<Text wrap="balance" variant="title-3">
-					The design system you want to build
-				</Text>
-			</Example.Item>
-		</Example>),
-};
-export const mono = {
-    name: "monospace",
-    render: () => (<Example>
-			<Example.Item title="monospace">
-				<Text monospace>Content</Text>
-			</Example.Item>
-			<Example.Item title="monospace, variant, weight">
-				<Text monospace variant="title-1" weight="regular">
-					Content
-				</Text>
-			</Example.Item>
-		</Example>),
-};
-export const maxLines = {
-    name: "maxLines",
-    render: () => (<Example>
-			<Example.Item title="maxLines: 2">
-				<Text maxLines={2}>
-					There are many variations of passages of Lorem Ipsum available, but the majority have
-					suffered alteration in some form, by injected humour, or randomised words which don't look
-					even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be
-					sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum
-					generators on the Internet tend to repeat predefined chunks as necessary, making this the
-					first true generator on the Internet. It uses a dictionary of over 200 Latin words,
-					combined with a handful of model sentence structures, to generate Lorem Ipsum which looks
-					reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected
-					humour, or non-characteristic words etc.
-				</Text>
-			</Example.Item>
-		</Example>),
-};
-export const align = {
-    name: "align",
-    render: () => (<Example>
-			<Example.Item title="align: start">
-				<Text align="start">Text content</Text>
-			</Example.Item>
-			<Example.Item title="align: center">
-				<Text align="center">Text content</Text>
-			</Example.Item>
-			<Example.Item title="align: end">
-				<Text align="end">Text content</Text>
-			</Example.Item>
-
-			<Example.Item title={["responsive alignment", "[s]: center", "[m+] start"]}>
-				<Text align={{ s: "center", m: "start" }}>Text content</Text>
-			</Example.Item>
-		</Example>),
-};
-export const asProp = {
-    name: "as",
-    render: () => (<>
-			<Text as="h1">Content</Text>
-			<Text variant="title-3">Content</Text>
-			<Text variant={{ s: "title-3", m: "title-4" }}>Content</Text>
-		</>),
-    play: async ({ canvas }) => {
-        const els = canvas.getAllByRole("heading");
-        expect(els[0].tagName).toEqual("H1");
-        expect(els[1].tagName).toBe("H3");
-        expect(els[2].tagName).toBe("H4");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Text className="test-classname" attributes={{ id: "test-id" }}>
-				Content
-			</Text>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,53 +0,0 @@
-import { fn } from "storybook/test";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TextAreaProps> & {
-        Aligner: import("react").FC<import("../../_private/Aligner").AlignerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const variants: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const resize: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const error: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const aligner: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const edgeCases: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const render: StoryObj;
-export declare const placeholder: StoryObj;
-export declare const id: StoryObj;
-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 formControl: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};

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

@@ -1,200 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import TextArea from "../index.js";
-import FormControl from "../../FormControl/index.js";
-import View from "../../View/index.js";
-import Button from "../../Button/index.js";
-import Text from "../../Text/index.js";
-import { expect, fn, userEvent } from "storybook/test";
-export default {
-    title: "Components/TextArea",
-    component: TextArea,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/text-area",
-        },
-    },
-};
-export const variants = {
-    name: "variant",
-    render: () => (<Example>
-			<Example.Item title="variant: faded">
-				<TextArea variant="faded" name="Name" placeholder="Enter your name"/>
-			</Example.Item>
-
-			<Example.Item title="variant: headless">
-				<TextArea variant="headless" name="Name" placeholder="Enter your name"/>
-			</Example.Item>
-		</Example>),
-};
-export const size = {
-    name: "size",
-    render: () => (<Example>
-			<Example.Item title="size: medium">
-				<TextArea name="Name" placeholder="Enter your name" size="medium"/>
-			</Example.Item>
-
-			<Example.Item title="size: large">
-				<TextArea name="Name" placeholder="Enter your name" size="large"/>
-			</Example.Item>
-
-			<Example.Item title="size: xlarge">
-				<TextArea name="Name" placeholder="Enter your name" size="xlarge"/>
-			</Example.Item>
-
-			<Example.Item title={["responsive size", "[s] large", "[m+] medium"]}>
-				<TextArea name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }}/>
-			</Example.Item>
-		</Example>),
-};
-export const resize = {
-    name: "resize",
-    render: () => (<Example>
-			<Example.Item title="resize: none">
-				<TextArea name="Name" placeholder="Enter your name" resize="none"/>
-			</Example.Item>
-			<Example.Item title="resize: auto">
-				<TextArea name="Name" placeholder="Enter your name" resize="auto"/>
-			</Example.Item>
-		</Example>),
-};
-export const error = {
-    name: "hasError",
-    render: () => (<Example>
-			<Example.Item title="error">
-				<TextArea name="Name" placeholder="Enter your name" hasError/>
-			</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>
-					<TextArea.Aligner>
-						<TextArea variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
-					</TextArea.Aligner>
-					<View.Item>
-						<Button>Next</Button>
-					</View.Item>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const edgeCases = {
-    name: "test: edge cases",
-    render: () => (<Example>
-			<Example.Item title="long value without breaks">
-				<TextArea name="hey" defaultValue={`<div style="position:relative;width:100%;padding-top:calc(150% + 72px)">
-	<iframe src="nskjdfdsdkjfsjkdfhbsjlhdfbsjlhfbs;jhbsdljfhsbljhfsbljhfbsjlfdhbsljhfbsdljhfbsljhfbslufbhsdlfds" />
-</div>`} resize="auto" placeholder="Placeholder"/>
-			</Example.Item>
-		</Example>),
-};
-export const render = {
-    name: "base",
-    render: () => <TextArea 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: () => (<TextArea 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: () => (<TextArea 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: () => <TextArea 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) => (<TextArea 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: "2value",
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toHaveValue("2value");
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<TextArea 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: "2value",
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toHaveValue("value");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<TextArea 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>
-					<TextArea 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>
-					<TextArea name="name" placeholder="Enter your name"/>
-					<FormControl.Error>This field is required</FormControl.Error>
-				</FormControl>
-			</Example.Item>
-		</Example>),
-};

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

@@ -1,53 +0,0 @@
-import { fn } from "storybook/test";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").TextFieldProps> & {
-        Aligner: import("react").FC<import("../../_private/Aligner").AlignerProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const variant: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const rounded: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const error: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const attachments: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const size: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const aligner: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const render: StoryObj;
-export declare const placeholder: StoryObj;
-export declare const id: StoryObj;
-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 formControl: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};