@redocly/theme 0.17.0 → 0.17.1

package/lib/components/CodeSample/CodeSample.js

@@ -1,226 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodeSample = void 0;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const ClipboardService_1 = require("../../utils/ClipboardService");
-const useThemeConfig_1 = require("../../hooks/useThemeConfig");
-const Feedback_1 = require("../../components/Feedback");
-const hooks_1 = require("../../mocks/hooks");
-const utils_1 = require("../../utils");
-function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, className = '', }) {
-    const langClassName = language ? `language-${language}` : '';
-    const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
-    const [isCopied, setIsCopied] = (0, react_1.useState)(false);
-    const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } = (0, Feedback_1.useReportDialog)(report);
-    const { translate } = (0, hooks_1.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) => {
-        ClipboardService_1.ClipboardService.copyCustom(code);
-        setIsCopied(true);
-        setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
-    };
-    return (react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('code-sample', className), "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
-        react_1.default.createElement(CodeSampleButtonContainer, null,
-            !copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
-                !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: translate(translationKeys.tooltipText, copy.tooltipText || 'Copy to clipboard') }, translate(translationKeys.buttonText, copy.buttonText || 'Copy'))),
-                isCopied && (react_1.default.createElement(DoneIndicator, null, translate(translationKeys.toasterText, copy.toasterText || 'Copied!'))))),
-            isReportButtonShown && (react_1.default.createElement(Button, Object.assign({}, reportButtonProps), translate(translationKeys.reportTitle, 'Report'))),
-            isReportDialogShown && react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialogProps, { location: rawContent }))),
-        react_1.default.createElement("pre", { className: langClassName },
-            react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
-}
-exports.CodeSample = CodeSample;
-const CodeSampleButtonContainer = styled_components_1.default.div `
-  display: flex;
-  position: absolute;
-  top: 12px;
-  right: 5px;
-`;
-const Button = styled_components_1.default.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_components_1.default.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 = (0, styled_components_1.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_components_1.default.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};
-  }
-`;
-//# sourceMappingURL=CodeSample.js.map

package/lib/components/CodeSample/index.d.ts

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

package/lib/components/CopyButton/CopyButtonWrapper.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { TooltipProps } from '../../components/Tooltip';
-export interface CopyButtonWrapperProps {
-    data: unknown;
-    children: (props: {
-        renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
-    }) => JSX.Element;
-    onCopyClick?: () => void;
-    dataTestId?: string;
-}
-export declare const CopyButtonWrapper: React.NamedExoticComponent<CopyButtonWrapperProps>;

package/lib/components/CopyButton/CopyButtonWrapper.js

@@ -1,53 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyButtonWrapper = void 0;
-const react_1 = __importStar(require("react"));
-const SamplesPanelControls_1 = require("../../components/SamplesPanelControls");
-const Tooltip_1 = require("../../components/Tooltip");
-const hooks_1 = require("../../hooks");
-const utils_1 = require("../../utils");
-function CopyButtonWrapperComponent({ data, children, onCopyClick, dataTestId = 'copy-button', }) {
-    const tooltip = (0, hooks_1.useControl)();
-    const showTooltip = () => {
-        tooltip.handleOpen();
-        setTimeout(() => {
-            tooltip.handleClose();
-        }, 1500);
-    };
-    const copy = () => {
-        const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
-        utils_1.ClipboardService.copyCustom(content);
-        showTooltip();
-        onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick();
-    };
-    const renderCopyButton = (placement = 'top') => {
-        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: "Copied", isOpen: tooltip.isOpened, placement: placement },
-            react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: copy, "data-cy": dataTestId }, "Copy")));
-    };
-    return children({ renderCopyButton });
-}
-exports.CopyButtonWrapper = (0, react_1.memo)(CopyButtonWrapperComponent);
-//# sourceMappingURL=CopyButtonWrapper.js.map

package/lib/components/SamplesPanelControls/SamplesPanelControls.d.ts

@@ -1,4 +0,0 @@
-export declare const SamplesControlButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const SampleControls: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SampleControlsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PreformattedCodeBlock: import("styled-components").StyledComponent<"pre", any, {}, never>;

package/lib/components/SamplesPanelControls/SamplesPanelControls.js

@@ -1,76 +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.PreformattedCodeBlock = exports.SampleControlsWrap = exports.SampleControls = exports.SamplesControlButton = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const CodeBlock_1 = require("../../components/CodeBlock");
-exports.SamplesControlButton = styled_components_1.default.button.attrs(({ 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 }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
-    padding: 2px 20px;
-  }
-
-  :hover,
-  :focus {
-    background-color: var(--panel-samples-controls-hover-background-color);
-  }
-`;
-exports.SampleControls = styled_components_1.default.div `
-  padding: 10px 0;
-  opacity: 0.7;
-  transition: opacity 0.3s ease;
-  text-align: right;
-
-  &:focus-within {
-    opacity: 1;
-  }
-
-  > div,
-  > ${exports.SamplesControlButton} {
-    /* can have tooltip wrapper div also */
-    margin-top: 5px;
-    margin-left: 10px;
-
-    ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
-      margin-top: 0;
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-`;
-exports.SampleControlsWrap = styled_components_1.default.div `
-  &:hover ${exports.SampleControls} {
-    opacity: 1;
-  }
-`;
-exports.PreformattedCodeBlock = (0, styled_components_1.default)(CodeBlock_1.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);
-`;
-//# sourceMappingURL=SamplesPanelControls.js.map

package/lib/components/SamplesPanelControls/index.d.ts

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

package/lib/components/SourceCode/SourceCode.d.ts

@@ -1,33 +0,0 @@
-/// <reference types="react" />
-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 declare function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }: CodeProps): JSX.Element;
-export declare function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId, withLineNumbers, startLineNumber, className, }: SourceCodeProps): JSX.Element;
-export {};

package/lib/components/SourceCode/SourceCode.js

@@ -1,60 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SourceCode = exports.Code = void 0;
-const react_1 = __importStar(require("react"));
-const utils_1 = require("../../utils");
-const SamplesPanelControls_1 = require("../../components/SamplesPanelControls");
-const CopyButton_1 = require("../../components/CopyButton");
-function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, className, }) {
-    const highlightedCode = (0, utils_1.highlight)(source, lang);
-    return (react_1.default.createElement(SamplesPanelControls_1.PreformattedCodeBlock, { className: className, dangerouslySetInnerHTML: {
-            __html: withLineNumbers
-                ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
-                : highlightedCode,
-        }, "data-cy": dataTestId }));
-}
-exports.Code = Code;
-function SourceCode({ lang, source, externalSource, onCopyClick, withCopyButton, dataTestId = 'source-code', withLineNumbers, startLineNumber, className, }) {
-    const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? 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
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        const _source = source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource));
-        if (_source) {
-            setSourceCode(_source);
-        }
-    }, [source, externalSource]);
-    if (withCopyButton) {
-        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: sourceCode, onCopyClick: onCopyClick, "data-component-name": "SourceCode/SourceCode" }, ({ renderCopyButton }) => (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
-            react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
-            react_1.default.createElement(Code, { lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, dataTestId: dataTestId, className: className })))));
-    }
-    return (react_1.default.createElement(Code, { dataTestId: dataTestId, className: className, lang: lang, source: sourceCode, withLineNumbers: withLineNumbers, startLineNumber: startLineNumber, "data-component-name": "SourceCode/SourceCode" }));
-}
-exports.SourceCode = SourceCode;
-//# sourceMappingURL=SourceCode.js.map

package/lib/components/SourceCode/index.d.ts

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