Repository: storybookjs/storybook
File: code/core/src/manager/components/preview/Viewport.tsx (TypeScript)

Code before:
      dragStart.current = undefined;
    };

    const onStart = (e: MouseEvent) => {
      e.preventDefault();
      window.addEventListener('mouseup', onEnd);
      window.addEventListener('mousemove', onDrag);
      dragSide.current = (e.currentTarget as HTMLElement).dataset.side as DragSide;
      dragStart.current = [
        (targetRef.current?.clientWidth ?? 0) - e.clientX,
        (targetRef.current?.clientHeight ?? 0) - e.clientY,
      ];
      setDragging(dragSide.current);
    };

    const handles = [dragRefX.current, dragRefY.current, dragRefXY.current];
    handles.forEach((el) => el?.addEventListener('mousedown', onStart));
    return () => handles.forEach((el) => el?.removeEventListener('mousedown', onStart));
  }, [resize, scale]);

  const dimensions = useMemo(() => {
    const { number: nx, unit: ux = 'px' } = parseNumber(width) ?? { number: 0, unit: 'px' };
    const { number: ny, unit: uy = 'px' } = parseNumber(height) ?? { number: 0, unit: 'px' };
    const vw = Math.max(VIEWPORT_MIN_WIDTH, nx * scale);
    const vh = Math.max(VIEWPORT_MIN_HEIGHT, ny * scale);
    return { nx, ny, ux, uy, vw, vh };
  }, [width, height, scale]);

  const frameStyles = useMemo(() => {
    const { vw, ux, vh, uy } = dimensions;
    return { width: `${vw}${ux}`, height: `${vh}${uy}` };
  }, [dimensions]);

  return (
    <ViewportWrapper key={id} active={active} isDefault={isDefault}>
      {!isDefault && (
        <ViewportControls>
          <ViewportDimensions>
            <SizeInput
              aria-label="Viewport width"
              data-size-input="width"
              label="Viewport width"
              before={
                <ActionList.Action size="small" readOnly aria-hidden>
                  W
                </ActionList.Action>
              }
              value={width}
              minValue={0}
              setValue={(value) => resize(value, height)}
            />

Review comment (suggestion):
I'd prefer if we would use more descriptive names.

I do not know what the `n`, `u`, `v` prefixes stand for.

Code after:
      e.preventDefault();
      window.addEventListener('mouseup', onEnd);
      window.addEventListener('mousemove', onDrag);
      dragSide.current = (e.currentTarget as HTMLElement).dataset.side as DragSide;
      dragStart.current = [
        (targetRef.current?.clientWidth ?? 0) - e.clientX,
        (targetRef.current?.clientHeight ?? 0) - e.clientY,
      ];
      dragScrollTarget.current = targetRef.current?.querySelector(
        `[data-edge="${dragSide.current}"]`
      );
      setDragging(dragSide.current);
    };

    const handles = [dragRefX.current, dragRefY.current, dragRefXY.current];
    handles.forEach((el) => el?.addEventListener('mousedown', onStart));
    return () => handles.forEach((el) => el?.removeEventListener('mousedown', onStart));
  }, [resize, scale]);

  const dimensions = useMemo(() => {
    const { number: nx, unit: ux = 'px' } = parseNumber(width) ?? { number: 0, unit: 'px' };
    const { number: ny, unit: uy = 'px' } = parseNumber(height) ?? { number: 0, unit: 'px' };
    const frameWidth = Math.max(VIEWPORT_MIN_WIDTH, nx * scale);
    const frameHeight = Math.max(VIEWPORT_MIN_HEIGHT, ny * scale);
    return {
      frame: {
        width: `${frameWidth}${ux}`,
        height: `${frameHeight}${uy}`,
      },
      display: {
        width: `${nx}${ux === 'px' ? '' : ux}`,
        height: `${ny}${uy === 'px' ? '' : uy}`,
      },
    };
  }, [width, height, scale]);

  return (
    <ViewportWrapper key={id} active={active} isDefault={isDefault}>
      {!isDefault && (
        <ViewportControls>
          <ViewportDimensions>
            <SizeInput
              aria-label="Viewport width"
              data-size-input="width"
              label="Viewport width"
              before={
                <ActionList.Action size="small" readOnly aria-hidden>
                  W
                </ActionList.Action>
              }
              value={width}