@vtx-ui/react 0.0.1-beta.15 → 0.0.1-beta.17

package/dist/esm/components/Widget/renderers/components/Widget/renderers/EmptyStateWidget.example.js

@@ -0,0 +1,324 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import Widget from '../../../../components/Widget/Widget.js';
+import '../../../../components/Widget/IntelligentGrid.js';
+import '../../../../../Card/components/Card/Card.js';
+import '../../../../../Typography/components/Typography/Typography.js';
+import '../../../../../Badge/components/Badge/Badge.js';
+import '../../../../../Flex/components/Flex/Flex.js';
+import 'react-icons/fi';
+import 'react-icons/fa';
+import '../../../../../../widgets/InfoCard/widgets/InfoCard/InfoCard.js';
+import '../../../../../../widgets/InfoText/widgets/InfoText/InfoText.js';
+import './ProductWidget.js';
+import '../../../../../../widgets/OrderCard/widgets/OrderCard/OrderCard.js';
+import '../../../../../Button/components/Button/Button.js';
+import '../../../../../Avatar/components/Avatar/Avatar.js';
+import '../../../../../Link/components/Link/Link.js';
+import '../../../../../Breadcrumb/components/Breadcrumb/Breadcrumb.js';
+import '../../../../../../theme/theme/ThemeProvider.js';
+import './GridCarouselWidget.js';
+import EmptyStateWidget from './EmptyStateWidget.js';
+
+/**
+ * EmptyStateWidget Examples
+ *
+ * This file demonstrates various use cases for the EmptyStateWidget component
+ * with different themes, types, and configurations.
+ */
+// ============================================
+// 1. Basic Usage with Widget Component
+// ============================================
+const BasicEmptyState = () => {
+    const config = {
+        type: 'emptyState',
+        data: {
+            type: 'general',
+            actions: [
+                { label: 'Get Started', icon: 'plus', variant: 'primary' },
+            ],
+        },
+        settings: {
+            theme: 'modern',
+            variant: 'primary',
+        },
+    };
+    return jsx(Widget, { config: config });
+};
+// ============================================
+// 2. Empty Cart Example
+// ============================================
+const EmptyCartExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'cart',
+            title: 'Your Shopping Cart is Empty',
+            message: 'Looks like you haven\'t added anything to your cart yet.',
+            actions: [
+                {
+                    label: 'Browse Products',
+                    href: '/products',
+                    icon: 'search',
+                    variant: 'primary',
+                },
+                {
+                    label: 'View Wishlist',
+                    href: '/wishlist',
+                    variant: 'outline',
+                },
+            ],
+            additionalInfo: 'Free shipping on orders over $50',
+        }, settings: {
+            theme: 'modern',
+            variant: 'primary',
+        } }));
+};
+// ============================================
+// 3. Search No Results
+// ============================================
+const SearchNoResultsExample = () => {
+    const [searchTerm, setSearchTerm] = React__default.useState('react components');
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'search',
+            title: `No Results for "${searchTerm}"`,
+            message: 'We couldn\'t find any matches. Try different keywords or browse our categories.',
+            actions: [
+                {
+                    label: 'Clear Search',
+                    icon: 'refresh',
+                    variant: 'primary',
+                    onClick: () => setSearchTerm(''),
+                },
+                {
+                    label: 'Browse All',
+                    href: '/browse',
+                    variant: 'outline',
+                },
+            ],
+        }, settings: {
+            theme: 'professional',
+            variant: 'primary',
+        } }));
+};
+// ============================================
+// 4. Dashboard No Data with Custom Background
+// ============================================
+const DashboardNoDataExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'data',
+            title: 'No Analytics Data Yet',
+            message: 'Start tracking your metrics by connecting your first data source.',
+            actions: [
+                {
+                    label: 'Connect Data Source',
+                    icon: 'plus',
+                    variant: 'primary',
+                    onClick: () => console.log('Open connection modal'),
+                },
+                {
+                    label: 'View Documentation',
+                    href: '/docs',
+                    variant: 'outline',
+                    external: true,
+                },
+            ],
+        }, settings: {
+            theme: 'elegant',
+            variant: 'primary',
+            backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        } }));
+};
+// ============================================
+// 5. Notifications Empty (Playful Theme)
+// ============================================
+const NotificationsEmptyExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'notification',
+            title: 'All Caught Up! 🎉',
+            message: 'You have no new notifications. Check back later for updates.',
+            actions: [
+                {
+                    label: 'View Archive',
+                    variant: 'outline',
+                    onClick: () => console.log('View archive'),
+                },
+            ],
+            additionalInfo: 'Last checked: Just now',
+        }, settings: {
+            theme: 'playful',
+            variant: 'primary',
+        } }));
+};
+// ============================================
+// 6. File Manager Empty
+// ============================================
+const FileManagerEmptyExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'file',
+            title: 'No Documents Yet',
+            message: 'Upload your first document to get started with file management.',
+            actions: [
+                {
+                    label: 'Upload Files',
+                    icon: 'plus',
+                    variant: 'primary',
+                    onClick: () => console.log('Open upload dialog'),
+                },
+                {
+                    label: 'Create Folder',
+                    variant: 'outline',
+                    onClick: () => console.log('Create folder'),
+                },
+            ],
+            additionalInfo: 'Supported formats: PDF, DOC, DOCX, TXT, JPG, PNG',
+        }, settings: {
+            theme: 'professional',
+            variant: 'primary',
+        } }));
+};
+// ============================================
+// 7. Technical Theme (Dark Mode)
+// ============================================
+const TechnicalThemeExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'data',
+            title: 'No Records Found',
+            message: 'The database query returned 0 results. Check your filters or add new entries.',
+            actions: [
+                {
+                    label: 'Clear Filters',
+                    icon: 'refresh',
+                    variant: 'primary',
+                    onClick: () => console.log('Clear filters'),
+                },
+                {
+                    label: 'Add Record',
+                    icon: 'plus',
+                    variant: 'outline',
+                    onClick: () => console.log('Add record'),
+                },
+            ],
+        }, settings: {
+            theme: 'technical',
+            variant: 'primary',
+        } }));
+};
+// ============================================
+// 8. Compact Mode (Sidebar/Card)
+// ============================================
+const CompactModeExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'notification',
+            actions: [
+                {
+                    label: 'Refresh',
+                    icon: 'refresh',
+                    variant: 'primary',
+                },
+            ],
+        }, settings: {
+            theme: 'minimal',
+            variant: 'primary',
+            compact: true,
+        } }));
+};
+// ============================================
+// 9. Left Aligned (In Page Section)
+// ============================================
+const LeftAlignedExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'data',
+            title: 'No Projects Yet',
+            message: 'Create your first project to get started.',
+            actions: [
+                {
+                    label: 'New Project',
+                    icon: 'plus',
+                    variant: 'primary',
+                },
+            ],
+        }, settings: {
+            theme: 'modern',
+            variant: 'primary',
+            centered: false,
+        } }));
+};
+// ============================================
+// 10. Without Illustration (Minimal)
+// ============================================
+const WithoutIllustrationExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'search',
+            title: 'No Results',
+            message: 'Try adjusting your search terms.',
+            actions: [
+                {
+                    label: 'Clear Search',
+                    variant: 'primary',
+                },
+            ],
+        }, settings: {
+            theme: 'minimal',
+            variant: 'primary',
+            showIllustration: false,
+        } }));
+};
+// ============================================
+// 11. Error State (Danger Variant)
+// ============================================
+const ErrorStateExample = () => {
+    return (jsx(EmptyStateWidget, { data: {
+            type: 'data',
+            title: 'Failed to Load Data',
+            message: 'There was an error loading your content. Please try again.',
+            actions: [
+                {
+                    label: 'Retry',
+                    icon: 'refresh',
+                    variant: 'primary',
+                },
+                {
+                    label: 'Contact Support',
+                    href: '/support',
+                    variant: 'outline',
+                },
+            ],
+        }, settings: {
+            theme: 'modern',
+            variant: 'danger',
+        } }));
+};
+// ============================================
+// 12. Multiple Themes Showcase
+// ============================================
+const MultipleThemesShowcase = () => {
+    const themes = ['minimal', 'modern', 'professional', 'playful', 'technical', 'elegant'];
+    return (jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: themes.map((theme) => (jsx(EmptyStateWidget, { data: {
+                type: 'general',
+                title: `${theme.charAt(0).toUpperCase() + theme.slice(1)} Theme`,
+                message: 'This is an example of the empty state widget.',
+                actions: [
+                    { label: 'Primary Action', variant: 'primary' },
+                ],
+            }, settings: {
+                theme,
+                variant: 'primary',
+            } }, theme))) }));
+};
+var EmptyStateWidget_example = {
+    BasicEmptyState,
+    EmptyCartExample,
+    SearchNoResultsExample,
+    DashboardNoDataExample,
+    NotificationsEmptyExample,
+    FileManagerEmptyExample,
+    TechnicalThemeExample,
+    CompactModeExample,
+    LeftAlignedExample,
+    WithoutIllustrationExample,
+    ErrorStateExample,
+    MultipleThemesShowcase,
+};
+
+export { BasicEmptyState, CompactModeExample, DashboardNoDataExample, EmptyCartExample, ErrorStateExample, FileManagerEmptyExample, LeftAlignedExample, MultipleThemesShowcase, NotificationsEmptyExample, SearchNoResultsExample, TechnicalThemeExample, WithoutIllustrationExample, EmptyStateWidget_example as default };
+//# sourceMappingURL=EmptyStateWidget.example.js.map

