kelt-ui-kit-react 1.7.5 → 1.7.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.7.5",
+  "version": "1.7.8",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/damier/Damier.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { CSSProperties, useEffect, useMemo, useState } from "react";
 import "./damier.css";
 import { DamierCell } from "./damierCell/DamierCell";
 import { DamierCellInterface } from "./damierCell/damierCell.interface";
@@ -17,7 +17,7 @@ export const Damier = ({
   onClick,
 }: DamierProps) => {
   const nbCols = useMemo(() => cols ?? 9, [cols]);
-  const nbRows = useMemo(() => rows ?? 9, [rows]);
+  const nbRows = useMemo(() => Math.max(1, rows ?? 9), [rows]);
   const [currentPage, setCurrentPage] = useState(1);
   useEffect(() => {
     setCurrentPage(page);
@@ -30,26 +30,35 @@ export const Damier = ({
       for (let col = 0; col < nbCols; col++) {
         const position = col + row * nbCols;
         const cell = damierCells?.find(
-          (cell) => cell.position === position + 1
+          (cell) => cell.position === position + 1,
         );
         if (!cell) {
           colsArray.push(
-            <div key={`${row}-${col}`} className="cell cell--empty"></div>
+            <div key={`${row}-${col}`} className="cell cell--empty"></div>,
           );
         } else {
           colsArray.push(
-            <DamierCell onClick={onClick} key={`${row}-${col}`} cell={cell} />
+            <DamierCell onClick={onClick} key={`${row}-${col}`} cell={cell} />,
           );
         }
       }
       rowsArray.push(
         <div key={row} className="row">
           {colsArray}
-        </div>
+        </div>,
       );
     }
     return rowsArray;
   }, [nbCols, nbRows, currentPage]);
 
-  return <div className="damier">{grid}</div>;
+  const damierStyle = useMemo(
+    () => ({ "--rows": String(nbRows) }) as CSSProperties,
+    [nbRows],
+  );
+
+  return (
+    <div className="damier" style={damierStyle}>
+      {grid}
+    </div>
+  );
 };

package/src/damier/damier.css

@@ -5,10 +5,12 @@
   margin-bottom: 1rem;
   width: 100%;
   --sizeDamier: 630;
+  --rows: 9;
+
   .row {
     display: flex;
     height: 90px;
-    width: calc(var(--sizeDamier) / 9);
+    width: calc(var(--sizeDamier) / var(--rows));
     min-height: 40px;
   }
 
@@ -22,9 +24,11 @@
     align-items: center;
     justify-content: center;
     background-color: #fff;
+
     &.cell--empty {
       background: #f9f9f9;
     }
+
     &:not(.cell--empty) {
       cursor: pointer;
     }
@@ -34,11 +38,13 @@
 @media (min-width: 768px) {
   .damier {
     --sizeDamier: 990;
+
     .row {
-      height: calc(100vh / 9.6);
+      height: calc(100vh / var(--rows));
     }
+
     .cell {
-      height: calc(100vh / 9) - 1;
+      height: calc((100vh / var(--rows)) - 1px);
     }
   }
-}
+}

package/src/dataTable/DataTable.tsx

@@ -55,7 +55,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
   const loaderRef = useRef<HTMLDivElement | null>(null);
   const [selectedRowIds, setSelectedRowIds] = useState<Set<string | number>>(
-    new Set(),
+    new Set()
   );
   const toggleSelectAll = useCallback(() => {
     if (selectedRowIds.size === data.length) {
@@ -63,7 +63,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
       onSelectionChange?.([]);
     } else {
       let allIds = data.map((d) =>
-        getRowId ? getRowId(d) : ((d as any).id ?? d),
+        getRowId ? getRowId(d) : (d as any).id ?? d
       );
 
       if (limitSelect && allIds.length > limitSelect) {
@@ -74,8 +74,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
       setSelectedRowIds(newSelection);
       onSelectionChange?.(
         data.filter((d) =>
-          newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
-        ),
+          newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
+        )
       );
     }
   }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
@@ -87,12 +87,12 @@ export function DataTable<T>(props: DataTableProps<T>) {
         onRowClick?.(row);
       }
     },
