@addev-be/ui 0.2.13 → 0.2.15

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

@@ -1,59 +0,0 @@
-import { useCallback, useContext, useMemo, useState } from 'react';
-
-import { Button } from '../../../forms';
-import { DataGridColumnsEditor } from '.';
-import { DataGridContext } from '../types';
-import { Modal } from '../../../layout/Modal';
-import { mapValues } from 'lodash';
-
-export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { columns, setSettings, saveSettings } = useContext(context);
-  const [currentColumns, setCurrentColumns] = useState(columns);
-
-  const openModal = useCallback(() => {
-    setCurrentColumns(columns);
-    setIsVisible(true);
-  }, [columns]);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const onApplyClicked = useCallback(() => {
-    const newSettings = mapValues(currentColumns, (col) => ({
-      order: col.order ?? 0,
-      width: col.width ?? 150,
-    }));
-    setSettings(() => newSettings);
-    saveSettings(newSettings);
-    closeModal();
-  }, [currentColumns, closeModal, saveSettings, setSettings]);
-
-  const modal = useMemo(
-    () =>
-      isVisible ? (
-        <Modal $width={600} $height={400}>
-          <Modal.Header>Paramètres des colonnes</Modal.Header>
-          <Modal.Content>
-            <DataGridColumnsEditor
-              columns={currentColumns}
-              onColumnsChanged={setCurrentColumns}
-            />
-          </Modal.Content>
-          <Modal.Footer>
-            <Button onClick={closeModal}>Annuler</Button>
-            <Button
-              color="primary"
-              style={{ marginLeft: 'auto' }}
-              onClick={onApplyClicked}
-            >
-              Appliquer
-            </Button>
-          </Modal.Footer>
-        </Modal>
-      ) : null,
-    [closeModal, currentColumns, isVisible, onApplyClicked]
-  );
-
-  return { openModal, closeModal, modal };
-};

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

