@addev-be/ui 0.1.19 → 0.1.24

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

@@ -1,12 +1,11 @@
 import * as styles from './styles';
 
-import { useCallback, useEffect } from 'react';
-
 import { DataGridCell } from './DataGridCell';
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
 import { DataGridProps } from './types';
 import { VirtualScroller } from './VirtualScroller';
+import { useCallback } from 'react';
 import { useDataGrid } from './hooks';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -16,40 +15,36 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
   const {
     className,
     // onRowDoubleClick,
-    onSelectionChange,
     onVisibleRowsChange,
-    rowKey,
   } = props;
   const [contextProps, DataGridContext] = useDataGrid(props);
   const {
-    selectedRows,
-    setSelectedRows,
+    selectedKeys,
+    setSelectedKeys,
     columns,
     visibleColumns,
     rowHeight = 32,
     headerRowHeight = 40,
     scrollableRef,
     onScroll,
+    rowKeyGetter,
   } = contextProps;
 
   const hasFooter = Object.values(columns).some((col) => col.footer);
 
   const setRowSelection = useCallback(
     (row: R, selected: boolean) => {
+      const key = rowKeyGetter(row);
       if (selected) {
-        if (!selectedRows.includes(row))
-          setSelectedRows([...selectedRows, row]);
+        if (!selectedKeys.includes(key))
+          setSelectedKeys([...selectedKeys, key]);
       } else {
-        setSelectedRows(selectedRows.filter((p) => p !== row));
+        setSelectedKeys(selectedKeys.filter((p) => p !== key));
       }
     },
-    [selectedRows, setSelectedRows]
+    [rowKeyGetter, selectedKeys, setSelectedKeys]
   );
 
