@cdx-di-template/webtemplate-investment-widget 0.0.1

package/README.md

@@ -0,0 +1,40 @@
+# @cdx-extensions/webtemplate-investment-widget
+
+Nx generator template files for a CDX investment portfolio web widget, in the same format as `@cdx-extensions/widget-template-web` `appGenerator/files`.
+
+## Contents
+
+- `module-federation.config.ts.template`
+- `src/**/*.template` — widget source with EJS placeholders (`<%= name %>`, `<%= upperCamel(name) %>`, `__name__`)
+- `src/__mocks__/investmentMock.json` — static mock portfolio data (no `.template` suffix)
+
+## Build
+
+From the repo root:
+
+```bash
+npx nx build webtemplate-investment-widget
+```
+
+Or from this directory:
+
+```bash
+npm run build
+```
+
+Output is written to `dist/` (local) and `dist/packages/webtemplate-investment-widget/` (staged publish layout).
+
+Published `dist/` includes:
+
+- `module-federation.config.ts.template`
+- `src/**/*.template` — widget source with EJS placeholders
+- Project scaffold templates (`.babelrc`, `project.json`, `tsconfig.*`, `jest.config.ts`, `webpack.config.ts`, etc.) shared from `tools/widget-di-template-generator/projectFiles/`
+- `src/__mocks__/investmentMock.json` — static mock portfolio data
+
+## Publish
+
+```bash
+npx nx publish-npm webtemplate-investment-widget
+```
+
+Ensure you are authenticated to the Candescent npm registry before publishing.

package/dist/.babelrc.template

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "importSource": "@emotion/react"
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

package/dist/.eslintrc.json.template

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "<%= relativeToRoot %>.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/dist/jest.config.ts.template

@@ -0,0 +1,12 @@
+/* eslint-disable */
+export default {
+  displayName: '<%= name %>',
+  preset: '<%= relativeToRoot %>jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '<%= relativeToRoot %>coverage/<%= projectRoot %>',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+};

package/dist/module-federation.config.ts.template

@@ -0,0 +1,11 @@
+import { ModuleFederationConfig } from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+  disableNxRuntimeLibraryControlPlugin: true,
+  name: '<%= name %>',
+  exposes: {
+    './<%= upperCamel(name) %>': './src/app/<%= upperCamel(name) %>',
+  },
+};
+
+export default config;

package/dist/project.json.template

@@ -0,0 +1,77 @@
+{
+  "name": "<%= name %>",
+  "$schema": "<%= relativeToRoot %>node_modules/nx/schemas/project-schema.json",
+  "root": "<%= projectRoot %>",
+  "sourceRoot": "<%= projectRoot %>/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "qal",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/<%= projectRoot %>",
+        "index": "<%= projectRoot %>/src/index.html",
+        "baseHref": "/",
+        "main": "<%= projectRoot %>/src/main.ts",
+        "tsConfig": "<%= projectRoot %>/tsconfig.app.json",
+        "assets": [
+          "<%= projectRoot %>/src/favicon.ico",
+          "<%= projectRoot %>/src/assets",
+          "<%= projectRoot %>/src/locales"
+        ],
+        "styles": [],
+        "scripts": [],
+        "webpackConfig": "<%= projectRoot %>/webpack.config.ts"
+      },
+      "configurations": <%- buildConfigurations %>
+    },
+    "serve": {
+      "executor": "@nx/react:module-federation-dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "<%= name %>:build",
+        "hmr": true,
+        "port": <%= port %>
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "<%= name %>:build:development"
+        },
+        "production": {
+          "buildTarget": "<%= name %>:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "defaultConfiguration": "production",
+      "options": {
+        "buildTarget": "<%= name %>:build",
+        "watch": false,
+        "port": <%= port %>
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "<%= name %>:build:development"
+        },
+        "production": {
+          "buildTarget": "<%= name %>:build:production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "<%= projectRoot %>/jest.config.ts"
+      }
+    }
+  }
+}

