create-bluecopa-react-app 1.0.41 → 1.0.43

package/templates/latest/app/single-spa.tsx

@@ -1,218 +1,101 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { createRoot, type Root } from "react-dom/client";
-import singleSpaReact from "single-spa-react";
-import {
-  MemoryRouter,
-  BrowserRouter,
-  useNavigate,
-  useLocation,
-} from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 import App from "./app";
-import type { AppProps } from "single-spa";
+import type { MfeProps } from "~/types";
 
-// Single-spa lifecycle props interface
-interface LifecycleProps {
+/** Props passed by the host app when mounting this MFE. */
+interface MountProps extends MfeProps {
+  /** The DOM element to render into (required). */
   domElement: HTMLElement;
-  basename?: string;
-  singleSpa?: {
-    name: string;
-    mountParcel: Function;
-    getProps: () => any;
-  };
+  /** Aliases the host may use instead of domElement. */
+  container?: HTMLElement;
+  element?: HTMLElement;
+  root?: HTMLElement;
+  /** Alias for basename used by some hosts. */
+  baseUrl?: string;
 }
 
-let root: Root | null = null;
+let reactRoot: Root | null = null;
 
-// Helper function to extract path from browser URL
-function getInitialPath(basename?: string): string {
-  const currentPath = window.location.pathname;
-  const search = window.location.search;
-  const hash = window.location.hash;
-
-  // If basename is provided, extract the path after basename
-  let pathAfterBasename = currentPath;
-  if (basename && currentPath.startsWith(basename)) {
-    pathAfterBasename = currentPath.slice(basename.length) || "/";
-  }
-
-  // Combine path, search params, and hash
-  return pathAfterBasename + search + hash;
-}
-
-// Component to sync MemoryRouter navigation with browser URL
-const RouterSync: React.FC<{ basename?: string }> = ({ basename }) => {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    // Get the current path from MemoryRouter
-    const mainAppPath = window.location.pathname;
-    if (mainAppPath.includes("/apps/ext/")) {
-      const currentPath = location.pathname;
-      const search = location.search || "";
-      const hash = location.hash || "";
-
-      // Calculate the full URL path
-      const basenamePath = basename || "";
-      const fullPath = basenamePath + currentPath + search + hash;
-
-      // Update browser URL without reloading the page
-      const currentBrowserPath =
-        window.location.pathname +
-        window.location.search +
-        window.location.hash;
-      if (currentBrowserPath !== fullPath) {
-        // Use pushState to maintain browser history for back/forward buttons
-        window.history.pushState(
-          { ...window.history.state, path: fullPath },
-          "",
-          fullPath
-        );
-      }
-    }
-  }, [location.pathname, location.search, location.hash, basename]);
-
-  // Listen for browser navigation (back/forward buttons)
-  useEffect(() => {
-    const handlePopState = () => {
-      const mainAppPath = window.location.pathname;
-      // If current path does not contain /apps/ext/, clean up all /apps/ext/ references
-      if (mainAppPath.includes("/apps/ext/")) {
-        const currentPath = window.location.pathname;
-        const search = window.location.search || "";
-        const hash = window.location.hash || "";
-        const basenamePath = basename || "";
-
-        // Extract the path after basename
-        let pathToNavigate = currentPath;
-        if (basenamePath && currentPath.startsWith(basenamePath)) {
-          pathToNavigate = currentPath.slice(basenamePath.length) || "/";
-        }
-
-        // Combine with search and hash
-        const fullPathToNavigate = pathToNavigate + search + hash;
-        const currentRouterPath =
-          location.pathname + (location.search || "") + (location.hash || "");
-
-        // Navigate MemoryRouter to match browser URL
-        if (currentRouterPath !== fullPathToNavigate) {
-          navigate(fullPathToNavigate, { replace: true });
-        }
-      } else {
-        window.removeEventListener("popstate", handlePopState);
-      }
-    };
-
-    window.addEventListener("popstate", handlePopState);
-    return () => window.removeEventListener("popstate", handlePopState);
-  }, [navigate, location.pathname, location.search, location.hash, basename]);
-
-  return null;
-};
-
-// Root component wrapper that handles routing
 const MicrofrontendRoot: React.FC<{
-  isMicroFrontend: boolean;
-  props?: { basename: string };
-}> = ({ isMicroFrontend, props }) => {
-  // Use MemoryRouter for micro-frontend to avoid conflicts with host routing
-  // Use BrowserRouter for standalone mode
-  const Router = isMicroFrontend ? MemoryRouter : BrowserRouter;
-
-  // Get initial path from browser URL for MemoryRouter
-  const initialPath = isMicroFrontend ? getInitialPath(props?.basename) : "/";
-
-  const routerProps = isMicroFrontend
-    ? { initialEntries: [initialPath], initialIndex: 0 }
-    : { basename: props?.basename };
-
+  props?: MfeProps;
+}> = ({ props }) => {
   return (
-    <Router {...routerProps}>
-      {isMicroFrontend && <RouterSync basename={props?.basename} />}
+    <BrowserRouter basename={props?.basename}>
       <App {...props} />
-    </Router>
+    </BrowserRouter>
   );
 };
 
