@addev-be/ui 0.2.13 → 0.2.15

package/src/components/data/DataGrid/DataGridHeaderCell.tsx

@@ -1,132 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
-
-import { ChevronDownIcon } from '../../../Icons';
-import { DataGridFilterMenu } from './DataGridFilterMenu';
-import { DataGridHeaderCellProps } from './types';
-import { Dropdown } from '../../layout';
-import { IconButton } from '../../forms/IconButton';
-import { useDataGridContext } from './hooks';
-import { useUi } from '../../../providers';
-
-export const DataGridHeaderCell = <R,>({
-  columnKey,
-  columnIndex,
-  column,
-  context,
-}: DataGridHeaderCellProps<R>) => {
-  const { getElementScreenRect } = useUi();
-  const contextValue = useDataGridContext(context);
-  const {
-    filters = {},
-    setColumnWidth,
-    saveSettings,
-    headerColor,
-  } = contextValue;
-  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
-
-  /** RESIZING */
-
-  const [isResizing, setIsResizing] = useState(false);
-  const resizingOffset = useRef(0);
-
-  const onResizeStart = useCallback(
-    (e: MouseEvent) => {
-      resizingOffset.current = e.screenX - (column.width || 150);
-      setIsResizing(true);
-    },
-    [column.width]
-  );
-
-  const onResizeMove = useCallback(
-    (e: MouseEvent) => {
-      if (isResizing) {
-        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
-        setColumnWidth(columnKey, newWidth);
-      }
-    },
-    [columnKey, isResizing, setColumnWidth]
-  );
-
-  const onResizeEnd = useCallback(() => {
-    setIsResizing(false);
-    saveSettings();
-  }, [saveSettings]);
-
-  const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
-  const filterDropdown = useMemo(() => {
-    if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
-      return null;
-    }
-    const filterButtonRect = getElementScreenRect(filterButtonRef.current);
-    filterButtonRect.x += window.scrollX;
-    filterButtonRect.y += window.scrollY;
-    return (
-      <Dropdown
-        $sourceRect={filterButtonRect}
-        onClose={() => setIsFilterDropdownVisible(false)}
-        $width={320}
-        $height={[250, 400]}
-        $autoPositionX
-      >
-        <DataGridFilterMenu
-          columnKey={columnKey}
-          columnIndex={columnIndex}
-          context={context}
-          onClose={() => setIsFilterDropdownVisible(false)}
-        />
-      </Dropdown>
-    );
-  }, [
-    columnIndex,
-    columnKey,
-    context,
-    getElementScreenRect,
-    isFilterDropdownVisible,
-  ]);
-
-  const onFilterButtonClicked = useCallback(() => {
-    setIsFilterDropdownVisible(true);
-  }, []);
-
-  const hasFilters = filters[columnKey]?.values.length > 0;
-
-  return (
-    <styles.DataGridHeaderCellContainer
-      $headerColor={headerColor}
-      $isResizing={isResizing}
-    >
-      {filterDropdown}
-      <span>{column.name}</span>
-      {!!column.filter && (
-        <IconButton
-          size="small"
-          className={hasFilters ? 'danger' : ''}
-          ref={filterButtonRef}
-          icon={ChevronDownIcon}
-          color={hasFilters ? 'danger' : headerColor}
-          onClick={onFilterButtonClicked}
-        />
-      )}
-      {column.resizable !== false && (
-        <>
-          <styles.DataGridResizeGrip
-            className={isResizing ? 'active' : ''}
-            $headerColor={headerColor}
-            onMouseDown={onResizeStart}
-          />
-          {isResizing && (
-            <styles.ResizeBackdrop
-              onMouseMove={onResizeMove}
-              onMouseUp={onResizeEnd}
-            />
-          )}
-        </>
-      )}
-    </styles.DataGridHeaderCellContainer>
-  );
-};

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

