@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/ButtonGroup.stories.js

@@ -0,0 +1,404 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Default () {
+        return Default;
+    },
+    get FormActions () {
+        return FormActions;
+    },
+    get FullWidth () {
+        return FullWidth;
+    },
+    get MixedVariants () {
+        return MixedVariants;
+    },
+    get Segmented () {
+        return Segmented;
+    },
+    get SegmentedFullWidth () {
+        return SegmentedFullWidth;
+    },
+    get SegmentedSelection () {
+        return SegmentedSelection;
+    },
+    get Toolbar () {
+        return Toolbar;
+    },
+    get WithIcons () {
+        return WithIcons;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+var _ButtonGroup = /*#__PURE__*/ _interop_require_default(require("../components/ButtonGroup.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _polarisicons = require("@shopify/polaris-icons");
+var _transformers = require("../utilities/transformers.js");
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var _default = {
+    title: "Litho/ButtonGroup",
+    component: _ButtonGroup.default,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A ButtonGroup component that arranges multiple buttons in a cohesive group. Button groups can be segmented for toggle-like behavior or used to logically group related actions."
+            }
+        }
+    },
+    args: {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Button 1"
+            }, "1"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Button 2"
+            }, "2"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Button 3"
+            }, "3")
+        ]
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        children: {
+            control: "object",
+            description: "Button components to group together"
+        },
+        segmented: {
+            control: "boolean",
+            description: "Whether buttons should be visually connected"
+        },
+        fullWidth: {
+            control: "boolean",
+            description: "Whether buttons should take full width"
+        }
+    }
+};
+var Default = {};
+var Segmented = {
+    args: {
+        segmented: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Option 1"
+            }, "1"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Option 2"
+            }, "2"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Option 3"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Segmented button groups connect buttons visually for toggle-like interfaces."
+            }
+        }
+    }
+};
+var FullWidth = {
+    args: {
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Equal"
+            }, "1"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Width"
+            }, "2"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Buttons"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Full width button groups make all buttons take equal width."
+            }
+        }
+    }
+};
+var SegmentedFullWidth = {
+    args: {
+        segmented: true,
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Connected"
+            }, "1"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Full Width"
+            }, "2"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                children: "Buttons"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Buttons can be both segmented and full width for toggle interfaces that span the container."
+            }
+        }
+    }
+};
+var WithIcons = {
+    args: {
+        segmented: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                icon: _polarisicons.UndoMajor,
+                children: "Undo"
+            }, "1"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                icon: _polarisicons.RedoMajor,
+                children: "Redo"
+            }, "2"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                icon: _polarisicons.SaveMinor,
+                children: "Save"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Button groups work well with icons for toolbar-like interfaces."
+            }
+        }
+    }
+};
+var MixedVariants = {
+    args: {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                secondary: true,
+                children: "Cancel"
+            }, "1"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                primary: true,
+                children: "Save"
+            }, "2"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                destructive: true,
+                children: "Delete"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Different button variants can be grouped together."
+            }
+        }
+    }
+};
+var FormActions = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        variant: "headingMd",
+                        children: "Form with button group"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
+                                label: "Sample Form Field",
+                                placeholder: "Enter some text..."
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ButtonGroup.default, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                        primary: true,
+                                        children: "Save Changes"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Button groups are commonly used for form actions."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var SegmentedSelection = {
+    render: function() {
+        var _React_useState = _sliced_to_array(_react.default.useState("month"), 2), selected = _React_useState[0], setSelected = _React_useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                        children: [
+                            "View: ",
+                            selected
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ButtonGroup.default, {
+                    segmented: true,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            pressed: selected === "day",
+                            onClick: function() {
+                                return setSelected("day");
+                            },
+                            children: "Day"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            pressed: selected === "week",
+                            onClick: function() {
+                                return setSelected("week");
+                            },
+                            children: "Week"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            pressed: selected === "month",
+                            onClick: function() {
+                                return setSelected("month");
+                            },
+                            children: "Month"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            pressed: selected === "year",
+                            onClick: function() {
+                                return setSelected("year");
+                            },
+                            children: "Year"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Segmented button groups can be used for selection interfaces with pressed states."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var Toolbar = {
+    args: {
+        segmented: true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                icon: _polarisicons.UndoMajor,
+                accessibilityLabel: "Undo"
+            }, "1"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                icon: _polarisicons.RedoMajor,
+                accessibilityLabel: "Redo"
+            }, "2"),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                icon: _polarisicons.SaveMinor,
+                accessibilityLabel: "Save"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Icon-only button groups work well for toolbars and compact interfaces."
+            }
+        }
+    }
+};

package/dist/cjs/stories/Card.stories.js

