@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Tag.stories.js

@@ -0,0 +1,573 @@
+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 _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(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(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+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 _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread 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 _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+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 Tag from "../components/Tag.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import { HorizontalStack, VerticalStack, Box } from "../dist/esm/index.js";
+export default {
+    title: 'Litho/Tag',
+    component: Tag,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Tag component that represents labels, categories, or metadata. Tags can be removable, clickable, and support different visual styles for various use cases."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        children: 'Sample tag'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'Content to display in the tag'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the tag is disabled'
+        },
+        removable: {
+            control: 'boolean',
+            description: 'Whether the tag can be removed'
+        },
+        clickable: {
+            control: 'boolean',
+            description: 'Whether the tag is clickable'
+        },
+        url: {
+            control: 'text',
+            description: 'URL to navigate to when tag is clicked'
+        },
+        onRemove: {
+            action: 'removed',
+            description: 'Callback when tag is removed'
+        },
+        onClick: {
+            action: 'clicked',
+            description: 'Callback when tag is clicked'
+        }
+    }
+};
+export var Default = {
+    args: {}
+};
+export var Removable = {
+    args: {
+        children: 'Removable tag',
+        removable: true,
+        onRemove: function() {
+            return console.log('Tag removed');
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags can be removable with an X button.'
+            }
+        }
+    }
+};
+export var Clickable = {
+    args: {
+        children: 'Clickable tag',
+        clickable: true,
+        onClick: function() {
+            return console.log('Tag clicked');
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags can be clickable to perform actions or navigation.'
+            }
+        }
+    }
+};
+export var WithUrl = {
+    args: {
+        children: 'Link tag',
+        url: '#',
+        onClick: function() {
+            return console.log('Tag link clicked');
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags can function as links to navigate to different pages.'
+            }
+        }
+    }
+};
+export var Disabled = {
+    args: {
+        children: 'Disabled tag',
+        disabled: true,
+        removable: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disabled tags cannot be interacted with.'
+            }
+        }
+    }
+};
+export var TagList = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            'JavaScript',
+            'React',
+            'Storybook',
+            'CSS',
+            'Node.js',
+            'TypeScript'
+        ]), 2), tags = _useState[0], setTags = _useState[1];
+        var removeTag = function(tagToRemove) {
+            setTags(tags.filter(function(tag) {
+                return tag !== tagToRemove;
+            }));
+        };
+        return /*#__PURE__*/ _jsx(HorizontalStack, {
+            gap: "2",
+            wrap: true,
+            children: tags.map(function(tag) {
+                return /*#__PURE__*/ _jsx(Tag, {
+                    removable: true,
+                    onRemove: function() {
+                        return removeTag(tag);
+                    },
+                    children: tag
+                }, tag);
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multiple tags can be displayed together as a list or collection.'
+            }
+        }
+    }
+};
+export var CategorizationExample = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            'featured'
+        ]), 2), selectedCategories = _useState[0], setSelectedCategories = _useState[1];
+        var categories = [
+            'featured',
+            'sale',
+            'new-arrival',
+            'bestseller',
+            'limited-edition',
+            'seasonal'
+        ];
+        var toggleCategory = function(category) {
+            if (selectedCategories.includes(category)) {
+                setSelectedCategories(selectedCategories.filter(function(c) {
+                    return c !== category;
+                }));
+            } else {
+                setSelectedCategories(_to_consumable_array(selectedCategories).concat([
+                    category
+                ]));
+            }
+        };
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Product Categories",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Select categories for this product:"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "6",
+                    children: /*#__PURE__*/ _jsx(HorizontalStack, {
+                        gap: "2",
+                        wrap: true,
+                        children: categories.map(function(category) {
+                            return /*#__PURE__*/ _jsx(Tag, _object_spread_props(_object_spread({
+                                clickable: true,
+                                onClick: function() {
+                                    return toggleCategory(category);
+                                }
+                            }, selectedCategories.includes(category) && {
+                                style: {
+                                    backgroundColor: '#e3f2fd',
+                                    border: '1px solid #2196f3'
+                                }
+                            }), {
+                                children: category.replace('-', ' ')
+                            }), category);
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    paddingBlock: "4",
+                    paddingInline: "4",
+                    background: "surface-neutral-subdued",
+                    borderRadius: "base",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Selected: "
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: selectedCategories.length > 0 ? selectedCategories.join(', ') : 'None'
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags can be used for categorization with selection states.'
+            }
+        }
+    }
+};
+export var FilterTags = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            {
+                label: 'In Stock',
+                value: 'in-stock'
+            },
+            {
+                label: 'Price: $0-$50',
+                value: 'price-low'
+            }
+        ]), 2), activeFilters = _useState[0], setActiveFilters = _useState[1];
+        var removeFilter = function(filterToRemove) {
+            setActiveFilters(activeFilters.filter(function(filter) {
+                return filter.value !== filterToRemove;
+            }));
+        };
+        var clearAllFilters = function() {
+            setActiveFilters([]);
+        };
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsxs(HorizontalStack, {
+                    blockAlign: "center",
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Active Filters:"
+                        }),
+                        activeFilters.length > 0 && /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            plain: true,
+                            onClick: clearAllFilters,
+                            children: "Clear all"
+                        })
+                    ]
+                }),
+                activeFilters.length > 0 ? /*#__PURE__*/ _jsx(HorizontalStack, {
+                    gap: "2",
+                    wrap: true,
+                    children: activeFilters.map(function(filter) {
+                        return /*#__PURE__*/ _jsx(Tag, {
+                            removable: true,
+                            onRemove: function() {
+                                return removeFilter(filter.value);
+                            },
+                            children: filter.label
+                        }, filter.value);
+                    })
+                }) : /*#__PURE__*/ _jsx(Text, {
+                    color: "subdued",
+                    children: "No filters applied"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags are commonly used to display active filters with remove functionality.'
+            }
+        }
+    }
+};
+export var StatusTags = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "6",
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            paddingBlockEnd: "2",
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Order Status"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(HorizontalStack, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    as: "span",
+                                    padding: "1",
+                                    borderRadius: "1",
+                                    background: "bg-success-subdued",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        variant: "bodySm",
+                                        tone: "success",
+                                        children: "Completed"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    as: "span",
+                                    padding: "1",
+                                    borderRadius: "1",
+                                    background: "bg-warning-subdued",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        variant: "bodySm",
+                                        tone: "warning",
+                                        children: "Processing"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    as: "span",
+                                    padding: "1",
+                                    borderRadius: "1",
+                                    background: "bg-critical-subdued",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        variant: "bodySm",
+                                        tone: "critical",
+                                        children: "Cancelled"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            paddingBlockEnd: "2",
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Priority Levels"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(HorizontalStack, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    as: "span",
+                                    padding: "1",
+                                    borderRadius: "1",
+                                    background: "bg-critical-subdued",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        variant: "bodySm",
+                                        tone: "critical",
+                                        children: "High"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    as: "span",
+                                    padding: "1",
+                                    borderRadius: "1",
+                                    background: "bg-warning-subdued",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        variant: "bodySm",
+                                        tone: "warning",
+                                        children: "Medium"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    as: "span",
+                                    padding: "1",
+                                    borderRadius: "1",
+                                    background: "bg-success-subdued",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        variant: "bodySm",
+                                        tone: "success",
+                                        children: "Low"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            paddingBlockEnd: "2",
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "User Roles"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(HorizontalStack, {
+                            gap: "2",
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    as: "span",
+                                    padding: "1",
+                                    borderRadius: "1",
+                                    background: "bg-info-subdued",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        variant: "bodySm",
+                                        tone: "info",
+                                        children: "Admin"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    as: "span",
+                                    padding: "1",
+                                    borderRadius: "1",
+                                    background: "surface-neutral-subdued",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        variant: "bodySm",
+                                        children: "Editor"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Tag, {
+                                    children: "Viewer"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags can be styled with custom colors to represent different statuses.'
+            }
+        }
+    }
+};