@addev-be/ui 0.1.18 → 0.1.20

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

@@ -1,232 +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;
-};
+/* 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

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

package/src/components/forms/Button.tsx

@@ -1,99 +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>
-));
+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>
+));