@redocly/theme 0.61.0 → 0.62.0-custom.0

package/src/components/SvgViewer/SvgViewer.tsx

@@ -0,0 +1,405 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import type { JSX, TouchEvent as ReactTouchEvent, WheelEvent, MouseEvent, ReactNode } from 'react';
+
+import { useModalScrollLock } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { AddIcon } from '@redocly/theme/icons/AddIcon/AddIcon';
+import { SubtractIcon } from '@redocly/theme/icons/SubtractIcon/SubtractIcon';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { FitToViewIcon } from '@redocly/theme/icons/FitToViewIcon/FitToViewIcon';
+
+export type SvgViewerLabels = {
+  zoomIn?: string;
+  zoomOut?: string;
+  fitToView?: string;
+  close?: string;
+  dialogLabel?: string;
+};
+
+export type SvgViewerProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  labels?: SvgViewerLabels;
+};
+
+type Position = { x: number; y: number };
+
+const MIN_SCALE_FACTOR = 0.1;
+const MAX_SCALE_FACTOR = 5;
+const ZOOM_STEP = 0.1;
+const WHEEL_SENSITIVITY = 0.002;
+const VIEWPORT_PADDING = 60;
+const FIT_SCALE_FACTOR = 0.9;
+
+export function SvgViewer({
+  isOpen,
+  onClose,
+  children,
+  labels = {},
+}: SvgViewerProps): JSX.Element | null {
+  const [scale, setScale] = useState(1);
+  const [baseScale, setBaseScale] = useState(1);
+  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState<Position>({ x: 0, y: 0 });
+  const [pinchState, setPinchState] = useState<{ distance: number; scale: number } | null>(null);
+  const [isWheelZooming, setIsWheelZooming] = useState(false);
+
+  const wheelTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const renderedScaleRef = useRef(scale);
+
+  useModalScrollLock(isOpen);
+
+  // Keep track of the actually rendered scale for accurate measurements
+  useLayoutEffect(() => {
+    renderedScaleRef.current = scale;
+  }, [scale]);
+
+  const minScale = baseScale * MIN_SCALE_FACTOR;
+  const maxScale = baseScale * MAX_SCALE_FACTOR;
+
+  const clampScale = useCallback(
+    (value: number) => Math.min(maxScale, Math.max(minScale, value)),
+    [minScale, maxScale],
+  );
+
+  const calculateFitScale = useCallback(() => {
+    if (!viewportRef.current || !contentRef.current) return 1;
+
+    const viewport = viewportRef.current.getBoundingClientRect();
+    const svg = contentRef.current.querySelector('svg');
+    if (!svg) return 1;
+
+    const svgRect = svg.getBoundingClientRect();
+    if (!svgRect.width || !svgRect.height) return 1;
+
+    // getBoundingClientRect returns transformed size, so compensate for current scale
+    const currentScale = renderedScaleRef.current || 1;
+    const naturalWidth = svgRect.width / currentScale;
+    const naturalHeight = svgRect.height / currentScale;
+
+    const availableWidth = viewport.width - VIEWPORT_PADDING * 2;
+    const availableHeight = viewport.height - VIEWPORT_PADDING * 2;
+
+    return (
+      Math.min(availableWidth / naturalWidth, availableHeight / naturalHeight) * FIT_SCALE_FACTOR
+    );
+  }, []);
+
+  const resetView = useCallback(() => {
+    setScale(baseScale);
+    setPosition({ x: 0, y: 0 });
+  }, [baseScale]);
+
+  const zoomIn = useCallback(() => {
+    setScale((s) => clampScale(s + baseScale * ZOOM_STEP));
+  }, [baseScale, clampScale]);
+
+  const zoomOut = useCallback(() => {
+    setScale((s) => clampScale(s - baseScale * ZOOM_STEP));
+  }, [baseScale, clampScale]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          onClose();
+          break;
+        case '+':
+        case '=':
+          zoomIn();
+          break;
+        case '-':
+          zoomOut();
+          break;
+        case '0':
+          resetView();
+          break;
+      }
+    },
+    [onClose, zoomIn, zoomOut, resetView],
+  );
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      setIsWheelZooming(true);
+      if (wheelTimeoutRef.current) clearTimeout(wheelTimeoutRef.current);
+      wheelTimeoutRef.current = setTimeout(() => setIsWheelZooming(false), 150);
+
+      const delta = -e.deltaY * WHEEL_SENSITIVITY;
+      setScale((s) => clampScale(s + s * delta));
+    },
+    [clampScale],
+  );
+
+  const handleMouseDown = useCallback(
+    (e: MouseEvent) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    },
+    [position],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      setPosition({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
+    },
+    [isDragging, dragStart],
+  );
+
+  const handleMouseUp = useCallback(() => setIsDragging(false), []);
+
+  const getTouchDistance = (touches: React.TouchList): number => {
+    if (touches.length !== 2) return 0;
+    const dx = touches[0].clientX - touches[1].clientX;
+    const dy = touches[0].clientY - touches[1].clientY;
+    return Math.hypot(dx, dy);
+  };
+
+  const handleTouchStart = useCallback(
+    (e: ReactTouchEvent) => {
+      if (e.touches.length === 2) {
+        setPinchState({ distance: getTouchDistance(e.touches), scale });
+      } else if (e.touches.length === 1) {
+        setIsDragging(true);
+        setDragStart({
+          x: e.touches[0].clientX - position.x,
+          y: e.touches[0].clientY - position.y,
+        });
+      }
+    },
+    [position, scale],
+  );
+
+  const handleTouchMove = useCallback(
+    (e: ReactTouchEvent) => {
+      e.preventDefault();
+      if (e.touches.length === 2 && pinchState) {
+        const distance = getTouchDistance(e.touches);
+        setScale(clampScale(pinchState.scale * (distance / pinchState.distance)));
+      } else if (e.touches.length === 1 && isDragging) {
+        setPosition({
+          x: e.touches[0].clientX - dragStart.x,
+          y: e.touches[0].clientY - dragStart.y,
+        });
+      }
+    },
+    [pinchState, isDragging, dragStart, clampScale],
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    setIsDragging(false);
+    setPinchState(null);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setPosition({ x: 0, y: 0 });
+    overlayRef.current?.focus();
+
+    // Wait for DOM to be ready before measuring
+    requestAnimationFrame(() => {
+      const fitScale = calculateFitScale();
+      setBaseScale(fitScale);
+      setScale(fitScale);
+    });
+  }, [isOpen, calculateFitScale]);
+
+  if (!isOpen) return null;
+
+  const zoomPercentage = baseScale > 0 ? Math.round((scale / baseScale) * 100) : 100;
+  const isAnimating = !isDragging && !isWheelZooming && !pinchState;
+
+  return (
+    <Overlay
+      ref={overlayRef}
+      onClick={onClose}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      aria-modal="true"
+      role="dialog"
+      aria-label={labels.dialogLabel || 'SVG viewer'}
+    >
+      <Viewport
+        ref={viewportRef}
+        onClick={(e) => e.stopPropagation()}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        $isDragging={isDragging}
+      >
+        <Content
+          ref={contentRef}
+          $isAnimating={isAnimating}
+          style={{
+            transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px)) scale(${scale})`,
+          }}
+        >
+          {children}
+        </Content>
+        <Controls>
+          <ControlGroup>
+            <Tooltip tip={labels.zoomOut || 'Zoom out'} placement="top">
+              <ControlButton
+                variant="text"
+                size="small"
+                icon={<SubtractIcon />}
+                onClick={zoomOut}
+                disabled={scale <= minScale}
+              />
+            </Tooltip>
+            <ZoomLabel>{zoomPercentage}%</ZoomLabel>
+            <Tooltip tip={labels.zoomIn || 'Zoom in'} placement="top">
+              <ControlButton
+                variant="text"
+                size="small"
+                icon={<AddIcon />}
+                onClick={zoomIn}
+                disabled={scale >= maxScale}
+              />
+            </Tooltip>
+            <Divider />
+            <Tooltip tip={labels.fitToView || 'Fit to view'} placement="top">
+              <ControlButton
+                variant="text"
+                size="small"
+                icon={<FitToViewIcon />}
+                onClick={resetView}
+              />
+            </Tooltip>
+            <Tooltip tip={labels.close || 'Close'} placement="top">
+              <ControlButton variant="text" size="small" icon={<CloseIcon />} onClick={onClose} />
+            </Tooltip>
+          </ControlGroup>
+        </Controls>
+      </Viewport>
+    </Overlay>
+  );
+}
+
+const scaleIn = keyframes`
+  from {
+    transform: scale(0.9);
+  }
+  to {
+    transform: scale(1);
+  }
+`;
+
+const slideUp = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+`;
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background-color: var(--svg-viewer-overlay-bg-color);
+  backdrop-filter: blur(var(--spacing-unit));
+  z-index: var(--z-index-overlay, 1000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xxl);
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-md);
+  }
+`;
+
+const Viewport = styled.div<{ $isDragging: boolean }>`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--svg-viewer-bg-color);
+  border-radius: var(--svg-viewer-border-radius);
+  overflow: hidden;
+  cursor: ${({ $isDragging }) => ($isDragging ? 'grabbing' : 'grab')};
+  touch-action: none;
+  box-shadow: var(--svg-viewer-box-shadow);
+  animation: ${scaleIn} 0.25s ease-in-out forwards;
+`;
+
+const Content = styled.div<{ $isAnimating: boolean }>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: center center;
+  user-select: none;
+  pointer-events: none;
+  transition: ${({ $isAnimating }) => ($isAnimating ? 'transform 0.25s ease-in-out' : 'none')};
+
+  svg {
+    display: block;
+    max-width: none !important;
+  }
+`;
+
+const Controls = styled.div`
+  position: absolute;
+  bottom: var(--spacing-sm);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  animation: ${slideUp} 0.3s ease-out 0.1s backwards;
+`;
+
+const ControlGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: var(--spacing-xxs);
+  background: var(--bg-color-raised);
+  border: 1px solid var(--border-color-primary);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--bg-raised-shadow);
+`;
+
+const ControlButton = styled(Button)`
+  --button-icon-size: 16px;
+`;
+
+const ZoomLabel = styled.span`
+  min-width: 40px;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-color-secondary);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: var(--spacing-base);
+  background: var(--border-color-primary);
+  margin: 0 var(--spacing-xxs);
+`;

package/src/components/SvgViewer/variables.dark.ts

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export const svgViewerDarkMode = css`
+  --svg-viewer-bg-color: var(--color-warm-grey-9);
+`;

package/src/components/SvgViewer/variables.ts

@@ -0,0 +1,14 @@
+import { css } from 'styled-components';
+
+export const svgViewer = css`
+  /**
+   * @tokens SVG Viewer
+   */
+
+  --svg-viewer-overlay-bg-color: var(--bg-color-modal-overlay); // @presenter Color
+  --svg-viewer-bg-color: var(--bg-color); // @presenter Color
+  --svg-viewer-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --svg-viewer-box-shadow: var(--bg-raised-shadow); // @presenter BoxShadow
+
+  // @tokens End
+`;

package/src/components/Tag/Tag.tsx

@@ -243,7 +243,8 @@ const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagPro
     `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: var(--tag-bg-color);
+  background-color: ${({ variant }) =>
+    variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
   ${({ borderless }) =>
     borderless
       ? ''

package/src/components/Tag/variables.dark.ts

@@ -182,6 +182,12 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: #3A465F; // @presenter Color
   }
 
+  .tag-query {
+    --tag-color: #68cc97; // @presenter Color
+    --tag-bg-color: #1F3D2D; // @presenter Color
+    --tag-bg-color-hover: #34654B; // @presenter Color
+  }
+
   .tag-put {
     --tag-color: #e0a663; // @presenter Color
     --tag-bg-color: #3D2D1B; // @presenter Color

package/src/components/Tag/variables.ts

@@ -295,6 +295,12 @@ export const tag = css`
     --tag-bg-color-hover: #CEDDFD; // @presenter Color
   }
 
+  .tag-query {
+    --tag-color: #25b869; // @presenter Color
+    --tag-bg-color: #e5faef; // @presenter Color
+    --tag-bg-color-hover: #D4F7E5; // @presenter Color
+  }
+
   .tag-put {
     --tag-color: #f5901d; // @presenter Color
     --tag-bg-color: #fef1e2; // @presenter Color