@cdx-extensions/widget-template-mobile

Nx plugin providing generators for CDX extensibility starter mobile features and widgets (React Native + PlatformSDK).

Installation

From npm (published version)

pnpm add @cdx-extensions/widget-template-mobile

Use the template in the apps repo

Pass the FI Id and name (and optional flags); no template path is needed:

# Full-featured screen with user context, branding, and HTTP client demo
nx g @cdx-extensions/widget-template-mobile:feature --fiId=0123 --name=my-feature

# Lightweight widget with user context and branding only
nx g @cdx-extensions/widget-template-mobile:widget --fiId=0123 --name=my-widget

Optional: --directory=..., --sandboxPath=playground/mobile-sandbox if your mobile-sandbox lives elsewhere.

fiId: Must be digits only (0-9); letters, hyphens, and other symbols are rejected (e.g. not acme, id-456). Nx may pass --fiId=0123 as the number 123; the generator left-pads numeric or all-digit string values to at least 4 characters (123, "123", and the number 123 → 0123; 12345 stays 12345). The schema allows string | number so unquoted --fiId=1234 still validates.

Generators

feature

Generates a mobile feature library with user-context, branding, and HTTP client demo cards plus config.ts. The feature is registered under the More tab's + Add Feature picker in the sandbox (it does not get its own bottom tab).

Basic usage

nx generate @cdx-extensions/widget-template-mobile:feature --fiId=<fi-id> --name=<name>

Options

• fiId (required) – Numeric institution id: digits only (0-9). Package scope: @<fiId>-extensions/<name>. Values shorter than 4 digits are zero-padded (see README above).
• name (required) – Name of the mobile feature (e.g. account-summary). Used as the Nx project name and folder name.
• directory (optional) – Parent directory for the new project. Default: features/mobile.
• sandboxPath (optional) – Path to the mobile-sandbox app (relative to workspace root). Default: playground/mobile-sandbox.

Examples

nx generate @cdx-extensions/widget-template-mobile:feature --fiId=0123 --name=my-feature

# Custom sandbox location
nx g @cdx-extensions/widget-template-mobile:feature --fiId=0123 --name=my-feature --sandboxPath=apps/my-mobile-host

After generation

If a mobile sandbox exists at sandboxPath, the generator:

• Adds @<fiId>-extensions/<name> to playground/mobile-sandbox/package.json dependencies with a local path (file:../../<projectRoot>)
• Adds the feature path to playground/mobile-sandbox/metro.config.js and tsconfig.json
• Imports the feature into playground/mobile-sandbox/registry/FEATURE_REGISTRY.tsx and inserts a new row with builtIn: false

The new feature then appears in the More tab's + Add Feature picker. Tap it to bring it into the More menu for that session, then tap the row to open the feature via the FeatureDetail screen. No bottom tab is added; no sandbox screen file is created.

If no sandbox is present, the generator creates the project files only and skips sandbox wiring.

Generated structure

• src/.tsx – Component with user-context card, HTTP client test card, and branding
• src/config.ts – API base URL & path for the HTTP client demo
• src/types/branding.ts – Branding color resolver with fallbacks
• package.json, project.json, tsconfig.json, src/index.ts

widget

Generates a lightweight mobile widget library with user-context and branding demo only (no HTTP, no config.ts). The widget is registered under the Accounts (home) tab's + Add widget picker, available to drop into any of the three Home slots.

Basic usage

nx generate @cdx-extensions/widget-template-mobile:widget --fiId=<fi-id> --name=<name>

Options

• fiId (required) – Numeric institution id: digits only (0-9). Package scope: @<fiId>-extensions/<name>. Values shorter than 4 digits are zero-padded (see README above).
• name (required) – Name of the mobile widget (e.g. my-widget). Used as the Nx project name and folder name.
• directory (optional) – Parent directory for the new project. Default: widgets/mobile.
• sandboxPath (optional) – Path to the mobile-sandbox app (relative to workspace root). Default: playground/mobile-sandbox.

Examples

nx generate @cdx-extensions/widget-template-mobile:widget --fiId=0123 --name=my-widget

# Custom sandbox location
nx g @cdx-extensions/widget-template-mobile:widget --fiId=0123 --name=my-widget --sandboxPath=apps/my-mobile-host

After generation

If a mobile sandbox exists at sandboxPath, the generator:

• Adds @<fiId>-extensions/<name> to playground/mobile-sandbox/package.json dependencies with a local path (file:../../<projectRoot>)
• Adds the widget path to playground/mobile-sandbox/metro.config.js and tsconfig.json
• Imports the widget into playground/mobile-sandbox/registry/WIDGET_REGISTRY.ts and inserts a new row

The new widget then appears in the Home screen's + Add widget picker (tap any of the three slots to pick it). No dedicated screen or tab is created.

If no sandbox is present, the generator creates the project files only and skips sandbox wiring.

Generated structure

• src/.tsx – Component with user-context card and branding (no HTTP card)
• src/types/branding.ts – Branding color resolver with fallbacks
• package.json, project.json, tsconfig.json, src/index.ts

Running the generated project

From the workspace root:

nx run <name>:build
nx run <name>:dev
nx run <name>:typecheck

Running the mobile sandbox (Android & iOS)

After you generate a feature or widget, the sandbox at sandboxPath is updated automatically; run the host app from your consumer workspace root (e.g. the apps monorepo). Typical layout: playground/mobile-sandbox.

1. Install dependencies

   pnpm install

2. Start Metro (Expo dev server)

   npx nx run mobile-sandbox:start

3. Open a platform (use a second terminal while Metro is running, or follow your team's flow)

   iOS

   npx nx run mobile-sandbox:ios

   Android

   npx nx run mobile-sandbox:android

Note: The Nx project name (mobile-sandbox) and targets (start, ios, android) must exist in your repo. If they differ, check playground/mobile-sandbox/project.json or run npx nx show project mobile-sandbox. As a fallback you can run Expo from the sandbox folder, e.g. cd playground/mobile-sandbox && npx expo start, then press i / a for iOS / Android.