kelt-ui-kit-react 1.8.3 → 1.8.4

package/package/src/dataTable/DataTable.tsx

@@ -1,259 +0,0 @@
-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 "./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;
-  className?: string;
-  children?: JSX.Element;
-  element?: JSX.Element;
-  data: T[];
-  emptyMessage?: string;
-  actions?: dataTableActionsInterface<T>[];
-  columns: dataTableColumnsInterface<T>[];
-  loading?: boolean;
-  onRowClick?: (row: any) => void;
-  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 {
-    id,
-    name,
-    className,
-    children,
-    element,
-    data = [],
-    actions = [],
-    columns = [],
-    loading,
-    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;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          onLoadMore();
-        }
-      },
-      {
-        root: null,
-        rootMargin: "0px",
-        threshold: 1.0,
-      }
-    );
-
-    if (loaderRef.current) {
-      observer.observe(loaderRef.current);
-    }
-
-    return () => {
-      if (loaderRef.current) {
-        observer.unobserve(loaderRef.current);
-      }
-    };
-  }, [onLoadMore, hasMore]);
-  return (
-    <div className="data-table-container">
-      {name && <h2 className="mb-2">{name}</h2>}
-      {element}
-      <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) => (
-              <DataTableColumn
-                key={idx}
-                column={column}
-                idx={idx}
-                onColumnClick={onColumnClick}
-              />
-            ))}
-            {actions.length > 0 && (
-              <th
-                style={{
-                  width: "200px",
-                }}
-                align="right"
-                key={"actions"}
-              ></th>
-            )}
-          </tr>
-        </thead>
-        <tbody>
-          {loading ? (
-            <tr>
-              <td
-                align="center"
-                colSpan={columns.length + (actions.length > 0 ? 1 : 0)}
-              >
-                <div className="mt-3">
-                  <Loader display={loading} />
-                </div>
-              </td>
-            </tr>
-          ) : (
-            <></>
-          )}
-          {!loading &&
-            data.map((row, rowIndex) => (
-              <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) => (
-                        <DataTableAction
-                          key={index}
-                          action={action}
-                          row={row}
-                          index={index}
-                        />
-                      ))}
-                    </div>
-                  </td>
-                )}
-              </tr>
-            ))}
-          {!loading && data.length === 0 && (
-            <DataTableLoading
-              columns={columns}
-              actions={actions}
-              emptyMessage={emptyMessage}
-            />
-          )}
-        </tbody>
-      </table>
-
-      {children}
-      {hasMore && (
-        <div ref={loaderRef} className="infinite-scroll-loader">
-          <Loader display={true} />
-        </div>
-      )}
-    </div>
-  );
-}

package/package/src/dataTable/DataTable.view.tsx

@@ -1,62 +0,0 @@
-import { useMemo } from "react";
-import { DataTable } from "./DataTable";
-import { dataTableActionsInterface } from "./dataTable.interface";
-
-export const DataTableView = () => {
-  const dataTableColumns = useMemo(() => {
-    return [
-      { id: "id", label: "ID", minWidth: 50, type: "number" },
-      {
-        id: "name",
-        label: "Name",
-        minWidth: 100,
-        editable: true,
-        type: "text",
-      },
-      { id: "age", label: "Age", minWidth: 50, type: "number" },
-    ];
-  }, []);
-  const data = useMemo(() => {
-    return [
-      { id: 1, name: "John Doe", age: 28 },
-      { id: 2, name: "Jane Smith", age: 34 },
-      { id: 3, name: "Alice Johnson", age: 45 },
-    ];
-  }, []);
-  const actions: dataTableActionsInterface<{
-    id: number;
-    name: string;
-    age: number;
-  }>[] = useMemo(() => {
-    return [
-      {
-        id: "edit",
-        label: "Edit",
-        type: "button",
-        onClick: (row: any) => {
-          console.log("Edit action clicked for row:", row);
-        },
-      },
-      {
-        id: "delete",
-        label: "Delete",
-        type: "button",
-        onClick: (row: any) => {
-          console.log("Delete action clicked for row:", row);
-        },
-      },
-    ];
-  }, []);
-  return (
-    <DataTable
-      data={data}
-      actions={actions}
-      columns={dataTableColumns}
-      id="datatable-example"
-      name={"DataTable"}
-      onSelectionChange={(selectedRows) => {
-        console.log("Selected Rows: ", selectedRows);
-      }}
-    />
-  );
-};

package/package/src/dataTable/dataTable.css

@@ -1,30 +0,0 @@
-.data-table-container {
-  overflow: auto;
-  .data-table {
-    width: 100%;
-    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;
-      top: 0;
-      background-color: #fff;
-      th {
-        color: #bdbaba;
-        min-width: 100px;
-      }
-    }
-  }
-}

