create-bluecopa-react-app 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bluecopa-react-app",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "CLI tool to create bluecopa React applications",
   "type": "module",
   "main": "./bin/create-bluecopa-react-app.js",

package/templates/latest/Dockerfile

@@ -1,22 +1,29 @@
-FROM node:20-alpine AS development-dependencies-env
-COPY . /app
-WORKDIR /app
-RUN npm ci
-
-FROM node:20-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
-WORKDIR /app
-RUN npm ci --omit=dev
-
-FROM node:20-alpine AS build-env
-COPY . /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
+FROM node:18-alpine AS production
+
+# Set working directory
+WORKDIR /usr/src/app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Build the application
 RUN npm run build
 
-FROM node:20-alpine
-COPY ./package.json package-lock.json /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["npm", "run", "start"]
+# Install serve globally
+RUN npm install -g serve@14.2.0
+
+# Expose port
+EXPOSE 8080
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:8080/health || exit 1
+
+# Start the application
+CMD ["npx", "serve", "-s", "dist", "-l", "8080", "--cors"]

package/templates/latest/app/app.tsx

@@ -6,7 +6,7 @@ import './app.css'
 
 const { QueryClient, QueryClientProvider } = reactQuery;
 
-export default function App() {
+export default function App(props: any) {
   const [queryClient] = useState(() => new QueryClient({
     defaultOptions: {
       queries: {
@@ -29,10 +29,11 @@ export default function App() {
     }
 
     copaSetConfig({
-      apiBaseUrl: import.meta.env.VITE_BLUECOPA_API_URL || 'https://develop.bluecopa.com',
-      workspaceId: import.meta.env.VITE_BLUECOPA_WORKSPACE_ID || '',
-      accessToken: copaUser?.accessToken || '',
-    });
+      apiBaseUrl: props.apiBaseUrl || import.meta.env.VITE_BLUECOPA_API_URL || 'https://develop.bluecopa.com',
+      workspaceId: props.workspaceId || import.meta.env.VITE_BLUECOPA_WORKSPACE_ID || '',
+      accessToken: props.accessToken || copaUser?.accessToken || '',
+      userId: props.userId || ''
+    } as any);
   }, []);
 
   return (

package/templates/latest/app/components/site-header.tsx

@@ -1,6 +1,7 @@
-import { Button } from "~/components/ui/button"
-import { Separator } from "~/components/ui/separator"
-import { SidebarTrigger } from "~/components/ui/sidebar"
+import { navigateToUrl } from "single-spa";
+import { Button } from "~/components/ui/button";
+import { Separator } from "~/components/ui/separator";
+import { SidebarTrigger } from "~/components/ui/sidebar";
 
 export function SiteHeader() {
   return (
@@ -12,8 +13,16 @@ export function SiteHeader() {
           className="mx-2 data-[orientation=vertical]:h-4"
         />
         <h1 className="text-base font-medium">Documents</h1>
-        
+      </div>
+      <div className="flex w-full justify-end items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <Button
+          onClick={() => {
+            navigateToUrl("/apps-studio/portals");
+          }}
+        >
+          Go to portals
+        </Button>
       </div>
     </header>
-  )
+  );
 }

package/templates/latest/app/routes/home.tsx

@@ -1,14 +1,10 @@
-import { AppSidebar } from "~/components/app-sidebar"
-import { ChartAreaInteractive } from "~/components/chart-area-interactive"
-import { DataTable } from "~/components/data-table"
-import { SectionCards } from "~/components/section-cards"
-import { SiteHeader } from "~/components/site-header"
-import {
-  SidebarInset,
-  SidebarProvider,
-} from "~/components/ui/sidebar"
-
-import data from "~/dashboard/data.json"
+import { AppSidebar } from "~/components/app-sidebar";
+import { ChartAreaInteractive } from "~/components/chart-area-interactive";
+import { DataTable } from "~/components/data-table";
+import { SectionCards } from "~/components/section-cards";
+import { SiteHeader } from "~/components/site-header";
+import { SidebarInset, SidebarProvider } from "~/components/ui/sidebar";
+import data from "~/dashboard/data.json";
 
 export default function Page() {
   return (
@@ -36,5 +32,5 @@ export default function Page() {
         </div>
       </SidebarInset>
     </SidebarProvider>
-  )
+  );
 }

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

@@ -20,17 +20,17 @@ let root: Root | null = null;
 
 // Root component wrapper that handles routing
 const MicrofrontendRoot: React.FC<{
-  basename?: string;
-  isMicroFrontend?: boolean;
-}> = ({ basename = "/", isMicroFrontend = false }) => {
+  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;
-  const routerProps = isMicroFrontend ? {} : { basename };
+  const routerProps = isMicroFrontend ? {} : { basename: props?.basename };
 
   return (
     <Router {...routerProps}>
-      <App />
+      <App {...props} />
     </Router>
   );
 };
@@ -39,16 +39,18 @@ const MicrofrontendRoot: React.FC<{
 const lifecycles = singleSpaReact({
   React,
   ReactDOMClient: { createRoot },
-  rootComponent: (props: AppProps & { basename: string }) => (
-    <MicrofrontendRoot isMicroFrontend={true} basename={props.basename} />
-  ),
+  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");
+    const el = document.getElementById(
+      "single-spa-application:bluecopa-preview"
+    );
     if (!el)
       throw new Error(
         "Mount target #single-spa-application:bluecopa-preview not found"
@@ -80,7 +82,9 @@ export const manualMount = async (props: LifecycleProps) => {
     root.render(
       <MicrofrontendRoot
         isMicroFrontend={true}
-        basename={props.basename || "/app/external/microfrontend"}
+        props={{
+          basename: props.basename || "/app/external/microfrontend",
+        }}
       />
     );
 

package/templates/latest/components.json

@@ -18,5 +18,8 @@
     "lib": "~/lib",
     "hooks": "~/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@shadcn": "https://ui.shadcn.com/r/index.json",
+    "@bluecopa-ui": "https://shadcn-ui-henna.vercel.app/r/registry.json"
+  }
 }

package/templates/latest/dist/assets/{__federation_expose_App-DsPovvoo.js → __federation_expose_App-C8_sl1dD.js}

@@ -1,12 +1,12 @@
-System.register(['./__federation_fn_import-CzfA7kmP.js', './client-BZh_TW_6.js'], (function (exports, module) {
+System.register(['./__federation_fn_import-CzfA7kmP.js', './client-Hh38T4k9.js'], (function (exports, module) {
   'use strict';
-  var importShared, jsxRuntimeExports, clientExports, MemoryRouter, BrowserRouter, App;
+  var importShared, clientExports, jsxRuntimeExports, MemoryRouter, BrowserRouter, App;
   return {
     setters: [module => {
       importShared = module.importShared;
     }, module => {
-      jsxRuntimeExports = module.j;
       clientExports = module.c;
+      jsxRuntimeExports = module.j;
       MemoryRouter = module.M;
       BrowserRouter = module.B;
       App = module.A;
@@ -17,56 +17,26 @@ System.register(['./__federation_fn_import-CzfA7kmP.js', './client-BZh_TW_6.js']
 
       const React = await importShared('react');
       let root = null;
-      const injectStylesIntoShadowDOM = exports("injectStylesIntoShadowDOM", (styles) => {
-        const shadowRoot = window.__microfrontendShadowRoot;
-        if (shadowRoot) {
-          const styleElement = document.createElement("style");
-          const stylesArray = Array.isArray(styles) ? styles : [styles];
-          styleElement.textContent = stylesArray.join("\n");
-          shadowRoot.appendChild(styleElement);
-          console.log("Styles injected into shadow DOM");
-        } else {
-          console.warn("Shadow DOM not available for style injection");
-        }
-      });
-      const loadCSSIntoShadowDOM = exports("loadCSSIntoShadowDOM", async (cssUrls) => {
-        const shadowRoot = window.__microfrontendShadowRoot;
-        if (shadowRoot) {
-          const urlsArray = Array.isArray(cssUrls) ? cssUrls : [cssUrls];
-          for (const cssUrl of urlsArray) {
-            try {
-              console.log(`Loading CSS file: ${cssUrl}`);
-              const linkElement = document.createElement("link");
-              linkElement.rel = "stylesheet";
-              linkElement.href = cssUrl;
-              linkElement.onload = () => console.log(`CSS loaded: ${cssUrl}`);
-              linkElement.onerror = () => console.warn(`Failed to load CSS: ${cssUrl}`);
-              shadowRoot.appendChild(linkElement);
-              await new Promise((resolve) => setTimeout(resolve, 100));
-            } catch (error) {
-              console.warn(`Failed to load CSS: ${cssUrl}`, error);
-            }
-          }
-        } else {
-          console.warn("Shadow DOM not available for CSS loading");
-        }
-      });
-      const MicrofrontendRoot = ({ basename = "/", isMicroFrontend = false }) => {
+      const MicrofrontendRoot = ({ isMicroFrontend, props }) => {
         const Router = isMicroFrontend ? MemoryRouter : BrowserRouter;
-        const routerProps = isMicroFrontend ? {} : { basename };
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { ...routerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) }) });
+        const routerProps = isMicroFrontend ? {} : { basename: props?.basename };
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { ...routerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, { ...props }) });
       };
       const lifecycles = i({
         React,
         ReactDOMClient: { createRoot: clientExports.createRoot },
-        rootComponent: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(MicrofrontendRoot, { isMicroFrontend: true, basename: props.basename }),
+        rootComponent: (props) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(MicrofrontendRoot, { props, isMicroFrontend: true });
+        },
         errorBoundary: (err, info) => {
           console.error("Microfrontend Single-spa Error:", err, info);
           return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Something went wrong loading Microfrontend" });
         },
         renderType: "createRoot",
         domElementGetter: () => {
-          const el = document.getElementById("single-spa-application:bluecopa-preview");
+          const el = document.getElementById(
+            "single-spa-application:bluecopa-preview"
+          );
           if (!el)
             throw new Error(
               "Mount target #single-spa-application:bluecopa-preview not found"
@@ -84,38 +54,8 @@ System.register(['./__federation_fn_import-CzfA7kmP.js', './client-BZh_TW_6.js']
             root.unmount();
             root = null;
           }
-          injectStylesIntoShadowDOM(`
-      /* Basic reset for microfrontend */
-      * {
-        box-sizing: border-box;
-      }
-      
-      body {
-        margin: 0;
-        padding: 0;
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        font-size: 14px;
-        line-height: 1.5;
-        color: #000;
-      }
-      
-      /* Ensure proper display */
-      #microfrontend-container {
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-      }
-    `);
           root = clientExports.createRoot(props.domElement);
-          root.render(
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              MicrofrontendRoot,
-              {
-                isMicroFrontend: true,
-                basename: props.basename || "/app/external/microfrontend"
-              }
-            )
-          );
+          root.render(/* @__PURE__ */ jsxRuntimeExports.jsx(MicrofrontendRoot, { isMicroFrontend: true }));
           console.log("Microfrontend mounted successfully");
           return;
         } catch (error) {