@@ -0,0 +1,278 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Alternate () {
+        return Alternate;
+    },
+    get Complex () {
+        return Complex;
+    },
+    get Default () {
+        return Default;
+    },
+    get Subdued () {
+        return Subdued;
+    },
+    get WithAction () {
+        return WithAction;
+    },
+    get WithTitle () {
+        return WithTitle;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: "Litho/Card",
+    component: _Card.default,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A Card component that renders a styled container with customizable title, content, and optional actions. The card can be configured with different styles and can include a title, subdued background, alternate background, and more."
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    args: {
+        padded: true
+    },
+    argTypes: {
+        title: {
+            control: "text",
+            description: "Card title"
+        },
+        titleVariant: {
+            control: "select",
+            options: [
+                "headingXs",
+                "headingSm",
+                "headingMd",
+                "headingLg",
+                "headingXl"
+            ],
+            description: "Typography variant for the Card title"
+        },
+        description: {
+            control: "text",
+            description: "Description text for the Card"
+        },
+        icon: {
+            control: "object",
+            description: "Icon to render alongside the title"
+        },
+        padded: {
+            control: "boolean",
+            description: "Add full padding to card content"
+        },
+        paddedHalf: {
+            control: "boolean",
+            description: "Add half padding to card content"
+        },
+        subdued: {
+            control: "boolean",
+            description: "Subdued background color"
+        },
+        alternate: {
+            control: "boolean",
+            description: "Alternate background color"
+        },
+        hideOnPrint: {
+            control: "boolean",
+            description: "Hide card when printing"
+        },
+        allowOverflow: {
+            control: "boolean",
+            description: "Allow content to overflow card boundaries"
+        },
+        loading: {
+            control: "boolean",
+            description: "Show loading state with spinner"
+        },
+        tooltip: {
+            control: "text",
+            description: "Tooltip content for the title"
+        },
+        tooltipPreferredPosition: {
+            control: "select",
+            options: [
+                "above",
+                "below",
+                "left",
+                "right"
+            ],
+            description: "Preferred position for tooltip"
+        },
+        outlined: {
+            control: "boolean",
+            description: "Apply outlined styling to the Card"
+        },
+        highlighted: {
+            control: "boolean",
+            description: "Apply highlighted styling to the Card"
+        },
+        shadow: {
+            control: "select",
+            options: [
+                "default",
+                "strong",
+                "none"
+            ],
+            description: "Apply shadow to the Card"
+        },
+        fullWidthOnMobile: {
+            control: "boolean",
+            description: "Make the Card full width on mobile"
+        },
+        roundedOnMobile: {
+            control: "boolean",
+            description: "Make the Card rounded on mobile"
+        },
+        removeHeaderBottomPadding: {
+            control: "boolean",
+            description: "Remove bottom padding from the header"
+        },
+        fullHeightBody: {
+            control: "boolean",
+            description: "Make the card body full height"
+        },
+        onClick: {
+            action: "clicked",
+            description: "Click handler for the Card, making it clickable"
+        },
+        emptyState: {
+            control: "object",
+            description: "Empty state configuration with showIf and text properties"
+        },
+        action: {
+            control: "object",
+            description: "Action button configuration for the Card header"
+        },
+        accessory: {
+            control: "object",
+            description: "Accessory element to render in the header"
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes to apply to the Card"
+        },
+        headerClassName: {
+            control: "text",
+            description: "Additional CSS classes to apply to the Card header"
+        },
+        children: {
+            control: "object",
+            description: "Card content"
+        }
+    }
+};
+var Default = {
+    args: {
+        children: "This is a basic card with some content inside."
+    }
+};
+var WithTitle = {
+    args: {
+        title: "Card Title",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+            children: "This card has a title and some content."
+        })
+    }
+};
+var Subdued = {
+    args: {
+        subdued: true,
+        title: "Subdued Card",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+            children: "This card has a subdued background color."
+        })
+    }
+};
+var Alternate = {
+    args: {
+        alternate: true,
+        title: "Alternate Card",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+            children: "This card has an alternate background color."
+        })
+    }
+};
+var WithAction = {
+    args: {
+        title: "Card with action",
+        action: {
+            content: "More info",
+            onAction: function() {
+                return console.log("More info clicked");
+            }
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+            children: "This card includes an action button."
+        })
+    }
+};
+var Complex = {
+    args: {
+        sectioned: true,
+        title: "Complex Card Example",
+        loading: true,
+        highlighted: true,
+        tooltip: "This is a tooltip",
+        tooltipPreferredPosition: "below",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodyMd",
+                            children: "This is a more complex card example with multiple elements."
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: "It includes multiple text elements and interactive components."
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                    gap: "1",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            size: "small",
+                            children: "Action"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            size: "small",
+                            plain: true,
+                            children: "Secondary"
+                        })
+                    ]
+                })
+            ]
+        })
+    }
+};