package/package/src/dataTable/dataTable.interface.ts

@@ -1,30 +0,0 @@
-import { HTMLInputTypeAttribute } from "react";
-
-export interface dataTableColumnsInterface<T> {
-  id: string;
-  label: string;
-  minWidth?: number;
-  maxWidth?: number;
-  width?: number;
-  align?: "right" | "left" | "center";
-  format?: (value: any) => string;
-  sortable?: boolean;
-  filterable?: boolean;
-  filterValue?: string;
-  editable?: boolean;
-  options?: { label: string; value: string }[];
-  onEdit?: (value: any, row: T) => void;
-  onRowStyle?: (row: T) => React.CSSProperties;
-  type: HTMLInputTypeAttribute | "select";
-}
-export interface dataTableActionsInterface<T> {
-  id: string;
-  label: string;
-  type: "button" | "link" | "icon";
-  classIcon?: string;
-  onClick: (row: T) => void;
-  shouldDisplay?: (row: T) => boolean;
-  disabled?: boolean;
-  labelButton?: (row: T) => string;
-  visible?: boolean;
-}

package/package/src/dataTable/dataTableActions/DataTableAction.tsx

@@ -1,44 +0,0 @@
-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/package/src/dataTable/dataTableColumn/DataTableColumn.tsx

@@ -1,27 +0,0 @@
-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/package/src/dataTable/dataTableLoading/DataTableLoading.tsx

@@ -1,21 +0,0 @@
-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/package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,54 +0,0 @@
-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/package/src/datePicker/DatePicker.tsx

@@ -1,110 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import Calendar from "react-calendar";
-import { Value } from "react-calendar/dist/cjs/shared/types";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./datePicker.css"; // Assuming you have some styles for the DatePicker
-export type DatePickerProps = {
-  value?: Value;
-  maxDate?: Date;
-  onChange?: (date: Value) => void;
-  children?: React.ReactNode;
-};
-export const DatePicker = ({
-  value,
-  onChange,
-  maxDate,
-  children,
-}: DatePickerProps) => {
-  const [dateCalendar, setDateCalendar] = useState<Value>(value ?? new Date());
-  const [showCalendar, setShowCalendar] = useState(false);
-
-  const calendarRef = useRef<HTMLDivElement>(null);
-
-  const handleChange = useCallback(
-    (val: Value) => {
-      setDateCalendar(val);
-      if (onChange) {
-        onChange(val);
-      }
-      setShowCalendar(false);
-    },
-    [onChange]
-  );
-
-  const toggleCalendar = () => setShowCalendar(!showCalendar);
-
-  const handleClickOutside = useCallback((event: MouseEvent) => {
-    if (
-      calendarRef.current &&
-      !calendarRef.current.contains(event.target as Node)
-    ) {
-      setShowCalendar(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (showCalendar) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    // Nettoyage
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showCalendar, handleClickOutside]);
-  const [currentMonth, setCurrentMonth] = useState<Value>();
-
-  const handleActiveStartDateChange = ({
-    activeStartDate,
-  }: {
-    activeStartDate: Value;
-  }) => {
-    setCurrentMonth(activeStartDate);
-  };
-  return (
-    <div>
-      <div className="calendar" ref={calendarRef}>
-        {children && <div onClick={toggleCalendar}>{children}</div>}
-        {!children && (
-          <button className="calendar-button" onClick={toggleCalendar}>
-            <Icon
-              classIcon=" bi-calendar4-event"
-              size={IconSizeEnum.EXTRA_LARGE}
-            />
-          </button>
-        )}
-        {showCalendar && (
-          <div className="calendar-popup">
-            <div
-              onClick={() => setShowCalendar(false)}
-              className="calendar-popup-close"
-            >
-              <Icon
-                classIcon="bi-x-lg close-icon"
-                size={IconSizeEnum.EXTRA_SMALL}
-              />
-            </div>
-            <Calendar
-              onActiveStartDateChange={handleActiveStartDateChange}
-              maxDate={maxDate ?? new Date()}
-              onChange={handleChange}
-              value={dateCalendar}
-              tileClassName={({ date: day, view }) => {
-                if (view === "month" && (currentMonth as Date)) {
-                  const curr = currentMonth as Date;
-                  return day.getMonth() !== curr?.getMonth()
-                    ? "out-of-month"
-                    : null;
-                }
-                return null;
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/package/src/datePicker/DatePicker.view.tsx

@@ -1,9 +0,0 @@
-import { DatePicker } from "./DatePicker";
-
-export const DatePickerView = () => {
-  return (
-    <div>
-      <DatePicker />
-    </div>
-  );
-};