@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/ActionList.stories.js

@@ -0,0 +1,365 @@
+"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 DestructiveActions () {
+        return DestructiveActions;
+    },
+    get WithDisabledItems () {
+        return WithDisabledItems;
+    },
+    get WithIcons () {
+        return WithIcons;
+    },
+    get WithSections () {
+        return WithSections;
+    },
+    get WithUrls () {
+        return WithUrls;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("../components/ActionList.js"));
+var _polarisicons = require("@shopify/polaris-icons");
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: "Litho/ActionList",
+    component: _ActionList.default,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "An ActionList component that displays a list of actions that users can take. Action lists are commonly used in menus, dropdowns, and popovers."
+            }
+        }
+    },
+    args: {
+        items: [
+            {
+                content: "Edit",
+                onAction: function() {
+                    return console.log("Edit clicked");
+                }
+            },
+            {
+                content: "Delete",
+                onAction: function() {
+                    return console.log("Delete clicked");
+                }
+            }
+        ]
+    },
+    tags: [
+        "autodocs"
+    ],
+    decorators: [
+        function(Story) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
+            });
+        }
+    ],
+    argTypes: {
+        items: {
+            control: "object",
+            description: "Array of action items",
+            table: {
+                type: {
+                    summary: "ActionListItem[]",
+                    detail: "{\n  content: string;\n  disabled: boolean;\n  destructive: boolean;\n  icon: React.FC<React.SVGProps<SVGSVGElement>>;\n  onAction: () => void;\n  prefix: React.ReactNode;\n  imageUrl: string;\n  url: string;\n  secondaryAction: SecondaryAction;\n}"
+                }
+            }
+        },
+        sections: {
+            control: "object",
+            description: "Array of sections containing action items",
+            table: {
+                type: {
+                    summary: "ActionListSection[]",
+                    detail: "[{\n  title: string;\n  items: ActionListItem[];\n}]"
+                }
+            }
+        },
+        onActionAnyItem: {
+            action: "onActionAnyItem",
+            description: "Callback when any action is clicked",
+            table: {
+                type: {
+                    summary: "() => void"
+                }
+            }
+        },
+        padded: {
+            control: "boolean",
+            description: "Whether to apply padding to the action list",
+            table: {
+                type: {
+                    summary: "boolean",
+                    detail: "Whether to apply padding to the action list"
+                },
+                defaultValue: {
+                    summary: "true"
+                }
+            }
+        },
+        fullWidth: {
+            control: "boolean",
+            description: "Whether to apply full width styling to the action list",
+            table: {
+                type: {
+                    summary: "boolean",
+                    detail: "Whether to apply full width styling to the action list"
+                },
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        iconColor: {
+            control: "text",
+            description: "The color of the icons in the action list",
+            table: {
+                type: {
+                    summary: "string",
+                    detail: "The color of the icons in the action list"
+                },
+                defaultValue: {
+                    summary: "subdued"
+                }
+            }
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes to apply to the action list"
+        }
+    }
+};
+var Default = {};
+var WithIcons = {
+    args: {
+        items: [
+            {
+                content: "Edit",
+                icon: _polarisicons.EditMinor,
+                onAction: function() {
+                    return console.log("Edit clicked");
+                }
+            },
+            {
+                content: "View",
+                icon: _polarisicons.ViewMinor,
+                onAction: function() {
+                    return console.log("View clicked");
+                }
+            },
+            {
+                content: "Duplicate",
+                icon: _polarisicons.DuplicateMinor,
+                onAction: function() {
+                    return console.log("Duplicate clicked");
+                }
+            },
+            {
+                content: "Archive",
+                icon: _polarisicons.ArchiveMinor,
+                onAction: function() {
+                    return console.log("Archive clicked");
+                }
+            },
+            {
+                content: "Delete",
+                icon: _polarisicons.DeleteMinor,
+                destructive: true,
+                onAction: function() {
+                    return console.log("Delete clicked");
+                }
+            }
+        ],
+        onActionAnyItem: function() {
+            return console.log("Any action clicked");
+        }
+    }
+};
+var WithSections = {
+    args: {
+        sections: [
+            {
+                title: "Edit actions",
+                items: [
+                    {
+                        content: "Edit",
+                        icon: _polarisicons.EditMinor,
+                        onAction: function() {
+                            return console.log("Edit clicked");
+                        }
+                    },
+                    {
+                        content: "Duplicate",
+                        icon: _polarisicons.DuplicateMinor,
+                        onAction: function() {
+                            return console.log("Duplicate clicked");
+                        }
+                    }
+                ]
+            },
+            {
+                title: "View actions",
+                items: [
+                    {
+                        content: "View details",
+                        icon: _polarisicons.ViewMinor,
+                        onAction: function() {
+                            return console.log("View clicked");
+                        }
+                    },
+                    {
+                        content: "Preview",
+                        icon: _polarisicons.NoteMinor,
+                        onAction: function() {
+                            return console.log("Preview clicked");
+                        }
+                    }
+                ]
+            },
+            {
+                title: "Manage",
+                items: [
+                    {
+                        content: "Archive",
+                        icon: _polarisicons.ArchiveMinor,
+                        onAction: function() {
+                            return console.log("Archive clicked");
+                        }
+                    },
+                    {
+                        content: "Delete",
+                        icon: _polarisicons.DeleteMinor,
+                        destructive: true,
+                        onAction: function() {
+                            return console.log("Delete clicked");
+                        }
+                    }
+                ]
+            }
+        ],
+        onActionAnyItem: function() {
+            return console.log("Any action clicked");
+        }
+    }
+};
+var WithDisabledItems = {
+    args: {
+        items: [
+            {
+                content: "Available action",
+                onAction: function() {
+                    return console.log("Available action clicked");
+                }
+            },
+            {
+                content: "Disabled action",
+                disabled: true,
+                onAction: function() {
+                    return console.log("Disabled action clicked");
+                }
+            },
+            {
+                content: "Another available action",
+                onAction: function() {
+                    return console.log("Another action clicked");
+                }
+            }
+        ],
+        onActionAnyItem: function() {
+            return console.log("Any action clicked");
+        }
+    }
+};
+var DestructiveActions = {
+    args: {
+        items: [
+            {
+                content: "Edit item",
+                icon: _polarisicons.EditMinor,
+                onAction: function() {
+                    return console.log("Edit clicked");
+                }
+            },
+            {
+                content: "Duplicate item",
+                icon: _polarisicons.DuplicateMinor,
+                onAction: function() {
+                    return console.log("Duplicate clicked");
+                }
+            },
+            {
+                content: "Archive item",
+                icon: _polarisicons.ArchiveMinor,
+                onAction: function() {
+                    return console.log("Archive clicked");
+                }
+            },
+            {
+                content: "Delete item",
+                icon: _polarisicons.DeleteMinor,
+                destructive: true,
+                onAction: function() {
+                    return console.log("Delete clicked");
+                }
+            }
+        ],
+        onActionAnyItem: function() {
+            return console.log("Any action clicked");
+        }
+    }
+};
+var WithUrls = {
+    args: {
+        items: [
+            {
+                content: "View profile",
+                url: "/profile",
+                onAction: function() {
+                    return console.log("Profile clicked");
+                }
+            },
+            {
+                content: "Visit website",
+                url: "https://example.com",
+                external: true,
+                onAction: function() {
+                    return console.log("Website clicked");
+                }
+            },
+            {
+                content: "Open in new tab",
+                url: "/dashboard",
+                target: "_blank",
+                onAction: function() {
+                    return console.log("Dashboard clicked");
+                }
+            }
+        ],
+        onActionAnyItem: function() {
+            return console.log("Any action clicked");
+        }
+    }
+};

package/dist/cjs/stories/AnnouncementBar.stories.js

@@ -0,0 +1,244 @@
+"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 AnimatedIcon () {
+        return AnimatedIcon;
+    },
+    get Default () {
+        return Default;
+    },
+    get Interactive () {
+        return Interactive;
+    },
+    get WithIcon () {
+        return WithIcon;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _AnnouncementBar = /*#__PURE__*/ _interop_require_default(require("../components/AnnouncementBar.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _polarisicons = require("@shopify/polaris-icons");
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _transformers = require("../utilities/transformers.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 _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 _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 _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 _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/AnnouncementBar',
+    component: _AnnouncementBar.default,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: "An AnnouncementBar component for displaying important messages at the top of the page. It supports interactive behaviors, icons with animations, and can be positioned as fixed or static."
+            }
+        }
+    },
+    args: {
+        content: 'Important announcement'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'Text content to be displayed in the announcement bar'
+        },
+        onClick: {
+            action: 'onClick',
+            description: 'Click handler function for interactive announcements',
+            table: {
+                type: {
+                    summary: '() => void'
+                }
+            }
+        },
+        icon: {
+            control: 'object',
+            description: 'Icon to display alongside the content',
+            table: {
+                type: {
+                    summary: 'React.FC<React.SVGProps<SVGSVGElement>>'
+                }
+            }
+        },
+        animateIcon: {
+            control: 'select',
+            options: [
+                'bounce'
+            ],
+            description: 'Animation type for the icon',
+            table: {
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        fixed: {
+            control: 'boolean',
+            description: 'Whether the announcement bar is fixed to the top of the viewport',
+            table: {
+                type: {
+                    summary: 'boolean'
+                },
+                defaultValue: {
+                    summary: 'false'
+                }
+            }
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_AnnouncementBar.default, _object_spread({}, args));
+    }
+};
+var WithIcon = {
+    args: {
+        content: 'New features available!',
+        icon: _polarisicons.MarketingMajor
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Announcement bar with an icon.'
+            }
+        }
+    }
+};
+var AnimatedIcon = {
+    args: {
+        content: 'Special offer ending soon!',
+        icon: _polarisicons.GiftCardMajor,
+        animateIcon: 'bounce'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Announcement bar with a bouncing animated icon.'
+            }
+        }
+    }
+};
+var Interactive = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(false), 2), clicked = _useState[0], setClicked = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_AnnouncementBar.default, {
+                    content: clicked ? "Thanks for clicking!" : "Click me for more information",
+                    icon: _polarisicons.StarFilledMinor,
+                    onClick: function() {
+                        return setClicked(!clicked);
+                    }
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "8",
+                    paddingBlockStart: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Click the announcement bar above to see the interactive behavior."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive announcement bar with click handler.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};