@heymantle/litho 0.0.1

package/dist/esm/components/Page.js

@@ -0,0 +1,473 @@
+"use client";
+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 _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+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 _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+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 _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+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);
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useContext, useRef, useState } from "react";
+import { tv } from "tailwind-variants";
+import { FrameContext } from "./AppProvider.js";
+import Text from "./Text.js";
+import Button from "./Button.js";
+import Popover from "./Popover.js";
+import ActionList from "./ActionList.js";
+import { ArrowLeftMinor, MobileHorizontalDotsMajor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-Page w-full mx-auto",
+    variants: {
+        narrowWidth: {
+            true: "max-w-160"
+        },
+        fullWidth: {
+            true: "max-w-full"
+        }
+    },
+    compoundVariants: [
+        {
+            fullWidth: false,
+            narrowWidth: false,
+            className: "max-w-250"
+        }
+    ],
+    defaultVariants: {
+        narrowWidth: false,
+        fullWidth: false
+    }
+});
+var headerStyles = tv({
+    base: "Litho-Page__Header flex items-center pt-4 px-4 @lg:px-5",
+    variants: {
+        showTitleInTopBar: {
+            true: "@md:top-[var(--litho-header-offset)] @md:fixed @md:h-14 right-0 left-0 @md:left-53.5 @md:pt-0",
+            false: "@md:pt-8"
+        },
+        paneIsOpen: {
+            true: "@md:mr-[var(--litho-pane-width)]"
+        }
+    },
+    defaultVariants: {
+        showTitleInTopBar: true
+    }
+});
+var innerHeaderStyles = tv({
+    base: "Litho-Page__HeaderInner mx-auto w-full flex justify-between flex-1 items-center gap-2",
+    variants: {
+        narrowWidth: {
+            true: "max-w-150.5"
+        }
+    },
+    compoundVariants: [
+        {
+            fullWidth: false,
+            narrowWidth: false,
+            className: "max-w-240"
+        }
+    ],
+    defaultVariants: {
+        fullWidth: false,
+        narrowWidth: false
+    }
+});
+var contentStyles = tv({
+    base: "Litho-Page__Content relative",
+    variants: {
+        showHeader: {
+            true: "py-4 @lg:pb-5"
+        },
+        wrapInContentContainer: {
+            true: "px-4 @lg:px-5",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        showHeader: true,
+        wrapInContentContainer: true
+    }
+});
+/**
+ * Page component that provides a structured layout with a header, primary and secondary actions, and content.
+ *
+ * @param {Object} props - Props for the component.
+ * @param {string|React.ReactNode} props.title - The title of the page. Can be a string or React element.
+ * @param {string|React.ReactNode} props.subtitle - The subtitle of the page. Can be a string or React element.
+ * @param {Object} [props.backAction] - Configuration for the back action button.
+ * @param {Function} [props.backAction.onAction] - Callback when the back action is triggered.
+ * @param {string} [props.backAction.accessibilityLabel] - Accessibility label for the back action button.
+ * @param {boolean} [props.narrowWidth=false] - Whether to use a narrow width layout.
+ * @param {boolean} [props.fullWidth=false] - Whether to use a full-width layout.
+ * @param {Object} [props.primaryAction] - Configuration for the primary action button.
+ * @param {Function} [props.primaryAction.onAction] - Callback when the primary action is triggered.
+ * @param {boolean} [props.primaryAction.loading] - Whether the primary action button is in a loading state.
+ * @param {boolean} [props.primaryAction.disabled] - Whether the primary action button is disabled.
+ * @param {boolean} [props.primaryAction.destructive] - Whether the primary action button is styled as destructive.
+ * @param {string} [props.primaryAction.tooltip] - Tooltip to show when hovering over the primary action button.
+ * @param {React.ReactNode} [props.primaryAction.content="Save"] - Content for the primary action button.
+ * @param {Object[]} [props.secondaryActions=[]] - List of secondary actions.
+ * @param {string} [props.moreActionsLabel="Actions"] - Label for the "More Actions" button in mobile view.
+ * @param {React.ReactNode} [props.titleMetadata] - Metadata displayed alongside the title.
+ * @param {React.ReactNode} [props.children] - Content for the main section of the page.
+ * @param {Object} [props.footerActions] - Configuration for the footer actions.
+ * @param {string} [props.className] - Additional CSS classes for the Page.
+ * @returns {React.ReactElement} Rendered Page component.
+ */ function Page() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var title = props.title, subtitle = props.subtitle, _props_showTitleInTopBar = props.showTitleInTopBar, showTitleInTopBar = _props_showTitleInTopBar === void 0 ? true : _props_showTitleInTopBar, tmp = props.backAction, _backAction = tmp === void 0 ? null : tmp, children = props.children, narrowWidth = props.narrowWidth, fullWidth = props.fullWidth, primaryAction = props.primaryAction, _props_secondaryActions = props.secondaryActions, secondaryActions = _props_secondaryActions === void 0 ? [] : _props_secondaryActions, titleMetadata = props.titleMetadata, _props_moreActionsLabel = props.moreActionsLabel, moreActionsLabel = _props_moreActionsLabel === void 0 ? "Actions" : _props_moreActionsLabel, _props_wrapInContentContainer = props.wrapInContentContainer, wrapInContentContainer = _props_wrapInContentContainer === void 0 ? true : _props_wrapInContentContainer, footerActions = props.footerActions, className = props.className;
+    var paneIsOpen = useContext(FrameContext).paneIsOpen;
+    var detailsRef = useRef(null);
+    var classes = styles({
+        narrowWidth: narrowWidth,
+        fullWidth: fullWidth,
+        paneIsOpen: paneIsOpen
+    });
+    var headerClasses = headerStyles({
+        showTitleInTopBar: showTitleInTopBar,
+        paneIsOpen: paneIsOpen
+    });
+    var titleIsString = typeof title === "string";
+    var subtitleIsString = typeof subtitle === "string";
+    var hasSecondaryActions = (secondaryActions === null || secondaryActions === void 0 ? void 0 : secondaryActions.length) > 0;
+    var secondaryActionsWithItems = secondaryActions.filter(function(action) {
+        return action.items;
+    });
+    var secondaryActionsWithoutItems = secondaryActions.filter(function(action) {
+        return !action.items;
+    });
+    var _useState = _sliced_to_array(useState(false), 2), showMobileActionsPopover = _useState[0], setShowMobileActionsPopover = _useState[1];
+    var _useState1 = _sliced_to_array(useState(Array(secondaryActionsWithItems.length).fill(false)), 2), popovers = _useState1[0], setPopovers = _useState1[1];
+    var togglePopover = function(index) {
+        setPopovers(function(prev) {
+            return _object_spread_props(_object_spread({}, prev), _define_property({}, index, !prev[index]));
+        });
+    };
+    var closePopover = function(index) {
+        setPopovers(function(prev) {
+            return _object_spread_props(_object_spread({}, prev), _define_property({}, index, false));
+        });
+    };
+    var secondaryActionsSections = _to_consumable_array(secondaryActionsWithoutItems.length > 0 ? [
+        {
+            title: "",
+            items: secondaryActionsWithoutItems
+        }
+    ] : []).concat(_to_consumable_array(secondaryActionsWithItems.map(function(action) {
+        return {
+            title: action.title,
+            items: action.items
+        };
+    })));
+    var backAction = /*#__PURE__*/ _jsx("div", {
+        className: "Litho-Page__Header--BackAction",
+        children: /*#__PURE__*/ _jsx(Button, {
+            plain: true,
+            bordered: true,
+            icon: ArrowLeftMinor,
+            onClick: function() {
+                return _backAction === null || _backAction === void 0 ? void 0 : _backAction.onAction();
+            },
+            accessibilityLabel: _backAction === null || _backAction === void 0 ? void 0 : _backAction.accessibilityLabel
+        })
+    });
+    var titleMarkup = /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col justify-center max-w-full min-h-8",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    title && titleIsString && /*#__PURE__*/ _jsx(Text, {
+                        variant: showTitleInTopBar ? "headingLg" : "headingXl",
+                        className: showTitleInTopBar ? "@md:leading-5" : "",
+                        children: title
+                    }),
+                    title && !titleIsString && title,
+                    titleMetadata
+                ]
+            }),
+            subtitle && subtitleIsString && /*#__PURE__*/ _jsx(Text, {
+                color: "subdued",
+                children: subtitle
+            }),
+            subtitle && !subtitleIsString && subtitle
+        ]
+    });
+    var showHeader = !!(title || subtitle || titleMetadata || _backAction || hasSecondaryActions || primaryAction);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: [
+            showHeader && /*#__PURE__*/ _jsx("div", {
+                className: headerClasses,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: innerHeaderStyles({
+                        fullWidth: fullWidth,
+                        narrowWidth: narrowWidth,
+                        showTitleInTopBar: showTitleInTopBar
+                    }),
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "Litho-Page__Header--Details flex items-center gap-3 overflow-hidden",
+                            ref: detailsRef,
+                            children: [
+                                _backAction && backAction,
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "transition-none!",
+                                    children: titleMarkup
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "Litho-Page__Header--Actions flex shrink-0 gap-2 items-center justify-end",
+                            children: [
+                                hasSecondaryActions && /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-0 items-center",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "@lg:hidden",
+                                            children: /*#__PURE__*/ _jsx(Popover, {
+                                                fixed: true,
+                                                active: showMobileActionsPopover,
+                                                preferredAlignment: "right",
+                                                onClose: function() {
+                                                    return setShowMobileActionsPopover(false);
+                                                },
+                                                activator: /*#__PURE__*/ _jsxs(_Fragment, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            plain: true,
+                                                            icon: MobileHorizontalDotsMajor,
+                                                            onClick: function() {
+                                                                return setShowMobileActionsPopover(!showMobileActionsPopover);
+                                                            },
+                                                            className: "flex @sm:hidden"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            plain: true,
+                                                            onClick: function() {
+                                                                return setShowMobileActionsPopover(!showMobileActionsPopover);
+                                                            },
+                                                            disclosure: true,
+                                                            className: "hidden @sm:flex",
+                                                            children: moreActionsLabel
+                                                        })
+                                                    ]
+                                                }),
+                                                children: /*#__PURE__*/ _jsx(ActionList, {
+                                                    sections: secondaryActionsSections,
+                                                    onActionAnyItem: function() {
+                                                        return setShowMobileActionsPopover(false);
+                                                    }
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "hidden @lg:flex gap-0 items-center",
+                                            children: [
+                                                secondaryActionsWithItems.map(function(action, index) {
+                                                    return /*#__PURE__*/ _jsx(Popover, {
+                                                        fixed: true,
+                                                        active: popovers[index],
+                                                        preferredAlignment: "right",
+                                                        onClose: function() {
+                                                            return closePopover(index);
+                                                        },
+                                                        activator: /*#__PURE__*/ _jsx(Button, {
+                                                            plain: true,
+                                                            disclosure: true,
+                                                            onClick: function() {
+                                                                return togglePopover(index);
+                                                            },
+                                                            children: action.title
+                                                        }),
+                                                        children: /*#__PURE__*/ _jsx(ActionList, {
+                                                            items: action.items,
+                                                            onActionAnyItem: function() {
+                                                                return closePopover(index);
+                                                            }
+                                                        })
+                                                    }, index);
+                                                }),
+                                                secondaryActionsWithoutItems.map(function(action, index) {
+                                                    return /*#__PURE__*/ _jsx(Button, {
+                                                        plain: !action.destructive,
+                                                        onClick: action.onAction || action.onClick,
+                                                        disabled: action.disabled,
+                                                        icon: action.icon,
+                                                        loading: action.loading,
+                                                        external: action.external,
+                                                        url: action.url,
+                                                        destructive: action.destructive,
+                                                        tooltip: action.tooltip,
+                                                        children: action.content
+                                                    }, index);
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                primaryAction && /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    icon: primaryAction.icon,
+                                    onClick: primaryAction.onAction || primaryAction.onClick,
+                                    url: primaryAction.url,
+                                    loading: primaryAction.loading,
+                                    disabled: primaryAction.disabled,
+                                    destructive: primaryAction.destructive,
+                                    tooltip: primaryAction.tooltip,
+                                    connectedDisclosure: primaryAction.connectedDisclosure,
+                                    children: primaryAction.content || "Save"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: contentStyles({
+                    showHeader: showHeader,
+                    wrapInContentContainer: wrapInContentContainer
+                }),
+                children: children
+            }),
+            footerActions && /*#__PURE__*/ _jsx("div", {
+                className: "Litho-Page__Footer px-4 @lg:px-5",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "border-t flex items center justify-between py-4",
+                    children: [
+                        footerActions.destructiveAction && /*#__PURE__*/ _jsx(Button, {
+                            destructive: true,
+                            onClick: footerActions.destructiveAction.onAction,
+                            loading: footerActions.destructiveAction.loading,
+                            disabled: footerActions.destructiveAction.disabled,
+                            children: footerActions.destructiveAction.content
+                        }),
+                        (footerActions.secondaryAction || footerActions.primaryAction) && /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-2",
+                            children: [
+                                footerActions.secondaryAction && /*#__PURE__*/ _jsx(Button, {
+                                    onClick: footerActions.secondaryAction.onAction,
+                                    disabled: footerActions.secondaryAction.disabled,
+                                    loading: footerActions.secondaryAction.loading,
+                                    url: footerActions.secondaryAction.url,
+                                    children: footerActions.secondaryAction.content
+                                }),
+                                footerActions.primaryAction && /*#__PURE__*/ _jsx(Button, {
+                                    primary: true,
+                                    onClick: footerActions.primaryAction.onAction,
+                                    loading: footerActions.primaryAction.loading,
+                                    disabled: footerActions.primaryAction.disabled,
+                                    url: footerActions.primaryAction.url,
+                                    children: footerActions.primaryAction.content
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export default Page;

package/dist/esm/components/Pagination.js

@@ -0,0 +1,99 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
+import { Button, ButtonGroup, Tooltip } from "../index.js";
+/**
+ * Pagination component for navigating between pages or steps.
+ * Provides support for next and previous navigation with optional tooltips.
+ *
+ * @component
+ * @param {Object} props - The properties for the Pagination component.
+ * @param {boolean} [props.hasNext] - Indicates whether there is a next page/step.
+ * @param {boolean} [props.hasPrevious] - Indicates whether there is a previous page/step.
+ * @param {string} [props.nextURL] - URL to navigate to for the next page/step.
+ * @param {string} [props.previousURL] - URL to navigate to for the previous page/step.
+ * @param {function} [props.onNext] - Callback function to handle next button clicks.
+ * @param {function} [props.onPrevious] - Callback function to handle previous button clicks.
+ * @param {string} [props.nextTooltip] - Tooltip content for the next button.
+ * @param {string} [props.previousTooltip] - Tooltip content for the previous button.
+ *
+ * @example
+ * <Pagination
+ *   hasNext={true}
+ *   hasPrevious={true}
+ *   nextURL="/next"
+ *   previousURL="/previous"
+ *   onNext={() => console.log('Next clicked')}
+ *   onPrevious={() => console.log('Previous clicked')}
+ *   nextTooltip="Go to next page"
+ *   previousTooltip="Go to previous page"
+ * />
+ */ function Pagination() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var hasNext = props.hasNext, hasPrevious = props.hasPrevious, nextURL = props.nextURL, previousURL = props.previousURL, onNext = props.onNext, onPrevious = props.onPrevious, nextTooltip = props.nextTooltip, previousTooltip = props.previousTooltip;
+    var renderButtonWithTooltip = function(tooltip, buttonProps) {
+        var button = /*#__PURE__*/ _jsx(Button, _object_spread({}, buttonProps));
+        return tooltip ? /*#__PURE__*/ _jsx(Tooltip, {
+            content: tooltip,
+            children: button
+        }) : button;
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: "Litho-Pagination",
+        children: /*#__PURE__*/ _jsxs(ButtonGroup, {
+            segmented: true,
+            children: [
+                renderButtonWithTooltip(previousTooltip, {
+                    icon: ChevronLeftMinor,
+                    disabled: !hasPrevious,
+                    onClick: hasPrevious ? function() {
+                        if (onPrevious) {
+                            onPrevious();
+                        } else if (previousURL) {
+                            window.location.href = previousURL;
+                        }
+                    } : undefined
+                }),
+                renderButtonWithTooltip(nextTooltip, {
+                    icon: ChevronRightMinor,
+                    disabled: !hasNext,
+                    onClick: hasNext ? function() {
+                        if (onNext) {
+                            onNext();
+                        } else if (nextURL) {
+                            window.location.href = nextURL;
+                        }
+                    } : undefined
+                })
+            ]
+        })
+    });
+}
+export default Pagination;