@umituz/web-dashboard 3.2.4 → 4.1.0

package/src/styles/tokens.contract.test.ts

@@ -0,0 +1,91 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Stylesheet-token contract:
+ * - every `--u-*` custom property referenced by dashboard.css must be
+ *   defined in tokens.css (catches token typos and dead references),
+ * - the core token families (color/radius/space/font/shadow/layout)
+ *   must all be present in tokens.css.
+ */
+
+const read = (file: string): string =>
+  readFileSync(join(__dirname, file), "utf8");
+
+const tokensCss = read("tokens.css");
+const dashboardCss = read("dashboard.css");
+
+const DEFINED = new Set([...tokensCss.matchAll(/(--u-[a-z0-9-]+)\s*:/g)].map((m) => m[1]));
+const USED = new Set([...dashboardCss.matchAll(/var\((--u-[a-z0-9-]+)/g)].map((m) => m[1]));
+
+describe("dashboard stylesheet token contract", () => {
+  it("defines every token the stylesheet references", () => {
+    const undefinedTokens = [...USED].filter((token) => !DEFINED.has(token));
+    expect(undefinedTokens).toEqual([]);
+  });
+
+  it("references the token system at all", () => {
+    expect(USED.size).toBeGreaterThan(40);
+  });
+
+  it("ships the core token families", () => {
+    const CORE = [
+      "--u-color-bg",
+      "--u-color-surface",
+      "--u-color-text",
+      "--u-color-muted",
+      "--u-color-border",
+      "--u-color-border-strong",
+      "--u-color-primary",
+      "--u-color-primary-hover",
+      "--u-color-primary-contrast",
+      "--u-color-primary-soft",
+      "--u-color-danger",
+      "--u-color-success",
+      "--u-color-warning",
+      "--u-color-ring",
+      "--u-radius-sm",
+      "--u-radius-lg",
+      "--u-radius-pill",
+      "--u-space-1",
+      "--u-space-8",
+      "--u-font-sans",
+      "--u-font-size-md",
+      "--u-font-weight-bold",
+      "--u-shadow-sm",
+      "--u-sidebar-width",
+      "--u-header-height",
+    ];
+    expect(CORE.filter((token) => !DEFINED.has(token))).toEqual([]);
+  });
+
+  it("provides dark-mode overrides", () => {
+    expect(tokensCss).toContain('[data-udb-theme="dark"]');
+  });
+
+  it("bridges core tokens to design-system variables with fallbacks", () => {
+    const BRIDGED = [
+      ["--u-color-primary", "var(--color-primary, #2563eb)"],
+      ["--u-color-bg", "var(--color-background, #f8fafc)"],
+      ["--u-color-danger", "var(--color-destructive, #dc2626)"],
+      ["--u-radius-md", "var(--radius-md, 8px)"],
+      ["--u-shadow-lg", "var(--shadow-lg,"],
+      ["--u-font-sans", "var(--font-sans,"],
+    ] as const;
+    for (const [token, bridge] of BRIDGED) {
+      expect(tokensCss).toContain(`${token}: ${bridge}`);
+    }
+  });
+
+  it("derives hover/soft shades from the bridged base color", () => {
+    expect(tokensCss).toMatch(/--u-color-primary-hover: var\(--color-primary-hover, color-mix\(/);
+    expect(tokensCss).toMatch(/--u-color-primary-soft: var\(--color-primary-soft, color-mix\(/);
+  });
+
+  it("pulls the design-system stylesheet transitively", () => {
+    const imports = [...dashboardCss.matchAll(/@import\s+"([^"]+)"/g)].map((m) => m[1]);
+    expect(imports[0]).toBe("@umituz/web-design-system/styles.css");
+    expect(imports).toContain("./tokens.css");
+  });
+});

package/src/styles/tokens.css

@@ -0,0 +1,116 @@
+/**
+ * @umituz/web-dashboard — design tokens (`--u-*`)
+ *
+ * Colors, radii, fonts and shadows are bridged to the design system's
+ * `--color-*` / `--radius-*` / `--font-*` / `--shadow-*` variables; each
+ * bridge keeps its previous value as fallback. Dark mode: add
+ * `data-udb-theme="dark"` on any ancestor — the dark block re-sets the
+ * design-system variables and every bridge follows automatically.
+ */
+
+:root {
+  /* Surfaces & text */
+  --u-color-bg: var(--color-background, #f8fafc);
+  --u-color-surface: var(--color-card, #ffffff);
+  --u-color-surface-muted: var(--color-muted, #f1f5f9);
+  --u-color-text: var(--color-foreground, #0f172a);
+  --u-color-muted: var(--color-muted-foreground, #64748b);
+  --u-color-border: var(--color-border, #e2e8f0);
+  --u-color-border-strong: #cbd5e1;
+
+  /* Brand (hover/soft derive from the base color) */
+  --u-color-primary: var(--color-primary, #2563eb);
+  --u-color-primary-hover: var(--color-primary-hover, color-mix(in oklab, var(--color-primary, #2563eb) 86%, #000));
+  --u-color-primary-contrast: var(--color-primary-foreground, #ffffff);
+  --u-color-primary-soft: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
+  --u-color-secondary: var(--color-secondary, #8b5cf6);
+
+  /* Semantic */
+  --u-color-danger: var(--color-destructive, #dc2626);
+  --u-color-danger-hover: var(--color-destructive-hover, color-mix(in oklab, var(--color-destructive, #dc2626) 85%, #000));
+  --u-color-danger-contrast: var(--color-destructive-foreground, #ffffff);
+  --u-color-danger-soft: var(--color-destructive-soft, color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent));
+  --u-color-success: var(--color-success, #16a34a);
+  --u-color-success-soft: var(--color-success-soft, color-mix(in srgb, var(--color-success, #16a34a) 12%, transparent));
+  --u-color-warning: var(--color-warning, #d97706);
+  --u-color-warning-soft: var(--color-warning-soft, color-mix(in srgb, var(--color-warning, #d97706) 15%, transparent));
+
+  /* Focus */
+  --u-color-ring: var(--color-ring, rgba(37, 99, 235, 0.45));
+
+  /* Radii */
+  --u-radius-sm: var(--radius-sm, 6px);
+  --u-radius-md: var(--radius-md, 8px);
+  --u-radius-lg: var(--radius-lg, 12px);
+  --u-radius-xl: var(--radius-xl, 16px);
+  --u-radius-pill: 9999px;
+
+  /* Spacing (4px base) */
+  --u-space-1: 4px;
+  --u-space-2: 8px;
+  --u-space-3: 12px;
+  --u-space-4: 16px;
+  --u-space-5: 20px;
+  --u-space-6: 24px;
+  --u-space-7: 32px;
+  --u-space-8: 40px;
+
+  /* Typography */
+  --u-font-sans: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif);
+  --u-font-size-xs: 11px;
+  --u-font-size-sm: 12px;
+  --u-font-size-md: 14px;
+  --u-font-size-lg: 16px;
+  --u-font-size-xl: 20px;
+  --u-font-size-2xl: 24px;
+  --u-font-size-3xl: 30px;
+  --u-font-size-4xl: 36px;
+  --u-font-weight-normal: 400;
+  --u-font-weight-medium: 500;
+  --u-font-weight-bold: 700;
+
+  /* Layout */
+  --u-sidebar-width: 240px;
+  --u-sidebar-width-collapsed: 64px;
+  --u-header-height: 56px;
+
+  /* Elevation */
+  --u-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
+  --u-shadow-md: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
+  --u-shadow-lg: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.14));
+
+  /* Sidebar palette */
+  --u-sidebar-bg: var(--u-color-surface);
+  --u-sidebar-text: var(--u-color-text);
+  --u-sidebar-muted: var(--u-color-muted);
+  --u-sidebar-border: var(--u-color-border);
+  --u-sidebar-accent: var(--u-color-surface-muted);
+  --u-sidebar-accent-text: var(--u-color-text);
+}
+
+[data-udb-theme="dark"] {
+  --color-background: #0b1120;
+  --color-card: #111827;
+  --color-muted: #1e293b;
+  --color-foreground: #f1f5f9;
+  --color-muted-foreground: #94a3b8;
+  --color-border: #1f2a3c;
+
+  --color-primary: #3b82f6;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #a78bfa;
+
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+
+  --color-ring: rgba(96, 165, 250, 0.5);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
+
+  --u-color-border-strong: #334155;
+}

package/src/domains/billing/components/BillingLayout.tsx

@@ -1,63 +0,0 @@
-/**
- * Billing Layout Component
- *
- * Layout wrapper for billing pages
- */
-
-import { BrandLogo } from "../../layouts/components";
-import type { BillingLayoutProps } from "../types/billing";
-
-export const BillingLayout = ({ config, children }: BillingLayoutProps) => {
-  return (
-    <div className="min-h-screen bg-background flex flex-col">
-      {/* Header */}
-      <header className="border-b border-border px-6 py-4 flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <BrandLogo size={28} />
-          <span className="font-bold text-xl text-foreground">{config.brandName}</span>
-        </div>
-        <a
-          href="/dashboard"
-          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          Back to Dashboard
-        </a>
-      </header>
-
-      {/* Main Content */}
-      <main className="flex-1 container max-w-6xl mx-auto px-4 py-12">
-        {/* Page Title */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-foreground mb-2">
-            Billing & Subscription
-          </h1>
-          <p className="text-muted-foreground">
-            Manage your subscription, payment methods, and invoices
-          </p>
-        </div>
-
-        {/* Children Content */}
-        {children}
-      </main>
-
-      {/* Support Link */}
-      {config.supportEmail && (
-        <footer className="border-t border-border px-6 py-4">
-          <div className="container max-w-6xl mx-auto text-center">
-            <p className="text-sm text-muted-foreground">
-              Need help? Contact{" "}
-              <a
-                href={`mailto:${config.supportEmail}`}
-                className="text-primary hover:underline"
-              >
-                {config.supportEmail}
-              </a>
-            </p>
-          </div>
-        </footer>
-      )}
-    </div>
-  );
-};
-
-export default BillingLayout;

package/src/domains/billing/components/BillingPage.tsx

@@ -1,49 +0,0 @@
-/**
- * BillingPage Component
- *
- * Complete billing page for displaying subscription, invoices, and plan management
- * Data fetching should be handled by passing billing summary
- *
- * @example
- * ```tsx
- * <BillingPage
- *   billing={billingData}
- *   loading={false}
- *   activeTab="overview"
- *   onTabChange={(tab) => setActiveTab(tab)}
- * />
- * ```
- */
-
-import { BillingLayout, BillingPortal } from ".";
-import type { BillingPortalProps } from "../types/billing";
-
-export interface BillingPageProps extends Omit<BillingPortalProps, "showTabs"> {
-  /** Billing configuration */
-  config?: {
-    brandName?: string;
-    supportEmail?: string;
-  };
-}
-
-/**
- * BillingPage Component
- *
- * Ready-to-use billing page component
- * Combine BillingLayout with BillingPortal
- */
-export const BillingPage = ({ config, ...portalProps }: BillingPageProps) => {
-  const billingConfig = {
-    brandName: config?.brandName || "Growth Factory",
-    supportEmail: config?.supportEmail,
-    plans: [],
-  };
-
-  return (
-    <BillingLayout config={billingConfig}>
-      <BillingPortal showTabs={true} {...portalProps} />
-    </BillingLayout>
-  );
-};
-
-export default BillingPage;

package/src/domains/billing/components/BillingPortal.tsx

@@ -1,198 +0,0 @@
-/**
- * Billing Portal Component
- *
- * Main billing portal with tabs
- */
-
-import { CreditCard, FileText, BarChart3, Settings, Loader2, AlertCircle } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
-import { Button } from "@umituz/web-design-system/atoms";
-import type { BillingPortalProps } from "../types/billing";
-import { UsageCard } from "./UsageCard";
-import { PaymentMethodsList } from "./PaymentMethodsList";
-import { InvoiceCard } from "./InvoiceCard";
-import { getDaysRemaining, getStatusColor, getStatusLabel, formatPrice, getPlanPrice } from "../utils/billing";
-
-export const BillingPortal = ({
-  billing,
-  loading = false,
-  error,
-  showTabs = true,
-  activeTab = "overview",
-  onTabChange,
-}: BillingPortalProps) => {
-  const tabs = [
-    { id: "overview", label: "Overview", icon: BarChart3 },
-    { id: "payment-methods", label: "Payment Methods", icon: CreditCard },
-    { id: "invoices", label: "Invoices", icon: FileText },
-    { id: "plan", label: "Plan", icon: Settings },
-  ];
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center py-24">
-        <Loader2 className="h-12 w-12 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center py-24 gap-4 text-destructive">
-        <AlertCircle className="h-6 w-6" />
-        <p>{error}</p>
-      </div>
-    );
-  }
-
-  if (!billing) return null;
-
-  const renderContent = () => {
-    switch (activeTab) {
-      case "overview":
-        return (
-          <div className="space-y-6">
-            {/* Current Subscription */}
-            <div className="p-6 rounded-xl border border-border bg-background">
-              <h3 className="text-lg font-semibold text-foreground mb-4">
-                Current Subscription
-              </h3>
-              <div className="flex items-start justify-between">
-                <div>
-                  <p className="text-2xl font-bold text-foreground">
-                    {billing.subscription.plan.name}
-                  </p>
-                  <p className={cn("text-sm font-medium", getStatusColor(billing.subscription.status))}>
-                    {getStatusLabel(billing.subscription.status)}
-                  </p>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    {formatPrice(
-                      getPlanPrice(billing.subscription.plan, billing.subscription.cycle),
-                      billing.subscription.plan.currency
-                    )}
-                    /{billing.subscription.cycle}
-                  </p>
-                </div>
-                <div className="text-right">
-                  {billing.subscription.status === "trialing" && billing.subscription.trialEnd && (
-                    <p className="text-sm text-muted-foreground">
-                      {getDaysRemaining(billing.subscription.trialEnd)} days left in trial
-                    </p>
-                  )}
-                  {billing.upcomingInvoice && (
-                    <p className="text-sm text-muted-foreground">
-                      Next billing:{" "}
-                      {new Date(billing.upcomingInvoice.date).toLocaleDateString()}
-                    </p>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            {/* Usage Metrics */}
-            {billing.usage.length > 0 && (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {billing.usage.map((metric) => (
-                  <UsageCard key={metric.id} metric={metric} />
-                ))}
-              </div>
-            )}
-
-            {/* Upcoming Invoice */}
-            {billing.upcomingInvoice && (
-              <div className="p-6 rounded-xl border border-border bg-background">
-                <h3 className="text-lg font-semibold text-foreground mb-2">
-                  Upcoming Invoice
-                </h3>
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-3xl font-bold text-foreground">
-                      {formatPrice(billing.upcomingInvoice.amount, billing.upcomingInvoice.currency)}
-                    </p>
-                    <p className="text-sm text-muted-foreground">
-                      Due {new Date(billing.upcomingInvoice.date).toLocaleDateString()}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-        );
-
-      case "payment-methods":
-        return (
-          <PaymentMethodsList
-            paymentMethods={billing.paymentMethods}
-            onAddNew={() => console.log("Add payment method")}
-            onSetDefault={(id) => console.log("Set default:", id)}
-            onRemove={(id) => console.log("Remove:", id)}
-          />
-        );
-
-      case "invoices":
-        return (
-          <div className="space-y-4">
-            {billing.recentInvoices.length > 0 ? (
-              billing.recentInvoices.map((invoice) => (
-                <InvoiceCard
-                  key={invoice.id}
-                  invoice={invoice}
-                  onClick={(inv) => console.log("View invoice:", inv)}
-                />
-              ))
-            ) : (
-              <div className="text-center py-12 text-muted-foreground">
-                <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                <p>No invoices yet</p>
-              </div>
-            )}
-          </div>
-        );
-
-      case "plan":
-        return (
-          <div className="text-center py-12">
-            <p className="text-muted-foreground">Plan management coming soon...</p>
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="w-full">
-      {/* Tabs */}
-      {showTabs && (
-        <div className="border-b border-border mb-6">
-          <div className="flex gap-6">
-            {tabs.map((tab) => {
-              const Icon = tab.icon;
-              return (
-                <button
-                  key={tab.id}
-                  onClick={() => onTabChange?.(tab.id)}
-                  className={cn(
-                    "flex items-center gap-2 pb-4 border-b-2 transition-colors",
-                    activeTab === tab.id
-                      ? "border-primary text-foreground"
-                      : "border-transparent text-muted-foreground hover:text-foreground"
-                  )}
-                >
-                  <Icon className="h-4 w-4" />
-                  <span className="font-medium">{tab.label}</span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* Content */}
-      {renderContent()}
-    </div>
-  );
-};
-
-export default BillingPortal;

package/src/domains/billing/components/InvoiceCard.tsx

@@ -1,143 +0,0 @@
-/**
- * Invoice Card Component
- *
- * Display invoice information
- */
-
-import { FileText, Download, ExternalLink } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
-import { Button } from "@umituz/web-design-system/atoms";
-import type { InvoiceCardProps } from "../types/billing";
-import { formatPrice, getInvoiceStatusColor, getInvoiceStatusLabel } from "../utils/billing";
-
-export const InvoiceCard = ({
-  invoice,
-  compact = false,
-  onClick,
-}: InvoiceCardProps) => {
-  const handleClick = () => {
-    onClick?.(invoice);
-  };
-
-  if (compact) {
-    return (
-      <div
-        onClick={handleClick}
-        className="flex items-center justify-between p-4 rounded-lg border border-border hover:border-primary/50 bg-background cursor-pointer transition-colors"
-      >
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center">
-            <FileText className="h-5 w-5 text-muted-foreground" />
-          </div>
-          <div>
-            <p className="font-medium text-foreground text-sm">
-              {invoice.number}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {new Date(invoice.date).toLocaleDateString()}
-            </p>
-          </div>
-        </div>
-
-        <div className="text-right">
-          <p className="font-bold text-foreground">
-            {formatPrice(invoice.amount, invoice.currency)}
-          </p>
-          <p className={cn("text-xs font-medium", getInvoiceStatusColor(invoice.status))}>
-            {getInvoiceStatusLabel(invoice.status)}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      onClick={handleClick}
-      className="p-6 rounded-xl border border-border hover:border-primary/50 bg-background cursor-pointer transition-colors"
-    >
-      {/* Header */}
-      <div className="flex items-start justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div className="w-12 h-12 rounded-lg bg-muted flex items-center justify-center">
-            <FileText className="h-6 w-6 text-muted-foreground" />
-          </div>
-          <div>
-            <p className="font-bold text-foreground">{invoice.number}</p>
-            <p className="text-sm text-muted-foreground">
-              {new Date(invoice.date).toLocaleDateString(undefined, {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              })}
-            </p>
-          </div>
-        </div>
-
-        <div className="text-right">
-          <p className="text-2xl font-bold text-foreground">
-            {formatPrice(invoice.amount, invoice.currency)}
-          </p>
-          <p className={cn("text-sm font-medium", getInvoiceStatusColor(invoice.status))}>
-            {getInvoiceStatusLabel(invoice.status)}
-          </p>
-        </div>
-      </div>
-
-      {/* Items Preview */}
-      {invoice.items && invoice.items.length > 0 && (
-        <div className="space-y-2 mb-4">
-          {invoice.items.slice(0, 2).map((item, index) => (
-            <div key={index} className="flex justify-between text-sm">
-              <span className="text-muted-foreground">{item.description}</span>
-              <span className="text-foreground">
-                {formatPrice(item.amount, invoice.currency)}
-              </span>
-            </div>
-          ))}
-          {invoice.items.length > 2 && (
-            <p className="text-xs text-muted-foreground">
-              +{invoice.items.length - 2} more items
-            </p>
-          )}
-        </div>
-      )}
-
-      {/* Actions */}
-      <div className="flex items-center justify-between pt-4 border-t border-border">
-        <p className="text-xs text-muted-foreground">
-          Due {new Date(invoice.dueDate).toLocaleDateString()}
-        </p>
-
-        <div className="flex items-center gap-2">
-          {invoice.invoiceUrl && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation();
-                window.open(invoice.invoiceUrl, "_blank");
-              }}
-            >
-              <ExternalLink className="h-4 w-4" />
-            </Button>
-          )}
-          {invoice.pdfUrl && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation();
-                window.open(invoice.pdfUrl, "_blank");
-              }}
-            >
-              <Download className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default InvoiceCard;