@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/src/components/ThemeToggleSimple.tsx

@@ -0,0 +1,157 @@
+import { useTheme } from "../hooks/useTheme";
+import { type Theme } from "../contexts/ThemeContextData";
+import { useState, useEffect } from "react";
+import ModusButton from "./ModusButton";
+
+/**
+ * Props for the ThemeToggleSimple component.
+ */
+interface ThemeToggleSimpleProps {
+  /** A custom CSS class to apply to the component. */
+  className?: string;
+}
+
+/**
+ * Renders the content of the simple theme toggle.
+ * @param {ThemeToggleSimpleProps} props - The component props.
+ * @returns {JSX.Element} The rendered theme toggle content.
+ */
+function ThemeToggleSimpleContent({ className = '' }: ThemeToggleSimpleProps) {
+  const { theme, setTheme } = useTheme();
+
+  const themeGroups = [
+    {
+      name: "Classic",
+      light: "modus-classic-light" as Theme,
+      dark: "modus-classic-dark" as Theme,
+    },
+    {
+      name: "Modern",
+      light: "modus-modern-light" as Theme,
+      dark: "modus-modern-dark" as Theme,
+    },
+    {
+      name: "Connect",
+      light: "connect-light" as Theme,
+      dark: "connect-dark" as Theme,
+    },
+  ];
+
+  const getCurrentGroup = () => {
+    return (
+      themeGroups.find(
+        (group) => theme === group.light || theme === group.dark
+      ) || themeGroups[0]
+    );
+  };
+
+  const getCurrentMode = () => {
+    return theme.includes("dark") ? "dark" : "light";
+  };
+
+  const toggleMode = () => {
+    const currentGroup = getCurrentGroup();
+    const newMode = getCurrentMode() === "light" ? "dark" : "light";
+    const newTheme =
+      newMode === "light" ? currentGroup.light : currentGroup.dark;
+    setTheme(newTheme);
+  };
+
+  const switchGroup = (groupName: string) => {
+    const group = themeGroups.find((g) => g.name === groupName);
+    if (group) {
+      const currentMode = getCurrentMode();
+      const newTheme = currentMode === "light" ? group.light : group.dark;
+      setTheme(newTheme);
+    }
+  };
+
+  return (
+    <div className={className}>
+      <div className="space-y-6">
+        <div className="text-lg font-semibold text-foreground">
+          Theme Selection
+        </div>
+
+        {/* Group Selection */}
+        <div className="space-y-2">
+          <div className="text-sm font-medium text-foreground">
+            Theme Variant
+          </div>
+          <div className="flex gap-2">
+            {themeGroups.map((group) => (
+              <ModusButton
+                key={group.name}
+                color={
+                  getCurrentGroup().name === group.name
+                    ? "primary"
+                    : "secondary"
+                }
+                variant={
+                  getCurrentGroup().name === group.name ? "filled" : "outlined"
+                }
+                size="sm"
+                onButtonClick={() => switchGroup(group.name)}
+              >
+                {group.name}
+              </ModusButton>
+            ))}
+          </div>
+        </div>
+
+        {/* Mode Toggle */}
+        <div className="space-y-2">
+          <div className="text-sm font-medium text-foreground">Mode</div>
+          <ModusButton
+            color="primary"
+            variant="outlined"
+            size="md"
+            icon={getCurrentMode() === "light" ? "sun" : "moon"}
+            onButtonClick={toggleMode}
+          >
+            {getCurrentMode() === "light" ? "Light Mode" : "Dark Mode"}
+          </ModusButton>
+        </div>
+
+        {/* Current Theme Display */}
+        <div className="text-sm text-muted-foreground">
+          Current: {getCurrentGroup().name} {getCurrentMode()}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ThemeToggleSimple(props: ThemeToggleSimpleProps) {
+  const [mounted, setMounted] = useState(false);
+
+  // Prevent hydration mismatch
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setMounted(true);
+    }, 0);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <div className={props.className || ""}>
+        <div className="space-y-6">
+          <div className="text-lg font-semibold text-foreground">
+            Theme Selection
+          </div>
+          <div className="animate-pulse">
+            <div className="h-8 w-32 rounded bg-muted mb-4" />
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[1, 2, 3, 4, 5, 6].map((i) => (
+                <div key={i} className="h-6 w-24 rounded bg-muted" />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <ThemeToggleSimpleContent {...props} />;
+}

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

@@ -0,0 +1,196 @@
+import { lazy } from "react";
+
+/**
+ * Route configuration for demo pages using React lazy loading.
+ *
+ * NOTE: This file is deprecated. Demo routes are now handled by DevRoutes.tsx
+ * under the /dev/ prefix. This file is kept for reference only.
+ *
+ * The lazy loading pattern helps reduce the initial JavaScript bundle size
+ * by splitting demo pages into separate chunks that are only loaded when needed.
+ *
+ * @deprecated Use DevRoutes component from src/dev/ instead
+ * @see {@link https://react.dev/reference/react/lazy} - React lazy loading documentation
+ */
+export const demoRoutes = [
+  {
+    path: "/dev/demos/button-demo",
+    component: lazy(() => import("../demos/button-demo/page")),
+  },
+  {
+    path: "/dev/demos/button-group-demo",
+    component: lazy(() => import("../demos/button-group-demo/page")),
+  },
+  {
+    path: "/dev/demos/accordion-demo",
+    component: lazy(() => import("../demos/accordion-demo/page")),
+  },
+  {
+    path: "/dev/demos/alert-demo",
+    component: lazy(() => import("../demos/alert-demo/page")),
+  },
+  {
+    path: "/dev/demos/autocomplete-demo",
+    component: lazy(() => import("../demos/autocomplete-demo/page")),
+  },
+  {
+    path: "/dev/demos/avatar-demo",
+    component: lazy(() => import("../demos/avatar-demo/page")),
+  },
+  {
+    path: "/dev/demos/badge-demo",
+    component: lazy(() => import("../demos/badge-demo/page")),
+  },
+  {
+    path: "/dev/demos/breadcrumbs-demo",
+    component: lazy(() => import("../demos/breadcrumbs-demo/page")),
+  },
+  {
+    path: "/dev/demos/card-demo",
+    component: lazy(() => import("../demos/card-demo/page")),
+  },
+  {
+    path: "/dev/demos/checkbox-demo",
+    component: lazy(() => import("../demos/checkbox-demo/page")),
+  },
+  {
+    path: "/dev/demos/chip-demo",
+    component: lazy(() => import("../demos/chip-demo/page")),
+  },
+  {
+    path: "/dev/demos/date-demo",
+    component: lazy(() => import("../demos/date-demo/page")),
+  },
+  {
+    path: "/dev/demos/dropdown-demo",
+    component: lazy(() => import("../demos/dropdown-demo/page")),
+  },
+  {
+    path: "/dev/demos/file-dropzone-demo",
+    component: lazy(() => import("../demos/file-dropzone-demo/page")),
+  },
+  {
+    path: "/dev/demos/handle-demo",
+    component: lazy(() => import("../demos/handle-demo/page")),
+  },
+  {
+    path: "/dev/demos/icon-demo",
+    component: lazy(() => import("../demos/icon-demo/page")),
+  },
+  {
+    path: "/dev/demos/input-feedback-demo",
+    component: lazy(() => import("../demos/input-feedback-demo/page")),
+  },
+  {
+    path: "/dev/demos/input-label-demo",
+    component: lazy(() => import("../demos/input-label-demo/page")),
+  },
+  {
+    path: "/dev/demos/loader-demo",
+    component: lazy(() => import("../demos/loader-demo/page")),
+  },
+  {
+    path: "/dev/demos/logo-demo",
+    component: lazy(() => import("../demos/logo-demo/page")),
+  },
+  {
+    path: "/dev/demos/menu-demo",
+    component: lazy(() => import("../demos/menu-demo/page")),
+  },
+  {
+    path: "/dev/demos/modal-demo",
+    component: lazy(() => import("../demos/modal-demo/page")),
+  },
+  {
+    path: "/dev/demos/navbar-demo",
+    component: lazy(() => import("../demos/navbar-demo/page")),
+  },
+  {
+    path: "/dev/demos/number-input-demo",
+    component: lazy(() => import("../demos/number-input-demo/page")),
+  },
+  {
+    path: "/dev/demos/pagination-demo",
+    component: lazy(() => import("../demos/pagination-demo/page")),
+  },
+  {
+    path: "/dev/demos/panel-demo",
+    component: lazy(() => import("../demos/panel-demo/page")),
+  },
+  {
+    path: "/dev/demos/progress-demo",
+    component: lazy(() => import("../demos/progress-demo/page")),
+  },
+  {
+    path: "/dev/demos/radio-demo",
+    component: lazy(() => import("../demos/radio-demo/page")),
+  },
+  {
+    path: "/dev/demos/rating-demo",
+    component: lazy(() => import("../demos/rating-demo/page")),
+  },
+  {
+    path: "/dev/demos/select-demo",
+    component: lazy(() => import("../demos/select-demo/page")),
+  },
+  {
+    path: "/dev/demos/side-navigation-demo",
+    component: lazy(() => import("../demos/side-navigation-demo/page")),
+  },
+  {
+    path: "/dev/demos/skeleton-demo",
+    component: lazy(() => import("../demos/skeleton-demo/page")),
+  },
+  {
+    path: "/dev/demos/slider-demo",
+    component: lazy(() => import("../demos/slider-demo/page")),
+  },
+  {
+    path: "/dev/demos/stepper-demo",
+    component: lazy(() => import("../demos/stepper-demo/page")),
+  },
+  {
+    path: "/dev/demos/switch-demo",
+    component: lazy(() => import("../demos/switch-demo/page")),
+  },
+  {
+    path: "/dev/demos/table-demo",
+    component: lazy(() => import("../demos/table-demo/page")),
+  },
+  {
+    path: "/dev/demos/tabs-demo",
+    component: lazy(() => import("../demos/tabs-demo/page")),
+  },
+  {
+    path: "/dev/demos/textarea-demo",
+    component: lazy(() => import("../demos/textarea-demo/page")),
+  },
+  {
+    path: "/dev/demos/text-input-demo",
+    component: lazy(() => import("../demos/text-input-demo/page")),
+  },
+  {
+    path: "/dev/demos/theme-switcher-demo",
+    component: lazy(() => import("../demos/theme-switcher-demo/page")),
+  },
+  {
+    path: "/dev/demos/time-input-demo",
+    component: lazy(() => import("../demos/time-input-demo/page")),
+  },
+  {
+    path: "/dev/demos/toast-demo",
+    component: lazy(() => import("../demos/toast-demo/page")),
+  },
+  {
+    path: "/dev/demos/toolbar-demo",
+    component: lazy(() => import("../demos/toolbar-demo/page")),
+  },
+  {
+    path: "/dev/demos/tooltip-demo",
+    component: lazy(() => import("../demos/tooltip-demo/page")),
+  },
+  {
+    path: "/dev/demos/utility-panel-demo",
+    component: lazy(() => import("../demos/utility-panel-demo/page")),
+  },
+];

package/templates/react/src/contexts/ThemeContext.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { ThemeContext, type Theme } from "./ThemeContextData";
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+const VALID_THEMES: Theme[] = [
+  "modus-classic-light",
+  "modus-classic-dark",
+  "modus-modern-light",
+  "modus-modern-dark",
+  "connect-light",
+  "connect-dark",
+];
+
+/**
+ * A provider component that manages the application's theme.
+ * @param {ThemeProviderProps} props - The component props.
+ * @returns {JSX.Element} The rendered theme provider.
+ */
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>('modus-classic-light');
+  const [mounted, setMounted] = useState(false);
+
+  // Derived state
+  const isDark = theme.includes("dark");
+  const isModern = theme.includes("modern");
+
+  // Load theme from localStorage on mount
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const savedTheme = window.localStorage.getItem(
+          "preferred-theme"
+        ) as Theme | null;
+
+        if (savedTheme && VALID_THEMES.includes(savedTheme)) {
+          setThemeState(savedTheme);
+        }
+      } catch (error) {
+        console.warn("Unable to read stored theme preference:", error);
+      }
+    }
+    setMounted(true);
+  }, []);
+
+  // Apply theme to document when it changes
+  useEffect(() => {
+    if (!mounted) return;
+
+    const html = document.documentElement;
+
+    // Set theme attribute (official Modus way)
+    html.setAttribute("data-theme", theme);
+
+    // Save to localStorage
+    if (typeof window !== "undefined") {
+      try {
+        window.localStorage.setItem("preferred-theme", theme);
+      } catch (error) {
+        console.warn("Unable to persist theme preference:", error);
+      }
+    }
+  }, [theme, mounted]);
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+  };
+
+  // Prevent hydration mismatch by not rendering until mounted
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, isDark, isModern }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

