added base sample ui

.github/workflows/buildSampleUI.yml

@@ -0,0 +1,47 @@
+name: core ui service docker Image CI
+
+on:
+  push:
+    branches: [ "sandbox-exploration" ]
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        fetch-depth: 0  # Fetch all history for tags and branches
+
+    - name: Set up environment variables
+      id: env
+      run: |
+        echo "BRANCH_NAME=${GITHUB_REF#refs/heads/}" >> $GITHUB_ENV
+        echo "ACTION_NUMBER=${GITHUB_RUN_NUMBER}" >> $GITHUB_ENV
+        echo "COMMIT_ID=${GITHUB_SHA: -8}" >> $GITHUB_ENV  # Extract last 8 characters of SHA
+
+    - name: Build the Docker image
+      id: docker_build
+      working-directory: ./micro-frontends/sample
+      run: |
+        IMAGE_TAG=egovio/sample-ui:${{ env.BRANCH_NAME }}-${{ env.COMMIT_ID }}-${{ env.ACTION_NUMBER }}
+        docker build . \
+          --file docker/Dockerfile \
+          --tag $IMAGE_TAG
+        echo "::set-output name=image_name::$IMAGE_TAG"
+
+    - name: Login to Docker Hub and Push Docker Image
+      working-directory: ./micro-frontends/sample
+      env:
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+          IMAGE_NAME: ${{ steps.docker_build.outputs.image_name }}
+      run: |      
+          # Authenticate with Docker Hub
+          echo "$DOCKER_PASSWORD" | docker login -u "$DOCKER_USERNAME" --password-stdin
+          
+          # Push the image to Docker Hub
+          docker push $IMAGE_NAME
+          echo "Docker image pushed: $IMAGE_NAME"

micro-frontends/sample/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

micro-frontends/sample/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

micro-frontends/sample/README.md

@@ -0,0 +1,42 @@
+# React19 New Features
+
+This repo has the examples of ReactJS 19 new features:
+
+1. Action
+
+2. useFormState()
+
+3. useFormStatus()
+
+4. useOptimistic()
+
+5. use() for fetch
+
+6. use() for context()
+
+## How to use this repo?
+
+1. Clone the repo and run `npm i` 
+
+2. Once node_modules are generated now run the dev server `npm run dev`
+
+3. Go to browser and run localhost (as mentioned in the terminal)
+
+3. Go to App.jsx and uncomment/comment the specific example you want to hide/run 
+
+4. Component and features:
+
+- Action: to show how action works in React19
+
+- FormState: to show how useFormState() works in React19
+
+- FormStatus: to show how useFormStatus() works in React19
+
+- Optimistic: to show how useOptimistic() works in React19
+
+- Theme: to show how to use() with context()  in React19
+
+- Users: to show how to use() for API calls in React19
+
+PS: While writing these code these examples were working. As ReactJS 19 is still WIP please update the version 
+accrodingly.

micro-frontends/sample/docker/Dockerfile

@@ -0,0 +1,47 @@
+# Use Node.js base image with version 16
+FROM node:20 AS build
+
+# Set working directory
+WORKDIR /app
+
+# Set build arguments
+ARG BRANCH_NAME
+ARG ACTION_NUMBER
+ARG COMMIT_ID
+
+# Set environment variables based on build arguments
+ENV BRANCH_NAME=$BRANCH_NAME
+ENV ACTION_NUMBER=$ACTION_NUMBER
+ENV COMMIT_ID=$COMMIT_ID
+
+# Copy package.json and yarn.lock (if exists)
+COPY package.json ./
+
+RUN rm -rf node_modules/
+
+RUN rm -rf yarn.lock
+
+# clear cache
+RUN yarn cache clean
+
+# Install dependencies
+RUN yarn install
+
+# Optionally, you can add a label with the commit ID
+LABEL commit_id=$COMMIT_ID
+
+# Copy the rest of the application
+COPY . .
+
+# Build the React app with Webpack
+RUN yarn build
+
+FROM nginx:mainline-alpine
+
+ENV WORK_DIR=/var/web/sample-ui
+
+RUN mkdir -p ${WORK_DIR}
+
+
+COPY --from=build /app/dist ${WORK_DIR}/
+COPY --from=build /app/docker/nginx.conf /etc/nginx/conf.d/default.conf

micro-frontends/sample/docker/nginx.conf

@@ -0,0 +1,12 @@
+server
+{
+  listen 80;
+  underscores_in_headers on;
+
+  location /sample-ui
+  {
+    root /var/web;
+    index index.html index.htm;
+    try_files $uri $uri/ /sample-ui/index.html;
+  }
+}

micro-frontends/sample/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

micro-frontends/sample/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react19",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "idb": "^8.0.0",
+    "react": "19.0.0-beta-26f2496093-20240514",
+    "react-dom": "19.0.0-beta-26f2496093-20240514",
+    "react-hook-form": "^7.52.0",
+    "react-router-dom": "^6.22.3",
+    "tailwindcss-theme-swapper": "^0.12.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "vite": "^5.1.4"
+  }
+}

micro-frontends/sample/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

micro-frontends/sample/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

micro-frontends/sample/src/App.jsx

@@ -0,0 +1,50 @@
+import "./App.css";
+import Users from "./examples/Users";
+import { Suspense } from "react";
+import Theme from './examples/Theme';
+import Action from './examples/Action';
+import Optimistic from "./examples/Optimistic";
+import FormStatus from "./examples/FormStatus";
+import FormState from "./examples/FormState";
+import Sample from "./pages/Sample";
+import Test from "./pages/test";
+import StatusBar from "./components/statusBar";
+import { isOnline ,onNetworkChange} from "./idb/networkStatus";
+import TestIdb from "./pages/testIdb";
+// import TestIdb from "./pages/TestIdb.jsx";
+// import { isOnline, onNetworkChange } from './networkStatus';
+
+
+
+function App() {
+  return (
+    <>
+      <div>
+        <Suspense
+          fallback={
+            <h1 className="text-2xl text-center font-bold mt-5">Loading...</h1>
+          }
+        >
+          {/* <Action />
+          <FormState />
+         <FormStatus />
+           <Optimistic /> */}
+          {/* <Users /> */}
+          <Theme >
+
+          {/* <Sample></Sample> */}
+          {/* <Test></Test> */}
+       <TestIdb></TestIdb>
+          </Theme>
+<StatusBar></StatusBar>
+        </Suspense>
+      </div>
+    </>
+  );
+}
+
+export default App;
+
+
+
+

micro-frontends/sample/src/components/statusBar.jsx

@@ -0,0 +1,25 @@
+
+import { useSyncExternalStore, useDebugValue } from 'react';
+
+ function useOnlineStatus() {
+  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
+  useDebugValue(isOnline ? 'Online' : 'Offline');
+  return isOnline;
+}
+
+function subscribe(callback) {
+  window.addEventListener('online', callback);
+  window.addEventListener('offline', callback);
+  return () => {
+    window.removeEventListener('online', callback);
+    window.removeEventListener('offline', callback);
+  };
+}
+
+
+ function StatusBar() {
+    const isOnline = useOnlineStatus();
+    return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
+  }
+
+  export default StatusBar;