@addev-be/ui 0.2.9 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/data/DataGrid/{FilterValuesScroller.tsx → DataGridFilterMenu/FilterValuesScroller.tsx}

@@ -8,25 +8,23 @@ import {
   DataGridFilterGroup,
   DataGridFilterRenderer,
   DataGridFilterValue,
-} from './types';
-import { debounce, join } from 'lodash';
-import { defaultRendererAndFormatter, getCheckboxes } from './helpers';
+} from '../types';
+import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { useElementSize } from '../../../hooks';
+import { debounce } from 'lodash';
+import { useElementSize } from '../../../../hooks';
 
 const CheckboxTemplate = ({
   selectedValues,
   value,
   index,
-  className,
   style,
   onToggle,
 }: {
   selectedValues: DataGridFilterValue[];
   value: DataGridFilterCheckbox;
   index: number;
-  className?: string;
   style?: React.CSSProperties;
   onToggle?: (values: DataGridFilterValue[]) => void;
 }) => {
@@ -37,28 +35,12 @@ const CheckboxTemplate = ({
   return (
     <styles.FilterValueContainer
       key={index}
-      className={join(
-        [
-          // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
-          className,
-        ],
-        ' '
-      )}
       style={{ ...style, paddingLeft: `${value.level}rem` }}
       title={value.title}
       onClick={() => onToggle?.(value.values)}
     >
-      <input
-        type="checkbox"
-        checked={checked}
-        readOnly
-        // className="inline-block mr-2"
-      />
-      <span
-      // className="mr-2 truncate"
-      >
-        {value.displayValue || '(Vides)'}
-      </span>
+      <input type="checkbox" checked={checked} readOnly />
+      <span>{value.displayValue || '(Vides)'}</span>
     </styles.FilterValueContainer>
   );
 };
@@ -121,10 +103,9 @@ export const FilterValuesScroller = ({
       onScroll={onScroll}
       $rowHeight={rowHeight}
     >
-      <div style={{ height: `${values.length * rowHeight}px` }}>
+      <div style={{ height: `${checkboxes.length * rowHeight}px` }}>
         {visibleCheckboxes.map((value, index) => (
           <CheckboxTemplate
-            className="checkbox"
             style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
             key={index}
             selectedValues={selectedValues}

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -42,7 +42,7 @@ import {
 } from 'react';
 
 import { ContextMenu } from '../../../ui/ContextMenu';
-import { FilterValuesScroller } from '../FilterValuesScroller';
+import { FilterValuesScroller } from './FilterValuesScroller';
 import { Input } from '../../../forms';
 import { useFilterModal } from './hooks';
 

package/src/components/data/DataGrid/DataGridFilterMenu/styles.ts

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+export const DEFAULT_FILTER_ROW_HEIGHT = 24;
+
 export const InputContainer = styled.div.attrs({
   className: 'InputContainer',
 })`
@@ -47,3 +49,48 @@ export const Separator = styled.div.attrs({
   border-top: 1px solid var(--color-neutral-200);
   margin: var(--space-1) 0;
 `;
+
+export const FilterValueContainer = styled.div.attrs({
+  className: 'FilterValueContainer',
+})`
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--color-neutral-50);
+  }
+`;
+
+export const FilterValuesScrollerContainer = styled.div.attrs({
+  className: 'FilterValuesScrollerContainer',
+})<{
+  $rowHeight?: number;
+}>`
+  display: block;
+  font-size: var(--text-base);
+  background-color: var(--color-neutral-0);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 100%;
+
+  & > div {
+    position: relative;
+  }
+
+  & ${FilterValueContainer} {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: ${({ $rowHeight = DEFAULT_FILTER_ROW_HEIGHT }) =>
+      `${$rowHeight}px`};
+
+    input[type='checkbox'] {
+      margin-right: var(--space-1);
+    }
+  }
+`;

package/src/components/data/DataGrid/helpers/columns.tsx

@@ -4,6 +4,7 @@ import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
 import {
   formatMoney,
   formatNumber,
+  formatNumberInvariant,
   formatPercentage,
 } from '../../../../helpers/numbers';
 import { numberFilter, textFilter } from './filters';
@@ -15,7 +16,7 @@ export const isColumnVisible = <R,>(
   obj: DataGridColumn<R> | DataGridSettings
 ): boolean => obj?.order !== -1;
 
-const buildExcelFormat = (decimals = 2, suffix = '') =>
+export const buildExcelFormat = (decimals = 2, suffix = '') =>
   `#0${decimals > 0 ? `.${repeat('0', decimals)}` : ''}${suffix}`;
 
 export const textColumn = <R extends Record<string, any>>(
@@ -125,7 +126,8 @@ export const numberColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => '#',
+    excelFormatter: () => buildExcelFormat(decimals),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     footer: {
@@ -170,6 +172,7 @@ export const moneyColumn = <R extends Record<string, any>>(
     name: title,
     render: (row) => formatMoney(row[key], decimals) ?? '',
     excelFormatter: () => buildExcelFormat(decimals, ' €'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {
@@ -213,7 +216,8 @@ export const percentageColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals),
+    excelFormatter: () => buildExcelFormat(decimals, '%'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: numberFilter(key),

package/src/components/data/DataGrid/helpers/filters.ts

@@ -156,7 +156,7 @@ export const groupDatesByYearAndMonth = (dates: any[]) =>
     if (!acc[year]) {
       acc[year] = {};
     }
-    const yearAndMonth = moment(date).format(`YYYY-MM`);
+    const yearAndMonth = moment(date).format(`MM/YYYY`);
     if (!acc[year][yearAndMonth]) {
       acc[year][yearAndMonth] = [];
     }

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -194,7 +194,7 @@ export const useDataGrid = <R,>(
           typeof column.footer[footerKey] === 'function' &&
           column.footer[footerKey] !== null
         ) {
-          acc[columnKey] = column.footer[footerKey];
+          acc[columnKey] = column.footer[footerKey] as any;
         }
         return acc;
       }, {} as Record<string, DataGridFooterFunction<R>>),

package/src/components/data/DataGrid/hooks/useDataGridCopy.ts

@@ -67,6 +67,11 @@ export const useDataGridCopy = <R>({
             ? "mso-number-format: '" + col.excelFormatter(col) + "';"
             : ''
         }
+        ${
+          col.excelBackgroundColor
+            ? "background-color: '" + col.excelBackgroundColor(value) + "';"
+            : ''
+        }
         white-space: nowrap;
       ">
         ${generateCellText(col, value)}

package/src/components/data/DataGrid/styles.ts

@@ -7,7 +7,6 @@ export const TOOLBAR_HEIGHT = 40;
 export const DEFAULT_HEADER_ROW_HEIGHT = 40;
 export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
 export const DEFAULT_ROW_HEIGHT = 32;
-export const DEFAULT_FILTER_ROW_HEIGHT = 24;
 
 export const TopPaddingRow = styled.div``;
 export const BottomPaddingRow = styled.div``;
@@ -322,46 +321,3 @@ export const ResizeBackdrop = styled.div.attrs({
   cursor: col-resize;
 `;
 ResizeBackdrop.displayName = 'ResizeBackdrop';
-
-export const FilterValuesScrollerContainer = styled.div.attrs({
-  className: 'FilterValuesScrollerContainer',
-})<{
-  $rowHeight?: number;
-}>`
-  display: block;
-  font-size: var(--text-base);
-  background-color: var(--color-neutral-0);
-  overflow-y: scroll;
-  overflow-x: hidden;
-  height: 100%;
-
-  & > div {
-    position: relative;
-  }
-
-  & .checkbox {
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: ${({ $rowHeight = DEFAULT_FILTER_ROW_HEIGHT }) =>
-      `${$rowHeight}px`};
-
-    input[type='checkbox'] {
-      margin-right: var(--space-1);
-    }
-  }
-`;
-
-export const FilterValueContainer = styled.div.attrs({
-  className: 'FilterValueContainer',
-})`
-  position: absolute;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    background-color: var(--color-neutral-50);
-  }
-`;

package/src/components/data/DataGrid/types.ts

@@ -38,6 +38,7 @@ export type DataGridColumn<R> = {
   component?: DataGridCellFC;
   editable?: boolean;
   excelFormatter?: (value: any) => string;
+  excelBackgroundColor?: (value: any) => string;
   excelValue?: (value: any) => string;
   filter?: DataGridFilter;
   footer?:

package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx

@@ -1,12 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
+import {
+  buildExcelFormat,
+  numberFilter,
+  textFilter,
+} from '../../DataGrid/helpers';
 import {
   formatMoney,
   formatNumber,
+  formatNumberInvariant,
   formatPercentage,
 } from '../../../../helpers/numbers';
-import { numberFilter, textFilter } from '../../DataGrid/helpers';
 
 import { formatDate } from '../../../../helpers/dates';
 
@@ -103,7 +108,14 @@ export const sqlDateColumn = <R extends Record<string, any>>(
     render: (row) => formatDate(row[key]),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
-    filter: { ...textFilter(key), getter: (value) => value[key] ?? '' },
+    excelFormatter: () => 'dd/mm/yyyy',
+    excelValue: (value) => formatDate(value, 'YYYY-MM-DD'),
+    filter: {
+      ...textFilter(key),
+      getter: (value) => value[key] ?? '',
+      formatter: (value) => formatDate(value),
+      renderer: (value) => formatDate(value),
+    },
     footer: (rows) => `${rows[0][key]} éléments`,
     ...options,
   },
@@ -134,7 +146,8 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => '#',
+    excelFormatter: () => buildExcelFormat(decimals),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {
@@ -163,7 +176,8 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
     name: title,
     type: 'number',
     render: (row) => formatMoney(row[key], decimals) ?? '',
-    excelFormatter: () => '#0.00',
+    excelFormatter: () => buildExcelFormat(decimals, ' €'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {
@@ -191,7 +205,8 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
   [key]: {
     name: title,
     render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => '#0.00',
+    excelFormatter: () => buildExcelFormat(decimals, '%'),
+    excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {
@@ -238,6 +253,8 @@ export const sqlColorColumn = <R extends Record<string, any>>(
         &nbsp;
       </div>
     ),
+    excelValue: () => '',
+    excelBackgroundColor: (value) => value,
     getter: (row) => row[key] ?? '',
     sortGetter: (row) => row[key] ?? '',
     filter: {

package/src/helpers/numbers.ts

@@ -18,3 +18,9 @@ export const formatNumber = (number: number, decimals = 2) =>
     minimumFractionDigits: decimals,
     maximumFractionDigits: decimals,
   }).format(number);
+
+export const formatNumberInvariant = (number: number, decimals = 2) =>
+  new Intl.NumberFormat('es-US', {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(number);