First commit

.env.example

@@ -0,0 +1,4 @@
+VITE_KEYCLOAK_URL="https://auth.reflex-platform.com/auth"
+VITE_KEYCLOAK_REALM="reflex-platform"
+VITE_KEYCLOAK_CLIENT_ID="your_client_id"
+VITE_RP_GRPC_CORE_HOST="https://grpc.core.reflex-platform.com:443"

.gitignore

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

.npmrc

@@ -0,0 +1 @@
+@reflex-platform:registry=https://git.reflex-platform.com/api/packages/reflex-platform/npm/

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 reflex-platform
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,73 @@
+# Example App: Integrating with Reflex Platform
+
+## Purpose
+
+This repository contains an example Vue application demonstrating how to integrate with the Reflex Platform, a powerful tool developed by Hardis Group. This example app showcases how to leverage the Reflex Platform's APIs to build custom integrations and extend the capabilities of your warehouse management system using modern web technologies. It makes use of the [Reflex Platform NPM SDK](https://git.reflex-platform.com/reflex-platform/npm-core-sdk) to demonstrate how to fetch data, and perform key operations within the Reflex Platform ecosystem.
+
+Whether you're a developer looking to understand how to interact with Reflex Platform's services or a business seeking to evaluate the integration potential, this example app provides a hands-on starting point.
+
+## Features
+
+- Demonstrates basic integration with Reflex Platform APIs
+- Illustrates authentication flows and API request patterns
+- Built with Vue 3 and Vite for modern web development
+- Serves as a template for building more complex integrations
+
+## Getting Started
+
+To get started with this example Vue application, follow the steps below:
+
+### 1. Clone the Repository
+
+First, clone this repository to your local machine:
+
+```bash
+git clone https://git.reflex-platform.com/reflex-platform/vue-rp-example.git
+cd vue-rp-example
+```
+
+### 2. Obtain a Reflex Platform Client ID
+
+This example app requires a Reflex Platform client ID for authentication purposes. To obtain this, you need to get in contact with a Hardis representative. The representative will provide you with a unique `VITE_KEYCLOAK_CLIENT_ID` that you'll use to authenticate API requests.
+
+### 3. Configure the Application
+
+Once you have your `VITE_KEYCLOAK_CLIENT_ID`, you'll need to replace the placeholder value in the application with your actual client ID.
+
+1. Create a .env file in the project root (use `.env.example` as a template)
+2. Locate the line that defines `VITE_KEYCLOAK_CLIENT_ID`:
+
+```dart
+VITE_KEYCLOAK_CLIENT_ID='your_client_id_here';
+```
+
+3. Replace `'your_client_id_here'` with the client ID you received from Hardis.
+
+### 3. Run the Application
+
+With the configuration in place, you can now run the Vue application. Use the following commands:
+
+1. Ensure you have all the necessary dependencies installed:
+
+```bash
+npm install
+```
+
+2. Run the application on your preferred device or emulator
+
+```bash
+npm run dev
+```
+
+### 4. Explore and Extend
+
+Once the application is running, explore the provided features and examine the code to understand how the integration with Reflex Platform works. You can use this example as a foundation to build more complex and tailored integrations for your specific use case.
+
+## Requirements
+
+* Node.js 18+
+* npm 9+
+* Modern web browser (Chrome, Firefox, Edge)
+
+## License
+Distributed under the MIT [License](LICENSE). See `LICENSE` for more information.

env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+
+
+interface ImportMetaEnv {
+    readonly RP_GRPC_CORE_HOST: string
+    readonly KEYCLOAK_URL: string
+    readonly KEYCLOAK_REALM: string
+    readonly KEYCLOAL_CLIENT_ID: string
+  }
+  
+  interface ImportMeta {
+    readonly env: ImportMetaEnv
+  }
+  

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RP Example Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "vue-rp-example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "@protobuf-ts/grpcweb-transport": "^2.9.5",
+    "@protobuf-ts/runtime": "^2.9.5",
+    "@reflex-platform/npm-core-sdk": "^1.10.0",
+    "@reflex-platform/npm-viz-sdk": "^1.10.0",
+    "keycloak-js": "^26.1.4",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.13.9",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "npm-run-all2": "^7.0.2",
+    "typescript": "~5.8.0",
+    "vite": "^6.2.1",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.2.8"
+  }
+}

src/App.vue

@@ -0,0 +1,3 @@
+<template>
+    <router-view></router-view>
+</template>

src/keycloak/index.ts

@@ -0,0 +1,20 @@
+import Keycloak, {type KeycloakInitOptions} from 'keycloak-js';
+
+export const keycloak = new Keycloak({
+    url: import.meta.env.VITE_KEYCLOAK_URL, 
+    realm: import.meta.env.VITE_KEYCLOAK_REALM,
+    clientId :import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
+}); 
+
+export async function initKeycloak() {
+    try {
+        const options: KeycloakInitOptions = {
+            checkLoginIframe: false,
+            scope: 'openid profile email groups',
+            onLoad: 'login-required'
+        };
+        await keycloak.init(options);
+    } catch (error) {
+        console.error('Failed to initialize adapter:', error);
+    }
+}

src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import { initKeycloak, keycloak } from './keycloak';
+import router from './router'
+
+await initKeycloak()
+createApp(App).use(router).mount('#app')

