@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Popover.stories.js

@@ -0,0 +1,609 @@
+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 _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);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
+import Popover from "../components/Popover.js";
+import Button from "../components/Button.js";
+import ActionList from "../components/ActionList.js";
+import Text from "../components/Text.js";
+import TextField from "../components/TextField.js";
+import { MobileHorizontalDotsMajor } from "@shopify/polaris-icons";
+export default {
+    title: "Litho/Popover",
+    component: Popover,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A Popover component that displays floating content relative to a trigger element. Popovers are used for dropdowns, menus, and other contextual overlays."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        active: {
+            control: "boolean",
+            description: "Whether the popover is currently active/visible"
+        },
+        activator: {
+            control: "object",
+            description: "Element that triggers the popover"
+        },
+        activatorWrapper: {
+            control: "text",
+            description: "Wrapper element for the activator"
+        },
+        activatorDisplayType: {
+            control: "text",
+            description: "Display type for the activator element"
+        },
+        preferredAlignment: {
+            control: "select",
+            options: [
+                "left",
+                "center",
+                "right"
+            ],
+            description: "Preferred horizontal alignment of the popover"
+        },
+        preferredPosition: {
+            control: "select",
+            options: [
+                "above",
+                "below",
+                "cover"
+            ],
+            description: "Preferred vertical position of the popover"
+        },
+        fixed: {
+            control: "boolean",
+            description: "Whether the popover uses fixed or absolute positioning"
+        },
+        sectioned: {
+            control: "boolean",
+            description: "Whether the popover content is sectioned with padding"
+        },
+        matchActivatorWidth: {
+            control: "boolean",
+            description: "Whether the popover should match the width of the activator"
+        },
+        maxWidth: {
+            control: "select",
+            options: [
+                "default",
+                "datePicker",
+                "none"
+            ],
+            description: "Maximum width constraint for the popover"
+        },
+        zIndexOverride: {
+            control: "number",
+            description: "Custom z-index for the popover"
+        },
+        autofocusTarget: {
+            control: "boolean",
+            description: "Whether to automatically focus on the first focusable element"
+        },
+        className: {
+            control: "text",
+            description: "Additional class name for the popover"
+        },
+        containerClassName: {
+            control: "text",
+            description: "Additional class name for the popover container"
+        },
+        children: {
+            control: "object",
+            description: "Content to display inside the popover"
+        },
+        onClose: {
+            action: "closed",
+            description: "Callback function triggered when the popover is closed"
+        }
+    }
+};
+// Basic popover with action list
+export var Default = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), active = _useState[0], setActive = _useState[1];
+        return /*#__PURE__*/ _jsx(Popover, {
+            active: active,
+            activator: /*#__PURE__*/ _jsx(Button, {
+                onClick: function() {
+                    return setActive(!active);
+                },
+                disclosure: true,
+                children: "More actions"
+            }),
+            onClose: function() {
+                return setActive(false);
+            },
+            children: /*#__PURE__*/ _jsx(ActionList, {
+                items: [
+                    {
+                        content: "Edit",
+                        onAction: function() {
+                            return console.log("Edit clicked");
+                        }
+                    },
+                    {
+                        content: "Duplicate",
+                        onAction: function() {
+                            return console.log("Duplicate clicked");
+                        }
+                    },
+                    {
+                        content: "Archive",
+                        onAction: function() {
+                            return console.log("Archive clicked");
+                        }
+                    },
+                    {
+                        content: "Delete",
+                        destructive: true,
+                        onAction: function() {
+                            return console.log("Delete clicked");
+                        }
+                    }
+                ],
+                onActionAnyItem: function() {
+                    return setActive(false);
+                }
+            })
+        });
+    }
+};
+// Different alignment options
+export var Alignments = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), leftActive = _useState[0], setLeftActive = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), centerActive = _useState1[0], setCenterActive = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(false), 2), rightActive = _useState2[0], setRightActive = _useState2[1];
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "md",
+            children: [
+                /*#__PURE__*/ _jsx(Popover, {
+                    active: leftActive,
+                    activator: /*#__PURE__*/ _jsx(Button, {
+                        onClick: function() {
+                            return setLeftActive(!leftActive);
+                        },
+                        disclosure: true,
+                        children: "Left aligned"
+                    }),
+                    onClose: function() {
+                        return setLeftActive(false);
+                    },
+                    preferredAlignment: "left",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            padding: "1rem",
+                            minWidth: "200px"
+                        },
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Left aligned popover content"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Popover, {
+                    active: centerActive,
+                    activator: /*#__PURE__*/ _jsx(Button, {
+                        onClick: function() {
+                            return setCenterActive(!centerActive);
+                        },
+                        disclosure: true,
+                        children: "Center aligned"
+                    }),
+                    onClose: function() {
+                        return setCenterActive(false);
+                    },
+                    preferredAlignment: "center",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            padding: "1rem",
+                            minWidth: "200px",
+                            textAlign: "center"
+                        },
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Center aligned popover content"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Popover, {
+                    active: rightActive,
+                    activator: /*#__PURE__*/ _jsx(Button, {
+                        onClick: function() {
+                            return setRightActive(!rightActive);
+                        },
+                        disclosure: true,
+                        children: "Right aligned"
+                    }),
+                    onClose: function() {
+                        return setRightActive(false);
+                    },
+                    preferredAlignment: "right",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            padding: "1rem",
+                            minWidth: "200px",
+                            textAlign: "right"
+                        },
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Right aligned popover content"
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Popovers can be aligned to the left, center, or right of their activator."
+            }
+        }
+    }
+};
+// With form content
+export var WithForm = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), active = _useState[0], setActive = _useState[1];
+        return /*#__PURE__*/ _jsx(Popover, {
+            active: active,
+            activator: /*#__PURE__*/ _jsx(Button, {
+                onClick: function() {
+                    return setActive(!active);
+                },
+                children: "Add item"
+            }),
+            onClose: function() {
+                return setActive(false);
+            },
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    padding: "1rem",
+                    minWidth: "300px"
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            marginBottom: "1rem"
+                        },
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Add new item"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "1rem"
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Item name",
+                                placeholder: "Enter item name"
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Description",
+                                placeholder: "Enter description",
+                                multiline: 3
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: "flex",
+                                    gap: "0.5rem",
+                                    justifyContent: "flex-end"
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        onClick: function() {
+                                            return setActive(false);
+                                        },
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        primary: true,
+                                        onClick: function() {
+                                            return setActive(false);
+                                        },
+                                        children: "Add item"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Popovers can contain forms and interactive content."
+            }
+        }
+    }
+};
+// With sectioned action list
+export var WithSections = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), active = _useState[0], setActive = _useState[1];
+        return /*#__PURE__*/ _jsx(Popover, {
+            active: active,
+            activator: /*#__PURE__*/ _jsx(Button, {
+                onClick: function() {
+                    return setActive(!active);
+                },
+                icon: MobileHorizontalDotsMajor,
+                plain: true
+            }),
+            onClose: function() {
+                return setActive(false);
+            },
+            children: /*#__PURE__*/ _jsx(ActionList, {
+                sections: [
+                    {
+                        title: "File actions",
+                        items: [
+                            {
+                                content: "Open",
+                                onAction: function() {
+                                    return console.log("Open clicked");
+                                }
+                            },
+                            {
+                                content: "Edit",
+                                onAction: function() {
+                                    return console.log("Edit clicked");
+                                }
+                            },
+                            {
+                                content: "Duplicate",
+                                onAction: function() {
+                                    return console.log("Duplicate clicked");
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        title: "Organize",
+                        items: [
+                            {
+                                content: "Move to folder",
+                                onAction: function() {
+                                    return console.log("Move clicked");
+                                }
+                            },
+                            {
+                                content: "Add to collection",
+                                onAction: function() {
+                                    return console.log("Add clicked");
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        title: "Danger zone",
+                        items: [
+                            {
+                                content: "Archive",
+                                onAction: function() {
+                                    return console.log("Archive clicked");
+                                }
+                            },
+                            {
+                                content: "Delete",
+                                destructive: true,
+                                onAction: function() {
+                                    return console.log("Delete clicked");
+                                }
+                            }
+                        ]
+                    }
+                ],
+                onActionAnyItem: function() {
+                    return setActive(false);
+                }
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Popovers can contain sectioned action lists for better organization."
+            }
+        }
+    }
+};
+// Custom content
+export var CustomContent = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), active = _useState[0], setActive = _useState[1];
+        return /*#__PURE__*/ _jsx(Popover, {
+            active: active,
+            activator: /*#__PURE__*/ _jsx(Button, {
+                onClick: function() {
+                    return setActive(!active);
+                },
+                children: "View details"
+            }),
+            onClose: function() {
+                return setActive(false);
+            },
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    padding: "1.5rem",
+                    minWidth: "300px"
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            marginBottom: "1rem"
+                        },
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingMd",
+                            children: "Product Details"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: "0.75rem"
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                align: "space-between",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        children: "SKU:"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "PROD-12345"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                align: "space-between",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        children: "Price:"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "$29.99"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                align: "space-between",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        children: "Stock:"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "47 units"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                align: "space-between",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        children: "Category:"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Electronics"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Popovers can contain any custom content layout."
+            }
+        }
+    }
+};
+// Fixed positioning
+export var FixedPosition = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), active = _useState[0], setActive = _useState[1];
+        return /*#__PURE__*/ _jsx(Popover, {
+            active: active,
+            activator: /*#__PURE__*/ _jsx(Button, {
+                onClick: function() {
+                    return setActive(!active);
+                },
+                disclosure: true,
+                children: "Fixed popover"
+            }),
+            onClose: function() {
+                return setActive(false);
+            },
+            fixed: true,
+            children: /*#__PURE__*/ _jsx("div", {
+                style: {
+                    padding: "1rem"
+                },
+                children: /*#__PURE__*/ _jsx(Text, {
+                    children: "This popover uses fixed positioning and won't be affected by scrolling."
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Fixed positioning ensures the popover stays in place relative to the viewport."
+            }
+        }
+    }
+};