ezfw-core 1.0.0

package/template/doc/sidebar/item/EzDocsComponentItem.js

@@ -0,0 +1,24 @@
+ez.define('EzDocsComponentItem', {
+    template(props) {
+        return {
+            eztype: 'li',
+            bind: {
+                cls: () => {
+                    const ctrl = ez.getControllerSync('EzDocs');
+                    const selected = ctrl.state.selectedComponent;
+                    return selected === props.name
+                        ? 'ez-docs-component-item active'
+                        : 'ez-docs-component-item';
+                }
+            },
+            onClick: () => ez.go(`/admin/docs/${props.name}`),
+            items: [
+                {
+                    eztype: 'EzLabel',
+                    cls: 'ez-docs-component-name',
+                    text: props.name
+                }
+            ]
+        };
+    }
+});

package/template/doc/viewer/EzDocsViewer.js

@@ -0,0 +1,18 @@
+ez.define('EzDocsViewer', {
+    template(props) {
+        const componentName = props.routeParams?.component;
+        const ctrl = ez.getControllerSync('EzDocs');
+        const info = ctrl.getComponentInfo(componentName);
+
+        ctrl.state.selectedVariant = null;
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-viewer',
+            items: [
+                { eztype: 'EzDocsViewerHeader', props: { componentName, info } },
+                { eztype: `${componentName}Doc` }
+            ]
+        };
+    }
+});

package/template/doc/viewer/codepanel/EzDocsCodePanel.js