src/router/index.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/Home.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+  ],
+})
+
+export default router

src/services/index.ts

@@ -0,0 +1,72 @@
+import { keycloak } from '@/keycloak';
+import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport'
+import { type RpcOptions, type RpcTransport, type RpcInterceptor, mergeRpcOptions, UnaryCall } from "@protobuf-ts/runtime-rpc";
+import { ProjectServiceClient } from '@reflex-platform/npm-core-sdk';
+import { MotdServiceClient } from '@reflex-platform/npm-viz-sdk';
+
+const APISettings = {
+  get token() {
+    if (!keycloak.token) {
+      // Logic to refresh token
+      keycloak.updateToken(30).then(() => {
+        return keycloak.token;
+      }).catch(() => {
+        console.error("Failed to refresh token");
+        return "";
+      });
+    }
+    return keycloak.token;
+  }
+};
+
+// Interceptor example
+const exampleInterceptor : RpcInterceptor = {    
+  interceptUnary(next, method, input, options: RpcOptions): UnaryCall {
+    console.log("I'm intercepting before!")
+    const unaryCall = next(method, input, options);
+    console.log("I'm intercepting after !")
+    return unaryCall
+  }
+}
+
+const coreTransportInstance = new GrpcWebFetchTransport({
+  baseUrl: import.meta.env.VITE_RP_GRPC_CORE_HOST,
+  interceptors: [exampleInterceptor]
+});
+
+const vizTransportInstance = new GrpcWebFetchTransport({
+  baseUrl: import.meta.env.VITE_RP_GRPC_VIZ_HOST,
+  interceptors: [exampleInterceptor]
+});
+
+const createDefaultRpcTransport = (transportInstance: RpcTransport): RpcTransport => {
+  const callOpts: Partial<RpcOptions> = {
+    meta: {
+      authorization: `Bearer ${APISettings.token}`
+    },
+  };
+  return {
+    mergeOptions: options => transportInstance.mergeOptions(options),
+    unary: (method, input, options) => {
+      return transportInstance.unary(method, input, mergeRpcOptions(callOpts, options));
+    },
+    serverStreaming: (method, input, options) => {
+      return transportInstance.serverStreaming(method, input, mergeRpcOptions(callOpts, options));
+    },
+    clientStreaming: (method, options) => {
+      return transportInstance.clientStreaming(method, mergeRpcOptions(callOpts, options));
+    },
+    duplex: (method, options) => {
+      return transportInstance.duplex(method, mergeRpcOptions(callOpts, options));
+    },
+  };
+};
+
+// CORE
+export const ProjectService = () : ProjectServiceClient => {return new ProjectServiceClient(createDefaultRpcTransport(coreTransportInstance))};
+// export const OrganisationService = () : OrganisationServiceClient => { return new OrganisationServiceClient(createDefaultRpcTransport(coreTransportInstance))};
+// ...
+
+// VIZ
+export const MotdService = () : MotdServiceClient => { return new MotdServiceClient(createDefaultRpcTransport(vizTransportInstance))};
+// Add other services as needed

src/views/Home.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { ProjectService } from "../services";
+import type { GetMyContextResult } from "@reflex-platform/npm-core-sdk/proj";
+
+const res = ref<GetMyContextResult | null>(null);
+
+onMounted(async () => {
+  try {
+    const { response } = await ProjectService().getMyUIContext({});
+    res.value = response;
+  } catch (error) {
+    console.error("Failed to fetch UI context:", error);
+  }
+});
+</script>
+
+<template>
+  <div class="container">
+    <h1>Organizations & Projects</h1>
+
+    <div v-if="res?.myContexts?.length" class="organizations">
+      <div
+        v-for="context in res.myContexts"
+        :key="context?.organisation?.iD ?? 'unknown-org'"
+        class="organization-card"
+      >
+        <h2>{{ context?.organisation?.name ?? "Unknown Organization" }}</h2>
+        <p><strong>Org ID:</strong> {{ context?.organisation?.iD ?? "N/A" }}</p>
+
+        <div v-if="context?.projects?.length">
+          <h3>Projects:</h3>
+          <ul class="projects-list">
+            <li v-for="project in context.projects" :key="project?.iD ?? 'unknown-proj'">
+              <strong>{{ project?.name ?? "Unnamed Project" }}</strong>
+              ({{ project?.iD ?? "N/A" }})
+            </li>
+          </ul>
+        </div>
+        <p v-else class="no-projects">No projects available</p>
+      </div>
+    </div>
+
+    <p v-else class="loading">Loading data...</p>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  max-width: 800px;
+  margin: 20px auto;
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+}
+
+.organizations {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.organization-card {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  color: #007bff;
+  margin: 0;
+}
+
+h3 {
+  margin-top: 10px;
+  font-size: 1rem;
+  color: #555;
+}
+
+.projects-list {
+  list-style: none;
+  padding: 0;
+}
+
+.projects-list li {
+  background: #e9ecef;
+  margin: 5px 0;
+  padding: 8px;
+  border-radius: 5px;
+}
+
+.no-projects {
+  color: #888;
+  font-style: italic;
+}
+
+.loading {
+  text-align: center;
+  color: #777;
+}
+</style>

tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

vite.config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})