@@ -1,136 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import {
-  DataGridFilter,
-  DataGridFilterOperator,
-  DataGridFilterType,
-} from '../types';
-import { Input, Select } from '../../../forms';
-import { useEffect, useRef } from 'react';
-
-// import { Select } from '../../Select';
-// import clx from 'classnames';
-
-const filterOperators: {
-  [K in DataGridFilterType]: Partial<{
-    [K2 in DataGridFilterOperator<K>]: string;
-  }>;
-} = {
-  date: {
-    after: 'Après',
-    before: 'Avant',
-    equals: 'Égal à',
-    notEquals: 'Différent de',
-    inRange: "Dans l'intervalle",
-  },
-  number: {
-    equals: 'Égal à',
-    notEquals: 'Différent de',
-    greaterThan: 'Supérieur à',
-    greaterThanOrEqual: 'Supérieur ou égal à',
-    lessThan: 'Inférieur à',
-    lessThanOrEqual: 'Inférieur ou égal à',
-    inRange: "Dans l'intervalle",
-  },
-  text: {
-    equals: 'Égal à',
-    notEquals: 'Différent de',
-    contains: 'Contient',
-    notContains: 'Ne contient pas',
-    startsWith: 'Commence par',
-    endsWith: 'Finit par',
-  },
-};
-
-type FilterModalContentProps = {
-  filter: DataGridFilter;
-  onFilterChanged: (filter: DataGridFilter) => void;
-};
-
-export const FilterModalContent = ({
-  filter,
-  onFilterChanged,
-}: FilterModalContentProps) => {
-  const value1Ref = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    setTimeout(() => value1Ref.current?.focus(), 100);
-  }, []);
-
-  if (!filter) return null;
-
-  const { operator, type, values } = filter;
-  return (
-    <styles.FilterModalContentContainer>
-      <label htmlFor="filterOperator">
-        <span>Opérateur :</span>
-        <Select
-          name="filterOperator"
-          items={Object.entries(filterOperators[filter.type])}
-          itemKey={0}
-          itemLabel={1}
-          value={String(operator)}
-          className="text-sm"
-          onChange={(e) =>
-            onFilterChanged({ ...filter, operator: e.target.value as any })
-          }
-        />
-      </label>
-      <label htmlFor="filterValue1">
-        <span>{operator === 'inRange' ? 'Entre' : 'Valeur'} :</span>
-        <Input
-          ref={value1Ref}
-          name="filterValue1"
-          type={filter.type}
-          value={values[0] ?? ''}
-          onChange={(e) => {
-            if (type === 'number') {
-              const newValues = [...values];
-              newValues[0] = Number(e.target.value);
-              onFilterChanged({
-                ...filter,
-                values: newValues,
-              });
-            } else {
-              const newValues = [...values];
-              newValues[0] = String(e.target.value) as any;
-              onFilterChanged({
-                ...filter,
-                values: newValues,
-              });
-            }
-          }}
-        />
-      </label>
-      {operator === 'inRange' && (
-        <label htmlFor="filterValue2">
-          <span>et</span>
-          <Input
-            name="filterValue2"
-            type={filter.type}
-            value={values[1] ?? ''}
-            onChange={(e) => {
-              if (type === 'number') {
-                const newValues = [...values];
-                newValues[1] = Number(e.target.value);
-                onFilterChanged({
-                  ...filter,
-                  values: newValues,
-                });
-              } else {
-                const newValues = [...values];
-                newValues[1] = String(e.target.value) as any;
-                onFilterChanged({
-                  ...filter,
-                  values: newValues,
-                });
-              }
-            }}
-          />
-        </label>
-      )}
-    </styles.FilterModalContentContainer>
-  );
-};

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

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-export const FilterModalContentContainer = styled.div.attrs({
-  className: 'FilterModalContentContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  font-size: var(--text-base);
-  gap: var(--space-1);
-
-  & > label {
-    display: flex;
-    flex-direction: row;
-    gap: var(--space-1);
-    align-items: center;
-
-    & > span {
-      font-weight: bold;
-      width: var(--space-32);
-    }
-  }
-`;

package/src/components/data/DataGrid/VirtualScroller.tsx

@@ -1,46 +0,0 @@
-import * as styles from './styles';
-
-import { ReactNode, useContext } from 'react';
-
-import { DataGridContext } from './types';
-
-type VirtualScrollerProps<R> = {
-  showAllRows?: boolean;
-  rowTemplate: (row: R, index: number) => ReactNode;
-  hasFooter?: boolean;
-  context: DataGridContext<R>;
-  onRangeChange?: (startIndex: number, length: number) => void;
-};
-
-export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
-  const {
-    rowHeight = styles.DEFAULT_ROW_HEIGHT,
-    // headerRowHeight = styles.DEFAULT_HEADER_ROW_HEIGHT,
-    sortedRows,
-    index,
-    visibleRows,
-    gridTemplateColumns,
-  } = useContext(props.context);
-  const {
-    rowTemplate,
-    // hasFooter, onRangeChange
-  } = props;
-
-  const totalHeight = sortedRows.length * rowHeight;
-  const topPadding =
-    Math.max(0, index - styles.VIRTUAL_SCROLL_TOLERANCE) * rowHeight;
-  // const headerAndFooterHeight =
-  //   2 * headerRowHeight + (hasFooter ? rowHeight : 0) + 2;
-
-  return (
-    <styles.VirtualScrollerContainer $height={totalHeight}>
-      <styles.VirtualScrollerRowsContainer
-        $gridTemplateColumns={gridTemplateColumns}
-        $topPadding={topPadding}
-        $rowHeight={rowHeight}
-      >
-        {visibleRows.map(rowTemplate)}
-      </styles.VirtualScrollerRowsContainer>
-    </styles.VirtualScrollerContainer>
-  );
-};

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

@@ -1,295 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
-import { dateFilter, numberFilter, textFilter } from './filters';
-import {
-  formatMoney,
-  formatNumber,
-  formatNumberInvariant,
-  formatPercentage,
-} from '../../../../helpers/numbers';
-
-import moment from 'moment';
-import { repeat } from 'lodash';
-
-export const isColumnVisible = <R,>(
-  obj: DataGridColumn<R> | DataGridSettings
-): boolean => obj?.order !== -1;
-
-export const buildExcelFormat = (decimals = 2, suffix = '') =>
-  `#0${decimals > 0 ? `.${repeat('0', decimals)}` : ''}${suffix}`;
-
-export const textColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => row[key] ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const mailColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <a
-        // className="text-blue-500 hover:text-blue-700"
-        href={`mailto:${row[key]}`}
-      >
-        {row[key] ?? ''}
-      </a>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const phoneColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <a
-        // className="text-blue-500 hover:text-blue-700"
-        href={`tel:${row[key]}`}
-      >
-        {row[key] ?? ''}
-      </a>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const dateColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    type: 'date',
-    render: (row) => moment(row[key]).format('DD/MM/YYYY') ?? '',
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: {
-      ...dateFilter(key),
-      renderer: (value) => moment(value).format('DD/MM/YYYY') ?? '',
-    },
-    ...options,
-  },
-});
-
-export const monthColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (row[key] ? `${row[key]} mois ` : ''),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: (_, filteredRows) => `${filteredRows.length} éléments`,
-    filter: textFilter(key),
-    ...options,
-  },
-});
-
-export const numberColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatNumber(row[key], decimals) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    footer: {
-      sum: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-      average: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatNumber(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatNumber(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-    },
-    filter: {
-      ...numberFilter(key),
-      renderer: (value) => formatNumber(value, decimals) ?? '',
-    },
-    ...options,
-  },
-});
-
-export const moneyColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    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: {
-      ...numberFilter(key),
-      renderer: (value) => formatMoney(value, decimals) ?? '',
-    },
-    footer: {
-      sum: (_, filteredRows) =>
-        formatMoney(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-      average: (_, filteredRows) =>
-        formatMoney(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatMoney(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatMoney(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-    },
-    ...options,
-  },
-});
-
-export const percentageColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  decimals = 2,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => formatPercentage(row[key]) ?? '',
-    excelFormatter: () => buildExcelFormat(decimals, '%'),
-    excelValue: (value) => formatNumberInvariant(value, decimals),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
-    footer: {
-      average: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0) /
-            (filteredRows.length || 1),
-          decimals
-        ),
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      max: (_, filteredRows) =>
-        formatNumber(
-          Math.max(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      min: (_, filteredRows) =>
-        formatNumber(
-          Math.min(...filteredRows.map((row) => row[key] ?? 0)),
-          decimals
-        ),
-      sum: (_, filteredRows) =>
-        formatNumber(
-          filteredRows.reduce((acc, row) => acc + (row[key] ?? 0), 0),
-          decimals
-        ),
-    },
-    ...options,
-  },
-});
-
-export const checkboxColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <>
-        <input type="checkbox" checked={row[key]} />
-        <span>{row[key] ? ' Oui' : ' Non'}</span>
-      </>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: numberFilter(key),
-    footer: {
-      count: (_, filteredRows) => `${filteredRows.length} éléments`,
-      checked: (_, filteredRows) =>
-        `${filteredRows.filter((row) => !!row[key]).length} cochés`,
-      unchecked: (_, filteredRows) =>
-        `${filteredRows.filter((row) => !row[key]).length} décochés`,
-    },
-    ...options,
-  },
-});
-
-export const colorColumn = <R extends Record<string, any>>(
-  key: string,
-  title: string,
-  options?: Partial<DataGridColumn<R>>
-): DataGridColumns<R> => ({
-  [key]: {
-    name: title,
-    render: (row) => (
-      <div style={{ backgroundColor: row[key] }}>{row[key] ?? ''}</div>
-    ),
-    getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
-    filter: textFilter(key),
-    footer: (rows) => `${rows.length} éléments`,
-    ...options,
-  },
-});