-    [onRowClick],
+    [onRowClick]
   );
   const toggleRow = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
       e.stopPropagation();
-      const rowId = getRowId ? getRowId(row) : ((row as any).id ?? row);
+      const rowId = getRowId ? getRowId(row) : (row as any).id ?? row;
       const newSelection = new Set(selectedRowIds);
 
       if (newSelection.has(rowId)) {
@@ -107,11 +107,11 @@ export function DataTable<T>(props: DataTableProps<T>) {
 
       setSelectedRowIds(newSelection);
       const selectedItems = data.filter((d) =>
-        newSelection.has(getRowId ? getRowId(d) : ((d as any).id ?? d)),
+        newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
       );
       onSelectionChange?.(selectedItems);
     },
-    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds],
+    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds]
   );
   useEffect(() => {
     if (!onLoadMore || !hasMore) return;
@@ -126,7 +126,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
         root: null,
         rootMargin: "0px",
         threshold: 1.0,
-      },
+      }
     );
 
     if (loaderRef.current) {
@@ -139,11 +139,6 @@ export function DataTable<T>(props: DataTableProps<T>) {
       }
     };
   }, [onLoadMore, hasMore]);
-  const hasNestedColumns = columns.some((col) => col.children?.length);
-
-  const flatColumns = columns.flatMap((col) =>
-    col.children?.length ? col.children : [col],
-  );
   return (
     <div className="data-table-container">
       {name && <h2 className="mb-2">{name}</h2>}
@@ -167,11 +162,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 />
               </th>
             )}
-
             {columns.map((column, idx) => (
-              <DataTableColumn<T>
+              <DataTableColumn
                 key={idx}
-                hasNestedColumns={hasNestedColumns}
                 column={column}
                 idx={idx}
                 onColumnClick={onColumnClick}
@@ -184,26 +177,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
                 }}
                 align="right"
                 key={"actions"}
-                rowSpan={hasNestedColumns ? 2 : 1}
               ></th>
             )}
           </tr>
-          {hasNestedColumns && (
-            <tr>
-              {columns.flatMap(
-                (col, idx) =>
-                  col.children?.map((child, childIdx) => (
-                    <th
-                      key={`${idx}-${childIdx}`}
-                      style={{ textAlign: child.align ?? "left" }}
-                      onClick={() => onColumnClick?.(child)}
-                    >
-                      {child.label}
-                    </th>
-                  )) ?? [],
-              )}
-            </tr>
-          )}
         </thead>
         <tbody>
           {loading ? (
@@ -233,17 +209,17 @@ export function DataTable<T>(props: DataTableProps<T>) {
                         limitSelect !== undefined &&
                         selectedRowIds.size >= limitSelect &&
                         !selectedRowIds.has(
-                          getRowId ? getRowId(row) : ((row as any).id ?? row),
+                          getRowId ? getRowId(row) : (row as any).id ?? row
                         )
                       }
                       checked={selectedRowIds.has(
-                        getRowId ? getRowId(row) : ((row as any).id ?? row),
+                        getRowId ? getRowId(row) : (row as any).id ?? row
                       )}
                       onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
                     />
                   </td>
                 )}