package/dist/src/__mocks__/investmentMock.json

@@ -0,0 +1,138 @@
+{
+    "totalValue": 175430.5,
+    "totalValueChange": 3240.75,
+    "totalValueChangePercent": 2.65,
+    "cashBalance": 15230.0,
+    "investedValue": 110200.5,
+    "dayChange": 1250.3,
+    "dayChangePercent": 1.01,
+    "holdings": [
+      {
+        "symbol": "AAPL",
+        "name": "Apple Inc.",
+        "shares": 45,
+        "currentPrice": 175.23,
+        "value": 7885.35,
+        "change": 125.5,
+        "changePercent": 1.62,
+        "allocation": 6.29
+      },
+      {
+        "symbol": "MSFT",
+        "name": "Microsoft Corporation",
+        "shares": 30,
+        "currentPrice": 378.85,
+        "value": 11365.5,
+        "change": 89.25,
+        "changePercent": 0.79,
+        "allocation": 9.07
+      },
+      {
+        "symbol": "GOOGL",
+        "name": "Alphabet Inc.",
+        "shares": 25,
+        "currentPrice": 142.56,
+        "value": 3564.0,
+        "change": -45.2,
+        "changePercent": -1.25,
+        "allocation": 2.84
+      },
+      {
+        "symbol": "AMZN",
+        "name": "Amazon.com Inc.",
+        "shares": 40,
+        "currentPrice": 145.32,
+        "value": 5812.8,
+        "change": 78.4,
+        "changePercent": 1.37,
+        "allocation": 4.64
+      },
+      {
+        "symbol": "TSLA",
+        "name": "Tesla, Inc.",
+        "shares": 50,
+        "currentPrice": 248.5,
+        "value": 12425.0,
+        "change": 325.0,
+        "changePercent": 2.68,
+        "allocation": 9.91
+      },
+      {
+        "symbol": "SPY",
+        "name": "SPDR S&P 500 ETF",
+        "shares": 100,
+        "currentPrice": 445.67,
+        "value": 44567.0,
+        "change": 567.0,
+        "changePercent": 1.29,
+        "allocation": 35.52
+      },
+      {
+        "symbol": "VTI",
+        "name": "Vanguard Total Stock Market ETF",
+        "shares": 80,
+        "currentPrice": 234.12,
+        "value": 18729.6,
+        "change": 234.4,
+        "changePercent": 1.27,
+        "allocation": 14.93
+      },
+      {
+        "symbol": "BND",
+        "name": "Vanguard Total Bond Market ETF",
+        "shares": 120,
+        "currentPrice": 78.45,
+        "value": 9414.0,
+        "change": 12.0,
+        "changePercent": 0.13,
+        "allocation": 7.51
+      }
+    ],
+    "recentActivity": [
+      {
+        "id": "1",
+        "type": "BUY",
+        "symbol": "AAPL",
+        "shares": 5,
+        "price": 174.5,
+        "date": "2024-01-15",
+        "time": "10:30 AM"
+      },
+      {
+        "id": "2",
+        "type": "SELL",
+        "symbol": "GOOGL",
+        "shares": 10,
+        "price": 143.2,
+        "date": "2024-01-14",
+        "time": "2:15 PM"
+      },
+      {
+        "id": "3",
+        "type": "DIVIDEND",
+        "symbol": "MSFT",
+        "amount": 45.0,
+        "date": "2024-01-10",
+        "time": "9:00 AM"
+      },
+      {
+        "id": "4",
+        "type": "BUY",
+        "symbol": "SPY",
+        "shares": 20,
+        "price": 444.0,
+        "date": "2024-01-08",
+        "time": "11:45 AM"
+      }
+    ],
+    "performance": {
+      "oneDay": 1.01,
+      "oneWeek": 2.35,
+      "oneMonth": 5.42,
+      "threeMonths": 8.67,
+      "sixMonths": 12.34,
+      "oneYear": 18.56,
+      "allTime": 24.89
+    }
+  }
+  

