create-pb-tririga-react-app 1.0.0

package/index.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// 1. Get project name from command line
+const projectName = process.argv[2] || 'my-tririga-app';
+const currentDir = process.cwd();
+const projectDir = path.join(currentDir, projectName);
+
+// 2. Create Directory
+if (fs.existsSync(projectDir)) {
+  console.error(`Directory ${projectName} already exists.`);
+  process.exit(1);
+}
+fs.mkdirSync(projectDir);
+
+// 3. Copy Template Files
+const templateDir = path.join(__dirname, 'template');
+
+function copyRecursiveSync(src, dest) {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+
+  if (isDirectory) {
+    fs.mkdirSync(dest, { recursive: true });
+    fs.readdirSync(src).forEach(childItemName => {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+}
+
+copyRecursiveSync(templateDir, projectDir);
+
+// Rename _gitignore to .gitignore
+const gitignorePath = path.join(projectDir, '_gitignore');
+if (fs.existsSync(gitignorePath)) {
+  fs.renameSync(gitignorePath, path.join(projectDir, '.gitignore'));
+}
+
+// 4. Update package.json name
+const pkgJsonPath = path.join(projectDir, 'package.json');
+const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
+pkgJson.name = projectName;
+fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
+
+console.log(`Success! Created ${projectName}.`);
+console.log(`cd ${projectName}`);
+console.log(`npm install`);
+console.log(`npm run dev`);

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "create-pb-tririga-react-app",
+  "version": "1.0.0",
+  "description": "Scaffold a TRIRIGA React app with Vite and TypeScript",
+  "main": "index.js",
+  "bin": {
+    "create-pb-tririga-react-app": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "template"
+  ],
+  "keywords": ["tririga", "react", "vite", "scaffold"],
+  "author": "Your Name",
+  "license": "ISC"
+}

package/template/.env.example

@@ -0,0 +1,14 @@
+# Local Development Config
+VITE_TRIRIGA_URL=http://localhost:8001
+VITE_INSTANCE_ID=-1
+VITE_CONTEXT_PATH=/app
+VITE_MODEL_AND_VIEW=devView
+VITE_BASE_PATH=/app/devView
+VITE_EXPOSED_NAME=devView
+VITE_SSO=false
+VITE_AUTO_LOGIN=true
+
+# Deployment Config (used by tri-deploy)
+TRI_URL=https://your-tririga-server.com
+TRI_USER=your-username
+TRI_PASSWORD=your-password

package/template/README.md

@@ -0,0 +1,59 @@
+# TRIRIGA React App Template
+
+This is a template for building IBM TRIRIGA UX applications using React, TypeScript, and Vite.
+
+## Getting Started
+
+1.  **Install Dependencies**
+    ```bash
+    npm install
+    ```
+
+2.  **Configure Environment**
+    Copy `.env.example` to `.env` and update the values for your local development and deployment settings.
+    ```bash
+    cp .env.example .env
+    ```
+
+3.  **Run Locally**
+    ```bash
+    npm run dev
+    ```
+    Open [http://localhost:5173](http://localhost:5173) (or the port shown in terminal).
+
+## Deployment
+
+To deploy to a TRIRIGA environment:
+
+1.  **Install Depoyment Tool** (If not already installed globally)
+    ```bash
+    npm install -g @tririga/tri-deploy
+    ```
+    *Note: If you prefer not to install globally, you can add `@tririga/tri-deploy` to your devDependencies.*
+
+2.  **Configure Credentials**
+    Ensure your `.env` file has the correct `TRI_URL`, `TRI_USER`, and `TRI_PASSWORD`.
+
+3.  **Run Deployment**
+    The view name will be taken from the `name` field in `package.json`.
+    ```bash
+    npm run build:deploy
+    ```
+
+## Browser Support & Polyfills
+
+## Project Structure
+
+-   `src/components`: Reusable UI components.
+-   `src/pages`: Top-level page definitions (routes).
+-   `src/model`: TRIRIGA AppModel (Datasources).
+-   `src/services`: API services (Auth, Config).
+-   `public/tri-app-config.json`: Local development configuration mocking the server response.
+
+## Tech Stack
+
+-   [React](https://react.dev/)
+-   [TypeScript](https://www.typescriptlang.org/)
+-   [Vite](https://vitejs.dev/)
+-   [Carbon Design System](https://carbondesignsystem.com/)
+-   [@tririga/tririga-react-components](https://www.npmjs.com/package/@tririga/tririga-react-components)

package/template/_gitignore

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

package/template/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>Tririga React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "tririga-react-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "deploy": "dotenv -- cross-var tri-deploy -t %TRI_URL% -u %TRI_USER% -p %TRI_PASSWORD% -v \"$npm_package_name\" -d dist -w",
+    "build:deploy": "npm run build && npm run deploy"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.26.0",
+    "@carbon/icons-react": "^11.55.0",
+    "@carbon/react": "^1.72.0",
+    "@carbon/styles": "^1.72.0",
+    "@tririga/tririga-react-components": "^2.0.6",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cross-var": "^1.1.0",
+    "dotenv-cli": "^8.0.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  }
+}

package/template/public/tri-app-config.json

@@ -0,0 +1,9 @@
+{
+  "instanceId": "-1",
+  "tririgaUrl": "http://localhost:8001",
+  "contextPath": "/app",
+  "modelAndView": "devView",
+  "appPath": "/app/devView",
+  "appExposedName": "devView",
+  "sso": false
+}

package/template/src/App.tsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+import { getAppModel } from './model/AppModel';
+import { Theme, Content, Grid, Column, Button } from '@carbon/react';
+
+function App() {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Example: verify model is present
+    const model = getAppModel();
+    console.log('App loaded with model:', model);
+    setLoading(false);
+  }, []);
+
+  if (loading) return <div>Loading TRIRIGA App...</div>;
+
+  return (
+    <Theme theme="g100">
+      <Content>
+        <Grid>
+          <Column lg={16} md={8} sm={4}>
+            <h1 style={{ marginBottom: '1rem' }}>Welcome to your new TRIRIGA React App</h1>
+            <p style={{ marginBottom: '2rem' }}>
+              This is a template application using React, Vite, TypeScript, and Carbon Design System.
+            </p>
+            <Button>Example Button</Button>
+          </Column>
+        </Grid>
+      </Content>
+    </Theme>
+  )
+}
+
+export default App

package/template/src/components/index.ts

@@ -0,0 +1 @@
+export {}; // Placeholder to ensure folder is tracked

package/template/src/index.css

@@ -0,0 +1,20 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}

package/template/src/main.tsx

@@ -0,0 +1,69 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { HashRouter } from 'react-router-dom'
+import './index.css'
+import App from './App'
+import { initTriAppConfig } from './services/tririgaService'
+import { createAppModel } from './model/AppModel'
+import { standardTririgaLogin, getAuthCheckerForCurrentApp, TriCallback } from '@tririga/tririga-react-components'
+import '@carbon/styles/css/styles.css'
+
+// Determine base path when deployed under TRIRIGA like /app/viewName/
+const computeBasePath = () => {
+  const segments = window.location.pathname.split('/').filter(Boolean)
+  // Expect pattern: [ 'app', '<viewId>', ...]
+  if (segments[0] === 'app' && segments[1]) {
+    return `/app/${segments[1]}`
+  }
+  return '' // fallback for local dev (served at root)
+}
+
+const basename = computeBasePath()
+
+async function bootstrap() {
+  let shouldRenderApp = true;
+  try {
+    // Ensure app config is available
+    await initTriAppConfig()
+    
+    // Auto-login logic
+    const autoLogin = !import.meta.env.DEV || String(import.meta.env.VITE_AUTO_LOGIN ?? 'false') === 'true'
+    if (autoLogin) {
+      const currentUser = await standardTririgaLogin();
+      if (!currentUser) {
+        shouldRenderApp = false;
+        return;
+      }
+      
+      try {
+        // Optional auth check
+        const authChecker = await getAuthCheckerForCurrentApp()
+        if (authChecker && !authChecker.hasPermission('read')) {
+             alert("Unauthorized access");
+             shouldRenderApp = false;
+        }
+      } catch (e) {
+        console.warn('Auth check skipped or failed', e)
+      }
+    }
+
+    if (shouldRenderApp) {
+      // Initialize Model
+      createAppModel((err: any) => console.error("Model Error:", err));
+      
+      const root = createRoot(document.getElementById('root')!)
+      root.render(
+        <StrictMode>
+          <HashRouter>
+            <App />
+          </HashRouter>
+        </StrictMode>,
+      )
+    }
+  } catch (e) {
+    console.error('Bootstrap failed', e)
+    document.body.innerHTML = `<div style="padding: 20px; color: red;"><h3>Application Error</h3><p>Failed to initialize application configuration.</p></div>`;
+  }
+}
+
+bootstrap()

package/template/src/model/AppModel.ts

@@ -0,0 +1,14 @@
+import { TriModel, getTriAppConfig } from '@tririga/tririga-react-components';
+
+let appModel: TriModel | null = null;
+
+export function createAppModel(onError?: (err: any) => void): TriModel {
+  const { modelAndView, instanceId } = getTriAppConfig();
+  // @ts-expect-error - TriModel types might differ slightly in strict mode vs JS
+  appModel = new TriModel(modelAndView, instanceId, onError);
+  return appModel!;
+}
+
+export function getAppModel(): TriModel | null {
+  return appModel;
+}

package/template/src/pages/index.ts

@@ -0,0 +1 @@
+export {}; // Placeholder to ensure folder is tracked

package/template/src/services/AuthService.ts

@@ -0,0 +1,58 @@
+// AuthService.ts
+import { getTriAppConfig, standardTririgaLogin, TriLoginApi } from '@tririga/tririga-react-components';
+
+export class AuthService {
+  /**
+   * Helper to construct a URL for manual login redirection if needed
+   */
+  static buildLoginUrl(): string {
+    const cfg = getTriAppConfig();
+    const base = `${cfg.tririgaUrl}${cfg.contextPath}`;
+    const redirect = window.location.href;
+    return `${base}/?initialUri=${encodeURIComponent(redirect)}`;
+  }
+
+  /**
+   * Forces a login check. Use this if you suspect the session is dead.
+   */
+  static async login(): Promise<void> {
+    const cfg = getTriAppConfig();
+    try {
+      // standardTririgaLogin handles the redirect logic internally
+      const user = await standardTririgaLogin();
+      if (!user) {
+        // If it returns null/false, it means a redirect is likely happening
+        return; 
+      }
+    } catch (e) {
+      console.warn("Login helper failed, falling back to manual redirect", e);
+    }
+    // Fallback
+    window.location.assign(this.buildLoginUrl());
+  }
+
+  /**
+   * Logs the user out of TRIRIGA and reloads the page.
+   */
+  static async logout(): Promise<void> {
+    const cfg = getTriAppConfig();
+    try {
+      // Try using the SDK's API first
+      if (TriLoginApi && typeof TriLoginApi.logout === 'function') {
+        await TriLoginApi.logout();
+      } else {
+        throw new Error('TriLoginApi.logout not available');
+      }
+    } catch (e) {
+      // Fallback: Manual fetch to the logout endpoint
+      try {
+        await fetch(`${cfg.tririgaUrl}${cfg.contextPath}/logout`, {
+          method: 'POST',
+          credentials: 'include'
+        });
+      } catch (_) { /* ignore fetch errors */ }
+    }
+    // Reloading will trigger the bootstrap logic in main.tsx, which sends them to the login screen
+    window.location.reload();
+  }
+}

package/template/src/services/tririgaService.ts

@@ -0,0 +1,44 @@
+// Custom type for import.meta.env to satisfy TS if not fully typed
+/// <reference types="vite/client" />
+
+import { setTriAppConfig, getTriAppConfig, TriAppConfig } from '@tririga/tririga-react-components';
+
+export async function initTriAppConfig(): Promise<TriAppConfig> {
+  // In Vite, use import.meta.env.* for dev; in production, create config from current environment
+  if (import.meta.env.DEV) {
+    const config: TriAppConfig = {
+      instanceId: import.meta.env.VITE_INSTANCE_ID || '-1',
+      tririgaUrl: import.meta.env.VITE_TRIRIGA_URL || 'http://localhost:8001',
+      contextPath: import.meta.env.VITE_CONTEXT_PATH || '/dev',
+      modelAndView: import.meta.env.VITE_MODEL_AND_VIEW || 'unknown',
+      appPath: import.meta.env.VITE_BASE_PATH,
+      appExposedName: import.meta.env.VITE_EXPOSED_NAME,
+      sso: String(import.meta.env.VITE_SSO).toLowerCase() === 'true',
+    };
+    setTriAppConfig(config);
+    return getTriAppConfig();
+  }
+  
+  // Production: create config based on current location
+  // Extract the app path from current URL like tri-dsp does
+  const segments = window.location.pathname.split('/').filter(Boolean);
+  let appPath = '/';
+  if (segments[0] === 'app' && segments[1]) {
+    appPath = `/app/${segments[1]}/`;
+  }
+  // Assume view name matches exposed name valid for standard deployments
+  const viewName = segments[1] || 'unknownView';
+  
+  const config: TriAppConfig = {
+    instanceId: "-1",
+    tririgaUrl: window.location.origin,
+    contextPath: "/app",
+    modelAndView: viewName,
+    appPath: appPath,
+    appExposedName: viewName,
+    sso: false
+  };
+  
+  setTriAppConfig(config);
+  return getTriAppConfig();
+}

package/template/src/types/tririga-react-components.d.ts

@@ -0,0 +1,107 @@
+// Temporary ambient module declarations for @tririga/tririga-react-components
+// Extend / refine as needed once official types are available.
+
+declare module '@tririga/tririga-react-components' {
+  import { ComponentType, ReactNode } from 'react';
+
+  export interface TriAppConfig {
+    instanceId: string;
+    tririgaUrl: string;
+    contextPath: string;
+    modelAndView: string;
+    appPath?: string;
+    appExposedName?: string;
+    sso?: boolean;
+    [key: string]: any;
+  }
+
+  export type TriCallback = (err: any) => void;
+
+  export class TriModel {
+    constructor(modelAndView: string, instanceId: string, onError?: TriCallback);
+    getRecord(dsName: string, query?: Record<string, any>): Promise<any>;
+    // Add any other methods you use later
+  }
+
+  export function fetchTriAppConfig(): Promise<TriAppConfig>;
+  export function setTriAppConfig(config: TriAppConfig): void;
+  export function getTriAppConfig(): TriAppConfig;
+  export function standardTririgaLogin(): Promise<any>;
+  export function getAuthCheckerForCurrentApp(): Promise<any>;
+
+  // TriImage Component
+  export interface TriImageProps {
+    value?: string | object;
+    sizing?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    className?: string;
+    width?: string | number;
+    height?: string | number;
+    alt?: string;
+  }
+  export const TriImage: ComponentType<TriImageProps>;
+
+  // TriFloorPlan Component
+  export interface TriFloorPlanPlugin {
+    type: string;
+    id: string;
+    [key: string]: any;
+  }
+
+  export interface TriFloorPlanProps {
+    floorPlanId: number | null;
+    plugins?: TriFloorPlanPlugin[];
+    svgAriaLabel?: string;
+    spaceLayer?: string;
+    onFloorPlanLoadError?: (error: any) => void;
+    onViewportChange?: (viewport: any) => void;
+  }
+  export const TriFloorPlan: ComponentType<TriFloorPlanProps>;
+  export const TriFloorPlanSkeleton: ComponentType<{}>;
+
+  // TriFloorPlan Plugins
+  export class TriZoomPlugin {
+    static type: string;
+  }
+  export class TriPanPlugin {
+    static type: string;
+  }
+  export class TriHighlightPlugin {
+    static type: string;
+  }
+  export class TriSelectablePlugin {
+    static type: string;
+  }
+  export class TriLabelsPlugin {
+    static type: string;
+  }
+  export class TriNavPlugin {
+    static type: string;
+  }
+  export class TriPinPlugin {
+    static type: string;
+  }
+  export class TriDropablePlugin {
+    static type: string;
+  }
+  export class TriLastPositionPlugin {
+    static type: string;
+  }
+  export class TriLayersPlugin {
+    static type: string;
+  }
+
+  // TriFloorPlanAPI
+  export const TriFloorPlanAPI: {
+    getFloorplanId(floorId: string | number): Promise<number | null>;
+    getFloorplan(floorplanId: number): Promise<string | null>;
+    cacheFloorplan(floorplanId: number, floorplan: string): void;
+    [key: string]: any;
+  };
+
+  // TriLoginApi
+  export const TriLoginApi: {
+    login(): Promise<void>;
+    logout(): Promise<void>;
+    [key: string]: any;
+  };
+}

package/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": []
+}

package/template/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  // Use relative base path for portability across environments
+  base: './', 
+  plugins: [react()],
+})