@addev-be/ui 1.2.1 → 2.0.0

package/dist/services/types/users.d.ts

@@ -1,11 +1,11 @@
 import * as z from 'zod';
 export declare const userDtoSchema: z.ZodObject<{
-    id: z.ZodNullable<z.ZodString>;
+    id: z.ZodUUID;
     username: z.ZodString;
     permissions: z.ZodArray<z.ZodString>;
     isAdmin: z.ZodBoolean;
     profile: z.ZodNullable<z.ZodObject<{
-        id: z.ZodNullable<z.ZodString>;
+        id: z.ZodUUID;
         name: z.ZodString;
         permissions: z.ZodArray<z.ZodString>;
         isAdmin: z.ZodBoolean;
@@ -22,12 +22,12 @@ export declare const getUserRequestDtoSchema: z.ZodObject<{
 export declare const getUserResponseDtoSchema: z.ZodObject<{
     status: z.ZodNumber;
     data: z.ZodObject<{
-        id: z.ZodNullable<z.ZodString>;
+        id: z.ZodUUID;
         username: z.ZodString;
         permissions: z.ZodArray<z.ZodString>;
         isAdmin: z.ZodBoolean;
         profile: z.ZodNullable<z.ZodObject<{
-            id: z.ZodNullable<z.ZodString>;
+            id: z.ZodUUID;
             name: z.ZodString;
             permissions: z.ZodArray<z.ZodString>;
             isAdmin: z.ZodBoolean;
@@ -44,12 +44,12 @@ export declare const getAllUsersRequestDtoSchema: z.ZodObject<{}, z.core.$strip>
 export declare const getAllUsersResponseDtoSchema: z.ZodObject<{
     status: z.ZodNumber;
     data: z.ZodArray<z.ZodObject<{
-        id: z.ZodNullable<z.ZodString>;
+        id: z.ZodUUID;
         username: z.ZodString;
         permissions: z.ZodArray<z.ZodString>;
         isAdmin: z.ZodBoolean;
         profile: z.ZodNullable<z.ZodObject<{
-            id: z.ZodNullable<z.ZodString>;
+            id: z.ZodUUID;
             name: z.ZodString;
             permissions: z.ZodArray<z.ZodString>;
             isAdmin: z.ZodBoolean;
@@ -64,12 +64,12 @@ export type GetAllUsersResponseDTO = z.infer<typeof getAllUsersResponseDtoSchema
 /*****/
 export declare const saveUserRequestDtoSchema: z.ZodObject<{
     data: z.ZodObject<{
-        id: z.ZodNullable<z.ZodString>;
+        id: z.ZodUUID;
         username: z.ZodString;
         permissions: z.ZodArray<z.ZodString>;
         isAdmin: z.ZodBoolean;
         profile: z.ZodNullable<z.ZodObject<{
-            id: z.ZodNullable<z.ZodString>;
+            id: z.ZodUUID;
             name: z.ZodString;
             permissions: z.ZodArray<z.ZodString>;
             isAdmin: z.ZodBoolean;
@@ -84,12 +84,12 @@ export declare const saveUserRequestDtoSchema: z.ZodObject<{
 export declare const saveUserResponseDtoSchema: z.ZodObject<{
     status: z.ZodNumber;
     data: z.ZodObject<{
-        id: z.ZodNullable<z.ZodString>;
+        id: z.ZodUUID;
         username: z.ZodString;
         permissions: z.ZodArray<z.ZodString>;
         isAdmin: z.ZodBoolean;
         profile: z.ZodNullable<z.ZodObject<{
-            id: z.ZodNullable<z.ZodString>;
+            id: z.ZodUUID;
             name: z.ZodString;
             permissions: z.ZodArray<z.ZodString>;
             isAdmin: z.ZodBoolean;

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = T extends Function ? T : T extends Array<infer U> ? Array<U> : T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,10 +20,10 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^1.2.1",
+    "@addev-be/framework-utils": "^2.0.0",
     "@types/lodash": "^4.17.20",
-    "@types/react": "^18.3.24",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react-swc": "^4.1.0",
     "eslint": "^9.36.0",

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

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

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

@@ -1,12 +1,13 @@
-import { ForwardedRef, forwardRef, useCallback } from 'react';
-
 import { DataGridEditableCellProps } from './types';
 import moment from 'moment';
+import { useCallback } from 'react';
 
-const DateEditableCellInner = <R,>(
-  { value, onChange, onClose }: DataGridEditableCellProps<R, string>,
-  ref: ForwardedRef<HTMLInputElement>
-) => {
+export const DateEditableCell = <R,>({
+  value,
+  onChange,
+  onClose,
+  ref,
+}: DataGridEditableCellProps<R, string>) => {
   const onBlur = useCallback(() => {
     onClose(true);
   }, [onClose]);
@@ -35,5 +36,3 @@ const DateEditableCellInner = <R,>(
     />
   );
 };
-
-export const DateEditableCell = forwardRef(DateEditableCellInner);

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/helpers/columns.tsx

@@ -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/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

@@ -6,9 +6,8 @@ import {
   useSqlRequestHandler,
 } from '../../../services';
 import {
-  ForwardedRef,
   MouseEvent,
-  forwardRef,
+  Ref,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -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);