@redocly/theme 0.0.0-react18-20231120182601

package/src/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { highlight, addLineNumbers } from '@theme/utils';
+import type { ReportDialogProps } from '@theme/components/Feedback';
+import { ReportDialog, useReportDialog } from '@theme/components/Feedback';
+import type { CodeBlockControlsProps } from '@theme/components/CodeBlock';
+import { CodeBlockContainer, CodeBlockControls } from '@theme/components/CodeBlock';
+
+export interface CodeBlockProps {
+  lang?: string;
+  source?: string;
+  externalSource?: ExternalSource;
+  header?: CodeBlockControlsProps;
+  dataTestId?: string;
+  className?: string;
+
+  withLineNumbers?: boolean;
+  startLineNumber?: number;
+  highlightedHtml?: string;
+  codeBlockRef?: (instance: HTMLPreElement | null) => void;
+}
+
+export interface Sample {
+  lang: string;
+  label?: string;
+}
+
+export type UnstableExternalCodeSample = Sample & {
+  get: (source: ExternalSource) => string;
+};
+
+export interface ExternalSource {
+  sample: UnstableExternalCodeSample;
+  exampleName?: string;
+  pathParams?: any;
+  properties?: any;
+  operation?: any;
+}
+
+export function CodeBlock({
+  lang,
+  source,
+  externalSource,
+  header,
+  dataTestId = 'source-code',
+  codeBlockRef,
+  highlightedHtml,
+  withLineNumbers,
+  startLineNumber,
+  className,
+}: CodeBlockProps): JSX.Element {
+  const [sourceCode, setSourceCode] = useState<string>(source ?? '');
+
+  const highlightedCode = highlightedHtml || highlight(sourceCode, lang);
+
+  // The same initial value should be returned for ssr and frontend to avoid issues
+  // Because we don't have session storage in ssr and can't get the security details there
+  // Issue for more details https://github.com/Redocly/reference-docs/issues/888
+  useEffect(() => {
+    const _source = source || externalSource?.sample?.get?.(externalSource);
+    if (_source) {
+      setSourceCode(_source);
+    }
+  }, [source, externalSource]);
+
+  const { reportDialog, reportButton } = useReportDialog();
+  const controls = {
+    ...header?.controls,
+    report: header?.controls?.report
+      ? { ...header.controls.report, props: reportButton.props }
+      : { props: reportButton.props },
+  };
+
+  if (controls.copy && !controls.copy.handleOutside) {
+    controls.copy.data = sourceCode;
+  }
+
+  return (
+    <Wrapper data-component-name="CodeBlock/CodeBlock" className={className}>
+      <CodeBlockControls className={header?.className} title={header?.title} controls={controls} />
+      <CodeBlockContainer
+        ref={codeBlockRef}
+        className={withLineNumbers ? 'line-numbers' : ''}
+        dangerouslySetInnerHTML={{
+          __html: withLineNumbers
+            ? addLineNumbers(highlightedCode, startLineNumber)
+            : highlightedCode,
+        }}
+        data-cy={dataTestId}
+        withControls={true}
+      />
+      {reportDialog.visible && (
+        <ReportDialog
+          {...(reportDialog.props as ReportDialogProps)}
+          location={sourceCode}
+          lang={lang}
+        />
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -0,0 +1,124 @@
+import styled, { css } from 'styled-components';
+
+import { generateCodeBlockTokens } from '@theme/utils';
+
+export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'CodeBlock/CodeBlockContainer',
+  className,
+}))<{ withControls?: boolean }>`
+  && {
+    overflow-x: auto;
+    max-height: var(--code-block-max-height);
+    font-family: var(--code-block-font-family);
+    line-height: var(--code-block-line-height);
+    font-weight: var(--code-block-font-weight);
+    padding: var(--code-block-padding);
+    margin: var(--code-block-margin);
+    background-color: var(--code-block-background-color);
+    color: var(--code-block-text-color);
+    font-size: var(--code-block-font-size);
+    white-space: var(--code-wrap, pre);
+    max-height: var(--code-block-max-height, 600px);
+    word-break: var(--code-block-word-break, initial);
+
+    ${(withControls) =>
+      withControls
+        ? css`
+            border-radius: 0 0 var(--code-block-border-radius) var(--code-block-border-radius);
+            border-left: 1px solid var(--code-block-border-color);
+            border-right: 1px solid var(--code-block-border-color);
+            border-bottom: 1px solid var(--code-block-border-color);
+          `
+        : css`
+            border-radius: var(--code-block-border-radius);
+            border: 1px solid var(--code-block-border-color);
+          `}
+
+  /**
+  * Based on prism-dark.css
+  */
+  code[class*='language-'],
+  pre[class*='language-'] {
+    text-shadow: 0 -0.1em 0.2em black;
+    text-align: left;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  @media print {
+    code[class*='language-'],
+    pre[class*='language-'] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  .token.punctuation {
+    opacity: 1;
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    & + a,
+    & + a:visited {
+      color: var(--code-block-tokens-link-color);
+      text-decoration: underline;
+    }
+  }
+
+  .token.property.string {
+    color: var(--code-block-tokens-property-string-color);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .code-line {
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      min-width: 2em;
+      padding-right: 0.8em;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+
+  ${generateCodeBlockTokens()}
+`;

package/src/components/CodeBlock/CodeBlockControlButton.tsx

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+
+import { Button } from '@theme/components/Button';
+
+export const CodeBlockControlButton = styled(Button)<{ asIcon?: boolean }>`
+  color: var(--code-block-controls-text-color);
+  border: none;
+
+  ${({ asIcon }) =>
+    asIcon
+      ? css`
+          background-color: var(--code-block-icon-controls-background-color);
+        `
+      : css`
+          min-width: 90px;
+          background-color: var(--code-block-text-controls-background-color);
+        `}
+
+  padding: 0;
+
+  :not(:first-child) {
+    margin-left: 5px;
+  }
+
+  &:hover {
+    border: none;
+  }
+`;

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CodeBlockControlButton } from '@theme/components/CodeBlock';
+import { CopyButton } from '@theme/components/CopyButton/CopyButton';
+import { CollapseIcon, DeselectIcon, ExpandIcon, ReportIcon, SelectIcon } from '@theme/icons';
+import { useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
+
+export interface CodeBlockControlsProps {
+  children?: React.ReactNode;
+  className?: string;
+  title?: React.ReactNode | string;
+  controls?: ControlItems;
+}
+
+interface ControlItems {
+  copy?: CopyControlProps;
+  expand?: ControlProps;
+  collapse?: ControlProps;
+  report?: ControlProps;
+  select?: ControlProps;
+  deselect?: ControlProps;
+}
+
+interface ControlProps {
+  label?: string;
+  tooltipText?: string;
+  onClick?: () => void;
+  props?: Record<string, any>;
+}
+
+interface CopyControlProps extends ControlProps {
+  data?: string;
+  dataSource?: string;
+  dataHash?: string;
+  toasterPlacement?: 'left' | 'right' | 'top' | 'bottom';
+  toasterText?: string;
+  toasterDuration?: number;
+  handleOutside?: boolean;
+}
+
+export type ControlItemType = 'text' | 'icon';
+
+export function CodeBlockControls({
+  children,
+  className,
+  title,
+  controls,
+}: CodeBlockControlsProps): JSX.Element | null {
+  const { codeSnippet } = useThemeConfig();
+  const controlsType = (codeSnippet?.elementFormat as ControlItemType) || 'icon';
+  const { copy, expand, collapse, select, deselect, report } = controls
+    ? controls
+    : { copy: null, expand: null, collapse: null, select: null, deselect: null, report: null };
+
+  const defaultControls = controls ? (
+    <>
+      <Title>{title}</Title>
+      <ControlsWrapper>
+        {report && report?.props?.visible ? (
+          <CodeBlockControlButton
+            data-cy="report-button"
+            data-testid="report-button"
+            asIcon={controlsType === 'icon'}
+            title={report.props?.tooltip}
+            {...report.props}
+          >
+            {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {expand && !codeSnippet?.expand?.hide ? (
+          <CodeBlockControlButton
+            data-cy="expand-all"
+            data-testid="expand-all"
+            asIcon={controlsType === 'icon'}
+            onClick={expand?.onClick}
+            title={expand?.tooltipText || 'Expand all'}
+          >
+            {controlsType === 'icon' ? <ExpandIcon /> : expand?.label ? expand.label : 'Expand all'}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {collapse && !codeSnippet?.collapse?.hide ? (
+          <CodeBlockControlButton
+            data-cy="collapse-all"
+            data-testid="collapse-all"
+            asIcon={controlsType === 'icon'}
+            onClick={collapse?.onClick}
+            title={collapse?.tooltipText || 'Collapse all'}
+          >
+            {controlsType === 'icon' ? (
+              <CollapseIcon />
+            ) : collapse?.label ? (
+              collapse.label
+            ) : (
+              'Collapse all'
+            )}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {select ? (
+          <CodeBlockControlButton
+            data-cy="select-all"
+            data-testid="select-all"
+            asIcon={controlsType === 'icon'}
+            onClick={select?.onClick}
+            title={select?.tooltipText}
+          >
+            {controlsType === 'icon' ? <SelectIcon /> : select?.label ? select.label : 'Select all'}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {deselect ? (
+          <CodeBlockControlButton
+            data-cy="clear-all"
+            data-testid="clear-all"
+            asIcon={controlsType === 'icon'}
+            onClick={deselect?.onClick}
+            title={deselect?.tooltipText}
+          >
+            {controlsType === 'icon' ? (
+              <DeselectIcon />
+            ) : deselect?.label ? (
+              deselect.label
+            ) : (
+              'Clear all'
+            )}
+          </CodeBlockControlButton>
+        ) : null}
+
+        {copy && !codeSnippet?.copy?.hide ? (
+          <CopyButton
+            data={copy.data}
+            data-source={copy.dataSource}
+            data-hash={copy.dataHash}
+            type={controlsType}
+            toasterPlacement={copy.toasterPlacement}
+            toasterDuration={copy.toasterDuration}
+            buttonText={copy.label}
+            tooltipText={copy.tooltipText}
+            onCopyClick={() => {
+              copy?.onClick;
+              telemetry.send('code_snippet_copied', {});
+            }}
+          />
+        ) : null}
+      </ControlsWrapper>
+    </>
+  ) : null;
+
+  return children || controls ? (
+    <ContainerWraper data-component-name="CodeBlock/CodeBlockControls" className={className}>
+      {children ? children : defaultControls}
+    </ContainerWraper>
+  ) : null;
+}
+
+const ContainerWraper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  min-height: 30px;
+  padding: var(--code-block-controls-padding);
+  background-color: var(--code-block-controls-background-color);
+  border-top: var(--code-block-controls-border);
+  border-left: var(--code-block-controls-border);
+  border-right: var(--code-block-controls-border);
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+  margin-top: 10px;
+`;
+
+const Title = styled.span`
+  display: flex;
+  align-items: center;
+  color: var(--code-block-controls-text-color);
+`;
+
+const ControlsWrapper = styled.div`
+  display: flex;
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  text-align: right;
+
+  &:focus-within {
+    opacity: 1;
+  }
+`;

package/src/components/CodeBlock/index.ts

@@ -0,0 +1,5 @@
+export * from '@theme/components/CodeBlock/CodeBlock';
+export * from '@theme/components/CodeBlock/CodeBlockContainer';
+export * from '@theme/components/CodeBlock/CodeBlockControls';
+export * from '@theme/components/CodeBlock/CodeBlockControlButton';
+export * from '@theme/components/CodeBlock/styledVariables';

package/src/components/CodeBlock/styledVariables.ts

@@ -0,0 +1,89 @@
+import { css } from 'styled-components';
+
+export const code = css`
+  /**
+    * @tokens Code base styles
+    */
+  --code-font-size: 13px; // @presenter FontSize
+  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
+  --code-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --code-line-height: var(--line-height-xsm); // @presenter LineHeight
+  --code-wrap: pre;
+  --code-word-break: break-word;
+
+  /**
+    * @tokens Inline Code
+    */
+  --inline-code-font-size: var(--code-font-size); // @presenter FontSize
+  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
+  --inline-code-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --inline-code-line-height: var(--code-line-height); // @presenter LineHeight
+  --inline-code-text-color: var(--text-secondary); // @presenter Color
+  --inline-code-background-color: var(--bg-overlay); // @presenter Color
+  --inline-code-border-color: var(--border-primary); // @presenter Color
+  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+    * @tokens Code Block
+    */
+  --code-block-font-size: var(--code-font-size); // @presenter FontSize
+  --code-block-font-family: var(--code-font-family); // @presenter FontFamily
+  --code-block-line-height: var(--code-line-height); // @presenter LineHeight
+  --code-block-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --code-block-text-color: var(--text-secondary); // @presenter Color
+  --code-block-background-color: var(--bg-raised); // @presenter Color
+  --code-block-border-color: var(--border-primary); // @presenter Color
+  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --code-block-padding: calc(var(--spacing-unit) * 2);
+  --code-block-margin: 0;
+  --code-block-max-height: 50vh;
+  --code-block-word-break: initial;
+
+  /**
+    * @tokens Code Block controls
+    */
+
+  --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize
+  --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily
+  --code-block-controls-text-color: var(--text-secondary); // @presenter Color
+  --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
+  --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
+  --code-block-controls-padding: 0 var(--spacing-xs); // @presenter Spacing
+  --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
+  --code-block-text-controls-background-color: var(--code-block-controls-background-color);
+
+  /**
+    * @tokens Code Block tokens
+   */
+  --code-block-tokens-default-color: var(--text-secondary); // @presenter Color
+  --code-block-tokens-comment-color: var(--text-placeholder); // @presenter Color
+  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
+  --code-block-tokens-string-color: var(--color-cyan-7); // @presenter Color
+  --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
+  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-link-color: var(--color-blue-7); // @presenter Color
+  --code-block-tokens-operator-color: var(--color-gold-7); // @presenter Color
+  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-keyword-color: var(--color-magenta-7); // @presenter Color
+  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
+  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
+  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
+import { useMount, useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
+
+interface ColorModeSwitcherProps {
+  className?: string;
+}
+
+export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element | null {
+  const { className } = props;
+  const themeSettings = useThemeConfig();
+  const colorMode = themeSettings.colorMode;
+  const [activeColorMode, setActiveColorMode] = useState('');
+  const modes = colorMode?.modes || ['light', 'dark'];
+  const defaultColor = modes[0] || 'light';
+
+  useMount(() => {
+    setActiveColorMode(document.documentElement.className || defaultColor);
+  });
+
+  if (colorMode?.hide) {
+    return null;
+  }
+
+  const handelChangeColorMode = () => {
+    const activeIndex = modes.indexOf(activeColorMode);
+    const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
+    setActiveColorMode(mode);
+    localStorage.setItem('colorSchema', mode);
+    document.documentElement.className = `${mode} notransition`;
+
+    window.requestAnimationFrame(() => {
+      document.documentElement.classList.remove('notransition');
+    });
+
+    telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
+  };
+
+  return (
+    <Wrapper
+      data-component-name="ColorModeSwitcher/ColorModeSwitcher"
+      onClick={handelChangeColorMode}
+      modes={modes}
+      role="link"
+      className={className}
+    >
+      {modes.map((mode) => (
+        <ColorModeIcon mode={mode} key={mode} />
+      ))}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<{ modes: string[] }>`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  ${ColorModeIcon} {
+    display: none;
+  }
+
+  ${({ modes }: { modes: string[] }) => {
+    const items = modes.map((mode) => {
+      return `
+        html.${mode} & ${ColorModeIcon}.${mode} {
+          display: block;
+        }
+      `;
+    });
+
+    return items.join('');
+  }}
+`;

package/src/components/ColorModeSwitcher/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/ColorModeSwitcher/ColorModeSwitcher';