reshaped 2.11.12 → 3.0.1

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

@@ -0,0 +1,327 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import { useToast, ToastProvider } from "../index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+import Image from "../../Image/index.js";
+import Text from "../../Text/index.js";
+import Dismissible from "../../Dismissible/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
+    title: "Components/Toast",
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/toast",
+        },
+    },
+};
+const Base = () => {
+    const toast = useToast();
+    return (<Button onClick={() => {
+            const id = toast.show({
+                icon: IconZap,
+                title: "Hey!",
+                text: "Event completed",
+                actionsSlot: [
+                    <Button onClick={() => toast.hide(id)}>Undo</Button>,
+                    <Button onClick={() => toast.hide(id)}>Show</Button>,
+                ],
+            });
+        }}>
+			Show toast
+		</Button>);
+};
+export const base = () => (<Example>
+		<Example.Item title="title, children, icon, actions">
+			<Base />
+		</Example.Item>
+	</Example>);
+const Size = () => {
+    const toast = useToast();
+    const props = {
+        icon: IconZap,
+        title: "Hey!",
+        text: "Event completed",
+        actionsSlot: [<Button>Action</Button>],
+    };
+    return (<Example>
+			<Example.Item title="size: small">
+				<Button onClick={() => {
+            toast.show({ ...props });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<Button onClick={() => {
+            toast.show({ ...props, size: "medium" });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="large">
+				<Button onClick={() => {
+            toast.show({ ...props, size: "large" });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const size = () => <Size />;
+const Position = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="position: bottom-start">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                position: "bottom-start",
+                actionsSlot: <Button onClick={() => toast.hide(id)}>Close</Button>,
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: bottom">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "bottom",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: bottom-end">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "bottom-end",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top-start">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "top-start",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "top",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="position: top-end">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "top-end",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const position = () => <Position />;
+const Color = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="color: inverted">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "inverted",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: neutral">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "neutral",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "primary",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "positive",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Button onClick={() => {
+            const id = toast.show({
+                text: "Event completed",
+                color: "critical",
+                title: "Hey!",
+                icon: IconZap,
+                actionsSlot: [<Button onClick={() => toast.hide(id)}>Close</Button>],
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const color = () => <Color />;
+const Timeout = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="timeout: short">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                timeout: "short",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="timeout: long">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                timeout: "long",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+			<Example.Item title="timeout: 0">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                timeout: 0,
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const timeout = () => <Timeout />;
+const Expanded = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="Custom width coming from Reshaped provider for bottom-start">
+				<Button onClick={() => {
+            toast.show({
+                text: "Event completed",
+                position: "bottom-start",
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const regionOptions = () => <Expanded />;
+const Slots = () => {
+    const toast = useToast();
+    return (<Example>
+			<Example.Item title="always expanded, promotion banner">
+				<Button onClick={() => {
+            const id = toast.show({
+                children: (<View gap={3} direction="row">
+									<View aspectRatio={1}>
+										<Image height="100px" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" borderRadius="medium"/>
+									</View>
+									<View.Item grow>
+										<View gap={1}>
+											<Dismissible closeAriaLabel="Close notification" onClose={() => toast.hide(id)}>
+												<Text variant="body-2" weight="bold">
+													Look at this gradient!
+												</Text>
+											</Dismissible>
+											<Text variant="body-3">
+												If you start using more gradients, your product will become even more
+												succesful.
+											</Text>
+										</View>
+									</View.Item>
+								</View>),
+                color: "neutral",
+                position: "bottom-start",
+                timeout: 0,
+            });
+        }}>
+					Show toast
+				</Button>
+			</Example.Item>
+		</Example>);
+};
+export const slots = () => <Slots />;
+const Multiline = () => {
+    const toast = useToast();
+    return (<Button onClick={() => {
+            toast.show({
+                text: "Very long event completed notification message",
+            });
+        }}>
+			Show toast
+		</Button>);
+};
+const Nested = () => {
+    const toast = useToast();
+    return (<View height="300px">
+			<Button onClick={() => {
+            toast.show({
+                text: "Notification sent",
+            });
+        }}>
+				Show toast
+			</Button>
+		</View>);
+};
+export const edgeCases = () => (<Example>
+		<Example.Item title="Multiline, should support dynamic height">
+			<Multiline />
+		</Example.Item>
+		<Example.Item title="Nested ToastProvider">
+			<ToastProvider>
+				<Nested />
+			</ToastProvider>
+		</Example.Item>
+	</Example>);

package/dist/components/Tooltip/Tooltip.module.css

@@ -0,0 +1 @@
+.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);max-width:360px;padding:var(--rs-unit-x1) var(--rs-unit-x2)}

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

@@ -0,0 +1,85 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Tooltip from "../index.js";
+import Popover from "../../Popover/index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+import useResponsiveClientValue from "../../../hooks/useResponsiveClientValue.js";
+export default {
+    title: "Components/Tooltip",
+    component: Tooltip,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/tooltip",
+        },
+    },
+};
+const Demo = (props) => {
+    const { position, ...rest } = props;
+    return (<Tooltip text={position} position={position} {...rest}>
+			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
+		</Tooltip>);
+};
+const DemoResponsive = (props) => {
+    const { position, ...rest } = props;
+    const screenSize = useResponsiveClientValue({
+        s: "small",
+        m: "medium",
+    });
+    return (<Tooltip text={position} position={position} {...rest} active={screenSize === "small"}>
+			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
+		</Tooltip>);
+};
+export const position = () => (<Example>
+		<Example.Item title="position: bottom-start">
+			<Demo position="bottom-start"/>
+		</Example.Item>
+		<Example.Item title="position: bottom">
+			<Demo position="bottom"/>
+		</Example.Item>
+		<Example.Item title="position: bottom-end">
+			<Demo position="bottom-end"/>
+		</Example.Item>
+		<Example.Item title="position: top-start">
+			<Demo position="top-start"/>
+		</Example.Item>
+		<Example.Item title="position: top">
+			<Demo position="top"/>
+		</Example.Item>
+		<Example.Item title="position: top-end">
+			<Demo position="top-end"/>
+		</Example.Item>
+
+		<Example.Item title="position: start">
+			<View align="end">
+				<Demo position="start"/>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="position: end">
+			<Demo position="end"/>
+		</Example.Item>
+	</Example>);
+export const controlled = () => (<Example>
+		<Example.Item title="active, controlled, position: bottom">
+			<Demo position="bottom" active/>
+		</Example.Item>
+	</Example>);
+export const edgeCases = () => (<Example>
+		<Example.Item title="responsive visibility">
+			<DemoResponsive text="Responsive"/>
+		</Example.Item>
+		<Example.Item title="without text">
+			<Tooltip>{() => <Button>Button</Button>}</Tooltip>
+		</Example.Item>
+
+		<Example.Item title="tooltip with popover">
+			<Tooltip text="Tooltip" position="top">
+				{(attributes) => (<Popover position="bottom">
+						<Popover.Trigger>
+							{(popoverAttributes) => (<Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>)}
+						</Popover.Trigger>
+						<Popover.Content>Popover</Popover.Content>
+					</Popover>)}
+			</Tooltip>
+		</Example.Item>
+	</Example>);

package/dist/components/View/View.d.ts

@@ -0,0 +1,6 @@
+import type * as T from "./View.types";
+declare const View: {
+    <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
+    Item: <As extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As>) => import("react/jsx-runtime").JSX.Element;
+};
+export default View;

package/dist/components/View/View.js

@@ -0,0 +1,169 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import Divider from "../Divider/index.js";
+import Hidden from "../Hidden/index.js";
+import s from "./View.module.css";
+import getRadiusStyles from "../../styles/radius/index.js";
+import getBleedStyles from "../../styles/bleed/index.js";
+import getWidthStyles from "../../styles/width/index.js";
+import getHeightStyles from "../../styles/height/index.js";
+import getMaxWidthStyles from "../../styles/maxWidth/index.js";
+import getMaxHeightStyles from "../../styles/maxHeight/index.js";
+import getMinWidthStyles from "../../styles/minWidth/index.js";
+import getMinHeightStyles from "../../styles/minHeight/index.js";
+import getPositionStyles from "../../styles/position/index.js";
+import getInsetStyles from "../../styles/inset/index.js";
+import getAspectRatioStyles from "../../styles/aspectRatio/index.js";
+const ViewItem = (props) => {
+    const { columns, grow, gapBefore, as: TagName = "div", order, children, className, attributes, } = props;
+    const itemClassNames = classNames(s.item, className, gapBefore === "auto" && s["item--gap-auto"], gapBefore !== undefined && s["item--gap-before"], columns && s["item--columns"], ...responsiveClassNames(s, "item--grow", grow), ...responsiveClassNames(s, "item--columns", columns));
+    const itemVariables = {
+        ...responsiveVariables("--rs-view-item-order", order),
+        ...responsiveVariables("--rs-view-item-gap-before", gapBefore),
+    };
+    return (_jsx(TagName, { ...attributes, style: { ...attributes?.style, ...itemVariables }, className: itemClassNames, children: children }));
+};
+const View = (props) => {
+    const { 
+    /**
+     * Layout props
+     */
+    align, justify, wrap, gap, height, width, aspectRatio, maxHeight, maxWidth, minHeight, minWidth, padding, paddingInline, paddingBlock, paddingBottom, paddingEnd, paddingStart, paddingTop, bleed, 
+    /**
+     * Style props
+     * */
+    animated, backgroundColor, borderColor, borderRadius, shadow, textAlign, overflow, position = "relative", inset, insetTop, insetBottom, insetStart, insetEnd, zIndex, 
+    /**
+     * Item prop
+     */
+    grow, 
+    /**
+     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+     * It still resolves the attributes correctly based on the tag
+     */
+    as: TagName = "div", children, divided, className, attributes, } = props;
+    let isFlex = !!align || !!justify || !!gap || !!props.direction;
+    const direction = props.direction || (isFlex ? "column" : undefined);
+    const radiusStyles = getRadiusStyles(borderRadius);
+    const bleedStyles = getBleedStyles(bleed);
+    const widthStyles = getWidthStyles(width);
+    const heightStyles = getHeightStyles(height);
+    const maxWidthStyles = getMaxWidthStyles(maxWidth);
+    const maxHeightStyles = getMaxHeightStyles(maxHeight);
+    const minWidthStyles = getMinWidthStyles(minWidth);
+    const minHeightStyles = getMinHeightStyles(minHeight);
+    const positionStyles = getPositionStyles(position);
+    const insetStyles = getInsetStyles(inset);
+    const insetTopStyles = getInsetStyles(insetTop, "top");
+    const insetBottomStyles = getInsetStyles(insetBottom, "bottom");
+    const insetStartStyles = getInsetStyles(insetStart, "start");
+    const insetEndStyles = getInsetStyles(insetEnd, "end");
+    const aspectRatioStyles = getAspectRatioStyles(aspectRatio);
+    let renderedItemIndex = 0;
+    // If wrap is not defined, it can be set based on item grow and split usage
+    let nowrap;
+    const renderDivider = ({ className, key }) => {
+        const dividerClassName = classNames(s.divider, className);
+        let isDividerVertical = false;
+        if (typeof direction === "string" && direction.startsWith("row")) {
+            isDividerVertical = true;
+        }
+        else if (direction) {
+            const viewports = Object.keys(direction);
+            isDividerVertical = viewports.reduce((acc, viewport) => {
+                const viewportDirection = direction[viewport];
+                if (!viewportDirection)
+                    return acc;
+                return {
+                    ...acc,
+                    [viewport]: viewportDirection.startsWith("row"),
+                };
+            }, {});
+        }
+        return (_jsx("div", { className: dividerClassName, children: _jsx(Divider, { vertical: isDividerVertical, blank: true }) }, `${key}-divider`));
+    };
+    const renderItem = ({ className, child, index }) => {
+        const isItem = child.type === ViewItem;
+        const isView = child.type === View;
+        const key = child.key || index;
+        const dividerElement = !!index && divided && renderDivider({ className, key });
+        let itemElement;
+        if (isItem) {
+            itemElement = React.cloneElement(child, {
+                className: classNames(className, child.props.className),
+            });
+        }
+        else if (className || !React.isValidElement(child)) {
+            itemElement = (_jsx("div", { className: className, children: child }, key));
+        }
+        else {
+            itemElement = child;
+        }
+        // Passing grow here because it's responsive and nowrap should follow it
+        if (isItem && child.props?.grow)
+            nowrap = child.props.grow;
+        if (isItem && child.props?.gap === "auto")
+            nowrap = true;
+        if ((isItem || isView) && child.props?.grow)
+            isFlex = true;
+        return [dividerElement, itemElement];
+    };
+    const formattedChildren = React.Children.map(children, (child, index) => {
+        if (!child)
+            return null;
+        // Ignore the indices of the items that rendered nothing
+        const renderedIndex = renderedItemIndex;
+        renderedItemIndex += 1;
+        if (child.type === Hidden) {
+            const { children: hiddenChild, ...hiddenProps } = child.props;
+            const key = child.key || index;
+            return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: renderedIndex })));
+        }
+        if (child.type === React.Fragment && React.Children.count(child.props.children) > 1) {
+            return child.props.children.map((child) => {
+                if (!child)
+                    return null;
+                const index = renderedIndex;
+                renderedItemIndex += 1;
+                return renderItem({ child, index });
+            });
+        }
+        return renderItem({ child, index: renderedIndex });
+    });
+    // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
+    const rootClassNames = classNames(s.root, className, radiusStyles?.classNames, positionStyles?.classNames, bleedStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, aspectRatioStyles?.classNames, maxWidthStyles?.classNames, maxHeightStyles?.classNames, minWidthStyles?.classNames, minHeightStyles?.classNames, insetStyles?.classNames, insetTopStyles?.classNames, insetBottomStyles?.classNames, insetStartStyles?.classNames, insetEndStyles?.classNames, textAlign && s[`--align-text-${textAlign}`], backgroundColor && s[`--bg-${backgroundColor}`], borderColor && s[`--bd-${borderColor}`], borderColor && s["--bd"], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
+        s["--padding"], paddingBottom !== undefined && s["--padding-bottom"], paddingEnd !== undefined && s["--padding-end"], paddingStart !== undefined && s["--padding-start"], paddingTop !== undefined && s["--padding-top"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), ...responsiveClassNames(s, "--align", align), ...responsiveClassNames(s, "--justify", justify), 
+    // Wrap and nowrap are separate here because inverting any of them could result into a false value which will be ignored by classNames
+    ...responsiveClassNames(s, "--nowrap", nowrap || wrap === false), ...responsiveClassNames(s, "--wrap", wrap), 
+    // Item classnames
+    ...responsiveClassNames(s, "item--grow", grow));
+    const rootVariables = {
+        ...attributes?.style,
+        ...responsiveVariables("--rs-view-gap", gap),
+        ...responsiveVariables("--rs-view-p-vertical", paddingBlock || padding),
+        ...responsiveVariables("--rs-view-p-horizontal", paddingInline || padding),
+        ...responsiveVariables("--rs-view-p-bottom", paddingBottom),
+        ...responsiveVariables("--rs-view-p-top", paddingTop),
+        ...responsiveVariables("--rs-view-p-start", paddingStart),
+        ...responsiveVariables("--rs-view-p-end", paddingEnd),
+        ...bleedStyles?.variables,
+        ...widthStyles?.variables,
+        ...heightStyles?.variables,
+        ...aspectRatioStyles?.variables,
+        ...maxWidthStyles?.variables,
+        ...maxHeightStyles?.variables,
+        ...minWidthStyles?.variables,
+        ...minHeightStyles?.variables,
+        ...insetStyles?.variables,
+        ...insetTopStyles?.variables,
+        ...insetBottomStyles?.variables,
+        ...insetStartStyles?.variables,
+        ...insetEndStyles?.variables,
+        ...(zIndex ? { "--rs-view-z": zIndex } : {}),
+    };
+    return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: formattedChildren }));
+};
+View.Item = ViewItem;
+export default View;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { type ViewProps } from "./..";
+declare const _default: {
+    title: string;
+    component: {
+        <As extends keyof JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
+        Item: <As extends keyof JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>) => React.JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const padding: () => React.JSX.Element;
+export declare const direction: () => React.JSX.Element;
+export declare const gap: () => React.JSX.Element;
+export declare const divided: () => React.JSX.Element;
+export declare const bleed: () => React.JSX.Element;
+export declare const wrap: () => React.JSX.Element;
+export declare const align: () => React.JSX.Element;
+export declare const justify: () => React.JSX.Element;
+export declare const textAlign: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const ratio: () => React.JSX.Element;
+export declare const maxSize: () => React.JSX.Element;
+export declare const minSize: () => React.JSX.Element;
+export declare const background: () => React.JSX.Element;
+export declare const border: () => React.JSX.Element;
+export declare const radius: () => React.JSX.Element;
+export declare const shadow: () => React.JSX.Element;
+export declare const overflow: () => React.JSX.Element;
+export declare const position: () => React.JSX.Element;
+export declare const inset: () => React.JSX.Element;
+export declare const animated: () => React.JSX.Element;
+export declare const itemGapBefore: () => React.JSX.Element;
+export declare const itemGrow: () => React.JSX.Element;
+export declare const itemColumns: () => React.JSX.Element;
+export declare const itemOrder: () => React.JSX.Element;
+export declare const testHiddenItem: () => React.JSX.Element;
+export declare const testNestedGaps: () => React.JSX.Element;
+export declare const testComposition: () => React.JSX.Element;