@echelon-framework/page-builders

Type-safe TS factories for PageConfig — PageBuilder, @Page, ProcessBuilder, @Process, defineMenu.

Installation

npm install @echelon-framework/page-builders

PageBuilder

import { PageBuilder, widget } from '@echelon-framework/page-builders';

const config = PageBuilder.create('clients')
  .title('Client List')
  .ds('clientsList') // transport datasource
  .local('selectedClient') // local state
  .computed('total', 'countFn', ['clientsList']) // computed DS
  .widget(
    'title',
    { x: 0, y: 0, w: 12 },
    widget.any('page-title', { options: { title: 'Clients' } }),
  )
  .widget(
    'table',
    { x: 0, y: 1, w: 9 },
    widget.any('data-table', { bind: { rows: 'clientsList' } }),
  )
  .widget(
    'detail',
    { x: 9, y: 1, w: 3 },
    widget.any('form-ref', { options: { formId: 'client-detail' } }),
  )
  .handler('table.select', [{ setDatasource: 'selectedClient', from: '$event' }])
  .onInit([{ fetch: 'api/clients', into: 'clientsList' }])
  .build();

@Page Decorator

import { Page } from '@echelon-framework/page-builders';

@Page({ route: '/clients', title: 'Clients' })
export class ClientsPage {
  static readonly config = PageBuilder.create('clients')...build();
}

ProcessBuilder (Multi-step Wizards)

import { ProcessBuilder } from '@echelon-framework/page-builders';

const process = ProcessBuilder.create('new-transaction')
  .title('New FX Transaction')
  .sessionKey('txDraft')         // shared local DS across steps
  .step({
    id: 'client',
    title: 'Step 1 — Select Client',
    route: '/process/new-tx/client',
    form: { id: 'clientForm', fields: [...] },
    next: 'params',              // auto-generates navigate action
  })
  .step({
    id: 'params',
    title: 'Step 2 — Parameters',
    route: '/process/new-tx/params',
    form: { id: 'paramsForm', fields: [...] },
    next: 'review',
  })
  .step({
    id: 'review',
    title: 'Step 3 — Review & Submit',
    route: '/process/new-tx/review',
    summary: true,               // shows kv-list of accumulated state
    commit: { transport: 'rfq.send', onSuccess: 'done' },
  })
  .build();
// → { processConfig, pages: PageConfig[] } — one page per step

Each step: form.submit → mergeDatasource sessionKey → navigate next. Final step: fetch + clear + navigate done.

defineMenu

import { defineMenu } from '@echelon-framework/page-builders';

export const menu = defineMenu([
  {
    id: 'trading',
    label: 'Trading',
    icon: '💱',
    children: [{ id: 'fx-spot', label: 'FX Spot', route: '/fx-spot' }],
  },
  {
    id: 'user',
    kind: 'user',
    label: 'jdoe',
    userActions: [{ id: 'logout', label: 'Logout', kind: 'danger' }],
  },
]);

License

BUSL-1.1