Kelt UI Kit React

Component explorer

Run npm run dev and open http://localhost:2552 to explore the kit. The documentation includes a searchable component catalogue and three tabs:

• Apercu: existing interactive demos, background grid, a 375px preview container and a reset action. The narrow container is not a device emulator; components using viewport media queries or portals still use the browser viewport.
• API & types: parameter names, exact TypeScript types, required/optional status, defaults declared in destructured arguments, JSDoc descriptions and expandable related interfaces, type aliases and enums.
• Code: the complete demo source, with a copy action. Replace relative imports with public exports from kelt-ui-kit-react when integrating examples.

API metadata is generated by docs.plugin.ts from component imports in the views registered in src/App.menu.tsx. It is refreshed when TypeScript sources change. The Toaster page also documents showToast(title, options). Components without arguments explicitly indicate that they accept no props. An absent documented default does not imply that there is no runtime fallback.

To add a page, register its view in src/App.menu.tsx and its category, description and icon in src/docs/catalog.ts.

Build commands

• npm run build: type-check and build the distributable library in dist.
• npm run docs:build: type-check and build the standalone explorer in dist-docs.
• npm run docs:preview: preview the built explorer.
• npm run docs:test: type-check the documentation tooling and test route coverage, prop types/defaults, nested form types and notification options.

For production hosting, configure an SPA fallback to index.html for component routes such as /buttons. The explorer is not exported by the library entrypoint.

Notifications

Mount <Toaster /> once and add <div id="toaster-root"></div> to the hosting HTML. Trigger notifications using useToasterStore().showToast(title, options). The explorer already provides this portal root.

npm publication

Pushes to develop run .github/workflows/publish.yml and use npm trusted publishing with GitHub OIDC rather than an NPM_TOKEN.

For OIDC authorization, the package metadata must contain the exact GitHub repository URL. This is required in package.json and is included in each published package version:

{
  "repository": {
    "type": "git",
    "url": "git+https://github.com/funeste29200/ui-kit-react.git"
  }
}

The matching trusted publisher entry is configured in the npm package settings for kelt-ui-kit-react → Settings → Trusted Publisher:

• Provider: GitHub Actions
• Organization or user: funeste29200
• Repository: ui-kit-react
• Workflow filename: publish.yml
• Environment: empty

After confirming an OIDC publication, the legacy publish token can be revoked. If a publication failed and its version is not present in npm, the same version can be published again after fixing its repository or trusted-publisher settings.

Kelt / Hub compatibility

The shared DataTable supports both applications with one rendering engine:

• Kelt: direct editing, Enter navigation, step controls, mobile cards, selection footer actions and explicit actionsColumnWidth.
• Hub: grouped columns, sticky columns, custom cell rendering, conditional editing, commit-on-Enter or blur (onEditTrigger), typed filters and local sorting.
• DataTableColumnsInterface / DataTableActionsInterface remain available, including existing deep import paths, as aliases of the shared column/action types.
• onFiltersChange emits the legacy filter shape (comma-separated enum values, { startDate, endDate } date ranges). Filtering remains the consumer's responsibility. Sorting uses a copy of the supplied rows; original data is never reordered.
• Numeric action widths are summed when no explicit column width is provided.
• Inline actions (button, icon, link) accept align: "left" | "center" | "right" to position their content within width / minWidth, for example { id: "delete", label: "Delete", type: "icon", classIcon: "bi-trash", width: 50, align: "right", onClick: deleteRow }. Omitting align preserves each action type's default alignment.
• Tabs.keepMountedVisited retains visited panels for Hub; the default remains unmounting inactive panels for Kelt. Controlled tabs track the actual active index.
• Select keeps searchable portal menus and empty-string options. Dynamic forms forward usePortal and searchable, alongside Kelt sections, grid and address fields.
• Input keeps immediate change events by default. Set disabledDebounce={false} for the optional 300ms debounce. showClearButton and width remain supported.
• Badge.color / onRemove, Icon.onClick, ButtonFilters, and string image logos in Header remain supported.

npm test validates table grouping, sorting and action widths. The table explorer includes both Kelt and Hub examples using the same component.

Address search

Use the ADDRESS field type to add geocoding directly to an address field. The user can keep any manually entered value, while selecting a suggestion can populate the rest of the form:

{
	name: "adresse1",
	label: "Adresse",
	type: TypeInputEnum.ADDRESS,
	value: "",
	addressSearch: {
		mapAddress: (address) => ({
			adresse1: address.addressLine,
			codePostal: address.postalCode,
			ville: address.city,
			paysIso2: address.countryCode,
		}),
	},
};

Use addressSearch.provider to inject another service implementing GeocodingProvider. The default provider does not require an API key.

To search cities from a postal code field, use cityGeocodingService: it suggests cities while typing a postal code start ("292") or a city name start ("bre"). Choose the value written in the field; free entry is still kept:

{
	name: "codePostal",
	label: "Code postal",
	type: TypeInputEnum.ADDRESS,
	value: "",
	addressSearch: {
		provider: cityGeocodingService,
		minimumQueryLength: 2,
		formatValue: (address) => address.postalCode,
		emptyLabel: "Aucune ville trouvée.",
		mapAddress: (address) => ({
			codePostal: address.postalCode,
			ville: address.city,
		}),
	},
};