ui-soxo-bootstrap-core 2.4.25-dev.40 → 2.4.25-dev.44

package/.babelrc

@@ -1,9 +1,9 @@
-{
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ],
-    "plugins": [
-        "@babel/plugin-transform-react-jsx"
-    ]
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-react-jsx"
+    ]
 }

package/.github/workflows/npm-publish.yml

@@ -1,55 +1,52 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: Node.js Package
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      # 1. Checkout the repository
-      - name: Checkout Code
-        uses: actions/checkout@v3
-
-      # 2. Setup Node.js and npm registry
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-
-      # 3. Install dependencies using ci for reproducibility
-      - name: Install Dependencies
-        run: npm ci
-
-      # 4. Verify tag matches package.json version
-      - name: Verify Tag Matches Version
-        run: |
-          TAG=${GITHUB_REF#refs/tags/}
-          PACKAGE_VERSION=$(node -p "require('./package.json').version")
-          echo "Release Tag: $TAG"
-          echo "Package Version: $PACKAGE_VERSION"
-
-          if [[ "$TAG" != "v$PACKAGE_VERSION"* ]]; then
-            echo "Error: Tag does not match package.json version"
-            exit 1
-          fi
-
-      # 5. Publish the package
-      - name: Publish Package
-        run: |
-          TAG_NAME=${GITHUB_REF#refs/tags/}
-
-          if [[ "$TAG_NAME" == *"dev"* ]]; then
-            echo "Publishing development package with 'dev' tag"
-            npm publish --tag dev
-          else
-            echo "Publishing stable package"
-            npm publish
-          fi
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      # 1. Checkout the repository
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      # 2. Setup Node.js and npm registry
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      # 3. Install dependencies using ci for reproducibility
+      - name: Install Dependencies
+        run: npm ci
+
+      # 4. Verify tag matches package.json version
+      - name: Verify Tag Matches Version
+        run: |
+          TAG=${GITHUB_REF#refs/tags/}
+          PACKAGE_VERSION=$(node -p "require('./package.json').version")
+          echo "Release Tag: $TAG"
+          echo "Package Version: $PACKAGE_VERSION"
+          if [[ "$TAG" != "v$PACKAGE_VERSION"* ]]; then
+            echo "Error: Tag does not match package.json version"
+            exit 1
+          fi
+      # 5. Publish the package
+      - name: Publish Package
+        run: |
+          TAG_NAME=${GITHUB_REF#refs/tags/}
+          if [[ "$TAG_NAME" == *"dev"* ]]; then
+            echo "Publishing development package with 'dev' tag"
+            npm publish --tag dev
+          else
+            echo "Publishing stable package"
+            npm publish
+          fi
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.husky/pre-commit

@@ -1,12 +1,12 @@
-# #!/usr/bin/env sh
-# . "$(dirname "$0")/_/husky.sh"
-
-
-# Check if eslint.config.mjs has been modified
-
-# if git diff --cached --name-only | grep -q '^eslint.config.mjs$'; then
-#   echo "Error: Changes to eslint.config.mjs are not allowed."
-#   exit 1
-# fi
-
+# #!/usr/bin/env sh
+# . "$(dirname "$0")/_/husky.sh"
+
+
+# Check if eslint.config.mjs has been modified
+
+# if git diff --cached --name-only | grep -q '^eslint.config.mjs$'; then
+#   echo "Error: Changes to eslint.config.mjs are not allowed."
+#   exit 1
+# fi
+
 # npx lint-staged

package/.prettierrc.json

@@ -1,11 +1,11 @@
-{
-    "singleQuote": true,
-    "jsxSingleQuote": false,
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "bracketSpacing": true,
-    "editor.wordWrap": "wordWrapColumn",
-    "editor.wordWrapColumn": 150,
-    "printWidth": 150
-  }
+{
+    "singleQuote": true,
+    "jsxSingleQuote": false,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "bracketSpacing": true,
+    "editor.wordWrap": "wordWrapColumn",
+    "editor.wordWrapColumn": 150,
+    "printWidth": 150
+  }
   

package/babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-    "presets": ["@babel/preset-env", "@babel/preset-react"]
+module.exports = {
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
 };

package/core/components/component-loader/component-loader.js

@@ -1,125 +1,125 @@
-/**
- * 
- * Component Loader is ins
- * 
- */
-
-
-import React, { Suspense, useState, useEffect } from "react";
-
-// import { BrowserRouter } from "react-router-dom";
-
-// import "./index.css";
-
-import { ComponentWrapper } from "../../components/component-wrapper/component-wrapper";
-
-
-
-const App = () => {
-
-    // Configuration to store the env of the application
-    const [configuration, setConfiguration] = useState({});
-
-    useEffect(() => {
-
-        loadConfiguration();
-
-    }, [])
-
-    /**
-     * Load the configuration 
-     */
-    async function loadConfiguration() {
-
-
-        let domain = "qms-dubai";
-        // let domain = window.location.host.split(".")[0];
-
-        const result = await fetch(`https://hgrntky25ejsmw3zobq3u6lk3q0tploo.lambda-url.ap-northeast-1.on.aws/?domain=${domain}`).then((result) => {
-            return result.json();
-        })
-
-        if (result.length && result[0].other_details) {
-
-            let appConfiguration = JSON.parse(result[0].other_details);
-
-            console.log(appConfiguration);
-
-
-
-            console.log("Starting application with ", appConfiguration);
-
-            window.process = {
-                env: appConfiguration
-            }
-
-            // Setting the title
-            document.title = appConfiguration.REACT_APP_WEBSITE_NAME
-
-            setConfiguration({
-                ...appConfiguration,
-            });
-
-        }
-    }
-
-    return (<ComponentLoader configuration={configuration} />)
-
-
-    // return (
-    //   <Suspense fallback={<div>Loading now...</div>}>
-
-    //     {/* Component Wrapper */}
-    //     <ComponentWrapper component={configuration} {...configuration} />
-    //     {/* Component Wrapper Ends */}
-
-    //   </Suspense>
-    // )
-};
-
-/**
- * Realizing the MFE setup can do not just load applications , 
- * It can also be used foro loading component on fly 
- * 
- */
-export function ComponentLoader({ configuration }) {
-
-
-    window.process = {
-        env: configuration
-    }
-
-    console.log('here 5.2',configuration);
-
-    let component = {
-        "url": "http://localhost:8085/remoteEntry.js",
-        // "url": "https://qms-soxo.web.app/remoteEntry.js",
-        // "url": "http://localhost:9090/remoteEntry.js",
-        // "url": configuration.REACT_APP_URL,
-        "scope": "Application",
-        // "scope": "ReportingUI",
-        "name": "Tokens",
-        "props": {
-            "props1": "propsvalue"
-        }
-    }
-
-    return (<>
-
-        <Suspense fallback={<div>Loading now...</div>}>
-
-            {/* Component Wrapper */}
-            <ComponentWrapper component={configuration} {...configuration} />
-            {/* Component Wrapper Ends */}
-
-        </Suspense>
-
-    </>)
-
-}
-
-
-
-export default App;
-
-
+/**
+ * 
+ * Component Loader is ins
+ * 
+ */
+
+
+import React, { Suspense, useState, useEffect } from "react";
+
+// import { BrowserRouter } from "react-router-dom";
+
+// import "./index.css";
+
+import { ComponentWrapper } from "../../components/component-wrapper/component-wrapper";
+
+
+
+const App = () => {
+
+    // Configuration to store the env of the application
+    const [configuration, setConfiguration] = useState({});
+
+    useEffect(() => {
+
+        loadConfiguration();
+
+    }, [])
+
+    /**
+     * Load the configuration 
+     */
+    async function loadConfiguration() {
+
+
+        let domain = "qms-dubai";
+        // let domain = window.location.host.split(".")[0];
+
+        const result = await fetch(`https://hgrntky25ejsmw3zobq3u6lk3q0tploo.lambda-url.ap-northeast-1.on.aws/?domain=${domain}`).then((result) => {
+            return result.json();
+        })
+
+        if (result.length && result[0].other_details) {
+
+            let appConfiguration = JSON.parse(result[0].other_details);
+
+            console.log(appConfiguration);
+
+
+
+            console.log("Starting application with ", appConfiguration);
+
+            window.process = {
+                env: appConfiguration
+            }
+
+            // Setting the title
+            document.title = appConfiguration.REACT_APP_WEBSITE_NAME
+
+            setConfiguration({
+                ...appConfiguration,
+            });
+
+        }
+    }
+
+    return (<ComponentLoader configuration={configuration} />)
+
+
+    // return (
+    //   <Suspense fallback={<div>Loading now...</div>}>
+
+    //     {/* Component Wrapper */}
+    //     <ComponentWrapper component={configuration} {...configuration} />
+    //     {/* Component Wrapper Ends */}
+
+    //   </Suspense>
+    // )
+};
+
+/**
+ * Realizing the MFE setup can do not just load applications , 
+ * It can also be used foro loading component on fly 
+ * 
+ */
+export function ComponentLoader({ configuration }) {
+
+
+    window.process = {
+        env: configuration
+    }
+
+    console.log('here 5.2',configuration);
+
+    let component = {
+        "url": "http://localhost:8085/remoteEntry.js",
+        // "url": "https://qms-soxo.web.app/remoteEntry.js",
+        // "url": "http://localhost:9090/remoteEntry.js",
+        // "url": configuration.REACT_APP_URL,
+        "scope": "Application",
+        // "scope": "ReportingUI",
+        "name": "Tokens",
+        "props": {
+            "props1": "propsvalue"
+        }
+    }
+
+    return (<>
+
+        <Suspense fallback={<div>Loading now...</div>}>
+
+            {/* Component Wrapper */}
+            <ComponentWrapper component={configuration} {...configuration} />
+            {/* Component Wrapper Ends */}
+
+        </Suspense>
+
+    </>)
+
+}
+
+
+
+export default App;
+
+

package/core/components/component-wrapper/component-wrapper.js

@@ -1,122 +1,122 @@
-
-
-import React, { Suspense } from "react";
-
-
-/**
- * 
- * "component": {
-    "url": "http://localhost:8085/remoteEntry.js",
-    "scope": "curdComponent",
-    "name": "./Widget",
-    "props": {
-        "props1": "propsvalue"
-    }
-    }
- * 
- */
-
-import { useDynamicScript, loadComponent } from "../../utils/script.utils";
-
-
-
-
-/**
- * Expect a component of above structure , language 
- * 
- * @param {*} param0 
- * @returns 
- */
-export const ComponentWrapper = ({ component, language, t }) => {
-
-    /**
-     * 
-     * 
-     * @param {*} props 
-     * @returns 
-     */
-    const Module = (props) => {
-
-        const { ready, failed } = useDynamicScript({
-            url: props.module && props.module.url,
-            component,
-        });
-
-        console.log('here 5.3');
-
-        if (!props.module) {
-            return <h2>No module specified</h2>;
-        }
-
-        if (!ready) {
-            return <Skeleton />;
-        }
-
-        if (failed) {
-            throw new DOMException("Failed to load script");
-        }
-
-        const Component = React.lazy(
-            loadComponent(props.module.scope, props.module.name)
-        );
-
-        console.log('here 5.4', props.module.scope, props.module.name);
-
-        console.log('here 5.5', Component);
-
-        const { HomePage } = Component;
-
-        console.log(HomePage);
-
-        return (
-            <React.Suspense fallback={<Skeleton caption="Loading your application " />}>
-                <Component
-                    {...component.props}
-                // t={t}
-                // store={store}
-                />
-
-                {/* <HomePage /> */}
-
-            </React.Suspense>
-        );
-    };
-
-    /**
-     * 
-     */
-    if (component && component.name && component.url && component.scope) {
-        return (
-            <div className="component-wrapper animate_animated animate_fadeIn">
-                <Module
-                    module={{
-                        name: component.name,
-                        url: component.url,
-                        scope: component.scope,
-                        props: component.props,
-                    }}
-                />
-            </div>
-        );
-    } else {
-        return <Skeleton />;
-    }
-};
-
-
-function Skeleton({ caption = "Simplifying your business | Soxo" }) {
-
-    return (<div class="skeleton-card">
-        <h3 class="loading-animation-text">{caption}</h3>
-
-        <div class="skeleton"></div>
-
-        <div class="skeleton"></div>
-
-        <div class="skeleton"></div>
-
-        <div class="skeleton"></div>
-
-        <div class="skeleton"></div>
-    </div>)
+
+
+import React, { Suspense } from "react";
+
+
+/**
+ * 
+ * "component": {
+    "url": "http://localhost:8085/remoteEntry.js",
+    "scope": "curdComponent",
+    "name": "./Widget",
+    "props": {
+        "props1": "propsvalue"
+    }
+    }
+ * 
+ */
+
+import { useDynamicScript, loadComponent } from "../../utils/script.utils";
+
+
+
+
+/**
+ * Expect a component of above structure , language 
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export const ComponentWrapper = ({ component, language, t }) => {
+
+    /**
+     * 
+     * 
+     * @param {*} props 
+     * @returns 
+     */
+    const Module = (props) => {
+
+        const { ready, failed } = useDynamicScript({
+            url: props.module && props.module.url,
+            component,
+        });
+
+        console.log('here 5.3');
+
+        if (!props.module) {
+            return <h2>No module specified</h2>;
+        }
+
+        if (!ready) {
+            return <Skeleton />;
+        }
+
+        if (failed) {
+            throw new DOMException("Failed to load script");
+        }
+
+        const Component = React.lazy(
+            loadComponent(props.module.scope, props.module.name)
+        );
+
+        console.log('here 5.4', props.module.scope, props.module.name);
+
+        console.log('here 5.5', Component);
+
+        const { HomePage } = Component;
+
+        console.log(HomePage);
+
+        return (
+            <React.Suspense fallback={<Skeleton caption="Loading your application " />}>
+                <Component
+                    {...component.props}
+                // t={t}
+                // store={store}
+                />
+
+                {/* <HomePage /> */}
+
+            </React.Suspense>
+        );
+    };
+
+    /**
+     * 
+     */
+    if (component && component.name && component.url && component.scope) {
+        return (
+            <div className="component-wrapper animate_animated animate_fadeIn">
+                <Module
+                    module={{
+                        name: component.name,
+                        url: component.url,
+                        scope: component.scope,
+                        props: component.props,
+                    }}
+                />
+            </div>
+        );
+    } else {
+        return <Skeleton />;
+    }
+};
+
+
+function Skeleton({ caption = "Simplifying your business | Soxo" }) {
+
+    return (<div class="skeleton-card">
+        <h3 class="loading-animation-text">{caption}</h3>
+
+        <div class="skeleton"></div>
+
+        <div class="skeleton"></div>
+
+        <div class="skeleton"></div>
+
+        <div class="skeleton"></div>
+
+        <div class="skeleton"></div>
+    </div>)
 }