@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/src/dev/DevPanel.tsx

@@ -0,0 +1,219 @@
+import { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useDevPanel } from "./useDevPanel";
+import { devNavItems, demoCategories } from "./config";
+import ModusButton from "../components/ModusButton";
+import ThemeSwitcherDropdown from "../components/ThemeSwitcherDropdown";
+
+/**
+ * Floating toggle button for the Dev Panel.
+ * Positioned in the bottom-right corner of the screen.
+ */
+function DevPanelToggle() {
+  const { toggle, isOpen } = useDevPanel();
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[9999]">
+      <ModusButton
+        color="primary"
+        size="lg"
+        onButtonClick={toggle}
+        ariaLabel={isOpen ? "Close Dev Panel" : "Open Dev Panel (Ctrl+Shift+D)"}
+      >
+        <div className="flex items-center gap-2">
+          <i className="modus-icons text-xl">
+            {isOpen ? "close" : "code"}
+          </i>
+          <div className="hidden sm:block">Dev</div>
+        </div>
+      </ModusButton>
+    </div>
+  );
+}
+
+/**
+ * Navigation section within the Dev Panel.
+ */
+function DevPanelNav() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { close } = useDevPanel();
+  const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
+
+  const handleNavClick = (path: string) => {
+    navigate(path);
+    close();
+  };
+
+  const toggleCategory = (label: string) => {
+    setExpandedCategories((prev) =>
+      prev.includes(label)
+        ? prev.filter((l) => l !== label)
+        : [...prev, label]
+    );
+  };
+
+  const isActive = (path: string) => location.pathname === path;
+
+  return (
+    <div className="space-y-6">
+      {/* Theme Switcher Section */}
+      <div className="space-y-2">
+        <div className="text-sm font-semibold text-foreground-60 uppercase tracking-wide">
+          Theme
+        </div>
+        <ThemeSwitcherDropdown />
+      </div>
+
+      {/* Main Navigation */}
+      <div className="space-y-2">
+        <div className="text-sm font-semibold text-foreground-60 uppercase tracking-wide">
+          Reference
+        </div>
+        <div className="space-y-1">
+          {/* Home Button */}
+          <div
+            role="button"
+            tabIndex={0}
+            onClick={() => handleNavClick("/")}
+            onKeyDown={(e) => e.key === "Enter" && handleNavClick("/")}
+            className={`
+              w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors cursor-pointer
+              ${isActive("/")
+                ? "bg-primary text-primary-foreground"
+                : "hover:bg-muted text-foreground"
+              }
+            `}
+          >
+            <i className="modus-icons text-lg">home</i>
+            <div>Home</div>
+          </div>
+          {devNavItems.map((item) => (
+            <div
+              key={item.path}
+              role="button"
+              tabIndex={0}
+              onClick={() => handleNavClick(item.path)}
+              onKeyDown={(e) => e.key === "Enter" && handleNavClick(item.path)}
+              className={`
+                w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors cursor-pointer
+                ${isActive(item.path)
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-muted text-foreground"
+                }
+              `}
+            >
+              {item.icon && <i className="modus-icons text-lg">{item.icon}</i>}
+              <div>{item.label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Component Demos */}
+      <div className="space-y-2">
+        <div className="text-sm font-semibold text-foreground-60 uppercase tracking-wide">
+          Component Demos
+        </div>
+        <div className="border border-default rounded-lg overflow-hidden">
+          {demoCategories.map((category) => (
+            <div key={category.label} className="border-b border-default last:border-b-0">
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => toggleCategory(category.label)}
+                onKeyDown={(e) => e.key === "Enter" && toggleCategory(category.label)}
+                className="w-full flex items-center justify-between px-3 py-2 hover:bg-muted transition-colors text-left cursor-pointer"
+              >
+                <div className="font-medium text-foreground">{category.label}</div>
+                <i className="modus-icons text-foreground-60">
+                  {expandedCategories.includes(category.label) ? "expand_less" : "expand_more"}
+                </i>
+              </div>
+              {expandedCategories.includes(category.label) && (
+                <div className="pl-4 pb-2 space-y-1">
+                  {category.items.map((item) => (
+                    <div
+                      key={item.path}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => handleNavClick(item.path)}
+                      onKeyDown={(e) => e.key === "Enter" && handleNavClick(item.path)}
+                      className={`
+                        w-full flex items-center gap-2 px-3 py-1.5 rounded text-sm text-left transition-colors cursor-pointer
+                        ${isActive(item.path)
+                          ? "bg-primary text-primary-foreground"
+                          : "hover:bg-muted text-foreground"
+                        }
+                      `}
+                    >
+                      {item.label}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Keyboard Shortcut Hint */}
+      <div className="pt-4 border-t border-default">
+        <div className="text-xs text-foreground-60 text-center">
+          Press <div className="inline px-1.5 py-0.5 bg-muted rounded text-foreground text-xs font-mono">Ctrl+Shift+D</div> to toggle
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Dev Panel Component.
+ * A floating utility panel that provides access to demos, theme switching,
+ * and other development tools. Only renders in development mode.
+ */
+export default function DevPanel() {
+  const { isOpen, close } = useDevPanel();
+
+  return (
+    <>
+      {/* Floating Toggle Button */}
+      <DevPanelToggle />
+
+      {/* Utility Panel - Only render when open to avoid blocking clicks */}
+      {isOpen && (
+        <div className="fixed inset-0 z-[9998]">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-foreground-20 animate-fade-in"
+            onClick={close}
+          />
+
+          {/* Panel */}
+          <div
+            className="absolute top-0 right-0 h-full w-[360px] max-w-[90vw] bg-card shadow-xl animate-slide-in-right"
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between p-4 border-bottom-default">
+              <div className="text-lg font-semibold text-foreground">Dev Panel</div>
+              <ModusButton
+                variant="borderless"
+                color="secondary"
+                size="sm"
+                onButtonClick={close}
+                ariaLabel="Close Dev Panel"
+              >
+                <i className="modus-icons">close</i>
+              </ModusButton>
+            </div>
+
+            {/* Body */}
+            <div className="h-[calc(100%-64px)] overflow-y-auto p-4">
+              <DevPanelNav />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/templates/react/src/dev/DevPanelContext.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+
+export interface DevPanelContextType {
+  isOpen: boolean;
+  toggle: () => void;
+  open: () => void;
+  close: () => void;
+}
+
+export const DevPanelContext = createContext<DevPanelContextType | undefined>(
+  undefined
+);
+
+export default DevPanelContext;

package/templates/react/src/dev/DevPanelProvider.tsx

@@ -0,0 +1,63 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
+import type { ReactNode } from "react";
+import { DevPanelContext } from "./DevPanelContext";
+
+interface DevPanelProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider for Dev Panel state management.
+ * Handles panel open/close state and keyboard shortcuts (Ctrl+Shift+D to toggle).
+ */
+export function DevPanelProvider({ children }: DevPanelProviderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  // Keyboard shortcut handler: Ctrl+Shift+D (or Cmd+Shift+D on Mac)
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Toggle with Ctrl+Shift+D or Cmd+Shift+D
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey &&
+        event.key.toLowerCase() === "d"
+      ) {
+        event.preventDefault();
+        toggle();
+      }
+
+      // Close with Escape when open
+      if (event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        close();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, toggle, close]);
+
+  return (
+    <DevPanelContext.Provider value={{ isOpen, toggle, open, close }}>
+      {children}
+    </DevPanelContext.Provider>
+  );
+}
+
+export default DevPanelProvider;

package/templates/react/src/dev/DevRoutes.tsx

@@ -0,0 +1,98 @@
+import { Suspense, lazy } from "react";
+import { Routes, Route, Navigate } from "react-router-dom";
+
+// Lazy load dev pages
+const ColorPalettePage = lazy(() => import("../dev-pages/ColorPalettePage"));
+const IconsPage = lazy(() => import("../dev-pages/IconsPage"));
+const ComponentsGalleryPage = lazy(() => import("../dev-pages/ComponentsGalleryPage"));
+
+// Lazy load all demo pages
+const demoRoutes = [
+  { path: "demos/button-demo", component: lazy(() => import("../demos/button-demo/page")) },
+  { path: "demos/button-group-demo", component: lazy(() => import("../demos/button-group-demo/page")) },
+  { path: "demos/accordion-demo", component: lazy(() => import("../demos/accordion-demo/page")) },
+  { path: "demos/alert-demo", component: lazy(() => import("../demos/alert-demo/page")) },
+  { path: "demos/autocomplete-demo", component: lazy(() => import("../demos/autocomplete-demo/page")) },
+  { path: "demos/avatar-demo", component: lazy(() => import("../demos/avatar-demo/page")) },
+  { path: "demos/badge-demo", component: lazy(() => import("../demos/badge-demo/page")) },
+  { path: "demos/breadcrumbs-demo", component: lazy(() => import("../demos/breadcrumbs-demo/page")) },
+  { path: "demos/card-demo", component: lazy(() => import("../demos/card-demo/page")) },
+  { path: "demos/checkbox-demo", component: lazy(() => import("../demos/checkbox-demo/page")) },
+  { path: "demos/chip-demo", component: lazy(() => import("../demos/chip-demo/page")) },
+  { path: "demos/date-demo", component: lazy(() => import("../demos/date-demo/page")) },
+  { path: "demos/dropdown-demo", component: lazy(() => import("../demos/dropdown-demo/page")) },
+  { path: "demos/file-dropzone-demo", component: lazy(() => import("../demos/file-dropzone-demo/page")) },
+  { path: "demos/handle-demo", component: lazy(() => import("../demos/handle-demo/page")) },
+  { path: "demos/icon-demo", component: lazy(() => import("../demos/icon-demo/page")) },
+  { path: "demos/input-feedback-demo", component: lazy(() => import("../demos/input-feedback-demo/page")) },
+  { path: "demos/input-label-demo", component: lazy(() => import("../demos/input-label-demo/page")) },
+  { path: "demos/loader-demo", component: lazy(() => import("../demos/loader-demo/page")) },
+  { path: "demos/logo-demo", component: lazy(() => import("../demos/logo-demo/page")) },
+  { path: "demos/menu-demo", component: lazy(() => import("../demos/menu-demo/page")) },
+  { path: "demos/modal-demo", component: lazy(() => import("../demos/modal-demo/page")) },
+  { path: "demos/navbar-demo", component: lazy(() => import("../demos/navbar-demo/page")) },
+  { path: "demos/number-input-demo", component: lazy(() => import("../demos/number-input-demo/page")) },
+  { path: "demos/pagination-demo", component: lazy(() => import("../demos/pagination-demo/page")) },
+  { path: "demos/panel-demo", component: lazy(() => import("../demos/panel-demo/page")) },
+  { path: "demos/progress-demo", component: lazy(() => import("../demos/progress-demo/page")) },
+  { path: "demos/radio-demo", component: lazy(() => import("../demos/radio-demo/page")) },
+  { path: "demos/rating-demo", component: lazy(() => import("../demos/rating-demo/page")) },
+  { path: "demos/select-demo", component: lazy(() => import("../demos/select-demo/page")) },
+  { path: "demos/side-navigation-demo", component: lazy(() => import("../demos/side-navigation-demo/page")) },
+  { path: "demos/skeleton-demo", component: lazy(() => import("../demos/skeleton-demo/page")) },
+  { path: "demos/slider-demo", component: lazy(() => import("../demos/slider-demo/page")) },
+  { path: "demos/stepper-demo", component: lazy(() => import("../demos/stepper-demo/page")) },
+  { path: "demos/switch-demo", component: lazy(() => import("../demos/switch-demo/page")) },
+  { path: "demos/table-demo", component: lazy(() => import("../demos/table-demo/page")) },
+  { path: "demos/tabs-demo", component: lazy(() => import("../demos/tabs-demo/page")) },
+  { path: "demos/textarea-demo", component: lazy(() => import("../demos/textarea-demo/page")) },
+  { path: "demos/text-input-demo", component: lazy(() => import("../demos/text-input-demo/page")) },
+  { path: "demos/theme-switcher-demo", component: lazy(() => import("../demos/theme-switcher-demo/page")) },
+  { path: "demos/time-input-demo", component: lazy(() => import("../demos/time-input-demo/page")) },
+  { path: "demos/toast-demo", component: lazy(() => import("../demos/toast-demo/page")) },
+  { path: "demos/toolbar-demo", component: lazy(() => import("../demos/toolbar-demo/page")) },
+  { path: "demos/tooltip-demo", component: lazy(() => import("../demos/tooltip-demo/page")) },
+  { path: "demos/utility-panel-demo", component: lazy(() => import("../demos/utility-panel-demo/page")) },
+];
+
+/**
+ * Loading fallback for lazy-loaded pages
+ */
+function LoadingFallback() {
+  return (
+    <div className="flex items-center justify-center min-h-[50vh]">
+      <div className="flex flex-col items-center gap-4">
+        <div className="animate-spin">
+          <i className="modus-icons text-4xl text-primary">hourglass</i>
+        </div>
+        <div className="text-foreground-60">Loading...</div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * DevRoutes Component.
+ * Renders all development-only routes under the /dev prefix.
+ * These routes are only accessible when VITE_DEV_PANEL is enabled.
+ */
+export default function DevRoutes() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <Routes>
+        {/* Redirect /dev to /dev/components */}
+        <Route index element={<Navigate to="/dev/components" replace />} />
+
+        {/* Reference Pages */}
+        <Route path="colors" element={<ColorPalettePage />} />
+        <Route path="icons" element={<IconsPage />} />
+        <Route path="components" element={<ComponentsGalleryPage />} />
+
+        {/* Demo Routes */}
+        {demoRoutes.map(({ path, component: Component }) => (
+          <Route key={path} path={path} element={<Component />} />
+        ))}
+      </Routes>
+    </Suspense>
+  );
+}

package/templates/react/src/dev/config.ts

@@ -0,0 +1,127 @@
+/**
+ * Dev Panel configuration
+ */
+
+export interface DevNavItem {
+  label: string;
+  path: string;
+  icon?: string;
+  description?: string;
+}
+
+export interface DevNavCategory {
+  label: string;
+  items: DevNavItem[];
+}
+
+/**
+ * Main navigation items for the Dev Panel
+ */
+export const devNavItems: DevNavItem[] = [
+  {
+    label: "Colors",
+    path: "/dev/colors",
+    icon: "palette",
+    description: "Color palette reference",
+  },
+  {
+    label: "Icons",
+    path: "/dev/icons",
+    icon: "apps",
+    description: "Icon library browser",
+  },
+  {
+    label: "Components",
+    path: "/dev/components",
+    icon: "widgets",
+    description: "Component gallery",
+  },
+];
+
+/**
+ * Component demo categories for the Dev Panel navigation
+ */
+export const demoCategories: DevNavCategory[] = [
+  {
+    label: "Layout",
+    items: [
+      { label: "Accordion", path: "/dev/demos/accordion-demo" },
+      { label: "Card", path: "/dev/demos/card-demo" },
+      { label: "Panel", path: "/dev/demos/panel-demo" },
+      { label: "Utility Panel", path: "/dev/demos/utility-panel-demo" },
+    ],
+  },
+  {
+    label: "Forms",
+    items: [
+      { label: "Autocomplete", path: "/dev/demos/autocomplete-demo" },
+      { label: "Button", path: "/dev/demos/button-demo" },
+      { label: "Button Group", path: "/dev/demos/button-group-demo" },
+      { label: "Checkbox", path: "/dev/demos/checkbox-demo" },
+      { label: "Date", path: "/dev/demos/date-demo" },
+      { label: "Dropdown", path: "/dev/demos/dropdown-demo" },
+      { label: "File Dropzone", path: "/dev/demos/file-dropzone-demo" },
+      { label: "Number Input", path: "/dev/demos/number-input-demo" },
+      { label: "Radio", path: "/dev/demos/radio-demo" },
+      { label: "Select", path: "/dev/demos/select-demo" },
+      { label: "Slider", path: "/dev/demos/slider-demo" },
+      { label: "Switch", path: "/dev/demos/switch-demo" },
+      { label: "Text Input", path: "/dev/demos/text-input-demo" },
+      { label: "Textarea", path: "/dev/demos/textarea-demo" },
+      { label: "Time Input", path: "/dev/demos/time-input-demo" },
+    ],
+  },
+  {
+    label: "Navigation",
+    items: [
+      { label: "Breadcrumbs", path: "/dev/demos/breadcrumbs-demo" },
+      { label: "Menu", path: "/dev/demos/menu-demo" },
+      { label: "Navbar", path: "/dev/demos/navbar-demo" },
+      { label: "Side Navigation", path: "/dev/demos/side-navigation-demo" },
+      { label: "Tabs", path: "/dev/demos/tabs-demo" },
+      { label: "Toolbar", path: "/dev/demos/toolbar-demo" },
+    ],
+  },
+  {
+    label: "Display",
+    items: [
+      { label: "Avatar", path: "/dev/demos/avatar-demo" },
+      { label: "Badge", path: "/dev/demos/badge-demo" },
+      { label: "Chip", path: "/dev/demos/chip-demo" },
+      { label: "Icon", path: "/dev/demos/icon-demo" },
+      { label: "Logo", path: "/dev/demos/logo-demo" },
+      { label: "Pagination", path: "/dev/demos/pagination-demo" },
+      { label: "Skeleton", path: "/dev/demos/skeleton-demo" },
+      { label: "Stepper", path: "/dev/demos/stepper-demo" },
+      { label: "Table", path: "/dev/demos/table-demo" },
+    ],
+  },
+  {
+    label: "Feedback",
+    items: [
+      { label: "Alert", path: "/dev/demos/alert-demo" },
+      { label: "Handle", path: "/dev/demos/handle-demo" },
+      { label: "Input Feedback", path: "/dev/demos/input-feedback-demo" },
+      { label: "Input Label", path: "/dev/demos/input-label-demo" },
+      { label: "Loader", path: "/dev/demos/loader-demo" },
+      { label: "Modal", path: "/dev/demos/modal-demo" },
+      { label: "Progress", path: "/dev/demos/progress-demo" },
+      { label: "Rating", path: "/dev/demos/rating-demo" },
+      { label: "Toast", path: "/dev/demos/toast-demo" },
+      { label: "Tooltip", path: "/dev/demos/tooltip-demo" },
+    ],
+  },
+  {
+    label: "System",
+    items: [
+      { label: "Theme Switcher", path: "/dev/demos/theme-switcher-demo" },
+    ],
+  },
+];
+
+/**
+ * Check if Dev Panel should be shown based on environment variable
+ */
+export function isDevPanelEnabled(): boolean {
+  return import.meta.env.VITE_DEV_PANEL === "true";
+}

package/templates/react/src/dev/index.ts

@@ -0,0 +1,8 @@
+export { DevPanelProvider } from "./DevPanelProvider";
+export { useDevPanel } from "./useDevPanel";
+export { DevPanelContext } from "./DevPanelContext";
+export type { DevPanelContextType } from "./DevPanelContext";
+export { default as DevPanel } from "./DevPanel";
+export { default as DevRoutes } from "./DevRoutes";
+export { isDevPanelEnabled, devNavItems, demoCategories } from "./config";
+export type { DevNavItem, DevNavCategory } from "./config";

package/templates/react/src/dev/useDevPanel.ts

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+import { DevPanelContext } from "./DevPanelContext";
+import type { DevPanelContextType } from "./DevPanelContext";
+
+/**
+ * Hook to access the Dev Panel context.
+ * Must be used within a DevPanelProvider.
+ */
+export function useDevPanel(): DevPanelContextType {
+  const context = useContext(DevPanelContext);
+  if (context === undefined) {
+    throw new Error("useDevPanel must be used within a DevPanelProvider");
+  }
+  return context;
+}
+
+export default useDevPanel;