nl-d365boilerplate-vite 1.0.0

package/.env.example

@@ -0,0 +1,22 @@
+# ==========================================
+# novalogica Dynamics 365 React Boilerplate
+# Environment Configuration Template
+# ==========================================
+
+# Your D365 organization URL
+VITE_D365_API_URL=https://your-org.crm4.dynamics.com
+
+# Client ID from your Azure App Registration
+CLIENT_ID=your-client-id-here
+
+# OAuth URL (usually no changes needed)
+AUTH_URL=https://login.microsoftonline.com/common/oauth2/authorize?resource=https://your-org.crm4.dynamics.com
+
+CALLBACK_URL=https://callbackurl
+
+# Your D365 access token (this will be automatically managed by the app)
+VITE_D365_TOKEN=your-access-token-here
+
+# Token expiration (automatically managed)
+EXPIRES_IN=4411
+TOKEN_TIMESTAMP=0

package/README.md

@@ -0,0 +1,75 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+
+Note: This will impact Vite dev & build performances.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/bin/cli.js

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const targetDirName = process.argv[2];
+
+if (!targetDirName) {
+  console.error("Please specify the project directory:");
+  console.error("  npm create nl-d365boilerplate-vite <project-directory>");
+  process.exit(1);
+}
+
+const targetPath = path.join(process.cwd(), targetDirName);
+const templatePath = path.join(__dirname, "..");
+
+if (fs.existsSync(targetPath)) {
+  console.error(`Directory ${targetDirName} already exists.`);
+  process.exit(1);
+}
+
+console.log(`Creating a new app in ${targetPath}...`);
+fs.mkdirSync(targetPath, { recursive: true });
+
+const SKIP_FILES = [
+  "node_modules",
+  ".git",
+  ".env",
+  "package-lock.json",
+  "bin",
+  "dist",
+  ".npmignore",
+  ".DS_Store",
+];
+
+function copyDir(src, dest) {
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (SKIP_FILES.includes(entry.name)) {
+      continue;
+    }
+
+    if (entry.isDirectory()) {
+      fs.mkdirSync(destPath, { recursive: true });
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+// Copy files
+copyDir(templatePath, targetPath);
+
+// Update package.json
+const pkgJsonPath = path.join(targetPath, "package.json");
+const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
+
+pkg.name = targetDirName;
+pkg.version = "0.0.0";
+pkg.private = true;
+delete pkg.bin;
+delete pkg.files;
+
+fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, 2));
+
+console.log("\nSuccess! Created project at " + targetPath);
+console.log("Inside that directory, you can run several commands:\n");
+console.log("  npm install");
+console.log("    Installs dependencies.\n");
+console.log("  npm run dev");
+console.log("    Starts the development server.\n");
+console.log("\nWe suggest that you begin by typing:\n");
+console.log(`  cd ${targetDirName}`);
+console.log("  npm install");
+console.log("  npm run dev");

package/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/getToken.js

