kelt-ui-kit-react 1.8.5 → 1.9.0

package/dist/tabs/Tabs.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import "./tabs.css";
+export var Tabs = function (_a) {
+    var items = _a.items, _b = _a.defaultIndex, defaultIndex = _b === void 0 ? 0 : _b, index = _a.index, onChange = _a.onChange, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.tabClassName, tabClassName = _d === void 0 ? "" : _d, _e = _a.panelClassName, panelClassName = _e === void 0 ? "" : _e;
+    var isControlled = typeof index === "number";
+    var _f = useState(defaultIndex), active = _f[0], setActive = _f[1];
+    var current = isControlled ? index : active;
+    useEffect(function () {
+        // clamp
+        if (!isControlled && (defaultIndex < 0 || defaultIndex >= items.length)) {
+            setActive(0);
+        }
+    }, [defaultIndex, items.length, isControlled]);
+    var tabsRef = useRef([]);
+    var activate = function (next) {
+        var _a, _b;
+        if ((_a = items[next]) === null || _a === void 0 ? void 0 : _a.disabled)
+            return;
+        if (isControlled) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+        }
+        else {
+            setActive(next);
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+        }
+        (_b = tabsRef.current[next]) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    return (_jsxs("div", __assign({ className: "tabs-root ".concat(className) }, { children: [_jsx("div", __assign({ role: "tablist", className: "tabs-header" }, { children: items.map(function (t, i) { return (_jsx("button", __assign({ ref: function (r) { return (tabsRef.current[i] = r); }, role: "tab", id: "tab-".concat(t.key), "aria-selected": current === i, "aria-controls": "panel-".concat(t.key), tabIndex: current === i ? 0 : -1, disabled: t.disabled, onClick: function () { return activate(i); }, className: "".concat(tabClassName, " tab-button ").concat(current === i ? "tab-button--active" : "", " ").concat(t.disabled ? "tab-button--disabled" : "") }, { children: t.title }), "tab-".concat(t.key))); }) })), items.map(function (t, i) { return (_jsx("div", __assign({ role: "tabpanel", id: "panel-".concat(t.key), "aria-labelledby": "tab-".concat(t.key), hidden: current !== i, className: "".concat(panelClassName, " mt-3") }, { children: current === i && t.panel }), "panel-".concat(t.key))); })] })));
+};

package/dist/tabs/Tabs.view.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs } from "./Tabs";
+export var TabsView = function () {
+    var items = [
+        { key: "first", title: "Info", panel: _jsx("div", { children: "Contenu 1" }) },
+        { key: "second", title: "Détails", panel: _jsx("div", { children: "Contenu 2" }) },
+        {
+            key: "third",
+            title: "Paramètres",
+            panel: _jsx("div", { children: "Contenu 3" }),
+            disabled: false,
+        },
+    ];
+    return (_jsxs("div", { children: [_jsx("h2", __assign({ className: "text-xl mb-4" }, { children: "Exemple de Tabs" })), _jsx(Tabs, { items: items, defaultIndex: 0 })] }));
+};

package/dist/toaster/Toaster.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { Icon } from "../icon/Icon";
+import { useToasterStore } from "./store/useToasterStore";
+import "./toaster.css";
+export var Toaster = function () {
+    var _a = useToasterStore(), title = _a.title, description = _a.description, _b = _a.severity, severity = _b === void 0 ? "info" : _b, visible = _a.visible, children = _a.children, duration = _a.duration, hideToast = _a.hideToast, close = _a.close;
+    var onClose = useCallback(function () {
+        hideToast();
+    }, [hideToast]);
+    useEffect(function () {
+        if (!visible)
+            return;
+        var timer = setTimeout(function () {
+            hideToast();
+        }, duration);
+        return function () { return clearTimeout(timer); };
+    }, [visible, duration, hideToast]);
+    if (!visible)
+        return null;
+    var toasterRoot = document.getElementById("toaster-root");
+    if (!toasterRoot)
+        return null;
+    return ReactDOM.createPortal(_jsxs("div", __assign({ className: "toaster toaster-".concat(severity) }, { children: [close && (_jsx("div", __assign({ className: "toaster--close", onClick: onClose }, { children: _jsx(Icon, { classIcon: "bi-x" }) }))), _jsxs("div", { children: [severity === "info" && _jsx(Icon, { classIcon: "bi-info-circle" }), severity === "success" && _jsx(Icon, { classIcon: "bi-check-circle" }), severity === "error" && _jsx(Icon, { classIcon: "bi-x-circle" }), severity === "warning" && _jsx(Icon, { classIcon: "bi-exclamation-triangle" })] }), _jsxs("div", { children: [_jsx("div", __assign({ className: "title title-".concat(severity) }, { children: title })), description && _jsx("div", __assign({ className: "subtitle" }, { children: description })), children] })] })), toasterRoot);
+};

