@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/ResourceList.stories.js

@@ -0,0 +1,1067 @@
+"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 ComplexItems () {
+        return ComplexItems;
+    },
+    get Default () {
+        return Default;
+    },
+    get EmptyState () {
+        return EmptyState;
+    },
+    get LoadingState () {
+        return LoadingState;
+    },
+    get WithSelection () {
+        return WithSelection;
+    },
+    get WithoutDividers () {
+        return WithoutDividers;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _transformers = require("../utilities/transformers.js");
+var _ResourceList = /*#__PURE__*/ _interop_require_default(require("../components/ResourceList.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _Badge = /*#__PURE__*/ _interop_require_default(require("../components/Badge.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.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 _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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 _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);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+var _default = {
+    title: 'Litho/ResourceList',
+    component: _ResourceList.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A ResourceList component for displaying collections of items with loading states, empty states, and customizable rendering. It includes an Item subcomponent for consistent item styling and interaction handling."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array of items to display in the list'
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Whether the list is in a loading state'
+        },
+        emptyState: {
+            control: 'text',
+            description: 'Content to display when the list is empty'
+        },
+        renderItem: {
+            control: false,
+            description: 'Function to render each item in the list'
+        },
+        resourceName: {
+            control: 'object',
+            description: 'Object containing singular and plural resource names'
+        },
+        divider: {
+            control: 'boolean',
+            description: 'Whether to show dividers between items'
+        },
+        gap: {
+            control: 'select',
+            options: [
+                'none',
+                'small',
+                'large'
+            ],
+            description: 'Gap size between items'
+        }
+    }
+};
+var Default = {
+    render: function() {
+        var customers = [
+            {
+                id: 1,
+                name: 'John Smith',
+                email: 'john@example.com',
+                status: 'active'
+            },
+            {
+                id: 2,
+                name: 'Sarah Johnson',
+                email: 'sarah@example.com',
+                status: 'active'
+            },
+            {
+                id: 3,
+                name: 'Mike Wilson',
+                email: 'mike@example.com',
+                status: 'inactive'
+            },
+            {
+                id: 4,
+                name: 'Lisa Brown',
+                email: 'lisa@example.com',
+                status: 'active'
+            }
+        ];
+        var renderCustomer = function(customer, index) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
+                id: "customer-".concat(customer.id),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                    align: "space-between",
+                    blockAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "1",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: customer.name
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "bodySm",
+                                    color: "subdued",
+                                    children: customer.email
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                            tone: customer.status === 'active' ? 'success' : 'warning',
+                            children: customer.status
+                        })
+                    ]
+                })
+            }, customer.id);
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Customer List",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default, {
+                items: customers,
+                renderItem: renderCustomer,
+                resourceName: {
+                    singular: 'customer',
+                    plural: 'customers'
+                }
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic resource list displaying customer information.'
+            }
+        }
+    }
+};
+var WithSelection = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(new Set()), 2), selectedItems = _useState[0], setSelectedItems = _useState[1];
+        var products = [
+            {
+                id: 1,
+                name: 'Wireless Headphones',
+                price: '$159.99',
+                stock: 45
+            },
+            {
+                id: 2,
+                name: 'Bluetooth Speaker',
+                price: '$89.99',
+                stock: 23
+            },
+            {
+                id: 3,
+                name: 'Phone Case',
+                price: '$24.99',
+                stock: 156
+            },
+            {
+                id: 4,
+                name: 'Screen Protector',
+                price: '$12.99',
+                stock: 89
+            },
+            {
+                id: 5,
+                name: 'Car Charger',
+                price: '$19.99',
+                stock: 67
+            }
+        ];
+        var handleItemClick = function(productId) {
+            var newSelected = new Set(selectedItems);
+            if (newSelected.has(productId)) {
+                newSelected.delete(productId);
+            } else {
+                newSelected.add(productId);
+            }
+            setSelectedItems(newSelected);
+        };
+        var renderProduct = function(product, index) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
+                id: "product-".concat(product.id),
+                selected: selectedItems.has(product.id),
+                onClick: function() {
+                    return handleItemClick(product.id);
+                },
+                accessibilityLabel: "Select ".concat(product.name),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                    align: "space-between",
+                    blockAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "1",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: product.name
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    variant: "bodySm",
+                                    color: "subdued",
+                                    children: [
+                                        "Stock: ",
+                                        product.stock,
+                                        " units"
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: product.price
+                        })
+                    ]
+                })
+            }, product.id);
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Product Inventory",
+            padded: true,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                        variant: "bodySm",
+                        color: "subdued",
+                        children: [
+                            "Click items to select them. ",
+                            selectedItems.size,
+                            " item",
+                            selectedItems.size !== 1 ? 's' : '',
+                            " selected."
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default, {
+                    items: products,
+                    renderItem: renderProduct,
+                    resourceName: {
+                        singular: 'product',
+                        plural: 'products'
+                    }
+                }),
+                selectedItems.size > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockStart: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                size: "slim",
+                                onClick: function() {
+                                    return alert("Bulk edit ".concat(selectedItems.size, " items"));
+                                },
+                                children: "Bulk Edit"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                size: "slim",
+                                destructive: true,
+                                onClick: function() {
+                                    return setSelectedItems(new Set());
+                                },
+                                children: "Clear Selection"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Resource list with selectable items and bulk actions.'
+            }
+        }
+    }
+};
+var LoadingState = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(true), 2), loading = _useState[0], setLoading = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)([]), 2), items = _useState1[0], setItems = _useState1[1];
+        var simulateLoading = function() {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setLoading(true);
+                            setItems([]);
+                            // Simulate API call
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 2000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setItems([
+                                {
+                                    id: 1,
+                                    title: 'First Item',
+                                    description: 'Description for first item'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Second Item',
+                                    description: 'Description for second item'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'Third Item',
+                                    description: 'Description for third item'
+                                }
+                            ]);
+                            setLoading(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var renderItem = function(item, index) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
+                id: "item-".concat(item.id),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "1",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: item.title
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: item.description
+                        })
+                    ]
+                })
+            }, item.id);
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Loading State Demo",
+            padded: true,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        onClick: simulateLoading,
+                        disabled: loading,
+                        children: loading ? 'Loading...' : 'Reload Items'
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default, {
+                    items: items,
+                    loading: loading,
+                    renderItem: renderItem,
+                    resourceName: {
+                        singular: 'item',
+                        plural: 'items'
+                    }
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Resource list demonstrating loading state with spinner.'
+            }
+        }
+    }
+};
+var EmptyState = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)([]), 2), items = _useState[0], setItems = _useState[1];
+        var _useState1 = _sliced_to_array((0, _react.useState)('default'), 2), emptyStateType = _useState1[0], setEmptyStateType = _useState1[1];
+        var addItem = function() {
+            var newItem = {
+                id: items.length + 1,
+                name: "Item ".concat(items.length + 1),
+                description: "Description for item ".concat(items.length + 1)
+            };
+            setItems(_to_consumable_array(items).concat([
+                newItem
+            ]));
+        };
+        var clearItems = function() {
+            setItems([]);
+        };
+        var renderItem = function(item, index) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
+                id: "item-".concat(item.id),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                    align: "space-between",
+                    blockAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                            gap: "1",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "headingSm",
+                                    children: item.name
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                    variant: "bodySm",
+                                    color: "subdued",
+                                    children: item.description
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            size: "slim",
+                            onClick: function() {
+                                return setItems(items.filter(function(i) {
+                                    return i.id !== item.id;
+                                }));
+                            },
+                            children: "Remove"
+                        })
+                    ]
+                })
+            }, item.id);
+        };
+        var customEmptyState = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            padding: "12",
+            paddingInline: "4",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "4",
+                align: "center",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        style: {
+                            fontSize: '3rem'
+                        },
+                        children: "\uD83D\uDCDD"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        variant: "headingMd",
+                        alignment: "center",
+                        children: "No items yet"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        variant: "bodySm",
+                        color: "subdued",
+                        alignment: "center",
+                        children: "Get started by adding your first item to the list."
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        primary: true,
+                        onClick: addItem,
+                        children: "Add First Item"
+                    })
+                ]
+            })
+        });
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Empty State Demo",
+            padded: true,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "4",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                onClick: addItem,
+                                disabled: items.length >= 5,
+                                children: "Add Item"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                onClick: clearItems,
+                                disabled: items.length === 0,
+                                children: "Clear All"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                style: {
+                                    marginLeft: 'auto'
+                                },
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                    gap: "2",
+                                    blockAlign: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "bodySm",
+                                            children: "Empty state:"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsxs)("select", {
+                                            value: emptyStateType,
+                                            onChange: function(e) {
+                                                return setEmptyStateType(e.target.value);
+                                            },
+                                            style: {
+                                                padding: '0.25rem',
+                                                borderRadius: '4px',
+                                                border: '1px solid #ccc'
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                    value: "default",
+                                                    children: "Default"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)("option", {
+                                                    value: "custom",
+                                                    children: "Custom"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default, {
+                    items: items,
+                    renderItem: renderItem,
+                    resourceName: {
+                        singular: 'item',
+                        plural: 'items'
+                    },
+                    emptyState: emptyStateType === 'custom' ? customEmptyState : 'No items found.'
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Resource list with default and custom empty states.'
+            }
+        }
+    }
+};
+var WithoutDividers = {
+    render: function() {
+        var notifications = [
+            {
+                id: 1,
+                title: 'New order received',
+                time: '2 minutes ago',
+                read: false
+            },
+            {
+                id: 2,
+                title: 'Payment processed',
+                time: '15 minutes ago',
+                read: false
+            },
+            {
+                id: 3,
+                title: 'Shipment delivered',
+                time: '1 hour ago',
+                read: true
+            },
+            {
+                id: 4,
+                title: 'Customer feedback',
+                time: '3 hours ago',
+                read: true
+            },
+            {
+                id: 5,
+                title: 'Weekly report ready',
+                time: '1 day ago',
+                read: true
+            }
+        ];
+        var renderNotification = function(notification, index) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
+                id: "notification-".concat(notification.id),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                    gap: "4",
+                    blockAlign: "center",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            borderRadius: "50%",
+                            style: {
+                                width: '8px',
+                                height: '8px',
+                                backgroundColor: notification.read ? 'transparent' : '#007bff',
+                                flexShrink: 0
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            style: {
+                                flex: 1
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "headingSm",
+                                        style: {
+                                            fontWeight: notification.read ? 'normal' : 'bold'
+                                        },
+                                        children: notification.title
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        variant: "bodySm",
+                                        color: "subdued",
+                                        children: notification.time
+                                    })
+                                ]
+                            })
+                        }),
+                        !notification.read && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                            tone: "info",
+                            children: "New"
+                        })
+                    ]
+                })
+            }, notification.id);
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Notifications",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default, {
+                items: notifications,
+                renderItem: renderNotification,
+                resourceName: {
+                    singular: 'notification',
+                    plural: 'notifications'
+                },
+                divider: false,
+                gap: "small"
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Resource list without dividers, using gap spacing instead.'
+            }
+        }
+    }
+};
+var ComplexItems = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(null), 2), selectedOrder = _useState[0], setSelectedOrder = _useState[1];
+        var orders = [
+            {
+                id: 'ORD-001',
+                customer: 'John Smith',
+                items: 3,
+                total: '$234.50',
+                status: 'shipped',
+                date: '2024-01-15',
+                address: '123 Main St, Anytown, ST 12345'
+            },
+            {
+                id: 'ORD-002',
+                customer: 'Sarah Johnson',
+                items: 1,
+                total: '$89.99',
+                status: 'processing',
+                date: '2024-01-16',
+                address: '456 Oak Ave, Another City, ST 67890'
+            },
+            {
+                id: 'ORD-003',
+                customer: 'Mike Wilson',
+                items: 5,
+                total: '$567.25',
+                status: 'delivered',
+                date: '2024-01-12',
+                address: '789 Pine Rd, Somewhere, ST 13579'
+            },
+            {
+                id: 'ORD-004',
+                customer: 'Lisa Brown',
+                items: 2,
+                total: '$145.75',
+                status: 'pending',
+                date: '2024-01-17',
+                address: '321 Elm St, Elsewhere, ST 24680'
+            }
+        ];
+        var getStatusColor = function(status) {
+            switch(status){
+                case 'delivered':
+                    return 'success';
+                case 'shipped':
+                    return 'info';
+                case 'processing':
+                    return 'warning';
+                case 'pending':
+                    return 'critical';
+                default:
+                    return 'default';
+            }
+        };
+        var renderOrder = function(order, index) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
+                id: "order-".concat(order.id),
+                selected: selectedOrder === order.id,
+                onClick: function() {
+                    return setSelectedOrder(order.id === selectedOrder ? null : order.id);
+                },
+                accessibilityLabel: "View details for order ".concat(order.id),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "2",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            blockAlign: "start",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "1",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingSm",
+                                            children: order.id
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "bodySm",
+                                            children: order.customer
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "1",
+                                    align: "end",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingSm",
+                                            children: order.total
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
+                                            tone: getStatusColor(order.status),
+                                            children: order.status
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                            align: "space-between",
+                            blockAlign: "center",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    variant: "bodySm",
+                                    color: "subdued",
+                                    children: [
+                                        order.items,
+                                        " item",
+                                        order.items !== 1 ? 's' : '',
+                                        " • ",
+                                        order.date
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                    variant: "bodyXs",
+                                    color: "subdued",
+                                    children: [
+                                        "Click to ",
+                                        selectedOrder === order.id ? 'hide' : 'show',
+                                        " details"
+                                    ]
+                                })
+                            ]
+                        }),
+                        selectedOrder === order.id && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                            paddingBlockStart: "4",
+                            padding: "4",
+                            background: "subdued",
+                            borderRadius: "default",
+                            style: {
+                                borderLeft: '3px solid #007bff'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                                    gap: "2",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "headingXs",
+                                            children: "Shipping Address"
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                            variant: "bodySm",
+                                            color: "subdued",
+                                            children: order.address
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    paddingBlockStart: "4",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                                        gap: "2",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "slim",
+                                                children: "View Details"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "slim",
+                                                children: "Track Package"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                                size: "slim",
+                                                children: "Contact Customer"
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }, order.id);
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Order Management",
+            padded: true,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        variant: "bodySm",
+                        color: "subdued",
+                        children: "Click on any order to view additional details and actions."
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default, {
+                    items: orders,
+                    renderItem: renderOrder,
+                    resourceName: {
+                        singular: 'order',
+                        plural: 'orders'
+                    },
+                    gap: "small"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Resource list with complex, interactive items that expand to show details.'
+            }
+        }
+    }
+};