@addev-be/ui 1.2.1 → 2.1.0

package/src/components/data/DataGrid/DataGridEditableCell/NumberEditableCell.tsx

@@ -1,4 +1,3 @@
-import { ForwardedRef, forwardRef, useCallback } from 'react';
 import {
   decimalSeparator,
   getCurrencySymbol,
@@ -7,25 +6,24 @@ import {
 
 import { DataGridEditableCellProps } from './types';
 import { NumericFormat } from 'react-number-format';
+import { useCallback } from 'react';
 
-const NumberEditableCellInner = <R,>(
-  {
-    decimals = 0,
-    currency,
-    prefix: prefixFromProps,
-    suffix: suffixFromProps,
-    row,
-    value,
-    onChange,
-    onClose,
-  }: DataGridEditableCellProps<R, number> & {
-    decimals?: number;
-    currency?: string | ((row: R) => string);
-    prefix?: string;
-    suffix?: string;
-  },
-  ref: ForwardedRef<HTMLElement>
-) => {
+export const NumberEditableCell = <R,>({
+  decimals = 0,
+  currency,
+  prefix: prefixFromProps,
+  suffix: suffixFromProps,
+  row,
+  value,
+  onChange,
+  onClose,
+  ref,
+}: DataGridEditableCellProps<R, number> & {
+  decimals?: number;
+  currency?: string | ((row: R) => string);
+  prefix?: string;
+  suffix?: string;
+}) => {
   const currencyName =
     typeof currency === 'function' ? currency(row) : currency;
 
@@ -71,5 +69,3 @@ const NumberEditableCellInner = <R,>(
     />
   );
 };
-
-export const NumberEditableCell = forwardRef(NumberEditableCellInner);

package/src/components/data/DataGrid/DataGridEditableCell/TextEditableCell.tsx

@@ -1,11 +1,12 @@
-import { Ref, forwardRef, useCallback } from 'react';
-
 import { DataGridEditableCellProps } from './types';
+import { useCallback } from 'react';
 
-const TextEditableCellInner = <R,>(
-  { value, onChange, onClose }: DataGridEditableCellProps<R, string>,
-  ref: Ref<HTMLInputElement>
-) => {
+export const TextEditableCell = <R,>({
+  value,
+  onChange,
+  onClose,
+  ref,
+}: DataGridEditableCellProps<R, string>) => {
   const onBlur = useCallback(() => {
     onClose(true);
   }, [onClose]);
@@ -34,5 +35,3 @@ const TextEditableCellInner = <R,>(
     />
   );
 };
-
-export const TextEditableCell = forwardRef(TextEditableCellInner);

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { ReactNode, Ref } from 'react';
+import { FC, Ref } from 'react';
 
 import { DataGridContext } from '../types';
 
@@ -8,12 +8,11 @@ export type DataGridEditableCellProps<R, T> = {
   ref?: Ref<any>;
   row: R;
   value: T;
-  onChange: (value: T) => void;
+  onChange: (value: T | null) => void;
   onClose: (save: boolean) => void;
   context: DataGridContext<R>;
 };
 
-export type DataGridEditableCellFC<R, T = any> = (
-  props: DataGridEditableCellProps<R, T>,
-  ref: Ref<any>
-) => ReactNode;
+export type DataGridEditableCellFC<R, T = any> = FC<
+  DataGridEditableCellProps<R, T>
+>;

package/src/components/data/DataGrid/DataGridFilterMenu/FilterValuesScroller.tsx

@@ -11,7 +11,7 @@ import { defaultRendererAndFormatter, getCheckboxes } from '../helpers';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { debounce } from 'lodash';
-import { useElementSize } from '../../../../hooks';
+import { useElementSize } from '../../../../hooks/useElementSize';
 
 const CheckboxTemplate = ({
   selectedValues,

package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx

@@ -6,7 +6,7 @@ import {
 import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../../forms';
+import { Button } from '../../../forms/Button';
 import { FilterModalContent } from '../FilterModalContent';
 import { Modal } from '../../../layout/Modal';
 import { useDataGridContext } from '../hooks';

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

@@ -45,7 +45,7 @@ import {
 
 import { ContextMenu } from '../../../ui/ContextMenu';
 import { FilterValuesScroller } from './FilterValuesScroller';
-import { Input } from '../../../forms';
+import { Input } from '../../../forms/styles';
 import { MenuContainer } from '../../../ui/ContextMenu/styles';
 import { sortAvailableValues } from './helpers';
 import { useFilterModal } from './hooks';

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

@@ -7,10 +7,10 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { ChevronDownIcon } from '../../../Icons';
 import { DataGridFilterMenu } from './DataGridFilterMenu';
 import { DataGridHeaderCellProps } from './types';
-import { Dropdown } from '../../layout';
+import { Dropdown } from '../../layout/Dropdown';
 import { IconButton } from '../../forms/IconButton';
 import { useDataGridContext } from './hooks';
-import { useUi } from '../../../providers';
+import { useUi } from '../../../providers/hooks';
 
 export const DataGridHeaderCell = <R,>({
   columnKey,

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

@@ -10,9 +10,9 @@ import {
 } from '../../../Icons';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../forms';
+import { Button } from '../../forms/Button';
 import { DataGridContext } from './types';
-import { Loading } from '../../layout';
+import { Loading } from '../../layout/Loading';
 import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
 import { useDataGridContext } from './hooks';
 import { useRefreshModal } from './hooks/useRefreshModal';

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

@@ -7,9 +7,11 @@ import {
   DataGridFilterOperator,
   DataGridFilterType,
 } from '../types';
-import { Input, Select } from '../../../forms';
 import { useEffect, useRef } from 'react';
 
+import { Input } from '../../../forms/styles';
+import { Select } from '../../../forms/Select';
+
 // import { Select } from '../../Select';
 // import clx from 'classnames';
 

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

@@ -11,7 +11,7 @@ import {
   DataGridTextColumn,
 } from '../types';
 import { dateFilter, numberFilter, textFilter } from './filters';
-import { formatDate, formatDateTime } from '../../../../helpers';
+import { formatDate, formatDateTime } from '../../../../helpers/dates';
 import {
   formatMoney,
   formatNumber,
@@ -21,16 +21,15 @@ import {
 
 import { CheckboxEditableCell } from '../DataGridEditableCell/CheckboxEditableCell';
 import { DateEditableCell } from '../DataGridEditableCell/DateEditableCell';
-import { DeepPartial } from '../../../../typings';
+import { DeepPartial } from '../../../../types';
 import { NumberEditableCell } from '../DataGridEditableCell/NumberEditableCell';
-import { Ref } from 'react';
 import { Select } from '../../../forms/Form/Select';
 import { SqlRequestDataGridTextColumn } from '../../SqlRequestDataGrid/types';
 import { StyledTypography } from '../../../../helpers/styled/typography';
 import { TextEditableCell } from '../DataGridEditableCell/TextEditableCell';
-import { forwardRefWithName } from '../../../../helpers/components';
 import moment from 'moment';
 import { repeat } from 'lodash';
+import { withDisplayName } from '../../../../helpers/components';
 
 export const isColumnVisible = <R,>(
   obj: DataGridColumn<R> | DataGridSettings
@@ -236,13 +235,13 @@ export const numberColumn = <R extends Record<string, any>>(
       ...numberFilter(key),
       renderer: (value) => formatNumber(value, decimals) ?? '',
     },
-    editComponent: forwardRefWithName(
-      (props, ref: Ref<HTMLInputElement>) => (
+    editComponent: withDisplayName(
+      ({ ref, ...otherProps }) => (
         <NumberEditableCell<R>
           ref={ref}
           decimals={column.decimals}
           currency={column.currency}
-          {...props}
+          {...otherProps}
         />
       ),
       'NumberColumnEditComponent'
@@ -417,8 +416,8 @@ export const selectColumn = <R extends Record<string, any>, T>(
   items,
   itemKey,
   itemLabel,
-  editComponent: forwardRefWithName(
-    ({ value, onChange, onClose }, ref: Ref<HTMLSelectElement>) => (
+  editComponent: withDisplayName(
+    ({ value, onChange, onClose, ref }) => (
       <Select<T>
         ref={ref}
         items={items}

package/src/components/data/DataGrid/hooks/useDataGridSettings.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import { DataGridSettings } from '../types';
-import { useSettings } from '../../../../providers';
+import { useSettings } from '../../../../providers/hooks';
 
 export const useDataGridSettings = (name?: string) => {
   // TODO: Implement settings context

package/src/components/data/DataGrid/hooks/useRefreshModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 
-import { Button } from '../../../forms';
+import { Button } from '../../../forms/Button';
 import { Modal } from '../../../layout/Modal';
 import { TriangleExclamationIcon } from '../../../../Icons';
 

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

@@ -1,13 +1,6 @@
 import * as styles from './styles';
 
-import {
-  Context,
-  ForwardedRef,
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
+import { Context, useImperativeHandle, useMemo, useRef } from 'react';
 import {
   DEFAULT_COLUMN_WIDTH,
   DEFAULT_ROW_HEIGHT,
@@ -23,15 +16,13 @@ import { VirtualScroller } from '../VirtualScroller';
 import { extractSpaceProps } from '../../../helpers/styled/space';
 import { useDataGrid } from './hooks';
 
-export const DataGridInner = <R,>(
-  {
-    contextOverride,
-    ...props
-  }: DataGridProps<R> & {
-    contextOverride?: Partial<DataGridContextProps<R>>;
-  },
-  ref: ForwardedRef<DataGridRefProps<R>>
-) => {
+export const DataGrid = <R,>({
+  contextOverride,
+  ...props
+}: DataGridProps<R> & {
+  contextOverride?: Partial<DataGridContextProps<R>>;
+  ref: React.Ref<DataGridRefProps<R>>;
+}) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const { className } = props;
   const spaceProps = extractSpaceProps(props);
@@ -55,7 +46,7 @@ export const DataGridInner = <R,>(
   } = contextProps;
 
   useImperativeHandle(
-    ref,
+    props.ref,
     () => ({
       refresh: refresh ?? (() => {}),
       setSelectedKeys,
@@ -118,5 +109,3 @@ export const DataGridInner = <R,>(
     </DataGridContext.Provider>
   );
 };
-
-export const DataGrid = forwardRef(DataGridInner);

package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx

@@ -1,7 +1,5 @@
-/* eslint-disable react/display-name */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { Ref, forwardRef, useContext } from 'react';
 import { SqlImage, SqlImageWrapper } from '../styles';
 import {
   SqlRequestDataGridCheckboxColumn,
@@ -16,6 +14,7 @@ import {
   numberFilter,
   textFilter,
 } from '../../DataGrid/helpers';
+import { convertItemToPartialRow, convertRowToItem } from './rows';
 import { formatDate, formatDateTime } from '../../../../helpers/dates';
 import {
   formatMoney,
@@ -23,17 +22,18 @@ import {
   formatNumberInvariant,
   formatPercentage,
 } from '../../../../helpers/numbers';
-import { mapKeys, merge } from 'lodash';
 
 import { CheckboxEditableCell } from '../../DataGrid/DataGridEditableCell/CheckboxEditableCell';
 import { DEFAULT_ROW_HEIGHT } from '../../DataGrid/constants';
 import { DateEditableCell } from '../../DataGrid/DataGridEditableCell/DateEditableCell';
-import { DeepPartial } from '../../../../typings';
+import { DeepPartial } from '../../../../types';
 import { NumberEditableCell } from '../../DataGrid/DataGridEditableCell/NumberEditableCell';
 import { SqlRequestForeignList } from '../../SqlRequestForeignList';
 import { SqlRequestForeignListItemFC } from '../../SqlRequestForeignList/types';
 import { StyledTypography } from '../../../../helpers/styled/typography';
 import { TextEditableCell } from '../../DataGrid/DataGridEditableCell/TextEditableCell';
+import { merge } from 'lodash';
+import { useContext } from 'react';
 
 export const sqlTextColumn = <R extends Record<string, any>>(
   key: string,
@@ -237,16 +237,16 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
       max: null,
       min: null,
     },
-    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
+    editComponent: ({ ref, ...otherProps }) => (
       <NumberEditableCell<R>
         ref={ref}
         decimals={column.decimals}
         currency={column.currency}
         prefix={column.prefix}
         suffix={column.suffix}
-        {...props}
+        {...otherProps}
       />
-    )),
+    ),
   };
   return merge(column, options);
 };
@@ -301,14 +301,14 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
       max: null,
       min: null,
     },
-    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
+    editComponent: ({ ref, ...otherProps }) => (
       <NumberEditableCell<R>
         ref={ref}
         decimals={column.decimals}
         currency={column.currency}
-        {...props}
+        {...otherProps}
       />
-    )),
+    ),
   };
   return merge(column, options);
 };
@@ -339,14 +339,14 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
       getter: (value) => value[key] ?? 0,
       renderer: (value) => formatPercentage(value, decimals) ?? '',
     },
-    editComponent: forwardRef((props, ref: Ref<HTMLInputElement>) => (
+    editComponent: ({ ref, ...otherProps }) => (
       <NumberEditableCell<R>
         ref={ref}
         decimals={column.decimals}
         currency={column.currency}
-        {...props}
+        {...otherProps}
       />
-    )),
+    ),
   };
   return merge(column, options);
 };
@@ -444,27 +444,6 @@ export const sqlColorColumn = <R extends Record<string, any>>(
     options
   );
 
-const convertRowToItem = <R extends Record<string, any>, T>(
-  row: R,
-  columnMapping: Record<string, keyof R>
-) => mapKeys(row, (_, key) => columnMapping[key]) as T;
-
-const convertItemToPartialRow = <
-  R extends Record<string, any>,
-  T extends Record<string, any>
->(
-  key: string,
-  row: R,
-  item: T | null,
-  columnMapping: Record<keyof R, keyof T>
-): Partial<R> => {
-  const partialRow = { Id: key } as unknown as Partial<R>;
-  Object.entries(columnMapping).forEach(([key, value]: [keyof R, keyof T]) => {
-    partialRow[key] = (item?.[value] ?? null) as R[keyof R];
-  });
-  return partialRow;
-};
-
 export const sqlForeignListColumn = <
   R extends Record<string, any>,
   T extends Record<string, any>,
@@ -499,26 +478,25 @@ export const sqlForeignListColumn = <
     idColumn: 'Id',
     itemTemplate: ItemTemplate,
     columns: Object.values(columnMapping),
-    editComponent: forwardRef(
-      ({ row, onChange, onClose, context }, ref: Ref<HTMLDivElement>) => {
-        const { rowHeight = DEFAULT_ROW_HEIGHT } = useContext(context);
-        return (
-          <SqlRequestForeignList<T>
-            initialValue={convertRowToItem<R, T>(row, columnMapping)}
-            maxRows={10}
-            rowHeight={rowHeight - 2}
-            onItemChanged={onChange}
-            onBlur={() => onClose(true)}
-            ref={ref}
-            requestName={column.requestName}
-            idColumn={column.idColumn}
-            columns={column.columns}
-            itemTemplate={column.itemTemplate}
-            valueTemplate={column.valueTemplate}
-          />
-        );
-      }
-    ),
+    editComponent: ({ row, onChange, onClose, context, ref }) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { rowHeight = DEFAULT_ROW_HEIGHT } = useContext(context);
+      return (
+        <SqlRequestForeignList<T>
+          initialValue={convertRowToItem<R, T>(row, columnMapping)}
+          maxRows={10}
+          rowHeight={rowHeight - 2}
+          onItemChanged={onChange}
+          onBlur={() => onClose(true)}
+          ref={ref}
+          requestName={column.requestName}
+          idColumn={column.idColumn}
+          columns={column.columns}
+          itemTemplate={column.itemTemplate}
+          valueTemplate={column.valueTemplate}
+        />
+      );
+    },
     itemToPartialRow: (key, row, value) =>
       convertItemToPartialRow(key, row, value, columnMapping),
   };

package/src/components/data/SqlRequestDataGrid/helpers/rows.ts

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { mapKeys } from 'lodash';
+
+export const convertRowToItem = <R extends Record<string, any>, T>(
+  row: R,
+  columnMapping: Record<string, keyof R>
+) => mapKeys(row, (_, key) => columnMapping[key]) as T;
+
+export const convertItemToPartialRow = <
+  R extends Record<string, any>,
+  T extends Record<string, any>
+>(
+  key: string,
+  row: R,
+  item: T | null,
+  columnMapping: Record<keyof R, keyof T>
+): Partial<R> => {
+  const partialRow = { Id: key } as unknown as Partial<R>;
+  Object.entries(columnMapping).forEach(([key, value]: [keyof R, keyof T]) => {
+    partialRow[key] = (item?.[value] ?? null) as R[keyof R];
+  });
+  return partialRow;
+};

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

@@ -14,10 +14,9 @@ import {
 } from '../DataGrid/types';
 import {
   Dispatch,
-  ForwardedRef,
   ReactNode,
+  Ref,
   SetStateAction,
-  forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -32,14 +31,14 @@ import { SqlRequestDataGridProps } from './types';
 import { convertSqlFiltersToConditions } from './helpers';
 import { isColumnVisible } from '../DataGrid/helpers';
 
-export const SqlRequestDataGridInner = <R,>(
-  {
-    onSelectionChange: onSelectionChangeFromProps,
-    rowKey,
-    ...props
-  }: SqlRequestDataGridProps<R>,
-  ref: ForwardedRef<DataGridRefProps<R>>
-) => {
+export const SqlRequestDataGrid = <R,>({
+  onSelectionChange: onSelectionChangeFromProps,
+  rowKey,
+  ref,
+  ...props
+}: SqlRequestDataGridProps<R> & {
+  ref?: Ref<DataGridRefProps<R>>;
+}) => {
   const currentRows = useRef<R[]>([]);
   const [rows, setRows] = useState<R[]>([]);
   const setRowsRef = useCallback<Dispatch<SetStateAction<R[]>>>((value) => {
@@ -416,5 +415,3 @@ export const SqlRequestDataGridInner = <R,>(
     />
   );
 };
-
-export const SqlRequestDataGrid = forwardRef(SqlRequestDataGridInner);

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

@@ -4,11 +4,10 @@ import {
   ConditionDTO,
   OrderByDTO,
   useSqlRequestHandler,
-} from '../../../services';
+} from '../../../services/sqlRequests';
 import {
-  ForwardedRef,
   MouseEvent,
-  forwardRef,
+  Ref,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -27,7 +26,7 @@ import {
 } from './types';
 
 import { ChevronDownIcon } from '../../../Icons';
-import { Dropdown } from '../../layout';
+import { Dropdown } from '../../layout/Dropdown';
 import { VirtualScroller } from '../VirtualScroller';
 import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
 import { debounce } from 'lodash';
@@ -79,25 +78,25 @@ const createItemTemplate = <R extends Record<string, any>>(
     );
   }, 'SqlRequestForeignListCreateItemTemplate');
 
-export const SqlRequestForeignListInner = <T extends Record<string, any>>(
-  {
-    requestName,
-    idColumn,
-    columns = [],
-    initialValue = null,
-    onItemChanged,
-    onIdChanged,
-    onClosed,
-    onBlur,
-    itemTemplate,
-    valueTemplate,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    maxRows = 10,
-    orderBy = [],
-    conditions = [],
-  }: SqlRequestForeignListProps<T>,
-  ref: ForwardedRef<HTMLDivElement>
-) => {
+export const SqlRequestForeignList = <T extends Record<string, any>>({
+  requestName,
+  idColumn,
+  columns = [],
+  initialValue = null,
+  onItemChanged,
+  onIdChanged,
+  onClosed,
+  onBlur,
+  itemTemplate,
+  valueTemplate,
+  rowHeight = DEFAULT_ROW_HEIGHT,
+  maxRows = 10,
+  orderBy = [],
+  conditions = [],
+  ref,
+}: SqlRequestForeignListProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}) => {
   const [opened, setOpened] = useState(false);
   const [rect, setRect] = useState<DOMRect | null>(null);
 
@@ -253,5 +252,3 @@ export const SqlRequestForeignListInner = <T extends Record<string, any>>(
     </>
   );
 };
-
-export const SqlRequestForeignList = forwardRef(SqlRequestForeignListInner);

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

@@ -1,4 +1,4 @@
-import { ConditionDTO, OrderByDTO } from '../../../services';
+import { ConditionDTO, OrderByDTO } from '../../../services/sqlRequests';
 
 import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
 

package/src/components/data/SqlRequestGrid/filters/FiltersSidebar.tsx

@@ -11,7 +11,7 @@ import { SqlRequestGridColumnWithFilter, SqlRequestGridProps } from '../types';
 
 import { DataGridContext } from '../../DataGrid/types';
 import { DataGridFilterMenu } from '../../DataGrid/DataGridFilterMenu';
-import { IconButton } from '../../../forms';
+import { IconButton } from '../../../forms/IconButton';
 
 type FiltersSidebarProps<R, P extends object = {}> = {
   props: SqlRequestGridProps<R, P>;