@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)

npm install @cdx-extensions/widget-template-mobile
# or
yarn 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=acme --name=my-feature

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

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

Generators

feature

Generates a mobile feature library with user-context, branding, and HTTP client demo cards plus config.ts. The feature gets its own screen and tab in the sandbox.

Basic usage

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

Options

• fiId (required) – Your FI Id. Used as the package scope: the generated package name will be @<fiId>-extensions/<name>.
• 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=acme --name=my-feature

# Custom sandbox location
nx g @cdx-extensions/widget-template-mobile:feature --fiId=acme --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
• Creates playground/mobile-sandbox/screens/<Name>Screen.tsx that renders the feature
• Adds a new tab in playground/mobile-sandbox/navigation/tabs.tsx for that screen

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 patched into a shared WidgetsScreen.tsx rather than getting its own tab.

Basic usage

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

Options

• fiId (required) – Your FI Id. Used as the package scope: the generated package name will be @<fiId>-extensions/<name>.
• 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=acme --name=my-widget

# Custom sandbox location
nx g @cdx-extensions/widget-template-mobile:widget --fiId=acme --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
• Patches playground/mobile-sandbox/screens/WidgetsScreen.tsx to import and render <WidgetName />

No dedicated screen or tab is created -- widgets share the existing Widgets screen.

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

   npm 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.