@addev-be/ui 0.1.18

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

@@ -0,0 +1,181 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,54 @@
+/* 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 { join } from 'lodash';
+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}
+      className={join(
+        [
+          // 'whitespace-nowrap py-1 text-sm',
+          column.className,
+          column.bodyClassName,
+        ],
+        ' '
+      )}
+    >
+      <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={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/hooks.tsx

@@ -0,0 +1,75 @@
+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<R>>(
+    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 };
+};

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

@@ -0,0 +1,190 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { FilterIcon, FilterSlashIcon, MagnifierIcon } from '../../../../Icons';
+import { applyFilters, getDateGroups } from '../helpers';
+import { intersection, uniq, without } from 'lodash';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { DataGridContext } from '../types';
+import { FilterValuesScroller } from '../FilterValuesScroller';
+import { Input } from '../../../forms';
+import { useFilterModal } from './hooks';
+
+type FilterValuesProps<R> = {
+  columnKey: string;
+  columnIndex: number;
+  context: DataGridContext<R>;
+  onClose?: () => void;
+};
+
+export const DataGridFilterMenu = <R,>({
+  columnKey,
+  context,
+  onClose,
+}: FilterValuesProps<R>) => {
+  const { openModal, modal } = useFilterModal({ columnKey, context });
+  const {
+    filters = {},
+    rows,
+    columns,
+    setFilters,
+    filterValuesLoader,
+  } = useContext(context);
+  const column = columns[columnKey] ?? {};
+  const textFilterInputRef = useRef<HTMLInputElement>(null);
+  const [textFilter, setTextFilter] = useState('');
+
+  const [availableValues, setAvailableValues] = useState<
+    (string | number | null)[]
+  >([]);
+
+  useEffect(() => {
+    if (filterValuesLoader) {
+      filterValuesLoader(columnKey).then((values) => {
+        setAvailableValues(() => values);
+      });
+    } else {
+      const otherFilters = Object.entries(filters)
+        .filter(([key]) => key !== columnKey)
+        .map(([, filter]) => filter);
+      const availableRows = applyFilters(rows, otherFilters);
+      const values = availableRows.map((row) => column.filter!.getter(row));
+      setAvailableValues(() => uniq(values).sort());
+    }
+  }, [column.filter, columnKey, filterValuesLoader, filters, rows]);
+
+  const selectedValues = useMemo(
+    () => filters?.[columnKey]?.values ?? [],
+    [columnKey, filters]
+  );
+
+  const clearFilter = useCallback(() => {
+    const newFilters = { ...filters };
+    delete newFilters[columnKey];
+    setFilters(newFilters);
+    onClose?.();
+  }, [filters, columnKey, setFilters, onClose]);
+
+  const setValuesChecked = useCallback(
+    (values: any[], checked?: boolean) => {
+      setFilters((prevFilters) => {
+        const newValues = checked
+          ? [...(prevFilters[columnKey]?.values ?? []), ...values]
+          : without(prevFilters[columnKey]?.values ?? [], ...values);
+        const newFilters = {
+          ...prevFilters,
+        };
+        if (newValues.length === 0) {
+          delete newFilters[columnKey];
+        } else {
+          newFilters[columnKey] = {
+            ...(prevFilters[columnKey] ?? column.filter),
+            operator: 'inArray',
+            values: newValues,
+          };
+        }
+        return newFilters;
+      });
+    },
+    [setFilters, columnKey, column.filter]
+  );
+
+  const toggleValues = useCallback(
+    (values: any[]) => {
+      const checked =
+        intersection(selectedValues, values).length === values.length;
+      setValuesChecked(values, !checked);
+    },
+    [setValuesChecked, selectedValues]
+  );
+
+  const formatter = useMemo(
+    () =>
+      column.filter?.formatter ?? ((v: any) => (v === null ? null : String(v))),
+    [column.filter?.formatter]
+  );
+
+  const filteredAvailableValues = useMemo(
+    () =>
+      !textFilter
+        ? availableValues
+        : availableValues.filter((value) =>
+            formatter(value)?.toLowerCase().includes(textFilter.toLowerCase())
+          ),
+    [availableValues, formatter, textFilter]
+  );
+
+  useEffect(() => {
+    if (textFilterInputRef.current) {
+      textFilterInputRef.current.focus();
+    }
+  }, []);
+
+  const checkboxesComponent = useMemo(() => {
+    if (column.type === 'date') {
+      const groups = getDateGroups(filteredAvailableValues);
+      return (
+        <FilterValuesScroller
+          values={filteredAvailableValues}
+          selectedValues={selectedValues}
+          onToggle={toggleValues}
+          formatter={formatter}
+          groups={groups}
+        />
+      );
+    }
+    return (
+      <FilterValuesScroller
+        values={filteredAvailableValues}
+        selectedValues={selectedValues}
+        onToggle={toggleValues}
+        formatter={formatter}
+      />
+    );
+  }, [
+    column.type,
+    filteredAvailableValues,
+    formatter,
+    selectedValues,
+    toggleValues,
+  ]);
+
+  return (
+    <styles.Menu onClick={(e) => e.stopPropagation()}>
+      {modal}
+      <styles.MenuItem onClick={openModal}>
+        <FilterIcon />
+        Filtrer ...
+      </styles.MenuItem>
+      <styles.MenuItem $color="danger" onClick={clearFilter}>
+        <FilterSlashIcon />
+        Supprimer le filtre
+      </styles.MenuItem>
+      <styles.InputContainer>
+        <MagnifierIcon />
+        <Input
+          ref={textFilterInputRef}
+          type="text"
+          name="search"
+          id="search"
+          placeholder="Rechercher ..."
+          value={textFilter}
+          onChange={(e) => setTextFilter(e.target.value)}
+        />
+      </styles.InputContainer>
+      <styles.CheckboxesContainer>
+        {checkboxesComponent}
+      </styles.CheckboxesContainer>
+    </styles.Menu>
+  );
+};

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

@@ -0,0 +1,100 @@
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../../providers/ThemeProvider/types';
+
+export const Menu = styled.div.attrs({
+  className: 'Menu',
+})`
+  position: absolute;
+  inset: 0;
+  color: var(--color-neutral-900);
+  border-radius: var(--rounded-md);
+  padding: var(--space-1) 0;
+  box-shadow: var(--shadow-lg);
+  background-color: var(--color-neutral-100);
+  min-width: 20em;
+  outline: 1px solid var(--color-neutral-200);
+  display: flex;
+  flex-direction: column;
+`;
+
+export const MenuItem = styled.button.attrs({
+  className: 'MenuItem',
+})<{ $color?: ThemeColor }>`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-family: var(--font-sans);
+  font-weight: normal;
+  text-align: left;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-base);
+  line-height: var(--leading-6);
+  border: none;
+  cursor: pointer;
+
+  ${({ $color }) =>
+    $color
+      ? css`
+          color: var(--color-${$color}-600);
+          background-color: var(--color-neutral-100);
+          &:hover {
+            background-color: var(--color-${$color}-200);
+          }
+        `
+      : css`
+          color: var(--color-neutral-900);
+          background-color: var(--color-neutral-100);
+          &:hover {
+            background-color: var(--color-neutral-200);
+          }
+        `}
+
+  svg {
+    fill: currentColor;
+    width: var(--space-4);
+    height: var(--space-4);
+    margin-right: var(--space-2);
+  }
+`;
+
+export const InputContainer = styled.div.attrs({
+  className: 'InputContainer',
+})`
+  position: relative;
+  border-radius: var(--rounded-md);
+  padding: 0 var(--space-2);
+  margin-top: var(--space-1);
+
+  svg {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: var(--space-4);
+    display: flex;
+    align-items: center;
+    fill: var(--color-neutral-400);
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+
+  input {
+    padding-left: var(--space-8);
+  }
+`;
+
+export const CheckboxesContainer = styled.div.attrs({
+  className: 'CheckboxesContainer',
+})`
+  font-weight: normal;
+  user-select: none;
+  padding: var(--space-2);
+  margin: var(--space-2);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-inner);
+  background-color: var(--color-neutral-50);
+  height: 20em;
+  overflow-y: hidden;
+  white-space: nowrap;
+`;