@addev-be/ui 0.1.18

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

@@ -0,0 +1,284 @@
+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_ROW_HEIGHT = 32;
+export const DEFAULT_FILTER_ROW_HEIGHT = 24;
+
+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}-900);
+          &:hover {
+            background-color: var(--color-${$headerColor}-300);
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-200);
+          color: var(--color-neutral-900);
+          &: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;
+  }
+`;
+DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
+
+export const DataGridCell = styled.div`
+  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;
+}>`
+  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 }) =>
+    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto`};
+
+  ${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';
+
+export const DataGridHeaderRow = styled.div.attrs<{
+  $headerRowHeight?: number;
+  $headerColor?: ThemeColor;
+  $gridTemplateColumns: string;
+}>(({ $gridTemplateColumns }) => ({
+  style: {
+    gridTemplateColumns: $gridTemplateColumns,
+  },
+}))`
+  display: grid;
+  grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
+    `${$headerRowHeight}px`};
+  z-index: 10;
+  position: sticky;
+  top: ${TOOLBAR_HEIGHT}px;
+
+  ${({ $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);
+        `}
+`;
+DataGridHeaderRow.displayName = 'DataGridHeaderRow';
+
+export const DataGridRow = styled.div`
+  display: contents;
+`;
+DataGridRow.displayName = 'DataGridRow';
+
+export const LoadingCell = styled(DataGridCell)`
+  padding: var(--space-2);
+`;
+LoadingCell.displayName = 'LoadingCell';
+
+export const SelectionCell = styled.div`
+  /* inline-flex items-center justify-center w-12 select-none text-center whitespace-nowrap */
+  & > input[type='checkbox'] {
+    height: 1rem;
+    width: 1rem;
+    border-radius: 0.25rem;
+    border: 1px solid var(--color-neutral-300);
+    color: var(--color-sky-600);
+  }
+`;
+SelectionCell.displayName = 'SelectionCell';
+
+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';
+
+export const FilterValuesScrollerContainer = styled.div.attrs({
+  className: 'FilterValuesScrollerContainer',
+})<{
+  $rowHeight?: number;
+}>`
+  display: block;
+  font-size: var(--text-base);
+  background-color: var(--color-neutral-0);
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 100%;
+
+  & > div {
+    position: relative;
+  }
+
+  & .checkbox {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: ${({ $rowHeight = DEFAULT_FILTER_ROW_HEIGHT }) =>
+      `${$rowHeight}px`};
+
+    input[type='checkbox'] {
+      margin-right: var(--space-1);
+    }
+  }
+`;

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

@@ -0,0 +1,232 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as t from 'io-ts';
+
+import {
+  CSSProperties,
+  Context,
+  Dispatch,
+  MouseEvent,
+  ReactNode,
+  SetStateAction,
+} from 'react';
+
+import { FieldDTO } from '../../../services/advancedRequests';
+import { SettingsContextProps } from '../../../providers/SettingsProvider';
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+
+export type DataGridColumn<
+  R,
+  T extends DataGridFilterType | undefined = DataGridFilterType
+> = {
+  bodyClassName?: string;
+  className?: string;
+  editable?: boolean;
+  excelFormatter?: (value: any) => string;
+  excelValue?: (value: any) => string;
+  field?: FieldDTO;
+  filter?: T extends undefined ? never : AnyDataGridFilter<R>;
+  footer?: (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
+  footerClassName?: string;
+  getter?: (row: R) => string | number;
+  headerClassName?: string;
+  name: string;
+  order?: number;
+  propertyName?: keyof R;
+  render?: (column: DataGridColumn<R, T>, row: 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, DataGridFilterType | undefined>
+>;
+
+export type DataGridFilters<R> = Record<
+  string,
+  DataGridFilter<R, 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?: (selectedRows: R[]) => void;
+  onFiltersChanged?: (filters: DataGridFilters<R>) => 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;
+  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[];
+  setSelectedRows: (selection: R[]) => void;
+  sorts?: Record<string, DataGridSort>;
+  setSorts: (sorts: Record<string, DataGridSort>) => void;
+  filters?: DataGridFilters<R>;
+  setFilters: Dispatch<SetStateAction<DataGridFilters<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;
+};
+
+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, any>];
+
+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 DataGridFilterType = 'text' | 'number';
+export type DataGridFilterDataType<T extends DataGridFilterType> =
+  T extends 'text' ? string : number;
+
+export type DataGridFilterPredicate<T> = (valueToVerify: T) => boolean;
+export type DataGridFilterPredicateBuilder<T> = (
+  row: any,
+  ...filterValues: T[]
+) => DataGridFilterPredicate<T>;
+
+export type DataGridFilterGetter<R, T extends DataGridFilterType> = (
+  row: R
+) => DataGridFilterDataType<T> | null;
+export type DataGridFilterFormatter = (
+  value: string | number | null
+) => string | null;
+
+export type DataGridFilterPredicates = {
+  text: {
+    contains: DataGridFilterPredicateBuilder<string>;
+    notContains: DataGridFilterPredicateBuilder<string>;
+    equals: DataGridFilterPredicateBuilder<string>;
+    notEquals: DataGridFilterPredicateBuilder<string>;
+    startsWith: DataGridFilterPredicateBuilder<string>;
+    endsWith: DataGridFilterPredicateBuilder<string>;
+    inArray: DataGridFilterPredicateBuilder<string>;
+  };
+  number: {
+    equals: DataGridFilterPredicateBuilder<number>;
+    notEquals: DataGridFilterPredicateBuilder<number>;
+    lessThan: DataGridFilterPredicateBuilder<number>;
+    lessThanOrEqual: DataGridFilterPredicateBuilder<number>;
+    greaterThan: DataGridFilterPredicateBuilder<number>;
+    greaterThanOrEqual: DataGridFilterPredicateBuilder<number>;
+    inRange: DataGridFilterPredicateBuilder<number>;
+    inArray: DataGridFilterPredicateBuilder<number>;
+  };
+};
+
+export type DataGridFilterOperator<T extends DataGridFilterType> =
+  keyof DataGridFilterPredicates[T];
+
+export type DataGridFilter<
+  R,
+  T extends DataGridFilterType = DataGridFilterType
+> = {
+  type: T;
+  operator: keyof DataGridFilterPredicates[T];
+  getter: DataGridFilterGetter<R, T>;
+  formatter?: DataGridFilterFormatter;
+  values: (DataGridFilterDataType<T> | null)[];
+};
+
+export type AnyDataGridFilter<R> =
+  | DataGridFilter<R, 'text'>
+  | DataGridFilter<R, 'number'>;
+
+export type DataGridFilterGroup<R> = {
+  name: string;
+  values?: R[];
+  groups?: DataGridFilterGroup<R>[];
+};
+
+export type DataGridFilterCheckbox<R extends string | number | null> = {
+  displayValue: string | null;
+  values: R[];
+  level: number;
+};

package/src/components/data/index.ts

@@ -0,0 +1,3 @@
+export * from './DataGrid';
+export * from './DataGrid/AdvancedRequestDataGrid';
+export * from './DataGrid/helpers/columns';

package/src/components/forms/Button.tsx

@@ -0,0 +1,99 @@
+import { ComponentProps, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { IconFC } from '../../Icons';
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+
+export const StyledButton = styled.button.withConfig({
+  shouldForwardProp: () => true,
+})<ButtonProps>`
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-sm);
+  /* font-weight: bold; */
+  border-radius: var(--rounded-md);
+  font-family: var(--font-sans);
+  cursor: pointer;
+
+  ${({ color }) =>
+    color
+      ? css`
+          background-color: var(--color-${color}-400);
+          border: 1px solid var(--color-${color}-500);
+          &:hover {
+            background-color: var(--color-${color}-300);
+            border: 1px solid var(--color-${color}-400);
+          }
+          color: var(--color-${color}-950);
+          svg {
+            fill: var(--color-${color}-950);
+          }
+        `
+      : css`
+          background-color: var(--color-neutral-100);
+          border: 1px solid var(--color-neutral-300);
+          &:hover {
+            background-color: var(--color-neutral-200);
+            border: 1px solid var(--color-neutral-400);
+          }
+          color: var(--color-neutral-900);
+          svg {
+            fill: var(--color-neutral-900);
+          }
+        `}
+
+  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
+
+  &.small {
+    padding: var(--space-1) var(--space-1_5);
+    font-size: var(--text-sm);
+    height: var(--space-6);
+    box-shadow: var(--shadow-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+  }
+  &.medium {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-base);
+    height: var(--space-8);
+    box-shadow: var(--shadow-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+  }
+  &.large {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-lg);
+    height: var(--space-10);
+    box-shadow: var(--shadow-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-5);
+      height: var(--space-5);
+    }
+  }
+`;
+
+export type ButtonProps = {
+  color?: ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  icon?: IconFC;
+  rounded?: boolean;
+};
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ComponentProps<typeof StyledButton> & ButtonProps
+>(({ children, size = 'medium', icon: Icon, className, ...props }, ref) => (
+  <StyledButton ref={ref} className={`${size} ${className}`} {...props}>
+    {Icon && <Icon />}
+    {children}
+  </StyledButton>
+));

package/src/components/forms/IconButton.tsx

@@ -0,0 +1,57 @@
+import { Button, ButtonProps } from './Button';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+import { IconFC } from '../../Icons';
+import styled from 'styled-components';
+
+type IconButtonProps = ButtonProps & {
+  icon: IconFC;
+  $iconSize?: string;
+};
+
+const styles = {
+  IconButton: styled(Button).attrs({
+    className: 'IconButton',
+  })<Omit<IconButtonProps, 'icon'>>`
+    border-radius: 100%;
+    &.small {
+      padding: var(--space-1);
+      height: var(--space-6);
+      width: var(--space-6);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = 'var(--space-4)' }) => $iconSize};
+        height: ${({ $iconSize = 'var(--space-4)' }) => $iconSize};
+      }
+    }
+    &.medium {
+      padding: var(--space-2);
+      height: var(--space-8);
+      width: var(--space-8);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
+        height: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
+      }
+    }
+    &.large {
+      padding: var(--space-3);
+      height: var(--space-10);
+      width: var(--space-10);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
+        height: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
+      }
+    }
+  `,
+};
+
+export const IconButton = forwardRef<
+  HTMLButtonElement,
+  IconButtonProps & ButtonHTMLAttributes<HTMLButtonElement>
+>(({ icon: Icon, ...props }, ref) => (
+  <styles.IconButton ref={ref} {...props}>
+    <Icon className="iconbutton-icon" />
+  </styles.IconButton>
+));