@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/src/demos/loader-demo/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusLoader from "../../components/ModusLoader";
+
+export default function LoaderDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Loader"
+      description="Loaders communicate that content is on the way. Select a variant that fits the space and avoid pairing multiple animations together."
+    >
+      <DemoExample
+        title="All Variants"
+        description="Six different animation styles to choose from based on your use case."
+      >
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" size="md" />
+            <div className="text-sm text-foreground opacity-80">Spinner</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="ball" size="md" />
+            <div className="text-sm text-foreground opacity-80">Ball</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="bars" size="md" />
+            <div className="text-sm text-foreground opacity-80">Bars</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="dots" size="md" />
+            <div className="text-sm text-foreground opacity-80">Dots</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="infinity" size="md" />
+            <div className="text-sm text-foreground opacity-80">Infinity</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="ring" size="md" />
+            <div className="text-sm text-foreground opacity-80">Ring</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Color Options"
+        description="Theme-aware colors that automatically adapt to light and dark themes."
+      >
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" color="primary" size="md" />
+            <div className="text-sm text-foreground opacity-80">Primary</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" color="secondary" size="md" />
+            <div className="text-sm text-foreground opacity-80">Secondary</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" color="accent" size="md" />
+            <div className="text-sm text-foreground opacity-80">Accent</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" color="success" size="md" />
+            <div className="text-sm text-foreground opacity-80">Success</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" color="warning" size="md" />
+            <div className="text-sm text-foreground opacity-80">Warning</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" color="error" size="md" />
+            <div className="text-sm text-foreground opacity-80">Error</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" color="info" size="md" />
+            <div className="text-sm text-foreground opacity-80">Info</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Size Options"
+        description="Four size tokens from extra small to large for different contexts."
+      >
+        <div className="flex items-center justify-center gap-8">
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" size="xs" />
+            <div className="text-sm text-foreground opacity-80">XS (16px)</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" size="sm" />
+            <div className="text-sm text-foreground opacity-80">SM (20px)</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" size="md" />
+            <div className="text-sm text-foreground opacity-80">MD (24px)</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLoader variant="spinner" size="lg" />
+            <div className="text-sm text-foreground opacity-80">LG (32px)</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Usage Examples"
+        description="Common patterns for using loaders in real applications."
+      >
+        <div className="space-y-6">
+          <div className="flex items-center gap-3">
+            <ModusLoader variant="spinner" size="md" />
+            <div className="text-sm text-foreground opacity-80">
+              Syncing records…
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <ModusLoader variant="dots" size="sm" color="secondary" />
+            <div className="text-sm text-foreground opacity-80">
+              Preparing report
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <ModusLoader variant="bars" size="sm" color="success" />
+            <div className="text-sm text-foreground opacity-80">
+              Upload complete
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <ModusLoader variant="ring" size="lg" color="warning" />
+            <div className="text-lg text-foreground">
+              Processing large dataset…
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/logo-demo/page.tsx

