@redocly/theme 0.64.0-next.0 → 0.64.0-next.2

package/src/core/types/hooks.ts

@@ -1,11 +1,6 @@
+import type { ResolvedBannerConfig } from '@redocly/config';
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type {
-  BannerConfig,
-  PageData,
-  PageProps,
-  ResolvedNavItemWithLink,
-  Version,
-} from '@redocly/config';
+import type { PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
@@ -19,7 +14,6 @@ import type {
   UseCatalogProps,
   CatalogApiParams,
   CatalogApiResults,
-  SortOption,
 } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
@@ -91,7 +85,7 @@ export type ThemeHooks = {
     currentItemSiblings?: BreadcrumbItem[];
   };
   useBanner: () => {
-    banner: BannerConfig | undefined;
+    banner: ResolvedBannerConfig | undefined;
     dismissBanner: (content: string) => void;
   };
   useSearch: (
@@ -140,6 +134,7 @@ export type ThemeHooks = {
     contentSegments: ContentSegment[];
   };
   useMarkdownText: (text: string) => React.ReactNode;
+  useMarkdocRenderer: (ast: unknown) => React.ReactNode;
   useFacetQuery: (field: string) => {
     searchFacet: SearchFacet | null;
     setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;
@@ -165,7 +160,7 @@ export type ThemeHooks = {
       }
     | undefined;
   useCatalog: (props?: UseCatalogProps) => UseCatalogResponse;
-  useCatalogSort: (defaultSortOption?: SortOption | null) => UseCatalogSortResponse;
+  useCatalogSort: (defaultSortOption?: string | null) => UseCatalogSortResponse;
   useCatalogSearch: () => UseCatalogSearchResponse;
   useFetchCatalogEntities: (
     params: CatalogApiParams,

package/src/icons/ColorPaletteIcon/ColorPaletteIcon.tsx

@@ -0,0 +1,28 @@
+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 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.5 5.25456C3.98325 5.25456 4.375 4.86281 4.375 4.37956C4.375 3.89631 3.98325 3.50456 3.5 3.50456C3.01675 3.50456 2.625 3.89631 2.625 4.37956C2.625 4.86281 3.01675 5.25456 3.5 5.25456Z" />
+    <path d="M6.125 3.94206C6.60825 3.94206 7 3.55031 7 3.06706C7 2.58381 6.60825 2.19206 6.125 2.19206C5.64175 2.19206 5.25 2.58381 5.25 3.06706C5.25 3.55031 5.64175 3.94206 6.125 3.94206Z" />
+    <path d="M8.75 5.25456C9.23325 5.25456 9.625 4.86281 9.625 4.37956C9.625 3.89631 9.23325 3.50456 8.75 3.50456C8.26675 3.50456 7.875 3.89631 7.875 4.37956C7.875 4.86281 8.26675 5.25456 8.75 5.25456Z" />
+    <path d="M9.1875 7.87956C9.67075 7.87956 10.0625 7.48781 10.0625 7.00456C10.0625 6.52131 9.67075 6.12956 9.1875 6.12956C8.70425 6.12956 8.3125 6.52131 8.3125 7.00456C8.3125 7.48781 8.70425 7.87956 9.1875 7.87956Z" />
+    <path d="M7.4375 10.0671C7.92075 10.0671 8.3125 9.67531 8.3125 9.19206C8.3125 8.70881 7.92075 8.31706 7.4375 8.31706C6.95425 8.31706 6.5625 8.70881 6.5625 9.19206C6.5625 9.67531 6.95425 10.0671 7.4375 10.0671Z" />
+    <path d="M6.36125 0.00455826C5.53725 -0.0272487 4.7153 0.107661 3.9447 0.401198C3.17409 0.694735 2.4707 1.14086 1.87668 1.71281C1.28266 2.28477 0.810249 2.97079 0.487771 3.72974C0.165293 4.48869 -0.000611956 5.30494 1.69613e-06 6.12956C-2.00107e-05 6.45389 0.074769 6.77385 0.218553 7.06457C0.362337 7.35528 0.57124 7.60891 0.829017 7.80574C1.08679 8.00256 1.3865 8.13728 1.70482 8.1994C2.02315 8.26153 2.35151 8.24939 2.66438 8.16393L3.15438 8.02831C3.3493 7.9751 3.55388 7.96761 3.75217 8.00643C3.95047 8.04526 4.13712 8.12934 4.29759 8.25212C4.45806 8.37491 4.58801 8.53309 4.67733 8.71433C4.76664 8.89558 4.8129 9.095 4.8125 9.29706V10.9421C4.8125 11.2902 4.95078 11.624 5.19692 11.8701C5.44307 12.1163 5.77691 12.2546 6.125 12.2546C6.94962 12.2552 7.76587 12.0893 8.52482 11.7668C9.28377 11.4443 9.96979 10.9719 10.5417 10.3779C11.1137 9.78386 11.5598 9.08046 11.8534 8.30986C12.1469 7.53926 12.2818 6.71731 12.25 5.89331C12.1865 4.35185 11.5457 2.89063 10.4548 1.79973C9.36393 0.708834 7.90271 0.0680368 6.36125 0.00455826ZM9.90938 9.76518C9.42087 10.2766 8.83352 10.6835 8.18297 10.961C7.53243 11.2385 6.83227 11.3809 6.125 11.3796C6.00897 11.3796 5.89769 11.3335 5.81564 11.2514C5.7336 11.1694 5.6875 11.0581 5.6875 10.9421V9.29706C5.6875 8.7169 5.45703 8.1605 5.0468 7.75026C4.63656 7.34003 4.08016 7.10956 3.5 7.10956C3.30341 7.10991 3.10774 7.13639 2.91813 7.18831L2.42813 7.32393C2.24511 7.37298 2.05326 7.37922 1.86744 7.34216C1.68163 7.3051 1.50685 7.22574 1.35665 7.11024C1.20645 6.99474 1.08488 6.84619 1.00135 6.67612C0.917824 6.50605 0.87459 6.31903 0.875002 6.12956C0.874459 5.42247 1.01676 4.72256 1.29336 4.07181C1.56996 3.42107 1.97517 2.83291 2.48466 2.34261C2.99416 1.85232 3.59745 1.47 4.25833 1.21859C4.91922 0.967181 5.62408 0.851864 6.33063 0.879558C7.64627 0.948081 8.8899 1.50154 9.82146 2.4331C10.753 3.36466 11.3065 4.60829 11.375 5.92393C11.4051 6.63092 11.2907 7.33662 11.0387 7.99785C10.7867 8.65908 10.4024 9.26195 9.90938 9.76956V9.76518Z" />
+  </svg>
+);
+
+export const ColorPaletteIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ColorPaletteIcon/ColorPaletteIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/StopIcon/StopIcon.tsx

@@ -0,0 +1,23 @@
+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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none" {...props}>
+    <path d="M10.5 3.5V10.5H3.5V3.5H10.5ZM10.5 2.625H3.5C3.26794 2.625 3.04538 2.71719 2.88128 2.88128C2.71719 3.04538 2.625 3.26794 2.625 3.5V10.5C2.625 10.7321 2.71719 10.9546 2.88128 11.1187C3.04538 11.2828 3.26794 11.375 3.5 11.375H10.5C10.7321 11.375 10.9546 11.2828 11.1187 11.1187C11.2828 10.9546 11.375 10.7321 11.375 10.5V3.5C11.375 3.26794 11.2828 3.04538 11.1187 2.88128C10.9546 2.71719 10.7321 2.625 10.5 2.625Z" />
+  </svg>
+);
+
+export const StopIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/StopIcon/StopIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -136,7 +136,7 @@ export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableHe
 export * from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 export * from '@redocly/theme/components/Catalog/CatalogSelector';
 export * from '@redocly/theme/components/Catalog/CatalogSortButton';
-export * from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+export * from '@redocly/theme/components/Catalog/CatalogTags';
 export * from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
 export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton';
 export * from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
@@ -274,6 +274,7 @@ export * from '@redocly/theme/icons/FileIcon/FileIcon';
 export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 export * from '@redocly/theme/icons/CertificateIcon/CertificateIcon';
 export * from '@redocly/theme/icons/PlayIcon/PlayIcon';
+export * from '@redocly/theme/icons/StopIcon/StopIcon';
 export * from '@redocly/theme/icons/PlaylistIcon/PlaylistIcon';
 export * from '@redocly/theme/icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
 export * from '@redocly/theme/icons/TaskViewIcon/TaskViewIcon';
@@ -296,6 +297,7 @@ 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';
+export * from '@redocly/theme/icons/ColorPaletteIcon/ColorPaletteIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.tsx

@@ -0,0 +1,85 @@
+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 ExcalidrawDiagramProps = {
+  diagramHtml: string;
+  className?: string;
+};
+
+export function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): 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('excalidraw-wrapper', className)}
+        dangerouslySetInnerHTML={{ __html: diagramHtml }}
+        data-component-name="Markdoc/ExcalidrawDiagram/ExcalidrawDiagram"
+        onClick={open}
+        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && open()}
+        role="button"
+        tabIndex={0}
+        aria-label={translate('excalidraw.openFullscreen', 'Click to open diagram in fullscreen')}
+      />
+      <SvgViewer
+        isOpen={isOpen}
+        onClose={close}
+        labels={{
+          zoomIn: translate('excalidraw.zoomIn', 'Zoom in'),
+          zoomOut: translate('excalidraw.zoomOut', 'Zoom out'),
+          fitToView: translate('excalidraw.reset', 'Fit to view'),
+          close: translate('excalidraw.close', 'Close'),
+          dialogLabel: translate('excalidraw.viewer', 'Excalidraw diagram viewer'),
+        }}
+      >
+        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
+      </SvgViewer>
+    </>
+  );
+}
+
+const Wrapper = styled.div`
+  background-color: var(--excalidraw-bg-color);
+  border-radius: var(--excalidraw-border-radius);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+  overflow: hidden;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--border-color-input-focus);
+  }
+
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+
+    > rect {
+      fill: var(--excalidraw-bg-color);
+    }
+  }
+
+  & + & {
+    margin-top: var(--spacing-md);
+  }
+`;
+
+const ViewerContent = styled.div`
+  svg {
+    display: block;
+    max-width: none !important;
+  }
+`;

