@addev-be/ui 0.2.16 → 0.2.18

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

@@ -0,0 +1,323 @@
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+
+export const VIRTUAL_SCROLL_TOLERANCE = 20;
+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 TopPaddingRow = styled.div``;
+export const BottomPaddingRow = styled.div``;
+
+export const VirtualScrollerContainer = styled.div<{
+  $height: number;
+}>`
+  position: relative;
+  overflow: visible;
+  height: ${({ $height }) => `${$height}px`};
+`;
+export const VirtualScrollerRowsContainer = styled.div.attrs<{
+  $gridTemplateColumns: string;
+  $topPadding: number;
+  $rowHeight?: number;
+}>(({ $gridTemplateColumns, $topPadding, $rowHeight = DEFAULT_ROW_HEIGHT }) => {
+  const rowHeightValue = `${$rowHeight}px`;
+  return {
+    style: {
+      top: `${$topPadding}px`,
+      gridTemplateColumns: $gridTemplateColumns,
+      gridAutoRows: rowHeightValue,
+    },
+  };
+})`
+  display: grid;
+  position: absolute;
+
+  ${TopPaddingRow} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: 1;
+  }
+  ${BottomPaddingRow} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: -1;
+  }
+`;
+
+export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--space-1);
+  height: 100%;
+
+  ${({ $headerColor }) =>
+    $headerColor
+      ? css`
+          background-color: var(--color-${$headerColor}-400);
+          &:hover,
+          &.active {
+            background-color: var(--color-${$headerColor}-500);
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-400);
+          &:hover,
+          &.active {
+            background-color: var(--color-neutral-500);
+          }
+        `}
+
+  cursor: col-resize;
+  display: none;
+`;
+
+type DataGridHeaderCellContainerProps = {
+  $isResizing?: boolean;
+  $headerColor?: ThemeColor;
+};
+
+export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContainerProps>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--space-1);
+  padding: 0 0.75rem;
+  height: 100%;
+  font-weight: var(--font-bold);
+  line-height: 1.5rem;
+  z-index: ${({ $isResizing }) => ($isResizing ? 1 : 0)};
+
+  ${({ $headerColor }) =>
+    $headerColor
+      ? css`
+          background-color: var(--color-${$headerColor}-200);
+          color: var(--color-${$headerColor}-950);
+          &:hover {
+            background-color: var(--color-${$headerColor}-300);
+          }
+
+          & > button {
+            background-color: var(--color-${$headerColor}-400);
+            border-color: var(--color-${$headerColor}-500);
+            &:hover {
+              background-color: var(--color-${$headerColor}-500);
+              border-color: var(--color-${$headerColor}-600);
+            }
+          }
+          & > button.danger {
+            background-color: var(--color-red-400);
+            border-color: var(--color-red-500);
+            &:hover {
+              background-color: var(--color-red-500);
+              border-color: var(--color-red-600);
+            }
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-200);
+          color: var(--color-neutral-950);
+          &:hover {
+            background-color: var(--color-neutral-300);
+          }
+        `}
+
+  &:hover {
+    ${DataGridResizeGrip} {
+      display: block;
+    }
+  }
+
+  & > span {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex: 1;
+    font-weight: bold;
+  }
+`;
+DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
+
+export const DataGridCell = styled.div`
+  position: relative;
+  padding: 0 var(--space-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-right: 1px solid var(--color-neutral-200);
+  border-bottom: 1px solid var(--color-neutral-200);
+`;
+DataGridCell.displayName = 'DataGridCell';
+
+export const DataGridToolsRow = styled.div`
+  grid-column-start: 1;
+  grid-column-end: -1;
+  grid-row: 1;
+  display: flex;
+  gap: var(--space-1);
+  padding: 0 var(--space-1);
+  align-items: center;
+  background-color: var(--color-neutral-200);
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 10;
+`;
+DataGridToolsRow.displayName = 'DataGridToolsRow';
+
+export const DataGridContainer = styled.div<{
+  $headerRowHeight?: number;
+  $rowHeight?: number;
+  $rowsCount: number;
+  $showToolsHeader?: boolean;
+  $withFooter?: boolean;
+}>`
+  display: grid;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-neutral-50);
+  font-size: var(--text-base);
+  overflow: scroll;
+  grid-template-rows: ${({
+    $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT,
+    $withFooter = false,
+  }) =>
+    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto ${
+      $withFooter ? DEFAULT_FOOTER_ROW_HEIGHT + 'px' : ''
+    }`};
+
+  ${DataGridToolsRow} {
+    height: ${TOOLBAR_HEIGHT}px;
+  }
+  ${DataGridHeaderCellContainer} {
+    position: sticky;
+    top: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
+      `${$headerRowHeight}px`};
+    height: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
+      `${$headerRowHeight}px`};
+  }
+  ${DataGridCell} {
+    height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
+    line-height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
+  }
+
+  ${VirtualScrollerContainer} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: 3;
+  }
+`;
+DataGridContainer.displayName = 'DataGridContainer';
+
+type DataGridHeaderOrFooterRowProps = {
+  $headerRowHeight?: number;
+  $headerColor?: ThemeColor;
+  $gridTemplateColumns: string;
+};
+
+const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
+  display: grid;
+  grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
+    `${$headerRowHeight}px`};
+  z-index: 10;
+  position: sticky;
+  align-items: center;
+
+  ${({ $headerColor }) =>
+    $headerColor
+      ? css`
+          background-color: var(--color-${$headerColor}-100);
+          color: var(--color-${$headerColor}-900);
+        `
+      : css`
+          background-color: var(--color-neutral-200);
+          color: var(--color-neutral-900);
+        `}
+`;
+
+export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
+  ({ $gridTemplateColumns }) => ({
+    style: {
+      gridTemplateColumns: $gridTemplateColumns,
+    },
+  })
+)`
+  ${dataGridHeaderOrFooterRowCss}
+  top: ${TOOLBAR_HEIGHT}px;
+`;
+DataGridHeaderRow.displayName = 'DataGridHeaderRow';
+
+export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
+  ({ $gridTemplateColumns }) => ({
+    style: {
+      gridTemplateColumns: $gridTemplateColumns,
+    },
+  })
+)`
+  ${dataGridHeaderOrFooterRowCss}
+  bottom: 0;
+`;
+DataGridFooterRow.displayName = 'DataGridFooterRow';
+
+export const DataGridRow = styled.div`
+  display: contents;
+`;
+DataGridRow.displayName = 'DataGridRow';
+
+export const LoadingCell = styled(DataGridCell)`
+  padding: var(--space-2);
+  box-sizing: border-box;
+
+  &.animate-pulse > div {
+    background-color: var(--color-neutral-200);
+    border-radius: var(--rounded-full);
+    width: 100%;
+    height: 100%;
+  }
+`;
+LoadingCell.displayName = 'LoadingCell';
+
+const selectionCellStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-8);
+  padding: 0 var(--space-1);
+  cursor: pointer;
+
+  & > input[type='checkbox'] {
+    height: var(--space-4);
+    width: var(--space-4);
+    border-radius: var(--rounded-sm);
+    border: 1px solid var(--color-neutral-300);
+    color: var(--color-primary-600);
+  }
+`;
+
+export const SelectionCell = styled(DataGridCell)`
+  ${selectionCellStyle}
+`;
+SelectionCell.displayName = 'SelectionCell';
+
+export const HeaderSelectionCell = styled(DataGridHeaderCellContainer)`
+  ${selectionCellStyle}
+`;
+HeaderSelectionCell.displayName = 'HeaderSelectionCell';
+
+export const ResizeBackdrop = styled.div.attrs({
+  className: 'ResizeBackdrop',
+})`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0);
+  cursor: col-resize;
+`;
+ResizeBackdrop.displayName = 'ResizeBackdrop';

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

@@ -0,0 +1,267 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as t from 'io-ts';
+
+import {
+  CSSProperties,
+  Context,
+  Dispatch,
+  FC,
+  MouseEvent,
+  MouseEventHandler,
+  ReactNode,
+  SetStateAction,
+} from 'react';
+
+import { SettingsContextProps } from '../../../providers/SettingsProvider';
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+
+export type DataGridCellFC = FC<{
+  onDoubleClick?: MouseEventHandler;
+  style?: CSSProperties;
+}>;
+
+export type DataGridFooterPredefinedFunction =
+  | 'average'
+  | 'avg'
+  | 'count'
+  | 'max'
+  | 'min'
+  | 'sum';
+export type DataGridFooterFunction<R> = (
+  allRows: R[],
+  filteredRows: R[],
+  selectedRows: R[]
+) => ReactNode;
+
+export type DataGridColumn<R> = {
+  component?: DataGridCellFC;
+  editable?: boolean;
+  excelFormatter?: (value: any) => string;
+  excelBackgroundColor?: (value: any) => string;
+  excelValue?: (value: any) => string;
+  filter?: DataGridFilter;
+  footer?:
+    | DataGridFooterFunction<R>
+    | Record<string, DataGridFooterFunction<R> | null>;
+  getter?: (row: R) => string | number;
+  name: string;
+  order?: number;
+  propertyName?: keyof R;
+  render?: (row: R, column: DataGridColumn<R>) => ReactNode | string;
+  resizable?: boolean;
+  sortGetter?: (row: R) => string | number;
+  type?: 'text' | 'number' | 'date';
+  width?: number;
+  settingsContext?: Context<SettingsContextProps>;
+};
+
+export type DataGridColumns<R> = Record<string, DataGridColumn<R>>;
+
+export type DataGridFilters = Record<
+  string,
+  DataGridFilter<DataGridFilterType>
+>;
+
+export type DataGridProps<R> = {
+  name?: string;
+  className?: string;
+  rows: R[];
+  columns: DataGridColumns<R>;
+  rowKey: keyof R | ((row: R) => string);
+  selectable?: boolean;
+  editable?: boolean;
+  onRowDoubleClick?: (row: R, e: MouseEvent) => void;
+  onSelectionChange?: (keys: string[]) => void;
+  getAllIds?: () => Promise<string[]>;
+  onFiltersChanged?: (filters: DataGridFilters) => void;
+  onSortsChanged?: (sorts: Record<string, DataGridSort>) => void;
+  onVisibleRowsChange?: (startIndex: number, length: number) => void;
+  onCellEdited?: (row: R, columnKey: string, value: any) => void;
+  rowClassNameGetter?: (row: R | null) => {
+    className?: string;
+    style?: CSSProperties;
+  };
+  headerRowHeight?: number;
+  rowHeight?: number;
+  filter?: boolean;
+  sort?: boolean;
+  initialSorts?: Record<string, DataGridSort>;
+  initialFooters?: Record<string, string>;
+  onFootersChanged?: (footers: Record<string, string>) => void;
+  filterValuesLoader?: (
+    columnKey: string
+  ) => Promise<(string | number | null)[]>;
+  // copyTableHandler?: (
+  //   includeHeaders?: boolean,
+  //   includeFooters?: boolean
+  // ) => Promise<void>;
+  loadCopyRows?: () => Promise<R[]>;
+  refresh?: () => void;
+  headerColor?: ThemeColor;
+};
+
+export type DataGridContextProps<R> = DataGridProps<R> & {
+  editingCell?: [number, number];
+  setEditingCell: Dispatch<SetStateAction<[number, number]>>;
+  sortedRows: R[];
+  selectedRows: R[];
+  selectedKeys: string[];
+  setSelectedKeys: (selection: string[]) => void;
+  sorts?: Record<string, DataGridSort>;
+  setSorts: (sorts: Record<string, DataGridSort>) => void;
+  filters?: DataGridFilters;
+  setFilters: Dispatch<SetStateAction<DataGridFilters>>;
+  footers?: Record<string, string>;
+  setFooters: Dispatch<SetStateAction<Record<string, string>>>;
+  footerFunctions?: Record<string, DataGridFooterFunction<R>>;
+  visibleColumns: DataGridColumnKeyValuePair<R>[];
+  copyTable: (
+    includeHeaders?: boolean,
+    includeFooters?: boolean
+  ) => Promise<void>;
+  setColumnWidth: (key: string, width: number) => void;
+  saveSettings: (newSettings?: DataGridSettings) => void;
+  settings: DataGridSettings;
+  setSettings: Dispatch<SetStateAction<DataGridSettings>>;
+  visibleRows: R[];
+  scrollableRef: React.RefObject<HTMLDivElement>;
+  onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
+  index: number;
+  length: number;
+  rowKeyGetter: (row: R) => string;
+  gridTemplateColumns: string;
+};
+
+export type DataGridContext<R> = Context<DataGridContextProps<R>>;
+
+export const dataGridSettingCodec = t.partial(
+  {
+    width: t.number,
+    order: t.number,
+  },
+  'DataGridSetting'
+);
+export const dataGridSettingsCodec = t.record(
+  t.string,
+  dataGridSettingCodec,
+  'DataGridSettings'
+);
+export const dataGridSettingsByNameCodec = t.record(
+  t.string,
+  dataGridSettingsCodec,
+  'DataGridSettingsByName'
+);
+
+export type DataGridSetting = t.TypeOf<typeof dataGridSettingCodec>;
+export type DataGridSettings = t.TypeOf<typeof dataGridSettingsCodec>;
+export type DataGridSettingsByName = t.TypeOf<
+  typeof dataGridSettingsByNameCodec
+>;
+export type DataGridSettingsTuple = [string, DataGridSetting];
+export type DataGridSettingsArray = DataGridSettingsTuple[];
+export type DataGridColumnKeyValuePair<R> = [string, DataGridColumn<R>];
+
+export type DataGridCellProps<R> = {
+  row: R;
+  rowIndex: number;
+  columnKey: string;
+  columnIndex: number;
+  column: DataGridColumn<R>;
+  context: DataGridContext<R>;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export type DataGridHeaderCellProps<R> = {
+  columnKey: string;
+  columnIndex: number;
+  column: DataGridColumn<R>;
+  context: DataGridContext<R>;
+  onFilterButtonClicked?: (columnKey: string) => void;
+  isFilterOpen?: boolean;
+};
+
+export type DataGridSort = 'asc' | 'desc';
+
+export type DataGridFilterPredicate<T> = (valueToVerify: T) => boolean;
+export type DataGridFilterPredicateBuilder<T> = (
+  ...filterValues: T[]
+) => DataGridFilterPredicate<T>;
+
+export type DataGridFilterOperators<K extends string, T> = {
+  [key in K]: DataGridFilterPredicateBuilder<T>;
+};
+
+export type DataGridFilterPredicates = {
+  date: DataGridFilterOperators<
+    'before' | 'after' | 'equals' | 'notEquals' | 'inRange' | 'inArray',
+    string
+  >;
+  text: DataGridFilterOperators<
+    | 'contains'
+    | 'notContains'
+    | 'equals'
+    | 'notEquals'
+    | 'startsWith'
+    | 'endsWith'
+    | 'inArray',
+    string
+  >;
+  number: DataGridFilterOperators<
+    | 'equals'
+    | 'notEquals'
+    | 'lessThan'
+    | 'lessThanOrEqual'
+    | 'greaterThan'
+    | 'greaterThanOrEqual'
+    | 'inRange'
+    | 'inArray',
+    number
+  >;
+};
+
+export type DataGridFilterType = keyof DataGridFilterPredicates;
+export type DataGridFilterDataType<T extends DataGridFilterType> =
+  DataGridFilterPredicates[T] extends DataGridFilterOperators<string, infer U>
+    ? U
+    : never;
+
+export type DataGridFilterGetter<T extends DataGridFilterType> = (
+  value: any
+) => DataGridFilterDataType<T> | null;
+export type DataGridFilterRenderer = (value: any) => ReactNode;
+export type DataGridFilterFormatter = (value: any) => string;
+
+export type DataGridFilterOperator<T extends DataGridFilterType> =
+  DataGridFilterPredicates[T] extends DataGridFilterOperators<infer K, any>
+    ? K
+    : never;
+
+export type DataGridFilter<T extends string = DataGridFilterType> =
+  T extends DataGridFilterType
+    ? {
+        type: T;
+        operator: DataGridFilterOperator<T>;
+        getter: DataGridFilterGetter<T>;
+        renderer?: DataGridFilterRenderer;
+        formatter?: DataGridFilterFormatter;
+        values: (DataGridFilterDataType<T> | null)[];
+      }
+    : never;
+
+export type DataGridFilterGroup = {
+  name: string;
+  displayValue: DataGridFilterValue;
+  values?: DataGridFilterValue[];
+  groups?: DataGridFilterGroup[];
+};
+
+export type DataGridFilterValue = string | number | null;
+
+export type DataGridFilterCheckbox = {
+  displayValue: ReactNode;
+  title: string;
+  values: DataGridFilterValue[];
+  level: number;
+};