@@ -0,0 +1,197 @@
+/**
+ * Dataverse Auth Token Manager
+ * Handles automatic OAuth authentication, token validation, and renewal
+ * Usage: node getToken.js
+ */
+
+import puppeteer from "puppeteer";
+import fs from "fs";
+import readline from "readline";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const CONFIG = {
+  AUTH_URL: process.env.AUTH_URL,
+  CALLBACK_URL: process.env.CALLBACK_URL,
+  SCOPE: process.env.SCOPE || "",
+  EXPIRY_MARGIN: 60,
+  BROWSER_TIMEOUT: 300000,
+};
+
+function isTokenValid() {
+  const { VITE_D365_TOKEN, EXPIRES_IN, TOKEN_TIMESTAMP } = process.env;
+
+  if (!VITE_D365_TOKEN || !EXPIRES_IN || !TOKEN_TIMESTAMP) {
+    console.log("⚠️  No valid token found");
+    return false;
+  }
+
+  const currentTime = Math.floor(Date.now() / 1000);
+  const expirationTime =
+    parseInt(TOKEN_TIMESTAMP) + parseInt(EXPIRES_IN) - CONFIG.EXPIRY_MARGIN;
+  const isValid = currentTime < expirationTime;
+
+  if (isValid) {
+    const remainingMinutes = Math.floor((expirationTime - currentTime) / 60);
+    console.log(`ℹ️  Token valid (${remainingMinutes} minutes remaining)`);
+  } else {
+    console.log("⚠️  Token expired - renewal needed");
+  }
+
+  return isValid;
+}
+
+function updateEnvFile(updates) {
+  const envPath = ".env";
+  let envContent = fs.existsSync(envPath)
+    ? fs.readFileSync(envPath, "utf8")
+    : "";
+
+  Object.entries(updates).forEach(([key, value]) => {
+    const regex = new RegExp(`^${key}=.*`, "m");
+    const newLine = `${key}=${value}`;
+
+    envContent = envContent.match(regex)
+      ? envContent.replace(regex, newLine)
+      : envContent + `\n${newLine}`;
+  });
+
+  fs.writeFileSync(envPath, envContent.trim() + "\n");
+}
+
+function promptUser(query) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+
+    rl.question(query, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+async function ensureClientId() {
+  let clientId = process.env.CLIENT_ID;
+
+  if (!clientId) {
+    console.log(
+      "🔑 CLIENT_ID required - find it in Azure Portal > App Registrations",
+    );
+    clientId = await promptUser(
+      "Enter your Azure App Registration Client ID: ",
+    );
+
+    if (!clientId) {
+      throw new Error("CLIENT_ID is required for OAuth authentication");
+    }
+
+    updateEnvFile({ CLIENT_ID: clientId });
+    console.log("✅ CLIENT_ID saved to .env file");
+  }
+
+  return clientId;
+}
+
+function buildAuthUrl(clientId) {
+  const url = new URL(CONFIG.AUTH_URL);
+  url.searchParams.set("client_id", clientId);
+  url.searchParams.set("redirect_uri", CONFIG.CALLBACK_URL);
+  url.searchParams.set("response_type", "token");
+  url.searchParams.set("scope", CONFIG.SCOPE);
+  return url.toString();
+}
+
+function extractTokenFromUrl(url) {
+  const tokenMatch = url.match(/access_token=([^&]+)/);
+  const expiresMatch = url.match(/expires_in=([^&]+)/);
+
+  return {
+    token: tokenMatch ? decodeURIComponent(tokenMatch[1]) : null,
+    expiresIn: expiresMatch ? parseInt(expiresMatch[1], 10) : null,
+  };
+}
+
+async function performBrowserAuth(authUrl) {
+  console.log("🔄 Opening browser for OAuth authentication...");
+  console.log("ℹ️  Complete the sign-in process in the browser");
+
+  const browser = await puppeteer.launch({
+    headless: false,
+    defaultViewport: null,
+  });
+
+  const [page] = await browser.pages();
+
+  try {
+    const tokenPromise = new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error("Authentication timeout"));
+      }, CONFIG.BROWSER_TIMEOUT);
+
+      page.on("request", (request) => {
+        const reqUrl = request.url();
+
+        if (reqUrl.startsWith(CONFIG.CALLBACK_URL)) {
+          clearTimeout(timeout);
+          console.log("✅ OAuth callback detected");
+
+          const { token, expiresIn } = extractTokenFromUrl(reqUrl);
+
+          if (token && expiresIn) {
+            resolve({ token, expiresIn });
+          } else {
+            reject(new Error("Failed to extract token from callback"));
+          }
+        }
+      });
+    });
+
+    await page.goto(authUrl, { waitUntil: "networkidle2" });
+    return await tokenPromise;
+  } finally {
+    await browser.close();
+  }
+}
+
+async function authenticateUser() {
+  const clientId = await ensureClientId();
+  const authUrl = buildAuthUrl(clientId);
+  const { token, expiresIn } = await performBrowserAuth(authUrl);
+
+  const timestamp = Math.floor(Date.now() / 1000);
+  updateEnvFile({
+    VITE_D365_TOKEN: token,
+    EXPIRES_IN: expiresIn.toString(),
+    TOKEN_TIMESTAMP: timestamp.toString(),
+  });
+
+  const expiryMinutes = Math.floor(expiresIn / 60);
+  console.log("✅ Authentication successful!");
+  console.log(`🕒 Token expires in ${expiryMinutes} minutes`);
+  console.log("💾 Token saved to .env file");
+}
+
+(async () => {
+  try {
+    console.log("🚀 Dataverse Token Manager\n");
+
+    if (isTokenValid()) {
+      console.log("✅ Current token is valid - no action needed");
+      console.log("🚀 Run your application with: npm start");
+      return;
+    }
+
+    console.log("🔐 Starting OAuth authentication...");
+    await authenticateUser();
+    console.log("🎉 Token management completed!");
+    console.log("🚀 Run your application with: npm start");
+  } catch (error) {
+    console.log(`❌ Error: ${error.message}`);
+    console.log("💡 Check your CLIENT_ID and Azure App Registration settings");
+    process.exit(1);
+  }
+})();

package/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>nl-d365boilerplate-vite</title>
+  <!-- Dataverse ClientGlobalContext - Required for Xrm context -->
+  <script type="text/javascript" src="../../ClientGlobalContext.js.aspx"></script>
+</head>
+<script>
+  (function () {
+    const storageKey = "novalogica-ui-theme";
+    const theme = localStorage.getItem(storageKey);
+    const root = window.document.documentElement;
+
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  })();
+</script>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "nl-d365boilerplate-vite",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "bin": {
+    "nl-d365boilerplate-vite": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "tsconfig.app.json",
+    "tsconfig.node.json",
+    "postcss.config.js",
+    "tailwind.config.js",
+    "components.json",
+    "eslint.config.js",
+    "getToken.js",
+    ".env.example",
+    "README.md"
+  ],
+  "scripts": {
+    "predev": "node getToken.js",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tailwindcss/vite": "^4.1.18",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dotenv": "^17.2.3",
+    "dynamics-web-api": "^2.4.0",
+    "hugeicons-react": "^0.4.0",
+    "puppeteer": "^24.36.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "vite-plugin-singlefile": "^2.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "terser": "^5.46.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,28 @@
+import { ThemeProvider } from "@/providers/theme-provider";
+import { NavigationProvider } from "./providers/navigation-provider";
+import { PageRenderer } from "./components/page-render";
+import NlHeader from "./components/nl-header";
+import { DataverseProvider } from "./providers/dataverse-provider";
+
+function App() {
+  return (
+    <ThemeProvider
+      defaultTheme="light"
+      storageKey="novalogica-ui-theme"
+      disableTransitionOnChange
+    >
+      <DataverseProvider>
+        <NavigationProvider>
+          <div className="flex min-h-screen w-full flex-col bg-background">
+            <NlHeader />
+            <main className="flex-1 flex flex-col">
+              <PageRenderer />
+            </main>
+          </div>
+        </NavigationProvider>
+      </DataverseProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;

package/src/assets/images/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>