@bluealba/platform-cli 0.2.0

package/templates/react-ui-module-template/Dockerfile

@@ -0,0 +1,15 @@
+FROM caddy:alpine
+
+WORKDIR /usr/share/caddy/
+
+ARG NAME
+ENV NAME=$NAME
+
+ARG DISPLAY_NAME
+ENV DISPLAY_NAME=$DISPLAY_NAME
+
+COPY ./apps/{{applicationName}}-ui/version.json /usr/share/nginx/html/version.json
+COPY ./apps/{{applicationName}}-ui/dist /usr/share/caddy/
+COPY ./apps/{{applicationName}}-ui/caddy/Caddyfile /etc/caddy/Caddyfile
+
+EXPOSE 8080

package/templates/react-ui-module-template/Dockerfile.development

@@ -0,0 +1,12 @@
+FROM node:20-alpine as development
+
+ENV NODE_ENV=development
+ENV PORT=80
+
+ARG BA_NPM_AUTH_TOKEN
+
+WORKDIR /app/out/{{uiBaseDir}}/{{applicationName}}-ui
+
+EXPOSE 80
+
+CMD ["npm", "run", "start:dev"]

package/templates/react-ui-module-template/Dockerfile_nginx

@@ -0,0 +1,11 @@
+FROM nginxinc/nginx-unprivileged:mainline-alpine-slim
+
+WORKDIR /usr/share/nginx/html
+
+COPY ./version.json ./version.json
+COPY ./dist /usr/share/nginx/html
+
+COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 8080
+

package/templates/react-ui-module-template/caddy/Caddyfile

@@ -0,0 +1,21 @@
+:8080 {
+    root * /usr/share/caddy/
+    encode gzip
+    file_server {
+        hide .git
+    }
+
+    log {
+        output stdout
+    }
+
+    header {
+        ?Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0"
+        ?Pragma "no-cache"
+        ?Expires "0"
+    }
+
+    handle_path /version {
+      respond `{"version": "{$VERSION}", "name": "{$NAME}", "displayName": "{$DISPLAY_NAME}"}`
+    }
+}

package/templates/react-ui-module-template/nginx/default.conf

@@ -0,0 +1,23 @@
+server {
+    listen       8080;
+    listen  [::]:8080;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+        add_header Pragma "no-cache";
+        add_header Expires "0";
+    }
+
+    location /version {
+        default_type application/json;
+        alias /usr/share/nginx/html/version.json;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

package/templates/react-ui-module-template/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@{{organizationName}}/{{applicationName}}-ui",
+  "version": "0.1.0",
+  "displayName": "{{applicationDisplayName}}",
+  "scripts": {
+    "start": "pae-ui-sdk start",
+    "start:dev": "pae-ui-sdk start --dev",
+    "build": "pae-ui-sdk build",
+    "lint": "pae-ui-sdk lint",
+    "lint:fix": "pae-ui-sdk lint --fix"
+  },
+  "devDependencies": {
+    "@bluealba/pae-ui-react-core": "4.4.0",
+    "@bluealba/pae-ui-react-sdk": "1.0.2",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "husky": "9.1.7",
+    "ts-loader": "9.5.2"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-query": "3.39.3",
+    "react-router-dom": "6.26.1"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}

package/templates/react-ui-module-template/src/Icon.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Icon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8.856 17.225A1.388 1.388 0 1 0 8.88 20a1.388 1.388 0 0 0 -0.025 -2.775m5.537 -10.559a1.388 1.388 0 1 0 -0.022 -2.775 1.388 1.388 0 0 0 0.022 2.775m-3.787 6.587a1.388 1.388 0 1 0 0.022 2.775 1.388 1.388 0 0 0 -0.022 -2.775m5.521 3.971a1.388 1.388 0 1 0 0.02 2.775 1.388 1.388 0 0 0 -0.02 -2.775m0 -14.447a1.388 1.388 0 1 0 -0.024 -2.775 1.388 1.388 0 0 0 0.024 2.775m-8.32 10.476a1.388 1.388 0 1 0 -0.024 -2.775 1.388 1.388 0 0 0 0.024 2.775M3.9 7.766a1.388 1.388 0 1 0 -0.025 -2.775 1.388 1.388 0 0 0 0.025 2.775m0 7.133a1.388 1.388 0 1 0 -1.291 -0.856 1.388 1.388 0 0 0 1.291 0.854zm3.906 -5.456a1.388 1.388 0 1 0 -1.399 -1.39 1.393 1.393 0 0 0 1.4 1.388zm6.587 6.587a1.388 1.388 0 1 0 -0.022 -2.775 1.388 1.388 0 0 0 0.022 2.775m-5.188 -10.751a1.4 1.4 0 1 0 2.797 0.024 1.4 1.4 0 0 0 -2.797 -0.025m-0.35 -2.504a1.388 1.388 0 1 0 -0.024 -2.78 1.388 1.388 0 0 0 0.024 2.782z" fill="currentColor" /></svg>
+)
+
+export default Icon