@@ -1,181 +0,0 @@
-import * as styles from './styles';
-
-import { DataGridColumn, DataGridColumns } from '../types';
-import { Dispatch, SetStateAction, useCallback } from 'react';
-import { DownIcon, LeftIcon, RightIcon, UpIcon } from '../../../../Icons';
-
-import { IconButton } from '../../../forms/IconButton';
-import _ from 'lodash';
-import { normalizeColumnsOrders } from './helpers';
-import { useVisibleAndHiddenColumns } from '../hooks';
-
-export const DataGridColumnItem = <R,>({
-  columnIndex,
-  columnKey,
-  column,
-  visible,
-  onUpButtonClicked,
-  onDownButtonClicked,
-  onVisibleButtonClicked,
-}: {
-  columnIndex: number;
-  columnKey: string;
-  column: DataGridColumn<R>;
-  visible: boolean;
-  onUpButtonClicked?: (index: number) => void;
-  onDownButtonClicked?: (index: number) => void;
-  onVisibleButtonClicked: (key: string) => void;
-}) => (
-  <styles.ColumnItem $visible={visible}>
-    {!visible && (
-      <styles.Buttons $visible={false}>
-        <IconButton
-          size="small"
-          icon={LeftIcon}
-          onClick={() => onVisibleButtonClicked(columnKey)}
-        />
-      </styles.Buttons>
-    )}
-    <span>{column?.name}</span>
-    {visible && (
-      <styles.Buttons $visible>
-        {onUpButtonClicked && (
-          <IconButton
-            size="small"
-            icon={UpIcon}
-            onClick={() => onUpButtonClicked(columnIndex)}
-          />
-        )}
-        {onDownButtonClicked && (
-          <IconButton
-            size="small"
-            icon={DownIcon}
-            onClick={() => onDownButtonClicked(columnIndex)}
-          />
-        )}
-        <IconButton
-          size="small"
-          icon={RightIcon}
-          onClick={() => onVisibleButtonClicked(columnKey)}
-        />
-      </styles.Buttons>
-    )}
-  </styles.ColumnItem>
-);
-
-export const DataGridColumnsEditor = <R,>({
-  columns,
-  onColumnsChanged,
-}: {
-  columns: DataGridColumns<R>;
-  onColumnsChanged: Dispatch<SetStateAction<DataGridColumns<R>>>;
-}) => {
-  const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
-  const sortedVisibleColumnsEntries = normalizeColumnsOrders(
-    _.sortBy(Object.entries(visibleColumns), ([, col]) => col.order ?? 0)
-  );
-
-  const onUpButtonClicked = useCallback(
-    (index: number) => {
-      if (index > 0) {
-        const newArray = normalizeColumnsOrders([
-          ...sortedVisibleColumnsEntries.slice(0, index - 1),
-          sortedVisibleColumnsEntries[index],
-          sortedVisibleColumnsEntries[index - 1],
-          ...sortedVisibleColumnsEntries.slice(index + 1),
-        ]);
-        onColumnsChanged(() => ({
-          ...Object.fromEntries(newArray),
-          ...hiddenColumns,
-        }));
-      }
-    },
-    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
-  );
-
-  const onDownButtonClicked = useCallback(
-    (index: number) => {
-      if (index < sortedVisibleColumnsEntries.length - 1) {
-        const newArray = normalizeColumnsOrders([
-          ...sortedVisibleColumnsEntries.slice(0, index),
-          sortedVisibleColumnsEntries[index + 1],
-          sortedVisibleColumnsEntries[index],
-          ...sortedVisibleColumnsEntries.slice(index + 2),
-        ]);
-        onColumnsChanged(() => ({
-          ...Object.fromEntries(newArray),
-          ...hiddenColumns,
-        }));
-      }
-    },
-    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
-  );
-
-  const onHideButtonClicked = useCallback(
-    (columnKey: string) => {
-      onColumnsChanged((prev) => ({
-        ...prev,
-        [columnKey]: {
-          ...prev[columnKey],
-          order: -1,
-        },
-      }));
-    },
-    [onColumnsChanged]
-  );
-
-  const onShowButtonClicked = useCallback(
-    (columnKey: string) => {
-      onColumnsChanged((prev) => ({
-        ...prev,
-        [columnKey]: {
-          ...hiddenColumns[columnKey],
-          order: Object.keys(prev).length,
-        },
-      }));
-    },
-    [hiddenColumns, onColumnsChanged]
-  );
-
-  return (
-    <styles.Container>
-      <styles.Panel>
-        <styles.Title>Colonnes visibles</styles.Title>
-        <styles.ColumnsList>
-          {sortedVisibleColumnsEntries.map(([key, column], index) => (
-            <DataGridColumnItem
-              key={key}
-              columnKey={key}
-              columnIndex={index}
-              column={column}
-              visible
-              onUpButtonClicked={index > 0 ? onUpButtonClicked : undefined}
-              onDownButtonClicked={
-                index < sortedVisibleColumnsEntries.length - 1
-                  ? onDownButtonClicked
-                  : undefined
-              }
-              onVisibleButtonClicked={onHideButtonClicked}
-            />
-          ))}
-        </styles.ColumnsList>
-      </styles.Panel>
-
-      <styles.Panel>
-        <styles.Title>Colonnes masquées</styles.Title>
-        <styles.ColumnsList>
-          {Object.entries(hiddenColumns).map(([key, column], index) => (
-            <DataGridColumnItem
-              key={key}
-              columnKey={key}
-              columnIndex={index}
-              column={column}
-              visible={false}
-              onVisibleButtonClicked={onShowButtonClicked}
-            />
-          ))}
-        </styles.ColumnsList>
-      </styles.Panel>
-    </styles.Container>
-  );
-};

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

