@redocly/theme 0.17.0 → 0.17.1

package/src/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,100 @@
+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} />
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div``;

package/src/components/CodeBlock/{CodeBlock.ts → CodeBlockContainer.tsx}

@@ -2,12 +2,30 @@ import styled from 'styled-components';
 
 import { generateCodeBlockTokens } from '@theme/utils';
 
-export const CodeBlock = styled.div.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'CodeBlock/CodeBlock',
+export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'CodeBlock/CodeBlockContainer',
   className,
-}))`
-  max-height: var(--code-block-max-height, 600px);
-  word-break: var(--code-block-word-break, initial);
+}))<{ withControls?: boolean }>`
+  && {
+    overflow-x: auto;
+    max-height: var(--code-block-max-height);
+    font-family: var(--code-block-font-family);
+    line-height: var(--code-line-height);
+    padding: var(--code-block-padding);
+    margin: var(--code-block-margin);
+    border-radius: ${(withControls) =>
+      withControls
+        ? '0 0 var(--code-block-border-radius) var(--code-block-border-radius)'
+        : 'var(--code-block-border-radius)'};
+    background-color: var(--code-block-background-color);
+    color: var(--code-block-text-color);
+    font-size: var(--code-font-size);
+    white-space: var(--code-wrap, pre);
+    max-height: var(--code-block-max-height, 600px);
+    word-break: var(--code-block-word-break, initial);
+    border: none;
+  }
+
   /**
   * Based on prism-dark.css
   */