package/dist/toaster/Toaster.view.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Button } from "../button/Button";
+import { useToasterStore } from "./store/useToasterStore";
+export var ToasterView = function () {
+    var showToast = useToasterStore().showToast;
+    var handleClickToast = useCallback(function () {
+        showToast("This is a toast message", {
+            description: "This is a description for the toast message.",
+            severity: "warning",
+            duration: 10000,
+            children: _jsx("div", { children: "Additional content can go here." }),
+        });
+    }, [showToast]);
+    return (_jsx("div", { children: _jsx(Button, { title: "Show Toast", onClick: handleClickToast, className: "btn btn-primary" }) }));
+};

package/dist/toaster/store/useToasterStore.js

@@ -0,0 +1,22 @@
+import { create } from "zustand";
+export var useToasterStore = create(function (set) { return ({
+    title: "",
+    description: "",
+    severity: "info",
+    visible: false,
+    duration: 2500,
+    close: true,
+    children: null,
+    showToast: function (title, options) {
+        if (options === void 0) { options = {}; }
+        return set(function () { return ({
+            title: title,
+            description: options.description,
+            severity: options.severity || "info",
+            duration: options.duration || 2500,
+            visible: true,
+            children: options.children || null,
+        }); });
+    },
+    hideToast: function () { return set(function () { return ({ visible: false }); }); },
+}); });

package/package.json

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

package/src/dataTable/DataTable.tsx

@@ -55,15 +55,35 @@ 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 isInteractiveClick = useCallback((target: EventTarget | null) => {
+    const element =
+      target instanceof Element
+        ? target
+        : target instanceof Node
+          ? target.parentElement
+          : null;
+
+    if (!element) {
+      return false;
+    }
+
+    return Boolean(
+      element.closest(
+        "input,button,a,select,textarea,label,option,[role='button'],[role='checkbox'],[role='option'],[contenteditable='true'],[data-stop-row-click='true']",
+      ),
+    );
+  }, []);
+
   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
