nl-d365boilerplate-vite 1.0.0

package/src/pages/Home.tsx

@@ -0,0 +1,132 @@
+import { Button } from "@/components/ui/button";
+import {
+  BookOpen01Icon,
+  Rocket01Icon,
+  CheckmarkCircle02Icon,
+  ArrowRight01Icon,
+  TestTube01Icon,
+} from "hugeicons-react";
+import { useNavigation } from "@/hooks/useNavigation";
+import { Badge } from "@/components/ui/badge";
+import { PAGES } from "@/config/pages.config";
+
+const Home = () => {
+  const { navigateTo } = useNavigation();
+  const currentYear = new Date().getFullYear();
+
+  const features = [
+    "Type-safe Dataverse integration",
+    "Enterprise-grade authentication",
+    "Production-ready architecture",
+    "Modern React patterns",
+  ];
+
+  return (
+    <div className="flex flex-col min-h-screen bg-background">
+      {/* Main Content */}
+      <main className="flex-1 flex items-center justify-center px-6 py-12">
+        <div className="w-full max-w-3xl mx-auto">
+          {/* Hero Section */}
+          <div className="text-center space-y-8">
+            {/* Brand Badge */}
+            <Badge
+              variant="outline"
+              className="px-4 py-2 text-sm font-medium gap-2 border-primary/20"
+            >
+              <Rocket01Icon className="w-4 h-4 text-primary" />
+              D365 Development Boilerplate
+            </Badge>
+
+            {/* Main Title */}
+            <div className="space-y-4">
+              <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-foreground">
+                novalogica
+              </h1>
+              <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+                A production-ready React boilerplate for building enterprise
+                Dynamics 365 applications with modern tooling.
+              </p>
+            </div>
+
+            {/* CTA Buttons */}
+            <div className="flex flex-col sm:flex-row gap-3 justify-center pt-4">
+              <Button
+                variant="gradient"
+                size="lg"
+                leftIcon={TestTube01Icon}
+                onClick={() => navigateTo(PAGES.demo)}
+              >
+                View Demo
+              </Button>
+              <Button
+                variant="soft"
+                size="lg"
+                leftIcon={BookOpen01Icon}
+                onClick={() => navigateTo(PAGES.documentation)}
+              >
+                Documentation
+              </Button>
+            </div>
+
+            {/* Features List */}
+            <div className="pt-8">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-lg mx-auto text-left">
+                {features.map((feature) => (
+                  <div
+                    key={feature}
+                    className="flex items-center gap-2 text-sm text-muted-foreground"
+                  >
+                    <CheckmarkCircle02Icon className="w-4 h-4 text-primary shrink-0" />
+                    <span>{feature}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Tech Stack */}
+            <div className="pt-8 border-t border-border/50">
+              <p className="text-xs text-muted-foreground/60 uppercase tracking-wider mb-4">
+                Built with
+              </p>
+              <div className="flex flex-wrap justify-center gap-2">
+                {[
+                  "Vite 7",
+                  "React 19",
+                  "TypeScript",
+                  "Tailwind CSS 4",
+                  "shadcn/ui",
+                  "dynamics-web-api",
+                ].map((tech) => (
+                  <span
+                    key={tech}
+                    className="px-3 py-1 text-xs text-muted-foreground bg-muted/50 rounded-full"
+                  >
+                    {tech}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="py-6 px-6 border-t border-border/50">
+        <div className="max-w-3xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-muted-foreground">
+          <p>© {currentYear} novalogica. All rights reserved.</p>
+          <a
+            href="https://github.com/novalogica"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1 hover:text-foreground transition-colors"
+          >
+            View on GitHub
+            <ArrowRight01Icon className="w-3 h-3" />
+          </a>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Home;

package/src/pages/index.ts

@@ -0,0 +1,4 @@
+import Home from "./Home";
+import Documentation from "./Documentation";
+import Demo from "./Demo";
+export { Home, Documentation, Demo };

package/src/providers/dataverse-provider.tsx

@@ -0,0 +1,81 @@
+import { DynamicsWebApi } from "dynamics-web-api";
+import { type ReactNode, useEffect, useState } from "react";
+
+import { DataverseContext } from "@/contexts/dataverse-context";
+
+interface DataverseProviderProps {
+  children: ReactNode;
+}
+
+declare global {
+  interface Window {
+    Xrm?: {
+      WebApi?: unknown;
+    };
+  }
+}
+
+const isInD365 = (): boolean => {
+  try {
+    return typeof window.parent?.Xrm?.WebApi !== "undefined";
+  } catch {
+    return false;
+  }
+};
+
+const onTokenRefresh = async (): Promise<string | null> => {
+  const token = import.meta.env.VITE_D365_TOKEN;
+
+  if (!token) {
+    console.error("No authentication token available");
+    return null;
+  }
+
+  return token;
+};
+
+export const DataverseProvider = ({ children }: DataverseProviderProps) => {
+  const [api, setApi] = useState<DynamicsWebApi | null>(null);
+  const [isReady, setIsReady] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const initialize = () => {
+      try {
+        const baseConfig = {
+          dataApi: { version: import.meta.env.VITE_D365_API_VERSION || "9.2" },
+        };
+
+        const config = isInD365()
+          ? baseConfig
+          : {
+              ...baseConfig,
+              serverUrl: import.meta.env.VITE_D365_API_URL,
+              onTokenRefresh,
+            };
+
+        const apiInstance = new DynamicsWebApi(config);
+
+        setApi(apiInstance);
+        setIsReady(true);
+        setError(null);
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : "Failed to initialize Dataverse connection";
+        setError(errorMessage);
+        setApi(null);
+        setIsReady(false);
+      }
+    };
+
+    initialize();
+  }, []);
+
+  return (
+    <DataverseContext.Provider value={{ api, isReady, error }}>
+      {children}
+    </DataverseContext.Provider>
+  );
+};

package/src/providers/navigation-provider.tsx

@@ -0,0 +1,33 @@
+import { type ReactNode, useCallback, useState } from "react";
+
+import { DEFAULT_PAGE } from "@/config/pages.config";
+import type { PageConfig } from "@/config/pages.config";
+import { NavigationContext } from "@/contexts/navigation-context";
+
+export function NavigationProvider({ children }: { children: ReactNode }) {
+  const [currentPage, setCurrentPage] = useState<PageConfig>(DEFAULT_PAGE);
+  const [history, setHistory] = useState<PageConfig[]>([DEFAULT_PAGE]);
+
+  const navigate = useCallback((page: PageConfig) => {
+    setCurrentPage(page);
+    setHistory((prev) => [...prev, page]);
+  }, []);
+
+  const goBack = useCallback(() => {
+    if (history.length > 1) {
+      const newHistory = history.slice(0, -1);
+      setHistory(newHistory);
+      setCurrentPage(newHistory[newHistory.length - 1]);
+    }
+  }, [history]);
+
+  const canGoBack = history.length > 1;
+
+  return (
+    <NavigationContext.Provider
+      value={{ currentPage, navigate, canGoBack, goBack }}
+    >
+      {children}
+    </NavigationContext.Provider>
+  );
+}

package/src/providers/theme-provider.tsx

@@ -0,0 +1,92 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light";
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+  disableTransitionOnChange?: boolean;
+}
+
+interface ThemeProviderState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const initialState: ThemeProviderState = {
+  theme: "light",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "novalogica-ui-theme",
+  disableTransitionOnChange = false,
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (disableTransitionOnChange) {
+      const css = document.createElement("style");
+      css.appendChild(
+        document.createTextNode(
+          `* {
+            -webkit-transition: none !important;
+            -moz-transition: none !important;
+            -o-transition: none !important;
+            -ms-transition: none !important;
+            transition: none !important;
+          }`,
+        ),
+      );
+      document.head.appendChild(css);
+
+      root.classList.add(theme);
+
+      // Force restyle
+      (() => window.getComputedStyle(document.body))();
+
+      // Wait for next tick before removing
+      setTimeout(() => {
+        document.head.removeChild(css);
+      }, 1);
+    } else {
+      root.classList.add(theme);
+    }
+  }, [theme, disableTransitionOnChange]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

package/src/public/novalogica-logo.svg

@@ -0,0 +1,24 @@
+<svg width="122" height="122" viewBox="0 0 122 122" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.2285 11.7134C55.6976 5.24425 66.1862 5.24427 72.6553 11.7134L110.287 49.3447C116.756 55.8138 116.756 66.3023 110.287 72.7714L72.7714 110.287C66.3023 116.756 55.8138 116.756 49.3446 110.287L11.7133 72.6553C5.24421 66.1862 5.24423 55.6977 11.7134 49.2286L49.2285 11.7134ZM63.5492 20.8195C62.1092 19.3795 59.7746 19.3795 58.3346 20.8195L20.8194 58.3346C19.3795 59.7746 19.3795 62.1093 20.8194 63.5492L58.4507 101.181C59.8907 102.62 62.2254 102.62 63.6653 101.181L101.18 63.6654C102.62 62.2254 102.62 59.8907 101.18 58.4508L63.5492 20.8195Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.2867 102.279C27.1379 102.279 19.7214 94.8621 19.7214 85.7133L19.7214 36.2928C19.7214 27.1441 27.1379 19.7276 36.2867 19.7276L85.7072 19.7276C94.8559 19.7276 102.272 27.1441 102.272 36.2928L102.272 85.7133C102.272 94.8621 94.8559 102.279 85.7072 102.279L36.2867 102.279ZM32.5994 85.7133C32.5994 87.7498 34.2502 89.4006 36.2867 89.4006L85.7072 89.4006C87.7436 89.4006 89.3945 87.7498 89.3945 85.7133L89.3945 36.2928C89.3945 34.2564 87.7436 32.6055 85.7072 32.6055L36.2867 32.6055C34.2502 32.6055 32.5994 34.2564 32.5994 36.2928L32.5994 85.7133Z" fill="url(#paint1_linear)" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M80.6696 19.7277L72.6553 11.7134C66.1862 5.24431 55.6977 5.2443 49.2286 11.7134L11.7134 49.2286C5.2443 55.6977 5.24428 66.1862 11.7134 72.6554L19.7215 80.6635L19.7215 60.728L19.7473 60.7023C19.8031 59.84 20.1605 58.9937 20.8195 58.3347L58.3347 20.8195C59.0085 20.1457 59.8783 19.7872 60.7606 19.744L60.7769 19.7277L80.6696 19.7277Z" fill="url(#paint2_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M102.272 41.3305L110.287 49.3446C116.756 55.8138 116.756 66.3023 110.287 72.7714L72.7714 110.287C66.3023 116.756 55.8138 116.756 49.3446 110.287L41.3367 102.279L60.9419 102.279L60.9614 102.259C61.937 102.285 62.9208 101.925 63.6653 101.18L101.18 63.6653C101.883 62.9626 102.243 62.0467 102.26 61.1257L102.272 61.1132L102.272 41.3305Z" fill="url(#paint3_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="120.564" y1="83.8165" x2="9.83416" y2="56.3893" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429691"/>
+<stop offset="1" stop-color="#95E8C2"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="36.3003" y1="5.7623" x2="92.101" y2="98.5145" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429691"/>
+<stop offset="1" stop-color="#95E8C2"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="28.5819" y1="32.0553" x2="56.5372" y2="59.2992" gradientUnits="userSpaceOnUse">
+<stop stop-color="#89DDBC"/>
+<stop offset="1" stop-color="#6BBEA9"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="41.3367" y1="78.2345" x2="115.138" y2="78.2345" gradientUnits="userSpaceOnUse">
+<stop stop-color="#75C8B0"/>
+<stop offset="1" stop-color="#51A49A"/>
+</linearGradient>
+</defs>
+</svg>

package/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
+import { viteSingleFile } from "vite-plugin-singlefile";
+
+export default defineConfig({
+  plugins: [react(), viteSingleFile(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  build: {
+    target: "es2015",
+    cssCodeSplit: false,
+    assetsInlineLimit: 100000000,
+    minify: "terser",
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
+  },
+});