voa-ds-core 1.0.3

package/dist/collection/components/SaasDashboard/SaasDashboard.stories.js

@@ -0,0 +1,693 @@
+import { html } from "lit-html";
+import "../../Stories/styles/voa-button.external.css";
+import "../../Stories/styles/voa-input.external.css";
+import "../../Stories/styles/voa-avatar.external.css";
+import "../../Stories/styles/voa-badge.external.css";
+import "../../Stories/styles/voa-pagination.external.css";
+import "../../Stories/styles/voa-tag.external.css";
+import "../../Stories/styles/voa-breadcrumbs.external.css";
+import "../../Stories/styles/voa-switch.external.css";
+import "../../Stories/styles/voa-tooltip.external.css";
+// Import icons
+import dashboardIcon from "../../icons/circle.svg";
+import analyticsIcon from "../../icons/arrow.svg";
+import customersIcon from "../../icons/person.svg";
+import productsIcon from "../../icons/info.svg";
+import settingsIcon from "../../icons/settings.svg";
+import bellIcon from "../../icons/bell.svg";
+import exportIcon from "../../icons/arrow.svg";
+export default {
+    title: 'Exemplos/SaaS Dashboard',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+const Template = () => html `
+  <style>
+    /* Layout Styles */
+    .dashboard-container {
+      display: grid;
+      grid-template-columns: 250px 1fr;
+      grid-template-rows: 60px 1fr;
+      height: 100vh;
+      font-family: var(--font-family-sans, 'Inter', sans-serif);
+      background-color: var(--structure-colors-bg-container, #f9fafb);
+      color: var(--text-primary, #111827);
+    }
+
+    .sidebar {
+      grid-row: 1 / -1;
+      background-color: var(--structure-colors-bg-base, #ffffff);
+      border-right: 1px solid var(--structure-colors-border-color, #e5e7eb);
+      padding: var(--spacing-spacing-lg, 24px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-spacing-lg, 24px);
+    }
+
+    .logo {
+      font-size: 20px;
+      font-weight: var(--typography-font-weight-bold, 700);
+      color: var(--text-primary, #111827);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-spacing-rg, 12px);
+      padding-bottom: var(--spacing-spacing-rg, 12px);
+    }
+
+    .nav-menu {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-spacing-sm, 8px);
+    }
+
+    .header {
+      background-color: var(--structure-colors-bg-base, #ffffff);
+      border-bottom: 1px solid var(--structure-colors-border-color, #e5e7eb);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--spacing-spacing-xl, 32px);
+    }
+
+    .header-left {
+      width: 320px;
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-spacing-lg, 24px);
+    }
+
+    .user-profile {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-spacing-rg, 12px);
+      cursor: pointer;
+    }
+
+    .main-content {
+      padding: var(--spacing-spacing-xl, 32px);
+      overflow-y: auto;
+    }
+
+    .page-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: var(--spacing-spacing-xl, 32px);
+    }
+
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: var(--spacing-spacing-lg, 24px);
+      margin-bottom: var(--spacing-spacing-xl, 32px);
+    }
+
+    .stat-card {
+      background: var(--structure-colors-bg-base, white);
+      padding: var(--spacing-spacing-lg, 24px);
+      border-radius: var(--radius-lg, 12px);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      border: 1px solid var(--structure-colors-border-color, #e5e7eb);
+    }
+
+    .stat-title {
+      color: var(--text-secondary, #6b7280);
+      font-size: 14px;
+      font-weight: var(--typography-font-weight-medium, 500);
+      margin-bottom: var(--spacing-spacing-sm, 8px);
+    }
+
+    .stat-value {
+      font-size: 30px;
+      font-weight: var(--typography-font-weight-bold, 700);
+      color: var(--text-primary, #111827);
+      margin-bottom: var(--spacing-spacing-xs, 4px);
+    }
+
+    .stat-change {
+      font-size: 13px;
+      font-weight: var(--typography-font-weight-medium, 500);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-spacing-xs, 4px);
+    }
+    .stat-change.positive { color: var(--semantic-colors-success, #059669); }
+    .stat-change.negative { color: var(--semantic-colors-danger, #dc2626); }
+
+    .content-section {
+      background: var(--structure-colors-bg-base, white);
+      border-radius: var(--radius-lg, 12px);
+      border: 1px solid var(--structure-colors-border-color, #e5e7eb);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      overflow: hidden;
+    }
+
+    .section-header {
+      padding: 20px var(--spacing-spacing-lg, 24px);
+      border-bottom: 1px solid var(--structure-colors-border-color, #e5e7eb);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .table-container {
+      overflow-x: auto;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 14px;
+    }
+    
+    th {
+      text-align: left;
+      padding: var(--spacing-spacing-rg, 12px) var(--spacing-spacing-lg, 24px);
+      background-color: var(--structure-colors-bg-container, #f9fafb);
+      color: var(--text-secondary, #6b7280);
+      font-weight: var(--typography-font-weight-medium, 500);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid var(--structure-colors-border-color, #e5e7eb);
+    }
+
+    td {
+      padding: var(--spacing-spacing-md, 16px) var(--spacing-spacing-lg, 24px);
+      border-bottom: 1px solid var(--structure-colors-border-color, #e5e7eb);
+      color: var(--text-secondary, #374151);
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+
+    .user-cell {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-spacing-rg, 12px);
+    }
+
+    .pagination-container {
+      padding: var(--spacing-spacing-md, 16px) var(--spacing-spacing-lg, 24px);
+      border-top: 1px solid var(--structure-colors-border-color, #e5e7eb);
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    /* Extracted Inline Styles */
+    .logo-icon {
+      width: 32px;
+      height: 32px;
+      background: var(--brand-base, #2563eb);
+      border-radius: var(--radius-sm, 8px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    }
+
+    .sidebar-footer {
+      margin-top: auto;
+    }
+
+    .pro-plan-card {
+      background: var(--brand-light, #eff6ff);
+      padding: var(--spacing-spacing-md, 16px);
+      border-radius: var(--radius-sm, 8px);
+      border: 1px solid var(--brand-light-hover, #dbeafe);
+    }
+
+    .pro-plan-title {
+      font-size: 14px;
+      margin: 0 0 var(--spacing-spacing-sm, 8px) 0;
+      font-weight: var(--typography-font-weight-semibold, 600);
+      color: var(--brand-dark, #1e40af);
+    }
+
+    .pro-plan-text {
+      font-size: 12px;
+      margin: 0 0 var(--spacing-spacing-rg, 12px) 0;
+      color: #60a5fa; /* Keep specific color or find token */
+    }
+
+    .pro-plan-progress-track {
+      height: 6px;
+      background: #bfdbfe;
+      border-radius: 3px;
+      margin-bottom: var(--spacing-spacing-rg, 12px);
+      overflow: hidden;
+    }
+
+    .pro-plan-progress-bar {
+      width: 80%;
+      height: 100%;
+      background: var(--brand-base, #2563eb);
+    }
+
+    .notification-btn {
+      position: relative;
+    }
+
+    .notification-icon {
+      font-size: 20px;
+    }
+
+    .notification-badge {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 8px;
+      height: 8px;
+      background: var(--semantic-colors-danger, #ef4444);
+      border-radius: 50%;
+      border: 2px solid white;
+    }
+
+    .user-info {
+      text-align: right;
+    }
+
+    .user-name {
+      font-size: 14px;
+      font-weight: var(--typography-font-weight-semibold, 600);
+      color: var(--text-primary, #111827);
+    }
+
+    .user-role {
+      font-size: 12px;
+      color: var(--text-secondary, #6b7280);
+    }
+
+    .page-title {
+      margin: 0;
+      font-size: 24px;
+      font-weight: var(--typography-font-weight-bold, 700);
+      color: var(--text-primary, #111827);
+    }
+
+    .page-subtitle {
+      margin: var(--spacing-spacing-xs, 4px) 0 0;
+      color: var(--text-secondary, #6b7280);
+    }
+
+    .page-actions {
+      display: flex;
+      gap: var(--spacing-spacing-rg, 12px);
+    }
+
+    .section-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: var(--typography-font-weight-semibold, 600);
+      color: var(--text-primary, #111827);
+    }
+
+    .section-actions {
+      display: flex;
+      gap: var(--spacing-spacing-rg, 12px);
+      align-items: center;
+    }
+
+    .search-input-wrapper {
+      width: 200px;
+    }
+
+    .table-user-name {
+      font-weight: var(--typography-font-weight-medium, 500);
+      color: var(--text-primary, #111827);
+    }
+
+    .table-user-email {
+      font-size: 12px;
+      color: var(--text-secondary, #6b7280);
+    }
+
+    .table-amount {
+      font-weight: var(--typography-font-weight-medium, 500);
+    }
+
+    /* Component Overrides / Styles */
+    
+    /* Dark Mode Overrides */
+    .dashboard-container.dark-mode {
+      --structure-colors-bg-container: #111827;
+      --structure-colors-bg-base: #1f2937;
+      --structure-colors-border-color: #374151;
+      --text-primary: #f9fafb;
+      --text-secondary: #9ca3af;
+      --brand-light: #1e3a8a;
+      --brand-light-hover: #1e40af;
+      --brand-dark: #bfdbfe;
+    }
+
+    .dashboard-container.dark-mode .logo-icon {
+      color: white;
+    }
+
+    .dashboard-container.dark-mode .nav-btn::part(base):hover {
+      background-color: #374151;
+      color: #f3f4f6;
+    }
+
+    .dashboard-container.dark-mode .nav-btn.active::part(base) {
+      background-color: #1e3a8a;
+      color: #60a5fa;
+    }
+
+    .dashboard-container.dark-mode .stat-card,
+    .dashboard-container.dark-mode .content-section {
+      background-color: #1f2937;
+      border-color: #374151;
+    }
+
+    .dashboard-container.dark-mode th {
+      background-color: #111827;
+      color: #9ca3af;
+      border-color: #374151;
+    }
+
+    .dashboard-container.dark-mode td {
+      border-color: #374151;
+      color: #d1d5db;
+    }
+
+    .dashboard-container.dark-mode .table-user-name {
+      color: #f9fafb;
+    }
+
+    .dashboard-container.dark-mode .table-user-email {
+      color: #9ca3af;
+    }
+
+    .dashboard-container.dark-mode voa-input::part(container) {
+      background-color: #1f2937;
+      border-color: #374151;
+      color: #f9fafb;
+    }
+
+    .dashboard-container.dark-mode voa-input::part(input) {
+      color: #f9fafb;
+    }
+
+    .dashboard-container.dark-mode voa-button[variant="secondary"]::part(base) {
+      background-color: #1f2937;
+      border-color: #374151;
+      color: #e5e7eb;
+    }
+
+    .dashboard-container.dark-mode voa-button[variant="secondary"]::part(base):hover {
+      background-color: #374151;
+    }
+
+    /* Sidebar Buttons - Specific to Dashboard Layout */
+    .nav-btn {
+      width: 100%;
+    }
+    .nav-btn::part(base) {
+      justify-content: flex-start;
+      color: var(--text-secondary, #4b5563);
+      padding: 10px var(--spacing-spacing-rg, 12px);
+      width: 100%;
+    }
+    .nav-btn::part(base):hover {
+      background-color: var(--structure-colors-bg-container, #f3f4f6);
+      color: var(--text-primary, #111827);
+    }
+    .nav-btn.active::part(base) {
+      background-color: var(--brand-light, #eff6ff);
+      color: var(--brand-base, #2563eb);
+    }
+
+    /* Tag Status Colors - Specific to Dashboard Content */
+    .tag-success::part(base) {
+      background-color: var(--semantic-colors-success-light, #dcfce7);
+      color: var(--semantic-colors-success-dark, #166534);
+      border-color: transparent;
+    }
+    .tag-warning::part(base) {
+      background-color: var(--semantic-colors-warning-light, #fef9c3);
+      color: var(--semantic-colors-warning-dark, #854d0e);
+      border-color: transparent;
+    }
+    .tag-error::part(base) {
+      background-color: var(--semantic-colors-danger-light, #fee2e2);
+      color: var(--semantic-colors-danger-dark, #991b1b);
+      border-color: transparent;
+    }
+    
+    /* Avatar Customization for Table */
+    .user-cell voa-avatar::part(base) {
+      font-size: 12px;
+    }
+  </style>
+
+  <div class="dashboard-container">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <div class="logo">
+        <div class="logo-icon">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        </div>
+        <span>VOA SaaS</span>
+      </div>
+      
+      <nav class="nav-menu">
+        <voa-button class="nav-btn active" variant="tonal" full-width>
+          <span slot="icon-leading"><img src="${dashboardIcon}" alt="dashboard" width="18" height="18" style="filter: grayscale(100%); opacity: 0.7;" /></span> Dashboard
+        </voa-button>
+        <voa-button class="nav-btn" variant="tonal" full-width>
+          <span slot="icon-leading"><img src="${analyticsIcon}" alt="analytics" width="18" height="18" style="filter: grayscale(100%); opacity: 0.7;" /></span> Analytics
+        </voa-button>
+        <voa-button class="nav-btn" variant="tonal" full-width>
+          <span slot="icon-leading"><img src="${customersIcon}" alt="customers" width="18" height="18" style="filter: grayscale(100%); opacity: 0.7;" /></span> Customers
+        </voa-button>
+        <voa-button class="nav-btn" variant="tonal" full-width>
+          <span slot="icon-leading"><img src="${productsIcon}" alt="products" width="18" height="18" style="filter: grayscale(100%); opacity: 0.7;" /></span> Products
+        </voa-button>
+        <voa-button class="nav-btn" variant="tonal" full-width>
+          <span slot="icon-leading"><img src="${settingsIcon}" alt="settings" width="18" height="18" style="filter: grayscale(100%); opacity: 0.7;" /></span> Settings
+        </voa-button>
+      </nav>
+
+      <div class="sidebar-footer">
+        <div style="margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between;">
+          <span style="font-size: 14px; font-weight: 500; color: var(--text-secondary, #6b7280);">Dark Mode</span>
+          <voa-switch id="theme-toggle"></voa-switch>
+        </div>
+        <div class="pro-plan-card">
+          <p class="pro-plan-title">Pro Plan</p>
+          <voa-tooltip 
+            text="You have used 800GB of your 1TB storage limit" 
+            position="top"
+            theme="default"
+          >
+            <p class="pro-plan-text" style="cursor: help;">80% of storage used</p>
+          </voa-tooltip>
+          <div class="pro-plan-progress-track">
+            <div class="pro-plan-progress-bar"></div>
+          </div>
+          <voa-button size="sm" variant="secondary" full-width>Upgrade</voa-button>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Header -->
+    <header class="header">
+      <div class="header-left">
+        <voa-input placeholder="Search anything..." icon-leading="search"></voa-input>
+      </div>
+      <div class="header-right">
+        <voa-button variant="link" size="sm" class="notification-btn">
+          <span class="notification-icon"><img src="${bellIcon}" alt="notifications" width="20" height="20" style="filter: grayscale(100%); opacity: 0.7;" /></span>
+          <span class="notification-badge"></span>
+        </voa-button>
+        
+        <div class="user-profile">
+          <div class="user-info">
+            <div class="user-name">Jane Doe</div>
+            <div class="user-role">Administrator</div>
+          </div>
+          <voa-avatar size="md" initials="JD"></voa-avatar>
+        </div>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <div style="margin-bottom: 24px;">
+        <voa-breadcrumbs>
+          <voa-breadcrumbs-item href="#">Home</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item href="#">Dashboard</voa-breadcrumbs-item>
+          <voa-breadcrumbs-item active>Overview</voa-breadcrumbs-item>
+        </voa-breadcrumbs>
+      </div>
+
+      <div class="page-header">
+        <div>
+          <h1 class="page-title">Dashboard Overview</h1>
+          <p class="page-subtitle">Welcome back! Here's what's happening with your store today.</p>
+        </div>
+        <div class="page-actions">
+          <voa-button variant="secondary">
+            <span slot="icon-leading"><img src="${exportIcon}" alt="export" width="18" height="18" style="filter: grayscale(100%); opacity: 0.7;" /></span> Export
+          </voa-button>
+          <voa-button variant="primary">
+            <span slot="icon-leading">➕</span> New Report
+          </voa-button>
+        </div>
+      </div>
+
+      <!-- Stats -->
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-title">Total Revenue</div>
+          <div class="stat-value">$54,239</div>
+          <div class="stat-change positive">
+            <span>↑ 12%</span>
+            <span style="color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 4px;">from last month</span>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">Active Users</div>
+          <div class="stat-value">1,234</div>
+          <div class="stat-change positive">
+            <span>↑ 5%</span>
+            <span style="color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 4px;">from last month</span>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">Bounce Rate</div>
+          <div class="stat-value">42.3%</div>
+          <div class="stat-change negative">
+            <span>↓ 2%</span>
+            <span style="color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 4px;">from last month</span>
+          </div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-title">New Signups</div>
+          <div class="stat-value">342</div>
+          <div class="stat-change positive">
+            <span>↑ 18%</span>
+            <span style="color: var(--text-secondary, #6b7280); font-weight: 400; margin-left: 4px;">from last month</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Recent Orders Table -->
+      <div class="content-section">
+        <div class="section-header">
+          <h2 class="section-title">Recent Transactions</h2>
+          <div class="section-actions">
+             <div class="search-input-wrapper">
+               <voa-input placeholder="Filter transactions..." size="sm"></voa-input>
+             </div>
+             <voa-button variant="secondary" size="sm">Filter</voa-button>
+          </div>
+        </div>
+
+        <div class="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Customer</th>
+                <th>Date</th>
+                <th>Amount</th>
+                <th>Status</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <div class="user-cell">
+                    <voa-avatar size="sm" initials="JD" style="--voa-avatar-bg: #dbeafe; --voa-avatar-color: #1e40af;"></voa-avatar>
+                    <div>
+                      <div class="table-user-name">John Doe</div>
+                      <div class="table-user-email">john@example.com</div>
+                    </div>
+                  </div>
+                </td>
+                <td>Oct 24, 2023</td>
+                <td class="table-amount">$120.00</td>
+                <td><voa-tag class="tag-success" label="Completed" size="sm"></voa-tag></td>
+                <td><voa-button variant="ghost" size="sm">View</voa-button></td>
+              </tr>
+              <tr>
+                <td>
+                  <div class="user-cell">
+                    <voa-avatar size="sm" initials="AS" style="--voa-avatar-bg: #fce7f3; --voa-avatar-color: #9d174d;"></voa-avatar>
+                    <div>
+                      <div class="table-user-name">Alice Smith</div>
+                      <div class="table-user-email">alice@example.com</div>
+                    </div>
+                  </div>
+                </td>
+                <td>Oct 24, 2023</td>
+                <td class="table-amount">$85.50</td>
+                <td><voa-tag class="tag-warning" label="Pending" size="sm"></voa-tag></td>
+                <td><voa-button variant="ghost" size="sm">View</voa-button></td>
+              </tr>
+              <tr>
+                <td>
+                  <div class="user-cell">
+                    <voa-avatar size="sm" initials="RJ" style="--voa-avatar-bg: #e0e7ff; --voa-avatar-color: #4338ca;"></voa-avatar>
+                    <div>
+                      <div class="table-user-name">Robert Johnson</div>
+                      <div class="table-user-email">robert@example.com</div>
+                    </div>
+                  </div>
+                </td>
+                <td>Oct 23, 2023</td>
+                <td class="table-amount">$240.00</td>
+                <td><voa-tag class="tag-success" label="Completed" size="sm"></voa-tag></td>
+                <td><voa-button variant="ghost" size="sm">View</voa-button></td>
+              </tr>
+               <tr>
+                <td>
+                  <div class="user-cell">
+                    <voa-avatar size="sm" initials="MG" style="--voa-avatar-bg: #ffedd5; --voa-avatar-color: #9a3412;"></voa-avatar>
+                    <div>
+                      <div class="table-user-name">Maria Garcia</div>
+                      <div class="table-user-email">maria@example.com</div>
+                    </div>
+                  </div>
+                </td>
+                <td>Oct 23, 2023</td>
+                <td class="table-amount">$45.00</td>
+                <td><voa-tag class="tag-error" label="Failed" size="sm"></voa-tag></td>
+                <td><voa-button variant="ghost" size="sm">View</voa-button></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="pagination-container">
+          <voa-pagination total="10" current="1"></voa-pagination>
+        </div>
+      </div>
+    </main>
+  </div>
+`;
+export const Dashboard = () => {
+    setTimeout(() => {
+        const toggle = document.getElementById('theme-toggle');
+        const container = document.querySelector('.dashboard-container');
+        if (toggle && container) {
+            toggle.addEventListener('dsChange', (e) => {
+                if (e.detail) {
+                    container.classList.add('dark-mode');
+                }
+                else {
+                    container.classList.remove('dark-mode');
+                }
+            });
+        }
+    }, 0);
+    return Template();
+};
+//# sourceMappingURL=SaasDashboard.stories.js.map