@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Button.stories.js

@@ -0,0 +1,277 @@
+import { UploadMajor } from "@shopify/polaris-icons";
+import { Button } from "../dist/esm/index.js";
+export default {
+    title: "Litho/Button",
+    component: Button,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A Button component that renders a customizable button or link with various styles and states. The button can be configured with different variants, sizes, and can include icons, loading states, and connected disclosure actions."
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        children: {
+            control: "text",
+            description: "The content to display within the button"
+        },
+        primary: {
+            control: "boolean",
+            description: "Whether to show the primary button style"
+        },
+        destructive: {
+            control: "boolean",
+            description: "Whether to show destructive styling"
+        },
+        highlight: {
+            control: "boolean",
+            description: "Whether to show the highlight button style"
+        },
+        plain: {
+            control: "boolean",
+            description: "Whether to show plain styling without background"
+        },
+        link: {
+            control: "boolean",
+            description: "Whether to show a link style"
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the button is disabled"
+        },
+        loading: {
+            control: "boolean",
+            description: "Whether to show a loading spinner"
+        },
+        pressed: {
+            control: "boolean",
+            description: "Whether the button appears pressed"
+        },
+        size: {
+            control: "select",
+            options: [
+                "small",
+                "medium",
+                "large",
+                "stepper"
+            ],
+            description: "Size of the button"
+        },
+        fullWidth: {
+            control: "boolean",
+            description: "Whether the button should take full width"
+        },
+        rounded: {
+            control: "boolean",
+            description: "Whether to show fully rounded corners"
+        },
+        disclosure: {
+            control: "boolean",
+            description: "Whether to show a disclosure arrow"
+        },
+        disclosureRight: {
+            control: "boolean",
+            description: "Whether to show the disclosure on the right"
+        },
+        align: {
+            control: "select",
+            options: [
+                "left",
+                "center",
+                "right"
+            ],
+            description: "Alignment of the button content"
+        },
+        shadow: {
+            control: "boolean",
+            description: "Whether to show button shadow"
+        },
+        bordered: {
+            control: "boolean",
+            description: "Whether to show button border"
+        },
+        submit: {
+            control: "boolean",
+            description: "Whether the button should act as a form submit button"
+        },
+        external: {
+            control: "boolean",
+            description: "Whether the URL should open in a new tab"
+        },
+        url: {
+            control: "text",
+            description: "URL to navigate to when clicked. If provided, renders as an anchor tag"
+        },
+        target: {
+            control: "text",
+            description: "Target attribute for the anchor tag when URL is provided"
+        },
+        icon: {
+            control: "object",
+            description: "Icon component to display within the button"
+        },
+        iconColor: {
+            control: "select",
+            options: [
+                "default",
+                "primary",
+                "secondary",
+                "plain",
+                "link",
+                "destructive",
+                "highlight"
+            ],
+            description: "Color of the icon"
+        },
+        tooltip: {
+            control: "text",
+            description: "Tooltip to show when hovering over the button"
+        },
+        tooltipAlignment: {
+            control: "select",
+            options: [
+                "left",
+                "center",
+                "right"
+            ],
+            description: "Alignment of the tooltip"
+        },
+        tooltipPosition: {
+            control: "select",
+            options: [
+                "above",
+                "below",
+                "mostSpace"
+            ],
+            description: "Position of the tooltip"
+        },
+        connectedDisclosure: {
+            control: "object",
+            description: "Configuration for connected disclosure menu with actions array"
+        },
+        id: {
+            control: "text",
+            description: "Unique identifier for the button"
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes for the button"
+        },
+        contentClassName: {
+            control: "text",
+            description: "Additional CSS classes for the button content"
+        },
+        accessibilityLabel: {
+            control: "text",
+            description: "Accessible label for screen readers"
+        },
+        role: {
+            control: "text",
+            description: "ARIA role for the button"
+        },
+        ariaControls: {
+            control: "text",
+            description: "ID of the element controlled by the button"
+        },
+        ariaExpanded: {
+            control: "boolean",
+            description: "Whether the controlled element is expanded"
+        },
+        ariaDescribedBy: {
+            control: "text",
+            description: "ID of the element that describes the button"
+        },
+        ariaChecked: {
+            control: "boolean",
+            description: "Whether the button is checked (for toggle buttons)"
+        },
+        onClick: {
+            action: "clicked",
+            description: "Callback when the button is clicked"
+        },
+        onMouseDown: {
+            action: "mouseDown",
+            description: "Callback when the mouse is pressed on the button"
+        }
+    }
+};
+export var Default = {
+    args: {
+        children: "Button"
+    }
+};
+export var Primary = {
+    args: {
+        primary: true,
+        children: "Primary Button"
+    }
+};
+export var Destructive = {
+    args: {
+        destructive: true,
+        children: "Delete"
+    }
+};
+export var Plain = {
+    args: {
+        plain: true,
+        children: "Plain Button"
+    }
+};
+export var Loading = {
+    args: {
+        loading: true,
+        children: "Loading..."
+    }
+};
+export var Disabled = {
+    args: {
+        disabled: true,
+        children: "Disabled Button"
+    }
+};
+export var Small = {
+    args: {
+        size: "small",
+        children: "Small Button"
+    }
+};
+export var Large = {
+    args: {
+        size: "large",
+        children: "Large Button"
+    }
+};
+export var FullWidth = {
+    args: {
+        fullWidth: true,
+        children: "Full Width Button"
+    }
+};
+export var ConnectedDisclosure = {
+    args: {
+        children: "Connected Disclosure Button",
+        connectedDisclosure: {
+            actions: [
+                {
+                    content: "Action 1",
+                    onAction: function() {}
+                },
+                {
+                    content: "Action 2",
+                    onAction: function() {}
+                }
+            ]
+        }
+    }
+};
+export var WithIcon = {
+    args: {
+        children: "Upload",
+        icon: UploadMajor
+    }
+};