package/dist/src/app/__name__.tsx.template

@@ -0,0 +1,447 @@
+import React, { useState } from 'react';
+import { ThemeProvider, CssBaseline, useTheme } from '@mui/material';
+import { createTheme, type Theme } from '@mui/material/styles';
+import { PlatformSDK } from '@cdx-extensions/di-sdk';
+import { environment } from '../environments/environment';
+import investment from '../__mocks__/investmentMock.json';
+import type { <%= upperCamel(name) %>Props } from '../types';
+import { defaultBranding, type BrandingConfig } from './components/types/branding';
+
+/**
+ * Federated module entry point component. This will be the component that is used
+ * when displayed as an MFE on a page.
+ */
+
+const DEFAULT_BRANDING_ID = 'branding-1';
+
+/** Fixed allocation colors for the donut chart (same as pre-theme sample). */
+const DONUT_CHART_COLORS = [
+  '#1A6CDA',
+  '#10B981',
+  '#F59E0B',
+  '#EF4444',
+  '#8B5CF6',
+  '#EC4899',
+  '#06B6D4',
+  '#84CC16',
+];
+
+/** Build MUI theme from SDK theme; fallback to minimal theme. */
+function resolveTheme(sdkTheme: unknown): Theme {
+  if (sdkTheme && typeof sdkTheme === 'object' && Object.keys(sdkTheme as object).length > 0) {
+    return createTheme(sdkTheme as object);
+  }
+  return createTheme({});
+}
+
+/** Map MUI theme to BrandingConfig for inline UI. */
+function themeToBrandingConfig(theme: Theme): BrandingConfig {
+  const p = theme.palette;
+  const t = theme.typography;
+  return {
+    colors: {
+      primary: p.primary?.main ?? defaultBranding.colors.primary,
+      secondary: p.secondary?.main ?? defaultBranding.colors.secondary,
+      background: p.background?.default ?? defaultBranding.colors.background,
+      surface: p.background?.paper ?? defaultBranding.colors.surface,
+      text: p.text?.primary ?? defaultBranding.colors.text,
+      textSecondary: p.text?.secondary ?? defaultBranding.colors.textSecondary,
+      error: p.error?.main ?? defaultBranding.colors.error,
+      warning: p.warning?.main ?? defaultBranding.colors.warning,
+      success: p.success?.main ?? defaultBranding.colors.success,
+    },
+    fonts: {
+      primary: t.fontFamily ?? defaultBranding.fonts.primary,
+      secondary: t.fontFamily ?? defaultBranding.fonts.secondary,
+    },
+    spacing: defaultBranding.spacing,
+  };
+}
+
+/** Font metrics from the active MUI theme (host when embedded, SDK when standalone). */
+function typographyVariant(
+  theme: Theme,
+  key: 'caption' | 'body2' | 'subtitle2' | 'h6',
+): React.CSSProperties {
+  const v = theme.typography[key];
+  if (v && typeof v === 'object' && !Array.isArray(v)) {
+    return v as React.CSSProperties;
+  }
+  return {};
+}
+
+function getPortfolioStyles(
+  branding: BrandingConfig,
+  muiTheme: Theme,
+): { [key: string]: React.CSSProperties } {
+  const divider = muiTheme.palette.divider;
+  const t = muiTheme.typography;
+  const borderRadius = Number.parseFloat(String(muiTheme.shape.borderRadius));
+  return {
+    container: {
+      backgroundColor: branding.colors.background,
+      fontFamily: branding.fonts.primary,
+      padding: `${branding.spacing.medium}px`,
+      borderRadius: '8px',
+      border: `1px solid ${divider}`,
+      boxShadow: muiTheme.shadows[1],
+    },
+    subtitle: {
+      ...typographyVariant(muiTheme, 'caption'),
+      color: branding.colors.textSecondary,
+      margin: 0,
+    },
+    holdingsCard: {
+      backgroundColor: 'transparent',
+      borderRadius: '0',
+      padding: '0',
+      overflowX: 'auto',
+    },
+    viewModeButton: {
+      ...typographyVariant(muiTheme, 'body2'),
+      fontWeight: t.fontWeightMedium,
+      padding: '8px 16px',
+      borderRadius: `${Number.isNaN(borderRadius) ? 4 : borderRadius}px`,
+      border: 'none',
+      cursor: 'pointer',
+      transition: 'all 0.2s',
+    },
+    viewModeButtonActive: {
+      fontWeight: t.fontWeightBold,
+    },
+    chartsContainer: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+      gap: `${branding.spacing.medium}px`,
+    },
+    chartSection: {
+      backgroundColor: branding.colors.surface,
+      borderRadius: '6px',
+      padding: `${branding.spacing.medium}px`,
+      border: `1px solid ${divider}`,
+    },
+    chartTitle: {
+      ...typographyVariant(muiTheme, 'subtitle2'),
+      color: branding.colors.text,
+      margin: 0,
+      marginBottom: muiTheme.spacing(1.5),
+    },
+    donutChartContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      marginBottom: `${branding.spacing.medium}px`,
+    },
+    donutChart: {
+      margin: '0 auto',
+      width: '200px',
+      height: '200px',
+    },
+    donutCenterText: {
+      ...typographyVariant(muiTheme, 'body2'),
+      fontWeight: t.fontWeightMedium,
+      color: branding.colors.textSecondary,
+      fill: branding.colors.textSecondary,
+    },
+    donutCenterValue: {
+      ...typographyVariant(muiTheme, 'h6'),
+      color: branding.colors.text,
+      fill: branding.colors.text,
+    },
+    legendContainer: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gap: '12px',
+      width: '100%',
+    },
+    legendItem: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+    },
+    legendColor: {
+      width: '12px',
+      height: '12px',
+      borderRadius: '2px',
+      flexShrink: 0,
+    },
+    legendText: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2px',
+    },
+    legendSymbol: {
+      ...typographyVariant(muiTheme, 'subtitle2'),
+      color: branding.colors.text,
+    },
+    legendAllocation: {
+      ...typographyVariant(muiTheme, 'caption'),
+      color: branding.colors.textSecondary,
+    },
+  };
+}
+
+interface PortfolioData {
+  totalValue: number;
+  totalValueChange: number;
+  totalValueChangePercent: number;
+  cashBalance: number;
+  investedValue: number;
+  dayChange: number;
+  dayChangePercent: number;
+  holdings: Holding[];
+  recentActivity: Activity[];
+  performance: PerformanceMetrics;
+}
+
+const MOCK_PORTFOLIO_DATA = investment as PortfolioData;
+
+interface Holding {
+  symbol: string;
+  name: string;
+  shares: number;
+  currentPrice: number;
+  value: number;
+  change: number;
+  changePercent: number;
+  allocation: number;
+}
+
+interface Activity {
+  id: string;
+  type: 'BUY' | 'SELL' | 'DIVIDEND' | 'TRANSFER';
+  symbol?: string;
+  shares?: number;
+  price?: number;
+  amount?: number;
+  date: string;
+  time: string;
+}
+
+interface PerformanceMetrics {
+  oneDay: number;
+  oneWeek: number;
+  oneMonth: number;
+  threeMonths: number;
+  sixMonths: number;
+  oneYear: number;
+  allTime: number;
+}
+
+interface PortfolioBodyProps extends <%= upperCamel(name) %>Props {
+  muiTheme: Theme;
+  userContextData: { fullName?: string } | undefined;
+}
+
+function PortfolioBody({ muiTheme, userContextData }: PortfolioBodyProps) {
+  const [portfolioData, setPortfolioData] = useState<PortfolioData>(MOCK_PORTFOLIO_DATA);
+  const [showHoldings] = useState(true);
+  const [viewMode] = useState<'chart' | 'list'>('chart');
+
+  const sdk = PlatformSDK.getInstance();
+  const branding = themeToBrandingConfig(muiTheme);
+  const styles = getPortfolioStyles(branding, muiTheme);
+  const chartColors = DONUT_CHART_COLORS;
+  const paperFill = muiTheme.palette.background.paper;
+  const primaryContrast = muiTheme.palette.primary.contrastText;
+
+  const baseUrl = environment.apiUrl || 'https://investmentmock.tiiny.site/investmentMock.json';
+
+  /*
+   * This function is used to trigger the refresh of the portfolio data
+   * It is used to refresh the portfolio data when the user clicks the refresh button
+   * For your development please remove this button and add some timer to refresh the portfolio data
+   * All external api call should be use this getHttpClient() method to make the api call
+   * @function triggerEffect
+   * This mockdata is used for only local usage please use the getHttpClient() method to make the api call
+   * @returns {void}
+   * To run this example in your local machine make this changes in the node_modules/@cdx-extensions/di-sdk-web/dist/httpClient.js
+   * file const isMock = false;
+   * Remove this line request.headers['Authorization'] = `Bearer ${access_token}`;
+   */
+  const [triggerEffect, setTriggerEffect] = useState(false);
+  if (triggerEffect) {
+    sdk
+      .getHttpClient()
+      .get(baseUrl)
+      .then(response => {
+        setPortfolioData(response.data);
+      })
+      .catch(error => {
+        alert(error);
+        setPortfolioData(MOCK_PORTFOLIO_DATA);
+      });
+    setTriggerEffect(false);
+  }
+
+  const formatCurrency = (value: number): string => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(value);
+  };
+
+  const donutChartData = portfolioData.holdings.map((holding, index) => ({
+    ...holding,
+    color: chartColors[index % chartColors.length],
+    angle: (holding.allocation / 100) * 360,
+  }));
+
+  let cumulativeAngle = -90;
+  const donutSegments = donutChartData.map(item => {
+    const startAngle = cumulativeAngle;
+    cumulativeAngle += item.angle;
+    return {
+      ...item,
+      startAngle,
+      endAngle: cumulativeAngle,
+    };
+  });
+
+  const getCoordinates = (angle: number, radius: number, center: number) => {
+    const radians = (angle * Math.PI) / 180;
+    return {
+      x: center + radius * Math.cos(radians),
+      y: center + radius * Math.sin(radians),
+    };
+  };
+
+  const createDonutPath = (
+    startAngle: number,
+    endAngle: number,
+    innerRadius: number,
+    outerRadius: number,
+    center: number,
+  ) => {
+    const startInner = getCoordinates(startAngle, innerRadius, center);
+    const startOuter = getCoordinates(startAngle, outerRadius, center);
+    const endInner = getCoordinates(endAngle, innerRadius, center);
+    const endOuter = getCoordinates(endAngle, outerRadius, center);
+
+    const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+
+    return [
+      `M ${startOuter.x} ${startOuter.y}`,
+      `A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${endOuter.x} ${endOuter.y}`,
+      `L ${endInner.x} ${endInner.y}`,
+      `A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${startInner.x} ${startInner.y}`,
+      'Z',
+    ].join(' ');
+  };
+
+  return (
+    <div style={styles.container}>
+      {showHoldings && (
+        <div style={styles.holdingsCard}>
+          {viewMode === 'chart' ? (
+            <div style={styles.chartsContainer}>
+              <div style={styles.chartSection}>
+                <h3 style={styles.chartTitle}>Portfolio Allocation</h3>
+                <p style={styles.subtitle}>Portfolio Overview</p>
+                <p style={styles.subtitle}>
+                  Name : {userContextData?.fullName ?? 'N/A'}
+                </p>
+                <div style={styles.donutChartContainer}>
+                  <svg width="200" height="200" style={styles.donutChart}>
+                    <g transform="translate(100, 100)">
+                      {donutSegments.map(segment => (
+                        <g key={segment.symbol}>
+                          <path
+                            d={createDonutPath(segment.startAngle, segment.endAngle, 50, 70, 0)}
+                            fill={segment.color}
+                            stroke={paperFill}
+                            strokeWidth="2"
+                            style={{ cursor: 'pointer' }}
+                            onMouseEnter={e => {
+                              e.currentTarget.style.opacity = '0.8';
+                            }}
+                            onMouseLeave={e => {
+                              e.currentTarget.style.opacity = '1';
+                            }}
+                          />
+                        </g>
+                      ))}
+                      <circle cx="0" cy="0" r="50" fill={paperFill} />
+                      <text x="0" y="-10" textAnchor="middle" style={styles.donutCenterText}>
+                        Total
+                      </text>
+                      <text x="0" y="15" textAnchor="middle" style={styles.donutCenterValue}>
+                        {formatCurrency(portfolioData.totalValue)}
+                      </text>
+                    </g>
+                  </svg>
+                </div>
+                <div style={styles.legendContainer}>
+                  {donutSegments.map(segment => (
+                    <div key={segment.symbol} style={styles.legendItem}>
+                      <div
+                        style={{
+                          ...styles.legendColor,
+                          backgroundColor: segment.color,
+                        }}
+                      />
+                      <div style={styles.legendText}>
+                        <div style={styles.legendSymbol}>{segment.symbol}</div>
+                        <div style={styles.legendAllocation}>{segment.allocation.toFixed(1)}%</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      )}
+      <div>
+        <button
+          id="refresh-button"
+          style={{
+            ...styles.viewModeButton,
+            ...(viewMode === 'chart' ? styles.viewModeButtonActive : {}),
+            backgroundColor: viewMode === 'chart' ? branding.colors.primary : branding.colors.surface,
+            color: viewMode === 'chart' ? primaryContrast : branding.colors.textSecondary,
+            width: '100%',
+            marginBlock: '10px',
+          }}
+          onClick={() => setTriggerEffect(true)}
+        >
+          Refresh
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function <%= upperCamel(name) %>Standalone(props: <%= upperCamel(name) %>Props) {
+  const sdk = PlatformSDK.getInstance();
+  const { data: userContextData } = sdk.useUserContext();
+  const { theme: sdkTheme } = sdk.useBranding(DEFAULT_BRANDING_ID);
+  const muiTheme = resolveTheme(sdkTheme);
+
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <CssBaseline />
+      <PortfolioBody {...props} muiTheme={muiTheme} userContextData={userContextData} />
+    </ThemeProvider>
+  );
+}
+
+function <%= upperCamel(name) %>Embedded(props: <%= upperCamel(name) %>Props) {
+  const sdk = PlatformSDK.getInstance();
+  const { data: userContextData } = sdk.useUserContext();
+  sdk.useBranding(DEFAULT_BRANDING_ID);
+  const muiTheme = useTheme();
+
+  return <PortfolioBody {...props} muiTheme={muiTheme} userContextData={userContextData} />;
+}
+
+const <%= upperCamel(name) %>: React.FC<<%= upperCamel(name) %>Props> = props =>
+  props.standalone === true ? (
+    <<%= upperCamel(name) %>Standalone {...props} />
+  ) : (
+    <<%= upperCamel(name) %>Embedded {...props} />
+  );
+
+export default <%= upperCamel(name) %>;

package/dist/src/app/components/types/branding.ts.template

@@ -0,0 +1,51 @@
+/**
+ * Custom Branding Configuration
+ *
+ * Defines the branding structure for the investment portfolio widget
+ */
+
+export interface BrandingConfig {
+  colors: {
+    primary: string;
+    secondary: string;
+    background: string;
+    surface: string;
+    text: string;
+    textSecondary: string;
+    error: string;
+    warning: string;
+    success: string;
+  };
+  fonts: {
+    primary: string;
+    secondary: string;
+  };
+  spacing: {
+    small: number;
+    medium: number;
+    large: number;
+  };
+}
+
+export const defaultBranding: BrandingConfig = {
+  colors: {
+    primary: '#1976d2',
+    secondary: '#dc004e',
+    background: '#ffffff',
+    surface: '#f5f5f5',
+    text: '#000000',
+    textSecondary: '#666666',
+    error: '#f44336',
+    warning: '#ff9800',
+    success: '#4caf50',
+  },
+  fonts: {
+    primary: 'Arial, sans-serif',
+    secondary: 'Georgia, serif',
+  },
+  spacing: {
+    small: 8,
+    medium: 16,
+    large: 24,
+  },
+};

package/dist/src/bootstrap.tsx.template

@@ -0,0 +1,18 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import <%= upperCamel(name) %> from './app/<%= upperCamel(name) %>';
+import { PlatformSDK } from '@cdx-extensions/di-sdk';
+import { WebPlatform } from '@cdx-extensions/di-sdk-web';
+
+// When running standalone, this app acts as the host and must register the platform.
+PlatformSDK.init({ platform: WebPlatform.getInstance() });
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <StrictMode>
+    <<%= upperCamel(name) %> standalone />
+  </StrictMode>
+);

package/dist/src/environments/environment.prod.ts.template

@@ -0,0 +1,5 @@
+export const environment = {
+  // This file contains environment-specific variables for development
+  production: true,
+  apiUrl: 'https://api.example.prod.com',
+};

package/dist/src/environments/environment.qal.ts.template

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  useDefaultTranslations: false,
+};

package/dist/src/environments/environment.ts.template

@@ -0,0 +1,7 @@
+export const environment = {
+  // This file contains environment-specific variables for development
+  production: false,
+  apiUrl: 'https://investmentmock.tiiny.site/investmentMock.json',
+  useDefaultTranslations: true,
+  // add more variables as needed
+};

package/dist/src/index.html.template

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title><%= upperCamel(name) %></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/src/locales/en-US/translation.json.template

@@ -0,0 +1,22 @@
+{
+  "com.ncr.dbk.olb.widgets.investmentportfolio": {
+    "widget-title": "investmentportfolio",
+    "label": "This is a label."
+  },
+  "com.ncr.dbk.web.platform": {
+    "error": {
+      "title": "Something Went Wrong",
+      "message": "{{message}}"
+    },
+    "messages": {
+      "generic": {
+        "loading": "",
+        "error": "We are experiencing some technical difficulties. Please try again later."
+      },
+      "widget": {
+        "loading": "Loading widget...",
+        "error": "Error loading widget. Please try again."
+      }
+    }
+  }
+}

package/dist/src/locales/es-ES/translation.json.template

@@ -0,0 +1,22 @@
+{
+  "com.ncr.dbk.olb.widgets.investmentportfolio": {
+    "widget-title": "investmentportfolio",
+    "label": "Esta es una etiqueta."
+  },
+  "com.ncr.dbk.web.platform": {
+    "error": {
+      "title": "Algo salió mal",
+      "message": "{{message}}"
+    },
+    "messages": {
+      "generic": {
+        "loading": "",
+        "error": "Estamos experimentando algunas dificultades técnicas. Por favor, inténtelo de nuevo más tarde."
+      },
+      "widget": {
+        "loading": "Cargando widget...",
+        "error": "Error al cargar el widget. Por favor, inténtelo de nuevo."
+      }
+    }
+  }
+}

package/dist/src/locales/fr-CA/translation.json.template

@@ -0,0 +1,22 @@
+{
+  "com.ncr.dbk.olb.widgets.investmentportfolio": {
+    "widget-title": "investmentportfolio",
+    "label": "This is a label."
+  },
+  "com.ncr.dbk.web.platform": {
+    "error": {
+      "title": "Quelque chose s’est mal passé",
+      "message": "{{message}}"
+    },
+    "messages": {
+      "generic": {
+        "loading": "",
+        "error": "Nous rencontrons des difficultés techniques. Veuillez réessayer plus tard."
+      },
+      "widget": {
+        "loading": "Loading widget...",
+        "error": "Erreur de chargement du widget. Veuillez réessayer."
+      }
+    }
+  }
+}

package/dist/src/locales/index.ts.template

@@ -0,0 +1,11 @@
+import enTranslations from './en-US/translation.json';
+import esTranslations from './es-ES/translation.json';
+import frTranslations from './fr-CA/translation.json';
+import zhTranslations from './zh-TW/translation.json';
+
+export default {
+  'en-US': enTranslations,
+  'es-ES': esTranslations,
+  'fr-CA': frTranslations,
+  'zh-TW': zhTranslations,
+};

package/dist/src/locales/zh-TW/translation.json.template

@@ -0,0 +1,22 @@
+{
+  "com.ncr.dbk.olb.widgets.investmentportfolio": {
+    "widget-title": "investmentportfolio",
+    "label": "這是一個標籤。"
+  },
+  "com.ncr.dbk.web.platform": {
+    "error": {
+      "title": "出了點問題",
+      "message": "{{message}}"
+    },
+    "messages": {
+      "generic": {
+        "loading": "",
+        "error": "我們遇到了一些技術困難。請稍後再試。"
+      },
+      "widget": {
+        "loading": "載入小元件...",
+        "error": "載入小部件時出錯。請再試一次。"
+      }
+    }
+  }
+}

package/dist/src/main.ts.template

@@ -0,0 +1 @@
+import('./bootstrap');

package/dist/src/setupTests.ts.template

@@ -0,0 +1,17 @@
+import '@testing-library/jest-dom';
+import '@testing-library/react';
+
+// fixes issue in the CssVarsProvider where window.matchMedia is undefined
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});

package/dist/src/types.ts.template

@@ -0,0 +1,26 @@
+export interface BffData {
+  message: string;
+  value: number;
+}
+
+export interface FeatureLinkExGProperty {
+  webUrl: string;
+  isWebUrlNewWindow?: boolean;
+}
+
+export interface ImageExGProperty {
+  url: string;
+  altText: string;
+}
+
+export interface <%= upperCamel(name) %>Props {
+  /**
+   * true = standalone (e.g. local dev); widget uses SDK theme and its own ThemeProvider.
+   * false or omitted = embedded in host; widget accepts host theme and does not inject ThemeProvider.
+   */
+  standalone?: boolean;
+  label?: string;
+  date?: number;
+  featureLink?: FeatureLinkExGProperty;
+  image?: ImageExGProperty;
+}

package/dist/tsconfig.app.json.template

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= relativeToRoot %>dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/dist/tsconfig.json.template

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "jsxImportSource": "@emotion/react"
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "<%= relativeToRoot %>tsconfig.base.json"
+}

package/dist/tsconfig.spec.json.template

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "<%= relativeToRoot %>dist/out-tsc",
+    "module": "commonjs",
+    "types": [
+      "jest",
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/dist/webpack.config.ts.template

@@ -0,0 +1,21 @@
+import { composePlugins, withNx } from '@nx/webpack';
+import { withReact } from '@nx/react';
+import { withModuleFederation } from '@nx/react/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const config = {
+  ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+/**
+ * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support Module Federation
+ * The DTS Plugin can be enabled by setting dts: true
+ * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
+ */
+export default composePlugins(
+  withNx(),
+  withReact(),
+  withModuleFederation(config, { dts: false })
+);

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@cdx-di-template/webtemplate-investment-widget",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "CDX web widget generator template files (investment-widget variant)",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node ../../../../tools/scripts/stage-nx-package.js --projectRoot . --outDir dist --copy module-federation.config.ts.template src && node ../../../../tools/scripts/stage-nx-package.js --projectRoot ../../../../tools/widget-di-template-generator/projectFiles --outDir dist --copy . --append"
+  }
+}