@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Table.stories.js

@@ -0,0 +1,584 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { transformStorySource } from "../utilities/transformers.js";
+import Table from "../components/Table.js";
+import Button from "../components/Button.js";
+import Badge from "../components/Badge.js";
+import Text from "../components/Text.js";
+import Checkbox from "../components/Checkbox.js";
+import { EditMinor, DeleteMinor, ViewMinor } from "@shopify/polaris-icons";
+export default {
+    title: 'Litho/Table',
+    component: Table,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: "A Table component that displays structured data in rows and columns. Tables support sorting, selection, actions, and responsive behavior for complex data presentations."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        headings: {
+            control: 'object',
+            description: 'Array of column heading objects or strings'
+        },
+        headingStyle: {
+            control: 'select',
+            options: [
+                'default',
+                'subdued'
+            ],
+            description: 'Style of the heading'
+        },
+        rows: {
+            control: 'object',
+            description: 'Array of row data with cell content'
+        },
+        verticalAlign: {
+            control: 'select',
+            options: [
+                'top',
+                'middle',
+                'bottom'
+            ],
+            description: 'Vertical alignment of table content'
+        },
+        fixedFirstColumns: {
+            control: 'number',
+            description: 'Number of fixed left columns'
+        },
+        fixedLastColumns: {
+            control: 'number',
+            description: 'Number of fixed right columns'
+        },
+        initialSortColumnIndex: {
+            control: 'number',
+            description: 'Initial column to sort by'
+        },
+        defaultSortDirection: {
+            control: 'select',
+            options: [
+                'ascending',
+                'descending'
+            ],
+            description: 'Default sort direction'
+        },
+        increasedTableDensity: {
+            control: 'boolean',
+            description: 'Whether to reduce padding for higher density'
+        },
+        footers: {
+            control: 'object',
+            description: 'Array of footer row content'
+        },
+        firstColumnMinWidth: {
+            control: 'number',
+            description: 'Minimum width of the first column'
+        },
+        bordered: {
+            control: 'boolean',
+            description: 'Whether to show table borders'
+        },
+        topBorder: {
+            control: 'boolean',
+            description: 'Whether to show a top border'
+        },
+        skeletonRows: {
+            control: 'number',
+            description: 'Number of skeleton rows to render when loading'
+        },
+        paginatedSelectAllActionText: {
+            control: 'text',
+            description: 'Text for the paginated select all action'
+        },
+        resourceName: {
+            control: 'object',
+            description: 'Object containing singular and plural resource names'
+        },
+        itemCount: {
+            control: 'number',
+            description: 'Total number of items in the table'
+        },
+        selectable: {
+            control: 'boolean',
+            description: 'Whether the table rows are selectable'
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Whether the table is in loading state'
+        },
+        hasMoreItems: {
+            control: 'boolean',
+            description: 'Whether there are more items available for selection'
+        },
+        noBodyCellPadding: {
+            control: 'boolean',
+            description: 'Whether to remove padding from body cells'
+        },
+        bulkActions: {
+            control: 'object',
+            description: 'Array of bulk action items'
+        },
+        promotedBulkActions: {
+            control: 'object',
+            description: 'Array of promoted bulk action items'
+        },
+        emptyState: {
+            control: 'object',
+            description: 'Custom empty state component'
+        },
+        stickyHeader: {
+            control: 'boolean',
+            description: 'Whether the header should be sticky'
+        },
+        onSort: {
+            action: 'sorted',
+            description: 'Callback for sorting events'
+        },
+        onSelectionChange: {
+            action: 'selectionChanged',
+            description: 'Callback for selection changes'
+        }
+    }
+};
+var sampleData = [
+    [
+        'John Doe',
+        'john@example.com',
+        'Active',
+        '$1,234.56',
+        'Customer'
+    ],
+    [
+        'Jane Smith',
+        'jane@example.com',
+        'Inactive',
+        '$2,567.89',
+        'VIP'
+    ],
+    [
+        'Bob Johnson',
+        'bob@example.com',
+        'Active',
+        '$987.65',
+        'Customer'
+    ],
+    [
+        'Alice Brown',
+        'alice@example.com',
+        'Pending',
+        '$3,456.78',
+        'VIP'
+    ],
+    [
+        'Charlie Wilson',
+        'charlie@example.com',
+        'Active',
+        '$876.54',
+        'Customer'
+    ]
+];
+export var Default = {
+    args: {
+        columnContentTypes: [
+            'text',
+            'text',
+            'text',
+            'numeric',
+            'text'
+        ],
+        headings: [
+            'Name',
+            'Email',
+            'Status',
+            'Revenue',
+            'Type'
+        ],
+        rows: sampleData
+    }
+};
+export var WithSelection = {
+    args: {
+        columnContentTypes: [
+            'text',
+            'text',
+            'text',
+            'numeric',
+            'text'
+        ],
+        headings: [
+            'Name',
+            'Email',
+            'Status',
+            'Revenue',
+            'Type'
+        ],
+        rows: sampleData,
+        selectable: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tables can include checkboxes for row selection.'
+            }
+        }
+    }
+};
+export var ZebraStriping = {
+    args: {
+        columnContentTypes: [
+            'text',
+            'text',
+            'text',
+            'numeric',
+            'text'
+        ],
+        headings: [
+            'Name',
+            'Email',
+            'Status',
+            'Revenue',
+            'Type'
+        ],
+        rows: sampleData,
+        hasZebraStriping: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Zebra striping makes it easier to scan across rows.'
+            }
+        }
+    }
+};
+export var Sortable = {
+    args: {
+        columnContentTypes: [
+            'text',
+            'text',
+            'text',
+            'numeric',
+            'text'
+        ],
+        headings: [
+            {
+                content: 'Name',
+                sortable: true
+            },
+            {
+                content: 'Email',
+                sortable: true
+            },
+            {
+                content: 'Status',
+                sortable: true
+            },
+            {
+                content: 'Revenue',
+                sortable: true
+            },
+            {
+                content: 'Type',
+                sortable: true
+            }
+        ],
+        rows: sampleData,
+        initialSortColumnIndex: 0,
+        defaultSortDirection: 'ascending'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Columns can be made sortable by clicking on column headers.'
+            }
+        }
+    }
+};
+export var WithBadges = {
+    render: function() {
+        var rowsWithBadges = sampleData.map(function(row) {
+            return [
+                row[0],
+                row[1],
+                /*#__PURE__*/ _jsx(Badge, {
+                    status: row[2] === 'Active' ? 'success' : row[2] === 'Inactive' ? 'critical' : 'warning',
+                    children: row[2]
+                }, row[2]),
+                row[3],
+                /*#__PURE__*/ _jsx(Badge, {
+                    status: row[4] === 'VIP' ? 'highlight' : 'default',
+                    children: row[4]
+                }, row[4])
+            ];
+        });
+        return /*#__PURE__*/ _jsx(Table, {
+            columnContentTypes: [
+                'text',
+                'text',
+                'text',
+                'numeric',
+                'text'
+            ],
+            headings: [
+                'Name',
+                'Email',
+                'Status',
+                'Revenue',
+                'Type'
+            ],
+            rows: rowsWithBadges,
+            hasZebraStriping: true
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Table cells can contain rich content like badges and other components.'
+            }
+        }
+    }
+};
+export var WithActions = {
+    render: function() {
+        var rowsWithActions = sampleData.map(function(row, index) {
+            return [
+                row[0],
+                row[1],
+                /*#__PURE__*/ _jsx(Badge, {
+                    status: row[2] === 'Active' ? 'success' : row[2] === 'Inactive' ? 'critical' : 'warning',
+                    children: row[2]
+                }, row[2]),
+                row[3],
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        gap: '0.25rem'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            plain: true,
+                            icon: ViewMinor,
+                            accessibilityLabel: "View"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            plain: true,
+                            icon: EditMinor,
+                            accessibilityLabel: "Edit"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            plain: true,
+                            icon: DeleteMinor,
+                            accessibilityLabel: "Delete"
+                        })
+                    ]
+                }, "actions-".concat(index))
+            ];
+        });
+        return /*#__PURE__*/ _jsx(Table, {
+            columnContentTypes: [
+                'text',
+                'text',
+                'text',
+                'numeric',
+                'text'
+            ],
+            headings: [
+                'Name',
+                'Email',
+                'Status',
+                'Revenue',
+                'Actions'
+            ],
+            rows: rowsWithActions,
+            hasZebraStriping: true
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Action buttons can be included in table cells for row-specific operations.'
+            }
+        }
+    }
+};
+export var Empty = {
+    args: {
+        columnContentTypes: [
+            'text',
+            'text',
+            'text',
+            'numeric',
+            'text'
+        ],
+        headings: [
+            'Name',
+            'Email',
+            'Status',
+            'Revenue',
+            'Type'
+        ],
+        rows: []
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tables gracefully handle empty states when no data is available.'
+            }
+        }
+    }
+};
+export var Interactive = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), selectedRows = _useState[0], setSelectedRows = _useState[1];
+        var _useState1 = _sliced_to_array(useState(0), 2), sortedColumn = _useState1[0], setSortedColumn = _useState1[1];
+        var _useState2 = _sliced_to_array(useState('ascending'), 2), sortDirection = _useState2[0], setSortDirection = _useState2[1];
+        var handleSelectionChange = function(selection) {
+            setSelectedRows(selection);
+        };
+        var handleSort = function(columnIndex, direction) {
+            setSortedColumn(columnIndex);
+            setSortDirection(direction);
+        };
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                padding: '1rem'
+            },
+            children: [
+                selectedRows.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginBottom: '1rem',
+                        padding: '0.75rem',
+                        backgroundColor: '#f0f8ff',
+                        borderRadius: '4px',
+                        border: '1px solid #b3d9ff'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Text, {
+                            children: [
+                                selectedRows.length,
+                                " row(s) selected"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                marginTop: '0.5rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    children: "Bulk Edit"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    destructive: true,
+                                    style: {
+                                        marginLeft: '0.5rem'
+                                    },
+                                    children: "Delete Selected"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Table, {
+                    columnContentTypes: [
+                        'text',
+                        'text',
+                        'text',
+                        'numeric',
+                        'text'
+                    ],
+                    headings: [
+                        {
+                            content: 'Name',
+                            sortable: true
+                        },
+                        {
+                            content: 'Email',
+                            sortable: true
+                        },
+                        {
+                            content: 'Status',
+                            sortable: true
+                        },
+                        {
+                            content: 'Revenue',
+                            sortable: true
+                        },
+                        {
+                            content: 'Type',
+                            sortable: true
+                        }
+                    ],
+                    rows: sampleData,
+                    selectable: true,
+                    hasZebraStriping: true,
+                    onSelectionChange: handleSelectionChange,
+                    onSort: handleSort,
+                    initialSortColumnIndex: sortedColumn,
+                    defaultSortDirection: sortDirection
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive example showing selection and sorting with bulk actions.'
+            }
+        }
+    }
+};