-  useEffect(() => {
-    onSelectionChange?.(selectedRows);
-  }, [onSelectionChange, selectedRows]);
-
   const rowTemplate = useCallback(
     (row: R, rowIndex: number) => {
       const { className, style } = props.rowClassNameGetter?.(row) ?? {
@@ -61,9 +56,7 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
           <styles.DataGridRow key={`loading-row-${rowIndex}`}>
             {!!props.selectable && (
               <styles.LoadingCell className="animate-pulse">
-                <div
-                // className="bg-gray-200 rounded-full dark:bg-gray-700 w-full h-full"
-                />
+                <div />
               </styles.LoadingCell>
             )}
             {visibleColumns.map((_, index) => (
@@ -71,26 +64,21 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
                 className="animate-pulse"
                 key={`loading-${rowIndex}-${index}`}
               >
-                <div
-                //  className="bg-gray-200 rounded-full dark:bg-gray-700 w-full h-full"
-                />
+                <div />
               </styles.LoadingCell>
             ))}
           </styles.DataGridRow>
         );
       }
-      const key = String(
-        typeof rowKey === 'function' ? rowKey(row) : row[rowKey]
-      );
+      const key = rowKeyGetter(row);
       return (
         <styles.DataGridRow key={key}>
           {!!props.selectable && (
             <styles.SelectionCell key="__select_checkbox__">
               <input
                 type="checkbox"
-                // className="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-600"
                 value={key as string}
-                checked={selectedRows.includes(row)}
+                checked={selectedKeys.includes(key)}
                 onChange={(e) => setRowSelection(row, e.target.checked)}
               />
             </styles.SelectionCell>
@@ -114,8 +102,8 @@ export const DataGrid = <R,>(props: DataGridProps<R>) => {
     [
       DataGridContext,
       props,
-      rowKey,
-      selectedRows,
+      rowKeyGetter,
+      selectedKeys,
       setRowSelection,
       visibleColumns,
     ]

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

@@ -204,6 +204,7 @@ export const DataGridHeaderRow = styled.div.attrs<{
   z-index: 10;
   position: sticky;
   top: ${TOOLBAR_HEIGHT}px;
+  align-items: center;
 
   ${({ $headerColor }) =>
     $headerColor
@@ -225,15 +226,29 @@ 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';
 
-export const SelectionCell = styled.div`
+export const SelectionCell = styled(DataGridCell)`
   /* inline-flex items-center justify-center w-12 select-none text-center whitespace-nowrap */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-6);
+  padding: 0 var(--space-1);
+
   & > input[type='checkbox'] {
-    height: 1rem;
-    width: 1rem;
-    border-radius: 0.25rem;
+    height: var(--space-6);
+    width: var(--space-6);
+    border-radius: var(--rounded-sm);
     border: 1px solid var(--color-neutral-300);
     color: var(--color-sky-600);
   }

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

@@ -15,25 +15,25 @@ 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
-> = {
+export type MysqlJsonObject = Record<string, string | number | null>;
+
+export type DataGridColumn<R> = {
   bodyClassName?: string;
   className?: string;
   editable?: boolean;
   excelFormatter?: (value: any) => string;
   excelValue?: (value: any) => string;
   field?: FieldDTO;
-  filter?: T extends undefined ? never : AnyDataGridFilter<R>;
+  filterField?: FieldDTO;
+  filter?: DataGridFilter;
   footer?: (allRows: R[], filteredRows: R[], selectedRows: R[]) => ReactNode;
   footerClassName?: string;
-  getter?: (row: R) => string | number;
+  getter?: (row: R) => string | number | MysqlJsonObject;
   headerClassName?: string;
   name: string;
   order?: number;
   propertyName?: keyof R;
-  render?: (column: DataGridColumn<R, T>, row: R) => ReactNode | string;
+  render?: (row: R, column: DataGridColumn<R>) => ReactNode | string;
   resizable?: boolean;
   sortGetter?: (row: R) => string | number;
   type?: 'text' | 'number' | 'date';
@@ -41,14 +41,11 @@ export type DataGridColumn<
   settingsContext?: Context<SettingsContextProps>;
 };
 
-export type DataGridColumns<R> = Record<
-  string,
-  DataGridColumn<R, DataGridFilterType | undefined>
->;
+export type DataGridColumns<R> = Record<string, DataGridColumn<R>>;
 
-export type DataGridFilters<R> = Record<
+export type DataGridFilters = Record<
   string,
-  DataGridFilter<R, DataGridFilterType>
+  DataGridFilter<DataGridFilterType>
 >;
 
 export type DataGridProps<R> = {
@@ -61,7 +58,7 @@ export type DataGridProps<R> = {
   editable?: boolean;
   onRowDoubleClick?: (row: R, e: MouseEvent) => void;
   onSelectionChange?: (selectedRows: R[]) => void;
-  onFiltersChanged?: (filters: DataGridFilters<R>) => void;
+  onFiltersChanged?: (filters: DataGridFilters) => void;
   onSortsChanged?: (sorts: Record<string, DataGridSort>) => void;
   onVisibleRowsChange?: (startIndex: number, length: number) => void;
   onCellEdited?: (row: R, columnKey: string, value: any) => void;
@@ -75,7 +72,7 @@ export type DataGridProps<R> = {
   sort?: boolean;
   filterValuesLoader?: (
     columnKey: string
-  ) => Promise<(string | number | null)[]>;
+  ) => Promise<(string | number | null | MysqlJsonObject)[]>;
   // copyTableHandler?: (
   //   includeHeaders?: boolean,
   //   includeFooters?: boolean
@@ -90,11 +87,12 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   setEditingCell: Dispatch<SetStateAction<[number, number]>>;
   sortedRows: R[];
   selectedRows: R[];
-  setSelectedRows: (selection: R[]) => void;
+  selectedKeys: string[];
+  setSelectedKeys: (selection: string[]) => void;
   sorts?: Record<string, DataGridSort>;
   setSorts: (sorts: Record<string, DataGridSort>) => void;
-  filters?: DataGridFilters<R>;
-  setFilters: Dispatch<SetStateAction<DataGridFilters<R>>>;
+  filters?: DataGridFilters;
+  setFilters: Dispatch<SetStateAction<DataGridFilters>>;
   visibleColumns: DataGridColumnKeyValuePair<R>[];
   copyTable: (
     includeHeaders?: boolean,
@@ -109,6 +107,8 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
   index: number;
   length: number;
+  rowKeyGetter: (row: R) => string;
+  gridTemplateColumns: string;
 };
 
 export type DataGridContext<R> = Context<DataGridContextProps<R>>;
@@ -138,7 +138,7 @@ export type DataGridSettingsByName = t.TypeOf<
 >;
 export type DataGridSettingsTuple = [string, DataGridSetting];
 export type DataGridSettingsArray = DataGridSettingsTuple[];
-export type DataGridColumnKeyValuePair<R> = [string, DataGridColumn<R, any>];
+export type DataGridColumnKeyValuePair<R> = [string, DataGridColumn<R>];
 
 export type DataGridCellProps<R> = {
   row: R;
@@ -162,62 +162,65 @@ export type DataGridHeaderCellProps<R> = {
 
 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 DataGridFilterOperators<K extends string, T> = {
+  [key in K]: DataGridFilterPredicateBuilder<T>;
+};
 
 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>;
-  };
+  text: DataGridFilterOperators<
+    | 'contains'
+    | 'notContains'
+    | 'equals'
+    | 'notEquals'
+    | 'startsWith'
+    | 'endsWith'
+    | 'inArray',
+    string
+  >;
+  number: DataGridFilterOperators<
+    | 'equals'
+    | 'notEquals'
+    | 'lessThan'
+    | 'lessThanOrEqual'
+    | 'greaterThan'
+    | 'greaterThanOrEqual'
+    | 'inRange'
+    | 'inArray',
+    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 DataGridFilterType = keyof DataGridFilterPredicates;
+export type DataGridFilterDataType<T extends DataGridFilterType> =
+  DataGridFilterPredicates[T] extends DataGridFilterOperators<string, infer U>
+    ? U
+    : never;
 
-export type AnyDataGridFilter<R> =
-  | DataGridFilter<R, 'text'>
-  | DataGridFilter<R, 'number'>;
+export type DataGridFilterGetter<T extends DataGridFilterType> = (
+  value: any
+) => DataGridFilterDataType<T> | null;
+export type DataGridFilterFormatter = (value: any) => string | null;
+
+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>;
+        formatter?: DataGridFilterFormatter;
+        values: (DataGridFilterDataType<T> | null)[];
+      }
+    : never;
 
 export type DataGridFilterGroup<R> = {
   name: string;

package/src/components/data/index.ts

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

package/src/components/forms/IconButton.tsx

@@ -13,7 +13,6 @@ const styles = {
   IconButton: styled(Button).attrs({
     className: 'IconButton',
   })<Omit<IconButtonProps, 'icon'>>`
-    border-radius: 100%;
     &.small {
       padding: var(--space-1);
       height: var(--space-6);

package/src/components/forms/IndeterminateCheckbox.tsx

@@ -38,7 +38,7 @@ export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = ({
         ' '
       )}
       ref={checkbox}
-      checked={checked}
+      checked={!!checked}
       onChange={onChange}
       {...props}
     />

package/src/components/layout/Modal/index.tsx

@@ -40,7 +40,7 @@ export const Modal: ModalFC = ({
     [children, closeOnBackdropClick, createPortal, onClose, props]
   );
 
-  return modalPortal;
+  return <>{modalPortal}</>;
 };
 
 Modal.Header = styles.ModalHeader;

package/src/providers/PortalsProvider/index.tsx

@@ -19,11 +19,11 @@ export type PortalProps = {
 };
 
 export type PortalsContextType = {
-  createPortal: (children: ReactNode) => ReactPortal | undefined;
+  createPortal: (children: ReactNode) => ReactPortal | null;
 };
 
 export const PortalsContext = createContext<PortalsContextType>({
-  createPortal: () => undefined,
+  createPortal: () => null,
 });
 
 export const PortalsProvider: FC<PropsWithChildren> = ({ children }) => {

package/src/services/advancedRequests.ts

@@ -35,6 +35,7 @@ export type ConditionDTO = {
     | 'greaterThan'
     | 'like'
     | 'contains'
+    | 'notContains'
     | 'startsWith'
     | 'endsWith'
     | 'notLike'

package/src/components/data/DataGrid/helpers/advancedRequests.tsx

@@ -1,61 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {
-  AdvancedRequestDTO,
-  ConditionDTO,
-  OrderByDTO,
-} from '../../../../services/advancedRequests';
-
-import { DataGridColumns } from '../types';
-
-export const getAdvancedRequestDto = <R,>({
-  type,
-  columns,
-  conditions = [],
-  orderBy = [],
-  start = 0,
-  length = 100,
-  getTotal = false,
-  addIdColumn = true,
-}: {
-  type: string;
-  columns: DataGridColumns<R>;
-  conditions?: ConditionDTO[];
-  orderBy?: OrderByDTO[];
-  start?: number;
-  length?: number;
-  getTotal?: boolean;
-  addIdColumn?: boolean;
-}): AdvancedRequestDTO => ({
-  fields: [
-    ...(Object.keys(columns).includes('Id') || addIdColumn === false
-      ? []
-      : [{ fieldName: 'Id' }]),
-    ...Object.keys(columns).map((key) =>
-      columns[key].field
-        ? {
-            ...columns[key].field,
-            fieldName: columns[key].field?.fieldName ?? key,
-            fieldAlias: key,
-          }
-        : {
-            fieldName: key,
-            fieldAlias: key,
-          }
-    ),
-  ],
-  conditions: [
-    ...conditions,
-    {
-      field: {
-        fieldName: 'DeletedAt',
-      },
-      operator: 'isNull' as const,
-    },
-  ],
-  orderBy,
-  type,
-  start,
-  length,
-  getTotal,
-});