-                {flatColumns.map((column, idx) => (
+                {columns.map((column, idx) => (
                   <DataTableRow column={column} idx={idx} row={row} key={idx} />
                 ))}
                 {actions.length > 0 && (

package/src/dataTable/dataTable.interface.ts

@@ -7,7 +7,6 @@ export interface dataTableColumnsInterface<T> {
   maxWidth?: number;
   width?: number;
   align?: "right" | "left" | "center";
-  alignText?: "right" | "left" | "center";
   format?: (value: any) => string;
   sortable?: boolean;
   filterable?: boolean;
@@ -16,9 +15,7 @@ export interface dataTableColumnsInterface<T> {
   options?: { label: string; value: string }[];
   onEdit?: (value: any, row: T) => void;
   onRowStyle?: (row: T) => React.CSSProperties;
-  renderComponent?: (value: any, row: T) => JSX.Element;
   type: HTMLInputTypeAttribute | "select";
-  children?: dataTableColumnsInterface<T>[];
 }
 export interface dataTableActionsInterface<T> {
   id: string;

package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -1,16 +1,15 @@
 import { dataTableColumnsInterface } from "../dataTable.interface";
 
-export function DataTableColumn<T>({
+type DataTableColumnProps = {
+  column: dataTableColumnsInterface<any>;
+  idx: number;
+  onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
+};
+export const DataTableColumn = ({
   column,
   idx,
   onColumnClick,
-  hasNestedColumns,
-}: {
-  hasNestedColumns: boolean;
-  column: dataTableColumnsInterface<T>;
-  idx: number;
-  onColumnClick?: (column: dataTableColumnsInterface<T>) => void;
-}) {
+}: DataTableColumnProps) => {
   return (
     <th
       key={`colonne-${column.id}-${idx}`}
@@ -18,15 +17,11 @@ export function DataTableColumn<T>({
         minWidth: column.minWidth,
         maxWidth: column.maxWidth,
         width: column.width,
-        textAlign: column.align ?? "left",
-        alignContent: column.children ? "center" : "flex-end",
+        textAlign: column.align || "left",
       }}
-      className={column.children ? "has-children" : ""}
-      colSpan={column.children?.length ?? 1}
-      rowSpan={!column.children?.length && hasNestedColumns ? 2 : 1}
       onClick={() => onColumnClick?.(column)}
     >
       {column.label}
     </th>
   );
-}
+};

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,5 +1,5 @@
+import { Select } from "../../select/Select";
 import { dataTableColumnsInterface } from "../dataTable.interface";
-import { DataTableRowValue } from "./dataTableRowValue/DataTableRowValue";
 
 type DataTableRowProps = {
   column: dataTableColumnsInterface<any>;
@@ -13,16 +13,41 @@ export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
     <td
       style={{
         minWidth: column.minWidth,
-        textAlign: column.alignText ? column.alignText : column.align || "left",
+        textAlign: column.align || "left",
         maxWidth: column.maxWidth,
         width: column.width,
         ...style,
       }}
       key={`row-${column.id}-${idx}`}
     >
-      {column.renderComponent ? column.renderComponent(value, row) : null}
-      {!column.renderComponent && (
-        <DataTableRowValue column={column} value={value} row={row} idx={idx} />
+      {column.editable ? (
+        column.type === "select" ? (
+          <Select
+            options={column.options ?? []}
+            value={value}
+            onChange={(e) => {
+              if (column.onEdit) {
+                column.onEdit(e, row);
+              }
+            }}
+          />
+        ) : (
+          <input
+            type={column.type}
+            value={value}
+            step="0.01"
+            style={{ textAlign: column.align || "left" }}
+            onChange={(e) => {
+              if (column.onEdit) {
+                column.onEdit(e.target.value, row);
+              }
+            }}
+          />
+        )
+      ) : column.format ? (
+        column.format(value)
+      ) : (
+        value
       )}
     </td>
   );

package/src/form/input/Input.tsx

@@ -17,7 +17,6 @@ export interface InputProps {
   required?: boolean;
   minLength?: number;
   maxLength?: number;
-  width?: string;
   autoComplete?: string;
   step?: string;
   tabIndex?: number;
@@ -35,7 +34,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       name,
       type = TypeInputEnum.TEXT,
       value,
-      width,
       onInvalid,
       placeholder,
       className,
@@ -54,16 +52,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       onClick,
       handleKeyDown,
     },
-    ref,
+    ref
   ) => {
     // Si le type est password, on utilise l'input de type password
     const [showPassword, setShowPassword] = useState(false);
 
     return (
-      <div
-        className={`input-container ${`input-container-${type}`} `}
-        style={{ width }}
-      >
+      <div className={`input-container ${`input-container-${type}`} `}>
         <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
 
         <input
@@ -105,7 +100,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
       </div>
     );
-  },
+  }
 );
 
 Input.displayName = "Input";

package/src/form/inputNumber/InputNumber.tsx

@@ -8,8 +8,10 @@ export type InputNumberProps = {
   value?: string; // ⚠️ string pour gérer la saisie manuelle
   placeholder?: string;
   className?: string;
+  pattern?: string; // regex pour validation (ex: "^-?\\d*[.,]?\\d*$" pour nombre décimal)
   disabled?: boolean;
   required?: boolean;
+  inputMode?: "numeric" | "decimal";
   autoFocus?: boolean;
   maxLength?: number;
   autoComplete?: string;
@@ -17,7 +19,7 @@ export type InputNumberProps = {
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onChange?: (
     e: React.ChangeEvent<HTMLInputElement>,
-    valueFormat?: string
+    valueFormat?: string,
   ) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
@@ -38,13 +40,15 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       maxLength = 10,
       autoComplete = "off",
       tabIndex = 0,
+      inputMode = "numeric",
+      pattern,
       onChange,
       onBlur,
       onClick,
       onKeyDown,
       onFocus,
     },
-    ref
+    ref,
   ) => {
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -62,7 +66,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
 
         onChange?.(e, newValue);
       },
-      [onChange, maxLength]
+      [onChange, maxLength],
     );
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -72,7 +76,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       // ✅ Autoriser chiffres, contrôle, ., , et -
       const allowed =
         /[0-9]|Backspace|Delete|ArrowLeft|ArrowRight|Tab|Enter|Home|End/.test(
-          e.key
+          e.key,
         ) ||
         e.key === "." ||
         e.key === "," ||
@@ -105,8 +109,9 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
           required={required}
           autoFocus={autoFocus}
           autoComplete={autoComplete}
+          pattern={pattern}
           tabIndex={tabIndex}
-          inputMode="numeric" // mobile keyboard adaptatif
+          inputMode={inputMode} // mobile keyboard adaptatif
           spellCheck="false"
           className={`input-field ${className ?? ""}`}
           onChange={handleChange}
@@ -121,7 +126,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
         />
       </div>
     );
-  }
+  },
 );
 
 InputNumber.displayName = "InputNumber";

package/src/form/inputPrice/InputPrice.tsx

@@ -18,7 +18,7 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       onChange,
       ...props
     },
