@addev-be/ui 0.12.0 → 0.12.2

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

@@ -1,101 +1,101 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import * as styles from './styles';
-
-import { 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 = {},
-    headerColor,
-    resizingColumnKey,
-    startResizing,
-  } = contextValue;
-  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
-
-  /** RESIZING */
-
-  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={[350, 500]}
-        $autoPositionX
-      >
-        <DataGridFilterMenu
-          columnKey={columnKey}
-          columnIndex={columnIndex}
-          context={context}
-          onClose={() => setIsFilterDropdownVisible(false)}
-        />
-      </Dropdown>
-    );
-  }, [
-    columnIndex,
-    columnKey,
-    context,
-    getElementScreenRect,
-    isFilterDropdownVisible,
-  ]);
-
-  const onFilterButtonClicked = useCallback(() => {
-    setIsFilterDropdownVisible(true);
-  }, []);
-
-  const isResizing = resizingColumnKey === columnKey;
-  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={(e) => startResizing(e, columnKey)}
-          />
-        </>
-      )}
-    </styles.DataGridHeaderCellContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import * as styles from './styles';
+
+import { 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 = {},
+    headerColor,
+    resizingColumnKey,
+    startResizing,
+  } = contextValue;
+  const filterButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  /** RESIZING */
+
+  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={[350, 500]}
+        $autoPositionX
+      >
+        <DataGridFilterMenu
+          columnKey={columnKey}
+          columnIndex={columnIndex}
+          context={context}
+          onClose={() => setIsFilterDropdownVisible(false)}
+        />
+      </Dropdown>
+    );
+  }, [
+    columnIndex,
+    columnKey,
+    context,
+    getElementScreenRect,
+    isFilterDropdownVisible,
+  ]);
+
+  const onFilterButtonClicked = useCallback(() => {
+    setIsFilterDropdownVisible(true);
+  }, []);
+
+  const isResizing = resizingColumnKey === columnKey;
+  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={(e) => startResizing(e, columnKey)}
+          />
+        </>
+      )}
+    </styles.DataGridHeaderCellContainer>
+  );
+};

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

@@ -1,70 +1,70 @@
-import * as styles from './styles';
-
-import { DataGridCell } from './DataGridCell';
-import { DataGridRowTemplateProps } from './types';
-import { VirtualScrollerTemplateProps } from '../VirtualScroller/types';
-import { useContext } from 'react';
-
-export const DataGridRowTemplate = <R,>({
-  item,
-  index,
-  context,
-}: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => {
-  const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
-    useContext(context);
-
-  if (!item) {
-    return (
-      <styles.DataGridRow key={`loading-row-${index}`}>
-        {!!props.selectable && (
-          <styles.LoadingCell className="animate-pulse">
-            <div />
-          </styles.LoadingCell>
-        )}
-        {visibleColumns.map((_, colIndex) => (
-          <styles.LoadingCell
-            className="animate-pulse"
-            key={`loading-${index}-${colIndex}`}
-          >
-            <div />
-          </styles.LoadingCell>
-        ))}
-      </styles.DataGridRow>
-    );
-  }
-  const key = rowKeyGetter(item);
-  const selected = props.selectedKeys.includes(key);
-  const { className, style } = props.rowClassNameGetter?.(item) ?? {
-    className: '',
-    style: undefined,
-  };
-  return (
-    <styles.DataGridRow key={key}>
-      {!!props.selectable && (
-        <styles.SelectionCell
-          key="__select_checkbox__"
-          onClick={() => toggleSelection(key)}
-        >
-          <input
-            type="checkbox"
-            value={key as string}
-            checked={selected}
-            readOnly
-          />
-        </styles.SelectionCell>
-      )}
-      {visibleColumns.map(([key, col], index) => (
-        <DataGridCell
-          key={`loading-${index}-${index}`}
-          {...(index === 0 ? { className, style } : {})}
-          row={item}
-          rowIndex={index}
-          column={col}
-          columnIndex={index}
-          context={context}
-          columnKey={key}
-        />
-      ))}
-    </styles.DataGridRow>
-  );
-};
+import * as styles from './styles';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridRowTemplateProps } from './types';
+import { VirtualScrollerTemplateProps } from '../VirtualScroller/types';
+import { useContext } from 'react';
+
+export const DataGridRowTemplate = <R,>({
+  item,
+  index,
+  context,
+}: VirtualScrollerTemplateProps<R, DataGridRowTemplateProps<R>>) => {
+  const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
+    useContext(context);
+
+  if (!item) {
+    return (
+      <styles.DataGridRow key={`loading-row-${index}`}>
+        {!!props.selectable && (
+          <styles.LoadingCell className="animate-pulse">
+            <div />
+          </styles.LoadingCell>
+        )}
+        {visibleColumns.map((_, colIndex) => (
+          <styles.LoadingCell
+            className="animate-pulse"
+            key={`loading-${index}-${colIndex}`}
+          >
+            <div />
+          </styles.LoadingCell>
+        ))}
+      </styles.DataGridRow>
+    );
+  }
+  const key = rowKeyGetter(item);
+  const selected = props.selectedKeys.includes(key);
+  const { className, style } = props.rowClassNameGetter?.(item) ?? {
+    className: '',
+    style: undefined,
+  };
+  return (
+    <styles.DataGridRow key={key}>
+      {!!props.selectable && (
+        <styles.SelectionCell
+          key="__select_checkbox__"
+          onClick={() => toggleSelection(key)}
+        >
+          <input
+            type="checkbox"
+            value={key as string}
+            checked={selected}
+            readOnly
+          />
+        </styles.SelectionCell>
+      )}
+      {visibleColumns.map(([key, col], index) => (
+        <DataGridCell
+          key={`loading-${index}-${index}`}
+          {...(index === 0 ? { className, style } : {})}
+          row={item}
+          rowIndex={index}
+          column={col}
+          columnIndex={index}
+          context={context}
+          columnKey={key}
+        />
+      ))}
+    </styles.DataGridRow>
+  );
+};

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

@@ -1,136 +1,136 @@
-/* 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>
-  );
-};
+/* 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 +1,22 @@
-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);
-    }
-  }
-`;
+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/constants.ts

@@ -1,6 +1,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 SELECTION_CELL_WIDTH = 'var(--space-8)';
-export const DEFAULT_COLUMN_WIDTH = 150;
+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 SELECTION_CELL_WIDTH = 'var(--space-8)';
+export const DEFAULT_COLUMN_WIDTH = 150;