@addev-be/ui 0.11.4 → 0.11.5

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

@@ -0,0 +1,118 @@
+import * as t from 'io-ts';
+export declare const userDtoCodec: t.IntersectionC<[t.TypeC<{
+    username: t.StringC;
+    permissions: t.ArrayC<t.StringC>;
+    isAdmin: t.BooleanC;
+    profile: t.UnionC<[t.TypeC<{
+        name: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.NullC]>;
+    id: t.UnionC<[t.StringC, t.NullC]>;
+}>, t.PartialC<{
+    name: t.StringC;
+    email: t.StringC;
+    lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+}>]>;
+export type UserDTO = t.TypeOf<typeof userDtoCodec>;
+/*****/
+export declare const getUserRequestDtoCodec: t.TypeC<{
+    id: t.StringC;
+}>;
+export declare const getUserResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+    data: t.IntersectionC<[t.TypeC<{
+        username: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        profile: t.UnionC<[t.TypeC<{
+            name: t.StringC;
+            permissions: t.ArrayC<t.StringC>;
+            isAdmin: t.BooleanC;
+            id: t.UnionC<[t.StringC, t.NullC]>;
+        }>, t.NullC]>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.PartialC<{
+        name: t.StringC;
+        email: t.StringC;
+        lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+    }>]>;
+}>;
+export type GetUserRequestDTO = t.TypeOf<typeof getUserRequestDtoCodec>;
+export type GetUserResponseDTO = t.TypeOf<typeof getUserResponseDtoCodec>;
+/*****/
+export declare const getAllUsersRequestDtoCodec: t.TypeC<{}>;
+export declare const getAllUsersResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+    data: t.ArrayC<t.IntersectionC<[t.TypeC<{
+        username: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        profile: t.UnionC<[t.TypeC<{
+            name: t.StringC;
+            permissions: t.ArrayC<t.StringC>;
+            isAdmin: t.BooleanC;
+            id: t.UnionC<[t.StringC, t.NullC]>;
+        }>, t.NullC]>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.PartialC<{
+        name: t.StringC;
+        email: t.StringC;
+        lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+    }>]>>;
+}>;
+export type GetAllUsersRequestDTO = t.TypeOf<typeof getAllUsersRequestDtoCodec>;
+export type GetAllUsersResponseDTO = t.TypeOf<typeof getAllUsersResponseDtoCodec>;
+/*****/
+export declare const saveUserRequestDtoCodec: t.TypeC<{
+    data: t.IntersectionC<[t.IntersectionC<[t.TypeC<{
+        username: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        profile: t.UnionC<[t.TypeC<{
+            name: t.StringC;
+            permissions: t.ArrayC<t.StringC>;
+            isAdmin: t.BooleanC;
+            id: t.UnionC<[t.StringC, t.NullC]>;
+        }>, t.NullC]>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.PartialC<{
+        name: t.StringC;
+        email: t.StringC;
+        lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+    }>]>, t.PartialC<{
+        password: t.StringC;
+    }>]>;
+    password: t.StringC;
+}>;
+export declare const saveUserResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+    data: t.IntersectionC<[t.TypeC<{
+        username: t.StringC;
+        permissions: t.ArrayC<t.StringC>;
+        isAdmin: t.BooleanC;
+        profile: t.UnionC<[t.TypeC<{
+            name: t.StringC;
+            permissions: t.ArrayC<t.StringC>;
+            isAdmin: t.BooleanC;
+            id: t.UnionC<[t.StringC, t.NullC]>;
+        }>, t.NullC]>;
+        id: t.UnionC<[t.StringC, t.NullC]>;
+    }>, t.PartialC<{
+        name: t.StringC;
+        email: t.StringC;
+        lastLogin: t.UnionC<[t.StringC, t.NullC]>;
+    }>]>;
+}>;
+export type SaveUserRequestDTO = t.TypeOf<typeof saveUserRequestDtoCodec>;
+export type SaveUserResponseDTO = t.TypeOf<typeof saveUserResponseDtoCodec>;
+/*****/
+export declare const deleteUserRequestDtoCodec: t.TypeC<{
+    id: t.StringC;
+}>;
+export declare const deleteUserResponseDtoCodec: t.TypeC<{
+    status: t.NumberC;
+}>;
+export type DeleteUserRequestDTO = t.TypeOf<typeof deleteUserRequestDtoCodec>;
+export type DeleteUserResponseDTO = t.TypeOf<typeof deleteUserResponseDtoCodec>;

package/dist/services/types/users.js

@@ -0,0 +1,83 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteUserResponseDtoCodec = exports.deleteUserRequestDtoCodec = exports.saveUserResponseDtoCodec = exports.saveUserRequestDtoCodec = exports.getAllUsersResponseDtoCodec = exports.getAllUsersRequestDtoCodec = exports.getUserResponseDtoCodec = exports.getUserRequestDtoCodec = exports.userDtoCodec = void 0;
+var t = __importStar(require("io-ts"));
+var base_1 = require("./base");
+var userProfiles_1 = require("./userProfiles");
+exports.userDtoCodec = t.intersection([
+    t.type(__assign(__assign({}, base_1.baseModelDtoCodec.props), { username: t.string, permissions: t.array(t.string), isAdmin: t.boolean, profile: t.union([userProfiles_1.userProfileDtoCodec, t.null]) })),
+    t.partial({
+        name: t.string,
+        email: t.string,
+        lastLogin: t.union([t.string, t.null]),
+    }),
+], 'UserDTO');
+/*****/
+exports.getUserRequestDtoCodec = t.type({
+    id: t.string,
+}, 'GetUserRequestDTO');
+exports.getUserResponseDtoCodec = t.type({
+    status: t.number,
+    data: exports.userDtoCodec,
+}, 'GetUserResponseDTO');
+/*****/
+exports.getAllUsersRequestDtoCodec = t.type({}, 'GetAllUsersRequestDTO');
+exports.getAllUsersResponseDtoCodec = t.type({
+    status: t.number,
+    data: t.array(exports.userDtoCodec),
+}, 'GetAllUsersResponseDTO');
+/*****/
+exports.saveUserRequestDtoCodec = t.type({
+    data: t.intersection([
+        exports.userDtoCodec,
+        t.partial({
+            password: t.string,
+        }),
+    ]),
+    password: t.string,
+}, 'SaveUserRequestDTO');
+exports.saveUserResponseDtoCodec = t.type({
+    status: t.number,
+    data: exports.userDtoCodec,
+}, 'SaveUserResponseDTO');
+/*****/
+exports.deleteUserRequestDtoCodec = t.type({
+    id: t.string,
+}, 'DeleteUserRequestDTO');
+exports.deleteUserResponseDtoCodec = t.type({
+    status: t.number,
+}, 'DeleteUserResponseDTO');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

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

@@ -3,10 +3,9 @@
 
 import * as styles from './styles';
 
-import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 import { ChevronDownIcon } from '../../../Icons';
-import { DEFAULT_COLUMN_WIDTH } from './constants';
 import { DataGridFilterMenu } from './DataGridFilterMenu';
 import { DataGridHeaderCellProps } from './types';
 import { Dropdown } from '../../layout';
@@ -24,41 +23,14 @@ export const DataGridHeaderCell = <R,>({
   const contextValue = useDataGridContext(context);
   const {
     filters = {},
-    setColumnWidth,
-    saveSettings,
     headerColor,
+    resizingColumnKey,
+    startResizing,
   } = contextValue;
   const filterButtonRef = useRef<HTMLButtonElement | null>(null);
 
   /** RESIZING */
 
-  const [isResizing, setIsResizing] = useState(false);
-  const resizingOffset = useRef(0);
-
-  const onResizeStart = useCallback(
-    (e: MouseEvent) => {
-      resizingOffset.current =
-        e.screenX - (column.width || DEFAULT_COLUMN_WIDTH);
-      setIsResizing(true);
-    },
-    [column.width]
-  );
-
-  const onResizeMove = useCallback(
-    (e: MouseEvent) => {
-      if (isResizing) {
-        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
-        setColumnWidth(columnKey, newWidth);
-      }
-    },
-    [columnKey, isResizing, setColumnWidth]
-  );
-
-  const onResizeEnd = useCallback(() => {
-    setIsResizing(false);
-    saveSettings();
-  }, [saveSettings]);
-
   const [isFilterDropdownVisible, setIsFilterDropdownVisible] = useState(false);
   const filterDropdown = useMemo(() => {
     if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
@@ -95,6 +67,7 @@ export const DataGridHeaderCell = <R,>({
     setIsFilterDropdownVisible(true);
   }, []);
 
+  const isResizing = resizingColumnKey === columnKey;
   const hasFilters = filters[columnKey]?.values.length > 0;
 
   return (
@@ -119,14 +92,8 @@ export const DataGridHeaderCell = <R,>({
           <styles.DataGridResizeGrip
             className={isResizing ? 'active' : ''}
             $headerColor={headerColor}
-            onMouseDown={onResizeStart}
+            onMouseDown={(e) => startResizing(e, columnKey)}
           />
-          {isResizing && (
-            <styles.ResizeBackdrop
-              onMouseMove={onResizeMove}
-              onMouseUp={onResizeEnd}
-            />
-          )}
         </>
       )}
     </styles.DataGridHeaderCellContainer>

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

@@ -12,6 +12,7 @@ import {
   DataGridSort,
 } from '../types';
 import {
+  MouseEvent,
   createContext,
   useCallback,
   useEffect,
@@ -19,10 +20,10 @@ import {
   useRef,
   useState,
 } from 'react';
+import { merge, pickBy } from 'lodash';
 import { useDataGridCopy, useSortedColumns } from '.';
 
 import { applyFilter } from '../helpers';
-import { merge } from 'lodash';
 import { useDataGridSettings } from './useDataGridSettings';
 
 export const useDataGrid = <R,>(
@@ -69,7 +70,13 @@ export const useDataGrid = <R,>(
 
   // Update columns when settings change
   useEffect(() => {
-    setColumns((prev) => merge({}, prev, settings));
+    setColumns((prev) =>
+      merge(
+        {},
+        prev,
+        pickBy(settings, (_, key) => key in prev)
+      )
+    );
   }, [settings]);
 
   /** ROWS SELECTION **/
@@ -166,6 +173,36 @@ export const useDataGrid = <R,>(
   /** VIRTUAL SCROLLING */
   const scrollableRef = useRef<HTMLDivElement>(null);
 
+  /** RESIZING */
+  const [resizingColumnKey, setResizingColumnKey] = useState<string | null>(
+    null
+  );
+  const resizingOffset = useRef(0);
+
+  const startResizing = useCallback(
+    (e: MouseEvent, columnKey: string) => {
+      resizingOffset.current =
+        e.screenX - (columns[columnKey]?.width || DEFAULT_COLUMN_WIDTH);
+      setResizingColumnKey(columnKey);
+    },
+    [columns]
+  );
+
+  const moveResizing = useCallback(
+    (e: MouseEvent) => {
+      if (resizingColumnKey) {
+        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
+        setColumnWidth(resizingColumnKey, newWidth);
+      }
+    },
+    [resizingColumnKey, setColumnWidth]
+  );
+
+  const endResizing = useCallback(() => {
+    setResizingColumnKey(null);
+    saveSettings();
+  }, [saveSettings]);
+
   /** FOOTERS */
   const [footers, setFooters] = useState<Record<string, string>>(
     props.initialFooters ?? {}
@@ -229,6 +266,10 @@ export const useDataGrid = <R,>(
       setFooters,
       footerFunctions,
       toggleSelection,
+      resizingColumnKey,
+      startResizing,
+      moveResizing,
+      endResizing,
       ...override,
     }),
     [
@@ -246,12 +287,15 @@ export const useDataGrid = <R,>(
       settings,
       setSettings,
       saveSettings,
-      scrollableRef,
       rowKeyGetter,
       gridTemplateColumns,
       footers,
       footerFunctions,
       toggleSelection,
+      resizingColumnKey,
+      startResizing,
+      moveResizing,
+      endResizing,
       override,
     ]
   );
@@ -282,6 +326,10 @@ export const useDataGrid = <R,>(
         footers: {},
         setFooters: () => {},
         toggleSelection: () => {},
+        resizingColumnKey: null,
+        startResizing: () => {},
+        moveResizing: () => {},
+        endResizing: () => {},
       }),
     []
   );

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

@@ -47,6 +47,9 @@ export const DataGridInner = <R,>(
     refresh,
     setSelectedKeys,
     fixedColumnsCount,
+    resizingColumnKey,
+    moveResizing,
+    endResizing,
   } = contextProps;
 
   useImperativeHandle(
@@ -82,6 +85,12 @@ export const DataGridInner = <R,>(
         className={className}
         $fixedColumnWidths={fixedColumnWidths}
       >
+        {resizingColumnKey && (
+          <styles.ResizeBackdrop
+            onMouseMove={moveResizing}
+            onMouseUp={endResizing}
+          />
+        )}
         <DataGridHeader context={DataGridContext} />
         <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
           integrated

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

@@ -1,4 +1,3 @@
-import styled, { css } from 'styled-components';
 import {
   DEFAULT_FOOTER_ROW_HEIGHT,
   DEFAULT_HEADER_ROW_HEIGHT,
@@ -6,6 +5,7 @@ import {
   SELECTION_CELL_WIDTH,
   TOOLBAR_HEIGHT,
 } from './constants';
+import styled, { css } from 'styled-components';
 
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 import { VirtualScrollerFiller } from '../VirtualScroller/styles';
@@ -331,5 +331,6 @@ export const ResizeBackdrop = styled.div.attrs({
   bottom: 0;
   background-color: rgba(0, 0, 0, 0);
   cursor: col-resize;
+  z-index: 100;
 `;
 ResizeBackdrop.displayName = 'ResizeBackdrop';

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

@@ -130,6 +130,10 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   length: number;
   rowKeyGetter: (row: R) => string;
   gridTemplateColumns: string;
+  resizingColumnKey: string | null;
+  startResizing: (e: MouseEvent, columnKey: string) => void;
+  moveResizing: (e: MouseEvent) => void;
+  endResizing: () => void;
   toggleSelection: (key: string) => void;
 };
 

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

@@ -44,7 +44,7 @@ export type SqlRequestGridProps<R, P extends object = {}> = {
   orderBy?: OrderByDTO[];
   conditions?: ConditionDTO[];
   parser?: (row: SqlRequestRow<R>) => R;
-  itemProps: P;
+  itemProps: P | ((item: R) => P);
   initialSorts?: Record<string, DataGridSort>;
 };
 

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

@@ -15,7 +15,7 @@ type VirtualScrollerProps<R, P extends object> = {
   gap?: string;
   itemsPerRow?: number;
   tolerance?: number;
-  itemProps: P;
+  itemProps: P | ((item: R) => P);
   onRangeChanged?: (index: number, length: number) => void;
   integrated?: boolean;
 };
@@ -70,14 +70,18 @@ export const VirtualScroller = <R, P extends object>({
           $itemHeight={rowHeightInPx}
           $gap={gap}
         >
-          {visibleItems.map((item, currentIndex) => (
-            <ItemTemplate
-              key={indexWithTolerance + currentIndex}
-              item={item}
-              index={currentIndex}
-              {...itemProps}
-            />
-          ))}
+          {visibleItems.map((item, currentIndex) => {
+            const currentItemProps =
+              typeof itemProps === 'function' ? itemProps(item) : itemProps;
+            return (
+              <ItemTemplate
+                key={indexWithTolerance + currentIndex}
+                item={item}
+                index={currentIndex}
+                {...currentItemProps}
+              />
+            );
+          })}
         </styles.VirtualScrollerItemsContainer>
       </styles.VirtualScrollerFiller>
     </styles.VirtualScrollerContainer>

package/src/components/ui/Avatar/styles.ts

@@ -1,61 +1,61 @@
-import styled, { css } from 'styled-components';
-
-export type AvatarContainerProps = {
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-
-const stylesMap: Record<
-  AvatarContainerProps['size'],
-  ReturnType<typeof css>
-> = {
-  xs: css`
-    width: var(--size-6);
-    height: var(--size-6);
-    min-width: var(--size-6);
-    min-height: var(--size-6);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs);
-  `,
-  sm: css`
-    width: var(--size-8);
-    height: var(--size-8);
-    min-width: var(--size-8);
-    min-height: var(--size-8);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm);
-  `,
-  md: css`
-    width: var(--size-10);
-    height: var(--size-10);
-    min-width: var(--size-10);
-    min-height: var(--size-10);
-    font-size: var(--text-md);
-    line-height: var(--text-md);
-  `,
-  lg: css`
-    width: var(--size-12);
-    height: var(--size-12);
-    min-width: var(--size-12);
-    min-height: var(--size-12);
-    font-size: var(--text-lg);
-    line-height: var(--text-lg);
-  `,
-  xl: css`
-    width: var(--size-14);
-    height: var(--size-14);
-    min-width: var(--size-14);
-    min-height: var(--size-14);
-    font-size: var(--text-2xl);
-    line-height: var(--text-2xl);
-  `,
-};
-
-export const AvatarContainer = styled.div<AvatarContainerProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--rounded-full);
-  user-select: none;
-
-  ${({ size }) => stylesMap[size]}
-`;
+import styled, { css } from 'styled-components';
+
+export type AvatarContainerProps = {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+const stylesMap: Record<
+  AvatarContainerProps['size'],
+  ReturnType<typeof css>
+> = {
+  xs: css`
+    width: var(--size-6);
+    height: var(--size-6);
+    min-width: var(--size-6);
+    min-height: var(--size-6);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs);
+  `,
+  sm: css`
+    width: var(--size-8);
+    height: var(--size-8);
+    min-width: var(--size-8);
+    min-height: var(--size-8);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm);
+  `,
+  md: css`
+    width: var(--size-10);
+    height: var(--size-10);
+    min-width: var(--size-10);
+    min-height: var(--size-10);
+    font-size: var(--text-md);
+    line-height: var(--text-md);
+  `,
+  lg: css`
+    width: var(--size-12);
+    height: var(--size-12);
+    min-width: var(--size-12);
+    min-height: var(--size-12);
+    font-size: var(--text-lg);
+    line-height: var(--text-lg);
+  `,
+  xl: css`
+    width: var(--size-14);
+    height: var(--size-14);
+    min-width: var(--size-14);
+    min-height: var(--size-14);
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl);
+  `,
+};
+
+export const AvatarContainer = styled.div<AvatarContainerProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rounded-full);
+  user-select: none;
+
+  ${({ size }) => stylesMap[size]}
+`;