kelt-ui-kit-react 2.0.0 → 2.0.2

package/README.md

@@ -1,5 +1,31 @@
 # 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

package/dist/addressSearch/AddressSearch.d.ts

@@ -0,0 +1,20 @@
+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;

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

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

package/dist/dataTable/DataTable.d.ts

@@ -29,5 +29,6 @@ export type DataTableProps<T> = {
     onRowClassName?: (row: T) => string | undefined;
     rowStyle?: (row: T) => React.CSSProperties | undefined;
     rowClassName?: (row: T) => string | undefined;
+    mobileCardView?: boolean;
 };
 export declare function DataTable<T>(props: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/dataTable/dataTableRow/DataTableRow.d.ts

@@ -5,7 +5,8 @@ type DataTableRowProps = {
     idx: number;
     rowIndex: number;
     row: any;
+    container?: "cell" | "card";
     onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
 };
-export declare const DataTableRow: ({ column, idx, rowIndex, row, onEnterNextColumn, }: DataTableRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableRow: ({ column, idx, rowIndex, row, container, onEnterNextColumn, }: DataTableRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/form/Form.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { FormInterface, FormMode, FormValuesInterface } from './form.interface';
+import { FormInterface, FormMode, FormSection, FormValuesInterface } from './form.interface';
 
 export type FormProps<T extends {
     [key: string]: string | number | boolean | Date | string[];
@@ -10,7 +10,8 @@ export type FormProps<T extends {
     hideSubmit?: boolean;
     autoComplete?: string;
     children?: React.ReactNode;
-    initialForm: FormInterface[];
+    initialForm?: FormInterface[];
+    sections?: FormSection[];
     disabledSubmit?: boolean;
     mode?: FormMode;
     onSubmit?: (values: FormValuesInterface<T>) => void;

package/dist/form/form.enum.d.ts

@@ -1,4 +1,5 @@
 export declare enum TypeInputEnum {
+    ADDRESS = "address",
     TEXT = "text",
     BUTTON = "button",
     EMAIL = "email",

package/dist/form/form.interface.d.ts

@@ -1,5 +1,6 @@
 import { TypeInputEnum } from './form.enum';
 import { GridBreakpoints } from '../grid/grid.interface';
+import { GeocodedAddress, GeocodingProvider } from '../geocoding/geocoding.interface';
 
 export type FormMode = "read" | "edit";
 export type FormValuesInterface<T extends {
@@ -11,6 +12,11 @@ export interface FormCondition {
     errorMessage: string;
     regex: string;
 }
+export interface FormSection {
+    title?: React.ReactNode;
+    fields: FormInterface[];
+    className?: string;
+}
 export interface FormInterface {
     value: string | number | boolean | Date;
     id?: string;
@@ -30,6 +36,15 @@ export interface FormInterface {
     }[];
     className?: string;
     col?: GridBreakpoints;
+    addressSearch?: {
+        minimumQueryLength?: number;
+        debounceTime?: number;
+        limit?: number;
+        provider?: GeocodingProvider;
+        manualEntryLabel?: string;
+        mapAddress?: (address: GeocodedAddress) => Record<string, string | number | boolean | Date | string[]>;
+        onSelect?: (address: GeocodedAddress) => void;
+    };
     formatReadValue?: (value: string | number | boolean | Date | string[]) => React.ReactNode;
     autoComplete?: string;
     step?: string;

package/dist/geocoding/GeocodingService.d.ts

@@ -0,0 +1,13 @@
+import { GeocodedAddress, GeocodingProvider, GeocodingSearchOptions } from './geocoding.interface';
+
+export interface GeocodingServiceOptions {
+    baseUrl?: string;
+    fetcher?: typeof fetch;
+}
+export declare class GeocodingService implements GeocodingProvider {
+    private readonly baseUrl;
+    private readonly fetcher;
+    constructor(options?: GeocodingServiceOptions);
+    search(query: string, options?: GeocodingSearchOptions): Promise<GeocodedAddress[]>;
+}
+export declare const geocodingService: GeocodingService;

package/dist/geocoding/geocoding.interface.d.ts

@@ -0,0 +1,20 @@
+export interface GeocodedAddress {
+    id: string;
+    label: string;
+    addressLine: string;
+    postalCode: string;
+    city: string;
+    cityCode?: string;
+    countryCode: string;
+    longitude: number;
+    latitude: number;
+    score?: number;
+    type?: string;
+}
+export interface GeocodingSearchOptions {
+    limit?: number;
+    signal?: AbortSignal;
+}
+export interface GeocodingProvider {
+    search(query: string, options?: GeocodingSearchOptions): Promise<GeocodedAddress[]>;
+}

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { useToken } from './_core/hooks/useToken';
 export { useValidate } from './_core/hooks/useValidate';
 export { WidgetSupport } from './_core/hooks/widgetSupport';
 export { ButtonAction } from './action/ButtonAction';
+export { AddressSearch } from './addressSearch/AddressSearch';
+export type { AddressSearchProps } from './addressSearch/AddressSearch';
 export { Badge } from './badge/Badge';
 export { Button } from './button/Button';
 export { ButtonActions } from './button/buttonActions/ButtonActions';
@@ -24,12 +26,14 @@ export { Expands } from './expands/Expands';
 export { FilAriane } from './filAriane/FilAriane';
 export { DynamicForm } from './form/Form';
 export { TypeInputEnum } from './form/form.enum';
-export type { FormMode } from './form/form.interface';
+export type { FormMode, FormSection } from './form/form.interface';
 export { Input } from './form/input/Input';
 export { InputNumber } from './form/inputNumber/InputNumber';
 export { InputPrice } from './form/inputPrice/InputPrice';
 export { TextArea } from './form/textArea/TextArea';
 export { Grid } from './grid/Grid';
+export { GeocodingService, geocodingService, } from './geocoding/GeocodingService';
+export type { GeocodedAddress, GeocodingProvider, GeocodingSearchOptions, } from './geocoding/geocoding.interface';
 export { Header } from './header/Header';
 export { Icon } from './icon/Icon';
 export { IconSizeEnum } from './icon/iconSize.enum';