@@ -0,0 +1,51 @@
+ez.define('EzDocsCodePanel', {
+    template() {
+        const ctrl = ez.getControllerSync('EzDocs');
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-code-panel',
+            items: [
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-code-panel-header',
+                    items: [
+                        { eztype: 'i', cls: ['fa-solid', 'fa-code'] },
+                        { eztype: 'EzLabel', text: 'Code', flex: 1 },
+                        {
+                            eztype: 'EzButton',
+                            cls: 'ez-docs-copy-btn',
+                            icon: 'fa-solid fa-copy',
+                            variant: 'ghost',
+                            size: 'sm',
+                            bind: {
+                                visible: () => !!ctrl.state.selectedVariant
+                            },
+                            onClick: () => {
+                                const variant = ctrl.state.selectedVariant;
+                                if (variant) {
+                                    const code = ctrl.formatCode(variant.config);
+                                    navigator.clipboard.writeText(code);
+                                    ez.toast?.('Copied to clipboard', { variant: 'success' });
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-code-panel-content',
+                    bind: {
+                        html: () => {
+                            const variant = ctrl.state.selectedVariant;
+                            if (!variant) {
+                                return '<div class="ez-docs-code-placeholder">Click a component to see its code</div>';
+                            }
+                            return `<pre>${ctrl.formatCode(variant.config)}</pre>`;
+                        }
+                    }
+                }
+            ]
+        };
+    }
+});

package/template/doc/viewer/content/EzDocsContent.js

@@ -0,0 +1,315 @@
+ez.define('EzDocsContent', {
+    template(props) {
+        const { componentName, docs, info } = props || {};
+
+        if (!docs) {
+            return buildGenericDocumentation(componentName, info);
+        }
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-viewer-body',
+            items: buildRichDocumentation(componentName, docs)
+        };
+    }
+});
+
+function buildRichDocumentation(componentName, docs) {
+    const sections = [];
+
+    if (docs.features?.length) {
+        sections.push({
+            eztype: 'EzComponent',
+            cls: 'ez-docs-section',
+            items: [
+                { eztype: 'EzLabel', cls: 'ez-docs-section-title', text: 'Features' },
+                {
+                    eztype: 'ul',
+                    cls: 'ez-docs-feature-list',
+                    items: docs.features.map(feature => ({
+                        eztype: 'li',
+                        text: feature
+                    }))
+                }
+            ]
+        });
+    }
+
+    if (docs.usage) {
+        if (typeof docs.usage === 'object' && docs.usage.config) {
+            sections.push(buildUsageSection('Basic Usage', docs.usage));
+        } else {
+            sections.push(buildCodeSection('Basic Usage', docs.usage));
+        }
+    }
+
+    if (docs.gridSections?.length) {
+        for (const gridSection of docs.gridSections) {
+            sections.push(buildGridSection(gridSection));
+        }
+    }
+
+    if (docs.gridUsage) {
+        sections.push(buildCodeSection('Usage with EzGrid', docs.gridUsage));
+    }
+
+    if (docs.validationExample) {
+        sections.push(buildCodeSection('Validation', docs.validationExample));
+    }
+
+    if (docs.routingExample) {
+        sections.push(buildCodeSection('Routing Integration', docs.routingExample));
+    }
+
+    if (docs.middlewareExample) {
+        sections.push(buildCodeSection('Middleware', docs.middlewareExample));
+    }
+
+    if (docs.guardsExample) {
+        sections.push(buildCodeSection('Route Guards', docs.guardsExample));
+    }
+
+    if (docs.cssModuleExample) {
+        sections.push(buildCodeSection('File Naming & Output', docs.cssModuleExample));
+    }
+
+    if (docs.migrationGuide) {
+        sections.push(buildCodeSection('Migration Guide', docs.migrationGuide));
+    }
+
+    if (docs.api?.length) {
+        sections.push(buildApiTable('API Reference', docs.api, 'method', 'description'));
+    }
+
+    if (docs.types?.length) {
+        sections.push(buildTypesTable(docs.types));
+    }
+
+    if (docs.events?.length) {
+        sections.push(buildApiTable('Events', docs.events, 'event', 'description'));
+    }
+
+    if (docs.defaultMessages?.length) {
+        sections.push(buildApiTable('Default Error Messages', docs.defaultMessages, 'validator', 'message'));
+    }
+
+    return sections;
+}
+
+function buildCodeSection(title, code) {
+    return {
+        eztype: 'EzComponent',
+        cls: 'ez-docs-section',
+        items: [
+            { eztype: 'EzLabel', cls: 'ez-docs-section-title', text: title },
+            {
+                eztype: 'EzComponent',
+                cls: 'ez-docs-code-block',
+                items: [{ eztype: 'pre', text: code }]
+            }
+        ]
+    };
+}
+
+function buildUsageSection(title, usage) {
+    const { config, code } = usage;
+    const codeText = code || formatGridConfig(config);
+
+    return {
+        eztype: 'EzComponent',
+        cls: 'ez-docs-section',
+        items: [
+            { eztype: 'EzLabel', cls: 'ez-docs-section-title', text: title },
+            {
+                eztype: 'EzTabPanel',
+                variant: 'compact',
+                tabs: [
+                    {
+                        id: 'preview',
+                        title: 'Preview',
+                        icon: 'fa-solid fa-eye',
+                        items: [
+                            {
+                                eztype: 'EzComponent',
+                                cls: 'ez-docs-usage-preview',
+                                style: { padding: '16px' },
+                                items: [config]
+                            }
+                        ]
+                    },
+                    {
+                        id: 'code',
+                        title: 'Code',
+                        icon: 'fa-solid fa-code',
+                        items: [
+                            {
+                                eztype: 'EzComponent',
+                                cls: 'ez-docs-code-block',
+                                style: { margin: 0, borderRadius: 0 },
+                                items: [{ eztype: 'pre', text: codeText }]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    };
+}
+
+function buildGridSection(gridSection) {
+    return {
+        eztype: 'EzComponent',
+        cls: 'ez-docs-section ez-docs-grid-section',
+        items: [
+            { eztype: 'EzLabel', cls: 'ez-docs-section-title', text: gridSection.title },
+            {
+                eztype: 'EzTabPanel',
+                variant: 'compact',
+                tabs: [
+                    {
+                        id: 'preview',
+                        title: 'Preview',
+                        icon: 'fa-solid fa-eye',
+                        items: [
+                            {
+                                eztype: 'EzComponent',
+                                cls: 'ez-docs-grid-preview',
+                                style: { padding: '16px' },
+                                items: [gridSection.config]
+                            }
+                        ]
+                    },
+                    {
+                        id: 'code',
+                        title: 'Code',
+                        icon: 'fa-solid fa-code',
+                        items: [
+                            {
+                                eztype: 'EzComponent',
+                                cls: 'ez-docs-code-block',
+                                style: { margin: 0, borderRadius: 0 },
+                                items: [{
+                                    eztype: 'pre',
+                                    text: formatGridConfig(gridSection.config)
+                                }]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    };
+}
+
+function buildApiTable(title, items, keyField, valueField) {
+    return {
+        eztype: 'EzComponent',
+        cls: 'ez-docs-section',
+        items: [
+            { eztype: 'EzLabel', cls: 'ez-docs-section-title', text: title },
+            {
+                eztype: 'EzComponent',
+                cls: 'ez-docs-api-table',
+                items: [
+                    {
+                        eztype: 'EzComponent',
+                        cls: 'ez-docs-api-row ez-docs-api-header',
+                        items: [
+                            { eztype: 'EzLabel', cls: 'ez-docs-api-method', text: keyField.charAt(0).toUpperCase() + keyField.slice(1) },
+                            { eztype: 'EzLabel', cls: 'ez-docs-api-desc', text: 'Description' }
+                        ]
+                    },
+                    ...items.map(item => ({
+                        eztype: 'EzComponent',
+                        cls: 'ez-docs-api-row',
+                        items: [
+                            { eztype: 'code', cls: 'ez-docs-api-method', text: item[keyField] },
+                            { eztype: 'EzLabel', cls: 'ez-docs-api-desc', text: item[valueField] }
+                        ]
+                    }))
+                ]
+            }
+        ]
+    };
+}
+
+function buildTypesTable(types) {
+    return {
+        eztype: 'EzComponent',
+        cls: 'ez-docs-section',
+        items: [
+            { eztype: 'EzLabel', cls: 'ez-docs-section-title', text: 'Supported Types' },
+            {
+                eztype: 'EzComponent',
+                cls: 'ez-docs-api-table',
+                items: [
+                    {
+                        eztype: 'EzComponent',
+                        cls: 'ez-docs-api-row ez-docs-api-header',
+                        items: [
+                            { eztype: 'EzLabel', cls: 'ez-docs-type-name', text: 'Type' },
+                            { eztype: 'EzLabel', cls: 'ez-docs-type-coercion', text: 'Coercion' },
+                            { eztype: 'EzLabel', cls: 'ez-docs-type-example', text: 'Example' }
+                        ]
+                    },
+                    ...types.map(item => ({
+                        eztype: 'EzComponent',
+                        cls: 'ez-docs-api-row',
+                        items: [
+                            { eztype: 'code', cls: 'ez-docs-type-name', text: item.type },
+                            { eztype: 'code', cls: 'ez-docs-type-coercion', text: item.coercion },
+                            { eztype: 'EzLabel', cls: 'ez-docs-type-example', text: item.example }
+                        ]
+                    }))
+                ]
+            }
+        ]
+    };
+}
+
+function buildGenericDocumentation(componentName, info) {
+    return {
+        eztype: 'EzComponent',
+        cls: 'ez-docs-viewer-body',
+        items: [
+            {
+                eztype: 'EzComponent',
+                cls: 'ez-docs-section',
+                items: [
+                    { eztype: 'EzLabel', cls: 'ez-docs-section-title', text: 'Overview' },
+                    {
+                        eztype: 'EzLabel',
+                        cls: 'ez-docs-section-content',
+                        text: `Documentation for ${componentName} will be displayed here. This component is part of the ${info?.category || 'Ez'} category.`
+                    }
+                ]
+            },
+            {
+                eztype: 'EzComponent',
+                cls: 'ez-docs-section',
+                items: [
+                    { eztype: 'EzLabel', cls: 'ez-docs-section-title', text: 'Basic Usage' },
+                    {
+                        eztype: 'EzComponent',
+                        cls: 'ez-docs-code-block',
+                        items: [
+                            {
+                                eztype: 'pre',
+                                text: `{
+    eztype: '${componentName}',
+    // ... props
+}`
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    };
+}
+
+function formatGridConfig(config) {
+    return JSON.stringify(config, null, 4)
+        .replace(/"([^"]+)":/g, '$1:')
+        .replace(/"/g, "'");
+}

package/template/doc/viewer/header/EzDocsViewerHeader.js

@@ -0,0 +1,46 @@
+ez.define('EzDocsViewerHeader', {
+    template(props) {
+        const { componentName, info } = props || {};
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-viewer-header',
+            items: [
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-viewer-breadcrumb',
+                    items: [
+                        {
+                            eztype: 'EzLabel',
+                            cls: 'ez-docs-breadcrumb-link',
+                            text: 'Docs',
+                            onClick: () => ez.go('/admin/docs')
+                        },
+                        { eztype: 'EzLabel', text: ' / ' },
+                        {
+                            eztype: 'EzLabel',
+                            cls: 'ez-docs-breadcrumb-category',
+                            text: info?.category || 'Component'
+                        },
+                        { eztype: 'EzLabel', text: ' / ' },
+                        {
+                            eztype: 'EzLabel',
+                            cls: 'ez-docs-breadcrumb-current',
+                            text: componentName
+                        }
+                    ]
+                },
+                {
+                    eztype: 'EzLabel',
+                    cls: 'ez-docs-viewer-title',
+                    text: componentName
+                },
+                {
+                    eztype: 'EzLabel',
+                    cls: 'ez-docs-viewer-description',
+                    text: info?.description || 'No description available'
+                }
+            ]
+        };
+    }
+});

package/template/doc/viewer/showcase/EzDocsShowcase.js

@@ -0,0 +1,59 @@
+ez.define('EzDocsShowcase', {
+    controller: 'EzDocs',
+    template(props) {
+        const { docs } = props || {};
+        const ctrl = ez.getControllerSync('EzDocs');
+        const sections = docs?.sections || [];
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-showcase-container',
+            layout: 'hbox',
+            items: [
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-showcase-panel',
+                    flex: 1,
+                    items: sections.map(section => ({
+                        eztype: 'EzDocsShowcaseSection',
+                        props: { section }
+                    }))
+                },
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-code-panel',
+                    items: [
+                        {
+                            eztype: 'EzComponent',
+                            cls: 'ez-docs-code-panel-header',
+                            items: [
+                                { eztype: 'i', cls: ['fa-solid', 'fa-code'] },
+                                { eztype: 'EzLabel', text: 'Code' }
+                            ]
+                        },
+                        {
+                            eztype: 'EzComponent',
+                            cls: 'ez-docs-code-panel-content',
+                            bind: {
+                                html: () => {
+                                    const variant = ctrl.state.selectedVariant;
+                                    if (!variant) {
+                                        return '<div class="ez-docs-code-placeholder">Click a component to see its code</div>';
+                                    }
+                                    const code = ctrl.formatCode(variant.config);
+                                    return `<pre>${escapeHtml(code)}</pre>`;
+                                }
+                            }
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+});
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}

package/template/doc/viewer/showcase/EzDocsShowcaseSection.js

@@ -0,0 +1,25 @@
+ez.define('EzDocsShowcaseSection', {
+    template(props) {
+        const { section } = props || {};
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-showcase-section',
+            items: [
+                {
+                    eztype: 'EzLabel',
+                    cls: 'ez-docs-showcase-section-title',
+                    text: section.title
+                },
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-showcase-variants',
+                    items: section.variants.map(variant => ({
+                        eztype: 'EzDocsVariantItem',
+                        props: { variant }
+                    }))
+                }
+            ]
+        };
+    }
+});

package/template/doc/viewer/showcase/EzDocsVariantItem.js

@@ -0,0 +1,29 @@
+ez.define('EzDocsVariantItem', {
+    controller: 'EzDocs',
+    template(props) {
+        const { variant } = props || {};
+        const ctrl = ez.getControllerSync('EzDocs');
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-variant-wrapper',
+            bind: {
+                cls: () => {
+                    const isSelected = ctrl.state.selectedVariant === variant;
+                    return isSelected
+                        ? 'ez-docs-variant-wrapper selected'
+                        : 'ez-docs-variant-wrapper';
+                }
+            },
+            onClick: () => ctrl.selectVariant(variant),
+            items: [
+                variant.config,
+                {
+                    eztype: 'EzLabel',
+                    cls: 'ez-docs-variant-label',
+                    text: variant.label
+                }
+            ]
+        };
+    }
+});

package/template/doc/welcome/EzDocsWelcome.js

@@ -0,0 +1,48 @@
+ez.define('EzDocsWelcome', {
+    template() {
+        const ctrl = ez.getControllerSync('EzDocsController');
+        const categories = ctrl?.state?.categories || [];
+
+        return {
+            eztype: 'EzComponent',
+            cls: 'ez-docs-welcome',
+            items: [
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-welcome-header',
+                    items: [
+                        { eztype: 'i', cls: 'fa-solid fa-book-open ez-docs-welcome-icon' },
+                        { eztype: 'EzLabel', cls: 'ez-docs-welcome-title', text: 'Ez Framework' },
+                        { eztype: 'EzLabel', cls: 'ez-docs-welcome-subtitle', text: 'Component Library Documentation' }
+                    ]
+                },
+                {
+                    eztype: 'EzComponent',
+                    cls: 'ez-docs-categories-grid',
+                    items: categories.map(category => ({
+                        eztype: 'EzPanel',
+                        icon: `fa-solid ${category.icon}`,
+                        title: category.name,
+                        badge: `${category.components.length}`,
+                        noPadding: true,
+                        items: [
+                            {
+                                eztype: 'EzComponent',
+                                cls: 'ez-docs-category-items',
+                                items: category.components.map(comp => ({
+                                    eztype: 'EzComponent',
+                                    cls: 'ez-docs-category-item',
+                                    onClick: () => ez.go(`/admin/docs/${comp.name}`),
+                                    items: [
+                                        { eztype: 'EzLabel', cls: 'ez-docs-category-item-name', text: comp.name },
+                                        { eztype: 'EzLabel', cls: 'ez-docs-category-item-desc', text: comp.description }
+                                    ]
+                                }))
+                            }
+                        ]
+                    }))
+                }
+            ]
+        };
+    }
+});