package/templates/react-ui-module-template/src/components/Icons/BaseIconProps.ts

@@ -0,0 +1,4 @@
+export interface BaseIconProps {
+    width?: string;
+    height?: string;
+}

package/templates/react-ui-module-template/src/components/Icons/HomeTitleIcon.tsx

@@ -0,0 +1,16 @@
+import { type FC } from 'react';
+
+export interface HomeTitleIconProps { }
+
+const HomeTitleIcon: FC<HomeTitleIconProps> = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+      <path fillRule="evenodd" clipRule="evenodd" d="M14.1077 3.00001L14.0805 3C13.9291 2.99998 13.8113 2.99996 13.6999 3.00671C12.2859 3.09234 11.0478 3.98473 10.5195 5.29901C10.4776 5.40318 10.4087 5.61008 10.3595 5.75766L10.3543 5.77319C10.2169 6.14641 9.96864 6.46965 9.68128 6.70046C9.37798 6.71027 9.08829 6.72293 8.81139 6.73927C6.61944 6.86859 5.22843 7.22829 4.22795 8.22877C3.90174 8.55499 3.64365 8.92272 3.43945 9.3462C3.51622 9.3724 3.59102 9.40842 3.66213 9.45465C6.46252 11.2749 8.22198 12.4134 9.68393 13.1438C9.77254 12.6822 10.1785 12.3335 10.666 12.3335C11.2183 12.3335 11.666 12.7812 11.666 13.3335V13.944C14.4919 14.7968 17.5067 14.7968 20.3326 13.9441V13.3335C20.3326 12.7812 20.7804 12.3335 21.3326 12.3335C21.8201 12.3335 22.2261 12.6823 22.3147 13.1439C23.7767 12.4135 25.5362 11.275 28.3367 9.45465C28.4077 9.4085 28.4824 9.37252 28.559 9.34634C28.3548 8.9228 28.0967 8.55502 27.7704 8.22877C26.77 7.22829 25.3789 6.86859 23.187 6.73927C22.9241 6.72376 22.6497 6.71156 22.3631 6.70197C22.3451 6.68726 22.3269 6.67208 22.3088 6.65642C21.9878 6.37914 21.7369 6.01348 21.6104 5.67051L21.6062 5.65793C21.5584 5.51435 21.5212 5.4026 21.4795 5.29901C20.9512 3.98473 19.713 3.09234 18.2991 3.00671C18.1877 2.99996 18.0699 2.99998 17.9185 3L14.1077 3.00001ZM19.756 6.42092L19.75 6.40661L19.7435 6.39048L19.7374 6.37455L19.7325 6.3613L19.7302 6.35462L19.7245 6.3383L19.7194 6.32325L19.7166 6.3149L19.713 6.30378L19.71 6.29438L19.7077 6.2868C19.6551 6.12944 19.639 6.08272 19.6239 6.04501C19.3837 5.44761 18.8209 5.04198 18.1782 5.00305C18.1352 5.00045 18.0825 5.00001 17.8913 5.00001H14.1077C13.9165 5.00001 13.8638 5.00045 13.8208 5.00305C13.1782 5.04197 12.6155 5.44748 12.3752 6.04472L12.3717 6.05403L12.3611 6.08326C12.3523 6.10806 12.3415 6.13905 12.3291 6.17542C12.307 6.23992 12.2823 6.31394 12.2572 6.38915L12.2548 6.39703L12.2518 6.40641L12.2481 6.41753L12.2454 6.42588L12.2402 6.44095L12.2346 6.45726L12.2322 6.46395L12.2274 6.47721L12.2213 6.49316L12.2148 6.50933L12.2092 6.52253L12.2083 6.52448C12.1898 6.57228 12.1701 6.61998 12.1494 6.66752C12.5275 6.66667 12.9216 6.66667 13.3325 6.66667H18.6659C19.0812 6.66667 19.4793 6.66667 19.8612 6.66755C19.8232 6.58608 19.7881 6.50379 19.756 6.42092Z" fill="#2694E3" />
+      <path d="M2.88408 11.3327C2.66797 12.8044 2.66797 14.7325 2.66797 17.3331C2.66797 22.3614 2.66797 24.8756 4.23007 26.4377C5.79216 27.9998 8.30632 27.9998 13.3346 27.9998H18.668C23.6963 27.9998 26.2104 27.9998 27.7725 26.4377C29.3346 24.8756 29.3346 22.3614 29.3346 17.3331C29.3346 14.7327 29.3346 12.8046 29.1186 11.333C26.083 13.3061 24.1375 14.5644 22.3348 15.3393V15.9999C22.3348 16.5522 21.887 16.9999 21.3348 16.9999C20.7898 16.9999 20.3466 16.564 20.335 16.0218C17.4946 16.7706 14.5082 16.7706 11.6679 16.0217C11.6562 16.5639 11.2131 16.9999 10.6681 16.9999C10.1158 16.9999 9.66809 16.5522 9.66809 15.9999V15.3392C7.86536 14.5643 5.91972 13.3059 2.88408 11.3327Z" fill="#0070C0" />
+    </svg>
+  );
+};
+
+HomeTitleIcon.displayName = 'HomeTitleIcon';
+
+export default HomeTitleIcon;

