@redocly/theme 0.62.0-next.4 → 0.62.0-next.5

package/src/core/utils/transform-revisions-to-version-history.ts

@@ -8,72 +8,6 @@ import { VERSION_NOT_SPECIFIED } from '@redocly/theme/core/constants';
 
 import { toLocalizedShortDate, toLocalizedShortDateTime } from './date';
 
-function compareVersionsDescending(versionA: string, versionB: string): number {
-  return versionB.localeCompare(versionA, undefined, { numeric: true });
-}
-
-function extractGroupComparisonData(group: CatalogEntityVersionHistoryGroup): {
-  version: string;
-  isNotSpecified: boolean;
-  time: number;
-  hasCurrent: boolean;
-} {
-  const version = group.version;
-  const isNotSpecified = version === VERSION_NOT_SPECIFIED;
-
-  // Get version dates (oldest revision date for each group - the version's creation date)
-  // This ensures versions stay in their original order even when new revisions are added
-  const date =
-    group.singleRevisionDate ||
-    (group.revisions && group.revisions.length > 0
-      ? group.revisions[group.revisions.length - 1]?.revisionDate
-      : undefined) ||
-    '';
-  const time = date ? new Date(date).getTime() : 0;
-
-  const hasCurrent = group.hasCurrentRevisionFromBackend ?? false;
-
-  return { version, isNotSpecified, time, hasCurrent };
-}
-
-function compareVersionGroupsDescending(
-  groupA: CatalogEntityVersionHistoryGroup,
-  groupB: CatalogEntityVersionHistoryGroup,
-): number {
-  const {
-    version: versionA,
-    isNotSpecified: isNotSpecifiedA,
-    time: timeA,
-    hasCurrent: hasCurrentA,
-  } = extractGroupComparisonData(groupA);
-  const {
-    version: versionB,
-    isNotSpecified: isNotSpecifiedB,
-    time: timeB,
-    hasCurrent: hasCurrentB,
-  } = extractGroupComparisonData(groupB);
-
-  // First, compare by version date (oldest first, so most recent versions come first)
-  const dateComparison = timeB - timeA;
-  if (dateComparison !== 0) {
-    return dateComparison;
-  }
-
-  // If dates are equal, prioritize the one with isCurrent from backend
-  if (hasCurrentA !== hasCurrentB) {
-    return hasCurrentB ? 1 : -1; // hasCurrentB comes first if true
-  }
-
-  // If both have same isCurrent status, compare by version
-  // If both are unknown or both are real versions, compare by version
-  if (isNotSpecifiedA === isNotSpecifiedB) {
-    return compareVersionsDescending(versionA, versionB);
-  }
-
-  // If one is unknown and one is a real version, unknown comes last
-  return isNotSpecifiedA ? 1 : -1;
-}
-
 export type TransformRevisionsToVersionHistoryParams = {
   revisions: BffCatalogEntityRevision[];
   currentRevisionDate?: string;
@@ -100,13 +34,7 @@ export function transformRevisionsToVersionHistory({
   });
 
   const versionGroups = Array.from(versionMap.entries()).map(([version, versionRevisions]) => {
-    const sortedRevisions = [...versionRevisions].sort((a, b) => {
-      const dateA = a.revision ? new Date(a.revision).getTime() : 0;
-      const dateB = b.revision ? new Date(b.revision).getTime() : 0;
-      return dateB - dateA;
-    });
-
-    const latestRevision = sortedRevisions[0];
+    const latestRevision = versionRevisions[0];
 
     const versionMatches =
       normalizedCurrentVersion === undefined || normalizedCurrentVersion === version;
@@ -114,7 +42,7 @@ export function transformRevisionsToVersionHistory({
     let isCurrent: boolean;
     if (currentRevisionDate !== undefined) {
       // Check if revision matches AND version matches
-      const revisionMatches = sortedRevisions.some((rev) => rev.revision === currentRevisionDate);
+      const revisionMatches = versionRevisions.some((rev) => rev.revision === currentRevisionDate);
       isCurrent = revisionMatches && versionMatches;
     } else {
       // When no revision is specified, use isCurrent flag from the latest revision
@@ -123,11 +51,11 @@ export function transformRevisionsToVersionHistory({
     }
 
     // Check if any revision in this version group is the default version
-    const isDefaultVersion = sortedRevisions.some((rev) => rev.isDefaultVersion === true);
+    const isDefaultVersion = versionRevisions.some((rev) => rev.isDefaultVersion === true);
 
     const revisions =
-      sortedRevisions.length > 1
-        ? sortedRevisions.map((rev, index): CatalogEntityRevision => {
+      versionRevisions.length > 1
+        ? versionRevisions.map((rev, index): CatalogEntityRevision => {
             const revisionMatches = currentRevisionDate
               ? rev.revision === currentRevisionDate
               : false;
@@ -138,7 +66,7 @@ export function transformRevisionsToVersionHistory({
               index === 0 &&
               isCurrent;
             return {
-              name: `r.${sortedRevisions.length - index}`,
+              name: `r.${versionRevisions.length - index}`,
               date: toLocalizedShortDateTime(rev.revision, locale),
               revisionDate: rev.revision,
               isActive: isActiveRevision || isCurrentByDefault,
@@ -155,9 +83,9 @@ export function transformRevisionsToVersionHistory({
       hasCurrentRevisionFromBackend: latestRevision?.isCurrent ?? false,
       isDefaultVersion,
       revisions,
-      singleRevisionDate: sortedRevisions.length === 1 ? sortedRevisions[0]?.revision : undefined,
+      singleRevisionDate: versionRevisions.length === 1 ? versionRevisions[0]?.revision : undefined,
     };
   });
 
-  return versionGroups.sort(compareVersionGroupsDescending);
+  return versionGroups;
 }

package/src/icons/FitToViewIcon/FitToViewIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M1 1H5V2.5H2.5V5H1V1Z" />
+    <path d="M15 1H11V2.5H13.5V5H15V1Z" />
+    <path d="M1 15H5V13.5H2.5V11H1V15Z" />
+    <path d="M15 15H11V13.5H13.5V11H15V15Z" />
+  </svg>
+);
+
+export const FitToViewIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FitToViewIcon/FitToViewIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -27,6 +27,7 @@ export * from '@redocly/theme/components/Tags/CounterTag';
 export * from '@redocly/theme/components/VersionPicker/VersionPicker';
 export * from '@redocly/theme/components/Marker/Marker';
 export * from '@redocly/theme/components/PageActions/PageActions';
+export * from '@redocly/theme/components/SvgViewer/SvgViewer';
 /* Buttons */
 export * from '@redocly/theme/components/Buttons/CopyButton';
 export * from '@redocly/theme/components/Buttons/EditPageButton';
@@ -293,6 +294,7 @@ export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon'
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 export * from '@redocly/theme/icons/ShareIcon/ShareIcon';
 export * from '@redocly/theme/icons/HashtagIcon/HashtagIcon';
+export * from '@redocly/theme/icons/FitToViewIcon/FitToViewIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/Mermaid/Mermaid.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
 import { concatClassNames } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
 
 type MermaidProps = {
   diagramHtml: string;
@@ -18,20 +20,55 @@ export function Mermaid({
   'data-hash': dataHash,
   className,
 }: MermaidProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+
   return (
-    <Wrapper
-      className={concatClassNames('mermaid-wrapper', className)}
-      dangerouslySetInnerHTML={{ __html: diagramHtml }}
-      data-component-name="Markdoc/Mermaid/Mermaid"
-      data-source={dataSource}
-      data-hash={dataHash}
-    />
+    <>
+      <Wrapper
+        className={concatClassNames('mermaid-wrapper', className)}
+        dangerouslySetInnerHTML={{ __html: diagramHtml }}
+        data-component-name="Markdoc/Mermaid/Mermaid"
+        data-source={dataSource}
+        data-hash={dataHash}
+        onClick={open}
+        onKeyDown={(e) => e.key === 'Enter' || (e.key === ' ' && open())}
+        role="button"
+        tabIndex={0}
+        aria-label={translate('mermaid.openFullscreen', 'Click to open diagram in fullscreen')}
+      />
+      <SvgViewer
+        isOpen={isOpen}
+        onClose={close}
+        labels={{
+          zoomIn: translate('mermaid.zoomIn', 'Zoom in'),
+          zoomOut: translate('mermaid.zoomOut', 'Zoom out'),
+          fitToView: translate('mermaid.reset', 'Fit to view'),
+          close: translate('mermaid.close', 'Close'),
+          dialogLabel: translate('mermaid.viewer', 'Mermaid diagram viewer'),
+        }}
+      >
+        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
+      </SvgViewer>
+    </>
   );
 }
 
 const Wrapper = styled.div`
   background-color: var(--mermaid-bg-color);
   border-radius: var(--mermaid-border-radius);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--border-color-input-focus);
+  }
 
   * {
     font-family: var(--mermaid-font-family) !important;
@@ -42,3 +79,15 @@ const Wrapper = styled.div`
     max-width: 100%;
   }
 `;
+
+const ViewerContent = styled.div`
+  * {
+    font-family: var(--mermaid-font-family) !important;
+  }
+
+  .mermaid > svg {
+    font-size: var(--font-size-base) !important;
+    display: block;
+    max-width: none !important;
+  }
+`;