package/src/markdoc/components/ExcalidrawDiagram/variables.dark.ts

@@ -0,0 +1,5 @@
+import { css } from "styled-components";
+
+export const excalidrawDarkMode = css`
+  --excalidraw-bg-color: var(--bg-color); // @presenter Color
+`;

package/src/markdoc/components/ExcalidrawDiagram/variables.ts

@@ -0,0 +1,12 @@
+import { css } from "styled-components";
+
+export const excalidraw = css`
+  /**
+  * @tokens Excalidraw
+  */
+
+  --excalidraw-bg-color: var(--bg-color); // @presenter Color
+  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+`;

package/src/markdoc/components/Heading/Heading.tsx

@@ -64,7 +64,8 @@ export function Heading({
   const { usePageProps } = useThemeHooks();
   const pageProps = usePageProps();
 
-  const isMarkdownPage = pageProps?.metadata?.type === 'markdown';
+  const isMarkdownPage =
+    pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc';
 
   const linkEl = (
     <a

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

@@ -81,6 +81,8 @@ const Wrapper = styled.div`
 `;
 
 const ViewerContent = styled.div`
+  background-color: var(--mermaid-bg-color);
+
   * {
     font-family: var(--mermaid-font-family) !important;
   }

package/src/markdoc/components/default.ts

@@ -3,6 +3,7 @@ export * from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
 export * from '@redocly/theme/markdoc/components/MarkdocExample/MarkdocExample';
 export * from '@redocly/theme/markdoc/components/Heading/Heading';
 export * from '@redocly/theme/markdoc/components/Mermaid/Mermaid';
+export * from '@redocly/theme/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram';
 export * from '@redocly/theme/markdoc/components/HtmlBlock/HtmlBlock';
 export * from '@redocly/theme/markdoc/components/Tabs/Tab';
 export * from '@redocly/theme/markdoc/components/Tabs/TabList';

package/lib/components/Catalog/CatalogTagsWithTooltip.d.ts

@@ -1,10 +0,0 @@
-import { JSX } from 'react';
-import { TagProps } from '../../components/Tag/Tag';
-export type CatalogTagsWithTooltipProps = {
-    items: string[];
-    itemsToShow?: number;
-    showPlaceholder?: boolean;
-    tagProps?: TagProps;
-    showAvatars?: boolean;
-};
-export declare function CatalogTagsWithTooltip({ items, itemsToShow, showPlaceholder, showAvatars, tagProps, }: CatalogTagsWithTooltipProps): JSX.Element | null;

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -1,57 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTagsWithTooltip = CatalogTagsWithTooltip;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../../core/constants");
-const Tag_1 = require("../../components/Tag/Tag");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
-const hooks_1 = require("../../core/hooks");
-const CatalogAvatar_1 = require("../../components/Catalog/CatalogAvatar");
-function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = false, showAvatars, tagProps, }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    if (!items || items.length === 0) {
-        if (showPlaceholder) {
-            return (react_1.default.createElement(CatalogTagsNotConnectedWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, translate('catalog.notConnected', 'Not connected')));
-        }
-        return null;
-    }
-    if (items.length <= itemsToShow) {
-        return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
-            icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
-        }), { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
-            react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item))))));
-    }
-    const displayedItems = items.slice(0, itemsToShow);
-    const remainingCount = items.length - itemsToShow;
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
-        react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
-            displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
-                icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
-            }), { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
-                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
-            react_1.default.createElement(MoreTagsButton, null,
-                "+",
-                remainingCount,
-                " ",
-                translate('catalog.tags.more', 'more')))));
-}
-const CatalogTagsWrapper = styled_components_1.default.div `
-  display: flex;
-  flex-wrap: wrap;
-`;
-const MoreTagsButton = styled_components_1.default.span `
-  font-size: var(--catalog-tags-more-button-font-size);
-  margin-left: var(--catalog-tags-more-button-margin-left);
-`;
-const CatalogTagsNotConnectedWrapper = styled_components_1.default.span `
-  font-size: var(--catalog-tags-not-connected-font-size);
-  line-height: var(--catalog-tags-not-connected-line-height);
-  color: var(--catalog-tags-not-connected-color);
-`;
-//# sourceMappingURL=CatalogTagsWithTooltip.js.map

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -1,101 +0,0 @@
-import React, { JSX } from 'react';
-import styled from 'styled-components';
-
-import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
-import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
-import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
-
-export type CatalogTagsWithTooltipProps = {
-  items: string[];
-  itemsToShow?: number;
-  showPlaceholder?: boolean;
-  tagProps?: TagProps;
-  showAvatars?: boolean;
-};
-
-export function CatalogTagsWithTooltip({
-  items,
-  itemsToShow = 1,
-  showPlaceholder = false,
-  showAvatars,
-  tagProps,
-}: CatalogTagsWithTooltipProps): JSX.Element | null {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-
-  if (!items || items.length === 0) {
-    if (showPlaceholder) {
-      return (
-        <CatalogTagsNotConnectedWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          {translate('catalog.notConnected', 'Not connected')}
-        </CatalogTagsNotConnectedWrapper>
-      );
-    }
-    return null;
-  }
-
-  if (items.length <= itemsToShow) {
-    return (
-      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-        {items.map((item, index) => (
-          <Tag
-            key={`${item}-${index}`}
-            {...tagProps}
-            {...(showAvatars && {
-              icon: <CatalogAvatar value={item} size="small" />,
-            })}
-            maxLength={CATALOG_TAG_MAX_LENGTH}
-          >
-            <CatalogHighlight>{item}</CatalogHighlight>
-          </Tag>
-        ))}
-      </CatalogTagsWrapper>
-    );
-  }
-
-  const displayedItems = items.slice(0, itemsToShow);
-  const remainingCount = items.length - itemsToShow;
-
-  return (
-    <Tooltip tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
-      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-        {displayedItems.map((item, index) => (
-          <Tag
-            key={`${item}-${index}`}
-            {...tagProps}
-            {...(showAvatars && {
-              icon: <CatalogAvatar value={item} size="small" />,
-            })}
-            textTransform="none"
-            maxLength={CATALOG_TAG_MAX_LENGTH}
-          >
-            <CatalogHighlight>{item}</CatalogHighlight>
-          </Tag>
-        ))}
-
-        <MoreTagsButton>
-          +{remainingCount} {translate('catalog.tags.more', 'more')}
-        </MoreTagsButton>
-      </CatalogTagsWrapper>
-    </Tooltip>
-  );
-}
-
-const CatalogTagsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-const MoreTagsButton = styled.span`
-  font-size: var(--catalog-tags-more-button-font-size);
-  margin-left: var(--catalog-tags-more-button-margin-left);
-`;
-
-const CatalogTagsNotConnectedWrapper = styled.span`
-  font-size: var(--catalog-tags-not-connected-font-size);
-  line-height: var(--catalog-tags-not-connected-line-height);
-  color: var(--catalog-tags-not-connected-color);
-`;