@@ -1,104 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const Container = styled.div.attrs({
-  className: 'DataGridColumnsModal-Container',
-})`
-  display: flex;
-  flex-direction: row;
-  gap: var(--space-2);
-  overflow: auto;
-  font-size: var(--text-base);
-  height: 100%;
-`;
-
-export const Panel = styled.div.attrs({
-  className: 'DataGridColumnsModal-Panel',
-})`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
-
-export const Title = styled.div.attrs({
-  className: 'DataGridColumnsModal-Title',
-})`
-  margin: 0;
-  margin-bottom: var(--space-2);
-  font-weight: bold;
-`;
-
-export const ColumnsList = styled.ul.attrs({
-  className: 'DataGridColumnsModal-ColumnsList',
-})`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-  border: 1px solid var(--color-neutral-200);
-  margin: 0;
-  background-color: var(--color-neutral-50);
-
-  & > li:not(:last-child) {
-    border-bottom: 1px solid var(--color-neutral-100);
-  }
-`;
-
-export const ColumnItem = styled.li.attrs({
-  className: 'DataGridColumnsModal-ColumnItem',
-})<{
-  $visible?: boolean;
-}>`
-  padding: var(--space-1);
-  transition: background-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-2);
-
-  span {
-    flex: 1;
-  }
-
-  button {
-    display: none;
-    padding: var(--space-1);
-    width: var(--space-6);
-    height: var(--space-6);
-    border-radius: var(--rounded-full);
-    background-color: var(--color-neutral-200);
-    border: none;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &:hover {
-    background-color: var(--color-neutral-100);
-    button {
-      display: flex;
-      background-color: var(--color-neutral-300);
-    }
-  }
-`;
-
-export const Buttons = styled.div.attrs({
-  className: 'DataGridColumnsModal-Buttons',
-})<{ $visible?: boolean }>`
-  display: flex;
-  gap: var(--space-1);
-  height: var(--space-6);
-  ${({ $visible }) =>
-    $visible
-      ? css`
-          width: var(--space-24);
-          justify-content: flex-end;
-        `
-      : css`
-          width: var(--space-6);
-        `}
-
-  svg {
-    width: var(--space-4);
-    height: var(--space-4);
-  }
-`;

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

@@ -1,43 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import { useCallback, useState } from 'react';
-
-import { DataGridCellProps } from './types';
-import { useDataGridContext } from './hooks';
-
-export const DataGridEditableCell = <R,>({
-  row,
-  columnKey,
-  column,
-  context,
-}: DataGridCellProps<R>) => {
-  const { onCellEdited, setEditingCell } = useDataGridContext(context);
-  const [value, setValue] = useState(
-    column.getter
-      ? column.getter(row)
-      : column.propertyName
-      ? String(row[column.propertyName])
-      : ''
-  );
-
-  const onClose = useCallback(() => {
-    onCellEdited?.(row, columnKey, value);
-    setEditingCell([-1, -1]);
-  }, [columnKey, onCellEdited, row, setEditingCell, value]);
-
-  return (
-    <td key={columnKey}>
-      <input
-        type="text"
-        // className="relative  z-10 block text-normal w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
-        value={String(value)}
-        onChange={(e) => setValue(e.target.value)}
-      />
-      <div
-        // className="fixed inset-0 bg-black bg-opacity-10"
-        onClick={onClose}
-      />
-    </td>
-  );
-};

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

@@ -1,120 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import * as styles from './styles';
-
-import {
-  DataGridFilterCheckbox,
-  DataGridFilterFormatter,
-  DataGridFilterGroup,
-  DataGridFilterRenderer,
-  DataGridFilterValue,
-} from '../types';
-import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { debounce } from 'lodash';
-import { useElementSize } from '../../../../hooks';
-
-const CheckboxTemplate = ({
-  selectedValues,
-  value,
-  index,
-  style,
-  onToggle,
-}: {
-  selectedValues: DataGridFilterValue[];
-  value: DataGridFilterCheckbox;
-  index: number;
-  style?: React.CSSProperties;
-  onToggle?: (values: DataGridFilterValue[]) => void;
-}) => {
-  const checked = useMemo(
-    () => value.values.every((v) => selectedValues.includes(v)),
-    [selectedValues, value.values]
-  );
-  return (
-    <styles.FilterValueContainer
-      key={index}
-      style={{ ...style, paddingLeft: `${value.level}rem` }}
-      title={value.title}
-      onClick={() => onToggle?.(value.values)}
-    >
-      <input type="checkbox" checked={checked} readOnly />
-      <span>{value.displayValue || '(Vides)'}</span>
-    </styles.FilterValueContainer>
-  );
-};
-
-type FilterValuesScrollerProps = {
-  values: DataGridFilterValue[];
-  rowHeight?: number;
-  formatter: DataGridFilterFormatter;
-  renderer: DataGridFilterRenderer;
-  onRangeChange?: (startIndex: number, length: number) => void;
-  onToggle?: (values: DataGridFilterValue[]) => void;
-  selectedValues?: DataGridFilterValue[];
-  groups?: DataGridFilterGroup[];
-};
-
-export const FilterValuesScroller = ({
-  values,
-  rowHeight = styles.DEFAULT_FILTER_ROW_HEIGHT,
-  onRangeChange,
-  onToggle,
-  formatter = defaultRendererAndFormatter,
-  renderer = defaultRendererAndFormatter,
-  selectedValues = [],
-  groups,
-}: FilterValuesScrollerProps) => {
-  const scrollableRef = useRef<HTMLDivElement | null>(null);
-  const { height } = useElementSize(scrollableRef.current);
-
-  const tolerance = 20;
-  const [scrollTop, setScrollTop] = useState(0);
-  const index = Math.floor(scrollTop / rowHeight);
-  const length = Math.ceil(height / rowHeight);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onScroll = useCallback(
-    debounce((e: React.UIEvent<HTMLDivElement>) => {
-      const target = e.target as HTMLDivElement;
-      setScrollTop(() => target.scrollTop);
-    }, 50),
-    []
-  );
-
-  const checkboxes = useMemo(
-    () => getCheckboxes(values, '', renderer, formatter, groups),
-    [values, groups, renderer, formatter]
-  );
-  const visibleCheckboxes = checkboxes.slice(
-    Math.max(0, index - tolerance),
-    index + length + 1 + tolerance
-  );
-  const firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
-
-  useEffect(() => {
-    onRangeChange?.(index, length);
-  }, [index, length, onRangeChange]);
-
-  return (
-    <styles.FilterValuesScrollerContainer
-      ref={scrollableRef}
-      onScroll={onScroll}
-      $rowHeight={rowHeight}
-    >
-      <div style={{ height: `${checkboxes.length * rowHeight}px` }}>
-        {visibleCheckboxes.map((value, index) => (
-          <CheckboxTemplate
-            style={{ top: firstCheckboxTop + index * rowHeight + 'px' }}
-            key={index}
-            selectedValues={selectedValues}
-            value={value}
-            index={index}
-            onToggle={onToggle}
-          />
-        ))}
-      </div>
-    </styles.FilterValuesScrollerContainer>
-  );
-};

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

@@ -1,75 +0,0 @@
-import { DataGridContext, DataGridFilter } from '../types';
-import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
-import { useCallback, useState } from 'react';
-
-import { Button } from '../../../forms';
-import { FilterModalContent } from '../FilterModalContent';
-import { Modal } from '../../../layout/Modal';
-import { useDataGridContext } from '../hooks';
-
-export const useFilterModal = <R,>({
-  columnKey,
-  context,
-}: {
-  columnKey: string;
-  context: DataGridContext<R>;
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { filters = {}, columns, setFilters } = useDataGridContext<R>(context);
-  const column = columns[columnKey];
-  const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
-    filters[columnKey] ?? column?.filter
-  );
-
-  const openModal = useCallback(() => {
-    setIsVisible(true);
-  }, []);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const onClearClicked = useCallback(() => {
-    const newFilters = { ...filters };
-    delete newFilters[columnKey];
-    setFilters(newFilters);
-    closeModal();
-  }, [closeModal, columnKey, filters, setFilters]);
-
-  const onApplyClicked = useCallback(() => {
-    setFilters({ ...filters, [columnKey]: currentFilter });
-    closeModal();
-  }, [closeModal, columnKey, currentFilter, filters, setFilters]);
-
-  const onCancelClicked = useCallback(() => {
-    closeModal();
-  }, [closeModal]);
-
-  const modal = isVisible ? (
-    <Modal>
-      <Modal.Header>Filtrer "{column.name}"</Modal.Header>
-      <Modal.ContentWithIcon>
-        <FilterIcon fill="var(--color-primary-400)" />
-        <FilterModalContent
-          filter={currentFilter}
-          onFilterChanged={setCurrentFilter}
-        />
-      </Modal.ContentWithIcon>
-      <Modal.Buttons>
-        <Button color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
-          Supprimer
-        </Button>
-        <Button
-          style={{ marginLeft: 'auto' }}
-          color="primary"
-          icon={FilterIcon}
-          onClick={onApplyClicked}
-        >
-          Filtrer
-        </Button>
-        <Button onClick={onCancelClicked}>Annuler</Button>
-      </Modal.Buttons>
-    </Modal>
-  ) : null;
-
-  return { openModal, closeModal, modal };
-};