cortex-react-ui 0.2.31 → 0.2.33

package/lib/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { CSSProperties } from 'react';
 import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
 import { WebcamProps } from 'react-webcam';
@@ -79,6 +79,67 @@ interface ButtonProps {
 }
 declare const Button: React__default.FC<ButtonProps>;
 
+interface ChipProps {
+    label: string;
+    chipColor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+    chipRadius?: 'low' | 'medium' | 'hight';
+    size?: 'small' | 'medium' | 'large';
+    deletable: boolean;
+    onDelete?: () => void;
+    chipStyle?: React__default.CSSProperties;
+    icon?: React__default.ReactElement;
+}
+declare const Chip: React__default.FC<ChipProps>;
+
+interface CellSegment {
+    value: React.ReactNode;
+    span: number;
+}
+interface ColumnBase<T> {
+    key: string;
+    header: React.ReactNode;
+    icon?: React.ReactElement;
+    width?: number | string;
+    align?: 'left' | 'center' | 'right';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    whiteSpace?: 'normal' | 'nowrap' | 'pre-wrap' | 'break-spaces';
+    getSegments?: (row: T) => CellSegment[];
+}
+type ColumnDef<T> = ColumnBase<T> & {
+    columns?: readonly ColumnBase<T>[];
+};
+
+type DataGridProps<T> = {
+    rows: readonly T[];
+    getRowId: (row: T) => string;
+    columns: readonly ColumnDef<T>[];
+    loading?: boolean;
+    dataEmptyLabel?: React__default.ReactNode;
+    linePerPageLabel?: string;
+    tableContainer?: React__default.CSSProperties;
+    tableStyle?: React__default.CSSProperties;
+    headerCellStyle?: React__default.CSSProperties;
+    cellStyle?: React__default.CSSProperties;
+    footerCellStyle?: React__default.CSSProperties;
+    contextMenuStyle?: React__default.CSSProperties;
+    primaryRowColor?: string;
+    secondaryRowColor?: string;
+    hoverRowColor?: string;
+    selectedRowColor?: string;
+    defaultRowsPerPage?: number;
+    rowsPerPageOptions?: number[];
+    hoverableRows?: boolean;
+    selectableRows?: boolean;
+    onSelectedRowChange?: (row: T | null) => void;
+    onClickRow?: (row: T) => void;
+    onContextMenuRow?: (row: T) => void;
+    renderContextMenu?: (row: T, close: () => void) => React__default.ReactNode;
+    conditionnalRowStyle?: (row: T) => React__default.CSSProperties | undefined;
+    conditionnalColumnStyle?: (column: ColumnBase<T>, row: T) => React__default.CSSProperties | undefined;
+    conditionnalColumnHeaderStyle?: (column: ColumnBase<T>) => React__default.CSSProperties | undefined;
+};
+declare function DataGrid<T>(props: DataGridProps<T>): React__default.JSX.Element;
+
 type TScanConfirmDialogLabels = {
     title?: string;
     message?: string;
@@ -415,12 +476,12 @@ declare const CrossIcon: React__default.FC<Props>;
  * En React 18, ref est passé séparément via forwardRef
  */
 type ForwardRefProps<T, P = object> = P & {
-    ref?: React.Ref<T>;
+    ref?: React$1.Ref<T>;
 };
 /**
  * Type pour la fonction de rendu compatible React 18/19
  */
-type ForwardRefRenderFunction<T, P> = (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null;
+type ForwardRefRenderFunction<T, P> = (props: P, ref: React$1.ForwardedRef<T>) => React$1.ReactElement | null;
 /**
  * Composant wrapper compatible React 18 et React 19
  *
@@ -441,7 +502,7 @@ type ForwardRefRenderFunction<T, P> = (props: P, ref: React.ForwardedRef<T>) =>
  * );
  * ```
  */
-declare function forwardRef<T, P>(render: ForwardRefRenderFunction<T, P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+declare function forwardRef<T, P>(render: ForwardRefRenderFunction<T, P>): React$1.ForwardRefExoticComponent<React$1.PropsWithoutRef<P> & React$1.RefAttributes<T>>;
 
-export { AuthDownloadLink, BarLoader, Button, Camera, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ConfirmDialog, ContextMenu, CrossIcon, Dialog, DialogActions, DialogContent, DialogFooter, DialogHeader, DialogTitle, Divider, DomContainer, ErrorDialog, Map, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Scanner, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog, forwardRef };
+export { AuthDownloadLink, BarLoader, Button, Camera, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Chip, ConfirmDialog, ContextMenu, CrossIcon, DataGrid, Dialog, DialogActions, DialogContent, DialogFooter, DialogHeader, DialogTitle, Divider, DomContainer, ErrorDialog, Map, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Scanner, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog, forwardRef };
 export type { ForwardRefProps, ForwardRefRenderFunction };

package/lib/styles/Chip/index.scss

@@ -0,0 +1,131 @@
+@use "../global.scss";
+
+@mixin chip($props: null, $options: null) {
+
+    $internal-options: global.$default-options;
+
+    $internal-props: ();
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .chip-container {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 2;
+        white-space: nowrap;
+        box-sizing: border-box;
+        background-color: global.$color-white;
+        color: global.$color-black;
+        border: 1px solid global.$color-black;
+        padding: 10px;
+        margin: 1px 2px 1px 2px;
+    };
+
+    .chip-container-radius-low {
+        border-radius: 5px;
+    }
+
+    .chip-container-radius-medium {
+        border-radius: 10px;
+    }
+
+    .chip-container-radius-hight {
+        border-radius: 25px;
+    }
+
+    .chip-icon-wrapper {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 0px;
+    };
+
+    .chip-label { 
+        display: inline-block;
+    };
+
+    .chip-delete-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        border-radius: 999px;
+        line-height: 1px;
+    };
+
+    .chip-small-font {
+        font-size: 12px;
+        padding-right: 6px;
+        padding-left: 6px;
+        gap: 6px;
+    }
+
+    .chip-small-icon {
+        font-size: 12px;
+        padding-right: 6px;
+        padding-left: 6px;
+        width: 16px;
+        height: 16px;
+    }
+
+    .chip-medium-font {
+        font-size: 14px;
+        padding-right: 8px;
+        padding-left: 8px;
+        gap: 8px;
+    }
+
+    .chip-medium-icon {
+        font-size: 14px;
+        padding-right: 8px;
+        padding-left: 8px;
+        width: 18px;
+        height: 18px;
+    }
+
+    .chip-large-font {
+        font-size: 16px;
+        padding-right: 10px;
+        padding-left: 10px;
+        gap: 10px;
+    }
+
+    .chip-large-icon {
+        font-size: 16px;
+        padding-right: 10px;
+        padding-left: 10px;
+        width: 20px;
+        height: 20px;
+    }
+
+    .chip-color-primary {
+        color: global.$color-black;
+        background-color: global.$color-white;
+        border-color: global.$color-black;
+    }
+
+    .chip-color-secondary {
+        color: global.$color-grey-darker;
+        background-color: global.$color-grey-lighter;
+        border-color: global.$color-grey-darker;
+    }
+
+    .chip-color-success {
+        color: global.$color-green-darker;
+        background-color: global.$color-green-lighter;
+        border-color: global.$color-green-darker;
+    }
+
+    .chip-color-danger {
+        color: global.$color-red-darker;
+        background-color: global.$color-red-lighter;
+        border-color: global.$color-red-darker;
+    }
+
+}
+

package/lib/styles/DataGrid/index.scss

@@ -0,0 +1,94 @@
+@use "../global.scss";
+
+@mixin datagrid($props: null, $options: null) {
+
+    $internal-options: global.$default-options;
+
+    $internal-props: ();
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+    
+    .base-table-container {
+        max-height: 750px;
+        overflow: auto;
+        border: 1px solid global.$color-white;
+        position: relative;
+    };
+
+    .base-table {
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+        min-width: 900px;
+    };
+
+    .base-thead {
+        position: sticky;
+        top: 0;
+    };
+
+    .base-th {
+        border: 1px solid #eee;
+        padding: 10px;
+        background-color: #fafafa;
+        vertical-align: middle;
+        white-space: nowrap;
+        font-weight: 600;
+        position: sticky;
+        top: 0;
+        z-index: 3;
+    };
+
+    .base-th span {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .base-td {
+        border: 1px solid #eee;
+        padding: 10px;
+        vertical-align: middle;
+        white-space: normal;
+        text-align: 'center',
+    };
+
+    .base-foot-cell {
+        position: sticky;
+        bottom: 0;
+        z-index: 2;
+        background: #fff;
+        padding: 10px;
+        border-top: 1px solid #eee;
+    };
+
+    .base-foot-cell div {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 16px;
+        flex-wrap: wrap;         
+    }
+
+    .base-foot-cell div div {
+        display: flex;
+        align-items: center;
+        gap: 8px;        
+    }
+
+    .base-context-menu {
+        position: fixed;
+        background: #fff;
+        border: 1px solid #d9d9d9;
+        border-radius: 8px;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+        padding: 8px;
+        min-width: 180px;
+        z-index: 9999;
+    };
+
+    .text-align-center {
+        text-align: center;
+    }
+}

package/lib/styles/index.scss

@@ -10,6 +10,8 @@
 @use "Dialog";
 @use "Scanner";
 @use "Button";
+@use "Chip";
+@use "DataGrid";
 @use "ToggleButton";
 @use "Selected";
 @use "BarLoader";
@@ -26,6 +28,8 @@
 @include Scanner.scanner();
 @include Dialog.dialog();
 @include Button.button();
+@include DataGrid.datagrid();
+@include Chip.chip();
 @include ToggleButton.toggleButton();
 @include Selected.selected();
 @include BarLoader.barLoader();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortex-react-ui",
-  "version": "0.2.31",
+  "version": "0.2.33",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",