dees-catalog/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts

import { html, css } from '@design.estate/dees-element';
import type { DeesAppuiBase } from '../dees-appui-base/dees-appui-base.js';
import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js';
import type { ITab } from '../../interfaces/tab.js';
import type { ISelectionOption } from '../../interfaces/selectionoption.js';
import type { IMenuGroup } from '../../interfaces/menugroup.js';
import type { ISecondaryMenuGroup } from '../../interfaces/secondarymenu.js';
import * as plugins from '../../00plugins.js';
import '@design.estate/dees-wcctools/demotools';

export const demoFunc = () => {
  // Menu items for the appbar
  const menuItems: IAppBarMenuItem[] = [
    {
      name: 'File',
      action: async () => {},
      submenu: [
        { name: 'New Project', shortcut: 'Cmd+N', iconName: 'filePlus', action: async () => console.log('New project') },
        { name: 'Open Project...', shortcut: 'Cmd+O', iconName: 'folderOpen', action: async () => console.log('Open project') },
        { name: 'Recent Projects', action: async () => {}, submenu: [
          { name: 'my-app', action: async () => console.log('Open my-app') },
          { name: 'component-lib', action: async () => console.log('Open component-lib') },
          { name: 'api-server', action: async () => console.log('Open api-server') },
        ]},
        { divider: true },
        { name: 'Save All', shortcut: 'Cmd+Shift+S', iconName: 'save', action: async () => console.log('Save all') },
        { divider: true },
        { name: 'Close Project', action: async () => console.log('Close project') },
      ]
    },
    {
      name: 'Edit',
      action: async () => {},
      submenu: [
        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => console.log('Undo') },
        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => console.log('Redo') },
        { divider: true },
        { name: 'Cut', shortcut: 'Cmd+X', iconName: 'scissors', action: async () => console.log('Cut') },
        { name: 'Copy', shortcut: 'Cmd+C', iconName: 'copy', action: async () => console.log('Copy') },
        { name: 'Paste', shortcut: 'Cmd+V', iconName: 'clipboard', action: async () => console.log('Paste') },
      ]
    },
    {
      name: 'View',
      action: async () => {},
      submenu: [
        { name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => console.log('Toggle sidebar') },
        { name: 'Toggle Terminal', shortcut: 'Cmd+J', iconName: 'terminal', action: async () => console.log('Toggle terminal') },
        { divider: true },
        { name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoomIn', action: async () => console.log('Zoom in') },
        { name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoomOut', action: async () => console.log('Zoom out') },
        { name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
      ]
    },
    {
      name: 'Help',
      action: async () => {},
      submenu: [
        { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
        { name: 'Release Notes', iconName: 'fileText', action: async () => console.log('Release notes') },
        { divider: true },
        { name: 'Report Issue', iconName: 'bug', action: async () => console.log('Report issue') },
        { name: 'About', iconName: 'info', action: async () => console.log('About') },
      ]
    }
  ];

  // Main menu groups (left sidebar)
  const mainMenuGroups: IMenuGroup[] = [
    {
      tabs: [
        { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard selected') },
        { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox selected') },
      ]
    },
    {
      name: 'Workspace',
      tabs: [
        { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects selected') },
        { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks selected') },
        { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents selected') },
      ]
    },
    {
      name: 'Analytics',
      tabs: [
        { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports selected') },
        { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights selected') },
      ]
    }
  ];

  // Main menu bottom tabs (pinned to bottom)
  const mainMenuBottomTabs: ITab[] = [
    { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings selected') },
    { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help selected') },
  ];

  // Secondary menu groups (second sidebar with collapsible groups)
  // These showcase the new shadcn-style design with badges and collapsible sections
  const secondaryMenuGroups: ISecondaryMenuGroup[] = [
    {
      name: 'Quick Access',
      iconName: 'lucide:zap',
      items: [
        { key: 'Overview', iconName: 'layoutDashboard', action: () => console.log('Overview selected') },
        { key: 'Recent Activity', iconName: 'clock', action: () => console.log('Recent Activity selected'), badge: 5 },
        { key: 'Favorites', iconName: 'star', action: () => console.log('Favorites selected') },
      ]
    },
    {
      name: 'Resources',
      iconName: 'lucide:layers',
      items: [
        { key: 'Components', iconName: 'package', action: () => console.log('Components selected'), badge: 24 },
        { key: 'Services', iconName: 'server', action: () => console.log('Services selected'), badge: 'new', badgeVariant: 'success' },
        { key: 'APIs', iconName: 'globe', action: () => console.log('APIs selected'), badge: 3, badgeVariant: 'warning' },
        { key: 'Webhooks', iconName: 'webhook', action: () => console.log('Webhooks selected') },
      ]
    },
    {
      name: 'Data Management',
      iconName: 'lucide:database',
      items: [
        { key: 'Database', iconName: 'database', action: () => console.log('Database selected') },
        { key: 'Storage', iconName: 'hardDrive', action: () => console.log('Storage selected'), badge: '85%', badgeVariant: 'warning' },
        { key: 'Backups', iconName: 'archive', action: () => console.log('Backups selected'), badge: 'OK', badgeVariant: 'success' },
      ]
    },
    {
      name: 'System',
      iconName: 'lucide:settings',
      collapsed: true,
      items: [
        { key: 'Configuration', iconName: 'sliders', action: () => console.log('Configuration selected') },
        { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations selected'), badge: 2, badgeVariant: 'error' },
        { key: 'Permissions', iconName: 'shield', action: () => console.log('Permissions selected') },
        { key: 'Logs', iconName: 'fileText', action: () => console.log('Logs selected') },
      ]
    }
  ];

  // Main content tabs
  const mainContentTabs: ITab[] = [
    { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details tab') },
    { key: 'Logs', iconName: 'lucide:list', action: () => console.log('Logs tab') },
    { key: 'Metrics', iconName: 'lucide:lineChart', action: () => console.log('Metrics tab') },
  ];

  // Profile menu items
  const profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [
    { name: 'Profile Settings', iconName: 'user', action: async () => console.log('Profile settings') },
    { name: 'Account', iconName: 'settings', action: async () => console.log('Account settings') },
    { divider: true },
    { name: 'Help & Support', iconName: 'helpCircle', action: async () => console.log('Help') },
    { name: 'Keyboard Shortcuts', iconName: 'keyboard', shortcut: 'Cmd+K', action: async () => console.log('Shortcuts') },
    { divider: true },
    { name: 'Sign Out', iconName: 'logOut', action: async () => console.log('Sign out') }
  ];

  return html`
    <dees-demowrapper>
      <style>
        ${css`
        .demo-container {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          overflow: hidden;
        }
        
      `}
      </style>
      
      <div class="demo-container">
        <dees-appui-base
          .appbarMenuItems=${menuItems}
          .appbarBreadcrumbs=${'Dashboard'}
          .appbarUser=${{
            name: 'Jane Smith',
            email: 'jane.smith@example.com',
            status: 'online' as 'online' | 'offline' | 'busy' | 'away'
          }}
          .appbarProfileMenuItems=${profileMenuItems}
          .appbarShowWindowControls=${true}
          .appbarShowSearch=${true}
          .mainmenuLogoIcon=${'lucide:box'}
          .mainmenuLogoText=${'Acme App'}
          .mainmenuGroups=${mainMenuGroups}
          .mainmenuBottomTabs=${mainMenuBottomTabs}
          .secondarymenuHeading=${'Dashboard'}
          .secondarymenuGroups=${secondaryMenuGroups}
          .maincontentTabs=${mainContentTabs}
          @appbar-menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail)}
          @appbar-breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb:', e.detail)}
          @appbar-search-click=${() => console.log('Search clicked')}
          @appbar-user-menu-open=${() => console.log('User menu opened')}
          @appbar-profile-menu-select=${(e: CustomEvent) => console.log('Profile menu selected:', e.detail)}
          @mainmenu-tab-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
          @secondarymenu-item-select=${(e: CustomEvent) => console.log('Item selected:', e.detail)}
        >
          <div slot="maincontent" style="padding: 40px; color: #a3a3a3; font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;">
            <h1 style="color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px;">Welcome to Acme App</h1>
            <p style="color: #737373; margin-bottom: 32px;">This demo showcases the AppUI component system with the new SecondaryMenu.</p>

            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px;">
              <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
                <h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">SecondaryMenu Features</h3>
                <ul style="margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8;">
                  <li>Collapsible groups with smooth animations</li>
                  <li>Badge support (counts, status, variants)</li>
                  <li>Dynamic heading from MainMenu selection</li>
                  <li>shadcn-inspired modern design</li>
                </ul>
              </div>
              <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
                <h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">Badge Variants</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px;">
                  <span style="background: #27272a; color: #a1a1aa; padding: 2px 8px; border-radius: 9px;">default</span>
                  <span style="background: #14532d; color: #4ade80; padding: 2px 8px; border-radius: 9px;">success</span>
                  <span style="background: #451a03; color: #fbbf24; padding: 2px 8px; border-radius: 9px;">warning</span>
                  <span style="background: #450a0a; color: #f87171; padding: 2px 8px; border-radius: 9px;">error</span>
                </div>
              </div>
            </div>

            <p style="font-size: 13px; color: #525252;">
              Try clicking items in the MainMenu (left) - the SecondaryMenu heading updates automatically.
              Click group headers in the SecondaryMenu to collapse/expand sections.
            </p>
          </div>
        </dees-appui-base>
      </div>
    </dees-demowrapper>
  `;
};