@redocly/theme 0.70.0-next.9 → 0.70.1

package/src/markdoc/components/CodeWalkthrough/Input.tsx

@@ -0,0 +1,103 @@
+import React, { useContext, useState, useCallback } from 'react';
+import styled from 'styled-components';
+import debounce from 'lodash.debounce';
+
+import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';
+
+export type InputProps = {
+  id: string;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+};
+
+const DEBOUNCE_TIME = 500;
+
+export function Input(props: InputProps) {
+  const { id, label, placeholder } = props;
+  const { getControlState, changeControlState } = useContext(CodeWalkthroughControlsStateContext);
+
+  const inputState = getControlState(id);
+
+  const [value, setValue] = useState(inputState?.value || '');
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedSave = useCallback(
+    debounce((id: string, value: string) => {
+      changeControlState(id, value);
+    }, DEBOUNCE_TIME),
+    [],
+  );
+
+  if (!inputState?.render) {
+    return null;
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+
+    setValue(inputValue);
+    debouncedSave(id, inputValue);
+  };
+
+  return (
+    <InputWrapper data-component-name="Markdoc/CodeWalkthrough/Input">
+      {label && <Label>{label}</Label>}
+      <StyledInput
+        id={id}
+        value={value as string}
+        onChange={handleChange}
+        aria-label={label}
+        placeholder={placeholder}
+      />
+    </InputWrapper>
+  );
+}
+
+const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
+`;
+
+const Label = styled.p`
+  color: var(--text-color-secondary);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--spacing-xxs) !important;
+`;
+
+const StyledInput = styled.input`
+  border: 1px solid var(--border-color-primary);
+  width: 224px;
+  outline: none;
+  padding: var(--input-padding) var(--spacing-sm);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-bg-color);
+  color: var(--text-color-secondary);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 1;
+    color: var(--input-content-placeholder-color);
+  }
+
+  &:hover {
+    color: var(--text-color-primary);
+    border: 1px solid var(--border-color-primary);
+  }
+
+  &:focus {
+    color: var(--text-color-primary);
+    border: 1px solid var(--border-color-primary);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--input-bg-color);
+  }
+`;

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

@@ -0,0 +1,17 @@
+import { css } from 'styled-components';
+
+export const codeWalkthrough = css`
+--code-step-vertical-line-bg-active: var(--color-blue-6);
+--code-step-vertical-line-bg-hover: var(--color-hover-base);
+
+--code-step-bg-active: var(--layer-color);
+--code-step-bg-hover: var(--color-hover-base);
+--code-step-bg-active-hover: var(--layer-color-hover);
+--code-step-border-radius: var(--border-radius-lg);
+
+--code-panel-bg-color: var(--layer-color);
+--code-panel-line-numbering-color: var(--text-color-disabled);
+--code-panel-header-height: var(--spacing-lg);
+--code-panel-border-color: var(--border-color-secondary);
+--code-panel-border-radius: var(--border-radius-xl);
+`;

package/src/markdoc/components/ConnectMCP/ConnectMCP.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+import type { MCPOption } from '@redocly/theme/core/types';
+
+import { ConnectMCPButton } from '@redocly/theme/components/Buttons/ConnectMCPButton';
+import { useThemeConfig } from '@redocly/theme/core/hooks';
+
+export type ConnectMCPProps = {
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  options?: MCPOption[];
+};
+
+export function ConnectMCP({
+  placement = 'bottom',
+  alignment = 'start',
+  options,
+}: ConnectMCPProps): JSX.Element | null {
+  const themeConfig = useThemeConfig();
+  const isMcpDisabled = themeConfig.mcp?.hide || themeConfig.mcp?.docs?.hide;
+
+  if (isMcpDisabled) {
+    return null;
+  }
+
+  return <ConnectMCPButton placement={placement} alignment={alignment} options={options} />;
+}

package/src/markdoc/components/Diagram/Diagram.tsx

@@ -0,0 +1,170 @@
+import React, { useState, type JSX } from 'react';
+import styled from 'styled-components';
+
+import { concatClassNames } from '@redocly/theme/core/utils';
+import { useColorSwitcher, useThemeHooks } from '@redocly/theme/core/hooks';
+import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
+
+type DiagramProps = {
+  id?: string;
+  diagramHtml: string;
+  diagramHtmlDark?: string;
+  diagramError?: string;
+  diagramType: string;
+  align?: 'left' | 'center' | 'right';
+  width?: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+  className?: string;
+};
+
+export function Diagram({
+  id,
+  diagramHtml,
+  diagramHtmlDark,
+  diagramError,
+  diagramType,
+  align,
+  width,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+  className,
+}: DiagramProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { activeColorMode } = useColorSwitcher();
+  const [isOpen, setIsOpen] = useState(false);
+  const activeDiagramHtml =
+    activeColorMode === 'dark' ? diagramHtmlDark || diagramHtml : diagramHtml;
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      open();
+    }
+  };
+
+  if (diagramError) {
+    return (
+      <ErrorWrapper id={id} className={concatClassNames('diagram-error', className)}>
+        {diagramError}
+      </ErrorWrapper>
+    );
+  }
+
+  return (
+    <>
+      <Wrapper
+        id={id}
+        $width={width}
+        className={concatClassNames(`diagram-wrapper diagram-${diagramType}`, className)}
+        data-component-name="Markdoc/Diagram/Diagram"
+        data-diagram-type={diagramType}
+        data-source={dataSource}
+        data-hash={dataHash}
+        onClick={open}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={0}
+        aria-label={translate('diagram.openFullscreen', 'Click to open diagram in fullscreen')}
+      >
+        <DiagramVariant
+          $align={align}
+          $colorMode="light"
+          className={`diagram-variant diagram-variant-light diagram-${diagramType}`}
+          dangerouslySetInnerHTML={{ __html: diagramHtml }}
+        />
+        {diagramHtmlDark ? (
+          <DiagramVariant
+            $align={align}
+            $colorMode="dark"
+            className={`diagram-variant diagram-variant-dark diagram-${diagramType}`}
+            dangerouslySetInnerHTML={{ __html: diagramHtmlDark }}
+          />
+        ) : null}
+      </Wrapper>
+      <SvgViewer
+        isOpen={isOpen}
+        onClose={close}
+        labels={{
+          zoomIn: translate('diagram.zoomIn', 'Zoom in'),
+          zoomOut: translate('diagram.zoomOut', 'Zoom out'),
+          fitToView: translate('diagram.reset', 'Fit to view'),
+          close: translate('diagram.close', 'Close'),
+          dialogLabel: translate('diagram.viewer', 'Diagram viewer'),
+        }}
+      >
+        <ViewerContent
+          className={`diagram-viewer-content diagram-${diagramType}`}
+          dangerouslySetInnerHTML={{ __html: activeDiagramHtml }}
+        />
+      </SvgViewer>
+    </>
+  );
+}
+
+const Wrapper = styled.div<{ $width?: string }>`
+  background-color: var(--diagram-bg-color);
+  border-radius: var(--diagram-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);
+  }
+
+  svg {
+    max-width: 100%;
+    display: block;
+    ${({ $width }) => ($width ? `width: ${$width} !important;     height: auto !important;` : '')}
+  }
+`;
+
+const DiagramVariant = styled.div<{ $colorMode: 'light' | 'dark'; $align?: DiagramProps['align'] }>`
+  display: flex;
+  justify-content: ${({ $align }) => {
+    switch ($align) {
+      case 'center':
+        return 'center';
+      case 'right':
+        return 'flex-end';
+      default:
+        return 'flex-start';
+    }
+  }};
+  width: 100%;
+  ${({ $colorMode }) =>
+    $colorMode === 'dark'
+      ? `
+    html:not(.dark) && {
+      display: none;
+    }
+  `
+      : `
+    html.dark && {
+      display: none;
+    }
+  `}
+`;
+
+const ErrorWrapper = styled.div`
+  border: 1px solid var(--color-error-border);
+  border-radius: var(--diagram-border-radius);
+  background: var(--color-error-bg);
+  color: var(--color-error-text);
+  font-size: var(--font-size-sm);
+  padding: var(--spacing-sm);
+  white-space: pre-wrap;
+  word-break: break-word;
+`;
+
+const ViewerContent = styled.div`
+  svg {
+    display: block;
+    max-width: none !important;
+  }
+`;

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

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

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

@@ -0,0 +1,135 @@
+import React, { createElement, isValidElement, useContext } from 'react';
+import styled from 'styled-components';
+import { useLocation } from 'react-router';
+
+import type { JSX, PropsWithChildren, ReactElement, ReactNode } from 'react';
+
+import { Image as MarkdocImage } from '@redocly/theme/markdoc/components/Image/Image';
+import { concatClassNames } from '@redocly/theme/core/utils';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
+import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { PageActionsContext } from '@redocly/theme/core/contexts';
+import {
+  ANCHOR_CLASS,
+  HEADING_ANCHOR_CLASS,
+  HEADING_CLASS_PREFIX,
+  MARKDOWN_CLASS_NAME,
+} from '@redocly/theme/core/constants';
+
+function renderWithSpanWrapper(children: ReactNode): ReactNode {
+  const childrenArray = React.Children.toArray(children);
+
+  if (childrenArray.length === 0) return null;
+
+  const first = childrenArray[0];
+  const last = childrenArray[childrenArray.length - 1];
+
+  // Check if an element is an <img> or the Markdoc Image component
+  const isImage = (node: ReactNode): node is ReactElement => {
+    if (!isValidElement(node)) return false;
+    if (typeof node.type === 'string') return node.type === 'img';
+    return node.type === MarkdocImage;
+  };
+
+  const middleChildren = childrenArray.slice(
+    isImage(first) ? 1 : 0,
+    isImage(last) ? childrenArray.length - 1 : childrenArray.length,
+  );
+
+  return (
+    <>
+      {isImage(first) && first}
+      {middleChildren.length > 0 && <StyledHeadingText>{middleChildren}</StyledHeadingText>}
+      {isImage(last) && last}
+    </>
+  );
+}
+
+export function Heading({
+  level,
+  id,
+  children,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+  className,
+  __idx,
+}: PropsWithChildren<{
+  level: number;
+  id: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+  className?: string;
+  __idx?: number;
+}>): JSX.Element {
+  const { pathname } = useLocation();
+  const { usePageProps } = useThemeHooks();
+  const pageProps = usePageProps();
+
+  // The page-type fallback is only for backward compatibility; templates set the scope.
+  const withPageActions =
+    useContext(PageActionsContext) ??
+    (pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc');
+  const headingTextId = `${id}-heading-text`;
+
+  const linkEl = (
+    <a
+      aria-labelledby={headingTextId}
+      href={`#${id}`}
+      className={concatClassNames(ANCHOR_CLASS, 'before')}
+    >
+      <LinkIcon aria-hidden="true" focusable="false" color="--heading-anchor-color" />
+    </a>
+  );
+
+  const headingText = createElement(
+    `h${level}`,
+    { id: headingTextId },
+    renderWithSpanWrapper(children),
+  );
+
+  return (
+    <div
+      id={id}
+      className={concatClassNames(
+        HEADING_ANCHOR_CLASS,
+        MARKDOWN_CLASS_NAME,
+        `${HEADING_CLASS_PREFIX}-${level}`,
+        className,
+      )}
+      data-component-name="Markdoc/Heading/Heading"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
+      <HeadingContentWrapper>
+        {linkEl}
+        {headingText}
+        {withPageActions && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
+      </HeadingContentWrapper>
+    </div>
+  );
+}
+
+const HeadingContentWrapper = styled.div`
+  display: flex;
+  gap: var(--spacing-xs);
+
+  & > .${ANCHOR_CLASS} {
+    display: flex;
+    align-items: center;
+    height: 1lh;
+  }
+
+  &:has([data-component-name='PageActions/PageActions']:hover) {
+    && .${ANCHOR_CLASS} svg {
+      visibility: hidden;
+    }
+  }
+`;
+
+const StyledHeadingText = styled.span`
+  margin: auto 0;
+  && > img:only-child {
+    display: inline-block;
+  }
+`;