package/dist/esm/components/Widget/renderers/components/Widget/renderers/EmptyStateWidget.example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateWidget.example.js","sources":["../../../../../../../../src/components/Widget/renderers/EmptyStateWidget.example.tsx"],"sourcesContent":[null],"names":["_jsx","React"],"mappings":"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"}

package/dist/esm/components/Widget/renderers/components/Widget/renderers/EmptyStateWidget.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import Button from '../../../../../Button/components/Button/Button.js';
+import Typography from '../../../../../Typography/components/Typography/Typography.js';
+import Link from '../../../../../Link/components/Link/Link.js';
+import Flex from '../../../../../Flex/components/Flex/Flex.js';
+import { EmptyBoxIcon, EmptySearchIcon, EmptyDataIcon, EmptyNotificationIcon, EmptyCartIcon, EmptyFileIcon, SearchIcon, RefreshIcon, PlusIcon } from '../../../../../../icons/icons/IconComponents.js';
+
+const EmptyStateWidget = ({ data, settings, className = '', style, }) => {
+    const { type = 'general', title, message, actions, customIcon, additionalInfo, } = data;
+    const theme = (settings === null || settings === void 0 ? void 0 : settings.theme) || 'modern';
+    const variant = (settings === null || settings === void 0 ? void 0 : settings.variant) || 'primary';
+    const showIllustration = (settings === null || settings === void 0 ? void 0 : settings.showIllustration) !== false;
+    const centered = (settings === null || settings === void 0 ? void 0 : settings.centered) !== false;
+    const compact = (settings === null || settings === void 0 ? void 0 : settings.compact) || false;
+    const backgroundColor = settings === null || settings === void 0 ? void 0 : settings.backgroundColor;
+    // Default content based on type
+    const getDefaultContent = () => {
+        const defaults = {
+            general: {
+                title: 'Nothing Here Yet',
+                message: "It looks like there's no content to display at the moment.",
+                icon: jsx(EmptyBoxIcon, { size: 120 }),
+            },
+            search: {
+                title: 'No Results Found',
+                message: "We couldn't find anything matching your search. Try different keywords.",
+                icon: jsx(EmptySearchIcon, { size: 120 }),
+            },
+            data: {
+                title: 'No Data Available',
+                message: 'There is no data to show right now. Check back later or add new entries.',
+                icon: jsx(EmptyDataIcon, { size: 120 }),
+            },
+            notification: {
+                title: 'No Notifications',
+                message: "You're all caught up! There are no new notifications.",
+                icon: jsx(EmptyNotificationIcon, { size: 120 }),
+            },
+            cart: {
+                title: 'Your Cart is Empty',
+                message: 'Add items to your cart to get started with your purchase.',
+                icon: jsx(EmptyCartIcon, { size: 120 }),
+            },
+            file: {
+                title: 'No Files Yet',
+                message: 'Upload or create files to get started.',
+                icon: jsx(EmptyFileIcon, { size: 120 }),
+            },
+        };
+        return defaults[type] || defaults.general;
+    };
+    const defaultContent = getDefaultContent();
+    const displayTitle = title || defaultContent.title;
+    const displayMessage = message || defaultContent.message;
+    const displayIcon = customIcon || defaultContent.icon;
+    // Get icon component for actions
+    const getIcon = (iconName) => {
+        const iconSize = 18;
+        switch (iconName) {
+            case 'add':
+            case 'plus':
+                return jsx(PlusIcon, { size: iconSize });
+            case 'refresh':
+                return jsx(RefreshIcon, { size: iconSize });
+            case 'search':
+                return jsx(SearchIcon, { size: iconSize });
+            default:
+                return null;
+        }
+    };
+    // Get button variant based on theme
+    const getButtonVariant = (actionVariant) => {
+        if (theme === 'technical')
+            return actionVariant === 'primary' ? 'success' : 'ghost';
+        if (theme === 'elegant')
+            return actionVariant === 'primary' ? 'primary' : 'ghost';
+        return actionVariant || 'primary';
+    };
+    // Get text color for theme
+    const getTextColor = () => {
+        if (theme === 'technical')
+            return '#ffffff';
+        return undefined;
+    };
+    const getMessageColor = () => {
+        if (theme === 'technical')
+            return '#999999';
+        return undefined;
+    };
+    const getInfoTextColor = () => {
+        if (theme === 'technical')
+            return '#cccccc';
+        return undefined;
+    };
+    const containerClasses = [
+        'vtx-empty-state',
+        `vtx-empty-state--${theme}`,
+        `vtx-empty-state--${variant}`,
+        !centered && 'vtx-empty-state--left',
+        compact && 'vtx-empty-state--compact',
+        className,
+    ].filter(Boolean).join(' ');
+    const containerStyle = {
+        ...style,
+        ...(backgroundColor && { background: backgroundColor }),
+    };
+    return (jsxs(Flex, { direction: "column", align: centered ? 'center' : 'start', justify: "center", className: containerClasses, style: containerStyle, children: [showIllustration && (jsx("div", { className: "vtx-empty-state__illustration mb-8", role: "img", "aria-label": `Empty state: ${type}`, children: displayIcon })), jsxs(Flex, { direction: "column", className: "vtx-empty-state__content", gap: 0, children: [jsx(Typography, { as: "h2", variant: compact ? 'h4' : 'h3', textColor: getTextColor(), weight: "semibold", className: "mb-4", children: displayTitle }), jsx(Typography, { as: "p", variant: compact ? 'body2' : 'body1', textColor: getMessageColor(), className: "mb-6", children: displayMessage }), actions && actions.length > 0 && (jsx(Flex, { className: "vtx-empty-state__actions mt-2", gap: 12, wrap: "wrap", justify: centered ? 'center' : 'start', children: actions.map((action, index) => {
+                            const icon = getIcon(action.icon);
+                            const buttonVariant = getButtonVariant(action.variant);
+                            const buttonSize = compact ? 'md' : 'lg';
+                            const buttonContent = (jsx(Button, { variant: buttonVariant, size: buttonSize, fullWidth: false, leftIcon: icon, onClick: action.onClick, "aria-label": action.label, children: action.label }));
+                            // Wrap in Link for SEO if href is provided
+                            if (action.href) {
+                                return (jsx(Link, { href: action.href, external: 'external' in action ? action.external : false, noUnderline: true, children: buttonContent }, index));
+                            }
+                            return jsx(React__default.Fragment, { children: buttonContent }, index);
+                        }) })), additionalInfo && (jsx("div", { className: "vtx-empty-state__info mt-8", children: jsx(Typography, { as: "p", variant: "body2", textColor: getInfoTextColor(), noMargin: true, children: additionalInfo }) }))] })] }));
+};
+
+export { EmptyStateWidget as default };
+//# sourceMappingURL=EmptyStateWidget.js.map

package/dist/esm/components/Widget/renderers/components/Widget/renderers/EmptyStateWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateWidget.js","sources":["../../../../../../../../src/components/Widget/renderers/EmptyStateWidget.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","React"],"mappings":"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"}