reshaped 3.8.0-canary.5 → 3.8.0-canary.7

package/dist/components/Stepper/Stepper.js

@@ -18,10 +18,10 @@ const StepperItemPrivate = (props) => {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StepperItem = (_) => null;
 const Stepper = (props) => {
-    const { children, direction = "row", activeId, labelDisplay, className, attributes } = props;
+    const { children, direction = "row", activeId, labelDisplay, gap = 3, className, attributes, } = props;
     const vertical = direction === "column";
     const length = React.Children.count(children);
-    return (_jsx(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: 3, wrap: false, children: React.Children.map(children, (child, index) => {
+    return (_jsx(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: gap, wrap: false, children: React.Children.map(children, (child, index) => {
             if (!React.isValidElement(child))
                 return null;
             if (child.type !== StepperItem)

package/dist/components/Stepper/Stepper.types.d.ts

@@ -9,6 +9,8 @@ export type Props = {
     children?: React.ReactNode;
     /** Direction of the stepper */
     direction?: "row" | "column";
+    /** Gap between items (default: 3) */
+    gap?: G.Responsive<number>;
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */

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

@@ -16,4 +16,5 @@ declare const _default: {
 export default _default;
 export declare const direction: () => React.JSX.Element;
 export declare const labelDisplay: () => React.JSX.Element;
+export declare const gap: () => React.JSX.Element;
 export declare const edgeCases: () => React.JSX.Element;

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

@@ -72,6 +72,29 @@ export const labelDisplay = () => (<Example>
 			</Stepper>
 		</Example.Item>
 	</Example>);
+export const gap = () => (<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 edgeCases = () => (<Example>
 		<Example.Item title={[
         "multiline subtitle",

package/dist/components/Table/Table.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables } from "../../utilities/props.js";
+import { classNames, isMatchingComponentChildId, responsiveVariables, setComponentChildId, } from "../../utilities/props.js";
 import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Table.module.css";
 import useFadeSide from "../../hooks/_private/useFadeSide.js";
@@ -43,14 +43,17 @@ const Table = (props) => {
     const fadeSide = useFadeSide(rootRef);
     const rootClassNames = classNames(s.root, className, border && s["--border-outer"], columnBorder && s["--border-column"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"]);
     const [firstChild] = React.Children.toArray(children);
-    return (_jsx("div", { ...attributes, className: rootClassNames, ref: rootRef, children: _jsx("table", { className: s.table, children: React.isValidElement(firstChild) &&
-                (firstChild.type === TableBody || firstChild.type === TableHead) ? (children) : (_jsx(TableBody, { children: children })) }) }));
+    const isBody = isMatchingComponentChildId(firstChild, "Table.Body");
+    const isHead = isMatchingComponentChildId(firstChild, "Table.Head");
+    return (_jsx("div", { ...attributes, className: rootClassNames, ref: rootRef, children: _jsx("table", { className: s.table, children: isBody || isHead ? children : _jsx(TableBody, { children: children }) }) }));
 };
 Table.Cell = TableCell;
 Table.Heading = TableHeading;
 Table.Row = TableRow;
 Table.Body = TableBody;
 Table.Head = TableHead;
+setComponentChildId(Table.Body, "Table.Body");
+setComponentChildId(Table.Head, "Table.Head");
 Table.displayName = "Table";
 TableCell.displayName = "TableCell";
 TableHeading.displayName = "TableHeading";

package/dist/components/Timeline/Timeline.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
+import { classNames, isMatchingComponentChildId, setComponentChildId } from "../../utilities/props.js";
 import View from "../View/index.js";
 import s from "./Timeline.module.css";
 const TimelineItem = (props) => {
@@ -13,10 +13,11 @@ const Timeline = (props) => {
     const { children, className, attributes } = props;
     const rootClassNames = classNames(className);
     return (_jsx("ul", { ...attributes, className: rootClassNames, children: React.Children.map(children, (child, index) => {
-            return React.isValidElement(child) && child.type === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
+            return isMatchingComponentChildId(child, "Timeline.Item") ? (child) : (_jsx(TimelineItem, { children: child }, index));
         }) }));
 };
 Timeline.Item = TimelineItem;
+setComponentChildId(Timeline.Item, "Timeline.Item");
 Timeline.displayName = "Timeline";
 TimelineItem.displayName = "Timeline.Item";
 export default Timeline;

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

@@ -54,9 +54,6 @@ export const marker = () => (<Example>
 				<Timeline.Item markerSlot={null}>
 					<Placeholder />
 				</Timeline.Item>
-				<Timeline.Item>
-					<Placeholder />
-				</Timeline.Item>
 			</Timeline>
 		</Example.Item>
 	</Example>);

package/dist/components/View/View.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
+import { classNames, isMatchingComponentChildId, responsiveClassNames, responsiveVariables, setComponentChildId, } from "../../utilities/props.js";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
 import s from "./View.module.css";
@@ -100,8 +100,8 @@ const View = (props) => {
         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 isItem = isMatchingComponentChildId(child, "View.Item");
+        const isView = isMatchingComponentChildId(child, "View");
         const key = child.key;
         const dividerElement = !!index && divided && renderDivider({ className, key });
         let itemElement;
@@ -135,7 +135,7 @@ const View = (props) => {
             return null;
         const usedIndex = renderedItemIndex;
         renderedItemIndex += 1;
-        if (child.type === Hidden) {
+        if (isMatchingComponentChildId(child, "Hidden")) {
             const { children: hiddenChild, ...hiddenProps } = child.props;
             const key = child.key || index;
             return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: usedIndex })));
@@ -167,6 +167,8 @@ const View = (props) => {
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: formattedChildren }));
 };
 View.Item = ViewItem;
+setComponentChildId(View.Item, "View.Item");
+setComponentChildId(View, "View");
 View.displayName = "View";
 ViewItem.displayName = "View.Item";
 export default View;

package/dist/utilities/props.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type * as G from "../types/global";
 type Value = string | boolean | number | undefined;
 type ClassNameResolver = string | ((value: Value) => string);
@@ -10,4 +11,6 @@ export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Re
 }) => string[];
 export declare const responsiveVariables: <V extends Value = Value>(variableName: G.CSSVariable, value?: G.Responsive<V>) => Record<G.CSSVariable, V>;
 export declare const responsivePropDependency: <Result, T>(prop: G.Responsive<T>, resolver: (value: T, key: G.Viewport) => Result) => Result;
+export declare const setComponentChildId: (Component: React.FC<any>, id: string) => string;
+export declare const isMatchingComponentChildId: (child: React.ReactNode, id: string) => boolean | null;
 export {};

package/dist/utilities/props.js

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * Resolve an array of values into a classname string
  */
@@ -81,3 +82,21 @@ export const responsivePropDependency = (prop, resolver) => {
         return { ...acc, [viewport]: resolver(viewportValue, viewport) };
     }, {});
 };
+/**
+ * Add unique ids to components relying on React.Children.map
+ * Relying on an id instead of child.type makes it work in dev mode during HMR
+ */
+const getComponentChildId = (id) => `__rs-child-${id}`;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const setComponentChildId = (Component, id) => {
+    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+    // @ts-ignore
+    return (Component.__reshapedChildId = getComponentChildId(id));
+};
+export const isMatchingComponentChildId = (child, id) => {
+    if (!React.isValidElement(child))
+        return null;
+    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+    // @ts-ignore
+    return child.type.__reshapedChildId === getComponentChildId(id);
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.8.0-canary.5",
+	"version": "3.8.0-canary.7",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",

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

@@ -1,27 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").SelectProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const render: StoryObj;
-export declare const startSlot: 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;

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

@@ -1,132 +0,0 @@
-import { expect, userEvent, fn } from "storybook/test";
-import Select from "../index.js";
-export default {
-    title: "Components/Select/tests",
-    component: Select,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/select",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const render = {
-    name: "rendering",
-    render: () => (<Select name="test-name" options={[
-            { label: "Option 1", value: "1" },
-            { label: "Option 2", value: "2" },
-        ]} inputAttributes={{ "aria-label": "test select" }}/>),
-    play: async ({ canvas }) => {
-        const elInput = canvas.getByRole("combobox");
-        const elOptions = canvas.getAllByRole("option");
-        expect(elInput).toHaveAttribute("name", "test-name");
-        expect(elInput).toHaveValue("1");
-        expect(elOptions.length).toBe(2);
-        expect(elOptions[0]).toHaveValue("1");
-        expect(elOptions[0].textContent).toBe("Option 1");
-        expect(elOptions[1]).toHaveValue("2");
-        expect(elOptions[1].textContent).toBe("Option 2");
-    },
-};
-export const startSlot = {
-    name: "startSlot",
-    render: () => (<Select name="test-name" startSlot="Slot" options={[]} inputAttributes={{ "aria-label": "test select" }}/>),
-    play: async ({ canvas }) => {
-        const slot = canvas.getByText("Slot");
-        expect(slot).toBeInTheDocument();
-    },
-};
-export const placeholder = {
-    name: "placeholder",
-    render: () => (<Select name="test-name" placeholder="Placeholder" options={[
-            { label: "Option 1", value: "1" },
-            { label: "Option 2", value: "2" },
-        ]} inputAttributes={{ "aria-label": "test select" }}/>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("combobox");
-        const options = canvas.getAllByRole("option");
-        expect(input).toHaveValue("");
-        expect(options.length).toBe(3);
-        expect(options[0].textContent).toBe("Placeholder");
-        expect(options[0]).toHaveValue("");
-    },
-};
-export const id = {
-    name: "id",
-    render: () => (<Select name="test-name" id="test-id" options={[
-            { label: "Option 1", value: "1" },
-            { label: "Option 2", value: "2" },
-        ]} inputAttributes={{ "aria-label": "test select" }}/>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("combobox");
-        expect(input).toHaveAttribute("id", "test-id");
-    },
-};
-export const disabled = {
-    name: "disabled",
-    render: () => (<Select name="test-name" disabled options={[
-            { label: "Option 1", value: "1" },
-            { label: "Option 2", value: "2" },
-        ]} inputAttributes={{ "aria-label": "test select" }}/>),
-    play: async ({ canvas }) => {
-        const input = canvas.getByRole("combobox");
-        expect(input).toBeDisabled();
-    },
-};
-export const defaultValue = {
-    name: "defaultValue, uncontrolled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Select name="test-name" defaultValue="2" onChange={args.handleChange} options={[
-            { label: "Option 1", value: "1" },
-            { label: "Option 2", value: "2" },
-        ]} inputAttributes={{ "aria-label": "test select" }}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("combobox");
-        expect(input).toHaveValue("2");
-        await userEvent.selectOptions(input, "1");
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "1",
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toHaveValue("1");
-    },
-};
-export const value = {
-    name: "value, controlled",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => (<Select name="test-name" value="2" onChange={args.handleChange} options={[
-            { label: "Option 1", value: "1" },
-            { label: "Option 2", value: "2" },
-        ]} inputAttributes={{ "aria-label": "test select" }}/>),
-    play: async ({ canvas, args }) => {
-        const input = canvas.getByRole("combobox");
-        expect(input).toHaveValue("2");
-        await userEvent.selectOptions(input, "1");
-        expect(args.handleChange).toBeCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "test-name",
-            value: "1",
-            event: expect.objectContaining({ target: input }),
-        });
-        expect(input).toHaveValue("2");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Select className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} options={[]} name="name"/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        const input = canvas.getByRole("combobox");
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-        expect(input).toHaveAttribute("id", "test-input-id");
-    },
-};