kelt-ui-kit-react 1.9.9 → 2.0.1

package/dist/toaster/store/useToasterStore.d.ts

@@ -12,6 +12,7 @@ type ToasterState = {
         severity?: "info" | "success" | "error" | "warning";
         duration?: number;
         children?: React.ReactNode;
+        close?: boolean;
     }) => void;
     hideToast: () => void;
 };

package/index.html

@@ -5,8 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
-    rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite + React + TS</title>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.9.9",
+  "version": "2.0.1",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,4 +53,4 @@
     "typescript": "^4.9.5",
     "vite-plugin-checker": "^0.8.0"
   }
-}
+}

package/src/button/button.css

@@ -5,7 +5,7 @@ button {
   padding: 10px;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
   transition: background-color 0.3s;
   display: flex;
@@ -14,7 +14,7 @@ button {
   position: relative;
   align-items: center;
   justify-content: center;
-  font-family: "Raleway", sans-serif !important;
+  font-family: "Lexend", sans-serif;
   .badge {
     position: absolute;
     right: 10px;

package/src/card/card.css

@@ -87,12 +87,12 @@
   }
 
   .card-title {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 600;
   }
 
   .card-content {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: 400;
     display: none;
   }

package/src/dataTable/DataTable.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { useIsMobile } from "../_core/hooks/useIsMobile";
+import { Card } from "../card/Card";
 import { TypeInputEnum } from "../form/form.enum";
 import { Input } from "../form/input/Input";
 import { Icon } from "../icon/Icon";
@@ -42,6 +44,7 @@ export type DataTableProps<T> = {
   onRowClassName?: (row: T) => string | undefined;
   rowStyle?: (row: T) => React.CSSProperties | undefined;
   rowClassName?: (row: T) => string | undefined;
+  mobileCardView?: boolean;
 };
 export function DataTable<T>(props: DataTableProps<T>) {
   const {
@@ -70,8 +73,11 @@ export function DataTable<T>(props: DataTableProps<T>) {
     onRowClassName,
     rowStyle,
     rowClassName,
+    mobileCardView = false,
   } = props;
 
+  const isMobile = useIsMobile();
+  const showMobileCardView = mobileCardView && isMobile;
   const loaderRef = useRef<HTMLDivElement | null>(null);
   const footerActionRef = useRef<HTMLDivElement | null>(null);
   const hasAutoFocusedRef = useRef(false);
@@ -150,7 +156,9 @@ export function DataTable<T>(props: DataTableProps<T>) {
         return;
       }
 
-      const table = document.getElementById(id);
+      const table =
+        document.getElementById(`${id}-mobile`) ??
+        document.getElementById(id);
       const eligibleColumnIndexes = columns.reduce<number[]>(
         (indexes, column, idx) => {
           if (
@@ -232,7 +240,8 @@ export function DataTable<T>(props: DataTableProps<T>) {
         return;
       }
 
-      const table = document.getElementById(id);
+      const table =
+        document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
       if (!table) {
         return;
       }
@@ -264,7 +273,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
       for (let offset = 1; offset <= data.length; offset += 1) {
         const nextRowIndex = (rowIndex + offset) % data.length;
         const cell = table.querySelector(
-          `tbody td[data-row-index="${nextRowIndex}"][data-column-index="${firstEligibleColumnIndex}"]`,
+          `[data-row-index="${nextRowIndex}"][data-column-index="${firstEligibleColumnIndex}"]`,
         );
 
         if (!(cell instanceof HTMLElement)) {
@@ -365,9 +374,10 @@ export function DataTable<T>(props: DataTableProps<T>) {
       return;
     }
 
-    const table = document.getElementById(id);
+    const table =
+      document.getElementById(`${id}-mobile`) ?? document.getElementById(id);
     const firstCell = table?.querySelector(
-      `tbody td[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
+      `[data-row-index="0"][data-column-index="${firstEditableColumnIndex}"]`,
     );
 
     if (!(firstCell instanceof HTMLElement)) {
@@ -462,7 +472,105 @@ export function DataTable<T>(props: DataTableProps<T>) {
     >
       {name && <h2 className="mb-2">{name}</h2>}
       {element}
-      <table className={`data-table ${className ? className : ""}`} id={id}>
+      {showMobileCardView && (
+        <div
+          id={`${id}-mobile`}
+          className={`data-table-mobile-cards ${className ? className : ""}`}
+        >
+          {loading && <Loader display={loading} />}
+          {!loading &&
+            data.map((row, rowIndex) => {
+              const customStyle = (onRowStyle ?? rowStyle)?.(row);
+              const customClass =
+                (onRowClassName ?? rowClassName)?.(row) ?? "";
+              const rowId = getRowId
+                ? getRowId(row)
+                : ((row as any).id ?? row);
+
+              return (
+                <Card
+                  key={rowId as React.Key}
+                  item={{ title: "" }}
+                  className={`data-table-mobile-card ${customClass}`.trim()}
+                  handleClick={onRowClick ? () => onRowClick(row) : undefined}
+                >
+                  <div
+                    className="data-table-mobile-card__content"
+                    style={customStyle}
+                    data-row-index={rowIndex}
+                    onMouseDown={(event) => {
+                      if (isInteractiveClick(event.target)) {
+                        event.stopPropagation();
+                      }
+                    }}
+                  >
+                    {onSelectionChange && (
+                      <div className="data-table-mobile-card__field data-table-mobile-card__selection">
+                        <span className="data-table-mobile-card__label">
+                          Sélection
+                        </span>
+                        <Input
+                          id={`select-card-${rowIndex}`}
+                          name={`select-card-${rowIndex}`}
+                          type={TypeInputEnum.CHECKBOX}
+                          disabled={
+                            limitSelect !== undefined &&
+                            selectedRowIds.size >= limitSelect &&
+                            !selectedRowIds.has(rowId)
+                          }
+                          checked={selectedRowIds.has(rowId)}
+                          onChange={(event) => toggleRow(event, row)}
+                        />
+                      </div>
+                    )}
+                    {columns.map((column, columnIndex) => (
+                      <div
+                        className="data-table-mobile-card__field"
+                        key={column.id}
+                      >
+                        <span className="data-table-mobile-card__label">
+                          {column.label}
+                        </span>
+                        <DataTableRow
+                          container="card"
+                          column={column}
+                          idx={columnIndex}
+                          row={row}
+                          rowIndex={rowIndex}
+                          onEnterNextColumn={focusNextColumn}
+                        />
+                      </div>
+                    ))}
+                    {actions.length > 0 && (
+                      <div className="data-table-mobile-card__actions card-actions">
+                        {actions.map((action, actionIndex) => (
+                          <DataTableAction
+                            key={action.id}
+                            action={action}
+                            row={row}
+                            rowIndex={rowIndex}
+                            index={actionIndex}
+                            onFocusNextRow={focusNextRow}
+                          />
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </Card>
+              );
+            })}
+          {!loading && data.length === 0 && (
+            <div className="data-table-mobile-cards__empty">
+              {emptyMessage ?? "Aucune donnée"}
+            </div>
+          )}
+        </div>
+      )}
+      <table
+        className={`data-table ${className ? className : ""}`}
+        id={id}
+        style={showMobileCardView ? { display: "none" } : undefined}
+      >
         <thead>
           <tr>
             {onSelectionChange && (

package/src/dataTable/DataTable.view.tsx

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

package/src/dataTable/dataTable.css

@@ -47,6 +47,54 @@
   overflow: auto;
   position: relative;
 
+  .data-table-mobile-cards {
+    display: grid;
+    gap: 0.75rem;
+
+    .data-table-mobile-card {
+      width: 100%;
+      max-width: none;
+      height: auto;
+      padding: 0;
+      border-radius: 8px;
+    }
+
+    .data-table-mobile-card__content {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .data-table-mobile-card__field {
+      display: grid;
+      grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
+      gap: 0.75rem;
+      align-items: center;
+      padding: 0.625rem 0.75rem;
+      border-bottom: 1px solid #e5e5e5;
+    }
+
+    .data-table-mobile-card__label {
+      color: var(--tertiary-color);
+      font-size: 0.875rem;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+    }
+
+    .data-table-mobile-card__actions {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0.75rem;
+    }
+
+    .data-table-mobile-cards__empty {
+      padding: 1rem;
+      text-align: center;
+      color: #666;
+    }
+  }
+
   &.data-table-container--with-footer-action {
     scroll-padding-bottom: 80px;
   }
@@ -54,7 +102,7 @@
   .data-table {
     width: 100%;
     border-spacing: 0;
-    font-size: 14px;
+    font-size: 16px;
     color: #333;
 
     .select-cell {
@@ -84,7 +132,7 @@
         top: 0;
         z-index: 2;
         background-color: #fff;
-        color: #bdbaba;
+        color: var(--tertiary-color);
         min-width: 100px;
         padding: .5rem;
       }
@@ -125,7 +173,7 @@
           border: 1px solid #dcdcdc;
           background-color: #f8f9fa;
           color: #333;
-          font-size: 14px;
+          font-size: 16px;
           line-height: 1;
           cursor: pointer;
           transition: background-color 0.15s, border-color 0.15s;

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -7,6 +7,7 @@ type DataTableRowProps = {
   idx: number;
   rowIndex: number;
   row: any;
+  container?: "cell" | "card";
   onEnterNextColumn?: (columnIndex: number, rowIndex: number) => void;
 };
 export const DataTableRow = ({
@@ -14,6 +15,7 @@ export const DataTableRow = ({
   idx,
   rowIndex,
   row,
+  container = "cell",
   onEnterNextColumn,
 }: DataTableRowProps) => {
   const value = (row as any)[column.id]; // On utilise [column.id] pour accéder aux bonnes propriétés
@@ -24,12 +26,12 @@ export const DataTableRow = ({
     typeof column.showStepButtons === "function"
       ? column.showStepButtons(row)
       : (column.showStepButtons ??
-          (typeof column.stepControls === "function"
-            ? column.stepControls(row)
-            : (column.stepControls ??
-                (typeof column.withStepControls === "function"
-                  ? column.withStepControls(row)
-                  : column.withStepControls)))),
+        (typeof column.stepControls === "function"
+          ? column.stepControls(row)
+          : (column.stepControls ??
+            (typeof column.withStepControls === "function"
+              ? column.withStepControls(row)
+              : column.withStepControls)))),
   );
 
   const handleStep = (direction: "plus" | "minus", e: React.MouseEvent) => {
@@ -50,8 +52,10 @@ export const DataTableRow = ({
     }
   };
 
+  const Container = container === "card" ? "div" : "td";
+
   return (
-    <td
+    <Container
       className={`${isDisabled ? "disabled" : ""}`}
       data-column-index={idx}
       data-row-index={rowIndex}
@@ -93,42 +97,83 @@ export const DataTableRow = ({
             />
           </div>
         ) : (
-        hasStepButtons ? (
-          <div
-            className="data-table-input-number-wrapper"
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-              justifyContent:
-                column.align === "right"
-                  ? "flex-end"
-                  : column.align === "center"
-                    ? "center"
-                    : "flex-start",
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <button
-              type="button"
-              className="data-table-step-btn data-table-step-btn--minus"
-              disabled={
-                isDisabled ||
-                (column.min !== undefined && Number(value) <= column.min)
-              }
-              onClick={(e) => handleStep("minus", e)}
+          hasStepButtons ? (
+            <div
+              className="data-table-input-number-wrapper"
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "4px",
+                justifyContent:
+                  column.align === "right"
+                    ? "flex-end"
+                    : column.align === "center"
+                      ? "center"
+                      : "flex-start",
+              }}
+              onClick={(e) => e.stopPropagation()}
             >
-              <Icon classIcon="bi-dash-lg" />
-            </button>
+              <button
+                type="button"
+                className="data-table-step-btn data-table-step-btn--minus"
+                disabled={
+                  isDisabled ||
+                  (column.min !== undefined && Number(value) <= column.min)
+                }
+                onClick={(e) => handleStep("minus", e)}
+              >
+                <Icon classIcon="bi-dash-lg" />
+              </button>
+              <input
+                type={column.type}
+                value={value}
+                step={column.step ?? "0.01"}
+                min={column.min}
+                max={column.max}
+                disabled={isDisabled}
+                style={{
+                  textAlign: column.align || "center",
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  width: column.width,
+                }}
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    if (column.onEnter) {
+                      column.onEnter(e.currentTarget.value, row);
+                    }
+                    if (column.enterToNextColumn) {
+                      e.preventDefault();
+                      onEnterNextColumn?.(idx, rowIndex);
+                    }
+                  }
+                }}
+                onChange={(e) => {
+                  if (column.onEdit) {
+                    column.onEdit(e.target.value, row);
+                  }
+                }}
+              />
+              <button
+                type="button"
+                className="data-table-step-btn data-table-step-btn--plus"
+                disabled={
+                  isDisabled ||
+                  (column.max !== undefined && Number(value) >= column.max)
+                }
+                onClick={(e) => handleStep("plus", e)}
+              >
+                <Icon classIcon="bi-plus-lg" />
+              </button>
+            </div>
+          ) : (
             <input
               type={column.type}
               value={value}
-              step={column.step ?? "0.01"}
-              min={column.min}
-              max={column.max}
-              disabled={isDisabled}
+              step="0.01"
               style={{
-                textAlign: column.align || "center",
+                textAlign: column.align || "left",
                 minWidth: column.minWidth,
                 maxWidth: column.maxWidth,
                 width: column.width,
@@ -151,54 +196,13 @@ export const DataTableRow = ({
                 }
               }}
             />
-            <button
-              type="button"
-              className="data-table-step-btn data-table-step-btn--plus"
-              disabled={
-                isDisabled ||
-                (column.max !== undefined && Number(value) >= column.max)
-              }
-              onClick={(e) => handleStep("plus", e)}
-            >
-              <Icon classIcon="bi-plus-lg" />
-            </button>
-          </div>
-        ) : (
-          <input
-            type={column.type}
-            value={value}
-            step="0.01"
-            style={{
-              textAlign: column.align || "left",
-              minWidth: column.minWidth,
-              maxWidth: column.maxWidth,
-              width: column.width,
-            }}
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                if (column.onEnter) {
-                  column.onEnter(e.currentTarget.value, row);
-                }
-                if (column.enterToNextColumn) {
-                  e.preventDefault();
-                  onEnterNextColumn?.(idx, rowIndex);
-                }
-              }
-            }}
-            onChange={(e) => {
-              if (column.onEdit) {
-                column.onEdit(e.target.value, row);
-              }
-            }}
-          />
-        )
+          )
         )
       ) : column.format ? (
         column.format(value)
       ) : (
         value
       )}
-    </td>
+    </Container>
   );
 };

package/src/expands/expands.css

@@ -39,10 +39,12 @@
       height: 300px;
       flex: 1;
       min-height: 200px;
+
       .expand-header {
-        background-color: #1d3758;
+        background-color: color-mix(in srgb, var(--primary-color), white 5%);
         color: #fff;
       }
+
       .expand-header-custom {
         .expand-header--children {
           display: flex;
@@ -65,6 +67,7 @@
       padding: 15px;
       color: #333;
       background-color: #fff;
+
       &.expand-header-custom {
         margin-bottom: 1rem;
       }
@@ -77,13 +80,15 @@
       .expand-header-title-left {
         margin-right: 0.5rem;
         text-transform: uppercase;
-        font-size: 14px;
+        font-size: 18px;
         font-weight: 500;
       }
     }
+
     & .expand-footer {
       padding: 15px;
     }
+
     & .expand-body {
       display: none;
       flex: 1;
@@ -94,4 +99,4 @@
       flex-direction: column;
     }
   }
-}
+}