package/src/markdoc/components/HtmlBlock/HtmlBlock.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export function HtmlBlock({ rawHtml }: { rawHtml: string }) {
+  return <div dangerouslySetInnerHTML={{ __html: rawHtml }} />;
+}

package/src/markdoc/components/Icon/Icon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import type { CDNIconProps } from '@redocly/theme/icons/types';
+
+import { CDNIcon } from '@redocly/theme/icons/CDNIcon/CDNIcon';
+import { resolveIcon } from '@redocly/theme/core/utils';
+
+export function Icon(props: CDNIconProps) {
+  const { name, ...rest } = props;
+
+  const resolvedIcon = resolveIcon(name);
+  if (resolvedIcon.type === 'font-awesome') {
+    return <CDNIcon name={resolvedIcon.name} type={resolvedIcon.style} {...rest} />;
+  }
+  return null;
+}

package/src/markdoc/components/Image/Image.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Image as ImageComponent, type ImageProps } from '@redocly/theme/components/Image/Image';
+
+type MarkdocImageProps = React.PropsWithChildren<ImageProps> & {
+  align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+};
+export function Image(props: MarkdocImageProps) {
+  const { align, ...rest } = props;
+  return align ? (
+    <ImageWrapper $align={align}>
+      <ImageComponent {...rest} />
+    </ImageWrapper>
+  ) : (
+    <ImageComponent {...rest} />
+  );
+}
+
+const ImageWrapper = styled.div<{ $align?: MarkdocImageProps['align'] }>`
+  text-align: ${(props) => props.$align || 'initial'};
+
+  img {
+    display: block;
+    ${(props) => {
+      switch (props.$align) {
+        case 'left':
+          return 'margin-right: auto; margin-left: 0;';
+        case 'right':
+          return 'margin-left: auto; margin-right: 0;';
+        case 'center':
+          return 'margin-left: auto; margin-right: auto;';
+        default:
+          return '';
+      }
+    }}
+  }
+`;