package/templates/react/src/contexts/ThemeContextData.tsx

@@ -0,0 +1,89 @@
+import { createContext } from "react";
+
+/**
+ * Available theme options for the Modus Design System.
+ *
+ * The Modus Design System supports 6 distinct themes organized into
+ * three families with light and dark variants each:
+ *
+ * - **Classic**: Traditional Modus design language
+ * - **Modern**: Contemporary design with updated styling
+ * - **Connect**: Specialized theme for Trimble Connect applications
+ *
+ * @example
+ * // Using theme in components
+ * const { theme, setTheme } = useTheme();
+ * setTheme('modus-modern-dark');
+ *
+ * @example
+ * // Theme validation
+ * const isValidTheme = (theme: string): theme is Theme => {
+ *   return ['modus-classic-light', 'modus-classic-dark',
+ *           'modus-modern-light', 'modus-modern-dark',
+ *           'connect-light', 'connect-dark'].includes(theme);
+ * };
+ *
+ * @see {@link ThemeContextType} - Theme context interface
+ * @see {@link useTheme} - Hook for accessing theme context
+ */
+export type Theme =
+  | "modus-classic-light"
+  | "modus-classic-dark"
+  | "modus-modern-light"
+  | "modus-modern-dark"
+  | "connect-light"
+  | "connect-dark";
+
+/**
+ * Represents the shape of the theme context.
+ *
+ * This interface defines the structure of the theme context value that
+ * is provided to all components within the ThemeProvider. It includes
+ * the current theme, theme setter function, and computed theme properties.
+ *
+ * @example
+ * // Using theme context in a component
+ * const { theme, setTheme, isDark, isModern } = useTheme();
+ *
+ * // Conditional rendering based on theme
+ * return (
+ *   <div className={isDark ? 'dark-theme' : 'light-theme'}>
+ *     {isModern ? 'Modern UI' : 'Classic UI'}
+ *   </div>
+ * );
+ *
+ * @see {@link Theme} - Available theme options
+ * @see {@link useTheme} - Hook for accessing theme context
+ */
+export interface ThemeContextType {
+  /** The current theme. */
+  theme: Theme;
+  /** A function to set the theme. */
+  setTheme: (theme: Theme) => void;
+  /** Whether the current theme is a dark theme. */
+  isDark: boolean;
+  /** Whether the current theme is a modern theme. */
+  isModern: boolean;
+}
+
+/**
+ * The context for managing the application's theme.
+ *
+ * This React context provides theme state and functionality to all
+ * components within the ThemeProvider. It uses undefined as the default
+ * value to ensure proper error handling when the context is accessed
+ * outside of a ThemeProvider.
+ *
+ * @example
+ * // Accessing theme context
+ * const themeContext = useContext(ThemeContext);
+ * if (!themeContext) {
+ *   throw new Error('useTheme must be used within a ThemeProvider');
+ * }
+ *
+ * @see {@link ThemeContextType} - Context value interface
+ * @see {@link useTheme} - Recommended hook for accessing theme context
+ */
+export const ThemeContext = createContext<ThemeContextType | undefined>(
+  undefined
+);