kelt-ui-kit-react 1.4.2 → 1.4.5

package/package.json

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

package/src/button/button.css

@@ -21,7 +21,7 @@ button {
     top: -10px;
   }
   &:disabled {
-    opacity: 0.5;
+    opacity: 0.7;
     cursor: not-allowed;
   }
   &.button--primary {

package/src/dataTable/DataTable.tsx

@@ -1,13 +1,16 @@
-import { useEffect, useRef } from "react";
-import { Button } from "../button/Button";
-import { Icon } from "../icon/Icon";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+import { Input } from "../form/input/Input";
 import { Loader } from "../loader/Loader";
-import { Select } from "../select/Select";
 import "./dataTable.css";
 import {
   dataTableActionsInterface,
   dataTableColumnsInterface,
 } from "./dataTable.interface";
+import { DataTableAction } from "./dataTableActions/DataTableAction";
+import { DataTableColumn } from "./dataTableColumn/DataTableColumn";
+import { DataTableLoading } from "./dataTableLoading/DataTableLoading";
+import { DataTableRow } from "./dataTableRow/DataTableRow";
 export type DataTableProps<T> = {
   id: string;
   name?: string;
@@ -23,6 +26,10 @@ export type DataTableProps<T> = {
   onColumnClick?: (column: any) => void;
   onLoadMore?: () => void;
   hasMore?: boolean; // pour savoir s'il reste des données à charger
+  onSelectionChange?: (selectedRows: T[]) => void;
+  hideToggleAll?: boolean;
+  limitSelect?: number;
+  getRowId?: (row: T) => string | number;
 };
 export function DataTable<T>(props: DataTableProps<T>) {
   const {
@@ -38,11 +45,74 @@ export function DataTable<T>(props: DataTableProps<T>) {
     onRowClick,
     onColumnClick,
     onLoadMore,
+    emptyMessage,
     hasMore,
+    onSelectionChange,
+    hideToggleAll = false,
+    limitSelect = undefined,
+    getRowId,
   } = props;
 
   const loaderRef = useRef<HTMLDivElement | null>(null);
+  const [selectedRowIds, setSelectedRowIds] = useState<Set<string | number>>(
+    new Set()
+  );
+  const toggleSelectAll = useCallback(() => {
+    if (selectedRowIds.size === data.length) {
+      setSelectedRowIds(new Set());
+      onSelectionChange?.([]);
+    } else {
+      let allIds = data.map((d) =>
+        getRowId ? getRowId(d) : (d as any).id ?? d
+      );
+
+      if (limitSelect && allIds.length > limitSelect) {
+        allIds = allIds.slice(0, limitSelect);
+      }
 
+      const newSelection = new Set(allIds);
+      setSelectedRowIds(newSelection);
+      onSelectionChange?.(
+        data.filter((d) =>
+          newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
+        )
+      );
+    }
+  }, [data, onSelectionChange, limitSelect, getRowId, selectedRowIds.size]);
+
+  const handleClickRow = useCallback(
+    (e: React.MouseEvent, row: T) => {
+      e.stopPropagation();
+      if (onRowClick) {
+        onRowClick?.(row);
+      }
+    },
+    [onRowClick]
+  );
+  const toggleRow = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, row: T) => {
+      e.stopPropagation();
+      const rowId = getRowId ? getRowId(row) : (row as any).id ?? row;
+      const newSelection = new Set(selectedRowIds);
+
+      if (newSelection.has(rowId)) {
+        newSelection.delete(rowId);
+      } else {
+        if (limitSelect && newSelection.size >= limitSelect) {
+          // 🚫 limite atteinte
+          return;
+        }
+        newSelection.add(rowId);
+      }
+
+      setSelectedRowIds(newSelection);
+      const selectedItems = data.filter((d) =>
+        newSelection.has(getRowId ? getRowId(d) : (d as any).id ?? d)
+      );
+      onSelectionChange?.(selectedItems);
+    },
+    [data, getRowId, limitSelect, onSelectionChange, selectedRowIds]
+  );
   useEffect(() => {
     if (!onLoadMore || !hasMore) return;
 
@@ -76,21 +146,29 @@ export function DataTable<T>(props: DataTableProps<T>) {
       <table className={`data-table ${className ? className : ""}`} id={id}>
         <thead>
           <tr>
+            {onSelectionChange && (
+              <th
+                className={`select-cell ${hideToggleAll ? "hidden" : ""}`}
+                style={{ width: "20px", textAlign: "center" }}
+              >
+                <Input
+                  id={`select-th-${id}`}
+                  name={`select-th-${id}`}
+                  type={TypeInputEnum.CHECKBOX}
+                  checked={
+                    data.length > 0 && selectedRowIds.size === data.length
+                  }
+                  onChange={toggleSelectAll}
+                />
+              </th>
+            )}
             {columns.map((column, idx) => (
-              <>
-                <th
-                  key={`colonne-${column.id}-${idx}`}
-                  style={{
-                    minWidth: column.minWidth,
-                    maxWidth: column.maxWidth,
-                    width: column.width,
-                    textAlign: column.align || "left",
-                  }}
-                  onClick={() => onColumnClick?.(column)}
-                >
-                  {column.label}
-                </th>
-              </>
+              <DataTableColumn
+                key={idx}
+                column={column}
+                idx={idx}
+                onColumnClick={onColumnClick}
+              />
             ))}
             {actions.length > 0 && (
               <th
@@ -120,113 +198,52 @@ export function DataTable<T>(props: DataTableProps<T>) {
           )}
           {!loading &&
             data.map((row, rowIndex) => (
-              <tr key={rowIndex} onClick={() => onRowClick?.(row)}>
-                {columns.map((column, idx) => {
-                  const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
-                  const style = column.onRowStyle ? column.onRowStyle(row) : {};
-                  return (
-                    <>
-                      <td
-                        style={{
-                          minWidth: column.minWidth,
-                          textAlign: column.align || "left",
-                          maxWidth: column.maxWidth,
-                          width: column.width,
-                          ...style,
-                        }}
-                        key={`row-${column.id}-${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>
-                    </>
-                  );
-                })}
+              <tr key={rowIndex} onClick={(e) => handleClickRow?.(e, row)}>
+                {onSelectionChange && (
+                  <td className="select-cell" style={{ textAlign: "center" }}>
+                    <Input
+                      id={`select-row-${rowIndex}`}
+                      name={`select-row-${rowIndex}`}
+                      type={TypeInputEnum.CHECKBOX}
+                      disabled={
+                        limitSelect !== undefined &&
+                        selectedRowIds.size >= limitSelect &&
+                        !selectedRowIds.has(
+                          getRowId ? getRowId(row) : (row as any).id ?? row
+                        )
+                      }
+                      checked={selectedRowIds.has(
+                        getRowId ? getRowId(row) : (row as any).id ?? row
+                      )}
+                      onChange={(e) => toggleRow(e, row)} // empêche le clic de déclencher onRowClick
+                    />
+                  </td>
+                )}
+                {columns.map((column, idx) => (
+                  <DataTableRow column={column} idx={idx} row={row} key={idx} />
+                ))}
                 {actions.length > 0 && (
                   <td align="right">
                     <div className="d-flex align-items-center justify-content-end">
-                      {actions.map((action, index) => {
-                        let title = action.label;
-                        const display = action.shouldDisplay
-                          ? action.shouldDisplay(row)
-                          : true;
-                        if (!display) return null;
-                        if (action.labelButton) {
-                          title = action.labelButton
-                            ? action.labelButton(row)
-                            : action.label;
-                        }
-                        return (
-                          <>
-                            {action.type === "button" && (
-                              <Button
-                                title={title}
-                                key={`button-action-${action.id}-${index}`}
-                                onClick={() => action.onClick(row)}
-                                disabled={action.disabled}
-                                className={`data-table-action button--tertiary mr-2 w-100 ${
-                                  action.classIcon ? action.classIcon : ""
-                                }`}
-                              />
-                            )}
-                            {action.type === "icon" && (
-                              <div
-                                key={`icon-action-${action.id}-${index}`}
-                                className={`mr-2 `}
-                                onClick={() => action.onClick(row)}
-                              >
-                                <Icon
-                                  classIcon={action.classIcon ?? ""}
-                                  key={action.id}
-                                />
-                              </div>
-                            )}
-                          </>
-                        );
-                      })}
+                      {actions.map((action, index) => (
+                        <DataTableAction
+                          key={index}
+                          action={action}
+                          row={row}
+                          index={index}
+                        />
+                      ))}
                     </div>
                   </td>
                 )}
               </tr>
             ))}
           {!loading && data.length === 0 && (
-            <tr>
-              <td
-                align="center"
-                colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
-              >
-                <div className="mt-3">
-                  {props.emptyMessage || "Aucune donnée disponible"}
-                </div>
-              </td>
-            </tr>
+            <DataTableLoading
+              columns={columns}
+              actions={actions}
+              emptyMessage={emptyMessage}
+            />
           )}
         </tbody>
       </table>

package/src/dataTable/DataTable.view.tsx

@@ -54,6 +54,9 @@ export const DataTableView = () => {
       columns={dataTableColumns}
       id="datatable-example"
       name={"DataTable"}
+      onSelectionChange={(selectedRows) => {
+        console.log("Selected Rows: ", selectedRows);
+      }}
     />
   );
 };

package/src/dataTable/dataTable.css

@@ -5,7 +5,17 @@
     border-spacing: 5px;
     font-size: 14px;
     color: #333;
-
+    .select-cell {
+      min-width: 40px !important;
+      .input-container {
+        min-width: 20px;
+        input {
+          min-width: 20px;
+          width: 20px;
+          cursor: pointer;
+        }
+      }
+    }
     thead {
       margin-bottom: 1rem;
       position: sticky;

package/src/dataTable/dataTableActions/DataTableAction.tsx

@@ -0,0 +1,44 @@
+import { Button } from "../../button/Button";
+import { Icon } from "../../icon/Icon";
+import { dataTableActionsInterface } from "../dataTable.interface";
+type DataTableActionProps = {
+  action: dataTableActionsInterface<any>;
+  row: any;
+  index?: number;
+};
+export const DataTableAction = ({
+  action,
+  row,
+  index,
+}: DataTableActionProps) => {
+  let title = action.label;
+  const display = action.shouldDisplay ? action.shouldDisplay(row) : true;
+  if (!display) return null;
+  if (action.labelButton) {
+    title = action.labelButton ? action.labelButton(row) : action.label;
+  }
+  return (
+    <>
+      {action.type === "button" && (
+        <Button
+          title={title}
+          key={`button-action-${action.id}-${index}`}
+          onClick={() => action.onClick(row)}
+          disabled={action.disabled}
+          className={`data-table-action button--tertiary mr-2 w-100 ${
+            action.classIcon ? action.classIcon : ""
+          }`}
+        />
+      )}
+      {action.type === "icon" && (
+        <div
+          key={`icon-action-${action.id}-${index}`}
+          className={`mr-2 `}
+          onClick={() => action.onClick(row)}
+        >
+          <Icon classIcon={action.classIcon ?? ""} key={action.id} />
+        </div>
+      )}
+    </>
+  );
+};

package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -0,0 +1,27 @@
+import { dataTableColumnsInterface } from "../dataTable.interface";
+
+type DataTableColumnProps = {
+  column: dataTableColumnsInterface<any>;
+  idx: number;
+  onColumnClick?: (column: dataTableColumnsInterface<any>) => void;
+};
+export const DataTableColumn = ({
+  column,
+  idx,
+  onColumnClick,
+}: DataTableColumnProps) => {
+  return (
+    <th
+      key={`colonne-${column.id}-${idx}`}
+      style={{
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth,
+        width: column.width,
+        textAlign: column.align || "left",
+      }}
+      onClick={() => onColumnClick?.(column)}
+    >
+      {column.label}
+    </th>
+  );
+};

package/src/dataTable/dataTableLoading/DataTableLoading.tsx

@@ -0,0 +1,21 @@
+type DataTableLoadingProps = {
+  columns: any[];
+  actions: any[];
+  emptyMessage?: string;
+};
+export const DataTableLoading = ({
+  columns,
+  actions,
+  emptyMessage,
+}: DataTableLoadingProps) => {
+  return (
+    <tr>
+      <td
+        align="center"
+        colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
+      >
+        <div className="mt-3">{emptyMessage || "Aucune donnée disponible"}</div>
+      </td>
+    </tr>
+  );
+};

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -0,0 +1,54 @@
+import { Select } from "../../select/Select";
+import { dataTableColumnsInterface } from "../dataTable.interface";
+
+type DataTableRowProps = {
+  column: dataTableColumnsInterface<any>;
+  idx: number;
+  row: any;
+};
+export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
+  const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
+  const style = column.onRowStyle ? column.onRowStyle(row) : {};
+  return (
+    <td
+      style={{
+        minWidth: column.minWidth,
+        textAlign: column.align || "left",
+        maxWidth: column.maxWidth,
+        width: column.width,
+        ...style,
+      }}
+      key={`row-${column.id}-${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/form.css

@@ -8,6 +8,14 @@ input {
     outline: 1px solid #9696a7;
   }
 }
+input[type="checkbox"],
+input[type="radio"] {
+  min-width: auto;
+  padding: 0;
+  margin: 0;
+  height: 18px;
+  width: 18px;
+}
 form {
   &.form-row {
     display: flex;

package/src/form/input/Input.tsx

@@ -23,6 +23,7 @@ export interface InputProps {
   checked?: boolean;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -47,6 +48,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       checked,
       onChange,
       onBlur,
+      onClick,
     },
     ref
   ) => {
@@ -54,7 +56,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const [showPassword, setShowPassword] = useState(false);
 
     return (
-      <div className="input-container">
+      <div className={`input-container ${`input-container-${type}`} `}>
         <input name={`hide-${name}`} type="text" style={{ display: "none" }} />
 
         <input
@@ -77,6 +79,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           onChange={onChange}
           checked={checked}
           onBlur={onBlur}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick && onClick(e);
+          }}
           className={`input-field ${className ?? ""}`}
           onInvalid={onInvalid}
         />

package/src/form/input/input.css

@@ -2,6 +2,15 @@
   position: relative;
   min-width: 250px;
   width: 100%;
+  &.input-container-radio,
+  &.input-container-checkbox {
+    min-width: 10px;
+    width: 10px;
+    input {
+      width: 10px;
+      min-width: 10px;
+    }
+  }
   .input-password-icon {
     position: absolute;
     right: 10px;
@@ -12,5 +21,6 @@
   }
   input {
     width: 100%;
+    font-size: 0.8rem;
   }
 }

package/src/select/select.css

@@ -54,6 +54,7 @@
     border-radius: 0.25rem;
     color: #000;
     cursor: pointer;
+    font-size: 0.8rem;
     &:disabled {
       background-color: #e9ecef;
       color: #6c757d;

package/vite.config.ts.timestamp-1759742478362-4ac5c5a7db34b.mjs

@@ -0,0 +1,28 @@
+// vite.config.ts
+import { defineConfig } from "file:///C:/Users/laulautte/travail/kelt/ui-kit-react/node_modules/vite/dist/node/index.js";
+import checker from "file:///C:/Users/laulautte/travail/kelt/ui-kit-react/node_modules/vite-plugin-checker/dist/esm/main.js";
+import dts from "file:///C:/Users/laulautte/travail/kelt/ui-kit-react/node_modules/vite-plugin-dts/dist/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [dts(), checker({ typescript: true })],
+  server: {
+    port: 2552
+    // Remplace 3000 par le port souhaité
+  },
+  build: {
+    lib: {
+      entry: "./src/index.ts",
+      // Remplacer par l'entrée correcte
+      formats: ["es"],
+      // Génère un module ES
+      name: "kelt-ui-kit-react",
+      fileName: "index"
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"]
+    }
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxsYXVsYXV0dGVcXFxcdHJhdmFpbFxcXFxrZWx0XFxcXHVpLWtpdC1yZWFjdFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiQzpcXFxcVXNlcnNcXFxcbGF1bGF1dHRlXFxcXHRyYXZhaWxcXFxca2VsdFxcXFx1aS1raXQtcmVhY3RcXFxcdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL0M6L1VzZXJzL2xhdWxhdXR0ZS90cmF2YWlsL2tlbHQvdWkta2l0LXJlYWN0L3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSBcInZpdGVcIjtcclxuaW1wb3J0IGNoZWNrZXIgZnJvbSBcInZpdGUtcGx1Z2luLWNoZWNrZXJcIjtcclxuaW1wb3J0IGR0cyBmcm9tIFwidml0ZS1wbHVnaW4tZHRzXCI7XHJcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XHJcbiAgcGx1Z2luczogW2R0cygpLCBjaGVja2VyKHsgdHlwZXNjcmlwdDogdHJ1ZSB9KV0sXHJcbiAgc2VydmVyOiB7XHJcbiAgICBwb3J0OiAyNTUyLCAvLyBSZW1wbGFjZSAzMDAwIHBhciBsZSBwb3J0IHNvdWhhaXRcdTAwRTlcclxuICB9LFxyXG4gIGJ1aWxkOiB7XHJcbiAgICBsaWI6IHtcclxuICAgICAgZW50cnk6IFwiLi9zcmMvaW5kZXgudHNcIiwgLy8gUmVtcGxhY2VyIHBhciBsJ2VudHJcdTAwRTllIGNvcnJlY3RlXHJcbiAgICAgIGZvcm1hdHM6IFtcImVzXCJdLCAvLyBHXHUwMEU5blx1MDBFOHJlIHVuIG1vZHVsZSBFU1xyXG4gICAgICBuYW1lOiBcImtlbHQtdWkta2l0LXJlYWN0XCIsXHJcbiAgICAgIGZpbGVOYW1lOiBcImluZGV4XCIsXHJcbiAgICB9LFxyXG4gICAgcm9sbHVwT3B0aW9uczoge1xyXG4gICAgICBleHRlcm5hbDogW1wicmVhY3RcIiwgXCJyZWFjdC1kb21cIl0sXHJcbiAgICB9LFxyXG4gIH0sXHJcbn0pO1xyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQWtVLFNBQVMsb0JBQW9CO0FBQy9WLE9BQU8sYUFBYTtBQUNwQixPQUFPLFNBQVM7QUFDaEIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLElBQUksR0FBRyxRQUFRLEVBQUUsWUFBWSxLQUFLLENBQUMsQ0FBQztBQUFBLEVBQzlDLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQTtBQUFBLEVBQ1I7QUFBQSxFQUNBLE9BQU87QUFBQSxJQUNMLEtBQUs7QUFBQSxNQUNILE9BQU87QUFBQTtBQUFBLE1BQ1AsU0FBUyxDQUFDLElBQUk7QUFBQTtBQUFBLE1BQ2QsTUFBTTtBQUFBLE1BQ04sVUFBVTtBQUFBLElBQ1o7QUFBQSxJQUNBLGVBQWU7QUFBQSxNQUNiLFVBQVUsQ0FBQyxTQUFTLFdBQVc7QUFBQSxJQUNqQztBQUFBLEVBQ0Y7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=