package/src/markdoc/components/InlineSvg/InlineSvg.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export function InlineSvg({
+  fileRawContent,
+  className,
+}: {
+  fileRawContent: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={className}
+      data-component-name="Markdoc/InlineSvg/InlineSvg"
+      dangerouslySetInnerHTML={{ __html: fileRawContent }}
+    />
+  );
+}

package/src/markdoc/components/LoginButton/LoginButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import type { ButtonVariant, ButtonSize } from '@redocly/theme/components/Button/Button';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { LoginButton as UserMenuLoginButton } from '@redocly/theme/components/UserMenu/LoginButton';
+
+export type MarkdocLoginButtonProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  label?: string;
+  labelTranslationKey?: string;
+};
+
+export function LoginButton({
+  variant,
+  size,
+  label,
+  labelTranslationKey,
+}: MarkdocLoginButtonProps) {
+  const { useUserMenu } = useThemeHooks();
+  const { userData, loginUrl } = useUserMenu();
+
+  if (userData?.isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <UserMenuLoginButton
+      href={loginUrl || ''}
+      variant={variant}
+      size={size}
+      label={label}
+      labelTranslationKey={labelTranslationKey}
+      data-component-name="Markdoc/LoginButton"
+    />
+  );
+}

package/src/markdoc/components/MarkdocExample/MarkdocExample.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
+
+export interface MarkdocExampleProps {
+  language: string;
+  rawContent: string;
+  renderDemo?: boolean;
+  demoContent: React.ReactNode[];
+  withLabels?: boolean;
+  codeLabel?: string;
+  resultLabel?: string;
+  title?: string;
+}
+export function MarkdocExample(props: MarkdocExampleProps) {
+  const {
+    language,
+    rawContent,
+    renderDemo,
+    demoContent,
+    withLabels,
+    codeLabel,
+    resultLabel,
+    title,
+  } = props;
+
+  const renderLabels = renderDemo ? (withLabels === undefined ? true : withLabels) : false;
+  return (
+    <div data-component-name="Markdoc/MarkdocExample/MarkdocExample">
+      {renderLabels ? <Label>{codeLabel ? codeLabel : 'Code:'}</Label> : null}
+      <CodeBlock lang={language} source={rawContent} header={{ title, controls: { copy: {} } }} />
+      {renderDemo ? <>{renderLabels ? <Label>{resultLabel ? resultLabel : 'Result:'}</Label> : null}
+        {...demoContent}</> : null}
+    </div>
+  );
+}
+
+const Label = styled.div`
+  margin: 10px 0;
+`;

package/src/markdoc/components/MarkdownLink/MarkdownLink.tsx

@@ -0,0 +1,21 @@
+import React, { useCallback, useContext } from 'react';
+
+import type { ComponentProps, ReactElement } from 'react';
+
+import { MarkdownLinkContext } from '@redocly/theme/core/contexts';
+import { Link } from '@redocly/theme/components/Link/Link';
+
+type MarkdownLinkProps = Omit<ComponentProps<typeof Link>, 'to' | 'onClick'> & {
+  href: string;
+};
+
+export function MarkdownLink({ href, ...props }: MarkdownLinkProps): ReactElement {
+  const markdownLinkContext = useContext(MarkdownLinkContext);
+  const onClick = useCallback(() => {
+    markdownLinkContext?.onMarkdownLinkClick?.(href);
+  }, [markdownLinkContext, href]);
+
+  const linkProps = { ...props, languageInsensitive: true, onClick };
+
+  return <Link to={href} {...linkProps} />;
+}