@redocly/theme 0.16.0 → 0.17.1

package/src/components/CodeSample/CodeSample.tsx

@@ -1,257 +0,0 @@
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ClipboardService } from '@theme/utils/ClipboardService';
-import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import { ReportDialog, useReportDialog } from '@theme/components/Feedback';
-import { useTranslate } from '@portal/hooks';
-import { concatClassNames } from '@theme/utils';
-
-export type CodeSampleProps = {
-  language: string;
-  highlighted: string;
-  rawContent: string;
-  'data-source'?: string;
-  'data-hash'?: string;
-  className?: string;
-};
-
-export function CodeSample({
-  rawContent,
-  highlighted,
-  language,
-  'data-source': dataSource,
-  'data-hash': dataHash,
-  className = '',
-}: CodeSampleProps): JSX.Element {
-  const langClassName = language ? `language-${language}` : '';
-  const { codeSnippet: { copy = {}, report = {} } = {} } = useThemeConfig();
-
-  const [isCopied, setIsCopied] = useState(false);
-  const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } =
-    useReportDialog(report);
-
-  const { translate } = useTranslate();
-  const translationKeys = {
-    buttonText: 'theme.codeSnippet.copy.buttonText',
-    tooltipText: 'theme.codeSnippet.copy.tooltipText',
-    toasterText: 'theme.codeSnippet.copy.toasterText',
-    reportTitle: 'theme.codeSnippet.report.title',
-  };
-
-  const copyCode = (code: string) => {
-    ClipboardService.copyCustom(code);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
-  };
-
-  return (
-    <Wrapper
-      className={concatClassNames('code-sample', className)}
-      data-component-name="Markdown/CodeSample/CodeSample"
-      data-source={dataSource}
-      data-hash={dataHash}
-    >
-      <CodeSampleButtonContainer>
-        {!copy.hide && (
-          <>
-            {!isCopied && (
-              <Button
-                onClick={() => copyCode(rawContent)}
-                title={translate(
-                  translationKeys.tooltipText,
-                  copy.tooltipText || 'Copy to clipboard',
-                )}
-              >
-                {translate(translationKeys.buttonText, copy.buttonText || 'Copy')}
-              </Button>
-            )}
-            {isCopied && (
-              <DoneIndicator>
-                {translate(translationKeys.toasterText, copy.toasterText || 'Copied!')}
-              </DoneIndicator>
-            )}
-          </>
-        )}
-
-        {isReportButtonShown && (
-          <Button {...reportButtonProps}>{translate(translationKeys.reportTitle, 'Report')}</Button>
-        )}
-
-        {isReportDialogShown && <ReportDialog {...reportDialogProps} location={rawContent} />}
-      </CodeSampleButtonContainer>
-      <pre className={langClassName}>
-        <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
-      </pre>
-    </Wrapper>
-  );
-}
-
-const CodeSampleButtonContainer = styled.div`
-  display: flex;
-  position: absolute;
-  top: 12px;
-  right: 5px;
-`;
-
-const Button = styled.div`
-  padding: var(--code-block-controls-padding);
-  border-radius: var(--code-block-controls-border-radius);
-  font-size: var(--code-block-controls-font-size);
-  font-family: var(--code-block-controls-font-family);
-  &:hover {
-    cursor: pointer;
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-const DoneIndicator = styled.div`
-  padding: var(--code-block-controls-padding);
-  border-radius: var(--code-block-controls-border-radius);
-  font-size: var(--code-block-controls-font-size);
-  font-family: var(--code-block-controls-font-family);
-  cursor: default;
-`;
-
-const darkStyleTokens = css`
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: hsl(30, 20%, 50%);
-  }
-  .token.property,
-  .token.tag,
-  .token.number,
-  .token.constant,
-  .token.symbol {
-    color: #62bff9;
-  }
-  .token.boolean {
-    color: firebrick;
-  }
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: #a0fbaa;
-    & + a,
-    & + a:visited {
-      color: #4ed2ba;
-      text-decoration: underline;
-    }
-  }
-  .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
-    color: hsl(40, 90%, 60%);
-  }
-  .token.atrule,
-  .token.attr-value,
-  .token.keyword {
-    color: hsl(350, 40%, 70%);
-  }
-  .token.regex,
-  .token.important {
-    color: #e90;
-  }
-  .token.deleted {
-    color: red;
-  }
-`;
-
-const Wrapper = styled.div`
-  overflow: auto;
-  border-radius: 4px;
-  position: relative;
-
-  ${Button},
-  ${DoneIndicator} {
-    color: var(--code-block-controls-text-color);
-    background-color: var(--code-block-controls-background-color);
-    opacity: var(--code-block-controls-opacity);
-  }
-  ${Button}:hover {
-    color: var(--code-block-controls-hover-text-color);
-    background-color: var(--code-block-controls-hover-background-color);
-    opacity: var(--code-block-controls-active-opacity);
-  }
-
-  pre {
-    white-space: var(--code-wrap);
-    color: white;
-    padding: 12px 14px 15px 14px;
-    overflow-x: auto;
-    line-height: normal;
-    border-radius: var(--code-block-border-radius);
-    font-family: var(--code-font-family);
-    background-color: var(--code-block-background-color);
-
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-
-    code {
-      background-color: transparent;
-      border: 0;
-      padding: 0;
-      color: var(--code-block-text-color);
-      &:before,
-      &:after {
-        content: none;
-      }
-    }
-  }
-  pre[class*='language-'] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
-    border: 0;
-    border-radius: var(--border-radius);
-  }
-  code[class='language-text'] {
-    line-height: 1.2em;
-    display: inline-flex;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-align: left;
-    white-space: pre;
-    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;
-    .token.important,
-    .token.bold {
-      font-weight: bold;
-    }
-    .token.italic {
-      font-style: italic;
-    }
-    .token.entity {
-      cursor: help;
-    }
-    .token.punctuation {
-      opacity: 0.7;
-    }
-    .namespace {
-      opacity: 0.7;
-    }
-
-    ${darkStyleTokens};
-  }
-`;

package/src/components/CodeSample/index.ts

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

package/src/components/CopyButton/CopyButtonWrapper.tsx

@@ -1,55 +0,0 @@
-import React, { memo } from 'react';
-
-import { SamplesControlButton } from '@theme/components/SamplesPanelControls';
-import { Tooltip } from '@theme/components/Tooltip';
-import { useControl } from '@theme/hooks';
-import { ClipboardService } from '@theme/utils';
-import type { TooltipProps } from '@theme/components/Tooltip';
-
-export interface CopyButtonWrapperProps {
-  data: unknown;
-  children: (props: {
-    renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
-  }) => JSX.Element;
-  onCopyClick?: () => void;
-  dataTestId?: string;
-}
-
-function CopyButtonWrapperComponent({
-  data,
-  children,
-  onCopyClick,
-  dataTestId = 'copy-button',
-}: CopyButtonWrapperProps): JSX.Element {
-  const tooltip = useControl();
-
-  const showTooltip = (): void => {
-    tooltip.handleOpen();
-
-    setTimeout(() => {
-      tooltip.handleClose();
-    }, 1500);
-  };
-
-  const copy = (): void => {
-    const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
-    ClipboardService.copyCustom(content);
-    showTooltip();
-
-    onCopyClick?.();
-  };
-
-  const renderCopyButton = (placement: TooltipProps['placement'] = 'top'): JSX.Element => {
-    return (
-      <Tooltip className="copy-button" tip="Copied" isOpen={tooltip.isOpened} placement={placement}>
-        <SamplesControlButton onClick={copy} data-cy={dataTestId}>
-          Copy
-        </SamplesControlButton>
-      </Tooltip>
-    );
-  };
-
-  return children({ renderCopyButton });
-}
-
-export const CopyButtonWrapper = memo<CopyButtonWrapperProps>(CopyButtonWrapperComponent);

package/src/components/SamplesPanelControls/SamplesPanelControls.ts

@@ -1,76 +0,0 @@
-import styled from 'styled-components';
-
-import { CodeBlock } from '@theme/components/CodeBlock';
-
-export const SamplesControlButton = styled.button.attrs<{ className?: string }>(
-  ({ className }) => ({
-    'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
-    className: className,
-  }),
-)`
-  background-color: var(--panel-samples-controls-background-color);
-  border: 0;
-  outline: 0;
-  border-radius: var(--border-radius);
-  height: 20px;
-  color: var(--panel-samples-controls-text-color);
-  font-size: 12px;
-  line-height: 12px;
-  cursor: pointer;
-  padding: 1px 6px;
-  min-width: 90px;
-
-  ${({ theme }) => theme.mediaQueries?.small} {
-    padding: 2px 20px;
-  }
-
-  :hover,
-  :focus {
-    background-color: var(--panel-samples-controls-hover-background-color);
-  }
-`;
-
-export const SampleControls = styled.div`
-  padding: 10px 0;
-  opacity: 0.7;
-  transition: opacity 0.3s ease;
-  text-align: right;
-
-  &:focus-within {
-    opacity: 1;
-  }
-
-  > div,
-  > ${SamplesControlButton} {
-    /* can have tooltip wrapper div also */
-    margin-top: 5px;
-    margin-left: 10px;
-
-    ${({ theme }) => theme.mediaQueries?.small} {
-      margin-top: 0;
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-`;
-
-export const SampleControlsWrap = styled.div`
-  &:hover ${SampleControls} {
-    opacity: 1;
-  }
-`;
-
-export const PreformattedCodeBlock = styled(CodeBlock.withComponent('pre'))`
-  overflow-x: auto;
-  margin: 0;
-  max-height: var(--code-block-max-height);
-  font-family: var(--code-font-family);
-  padding: 20px;
-  border-radius: var(--border-radius);
-  background-color: var(--panel-samples-controls-background-color);
-  color: var(--text-color-inverse);
-  font-size: var(--code-font-size);
-  white-space: var(--code-wrap, pre);
-`;

package/src/components/SamplesPanelControls/index.ts

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

package/src/components/SourceCode/SourceCode.tsx

@@ -1,128 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { highlight, addLineNumbers } from '@theme/utils';
-import {
-  SampleControls,
-  SampleControlsWrap,
-  PreformattedCodeBlock,
-} from '@theme/components/SamplesPanelControls';
-import { CopyButtonWrapper } from '@theme/components/CopyButton';
-
-interface CommonCodeProps {
-  withLineNumbers?: boolean;
-  startLineNumber?: number;
-  className?: string;
-}
-
-export interface SourceCodeProps extends CommonCodeProps {
-  lang: string;
-  source?: string;
-  externalSource?: ExternalSource;
-  onCopyClick?: () => void;
-  withCopyButton?: boolean;
-  dataTestId?: string;
-}
-
-interface CodeProps
-  extends Required<Pick<SourceCodeProps, 'lang' | 'source' | 'dataTestId'>>,
-    CommonCodeProps {}
-
-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 Code({
-  source,
-  lang,
-  dataTestId,
-  withLineNumbers,
-  startLineNumber,
-  className,
-}: CodeProps): JSX.Element {
-  const highlightedCode = highlight(source, lang);
-
-  return (
-    <PreformattedCodeBlock
-      className={className}
-      dangerouslySetInnerHTML={{
-        __html: withLineNumbers
-          ? addLineNumbers(highlightedCode, startLineNumber)
-          : highlightedCode,
-      }}
-      data-cy={dataTestId}
-    />
-  );
-}
-
-export function SourceCode({
-  lang,
-  source,
-  externalSource,
-  onCopyClick,
-  withCopyButton,
-  dataTestId = 'source-code',
-  withLineNumbers,
-  startLineNumber,
-  className,
-}: SourceCodeProps): JSX.Element {
-  const [sourceCode, setSourceCode] = useState<string>(source ?? '');
-
-  // 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]);
-
-  if (withCopyButton) {
-    return (
-      <CopyButtonWrapper
-        data={sourceCode}
-        onCopyClick={onCopyClick}
-        data-component-name="SourceCode/SourceCode"
-      >
-        {({ renderCopyButton }) => (
-          <SampleControlsWrap>
-            <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
-            <Code
-              lang={lang}
-              source={sourceCode}
-              withLineNumbers={withLineNumbers}
-              startLineNumber={startLineNumber}
-              dataTestId={dataTestId}
-              className={className}
-            />
-          </SampleControlsWrap>
-        )}
-      </CopyButtonWrapper>
-    );
-  }
-
-  return (
-    <Code
-      dataTestId={dataTestId}
-      className={className}
-      lang={lang}
-      source={sourceCode}
-      withLineNumbers={withLineNumbers}
-      startLineNumber={startLineNumber}
-      data-component-name="SourceCode/SourceCode"
-    />
-  );
-}

package/src/components/SourceCode/index.ts

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