@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Tooltip.stories.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import Tooltip from "../components/Tooltip.js";
+import Button from "../components/Button.js";
+import Icon from "../components/Icon.js";
+import Text from "../components/Text.js";
+import { InfoMinor, QuestionMarkMajor, SettingsMinor } from "@shopify/polaris-icons";
+export default {
+    title: "Litho/Tooltip",
+    component: Tooltip,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A Tooltip component that provides contextual information when hovering over or focusing on an element. Tooltips help explain functionality or provide additional details."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        content: {
+            control: "object",
+            description: "Content to display in the tooltip. Can be text, React node, or structured content object"
+        },
+        preferredPosition: {
+            control: "select",
+            options: [
+                "above",
+                "below"
+            ],
+            description: "Preferred position for the tooltip relative to the activator"
+        },
+        alignment: {
+            control: "select",
+            options: [
+                "center",
+                "left",
+                "right"
+            ],
+            description: "Alignment of the tooltip content"
+        },
+        dismissOnMouseOut: {
+            control: "boolean",
+            description: "Whether the tooltip should be dismissed when the mouse leaves the activator"
+        },
+        dismissOnActivatorClick: {
+            control: "boolean",
+            description: "Whether the tooltip should be dismissed when clicking the activator"
+        },
+        hoverDelay: {
+            control: "number",
+            description: "Delay in milliseconds before showing the tooltip on hover"
+        },
+        hasUnderline: {
+            control: "boolean",
+            description: "Whether the activator should have an underline"
+        },
+        zIndexOverride: {
+            control: "number",
+            description: "Override for the z-index of the tooltip"
+        },
+        display: {
+            control: "select",
+            options: [
+                "inline",
+                "inline-block",
+                "block"
+            ],
+            description: "Display property of the tooltip container"
+        },
+        children: {
+            control: "object",
+            description: "Element that triggers the tooltip on hover"
+        }
+    }
+};
+export var Default = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            content: "This is a tooltip",
+            children: /*#__PURE__*/ _jsx(Button, {
+                children: "Hover me"
+            })
+        });
+    }
+};
+export var Positions = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "3rem",
+                alignItems: "center"
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Tooltip above",
+                    preferredPosition: "above",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        children: "Above"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Tooltip below",
+                    preferredPosition: "below",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        children: "Below"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Tooltip in most space",
+                    preferredPosition: "mostSpace",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        children: "Most Space"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips can be positioned above, below, or in the area with the most available space."
+            }
+        }
+    }
+};
+export var WithIcon = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                display: "flex",
+                gap: "1rem",
+                alignItems: "center"
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    children: "Need help?"
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Click here to open the help documentation",
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        source: QuestionMarkMajor,
+                        color: "subdued"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips work well with icons to provide contextual help."
+            }
+        }
+    }
+};
+export var LongContent = {
+    args: {
+        content: "This is a longer tooltip message that provides more detailed information about the element. It can wrap to multiple lines when necessary.",
+        children: /*#__PURE__*/ _jsx(Button, {
+            children: "Long tooltip"
+        })
+    }
+};
+export var MultipleTooltips = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                display: "flex",
+                gap: "1rem",
+                flexWrap: "wrap"
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Save your current work",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        primary: true,
+                        children: "Save"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Discard all changes",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        children: "Cancel"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Delete this item permanently",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        destructive: true,
+                        children: "Delete"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "Open settings panel",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        plain: true,
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            source: SettingsMinor
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Multiple tooltips can be used together to explain different actions."
+            }
+        }
+    }
+};
+export var WithComplexContent = {
+    args: {
+        content: /*#__PURE__*/ _jsxs("div", {
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        fontWeight: "bold",
+                        marginBottom: "4px"
+                    },
+                    children: "Pro Tip"
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    children: "Use keyboard shortcuts to work faster:"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginTop: "4px",
+                        fontSize: "12px"
+                    },
+                    children: [
+                        "• Ctrl+S to save",
+                        /*#__PURE__*/ _jsx("br", {}),
+                        "• Ctrl+Z to undo",
+                        /*#__PURE__*/ _jsx("br", {}),
+                        "• Ctrl+Y to redo"
+                    ]
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ _jsx(Button, {
+            children: "Keyboard shortcuts"
+        })
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips can contain complex content including formatted text and lists."
+            }
+        }
+    }
+};
+export var FormField = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem"
+            },
+            children: [
+                /*#__PURE__*/ _jsx("label", {
+                    htmlFor: "email-field",
+                    style: {
+                        fontSize: "14px",
+                        fontWeight: "500"
+                    },
+                    children: "Email Address"
+                }),
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    content: "We'll use this email to send you important updates about your account",
+                    children: /*#__PURE__*/ _jsx(Icon, {
+                        source: InfoMinor,
+                        size: "sm",
+                        color: "subdued"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips are commonly used with form fields to provide additional context."
+            }
+        }
+    }
+};
+export var AlwaysVisible = {
+    args: {
+        active: true,
+        content: "This tooltip is always visible",
+        children: /*#__PURE__*/ _jsx(Button, {
+            children: "Always shown"
+        })
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Tooltips can be forced to always be visible using the active prop."
+            }
+        }
+    }
+};

package/dist/esm/stories/TopBar.stories.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import { TopBar, Button, TextField } from "../dist/esm/index.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+export default {
+    title: 'Litho/TopBar',
+    component: TopBar,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: "A TopBar component that renders a customizable top navigation bar with navigation, search, user menu, and header accessory. The top bar can be configured with different layouts and can include navigation, search, user menu, and header accessory."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        hasNavigation: {
+            control: 'boolean',
+            description: 'Whether navigation is present'
+        },
+        alwaysShowUserMenuInTopBar: {
+            control: 'boolean',
+            description: 'Always show user menu in top bar'
+        }
+    }
+};
+export var Default = {
+    args: {}
+};
+export var WithNavigation = {
+    args: {
+        hasNavigation: true
+    }
+};
+export var WithUserMenu = {
+    args: {
+        userMenu: /*#__PURE__*/ _jsx(Button, {
+            plain: true,
+            children: "User Menu"
+        })
+    }
+};
+export var WithSearchTrigger = {
+    args: {
+        searchTrigger: /*#__PURE__*/ _jsx(Button, {
+            plain: true,
+            children: "Search"
+        })
+    }
+};
+export var WithHeaderAccessory = {
+    args: {
+        headerAccessory: /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "0.5",
+            align: "center",
+            children: [
+                /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    children: "Action"
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    plain: true,
+                    children: "Settings"
+                })
+            ]
+        })
+    }
+};
+export var FullExample = {
+    args: {
+        hasNavigation: true,
+        searchTrigger: /*#__PURE__*/ _jsx(TextField, {
+            placeholder: "Search...",
+            type: "search"
+        }),
+        userMenu: /*#__PURE__*/ _jsx(Button, {
+            plain: true,
+            children: "John Doe"
+        }),
+        headerAccessory: /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "0.5",
+            align: "center",
+            children: [
+                /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    children: "Notifications"
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    plain: true,
+                    children: "Help"
+                })
+            ]
+        }),
+        alwaysShowUserMenuInTopBar: true
+    }
+};
+export var WithNavigationAndUser = {
+    args: {
+        hasNavigation: true,
+        userMenu: /*#__PURE__*/ _jsx(Button, {
+            plain: true,
+            children: "Admin User"
+        }),
+        alwaysShowUserMenuInTopBar: true
+    }
+};