kelt-ui-kit-react 2.0.8 → 2.0.9

package/.github/workflows/publish.yml

@@ -1,31 +1,40 @@
-name: Build & Publish npm Package
-
-on:
-  push:
-    branches:
-      - develop
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          registry-url: "https://registry.npmjs.org"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build package
-        run: npm run build
-
-      - name: Publish to npm
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+name: Build & Publish npm Package
+
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Setup npm for trusted publishing
+        run: npm install --global npm@11
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Validate compatibility
+        run: |
+          npm test
+          npm run docs:test
+
+      - name: Build package
+        run: npm run build
+
+      - name: Publish to npm
+        run: npm publish --access public

package/README.md

@@ -1,72 +1,124 @@
-# Getting Started with Create React App
-
-## 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:
-
-```tsx
-{
-	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.
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+# 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:
+
+```json
+{
+  "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.
+- `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:
+
+```tsx
+{
+	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.

package/dist/App.d.ts

@@ -1,3 +1,2 @@
-
-declare const App: React.FC;
-export default App;
+declare const App: React.FC;
+export default App;

package/dist/App.menu.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-export type MenuProps = {
-    id: number;
-    name: string;
-    children: JSX.Element;
-    link: string;
-    element: JSX.Element;
-};
-export declare const MenuList: MenuProps[];
-export declare const AppMenu: () => JSX.Element;
+/// <reference types="react" />
+export type MenuProps = {
+    id: number;
+    name: string;
+    children: JSX.Element;
+    link: string;
+    element: JSX.Element;
+};
+export declare const MenuList: MenuProps[];
+export declare const AppMenu: () => JSX.Element;

package/dist/App.routes.d.ts

@@ -1 +1 @@
-export declare const AppRoutes: () => JSX.Element;
+export declare const AppRoutes: () => JSX.Element;

package/dist/_core/hooks/HistoryProvider.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare function HistoryProvider({ children }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function useHistoryDepth(): number;
+/// <reference types="react" />
+export declare function HistoryProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useHistoryDepth(): number;

package/dist/_core/hooks/ImageChecker.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
-
-interface ImageCheckerProps {
-    imageUrl: string;
-}
-export declare const ImageChecker: React.FC<ImageCheckerProps>;
-export {};
+interface ImageCheckerProps {
+    imageUrl: string;
+}
+export declare const ImageChecker: React.FC<ImageCheckerProps>;
+export {};

package/dist/_core/hooks/imageExist.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
-
-interface ImageCheckerProps {
-    imageUrl: string;
-}
-export declare const ImageExist: React.FC<ImageCheckerProps>;
-export {};
+interface ImageCheckerProps {
+    imageUrl: string;
+}
+export declare const ImageExist: React.FC<ImageCheckerProps>;
+export {};

package/dist/_core/hooks/isEAN13.d.ts

@@ -1 +1 @@
-export declare const isValidEAN13: (value: string) => boolean;
+export declare const isValidEAN13: (value: string) => boolean;

package/dist/_core/hooks/objectToQueryParams.d.ts

@@ -1 +1 @@
-export declare const objectToQueryParams: (obj: Record<string, any>, prefix?: string) => string;
+export declare const objectToQueryParams: (obj: Record<string, any>, prefix?: string) => string;

package/dist/_core/hooks/useCurrency.d.ts

@@ -1,3 +1,3 @@
-export declare const useCurrency: (locale?: string, currency?: string) => {
-    formatCurrency: (value: number) => string;
-};
+export declare const useCurrency: (locale?: string, currency?: string) => {
+    formatCurrency: (value: number) => string;
+};

package/dist/_core/hooks/useDateutils.d.ts

@@ -1,4 +1,4 @@
-export declare function FormatDate(date: Date, format: string): string;
-export declare function LocalDateStringToUTC(dateStr: string): string;
-export declare function localDateStartToUTC(dateStr: string): Date;
-export declare function localDateEndToUTC(dateStr: string): Date;
+export declare function FormatDate(date: Date, format: string): string;
+export declare function LocalDateStringToUTC(dateStr: string): string;
+export declare function localDateStartToUTC(dateStr: string): Date;
+export declare function localDateEndToUTC(dateStr: string): Date;

package/dist/_core/hooks/useIsMobile.d.ts

@@ -1 +1 @@
-export declare const useIsMobile: (maxWidth?: number) => boolean;
+export declare const useIsMobile: (maxWidth?: number) => boolean;

package/dist/_core/hooks/useToken.d.ts

@@ -1,3 +1,3 @@
-export declare const useToken: () => {
-    getTokenValidate: () => string | null;
-};
+export declare const useToken: () => {
+    getTokenValidate: () => string | null;
+};

package/dist/_core/hooks/useValidate.d.ts

@@ -1,5 +1,5 @@
-export declare const useValidate: () => {
-    isValidateEmail: (input: string) => boolean;
-    isValidateTel: (input: string) => boolean;
-    isValidateCodePostal: (input: string) => boolean;
-};
+export declare const useValidate: () => {
+    isValidateEmail: (input: string) => boolean;
+    isValidateTel: (input: string) => boolean;
+    isValidateCodePostal: (input: string) => boolean;
+};

package/dist/_core/hooks/widgetSupport.d.ts

@@ -1 +1 @@
-export declare const WidgetSupport: () => import("react/jsx-runtime").JSX.Element;
+export declare const WidgetSupport: () => import("react/jsx-runtime").JSX.Element;

package/dist/_core/type/generiqueType.d.ts

@@ -0,0 +1,4 @@
+export interface EnumerableType {
+    label: string;
+    value: string;
+}

package/dist/action/Action.view.d.ts

@@ -1 +1 @@
-export declare const ActionView: () => JSX.Element;
+export declare const ActionView: () => JSX.Element;

package/dist/action/ButtonAction.d.ts

@@ -1,10 +1,9 @@
 import { BadgeInterface } from '../badge/Badge';
-
-export type ButtonActionProps = {
-    className?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title?: string;
-    classIcon?: string;
-    badge?: BadgeInterface;
-};
-export declare const ButtonAction: ({ className, onClick, title, classIcon, badge, }: ButtonActionProps) => import("react/jsx-runtime").JSX.Element;
+export type ButtonActionProps = {
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    title?: string;
+    classIcon?: string;
+    badge?: BadgeInterface;
+};
+export declare const ButtonAction: ({ className, onClick, title, classIcon, badge, }: ButtonActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/addressSearch/AddressSearch.d.ts

@@ -1,20 +1,19 @@
 import { GeocodedAddress, GeocodingProvider } from '../geocoding/geocoding.interface';
-
-export interface AddressSearchProps {
-    id?: string;
-    className?: string;
-    label?: string;
-    placeholder?: string;
-    value?: string;
-    disabled?: boolean;
-    minimumQueryLength?: number;
-    debounceTime?: number;
-    limit?: number;
-    provider?: GeocodingProvider;
-    allowManualEntry?: boolean;
-    manualEntryLabel?: string;
-    onChange?: (value: string) => void;
-    onManualEntry?: (addressLine: string) => void;
-    onSelect: (address: GeocodedAddress) => void;
-}
-export declare const AddressSearch: ({ id, className, label, placeholder, value, disabled, minimumQueryLength, debounceTime, limit, provider, allowManualEntry, manualEntryLabel, onChange, onManualEntry, onSelect, }: AddressSearchProps) => import("react/jsx-runtime").JSX.Element;
+export interface AddressSearchProps {
+    id?: string;
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    minimumQueryLength?: number;
+    debounceTime?: number;
+    limit?: number;
+    provider?: GeocodingProvider;
+    allowManualEntry?: boolean;
+    manualEntryLabel?: string;
+    onChange?: (value: string) => void;
+    onManualEntry?: (addressLine: string) => void;
+    onSelect: (address: GeocodedAddress) => void;
+}
+export declare const AddressSearch: ({ id, className, label, placeholder, value, disabled, minimumQueryLength, debounceTime, limit, provider, allowManualEntry, manualEntryLabel, onChange, onManualEntry, onSelect, }: AddressSearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/addressSearch/AddressSearch.view.d.ts

@@ -1 +1 @@
-export declare const AddressSearchView: () => import("react/jsx-runtime").JSX.Element;
+export declare const AddressSearchView: () => import("react/jsx-runtime").JSX.Element;

package/dist/badge/Badge.d.ts

@@ -1,10 +1,11 @@
 import { IconSizeEnum } from '../icon/iconSize.enum';
-
-export type BadgeInterface = {
-    className?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title?: string;
-    sizeIcon?: IconSizeEnum;
-    classIcon?: string;
-};
-export declare const Badge: ({ className, onClick, title, sizeIcon, classIcon, }: BadgeInterface) => import("react/jsx-runtime").JSX.Element;
+export type BadgeInterface = {
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    title?: string;
+    sizeIcon?: IconSizeEnum;
+    classIcon?: string;
+    color?: string;
+    onRemove?: (event: React.MouseEvent) => void;
+};
+export declare const Badge: ({ className, onClick, title, sizeIcon, classIcon, color, onRemove, }: BadgeInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/badge/Badge.view.d.ts

@@ -1 +1 @@
-export declare const BadgeView: () => JSX.Element;
+export declare const BadgeView: () => JSX.Element;

package/dist/button/Button.d.ts

@@ -1,3 +1,2 @@
 import { ButtonInterface } from './button.interface';
-
-export declare const Button: ({ className, onClick, badge, title, sizeIcon, id, classIcon, positionicon, disabled, style, }: ButtonInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ className, onClick, badge, title, sizeIcon, id, classIcon, positionicon, disabled, style, }: ButtonInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/button/Button.view.d.ts

@@ -1 +1 @@
-export declare const ButtonView: () => JSX.Element;
+export declare const ButtonView: () => JSX.Element;

package/dist/button/button.interface.d.ts

@@ -1,22 +1,21 @@
 import { BadgeInterface } from '../badge/Badge';
 import { IconSizeEnum } from '../icon/iconSize.enum';
-
-export interface ButtonInterface {
-    className?: string;
-    badge?: BadgeInterface;
-    id?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title: string;
-    classIcon?: string;
-    positionicon?: number;
-    disabled?: boolean;
-    sizeIcon?: IconSizeEnum;
-    style?: React.CSSProperties;
-}
-export interface buttonActionInterface {
-    icon?: string;
-    id?: number | string;
-    label: string;
-    disabled?: boolean;
-    onClick: (a: buttonActionInterface) => void;
-}
+export interface ButtonInterface {
+    className?: string;
+    badge?: BadgeInterface;
+    id?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    title: string;
+    classIcon?: string;
+    positionicon?: number;
+    disabled?: boolean;
+    sizeIcon?: IconSizeEnum;
+    style?: React.CSSProperties;
+}
+export interface buttonActionInterface {
+    icon?: string;
+    id?: number | string;
+    label: string;
+    disabled?: boolean;
+    onClick: (a: buttonActionInterface) => void;
+}

package/dist/button/buttonActions/ButtonActions.d.ts

@@ -1,14 +1,13 @@
 import { PositionOverlay } from '../../overlayPanel/OverlayPanel';
 import { buttonActionInterface } from '../button.interface';
-
-export type ButtonActionsProps = {
-    className?: string;
-    onClick?: (e: React.MouseEvent) => void;
-    title: string;
-    actions?: buttonActionInterface[];
-    classIcon?: string;
-    positionActions?: PositionOverlay;
-    disabled?: boolean;
-    id?: string;
-};
-export declare const ButtonActions: ({ className, onClick, title, actions, positionActions, disabled, id, }: ButtonActionsProps) => import("react/jsx-runtime").JSX.Element;
+export type ButtonActionsProps = {
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    title: string;
+    actions?: buttonActionInterface[];
+    classIcon?: string;
+    positionActions?: PositionOverlay;
+    disabled?: boolean;
+    id?: string;
+};
+export declare const ButtonActions: ({ className, onClick, title, actions, positionActions, disabled, id, }: ButtonActionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/button/buttonFile/ButtonFile.d.ts

@@ -1,9 +1,9 @@
-interface ButtonFileProps {
-    onFileSelected?: (file: File, buffer: ArrayBuffer) => void;
-    accept?: string;
-    buttonText?: string;
-    buttonClassName?: string;
-    containerClassName?: string;
-}
-export declare const ButtonFile: ({ onFileSelected, accept, buttonText, buttonClassName, containerClassName, }: ButtonFileProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+interface ButtonFileProps {
+    onFileSelected?: (file: File, buffer: ArrayBuffer) => void;
+    accept?: string;
+    buttonText?: string;
+    buttonClassName?: string;
+    containerClassName?: string;
+}
+export declare const ButtonFile: ({ onFileSelected, accept, buttonText, buttonClassName, containerClassName, }: ButtonFileProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/button/buttonFile/ButtonFile.view.d.ts

@@ -1 +1 @@
-export declare const ButtonFileView: () => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonFileView: () => import("react/jsx-runtime").JSX.Element;