package/templates/react-ui-module-template/src/components/Icons/InfoContentIcon.tsx

@@ -0,0 +1,16 @@
+import { type FC } from 'react';
+
+export interface InfoContentIconProps {}
+
+const InfoContentIcon: FC<InfoContentIconProps> = () => {
+  return (
+    <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect opacity="0.5" width="64" height="64" rx="4.26667" transform="matrix(-1 0 0 1 64 0)" fill="var(--pae-shell-color-secondary)" fillOpacity="0.1"/>
+      <path d="M43.2 39.4674V32.0008C43.2 25.8152 38.1856 20.8008 32 20.8008C25.8145 20.8008 20.8 25.8152 20.8 32.0008V39.4674M23.9112 43.2008C22.1929 43.2008 20.8 41.8079 20.8 40.0897V37.6008C20.8 35.8826 22.1929 34.4897 23.9112 34.4897C25.6294 34.4897 27.0223 35.8826 27.0223 37.6008V40.0897C27.0223 41.8079 25.6294 43.2008 23.9112 43.2008ZM40.0889 43.2008C38.3707 43.2008 36.9778 41.8079 36.9778 40.0897V37.6008C36.9778 35.8826 38.3707 34.4897 40.0889 34.4897C41.8072 34.4897 43.2 35.8826 43.2 37.6008V40.0897C43.2 41.8079 41.8072 43.2008 40.0889 43.2008Z" stroke="var(--pae-shell-color-secondary)" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  );
+};
+
+InfoContentIcon.displayName = 'InfoContentIcon';
+
+export default InfoContentIcon;

package/templates/react-ui-module-template/src/declarations.d.ts

@@ -0,0 +1,46 @@
+declare module '@{{organizationName}}/*';
+
+declare module '*.css' {
+  const content: Record<string, string>;
+  export default content;
+}
+
+declare module '*.html' {
+  const rawHtmlFile: string;
+  export = rawHtmlFile;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}

package/templates/react-ui-module-template/src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,21 @@
+import {useCallback, useRef} from "react";
+
+/**
+ * Similar to useCallback but gives one that is debounced for example to handle input text onchange
+ */
+const useDebouncedCallback = (func: Function, wait: number, dependencies) => {
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+  return useCallback(
+      (...args) => {
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+          clearTimeout(timeout.current);
+          func(...args);
+        }, wait);
+      },
+      [func, wait, ...dependencies]
+  );
+};
+
+export default useDebouncedCallback

package/templates/react-ui-module-template/src/main.module.css

@@ -0,0 +1,10 @@
+
+strong {
+    color: var(--pae-shell-color-secondary);
+}
+
+input {
+    color: var(--platform-input-color) !important;
+    background-color: var(--platform-input-background-color) !important;
+    border: 1px solid var(--platform-input-border-color) !important;
+}