-    ref
+    ref,
   ) => {
     const handleBlur = useCallback(() => {
       if (onChange) {
@@ -31,10 +31,12 @@ export const InputPrice = forwardRef<HTMLInputElement, InputPriceProps>(
       <InputNumber
         {...props}
         ref={ref}
+        pattern="[0-9]*[.,]?[0-9]*"
+        inputMode="decimal" // mobile keyboard adaptatif
         value={value ?? ""}
         onChange={(e) => onChange?.(e.target.value)}
         onBlur={handleBlur} // Force le formatage à 2 décimales en sortie
       />
     );
-  }
+  },
 );

package/src/index.ts

@@ -24,7 +24,6 @@ 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";

package/.github/workflows/publish.yml

@@ -1,31 +0,0 @@
-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/dataTable/dataTableRow/dataTableRowValue/DataTableRowValue.d.ts

@@ -1,10 +0,0 @@
-import { dataTableColumnsInterface } from '../../dataTable.interface';
-
-type DataTableRowValueProps = {
-    column: dataTableColumnsInterface<any>;
-    idx: number;
-    value: any;
-    row: any;
-};
-export declare const DataTableRowValue: ({ column, row, value, }: DataTableRowValueProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/dataTable/dataTableRow/dataTableRowValue/DataTableRowValue.tsx

@@ -1,52 +0,0 @@
-import { Select } from "../../../select/Select";
-import { dataTableColumnsInterface } from "../../dataTable.interface";
-
-type DataTableRowValueProps = {
-  column: dataTableColumnsInterface<any>;
-  idx: number;
-  value: any;
-  row: any;
-};
-export const DataTableRowValue = ({
-  column,
-  row,
-  value,
-}: DataTableRowValueProps) => {
-  return (
-    <>
-      {column.editable ? (
-        column.type === "select" ? (
-          <Select
-            options={column.options ?? []}
-            value={value}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e, row);
-              }
-            }}
-          />
-        ) : (
-          <input
-            type={column.type}
-            value={value}
-            step="0.01"
-            style={{
-              textAlign: column.alignText
-                ? column.alignText
-                : column.align || "left",
-            }}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e.target.value, row);
-              }
-            }}
-          />
-        )
-      ) : column.format ? (
-        column.format(value)
-      ) : (
-        value
-      )}
-    </>
-  );
-};