create-bluecopa-react-app 1.0.5 → 1.0.7

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,9 +1,9 @@
 import React from "react";
-import { createRoot, Root } from "react-dom/client";
+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 { AppProps } from "single-spa";
+import App from "./app";
+import type { AppProps } from "single-spa";
 
 // Single-spa lifecycle props interface
 interface LifecycleProps {
@@ -48,10 +48,10 @@ const lifecycles = singleSpaReact({
   },
   renderType: "createRoot",
   domElementGetter: () => {
-    const el = document.getElementById("single-spa-application:pnl-explorer");
+    const el = document.getElementById("single-spa-application:bluecopa-preview");
     if (!el)
       throw new Error(
-        "Mount target #single-spa-application:pnl-explorer not found"
+        "Mount target #single-spa-application:bluecopa-preview not found"
       );
     return el;
   },

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-DsPovvoo.js

@@ -0,0 +1,147 @@
+System.register(['./__federation_fn_import-CzfA7kmP.js', './client-BZh_TW_6.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 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 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 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:bluecopa-preview");
+          if (!el)
+            throw new Error(
+              "Mount target #single-spa-application:bluecopa-preview 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;
+          }
+          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"
+              }
+            )
+          );
+          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()
+      });
+
+    })
+  };
+}));