@@ -15,7 +33,6 @@ export const CodeBlock = styled.div.attrs<{ className?: string }>(({ className }
   pre[class*='language-'] {
     text-shadow: 0 -0.1em 0.2em black;
     text-align: left;
-    white-space: pre;
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;

package/src/components/CodeBlock/CodeBlockControlButton.tsx

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+
+export const CodeBlockControlButton = styled.button.attrs(() => ({
+  'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
+}))<{ asIcon?: boolean }>`
+  border: 0;
+  outline: 0;
+  border-radius: var(--border-radius);
+  height: 20px;
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  color: var(--panel-samples-controls-text-color);
+
+  ${({ asIcon }) =>
+    asIcon
+      ? css`
+          background-color: var(--panel-samples-icon-controls-background-color);
+        `
+      : css`
+          min-width: 90px;
+          background-color: var(--panel-samples-text-controls-background-color);
+        `}
+
+  ${({ theme }) => theme.mediaQueries?.small} {
+    padding: ${({ asIcon }) => (asIcon ? '2px 10px' : '2px 20px')};
+  }
+
+  :not(:first-child) {
+    margin-left: 5px;
+  }
+
+  :hover,
+  :focus {
+    background-color: var(--panel-samples-controls-hover-background-color);
+  }
+`;

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CodeBlockControlButton } from '@theme/components/CodeBlock';
+import { CollapseIcon, DeselectIcon, ExpandIcon, ReportIcon, SelectIcon } from '@theme/icons';
+import { useThemeConfig } from '@theme/hooks';
+
+import { CopyButton } from '../CopyButton';
+
+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?.controlsStyle 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>
+        {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}
+          />
+        ) : 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}
+
+        {report && report?.props?.visible ? (
+          <CodeBlockControlButton
+            data-cy="report-button"
+            data-testid="report-button"
+            asIcon={controlsType === 'icon'}
+            title={report.tooltipText}
+            {...report.props}
+          >
+            {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
+          </CodeBlockControlButton>
+        ) : 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;
+  padding: 5px 10px;
+  min-height: 30px;
+  background-color: var(--panel-samples-controls-background-color);
+  border-bottom: var(--panel-samples-controls-border);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  margin-top: 10px;
+`;
+
+const Title = styled.span`
+  display: flex;
+  align-items: center;
+  color: var(--panel-samples-controls-text-color);
+`;
+
+const ControlsWrapper = styled.div`
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  text-align: right;
+
+  &:focus-within {
+    opacity: 1;
+  }
+`;

package/src/components/CodeBlock/index.ts

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

package/src/components/CopyButton/CopyButton.tsx

@@ -1,31 +1,83 @@
-import React, { useState } from 'react';
-import copy from 'copy-to-clipboard';
-import { Button } from '@theme';
+import React, { memo } from 'react';
+
+import type { ControlItemType } from '@theme/components/CodeBlock';
+import { CodeBlockControlButton } from '@theme/components/CodeBlock';
+import { Tooltip } from '@theme/components/Tooltip';
+import { useControl } from '@theme/hooks';
+import { ClipboardService } from '@theme/utils';
+import type { TooltipProps } from '@theme/components/Tooltip';
+import { CopyIcon } from '@theme/icons';
+import { useTranslate } from '@portal/hooks';
 
 export interface CopyButtonProps {
-  text: string;
+  data: unknown;
+  type?: ControlItemType;
+  toasterPlacement?: TooltipProps['placement'];
+  toasterText?: TooltipProps['tip'];
+  toasterDuration?: number;
+  buttonText?: string;
+  tooltipText?: string;
+  onCopyClick?: () => void;
   dataTestId?: string;
 }
 
-export const CopyButton = ({ text, dataTestId = 'copy-button' }: CopyButtonProps): JSX.Element => {
-  const [title, setTitle] = useState('Copy');
+function CopyButtonComponent({
+  data,
+  type = 'icon',
+  toasterPlacement = 'top',
+  toasterText,
+  toasterDuration,
+  buttonText,
+  tooltipText,
+  onCopyClick,
+  dataTestId = 'copy-button',
+}: CopyButtonProps): JSX.Element {
+  const tooltip = useControl();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    buttonText: 'theme.codeSnippet.copy.buttonText',
+    tooltipText: 'theme.codeSnippet.copy.tooltipText',
+    toasterText: 'theme.codeSnippet.copy.toasterText',
+  };
+
+  const showTooltip = (duration: number = 1500): void => {
+    tooltip.handleOpen();
 
-  async function write() {
-    await copy(text);
+    setTimeout(() => {
+      tooltip.handleClose();
+    }, duration);
+  };
 
-    setTitle('Copied!');
+  const copy = (duration?: number): void => {
+    const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+    ClipboardService.copyCustom(content);
+    showTooltip(duration);
 
-    setTimeout(() => setTitle('Copy'), 1500);
-  }
+    onCopyClick?.();
+  };
 
   return (
-    <Button
-      color="secondary"
-      onClick={write}
-      data-cy={dataTestId}
-      data-component-name="CopyButton/CopyButton"
+    <Tooltip
+      className="copy-button"
+      tip={translate(translationKeys.toasterText, toasterText || 'Copied!')}
+      isOpen={tooltip.isOpened}
+      placement={toasterPlacement}
     >
-      {title}
-    </Button>
+      <CodeBlockControlButton
+        onClick={() => copy(toasterDuration)}
+        data-cy={dataTestId}
+        asIcon={type === 'icon'}
+        title={translate(translationKeys.tooltipText, tooltipText || 'Copy to clipboard')}
+        data-testid={dataTestId}
+      >
+        {type === 'icon' ? (
+          <CopyIcon />
+        ) : (
+          translate(translationKeys.buttonText, buttonText || 'Copy')
+        )}
+      </CodeBlockControlButton>
+    </Tooltip>
   );
-};
+}
+
+export const CopyButton = memo<CopyButtonProps>(CopyButtonComponent);

package/src/components/CopyButton/index.ts

@@ -1,2 +1 @@
-export * from '@theme/components/CopyButton/CopyButtonWrapper';
 export * from '@theme/components/CopyButton/CopyButton';

package/src/components/Feedback/useReportDialog.ts

@@ -2,18 +2,26 @@ import { useState } from 'react';
 
 import type { ReportDialogProps } from '@theme/components/Feedback/types';
 import { useTranslate } from '@portal/hooks';
+import { useThemeConfig } from '@theme/hooks';
 
-type ReportSettings = {
-  hide?: boolean;
-  label?: string;
-  tooltipText?: string;
-};
+export interface ReportButtonProps {
+  onClick: () => void;
+  buttonText: string;
+  tooltip: string;
+  visible: boolean;
+}
+interface ReportComponentsProps {
+  visible?: boolean;
+  props: Partial<ReportDialogProps> | ReportButtonProps;
+}
 
-export function useReportDialog(reportSettings: ReportSettings): Record<string, any> {
+export function useReportDialog(): Record<string, ReportComponentsProps> {
+  const { codeSnippet: { report = {} } = {} } = useThemeConfig();
   const [isReportDialogShown, setIsReportDialogShown] = useState(false);
-  const isReportButtonShown = reportSettings.hide === false; // TODO: report temporary disabled by default
+  const isReportButtonShown = report?.hide === false; // TODO: report temporary disabled by default
   const { translate } = useTranslate();
   const translationKeys = {
+    buttonText: 'theme.codeSnippet.report.buttonText',
     tooltipText: 'theme.codeSnippet.report.tooltipText',
     label: 'theme.codeSnippet.report.label',
   };
@@ -24,20 +32,22 @@ export function useReportDialog(reportSettings: ReportSettings): Record<string,
   const hideReportDialog = () => {
     setIsReportDialogShown(false);
   };
-  const reportButtonProps = {
+  const reportButtonProps: ReportButtonProps = {
     onClick: showReportDialog,
-    title: translate(translationKeys.tooltipText, reportSettings.tooltipText || 'Report a problem'),
+    buttonText: translate(translationKeys.buttonText, 'Report'),
+    tooltip: translate(translationKeys.tooltipText, 'Report a problem'),
+    visible: isReportButtonShown,
   };
   const reportDialogProps: Partial<ReportDialogProps> = {
     settings: {
-      label: translate(
-        translationKeys.label,
-        reportSettings.label || 'What is wrong with this code?',
-      ),
+      label: translate(translationKeys.label, 'What is wrong with this code?'),
     },
     onSubmit: hideReportDialog,
     onCancel: hideReportDialog,
   };
 
-  return { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps };
+  return {
+    reportDialog: { visible: isReportDialogShown, props: reportDialogProps },
+    reportButton: { props: reportButtonProps },
+  };
 }