create-bluecopa-react-app 1.0.4 → 1.0.6

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

@@ -0,0 +1,40 @@
+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 (
+    <SidebarProvider
+      style={
+        {
+          "--sidebar-width": "calc(var(--spacing) * 72)",
+          "--header-height": "calc(var(--spacing) * 12)",
+        } as React.CSSProperties
+      }
+    >
+      <AppSidebar variant="inset" />
+      <SidebarInset>
+        <SiteHeader />
+        <div className="flex flex-1 flex-col">
+          <div className="@container/main flex flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
+              <SectionCards />
+              <div className="px-4 lg:px-6">
+                <ChartAreaInteractive />
+              </div>
+              <DataTable data={data} />
+            </div>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

package/templates/latest/app/routes.tsx

@@ -0,0 +1,15 @@
+import { Routes, Route, Navigate } from "react-router-dom";
+import { lazy } from "react";
+import "./app.css";
+
+const Home = lazy(() => import('~/routes/home'))
+
+
+export default function RouteConfig() {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/templates/latest/{src → app}/single-spa.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { createRoot, Root } from 'react-dom/client';
-import singleSpaReact from 'single-spa-react';
-import { MemoryRouter, BrowserRouter } from 'react-router-dom';
-import App from './App';
+import React from "react";
+import { createRoot, type Root } from "react-dom/client";
+import singleSpaReact from "single-spa-react";
+import { MemoryRouter, BrowserRouter } from "react-router-dom";
+import App from "./app";
+import type { AppProps } from "single-spa";
 
 // Single-spa lifecycle props interface
 interface LifecycleProps {
@@ -18,15 +19,15 @@ interface LifecycleProps {
 let root: Root | null = null;
 
 // Root component wrapper that handles routing
-const PnLExplorerRoot: React.FC<{ basename?: string; isMicroFrontend?: boolean }> = ({ 
-  basename = '/', 
-  isMicroFrontend = false 
-}) => {
+const MicrofrontendRoot: React.FC<{
+  basename?: string;
+  isMicroFrontend?: boolean;
+}> = ({ basename = "/", isMicroFrontend = false }) => {
   // 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 };
-  
+
   return (
     <Router {...routerProps}>
       <App />
@@ -38,13 +39,22 @@ const PnLExplorerRoot: React.FC<{ basename?: string; isMicroFrontend?: boolean }
 const lifecycles = singleSpaReact({
   React,
   ReactDOMClient: { createRoot },
-  rootComponent: (props) => <PnLExplorerRoot isMicroFrontend={true} basename={props.basename} />,
-  errorBoundary: (err, info, props) => {
-    console.error('PnL Explorer Single-spa Error:', err, info);
-    return <div>Something went wrong loading PnL Explorer</div>;
+  rootComponent: (props: AppProps & { basename: string }) => (
+    <MicrofrontendRoot isMicroFrontend={true} basename={props.basename} />
+  ),
+  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:pnl-explorer");
+    if (!el)
+      throw new Error(
+        "Mount target #single-spa-application:pnl-explorer not found"
+      );
+    return el;
   },
-  renderType: 'createRoot',
-  domElementGetter: () => document.getElementById('single-spa-application:pnl-explorer') || document.body
 });
 
 // Export the single-spa lifecycle functions
@@ -53,7 +63,7 @@ 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 PnL Explorer');
+    throw new Error("domElement is required for mounting the application");
   }
 
   try {
@@ -65,20 +75,20 @@ export const manualMount = async (props: LifecycleProps) => {
 
     // Create new root
     root = createRoot(props.domElement);
-    
+
     // Mount the application with the provided basename as micro-frontend
     root.render(
-      <PnLExplorerRoot 
+      <MicrofrontendRoot
         isMicroFrontend={true}
-        basename={props.basename || '/app/external/pnl-explorer'} 
+        basename={props.basename || "/app/external/microfrontend"}
       />
     );
 
-    console.log('PnL Explorer mounted successfully');
-    return Promise.resolve();
+    console.log("Microfrontend mounted successfully");
+    return;
   } catch (error) {
-    console.error('Failed to mount PnL Explorer:', error);
-    return Promise.reject(error);
+    console.error("Failed to mount Microfrontend:", error);
+    throw error;
   }
 };
 
@@ -89,10 +99,10 @@ export const manualUnmount = async () => {
       root.unmount();
       root = null;
     }
-    console.log('PnL Explorer unmounted successfully');
+    console.log("Microfrontend unmounted successfully");
     return Promise.resolve();
   } catch (error) {
-    console.error('Failed to unmount PnL Explorer:', error);
+    console.error("Failed to unmount Microfrontend:", error);
     return Promise.reject(error);
   }
 };
@@ -101,5 +111,5 @@ export const manualUnmount = async () => {
 export default {
   mount: manualMount,
   unmount: manualUnmount,
-  bootstrap: () => Promise.resolve()
-};
+  bootstrap: () => Promise.resolve(),
+};

package/templates/latest/components.json

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

package/templates/latest/dist/assets/__federation_expose_App-DRwKKpS2.js

@@ -0,0 +1,91 @@
+System.register(['./__federation_fn_import-CzfA7kmP.js', './client-DgSav55y.js'], (function (exports, module) {
+  'use strict';
+  var importShared, jsxRuntimeExports, clientExports, MemoryRouter, BrowserRouter, App;
+  return {
+    setters: [module => {
+      importShared = module.importShared;
+    }, module => {
+      jsxRuntimeExports = module.j;
+      clientExports = module.c;
+      MemoryRouter = module.M;
+      BrowserRouter = module.B;
+      App = module.A;
+    }],
+    execute: (async function () {
+
+      function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o);}return n}function t(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?e(Object(r),true).forEach((function(e){o(t,e,r[e]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e));}));}return t}function n(e){return (n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:true,configurable:true,writable:true}):e[t]=n,e}function r(e){return (r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t){var n;if("function"!=typeof(n=t.domElement?function(){return t.domElement}:t.domElementGetter?t.domElementGetter:e.domElementGetter?e.domElementGetter:function(e){var t=e.appName||e.name;if(!t)throw Error("single-spa's dom-element-getter-helpers was not given an application name as a prop, so it can't make a unique dom element container for the react application");var n="single-spa-application:".concat(t);return function(){var e=document.getElementById(n);return e||((e=document.createElement("div")).id=n,document.body.appendChild(e)),e}}(t)))throw Error("single-spa's dom-element-getter-helpers was given an invalid domElementGetter for application or parcel '".concat(t.name,"'. Expected a function, received ").concat(r(n)));return function(){var e=n(t);if(!(e instanceof HTMLElement))throw Error("single-spa's dom-element-getter-helpers: domElementGetter returned an invalid dom element for application or parcel '".concat(t.name,"'. Expected HTMLElement, received ").concat(r(e)));return e}}var c=null;try{c=require("react").createContext();}catch(e){}var u={React:null,ReactDOM:null,ReactDOMClient:null,rootComponent:null,loadRootComponent:null,errorBoundary:null,errorBoundaryClass:null,domElementGetter:null,parcelCanUpdate:true,suppressComponentDidCatchWarning:false,domElements:{},renderResults:{},updateResolves:{},unmountResolves:{}};function i(e){if("object"!==n(e))throw new Error("single-spa-react requires a configuration object");var o,r=t(t({},u),e);if(!r.React)throw new Error("single-spa-react must be passed opts.React");if(!r.ReactDOM&&!r.ReactDOMClient)throw new Error("single-spa-react must be passed opts.ReactDOM or opts.ReactDOMClient");r.renderType||(null!==(o=r.ReactDOMClient)&&void 0!==o&&o.createRoot?r.renderType="createRoot":r.renderType="render");if(!r.rootComponent&&!r.loadRootComponent)throw new Error("single-spa-react must be passed opts.rootComponent or opts.loadRootComponent");if(r.errorBoundary&&"function"!=typeof r.errorBoundary)throw Error("The errorBoundary opt for single-spa-react must either be omitted or be a function that returns React elements");!c&&r.React.createContext&&(c=r.React.createContext()),r.SingleSpaRoot=function(e){function t(e){t.displayName="SingleSpaRoot(".concat(e.name,")");}return t.prototype=Object.create(e.React.Component.prototype),t.prototype.componentDidMount=function(){setTimeout(this.props.mountFinished);},t.prototype.componentWillUnmount=function(){setTimeout(this.props.unmountFinished);},t.prototype.render=function(){return setTimeout(this.props.updateFinished),this.props.children},t}(r);var a={bootstrap:s.bind(null,r),mount:p.bind(null,r),unmount:l.bind(null,r)};return r.parcelCanUpdate&&(a.update=m.bind(null,r)),a}function s(e,t){return e.rootComponent?Promise.resolve():e.loadRootComponent(t).then((function(t){e.rootComponent=t;}))}function p(e,t){return new Promise((function(n,o){e.suppressComponentDidCatchWarning||!function(e){if(!(e&&"string"==typeof e.version&&e.version.indexOf(".")>=0))return  false;var t=e.version.slice(0,e.version.indexOf("."));try{return Number(t)>=16}catch(e){return  false}}(e.React)||e.errorBoundary||e.errorBoundaryClass||(e.rootComponent.prototype?e.rootComponent.prototype.componentDidCatch||console.warn("single-spa-react: ".concat(t.name||t.appName||t.childAppName,"'s rootComponent should implement componentDidCatch to avoid accidentally unmounting the entire single-spa application.")):console.warn("single-spa-react: ".concat(t.name||t.appName||t.childAppName,"'s rootComponent does not implement an error boundary.  If using a functional component, consider providing an opts.errorBoundary to singleSpaReact(opts).")));var r=y(e,t,(function(){n(this);})),c=a(e,t)(),u=function(e){var t=e.reactDom,n=e.renderType,o=e.elementToRender,r=e.domElement,a=t[n];if("function"!=typeof a)throw new Error('renderType "'.concat(n,'" did not return a function.'));switch(n){case "createRoot":case "unstable_createRoot":case "createBlockingRoot":case "unstable_createBlockingRoot":var c=a(r);return c.render(o),c;case "hydrateRoot":return a(r,o);case "hydrate":default:return a(o,r),null}}({elementToRender:r,domElement:c,reactDom:d(e),renderType:f(e)});e.domElements[t.name]=c,e.renderResults[t.name]=u;}))}function l(e,t){return new Promise((function(n){e.unmountResolves[t.name]=n;var o=e.renderResults[t.name];o&&o.unmount?o.unmount():d(e).unmountComponentAtNode(e.domElements[t.name]),delete e.domElements[t.name],delete e.renderResults[t.name];}))}function m(e,t){return new Promise((function(n){e.updateResolves[t.name]||(e.updateResolves[t.name]=[]),e.updateResolves[t.name].push(n);var o=y(e,t,null),r=e.renderResults[t.name];if(r&&r.render)r.render(o);else {var c=a(e,t)();d(e).render(o,c);}}))}function d(e){return e.ReactDOMClient||e.ReactDOM}function f(e){return "function"==typeof e.renderType?e.renderType():e.renderType}function y(e,n,o){var r=e.React.createElement(e.rootComponent,n),a=c?e.React.createElement(c.Provider,{value:n},r):r;return (e.errorBoundary||n.errorBoundary||e.errorBoundaryClass||n.errorBoundaryClass)&&(e.errorBoundaryClass=e.errorBoundaryClass||n.errorBoundaryClass||function(e,t){function n(t){e.React.Component.apply(this,arguments),this.state={caughtError:null,caughtErrorInfo:null},n.displayName="SingleSpaReactErrorBoundary(".concat(t.name,")");}return n.prototype=Object.create(e.React.Component.prototype),n.prototype.render=function(){return this.state.caughtError?(e.errorBoundary||t.errorBoundary)(this.state.caughtError,this.state.caughtErrorInfo,this.props):this.props.children},n.prototype.componentDidCatch=function(e,t){this.setState({caughtError:e,caughtErrorInfo:t});},n}(e,n),a=e.React.createElement(e.errorBoundaryClass,n,a)),a=e.React.createElement(e.SingleSpaRoot,t(t({},n),{},{mountFinished:o,updateFinished:function(){e.updateResolves[n.name]&&(e.updateResolves[n.name].forEach((function(e){return e()})),delete e.updateResolves[n.name]);},unmountFinished:function(){e.unmountResolves[n.name]&&(e.unmountResolves[n.name](),delete e.unmountResolves[n.name]);}}),a)}
+
+      const React = await importShared('react');
+      let root = null;
+      const MicrofrontendRoot = ({ basename = "/", isMicroFrontend = false }) => {
+        const Router = isMicroFrontend ? MemoryRouter : BrowserRouter;
+        const routerProps = isMicroFrontend ? {} : { basename };
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Router, { ...routerProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) });
+      };
+      const lifecycles = i({
+        React,
+        ReactDOMClient: { createRoot: clientExports.createRoot },
+        rootComponent: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(MicrofrontendRoot, { isMicroFrontend: true, basename: props.basename }),
+        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:pnl-explorer");
+          if (!el)
+            throw new Error(
+              "Mount target #single-spa-application:pnl-explorer not found"
+            );
+          return el;
+        }
+      });
+      const { mount, unmount, bootstrap } = lifecycles; exports({ mount, unmount, bootstrap });
+      const manualMount = exports("manualMount", async (props) => {
+        if (!props.domElement) {
+          throw new Error("domElement is required for mounting the application");
+        }
+        try {
+          if (root) {
+            root.unmount();
+            root = null;
+          }
+          root = clientExports.createRoot(props.domElement);
+          root.render(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MicrofrontendRoot,
+              {
+                isMicroFrontend: true,
+                basename: props.basename || "/app/external/microfrontend"
+              }
+            )
+          );
+          console.log("Microfrontend mounted successfully");
+          return;
+        } catch (error) {
+          console.error("Failed to mount Microfrontend:", error);
+          throw error;
+        }
+      });
+      const manualUnmount = exports("manualUnmount", async () => {
+        try {
+          if (root) {
+            root.unmount();
+            root = null;
+          }
+          console.log("Microfrontend unmounted successfully");
+          return Promise.resolve();
+        } catch (error) {
+          console.error("Failed to unmount Microfrontend:", error);
+          return Promise.reject(error);
+        }
+      });
+      const singleSpa = exports("default", {
+        mount: manualMount,
+        unmount: manualUnmount,
+        bootstrap: () => Promise.resolve()
+      });
+
+    })
+  };
+}));