+        getRowId ? getRowId(d) : ((d as any).id ?? d),
       );
 
       if (limitSelect && allIds.length > limitSelect) {
@@ -74,8 +94,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]);
@@ -83,16 +103,29 @@ export function DataTable<T>(props: DataTableProps<T>) {
   const handleClickRow = useCallback(
     (e: React.MouseEvent, row: T) => {
       e.stopPropagation();
+
+      if (isInteractiveClick(e.target)) {
+        return;
+      }
+
+      const selectedText =
+        typeof window !== "undefined"
+          ? window.getSelection?.()?.toString().trim()
+          : "";
+      if (selectedText) {
+        return;
+      }
+
       if (onRowClick) {
         onRowClick?.(row);
       }
     },
-    [onRowClick]
+    [isInteractiveClick, 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 +140,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 +159,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
         root: null,
         rootMargin: "0px",
         threshold: 1.0,
-      }
+      },
     );
 
     if (loaderRef.current) {
@@ -198,9 +231,17 @@ export function DataTable<T>(props: DataTableProps<T>) {
           )}
           {!loading &&
             data.map((row, rowIndex) => (
-              <tr key={rowIndex} onClick={(e) => handleClickRow?.(e, row)}>
+              <tr
+                key={rowIndex}
+                className={rowIndex % 2 === 0 ? "even" : "odd"}
+                onClick={(e) => handleClickRow?.(e, row)}
+              >
                 {onSelectionChange && (
-                  <td className="select-cell" style={{ textAlign: "center" }}>
+                  <td
+                    className="select-cell"
+                    style={{ textAlign: "center" }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
                     <Input
                       id={`select-row-${rowIndex}`}
                       name={`select-row-${rowIndex}`}
@@ -209,11 +250,11 @@ 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
                     />
@@ -223,7 +264,7 @@ export function DataTable<T>(props: DataTableProps<T>) {
                   <DataTableRow column={column} idx={idx} row={row} key={idx} />
                 ))}
                 {actions.length > 0 && (
-                  <td align="right">
+                  <td align="right" onClick={(e) => e.stopPropagation()}>
                     <div className="d-flex align-items-center justify-content-end">
                       {actions.map((action, index) => (
                         <DataTableAction

package/src/dataTable/dataTable.css

@@ -1,14 +1,18 @@
 .data-table-container {
   overflow: auto;
+
   .data-table {
     width: 100%;
-    border-spacing: 5px;
+    border-spacing: 0;
     font-size: 14px;
     color: #333;
+
     .select-cell {
       min-width: 40px !important;
+
       .input-container {
         min-width: 20px;
+
         input {
           min-width: 20px;
           width: 20px;
@@ -16,15 +20,35 @@
         }
       }
     }
+
     thead {
       margin-bottom: 1rem;
       position: sticky;
       top: 0;
       background-color: #fff;
+
       th {
         color: #bdbaba;
         min-width: 100px;
       }
     }
+
+    tbody {
+      td {
+        padding: 0.5rem;
+
+        &:not(:first-child) {
+          padding-left: 0 !important;
+        }
+      }
+
+      tr.even {
+        background-color: #ffffff;
+      }
+
+      tr.odd {
+        background-color: #f5f5f5;
+      }
+    }
   }
-}
+}

package/src/dataTable/dataTable.interface.ts

@@ -16,7 +16,10 @@ export interface dataTableColumnsInterface<T> {
   onEdit?: (value: any, row: T) => void;
   onDisable?: (row: T) => boolean;
   onRowStyle?: (row: T) => React.CSSProperties;
-  type: HTMLInputTypeAttribute | "select";
+  type: HTMLInputTypeAttribute | "select" | "image";
+  imageAlt?: (row: T) => string;
+  imageStyle?: React.CSSProperties;
+  imageSrc?: (row: T) => string;
 }
 export interface dataTableActionsInterface<T> {
   id: string;

package/src/dataTable/dataTableRow/DataTableRow.tsx

@@ -1,3 +1,4 @@
+import { Icon } from "../..";
 import { Select } from "../../select/Select";
 import { dataTableColumnsInterface } from "../dataTable.interface";
 
@@ -10,6 +11,7 @@ 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) : {};
   const isDisabled = column.onDisable?.(row) ?? false;
+
   return (
     <td
       className={`${isDisabled ? "disabled" : ""}`}
@@ -22,23 +24,46 @@ export const DataTableRow = ({ column, idx, row }: DataTableRowProps) => {
       }}
       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);
-              }
-            }}
+      {column.type === "image" ? (
+        value ? (
+          <img
+            src={column.imageSrc ? column.imageSrc(row) : ""}
+            alt={column.imageAlt ? column.imageAlt(row) : ""}
+            style={column.imageStyle}
           />
+        ) : (
+          <Icon classIcon="bi-image" />
+        )
+      ) : column.editable ? (
+        column.type === "select" ? (
+          <div onClick={(e) => e.stopPropagation()}>
+            <Select
+              style={{
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+                width: column.width,
+              }}
+              options={column.options ?? []}
+              value={value}
+              onChange={(e) => {
+                if (column.onEdit) {
+                  column.onEdit(e, row);
+                }
+              }}
+            />
+          </div>
         ) : (
           <input
             type={column.type}
             value={value}
             step="0.01"
-            style={{ textAlign: column.align || "left" }}
+            style={{
+              textAlign: column.align || "left",
+              minWidth: column.minWidth,
+              maxWidth: column.maxWidth,
+              width: column.width,
+            }}
+            onClick={(e) => e.stopPropagation()}
             onChange={(e) => {
               if (column.onEdit) {
                 column.onEdit(e.target.value, row);

package/src/select/Select.tsx

@@ -8,6 +8,7 @@ export interface SelectProps {
   label?: string;
   title?: string;
   disabled?: boolean;
+  style?: React.CSSProperties;
   name?: string;
   defaultValue?: string | string[];
   multiple?: boolean;
@@ -26,6 +27,7 @@ export const Select = ({
   options,
   className,
   disabled,
+  style,
   multiple = false,
   required = false,
   defaultValue,
@@ -42,7 +44,7 @@ export const Select = ({
     if (multiple) {
       selectedValue = Array.from(
         event.target.selectedOptions,
-        (opt) => opt.value
+        (opt) => opt.value,
       );
       if (onChangeMultiple) {
         onChangeMultiple(selectedValue as string[]);
@@ -70,6 +72,7 @@ export const Select = ({
         defaultValue=""
         required={required}
         name={name}
+        style={style}
         disabled={disabled}
         id={`select-${id}`}
         className="select-container-select"

package/vite.config.ts.timestamp-1787675603363-8ddae73d076bd.mjs

@@ -0,0 +1,28 @@
+// vite.config.ts
+import { defineConfig } from "file:///C:/Users/alex/Documents/workspace/ui-kit-react/node_modules/vite/dist/node/index.js";
+import checker from "file:///C:/Users/alex/Documents/workspace/ui-kit-react/node_modules/vite-plugin-checker/dist/esm/main.js";
+import dts from "file:///C:/Users/alex/Documents/workspace/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,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxhbGV4XFxcXERvY3VtZW50c1xcXFx3b3Jrc3BhY2VcXFxcdWkta2l0LXJlYWN0XCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxhbGV4XFxcXERvY3VtZW50c1xcXFx3b3Jrc3BhY2VcXFxcdWkta2l0LXJlYWN0XFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9DOi9Vc2Vycy9hbGV4L0RvY3VtZW50cy93b3Jrc3BhY2UvdWkta2l0LXJlYWN0L3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSBcInZpdGVcIjtcclxuaW1wb3J0IGNoZWNrZXIgZnJvbSBcInZpdGUtcGx1Z2luLWNoZWNrZXJcIjtcclxuaW1wb3J0IGR0cyBmcm9tIFwidml0ZS1wbHVnaW4tZHRzXCI7XHJcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XHJcbiAgcGx1Z2luczogW2R0cygpLCBjaGVja2VyKHsgdHlwZXNjcmlwdDogdHJ1ZSB9KV0sXHJcbiAgc2VydmVyOiB7XHJcbiAgICBwb3J0OiAyNTUyLCAvLyBSZW1wbGFjZSAzMDAwIHBhciBsZSBwb3J0IHNvdWhhaXRcdTAwRTlcclxuICB9LFxyXG4gIGJ1aWxkOiB7XHJcbiAgICBsaWI6IHtcclxuICAgICAgZW50cnk6IFwiLi9zcmMvaW5kZXgudHNcIiwgLy8gUmVtcGxhY2VyIHBhciBsJ2VudHJcdTAwRTllIGNvcnJlY3RlXHJcbiAgICAgIGZvcm1hdHM6IFtcImVzXCJdLCAvLyBHXHUwMEU5blx1MDBFOHJlIHVuIG1vZHVsZSBFU1xyXG4gICAgICBuYW1lOiBcImtlbHQtdWkta2l0LXJlYWN0XCIsXHJcbiAgICAgIGZpbGVOYW1lOiBcImluZGV4XCIsXHJcbiAgICB9LFxyXG4gICAgcm9sbHVwT3B0aW9uczoge1xyXG4gICAgICBleHRlcm5hbDogW1wicmVhY3RcIiwgXCJyZWFjdC1kb21cIl0sXHJcbiAgICB9LFxyXG4gIH0sXHJcbn0pO1xyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXdVLFNBQVMsb0JBQW9CO0FBQ3JXLE9BQU8sYUFBYTtBQUNwQixPQUFPLFNBQVM7QUFDaEIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLElBQUksR0FBRyxRQUFRLEVBQUUsWUFBWSxLQUFLLENBQUMsQ0FBQztBQUFBLEVBQzlDLFFBQVE7QUFBQSxJQUNOLE1BQU07QUFBQTtBQUFBLEVBQ1I7QUFBQSxFQUNBLE9BQU87QUFBQSxJQUNMLEtBQUs7QUFBQSxNQUNILE9BQU87QUFBQTtBQUFBLE1BQ1AsU0FBUyxDQUFDLElBQUk7QUFBQTtBQUFBLE1BQ2QsTUFBTTtBQUFBLE1BQ04sVUFBVTtBQUFBLElBQ1o7QUFBQSxJQUNBLGVBQWU7QUFBQSxNQUNiLFVBQVUsQ0FBQyxTQUFTLFdBQVc7QUFBQSxJQUNqQztBQUFBLEVBQ0Y7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=