kelt-ui-kit-react 1.8.2 → 1.8.3

package/.github/workflows/publish.yml

@@ -0,0 +1,31 @@
+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 }}

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

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

package/dist/badge/Badge.d.ts

@@ -4,7 +4,9 @@ export type BadgeInterface = {
     className?: string;
     onClick?: (e: React.MouseEvent) => void;
     title?: string;
+    color?: string;
+    onRemove?: (e: React.MouseEvent) => void;
     sizeIcon?: IconSizeEnum;
     classIcon?: string;
 };
-export declare const Badge: ({ className, onClick, title, sizeIcon, classIcon, }: BadgeInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ className, onClick, color, title, onRemove, sizeIcon, classIcon, }: BadgeInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ export interface ButtonInterface {
     className?: string;
     badge?: BadgeInterface;
     id?: string;
-    onClick?: (e: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     title: string;
     classIcon?: string;
     positionicon?: number;

package/dist/dataTable/DataTable.d.ts

@@ -1,5 +1,16 @@
-import { dataTableActionsInterface, dataTableColumnsInterface } from './dataTable.interface';
+import { DataTableActionsInterface, DataTableColumnsInterface } from './dataTable.interface';
 
+export type DataTableDateRangeFilterValue = {
+    startDate: string;
+    endDate: string;
+};
+export type FilterValue = string | number | boolean | string[] | DataTableDateRangeFilterValue | null;
+export type DataTableFilterState = Record<string, FilterValue>;
+export type DataTableSortDirection = "asc" | "desc";
+export type DataTableSortState = {
+    key: string;
+    direction: DataTableSortDirection;
+};
 export type DataTableProps<T> = {
     id: string;
     name?: string;
@@ -8,11 +19,14 @@ export type DataTableProps<T> = {
     element?: JSX.Element;
     data: T[];
     emptyMessage?: string;
-    actions?: dataTableActionsInterface<T>[];
-    columns: dataTableColumnsInterface<T>[];
+    actions?: DataTableActionsInterface<T>[];
+    columns: DataTableColumnsInterface<T>[];
+    onFiltersChange?: (next: DataTableFilterState) => void;
+    onSortChange?: (next: DataTableSortState | null) => void;
     loading?: boolean;
     onRowClick?: (row: any) => void;
     onColumnClick?: (column: any) => void;
+    onEditColumnByOverlay?: (row: T) => void;
     onLoadMore?: () => void;
     hasMore?: boolean;
     onSelectionChange?: (selectedRows: T[]) => void;

package/dist/dataTable/dataTable.interface.d.ts

@@ -1,26 +1,44 @@
 import { HTMLInputTypeAttribute } from 'react';
+import { EnumerableType } from '../_core/type/generiqueType';
+import { TypeInputEnum } from '../form/form.enum';
 
-export interface dataTableColumnsInterface<T> {
+export interface DataTableColumnsInterface<T> {
     id: string;
     label: string;
+    key?: string;
+    name?: string;
+    sticky?: boolean;
     minWidth?: number;
     maxWidth?: number;
     width?: number;
     align?: "right" | "left" | "center";
+    alignText?: "right" | "left" | "center";
     format?: (value: any) => string;
     sortable?: boolean;
     filterable?: boolean;
-    filterValue?: string;
+    filterDataEnum?: EnumerableType[];
+    filterType?: TypeInputEnum;
     editable?: boolean;
+    isUpdatable?: boolean;
     options?: {
         label: string;
         value: string;
     }[];
+    displayOverlay?: boolean;
+    onEditable?: (value: any, row: T) => boolean;
+    onChange?: (value: any, row: T) => void;
+    onEditByOverlay?: (value: any, row: T) => void;
     onEdit?: (value: any, row: T) => void;
+    onEditTrigger?: "change" | "enter";
     onRowStyle?: (row: T) => React.CSSProperties;
+    renderComponent?: (value: any, row: T) => JSX.Element;
+    openClickCell?: boolean;
+    handleClickCell?: (e: React.MouseEvent<HTMLTableCellElement>, row: T) => void;
+    renderClickCellComponent?: (value: any, row: T) => JSX.Element;
     type: HTMLInputTypeAttribute | "select";
+    children?: DataTableColumnsInterface<T>[];
 }
-export interface dataTableActionsInterface<T> {
+export interface DataTableActionsInterface<T> {
     id: string;
     label: string;
     type: "button" | "link" | "icon";

package/dist/dataTable/dataTableActions/DataTableAction.d.ts

@@ -1,7 +1,7 @@
-import { dataTableActionsInterface } from '../dataTable.interface';
+import { DataTableActionsInterface } from '../dataTable.interface';
 
 type DataTableActionProps = {
-    action: dataTableActionsInterface<any>;
+    action: DataTableActionsInterface<any>;
     row: any;
     index?: number;
 };

package/dist/dataTable/dataTableColumn/DataTableColumn.d.ts

@@ -1,9 +1,15 @@
-import { dataTableColumnsInterface } from '../dataTable.interface';
+import { DataTableSortDirection } from '../DataTable';
+import { DataTableColumnsInterface } from '../dataTable.interface';
 
-type DataTableColumnProps = {
-    column: dataTableColumnsInterface<any>;
+export declare function DataTableColumn<T>({ column, idx, onColumnClick, hasNestedColumns, isFilterVisible, onToggleFilterVisibility, currentSortDirection, onToggleSort, stickyLeft, stickyTop, }: {
+    hasNestedColumns: boolean;
+    column: DataTableColumnsInterface<T>;
     idx: number;
-    onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
-};
-export declare const DataTableColumn: ({ column, idx, onColumnClick, }: DataTableColumnProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+    onColumnClick?: (column: DataTableColumnsInterface<T>) => void;
+    isFilterVisible?: boolean;
+    onToggleFilterVisibility?: (column: DataTableColumnsInterface<T>) => void;
+    currentSortDirection?: DataTableSortDirection | null;
+    onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
+    stickyLeft?: number;
+    stickyTop?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/DataTableColumnFilter.d.ts

@@ -0,0 +1,10 @@
+import { DataTableColumnsInterface } from '../../dataTable.interface';
+
+type DataTableColumnFilterProps<T> = {
+    className?: string;
+    column: DataTableColumnsInterface<T>;
+    isFilterVisible?: boolean;
+    onToggleVisibility?: (column: DataTableColumnsInterface<T>) => void;
+};
+export declare const DataTableColumnFilter: <T>({ className, column, isFilterVisible, onToggleVisibility, }: DataTableColumnFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDate/DataTableColumnFilterDate.d.ts

@@ -0,0 +1,9 @@
+type DataTableColumnFilterDateProps = {
+    id: string;
+    name: string;
+    label: string;
+    onChange: (value: string) => void;
+    currentValue?: string;
+};
+export declare const DataTableColumnFilterDate: ({ id, name, label, onChange, currentValue, }: DataTableColumnFilterDateProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterDateRange/dataTableColumnFilterDateRange.d.ts

@@ -0,0 +1,9 @@
+type DataTableColumnFilterDateRangeProps = {
+    id: string;
+    name: string;
+    onChange: (startDate: string, endDate: string) => void;
+    currentStartValue?: string;
+    currentEndValue?: string;
+};
+export declare const DataTableColumnFilterDateRange: ({ id, name, onChange, currentStartValue, currentEndValue, }: DataTableColumnFilterDateRangeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterEnum/DataTableColumnFilterEnum.d.ts

@@ -0,0 +1,13 @@
+import { EnumerableType } from '../../../../_core/type/generiqueType';
+import { TypeInputEnum } from '../../../../form/form.enum';
+
+type DataTableColumnFilterEnumProps = {
+    type: TypeInputEnum;
+    id: string;
+    name?: string;
+    data: EnumerableType[];
+    onChange: (value: string) => void;
+    currentValue?: string;
+};
+export declare const DataTableColumnFilterEnum: ({ type, id, onChange, name, data, currentValue, }: DataTableColumnFilterEnumProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnFilter/dataTableColumnFilterString/DataTableColumnFilterString.d.ts

@@ -0,0 +1,9 @@
+type DataTableColumnFilterStringProps = {
+    id: string;
+    name: string;
+    label: string;
+    onChange: (value: string) => void;
+    currentValue?: string;
+};
+export declare const DataTableColumnFilterString: ({ id, name, label, onChange, currentValue, }: DataTableColumnFilterStringProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableColumn/dataTableColumnSort/DataTableColumnSort.d.ts

@@ -0,0 +1,11 @@
+import { DataTableSortDirection } from '../../DataTable';
+import { DataTableColumnsInterface } from '../../dataTable.interface';
+
+type DataTableColumnSortProps<T> = {
+    className?: string;
+    column: DataTableColumnsInterface<T>;
+    sortDirection?: DataTableSortDirection | null;
+    onToggleSort?: (column: DataTableColumnsInterface<T>) => void;
+};
+export declare const DataTableColumnSort: <T>({ className, column, sortDirection, onToggleSort, }: DataTableColumnSortProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableFilters/DataTableFilters.d.ts

@@ -0,0 +1,7 @@
+import { DataTableFilterState } from '../DataTable';
+
+export type DataTableFiltersProps = {
+    currentFilters: DataTableFilterState;
+    setCurrentFilters: React.Dispatch<React.SetStateAction<DataTableFilterState>>;
+};
+export declare const DataTableFilters: ({ currentFilters, setCurrentFilters, }: DataTableFiltersProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/dataTable/dataTableLoading/DataTableLoading.d.ts

@@ -1,7 +1,5 @@
 type DataTableLoadingProps = {
-    columns: any[];
-    actions: any[];
     emptyMessage?: string;
 };
-export declare const DataTableLoading: ({ columns, actions, emptyMessage, }: DataTableLoadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableLoading: ({ emptyMessage }: DataTableLoadingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,11 @@
-import { dataTableColumnsInterface } from '../dataTable.interface';
+import { DataTableColumnsInterface } from '../dataTable.interface';
 
 type DataTableRowProps = {
-    column: dataTableColumnsInterface<any>;
+    column: DataTableColumnsInterface<any>;
     idx: number;
     row: any;
+    onEditColumnByOverlay?: (row: any) => void;
+    stickyLeft?: number;
 };
-export declare const DataTableRow: ({ column, idx, row }: DataTableRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTableRow: ({ column, idx, row, onEditColumnByOverlay, stickyLeft, }: DataTableRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/dataTable/dataTableRow/dataTableRowOverlay/DataTableRowOverlay.d.ts

@@ -0,0 +1,12 @@
+import { DataTableColumnsInterface } from '../../dataTable.interface';
+
+type DataTableRowOverlayProps = {
+    row: any;
+    column: DataTableColumnsInterface<any>;
+    value: string;
+    refRow: React.RefObject<HTMLTableCellElement>;
+    onClose?: (close: boolean) => void;
+    onEditColumnByOverlay?: (newRow: any) => void;
+};
+export declare const DataTableRowOverlay: ({ row, refRow, value, onClose, column, onEditColumnByOverlay, }: DataTableRowOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/dataTable/dataTableRow/dataTableRowValue/DataTableRowValue.d.ts

@@ -0,0 +1,11 @@
+import { DataTableColumnsInterface } from '../../dataTable.interface';
+
+type DataTableRowValueProps = {
+    column: DataTableColumnsInterface<any>;
+    value: any;
+    row: any;
+    editable?: boolean;
+    onChange?: (value: any) => void;
+};
+export declare const DataTableRowValue: ({ column, row, value, editable, onChange, }: DataTableRowValueProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/expands/expand/expand.d.ts

@@ -5,6 +5,6 @@ export type ExpandProps = {
     item: ExpandInterface;
     className?: string;
     showArrow?: boolean;
-    onChange: (item: ExpandInterface) => void;
+    onChange?: (item: ExpandInterface) => void;
 };
 export declare const Expand: ({ currentExpand, item, className, showArrow, onChange, }: ExpandProps) => JSX.Element;

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

@@ -8,6 +8,7 @@ export declare enum TypeInputEnum {
     CHECKBOX = "checkbox",
     RADIO = "radio",
     DATE = "date",
+    DATERANGE = "daterange",
     SELECT = "select",
     TEXTAREA = "textarea"
 }

package/dist/form/input/Input.d.ts

@@ -12,12 +12,15 @@ export interface InputProps {
     disabled?: boolean;
     autoFocus?: boolean;
     required?: boolean;
+    disabledDebounce?: boolean;
     minLength?: number;
     maxLength?: number;
+    width?: string;
     autoComplete?: string;
     step?: string;
     tabIndex?: number;
     checked?: boolean;
+    showClearButton?: boolean;
     handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;

package/dist/form/inputNumber/InputNumber.d.ts

@@ -5,10 +5,8 @@ export type InputNumberProps = {
     value?: string;
     placeholder?: string;
     className?: string;
-    pattern?: string;
     disabled?: boolean;
     required?: boolean;
-    inputMode?: "numeric" | "decimal";
     autoFocus?: boolean;
     maxLength?: number;
     autoComplete?: string;

package/dist/icon/Icon.d.ts

@@ -1,3 +1,3 @@
 import { IconInterface } from './icon.interface';
 
-export declare const Icon: ({ classIcon, size }: IconInterface) => JSX.Element;
+export declare const Icon: ({ classIcon, size, onClick, }: IconInterface) => JSX.Element;

package/dist/icon/icon.interface.d.ts

@@ -3,4 +3,5 @@ import { IconSizeEnum } from './iconSize.enum';
 export interface IconInterface {
     classIcon: string;
     size?: IconSizeEnum;
+    onClick?: (e: React.MouseEvent) => void;
 }

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { Badge } from './badge/Badge';
 export { Button } from './button/Button';
 export { ButtonActions } from './button/buttonActions/ButtonActions';
 export { ButtonFile } from './button/buttonFile/ButtonFile';
+export { ButtonFilters } from './button/buttonFilters/ButtonFilters';
 export { Card } from './card/Card';
 export { Carousel } from './carousel/Carousel';
 export { Damier } from './damier/Damier';