-// Single-spa React configuration
-const lifecycles = singleSpaReact({
-  React,
-  ReactDOMClient: { createRoot },
-  rootComponent: (props: AppProps & { basename: string }) => {
-    return <MicrofrontendRoot props={props} isMicroFrontend={true} />;
-  },
-  errorBoundary: (err, info) => {
-    console.error("Microfrontend Single-spa Error:", err, info);
-    return <div>Something went wrong loading Microfrontend</div>;
-  },
-  renderType: "createRoot",
-  domElementGetter: () => {
-    const el = document.getElementById(
-      "single-spa-application:bluecopa-preview"
+/**
+ * Resolves the DOM element from the various prop aliases the host may pass.
+ * The host sends domElement, container, element, root — accept any of them.
+ */
+function resolveDomElement(props: MountProps): HTMLElement {
+  const el = props.domElement || props.container || props.element || props.root;
+  if (!el) {
+    throw new Error(
+      "domElement (or container/element/root) is required for mounting the MFE",
     );
-    if (!el)
-      throw new Error(
-        "Mount target #single-spa-application:bluecopa-preview not found"
-      );
-    return el;
-  },
-});
-
-// Export the single-spa lifecycle functions
-export const { mount, unmount, bootstrap } = lifecycles;
-
-// Export a manual mount function for direct usage
-export const manualMount = async (props: LifecycleProps) => {
-  if (!props.domElement) {
-    throw new Error("domElement is required for mounting the application");
   }
+  return el;
+}
+
+/**
+ * Mount the MFE into a given DOM element.
+ * This is the primary entry point called by the host's single-spa-config.
+ */
+export async function mount(props: MountProps): Promise<void> {
+  const domElement = resolveDomElement(props);
 
   try {
-    // Clean up any existing root
-    if (root) {
-      root.unmount();
-      root = null;
+    // Clean up previous root if remounting
+    if (reactRoot) {
+      reactRoot.unmount();
+      reactRoot = null;
     }
 
-    // Create new root
-    root = createRoot(props.domElement);
-
-    // Mount the application with the provided basename as micro-frontend
-    root.render(
+    reactRoot = createRoot(domElement);
+    reactRoot.render(
       <MicrofrontendRoot
-        isMicroFrontend={true}
         props={{
-          basename: props.basename || "/app/external/microfrontend",
+          basename: props.basename || props.baseUrl,
+          accessToken: props.accessToken,
+          workspaceId: props.workspaceId,
+          apiBaseUrl: props.apiBaseUrl,
+          userId: props.userId,
         }}
-      />
+      />,
     );
-
-    console.log("Microfrontend mounted successfully");
-    return;
   } catch (error) {
-    console.error("Failed to mount Microfrontend:", error);
+    console.error("Failed to mount MFE:", error);
     throw error;
   }
-};
+}
 
-// Export a manual unmount function
-export const manualUnmount = async () => {
+/**
+ * Unmount the MFE and clean up the React tree.
+ */
+export async function unmount(): Promise<void> {
   try {
-    if (root) {
-      root.unmount();
-      root = null;
+    if (reactRoot) {
+      reactRoot.unmount();
+      reactRoot = null;
     }
-    console.log("Microfrontend unmounted successfully");
-    return Promise.resolve();
   } catch (error) {
-    console.error("Failed to unmount Microfrontend:", error);
-    return Promise.reject(error);
+    console.error("Failed to unmount MFE:", error);
+    throw error;
   }
-};
+}
 
-// Default export for module federation
-export default {
-  mount: manualMount,
-  unmount: manualUnmount,
-  bootstrap: () => Promise.resolve(),
-};
+/**
+ * Bootstrap — no-op, required by single-spa contract.
+ */
+export async function bootstrap(): Promise<void> {}
+
+/**
+ * Default export provides the same lifecycle for Module Federation consumers
+ * that import the default rather than named exports.
+ */
+export default { mount, unmount, bootstrap };

package/templates/latest/app/types/index.ts

@@ -0,0 +1,37 @@
+/** Props passed to the MFE root component from the host app (single-spa customProps or manualMount). */
+export interface MfeProps {
+  apiBaseUrl?: string;
+  workspaceId?: string;
+  accessToken?: string;
+  userId?: string;
+  basename?: string;
+}
+
+/** Normalized user object provided by AppContext. */
+export type AppUser = {
+  userId?: string;
+  name?: string;
+  userExists?: boolean;
+  settings?: Record<string, unknown>;
+  workspaceIds?: string[];
+  currentWorkspace?: unknown;
+  teams?: unknown[];
+  userTeamProperties?: unknown[];
+  email?: string | null;
+  role?: string;
+  [key: string]: unknown;
+};
+
+/** Workspace data settings derived from user/workspace API (currency, timezone, date format, etc.) */
+export type WorkspaceDataSettings = {
+  currency: string;
+  timezone: string;
+  dateFormat: string;
+  fiscalYear: { yearType: string; startMonth?: number; startDate?: number };
+  numberSettings: {
+    numberSystem: string;
+    defaultPrecision: number;
+    nullPlaceholder?: string;
+  };
+  weekStartDay: string;
+};

package/templates/latest/app/utils/ag-grid-datasource.ts

@@ -0,0 +1,63 @@
+import type {
+  IServerSideDatasource,
+  IServerSideGetRowsParams,
+} from "ag-grid-community";
+import { copaApi } from "@bluecopa/react";
+
+interface CreateDatasourceOptions {
+  tableId: string;
+  totalCount?: number;
+}
+
+export function createServerSideDatasource({
+  tableId,
+  totalCount,
+}: CreateDatasourceOptions): IServerSideDatasource {
+  return {
+    getRows: async (params: IServerSideGetRowsParams) => {
+      const {
+        startRow = 0,
+        endRow = 50,
+        sortModel,
+        filterModel,
+      } = params.request;
+      const limit = endRow - startRow;
+      const offset = startRow;
+
+      const order_by = sortModel?.[0]?.colId;
+      const order = sortModel?.[0]?.sort as "asc" | "desc" | undefined;
+
+      const filters = filterModel
+        ? Object.entries(filterModel).reduce(
+            (acc, [col, filter]) => {
+              acc[col] = (filter as any).filter;
+              return acc;
+            },
+            {} as Record<string, unknown>,
+          )
+        : undefined;
+
+      try {
+        const response = await copaApi.inputTable.getRows(tableId, {
+          limit,
+          offset,
+          order,
+          order_by,
+          filters,
+        });
+
+        const rows =
+          (response as any)?.data ||
+          (response as any)?.rows ||
+          [];
+        const rowCount =
+          totalCount ?? (response as any)?.totalCount ?? undefined;
+
+        params.success({ rowData: rows, rowCount });
+      } catch (error) {
+        console.error("[AG Grid Datasource] Failed:", error);
+        params.fail();
+      }
+    },
+  };
+}

package/templates/latest/app/utils/ag-grid-license.ts

@@ -0,0 +1,12 @@
+import { LicenseManager } from "ag-grid-enterprise";
+
+export function initAgGridLicense() {
+  const key = import.meta.env.VITE_AG_GRID_LICENSE_KEY;
+  if (!key) {
+    console.warn(
+      "[AG Grid] No license key found (VITE_AG_GRID_LICENSE_KEY). Enterprise features will show watermarks.",
+    );
+    return;
+  }
+  LicenseManager.setLicenseKey(key);
+}

package/templates/latest/app/utils/ag-grid-theme.ts

@@ -0,0 +1,9 @@
+import { themeQuartz } from "ag-grid-community";
+
+export const gridTheme = themeQuartz.withParams({
+  accentColor: "#3548ff",
+  spacing: 6,
+  borderRadius: 8,
+  headerBackgroundColor: "oklch(0.97 0.003 280)",
+  fontSize: 13,
+});

package/templates/latest/app/utils/component-style.ts

@@ -0,0 +1,7 @@
+// Unprefixed style tokens for component composition.
+// These get auto-prefixed by style-drivers.ts before being applied.
+export const styles = {
+  card: "rounded-lg border bg-card text-card-foreground shadow-sm",
+  cardHeader: "flex flex-col space-y-1.5 p-6",
+  cardContent: "p-6 pt-0",
+} as const;

package/templates/latest/app/utils/style-drivers.ts

@@ -0,0 +1,24 @@
+import { styles } from "./component-style";
+
+const PREFIX = "copa";
+
+function prefixClasses(classString: string): string {
+  return classString
+    .split(" ")
+    .filter(Boolean)
+    .map((cls) => {
+      // Handle variant prefixes (hover:, focus:, data-[...]:, etc.)
+      const parts = cls.split(":");
+      const utility = parts.pop()!;
+      const variants = parts;
+      // Reconstruct: variants + copa: + utility
+      return [...variants, `${PREFIX}:${utility}`].join(":");
+    })
+    .join(" ");
+}
+
+export const prefixedStyles = Object.fromEntries(
+  Object.entries(styles).map(([key, value]) => [key, prefixClasses(value)])
+) as typeof styles;
+
+export { prefixClasses };

package/templates/latest/app/utils/utils.ts

@@ -0,0 +1,10 @@
+import { clsx, type ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+  prefix: "copa",
+});
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/latest/components.json

@@ -8,14 +8,14 @@
     "css": "app/app.css",
     "baseColor": "gray",
     "cssVariables": true,
-    "prefix": ""
+    "prefix": "copa"
   },
   "iconLibrary": "lucide",
   "aliases": {
     "components": "~/components",
-    "utils": "~/lib/utils",
+    "utils": "~/utils/utils",
     "ui": "~/components/ui",
-    "lib": "~/lib",
+    "lib": "~/utils",
     "hooks": "~/hooks"
   },
   "registries": {

package/templates/latest/index.html

@@ -2,13 +2,41 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Bluecopa - AI-powered Finance Automation</title>
     <meta name="description" content="AI-powered close automation for modern finance teams. Streamline your order-to-cash, procure-to-pay, and record-to-report processes." />
+    <style>
+      /*
+       * Standalone preflight — replaces Tailwind's preflight for dev mode.
+       * This file is NOT used in MFE mode (host provides its own resets).
+       */
+      *, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; margin: 0; padding: 0; }
+      html { height: 100%; line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
+      body { height: 100%; line-height: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+      #root { height: 100%; }
+      h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
+      a { color: inherit; text-decoration: inherit; }
+      ol, ul, menu { list-style: none; }
+      img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
+      button, input, optgroup, select, textarea { font: inherit; color: inherit; }
+      button { cursor: pointer; background: transparent; }
+      table { border-collapse: collapse; border-spacing: 0; text-indent: 0; border-color: inherit; }
+      hr { height: 0; color: inherit; border-top-width: 1px; }
+      p, blockquote, dl, dd, figure, fieldset, legend, pre { margin: 0; }
+    </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <!-- Inline loader: visible instantly before JS/CSS loads, replaced when React mounts -->
+      <div id="initial-loader" style="display:flex;align-items:center;justify-content:center;height:100vh;width:100%;background:#f8f8fa;font-family:'Satoshi',system-ui,sans-serif;">
+        <div style="display:flex;flex-direction:column;align-items:center;gap:16px;">
+          <div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3548ff;border-radius:50%;animation:init-spin 0.7s linear infinite;"></div>
+          <span style="color:#6b7280;font-size:0.835rem;">Loading...</span>
+        </div>
+      </div>
+      <style>@keyframes init-spin{to{transform:rotate(360deg)}}</style>
+    </div>
     <script type="module" src="/app/main.tsx"></script>
   </body>
 </html>