package/dist/esm/stories/ButtonGroup.stories.js

@@ -0,0 +1,357 @@
+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 React from "react";
+import ButtonGroup from "../components/ButtonGroup.js";
+import Button from "../components/Button.js";
+import { SaveMinor, UndoMajor, RedoMajor } from "@shopify/polaris-icons";
+import { transformStorySource } from "../utilities/transformers.js";
+import VerticalStack from "../components/VerticalStack.js";
+import TextField from "../components/TextField.js";
+import Card from "../components/Card.js";
+import Box from "../components/Box.js";
+import Text from "../components/Text.js";
+export default {
+    title: "Litho/ButtonGroup",
+    component: ButtonGroup,
+    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__*/ _jsx(Button, {
+                children: "Button 1"
+            }, "1"),
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Button 2"
+            }, "2"),
+            /*#__PURE__*/ _jsx(Button, {
+                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"
+        }
+    }
+};
+export var Default = {};
+export var Segmented = {
+    args: {
+        segmented: true,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Option 1"
+            }, "1"),
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Option 2"
+            }, "2"),
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Option 3"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Segmented button groups connect buttons visually for toggle-like interfaces."
+            }
+        }
+    }
+};
+export var FullWidth = {
+    args: {
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Equal"
+            }, "1"),
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Width"
+            }, "2"),
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Buttons"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Full width button groups make all buttons take equal width."
+            }
+        }
+    }
+};
+export var SegmentedFullWidth = {
+    args: {
+        segmented: true,
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Connected"
+            }, "1"),
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Full Width"
+            }, "2"),
+            /*#__PURE__*/ _jsx(Button, {
+                children: "Buttons"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Buttons can be both segmented and full width for toggle interfaces that span the container."
+            }
+        }
+    }
+};
+export var WithIcons = {
+    args: {
+        segmented: true,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                icon: UndoMajor,
+                children: "Undo"
+            }, "1"),
+            /*#__PURE__*/ _jsx(Button, {
+                icon: RedoMajor,
+                children: "Redo"
+            }, "2"),
+            /*#__PURE__*/ _jsx(Button, {
+                icon: SaveMinor,
+                children: "Save"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Button groups work well with icons for toolbar-like interfaces."
+            }
+        }
+    }
+};
+export var MixedVariants = {
+    args: {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                secondary: true,
+                children: "Cancel"
+            }, "1"),
+            /*#__PURE__*/ _jsx(Button, {
+                primary: true,
+                children: "Save"
+            }, "2"),
+            /*#__PURE__*/ _jsx(Button, {
+                destructive: true,
+                children: "Delete"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Different button variants can be grouped together."
+            }
+        }
+    }
+};
+export var FormActions = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        variant: "headingMd",
+                        children: "Form with button group"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Sample Form Field",
+                                placeholder: "Enter some text..."
+                            }),
+                            /*#__PURE__*/ _jsxs(ButtonGroup, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Cancel"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        primary: true,
+                                        children: "Save Changes"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Button groups are commonly used for form actions."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var SegmentedSelection = {
+    render: function() {
+        var _React_useState = _sliced_to_array(React.useState("month"), 2), selected = _React_useState[0], setSelected = _React_useState[1];
+        return /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "View: ",
+                            selected
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(ButtonGroup, {
+                    segmented: true,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            pressed: selected === "day",
+                            onClick: function() {
+                                return setSelected("day");
+                            },
+                            children: "Day"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            pressed: selected === "week",
+                            onClick: function() {
+                                return setSelected("week");
+                            },
+                            children: "Week"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            pressed: selected === "month",
+                            onClick: function() {
+                                return setSelected("month");
+                            },
+                            children: "Month"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            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: transformStorySource
+            }
+        }
+    }
+};
+export var Toolbar = {
+    args: {
+        segmented: true,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                icon: UndoMajor,
+                accessibilityLabel: "Undo"
+            }, "1"),
+            /*#__PURE__*/ _jsx(Button, {
+                icon: RedoMajor,
+                accessibilityLabel: "Redo"
+            }, "2"),
+            /*#__PURE__*/ _jsx(Button, {
+                icon: SaveMinor,
+                accessibilityLabel: "Save"
+            }, "3")
+        ]
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Icon-only button groups work well for toolbars and compact interfaces."
+            }
+        }
+    }
+};