package/templates/react-ui-module-template/src/main.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOMClient from "react-dom/client";
+
+import { initializeMicroFrontend } from "@bluealba/pae-ui-react-core";
+
+import Root from "./root.component";
+
+/** exports the menu used by pae-shell */
+export { default as menu } from "./menu";
+/** application icon */
+export { default as icon } from "./Icon";
+
+import './main.module.css'
+
+export const { bootstrap, mount, unmount } = initializeMicroFrontend({
+  React,
+  ReactDOMClient,
+  rootComponent: Root,
+});

package/templates/react-ui-module-template/src/menu.ts

@@ -0,0 +1,65 @@
+/**
+ * This applications menu metadata.
+ * The menu gets generated and rendered by pae-shell-ui based on this.
+ * This for sure will evolve to address more complex cases such as dynamic labels
+ *
+ * Menu Example:
+ * ------------
+  {
+    label: "Backend Integration",
+    items: [
+      {
+        label: "Service Calls",
+        path: '/backend/service-calls'
+      },
+      {
+        label: "GQL Subscriptions",
+        path: '/backend/graphql-subscriptions'
+      }
+    ]
+  },
+  {
+    label: "Events Tracking",
+    path: "/events-tracking"
+  },
+  {
+    label: 'UI',
+    items: [
+      {
+        label: "Extension Points",
+        path: "/ui/extension-points"
+      },
+      {
+        label: "Styling",
+        path: '/ui/styling'
+      },
+      {
+        label: "Shell Props",
+        path: '/ui/shell-props'
+      }
+    ]
+  },
+  {
+    label: "Authorization",
+    path: "/authorization"
+  },
+  {
+    label: "Impersonation",
+    path: "/impersonation"
+  },
+  {
+    label: "Feature Flags",
+    path: "/feature-flags"
+  },
+  {
+    label: "Rooms",
+    path: "/rooms"
+  }
+]
+*/
+export default [
+  {
+    label: "Example",
+    path: `/{{applicationName}}`
+  }
+]

package/templates/react-ui-module-template/src/root.component.tsx

@@ -0,0 +1,26 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from 'react-query/devtools';
+import { useModuleMetadata } from "@bluealba/pae-ui-react-core";
+
+import Home from "./views/Home";
+
+const queryClient = new QueryClient();
+
+export default function Root() {
+  const module = useModuleMetadata()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="*" element={<Home />} />
+
+          <Route path={`${module.ui.route}/example`} element={<div>Example</div>} />
+        </Routes>
+      </BrowserRouter>
+      <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
+    </QueryClientProvider>
+  );
+}
+

package/templates/react-ui-module-template/src/services.ts

@@ -0,0 +1,2 @@
+
+export const SERVICE_NAME = '@{{organizationName}}/{{platformName}}-service'

package/templates/react-ui-module-template/src/views/Home/Home.tsx

@@ -0,0 +1,30 @@
+import { type FC } from 'react';
+
+import { SERVICE_NAME } from "@/services";
+//import { useAuth, useServiceInvoker } from "@bluealba/pae-ui-react-core";
+
+export interface HomeProps { }
+
+const Home: FC<HomeProps> = () => {
+  //const invoker = useServiceInvoker(SERVICE_NAME);
+
+  /*
+    useEffect(() => {
+      const doIt = async () => {
+        const response = await invoker('/some-endpoint');
+        ...
+      }
+      doIt()
+    }, []);
+  */
+
+  return (
+    <>
+      Home Content
+    </>
+  )
+};
+
+Home.displayName = 'Home';
+
+export default Home;

package/templates/react-ui-module-template/src/views/Home/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Home';
+export * from './Home';

package/templates/react-ui-module-template/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "files": ["src/main.tsx"],
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test*"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "declarationDir": "dist",
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+    "esModuleInterop": true,
+    "target": "ES2020",
+    "module": "ES2020",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015",
+      "es2015.promise",
+      "es2016.array.include",
+      "es2018"
+    ],
+    "declaration": true,
+    "emitDeclarationOnly": true
+  }
+}

package/templates/react-ui-module-template/webpack.config.js

@@ -0,0 +1,3 @@
+module.exports = (config) => {
+  return config;
+};