es-application-template

Shared Setting and Shortcut infrastructure for ES applications.

The package layout/build convention follows client/es-document-template: src/index.tsx, src/package/index.ts, rollup.config.mjs, one package tsconfig.json, CJS + ESM + declaration + extracted CSS output.

Install

npm install es-application-template

Host applications provide the peer dependencies declared in package.json, including React 18, TanStack React Query and es-grid-template >=1.9.72 <2.

Package CSS is emitted at:

dist/styles/index.css

Host applications must import the extracted stylesheet once from their application entry, after the host global styles:

import 'es-application-template/dist/styles/index.css'

The package style metadata does not make CRA/Webpack load the stylesheet automatically.

Provider

import { AppProvider } from 'es-application-template'

<AppProvider>
  <App />
</AppProvider>

The package uses the host QueryClientProvider; it does not create its own QueryClient.

Setting

import { setting } from 'es-application-template'

const visible = setting.get(
  'PurchaseRequest.ui.form.field.Code.visible',
  true
)

The public Setting contract remains setting.get(key[, fallback]). No public useSetting() API is added.

Shortcut

import {
  Shortcuts,
  SHORTCUT_ACTION,
  type ShortcutActions
} from 'es-application-template'

const actions: ShortcutActions = {
  [SHORTCUT_ACTION.RECORD_EDIT]: {
    handler: handleEdit,
    enabled: canEdit
  }
}

<Shortcuts actions={actions} />

Management pages

The management screens stay independent:

import {
  SettingsPage,
  ShortcutsPage
} from 'es-application-template'

The host owns routing/menu placement. These are full management pages, not modal content.

Public API

AppProvider

setting
SettingsPage

ShortcutsPage
Shortcuts
SHORTCUT_ACTION
ShortcutTooltip
ShortcutOverlayScope
useShortcutHint

ShortcutActionId
ShortcutActions

Deliberate differences from es-document-template

The package follows its package/build skeleton, but does not copy unrelated document dependencies. In particular this package does not use:

@esvndev/becoxy-ui
@syncfusion/ej2-react-dropdowns
react-custom-scrollbars
rollup-plugin-dts

The Setting Feature tree selector is package-owned and implemented with react-select while preserving hierarchy/search/expand-collapse behavior.

Build

yarn install
yarn typecheck
yarn test
yarn build
npm pack

Expected output:

dist/index.js
dist/index.mjs
dist/index.d.ts
dist/styles/index.css