@@ -0,0 +1,292 @@
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusLogo, { type LogoName } from "../../components/ModusLogo";
+
+// Trimble Products (19 logos)
+const trimbleLogos: { name: LogoName; displayName: string }[] = [
+  { name: "trimble", displayName: "Trimble" },
+  { name: "siteworks", displayName: "Trimble Siteworks" },
+  { name: "earthworks", displayName: "Trimble Earthworks" },
+  { name: "financials", displayName: "Trimble Financials" },
+  { name: "worksmanager", displayName: "Trimble WorksManager" },
+  { name: "connect", displayName: "Trimble Connect" },
+  { name: "unity_construct", displayName: "Trimble Unity Construct" },
+  { name: "trade_servicelive", displayName: "Trade ServiceLive" },
+  { name: "buildable", displayName: "Buildable" },
+  { name: "livecount", displayName: "LiveCount" },
+  { name: "supplier_xchange", displayName: "Supplier Xchange" },
+  { name: "app_xchange", displayName: "App Xchange" },
+  { name: "trimble_unity", displayName: "Trimble Unity" },
+  { name: "sketchup", displayName: "SketchUp" },
+  { name: "pc_miler", displayName: "PC Miler" },
+  { name: "copilot", displayName: "CoPilot" },
+  { name: "trimble_pay", displayName: "Trimble Pay" },
+  { name: "projectsight", displayName: "ProjectSight" },
+  { name: "demand_planning", displayName: "Demand Planning" },
+];
+
+// Viewpoint Products (17 logos)
+const viewpointLogos: { name: LogoName; displayName: string }[] = [
+  { name: "viewpoint", displayName: "Viewpoint" },
+  { name: "viewpoint_analytics", displayName: "Viewpoint Analytics" },
+  { name: "viewpoint_epayments", displayName: "Viewpoint ePayments" },
+  { name: "viewpoint_estimating", displayName: "Viewpoint Estimating" },
+  {
+    name: "viewpoint_field_management",
+    displayName: "Viewpoint Field Management",
+  },
+  { name: "viewpoint_field_time", displayName: "Viewpoint Field Time" },
+  {
+    name: "viewpoint_financial_controls",
+    displayName: "Viewpoint Financial Controls",
+  },
+  { name: "viewpoint_hr_management", displayName: "Viewpoint HR Management" },
+  { name: "viewpoint_jobpac_connect", displayName: "Viewpoint Jobpac Connect" },
+  { name: "viewpoint_procontractor", displayName: "Viewpoint ProContractor" },
+  { name: "viewpoint_spectrum", displayName: "Viewpoint Spectrum" },
+  { name: "viewpoint_team", displayName: "Viewpoint Team" },
+  { name: "viewpoint_vista", displayName: "Viewpoint Vista" },
+  {
+    name: "viewpoint_spectrum_service_tech",
+    displayName: "Viewpoint Spectrum Service Tech",
+  },
+  { name: "viewpoint_for_projects", displayName: "Viewpoint For Projects" },
+  {
+    name: "viewpoint_vista_field_service",
+    displayName: "Viewpoint Vista Field Service",
+  },
+  { name: "viewpoint_field_view", displayName: "Viewpoint Field View" },
+];
+
+// Sample logos for emblems and sizes
+const sampleLogos: LogoName[] = ["trimble", "connect", "viewpoint", "sketchup"];
+
+export default function LogoDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Logo"
+      description="Logo component displays Trimble and Viewpoint product logos with automatic theme-aware light/dark switching. Use the component for consistent branding across applications."
+    >
+      <DemoExample
+        title="Trimble Product Logos (19)"
+        description="All available Trimble product logos."
+      >
+        <div className="grid grid-cols-2 gap-8">
+          {trimbleLogos.map((logo) => (
+            <div
+              key={logo.name}
+              className="flex flex-col items-center gap-4 p-6 bg-muted rounded-lg"
+            >
+              <div className="h-20 flex items-center justify-center">
+                <ModusLogo name={logo.name} customClass="max-h-20 max-w-64" />
+              </div>
+              <div className="text-sm text-muted-foreground text-center">
+                {logo.displayName}
+              </div>
+              <code className="text-xs bg-background px-2 py-1 rounded">
+                {logo.name}
+              </code>
+            </div>
+          ))}
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Viewpoint Product Logos (17)"
+        description="All available Viewpoint product logos."
+      >
+        <div className="grid grid-cols-2 gap-8">
+          {viewpointLogos.map((logo) => (
+            <div
+              key={logo.name}
+              className="flex flex-col items-center gap-4 p-6 bg-muted rounded-lg"
+            >
+              <div className="h-20 flex items-center justify-center">
+                <ModusLogo name={logo.name} customClass="max-h-20 max-w-64" />
+              </div>
+              <div className="text-sm text-muted-foreground text-center">
+                {logo.displayName}
+              </div>
+              <code className="text-xs bg-background px-2 py-1 rounded">
+                {logo.name}
+              </code>
+            </div>
+          ))}
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Emblem Variants (Icon-Only)"
+        description="Compact emblem versions of logos for use in limited space."
+      >
+        <div className="flex flex-wrap gap-8 items-end">
+          {sampleLogos.map((logoName) => (
+            <div
+              key={`emblem-${logoName}`}
+              className="flex flex-col items-center gap-2"
+            >
+              <div className="h-16 w-16 flex items-center justify-center bg-muted rounded-lg p-2">
+                <ModusLogo name={logoName} emblem />
+              </div>
+              <code className="text-xs text-muted-foreground">{logoName}</code>
+            </div>
+          ))}
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Logo Sizes"
+        description="Control logo size using custom CSS classes."
+      >
+        <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Small (w-20)</div>
+            <div className="flex flex-wrap gap-4 items-center">
+              <ModusLogo name="trimble" customClass="w-20" />
+              <ModusLogo name="connect" customClass="w-20" />
+              <ModusLogo name="viewpoint" customClass="w-20" />
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Medium (w-32)</div>
+            <div className="flex flex-wrap gap-4 items-center">
+              <ModusLogo name="trimble" customClass="w-32" />
+              <ModusLogo name="connect" customClass="w-32" />
+              <ModusLogo name="viewpoint" customClass="w-32" />
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Large (w-48)</div>
+            <div className="flex flex-wrap gap-4 items-center">
+              <ModusLogo name="trimble" customClass="w-48" />
+              <ModusLogo name="connect" customClass="w-48" />
+              <ModusLogo name="viewpoint" customClass="w-48" />
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Emblem Sizes"
+        description="Sized emblem variants for different use cases."
+      >
+        <div className="flex flex-wrap gap-8 items-end">
+          <div className="flex flex-col items-center gap-2">
+            <div className="h-8 w-8 flex items-center justify-center bg-muted rounded p-1">
+              <ModusLogo name="trimble" emblem customClass="w-6 h-6" />
+            </div>
+            <div className="text-xs text-muted-foreground">Small</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <div className="h-12 w-12 flex items-center justify-center bg-muted rounded-lg p-2">
+              <ModusLogo name="trimble" emblem customClass="w-8 h-8" />
+            </div>
+            <div className="text-xs text-muted-foreground">Medium</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <div className="h-16 w-16 flex items-center justify-center bg-muted rounded-lg p-2">
+              <ModusLogo name="trimble" emblem customClass="w-12 h-12" />
+            </div>
+            <div className="text-xs text-muted-foreground">Large</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <div className="h-24 w-24 flex items-center justify-center bg-muted rounded-lg p-2">
+              <ModusLogo name="trimble" emblem customClass="w-20 h-20" />
+            </div>
+            <div className="text-xs text-muted-foreground">Extra Large</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Custom Alt Text"
+        description="Provide custom alt text for better accessibility."
+      >
+        <div className="flex flex-wrap gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <ModusLogo
+              name="connect"
+              alt="Trimble Connect - Cloud-based collaboration platform"
+              customClass="w-32"
+            />
+            <div className="text-xs text-muted-foreground">Custom alt text</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusLogo name="viewpoint_vista" customClass="w-32" />
+            <div className="text-xs text-muted-foreground">
+              Default alt (logo name)
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Theme Awareness"
+        description="Logos automatically switch between light and dark variants based on the current theme."
+      >
+        <div className="p-6 bg-muted rounded-lg">
+          <div className="text-sm text-foreground mb-4">
+            The logo component observes the{" "}
+            <code className="bg-background px-2 py-1 rounded">data-theme</code>{" "}
+            attribute on the{" "}
+            <code className="bg-background px-2 py-1 rounded">
+              &lt;html&gt;
+            </code>{" "}
+            element and automatically updates when the theme changes. Try
+            switching themes using the theme toggle in the header.
+          </div>
+          <div className="flex flex-wrap gap-6">
+            <ModusLogo name="trimble" customClass="w-32" />
+            <ModusLogo name="viewpoint" customClass="w-32" />
+            <ModusLogo name="sketchup" customClass="w-32" />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Full Logo vs Emblem Comparison"
+        description="Side-by-side comparison of full logos and their emblem variants."
+      >
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-border">
+                <th className="text-left py-3 px-4 font-medium text-foreground">
+                  Product
+                </th>
+                <th className="text-center py-3 px-4 font-medium text-foreground">
+                  Full Logo
+                </th>
+                <th className="text-center py-3 px-4 font-medium text-foreground">
+                  Emblem
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {sampleLogos.map((logoName) => (
+                <tr
+                  key={`compare-${logoName}`}
+                  className="border-b border-border"
+                >
+                  <td className="py-4 px-4 text-muted-foreground capitalize">
+                    {logoName.replace(/_/g, " ")}
+                  </td>
+                  <td className="py-4 px-4 text-center">
+                    <div className="flex justify-center">
+                      <ModusLogo name={logoName} customClass="h-8" />
+                    </div>
+                  </td>
+                  <td className="py-4 px-4 text-center">
+                    <div className="flex justify-center">
+                      <ModusLogo name={logoName} emblem customClass="h-8 w-8" />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/menu-demo/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useState } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusMenu from "../../components/ModusMenu";
+
+export default function MenuDemoPage() {
+  const [selectedMenu, setSelectedMenu] = useState<string>("all");
+
+  // Vertical Menu items
+  const verticalMenuItems = [
+    { label: "Dashboard", value: "dashboard", selected: true },
+    { label: "Projects", value: "projects" },
+    { label: "Reports", value: "reports" },
+    { label: "Settings", value: "settings" },
+  ];
+
+  // Horizontal Menu items
+  const horizontalMenuItems = [
+    { label: "Home", value: "home" },
+    { label: "Products", value: "products" },
+    { label: "About", value: "about" },
+    { label: "Contact", value: "contact" },
+  ];
+
+  // Selected Menu Items
+  const selectedMenuItems = [
+    { label: "All Projects", value: "all", selected: selectedMenu === "all" },
+    { label: "Active", value: "active", selected: selectedMenu === "active" },
+    { label: "Archived", value: "archived", selected: selectedMenu === "archived" },
+    { label: "Deleted", value: "deleted", selected: selectedMenu === "deleted" },
+  ];
+
+  const handleSelectedMenuChange = (item: { label: string; value: string }) => {
+    setSelectedMenu(item.value);
+  };
+
+  return (
+    <DemoPage
+      title="Modus Menu"
+      description="Menus provide navigation and action lists. Use menus to organize related actions or navigation items in a consistent, accessible way."
+    >
+      <DemoExample
+        title="Vertical Menu"
+        description="Default vertical menu orientation for navigation lists."
+      >
+        <ModusMenu items={verticalMenuItems} bordered />
+      </DemoExample>
+
+      <DemoExample
+        title="Horizontal Menu"
+        description="Horizontal menu orientation for top navigation."
+      >
+        <ModusMenu items={horizontalMenuItems} orientation="horizontal" />
+      </DemoExample>
+
+      <DemoExample
+        title="Selected Menu Items"
+        description="Menu with selected items to indicate current state."
+      >
+        <ModusMenu
+          items={selectedMenuItems}
+          bordered
+          onItemSelect={handleSelectedMenuChange}
+        />
+      </DemoExample>
+    </DemoPage>
+  );
+}