feat!: userSettings for package (#3243)

Author: astandrik

src/components/Drawer/Drawer.tsx

@@ -3,19 +3,25 @@ import React from 'react';
 import {Xmark} from '@gravity-ui/icons';
 import {DrawerItem, Drawer as GravityDrawer} from '@gravity-ui/navigation';
 import {ActionTooltip, Button, Flex, Icon, Text} from '@gravity-ui/uikit';
+import {debounce} from 'lodash';
 
 import {cn} from '../../utils/cn';
-import {isNumeric} from '../../utils/utils';
+import {useSetting} from '../../utils/hooks/useSetting';
 import {CopyLinkButton} from '../CopyLinkButton/CopyLinkButton';
 import {Portal} from '../Portal/Portal';
 
 import {useDrawerContext} from './DrawerContext';
+import {
+    normalizeDrawerWidthFromResize,
+    normalizeDrawerWidthFromSavedString,
+} from './DrawerWidthUtils';
 
 import './Drawer.scss';
 
 const DEFAULT_DRAWER_WIDTH_PERCENTS = 60;
 const DEFAULT_DRAWER_WIDTH = 600;
 const DRAWER_WIDTH_KEY = 'drawer-width';
+const SAVE_DEBOUNCE_MS = 200;
 const b = cn('ydb-drawer');
 
 type DrawerEvent = MouseEvent & {
@@ -49,13 +55,24 @@ const DrawerPaneContentWrapper = ({
     isPercentageWidth,
     hideVeil = true,
 }: DrawerPaneContentWrapperProps) => {
-    const [drawerWidth, setDrawerWidth] = React.useState(() => {
-        const savedWidth = localStorage.getItem(storageKey);
-        return isNumeric(savedWidth) ? Number(savedWidth) : defaultWidth;
-    });
+    const [savedWidthString, setSavedWidthString] = useSetting<string | undefined>(storageKey);
+    const [userDrawerWidth, setUserDrawerWidth] = React.useState<number | undefined>(undefined);
 
     const drawerRef = React.useRef<HTMLDivElement>(null);
     const {containerWidth, itemContainerRef} = useDrawerContext();
+
+    const derivedDrawerWidth = React.useMemo(() => {
+        return normalizeDrawerWidthFromSavedString({
+            savedWidthString,
+            defaultWidth,
+            isPercentageWidth,
+            containerWidth,
+            defaultPercents: DEFAULT_DRAWER_WIDTH_PERCENTS,
+            defaultPx: DEFAULT_DRAWER_WIDTH,
+        });
+    }, [containerWidth, defaultWidth, isPercentageWidth, savedWidthString]);
+
+    const drawerWidth = userDrawerWidth ?? derivedDrawerWidth;
     // Calculate drawer width based on container width percentage if specified
     const calculatedWidth = React.useMemo(() => {
         if (isPercentageWidth && containerWidth > 0) {
@@ -91,19 +108,30 @@ const DrawerPaneContentWrapper = ({
         };
     }, [isVisible, onClose, detectClickOutside]);
 
+    const saveWidthDebounced = React.useMemo(() => {
+        return debounce((value: string) => setSavedWidthString(value), SAVE_DEBOUNCE_MS);
+    }, [setSavedWidthString]);
+
+    React.useEffect(() => {
+        return () => {
+            saveWidthDebounced.cancel();
+        };
+    }, [saveWidthDebounced]);
+
     const handleResizeDrawer = (width: number) => {
-        if (isPercentageWidth && containerWidth > 0) {
-            const percentageWidth = Math.round((width / containerWidth) * 100);
-            setDrawerWidth(percentageWidth);
-            localStorage.setItem(storageKey, percentageWidth.toString());
-        } else {
-            setDrawerWidth(width);
-            localStorage.setItem(storageKey, width.toString());
-        }
+        const normalized = normalizeDrawerWidthFromResize({
+            resizedWidthPx: width,
+            isPercentageWidth,
+            containerWidth,
+        });
+
+        setUserDrawerWidth(normalized.drawerWidth);
+        saveWidthDebounced(normalized.savedWidthString);
     };
 
     const handleClickInsideDrawer = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-        (event.nativeEvent as DrawerEvent)._capturedInsideDrawer = true;
+        const nativeEvent = event.nativeEvent as DrawerEvent;
+        nativeEvent._capturedInsideDrawer = true;
     };
 
     const itemContainer = itemContainerRef?.current;
@@ -124,7 +152,7 @@ const DrawerPaneContentWrapper = ({
                     visible={isVisible}
                     resizable
                     maxResizeWidth={containerWidth}
-                    width={isPercentageWidth ? calculatedWidth : drawerWidth}
+                    width={calculatedWidth}
                     onResize={handleResizeDrawer}
                     direction={direction}
                     className={b('item')}

src/components/Drawer/DrawerWidthUtils.ts

@@ -0,0 +1,98 @@
+import {isNumeric} from '../../utils/utils';
+
+export const MIN_DRAWER_WIDTH_PERCENTS = 1;
+export const MAX_DRAWER_WIDTH_PERCENTS = 100;
+export const MIN_DRAWER_WIDTH_PX = 1;
+
+function clamp(value: number, min: number, max: number) {
+    return Math.min(max, Math.max(min, value));
+}
+
+function getFallbackWidth(args: {
+    defaultWidth?: number;
+    isPercentageWidth?: boolean;
+    defaultPercents: number;
+    defaultPx: number;
+}) {
+    const {defaultWidth, isPercentageWidth, defaultPercents, defaultPx} = args;
+    if (defaultWidth !== undefined) {
+        return defaultWidth;
+    }
+    return isPercentageWidth ? defaultPercents : defaultPx;
+}
+
+export function normalizeDrawerWidthFromSavedString(args: {
+    savedWidthString: string | undefined;
+    defaultWidth?: number;
+    isPercentageWidth?: boolean;
+    containerWidth: number;
+    defaultPercents: number;
+    defaultPx: number;
+}) {
+    const {
+        savedWidthString,
+        defaultWidth,
+        isPercentageWidth,
+        containerWidth,
+        defaultPercents,
+        defaultPx,
+    } = args;
+
+    const fallback = getFallbackWidth({
+        defaultWidth,
+        isPercentageWidth,
+        defaultPercents,
+        defaultPx,
+    });
+
+    if (!isNumeric(savedWidthString)) {
+        return fallback;
+    }
+
+    const raw = Number(savedWidthString);
+    if (!Number.isFinite(raw)) {
+        return fallback;
+    }
+
+    if (isPercentageWidth) {
+        return clamp(raw, MIN_DRAWER_WIDTH_PERCENTS, MAX_DRAWER_WIDTH_PERCENTS);
+    }
+
+    if (raw < MIN_DRAWER_WIDTH_PX) {
+        return fallback;
+    }
+
+    if (containerWidth > 0) {
+        return Math.min(raw, containerWidth);
+    }
+
+    return raw;
+}
+
+export function normalizeDrawerWidthFromResize(args: {
+    resizedWidthPx: number;
+    isPercentageWidth?: boolean;
+    containerWidth: number;
+}) {
+    const {resizedWidthPx, isPercentageWidth, containerWidth} = args;
+
+    if (isPercentageWidth && containerWidth > 0) {
+        const percentageWidthRaw = Math.round((resizedWidthPx / containerWidth) * 100);
+        const percentageWidth = clamp(
+            percentageWidthRaw,
+            MIN_DRAWER_WIDTH_PERCENTS,
+            MAX_DRAWER_WIDTH_PERCENTS,
+        );
+
+        return {
+            drawerWidth: percentageWidth,
+            savedWidthString: percentageWidth.toString(),
+        } as const;
+    }
+
+    const cappedWidth =
+        containerWidth > 0 ? Math.min(resizedWidthPx, containerWidth) : resizedWidthPx;
+    const safeWidth = Math.max(MIN_DRAWER_WIDTH_PX, cappedWidth);
+
+    return {drawerWidth: safeWidth, savedWidthString: safeWidth.toString()} as const;
+}

src/components/Drawer/__test__/DrawerWidthUtils.test.ts

@@ -0,0 +1,125 @@
+import {
+    MAX_DRAWER_WIDTH_PERCENTS,
+    MIN_DRAWER_WIDTH_PERCENTS,
+    MIN_DRAWER_WIDTH_PX,
+    normalizeDrawerWidthFromResize,
+    normalizeDrawerWidthFromSavedString,
+} from '../DrawerWidthUtils';
+
+describe('DrawerWidthUtils', () => {
+    describe('normalizeDrawerWidthFromSavedString', () => {
+        it('falls back when savedWidthString is missing/invalid', () => {
+            expect(
+                normalizeDrawerWidthFromSavedString({
+                    savedWidthString: undefined,
+                    defaultWidth: 123,
+                    isPercentageWidth: false,
+                    containerWidth: 0,
+                    defaultPercents: 60,
+                    defaultPx: 600,
+                }),
+            ).toBe(123);
+
+            expect(
+                normalizeDrawerWidthFromSavedString({
+                    savedWidthString: 'abc',
+                    defaultWidth: undefined,
+                    isPercentageWidth: true,
+                    containerWidth: 0,
+                    defaultPercents: 60,
+                    defaultPx: 600,
+                }),
+            ).toBe(60);
+        });
+
+        it('clamps percentage width to [1..100]', () => {
+            expect(
+                normalizeDrawerWidthFromSavedString({
+                    savedWidthString: '-10',
+                    defaultWidth: undefined,
+                    isPercentageWidth: true,
+                    containerWidth: 0,
+                    defaultPercents: 60,
+                    defaultPx: 600,
+                }),
+            ).toBe(MIN_DRAWER_WIDTH_PERCENTS);
+
+            expect(
+                normalizeDrawerWidthFromSavedString({
+                    savedWidthString: '1000',
+                    defaultWidth: undefined,
+                    isPercentageWidth: true,
+                    containerWidth: 0,
+                    defaultPercents: 60,
+                    defaultPx: 600,
+                }),
+            ).toBe(MAX_DRAWER_WIDTH_PERCENTS);
+        });
+
+        it('enforces px width >= 1 and caps to containerWidth when provided', () => {
+            expect(
+                normalizeDrawerWidthFromSavedString({
+                    savedWidthString: '0',
+                    defaultWidth: 200,
+                    isPercentageWidth: false,
+                    containerWidth: 0,
+                    defaultPercents: 60,
+                    defaultPx: 600,
+                }),
+            ).toBe(200);
+
+            expect(
+                normalizeDrawerWidthFromSavedString({
+                    savedWidthString: '500',
+                    defaultWidth: undefined,
+                    isPercentageWidth: false,
+                    containerWidth: 300,
+                    defaultPercents: 60,
+                    defaultPx: 600,
+                }),
+            ).toBe(300);
+        });
+    });
+
+    describe('normalizeDrawerWidthFromResize', () => {
+        it('returns percent width when isPercentageWidth and containerWidth > 0', () => {
+            const normalized = normalizeDrawerWidthFromResize({
+                resizedWidthPx: 240,
+                isPercentageWidth: true,
+                containerWidth: 400,
+            });
+
+            expect(normalized.drawerWidth).toBe(60);
+            expect(normalized.savedWidthString).toBe('60');
+        });
+
+        it('clamps percent width to [1..100]', () => {
+            const normalized = normalizeDrawerWidthFromResize({
+                resizedWidthPx: 10_000,
+                isPercentageWidth: true,
+                containerWidth: 100,
+            });
+
+            expect(normalized.drawerWidth).toBe(MAX_DRAWER_WIDTH_PERCENTS);
+            expect(normalized.savedWidthString).toBe(String(MAX_DRAWER_WIDTH_PERCENTS));
+        });
+
+        it('caps px width to containerWidth (when provided) and enforces >= 1px', () => {
+            const normalized = normalizeDrawerWidthFromResize({
+                resizedWidthPx: 0,
+                isPercentageWidth: false,
+                containerWidth: 0,
+            });
+            expect(normalized.drawerWidth).toBe(MIN_DRAWER_WIDTH_PX);
+            expect(normalized.savedWidthString).toBe(String(MIN_DRAWER_WIDTH_PX));
+
+            const capped = normalizeDrawerWidthFromResize({
+                resizedWidthPx: 500,
+                isPercentageWidth: false,
+                containerWidth: 300,
+            });
+            expect(capped.drawerWidth).toBe(300);
+            expect(capped.savedWidthString).toBe('300');
+        });
+    });
+});