@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/EmptyState.stories.js

@@ -0,0 +1,296 @@
+"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 Default () {
+        return Default;
+    },
+    get FilteredResults () {
+        return FilteredResults;
+    },
+    get InCard () {
+        return InCard;
+    },
+    get LargeImage () {
+        return LargeImage;
+    },
+    get MultipleEmptyStates () {
+        return MultipleEmptyStates;
+    },
+    get PermissionDenied () {
+        return PermissionDenied;
+    },
+    get SimpleMessage () {
+        return SimpleMessage;
+    },
+    get WithCustomImage () {
+        return WithCustomImage;
+    },
+    get WithSecondaryAction () {
+        return WithSecondaryAction;
+    },
+    get WithoutAction () {
+        return WithoutAction;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _EmptyState = /*#__PURE__*/ _interop_require_default(require("../components/EmptyState.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _transformers = require("../utilities/transformers.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = {
+    title: 'Litho/EmptyState',
+    component: _EmptyState.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "An EmptyState component that provides helpful messaging and actions when there's no content to display. Empty states guide users on what to do next."
+            }
+        }
+    },
+    args: {
+        title: 'No items found',
+        primaryAction: {
+            content: 'Add item',
+            onAction: function() {
+                return console.log('Add item clicked');
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title text to display in the empty state'
+        },
+        titleVariant: {
+            control: 'select',
+            options: [
+                'headingXs',
+                'headingSm',
+                'headingMd',
+                'headingLg',
+                'headingXl'
+            ],
+            description: 'Typography variant for the title'
+        },
+        description: {
+            control: 'text',
+            description: 'Text description to display in the empty state'
+        },
+        descriptionVariant: {
+            control: 'select',
+            options: [
+                'bodyXs',
+                'bodySm',
+                'bodyMd',
+                'bodyLg'
+            ],
+            description: 'Typography variant for the description'
+        },
+        icon: {
+            control: 'object',
+            description: 'React node to render a custom icon'
+        },
+        iconSource: {
+            control: 'text',
+            description: 'Image source URL to display an icon'
+        },
+        primaryAction: {
+            control: 'object',
+            description: 'Primary action button configuration'
+        },
+        secondaryAction: {
+            control: 'object',
+            description: 'Secondary action button configuration'
+        },
+        progress: {
+            control: 'number',
+            description: 'Progress value to display in the empty state'
+        }
+    }
+};
+var Default = {
+    args: {
+        description: 'There are no items to display. Create your first item to get started.'
+    }
+};
+var WithSecondaryAction = {
+    args: {
+        title: 'No products yet',
+        description: 'Add products to your store to start selling. You can also import products from other platforms.',
+        secondaryAction: {
+            content: 'Import products',
+            onAction: function() {
+                return console.log('Import clicked');
+            }
+        }
+    }
+};
+var SimpleMessage = {
+    args: {
+        title: 'No search results',
+        description: 'Try adjusting your search terms or filters to find what you\'re looking for.',
+        primaryAction: null
+    }
+};
+var WithCustomImage = {
+    args: {
+        title: 'No customers yet',
+        description: 'When you have customers, you\'ll see them listed here.',
+        iconSource: 'https://via.placeholder.com/120x120/e1e1e1/666?text=No+Data',
+        primaryAction: {
+            content: 'Add customer',
+            onAction: function() {
+                return console.log('Add customer clicked');
+            }
+        }
+    }
+};
+var LargeImage = {
+    args: {
+        title: 'Welcome to your dashboard',
+        description: 'This is where you\'ll see an overview of your business. Start by adding your first product or customer.',
+        iconSource: 'https://via.placeholder.com/200x200/f0f0f0/999?text=Welcome',
+        primaryAction: {
+            content: 'Get started',
+            onAction: function() {
+                return console.log('Get started clicked');
+            }
+        },
+        secondaryAction: {
+            content: 'Take a tour',
+            onAction: function() {
+                return console.log('Take tour clicked');
+            }
+        }
+    }
+};
+var InCard = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Recent Orders",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmptyState.default, {
+                title: "No orders yet",
+                description: "When customers place orders, they'll appear here.",
+                primaryAction: {
+                    content: 'Create order',
+                    onAction: function() {
+                        return console.log('Create order clicked');
+                    }
+                }
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Empty states are commonly used within cards and containers.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var FilteredResults = {
+    args: {
+        title: 'No results match your filters',
+        description: 'Try changing or removing some filters to see more results.',
+        primaryAction: {
+            content: 'Clear filters',
+            onAction: function() {
+                return console.log('Clear filters clicked');
+            }
+        }
+    }
+};
+var PermissionDenied = {
+    args: {
+        title: 'Access restricted',
+        description: 'You don\'t have permission to view this content. Contact your administrator if you need access.',
+        primaryAction: {
+            content: 'Contact support',
+            onAction: function() {
+                return console.log('Contact support clicked');
+            }
+        }
+    }
+};
+var MultipleEmptyStates = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: {
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
+                gap: '2rem'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Analytics",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmptyState.default, {
+                        title: "No data available",
+                        description: "Connect your analytics to see insights about your business.",
+                        primaryAction: {
+                            content: 'Set up analytics',
+                            onAction: function() {
+                                return console.log('Setup clicked');
+                            }
+                        }
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Team Members",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmptyState.default, {
+                        title: "No team members",
+                        description: "Invite your team to collaborate on this project.",
+                        primaryAction: {
+                            content: 'Invite team member',
+                            onAction: function() {
+                                return console.log('Invite clicked');
+                            }
+                        }
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multiple empty states can be used across different sections of an interface.'
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    }
+};
+var WithoutAction = {
+    args: {
+        title: 'All caught up!',
+        description: 'You\'ve completed all your tasks. Great work!',
+        primaryAction: null
+    }
+};