@heymantle/litho 0.0.2 → 0.0.4

package/dist/esm/stories/Tip.stories.js

@@ -0,0 +1,706 @@
+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 _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 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 _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 Tip from "../components/Tip.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import Link from "../components/Link.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Box from "../components/Box.js";
+import Grid from "../components/Grid.js";
+import { QuestionMarkMinor, MobileAcceptMajor, QuestionMarkMajor } from "@shopify/polaris-icons";
+export default {
+    title: 'Litho/Tip',
+    component: Tip,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Tip component for displaying informational messages with various status types. It supports dismissible functionality, custom icons, different alignments, and interactive behaviors."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        status: 'info',
+        children: 'This is a helpful tip for users.'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        status: {
+            control: 'select',
+            options: [
+                'info',
+                'success',
+                'critical',
+                'warning',
+                'attention',
+                'highlight',
+                'insight',
+                'plain'
+            ],
+            description: 'The status type of the tip'
+        },
+        children: {
+            control: 'text',
+            description: 'Content of the tip message'
+        },
+        onDismiss: {
+            control: false,
+            description: 'Function to call when dismiss button is clicked'
+        },
+        onClick: {
+            control: false,
+            description: 'Function to call when the tip is clicked'
+        },
+        icon: {
+            control: false,
+            description: 'Custom icon for the tip'
+        },
+        align: {
+            control: 'select',
+            options: [
+                'left',
+                'center',
+                'right'
+            ],
+            description: 'Alignment of the tip content'
+        },
+        border: {
+            control: 'boolean',
+            description: 'Whether to show a border around the tip'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(Tip, _object_spread({}, args));
+    }
+};
+export var StatusVariants = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "1",
+            children: [
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "info",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This is an informational tip with helpful context."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "success",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Your changes have been saved successfully!"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "warning",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Please review your settings before proceeding."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "critical",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "There was an error processing your request."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "attention",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Your trial expires in 3 days. Upgrade to continue."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "highlight",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "New feature: Try our improved search functionality!"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "insight",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Pro tip: Use keyboard shortcuts to work faster."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "plain",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This is a plain tip without background styling."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'All available status variants of the tip component.'
+            }
+        }
+    }
+};
+export var DismissibleTips = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            tip1: true,
+            tip2: true,
+            tip3: true
+        }), 2), visibleTips = _useState[0], setVisibleTips = _useState[1];
+        var dismissTip = function(tipId) {
+            setVisibleTips(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, tipId, false));
+            });
+        };
+        var resetTips = function() {
+            setVisibleTips({
+                tip1: true,
+                tip2: true,
+                tip3: true
+            });
+        };
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                visibleTips.tip1 && /*#__PURE__*/ _jsx(Tip, {
+                    status: "info",
+                    onDismiss: function() {
+                        return dismissTip('tip1');
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Welcome to our platform! This tip can be dismissed by clicking the \xd7 button."
+                    })
+                }),
+                visibleTips.tip2 && /*#__PURE__*/ _jsx(Tip, {
+                    status: "success",
+                    onDismiss: function() {
+                        return dismissTip('tip2');
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Your account setup is complete. You can now start using all features."
+                    })
+                }),
+                visibleTips.tip3 && /*#__PURE__*/ _jsx(Tip, {
+                    status: "highlight",
+                    onDismiss: function() {
+                        return dismissTip('tip3');
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Check out our new dashboard redesign for better user experience!"
+                    })
+                }),
+                !Object.values(visibleTips).some(Boolean) && /*#__PURE__*/ _jsx(Box, {
+                    padding: "2",
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        inlineAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                style: {
+                                    marginBottom: '1rem'
+                                },
+                                children: "All tips have been dismissed."
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: resetTips,
+                                children: "Reset Tips"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tips with dismiss functionality allowing users to close them.'
+            }
+        }
+    }
+};
+export var WithCustomIcons = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "info",
+                    icon: QuestionMarkMinor,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Did you know? You can customize keyboard shortcuts in settings."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "success",
+                    icon: MobileAcceptMajor,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "All system checks passed. Your setup is ready to go!"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "attention",
+                    icon: QuestionMarkMajor,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Need help getting started? Check out our comprehensive guide."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "info",
+                    icon: null,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This tip has no icon at all for a cleaner look."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tips with custom icons and no-icon variants.'
+            }
+        }
+    }
+};
+export var InteractiveTips = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(0), 2), clickCount = _useState[0], setClickCount = _useState[1];
+        var _useState1 = _sliced_to_array(useState(''), 2), lastClicked = _useState1[0], setLastClicked = _useState1[1];
+        var handleTipClick = function(tipName) {
+            setClickCount(function(prev) {
+                return prev + 1;
+            });
+            setLastClicked(tipName);
+        };
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "info",
+                    onClick: function() {
+                        return handleTipClick('Tutorial Tip');
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Click this tip to start the interactive tutorial."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "highlight",
+                    onClick: function() {
+                        return handleTipClick('Feature Tip');
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Click here to learn more about our new features."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "success",
+                    onClick: function() {
+                        return handleTipClick('Feedback Tip');
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Click to provide feedback on your experience."
+                    })
+                }),
+                clickCount > 0 && /*#__PURE__*/ _jsx(Box, {
+                    padding: "2",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        style: {
+                            fontSize: '0.9rem'
+                        },
+                        children: [
+                            "Tips clicked: ",
+                            clickCount,
+                            ' | Last clicked: "',
+                            lastClicked,
+                            '"'
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive tips that respond to click events.'
+            }
+        }
+    }
+};
+export var WithLinks = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "info",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "Learn more about our features in the",
+                            ' ',
+                            /*#__PURE__*/ _jsx(Link, {
+                                url: "/documentation",
+                                external: true,
+                                children: "documentation"
+                            }),
+                            ' ',
+                            "or contact",
+                            ' ',
+                            /*#__PURE__*/ _jsx(Link, {
+                                url: "mailto:support@example.com",
+                                children: "support"
+                            }),
+                            "."
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "warning",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "Your subscription expires soon.",
+                            ' ',
+                            /*#__PURE__*/ _jsx(Link, {
+                                url: "/billing",
+                                external: true,
+                                children: "Update your billing information"
+                            }),
+                            ' ',
+                            "to avoid service interruption."
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "success",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "Deployment successful!",
+                            ' ',
+                            /*#__PURE__*/ _jsx(Link, {
+                                url: "/dashboard",
+                                external: true,
+                                children: "View your live application"
+                            }),
+                            ' ',
+                            "or",
+                            ' ',
+                            /*#__PURE__*/ _jsx(Link, {
+                                url: "/analytics",
+                                external: true,
+                                children: "check analytics"
+                            }),
+                            "."
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tips containing links that inherit the appropriate colors.'
+            }
+        }
+    }
+};
+export var AlignmentVariants = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "info",
+                    align: "left",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This tip is left-aligned (default behavior)."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "success",
+                    align: "center",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This tip is center-aligned for emphasis."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "highlight",
+                    align: "right",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This tip is right-aligned for special cases."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tips with different content alignments.'
+            }
+        }
+    }
+};
+export var WithBorders = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "info",
+                    border: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This tip has a border for additional visual separation."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "warning",
+                    border: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Bordered tips can help draw attention to important messages."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Tip, {
+                    status: "success",
+                    border: true,
+                    onDismiss: function() {
+                        return alert('Tip dismissed');
+                    },
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Borders work well with dismissible tips too."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tips with border styling for enhanced visual separation.'
+            }
+        }
+    }
+};
+export var InContextUsage = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            onboarding: true,
+            featureHighlight: true,
+            helpTip: true
+        }), 2), showTips = _useState[0], setShowTips = _useState[1];
+        var dismissTip = function(tipId) {
+            setShowTips(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, tipId, false));
+            });
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Dashboard",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "2",
+                children: [
+                    showTips.onboarding && /*#__PURE__*/ _jsx(Tip, {
+                        status: "info",
+                        onDismiss: function() {
+                            return dismissTip('onboarding');
+                        },
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Welcome to your dashboard! This is where you'll find all your important metrics and controls."
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        columns: 3,
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Box, {
+                                padding: "2",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Users"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingLg",
+                                        children: "1,234"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Box, {
+                                padding: "2",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Revenue"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingLg",
+                                        children: "$45.2K"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Box, {
+                                padding: "2",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Orders"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingLg",
+                                        children: "567"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    showTips.featureHighlight && /*#__PURE__*/ _jsx(Tip, {
+                        status: "highlight",
+                        onDismiss: function() {
+                            return dismissTip('featureHighlight');
+                        },
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "✨ New feature: Click on any metric above to see detailed analytics and trends over time."
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: "View Reports"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Export Data"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Settings"
+                            })
+                        ]
+                    }),
+                    showTips.helpTip && /*#__PURE__*/ _jsx(Tip, {
+                        status: "insight",
+                        onDismiss: function() {
+                            return dismissTip('helpTip');
+                        },
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "\uD83D\uDCA1 Pro tip: Use the export feature to download your data for offline analysis and reporting."
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tips used in context within a dashboard interface for onboarding and feature highlights.'
+            }
+        }
+    }
+};