@burdenoff/microfe-movethewheels 2026.510.105

package/src/dev/main.tsx

@@ -0,0 +1,110 @@
+/**
+ * Development entry point for testing MoveTheWheels microfrontend
+ */
+import { StrictMode, useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
+import { MoveTheWheelsRoot } from '../movethewheels';
+import './styles.css';
+
+/**
+ * Apply dark mode class to document based on system preference
+ */
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsDark(e.matches);
+    };
+
+    // Apply dark class to document
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      document.documentElement.setAttribute('data-theme', 'light');
+    }
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [isDark]);
+
+  return { isDark, setIsDark };
+}
+
+/**
+ * Wrapper component that provides navigate function to MoveTheWheelsRoot
+ */
+function MoveTheWheelsApp() {
+  const navigate = useNavigate();
+
+  return (
+    <MoveTheWheelsRoot
+      basePath="/movethewheels"
+      navigate={navigate}
+      apiGatewayUrl="http://localhost:3724/graphql"
+      currentUser={{ id: '1', email: 'dev@example.com', firstName: 'Dev', lastName: 'User' }}
+      workspaceId="ws-dev-123"
+      authToken="dev-token"
+    />
+  );
+}
+
+/**
+ * Dashboard placeholder for redirect testing
+ */
+function Dashboard() {
+  const navigate = useNavigate();
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/50">
+      <div className="bg-background p-8 rounded-xl shadow-lg text-center border">
+        <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
+        <p className="text-muted-foreground mb-6">Welcome to MoveTheWheels!</p>
+        <button
+          onClick={() => navigate('/movethewheels')}
+          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+        >
+          Go to MoveTheWheels
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * App root with routing and dark mode support
+ */
+function App() {
+  // Initialize dark mode detection
+  useDarkMode();
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/movethewheels/*" element={<MoveTheWheelsApp />} />
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/" element={<Navigate to="/movethewheels" replace />} />
+        <Route path="*" element={<Navigate to="/movethewheels" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+// Mount the app
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  createRoot(rootElement).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}

package/src/dev/styles.css

@@ -0,0 +1,139 @@
+/**
+ * Development styles for MoveTheWheels microfrontend
+ * 
+ * In production, these styles come from the host application.
+ * This file provides basic styling for standalone development.
+ */
+
+@import 'tailwindcss';
+
+/* CSS Variables for theming */
+:root {
+  /* Light theme colors */
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+}
+
+/* Base styles */
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Utility classes for common patterns */
+.bg-background { background-color: hsl(var(--background)); }
+.bg-foreground { background-color: hsl(var(--foreground)); }
+.bg-card { background-color: hsl(var(--card)); }
+.bg-primary { background-color: hsl(var(--primary)); }
+.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
+.bg-secondary { background-color: hsl(var(--secondary)); }
+.bg-muted { background-color: hsl(var(--muted)); }
+.bg-muted\/50 { background-color: hsl(var(--muted) / 0.5); }
+.bg-accent { background-color: hsl(var(--accent)); }
+.bg-destructive { background-color: hsl(var(--destructive)); }
+.bg-destructive\/10 { background-color: hsl(var(--destructive) / 0.1); }
+
+.text-foreground { color: hsl(var(--foreground)); }
+.text-primary { color: hsl(var(--primary)); }
+.text-primary-foreground { color: hsl(var(--primary-foreground)); }
+.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
+.text-muted-foreground { color: hsl(var(--muted-foreground)); }
+.text-destructive { color: hsl(var(--destructive)); }
+
+.border-border { border-color: hsl(var(--border)); }
+.border-primary { border-color: hsl(var(--primary)); }
+.border-primary\/30 { border-color: hsl(var(--primary) / 0.3); }
+.border-destructive { border-color: hsl(var(--destructive)); }
+
+/* Animation utilities */
+@keyframes animate-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-in {
+  animation: animate-in 0.3s ease-out;
+}
+
+.fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+
+.slide-in-from-bottom-4 {
+  --tw-enter-translate-y: 1rem;
+}
+
+.zoom-in-95 {
+  --tw-enter-scale: 0.95;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--muted));
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}

package/src/generated/global-operations.ts

@@ -0,0 +1,2 @@
+// @ts-nocheck
+import { gql } from '@apollo/client';