@redocly/theme 0.10.0 → 0.11.0

package/lib/components/JsonViewer/JsonViewer.js

@@ -0,0 +1,240 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCodeBlock = exports.JsonViewerWrap = exports.JsonViewer = exports.Json = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CopyButton_1 = require("../../components/CopyButton");
+const SamplesPanelControls_1 = require("../../components/SamplesPanelControls");
+const utils_1 = require("../../utils");
+const hooks_1 = require("../../hooks");
+const CodeBlock_1 = require("../../components/CodeBlock");
+function JsonComponent({ data, jsonSampleExpandLevel, className, withLineNumbers, startLineNumber, onCopyClick, }) {
+    const node = (0, react_1.useRef)(null);
+    (0, hooks_1.useMount)(() => {
+        var _a;
+        (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', clickListener);
+    });
+    (0, hooks_1.useUnmount)(() => {
+        var _a;
+        (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', clickListener);
+    });
+    const expandAll = () => {
+        var _a, _b;
+        const elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
+        for (const collapsed of Array.prototype.slice.call(elements)) {
+            const parentNode = collapsed.parentNode;
+            if (!parentNode)
+                continue;
+            parentNode.classList.remove('collapsed');
+            (_b = parentNode.querySelector('.collapser')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', 'collapse');
+        }
+    };
+    const collapseAll = () => {
+        var _a, _b;
+        const elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
+        // skip first item to avoid collapsing whole object/array
+        const elementsArr = Array.prototype.slice.call(elements, 1);
+        for (const expanded of elementsArr) {
+            const parentNode = expanded.parentNode;
+            if (!parentNode)
+                continue;
+            parentNode.classList.add('collapsed');
+            (_b = parentNode.querySelector('.collapser')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', 'expand');
+        }
+    };
+    const collapseElement = (target) => {
+        var _a, _b;
+        if (target.parentElement && target.className === 'collapser') {
+            const collapsed = target.parentElement.getElementsByClassName('collapsible')[0];
+            if ((_a = collapsed === null || collapsed === void 0 ? void 0 : collapsed.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('collapsed')) {
+                collapsed.parentElement.classList.remove('collapsed');
+                target.setAttribute('aria-label', 'collapse');
+            }
+            else {
+                (_b = collapsed === null || collapsed === void 0 ? void 0 : collapsed.parentElement) === null || _b === void 0 ? void 0 : _b.classList.add('collapsed');
+                target.setAttribute('aria-label', 'expand');
+            }
+        }
+    };
+    const clickListener = (event) => {
+        collapseElement(event.target);
+    };
+    const renderInner = ({ renderCopyButton }) => {
+        const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+        return (react_1.default.createElement(exports.JsonViewerWrap, { "data-cy": "json-viewer" },
+            react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "buttons" },
+                renderCopyButton(),
+                showFoldingButtons && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: expandAll, "data-cy": "expand-all" }, "Expand all"),
+                    react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: collapseAll, "data-cy": "collapse-all" }, "Collapse all")))),
+            react_1.default.createElement(exports.StyledCodeBlock, { className: withLineNumbers ? `${className} line-numbers` : className, ref: node, dangerouslySetInnerHTML: {
+                    __html: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel, startLineNumber),
+                } })));
+    };
+    return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { "data-cy": "copy-button", data: data, onCopyClick: onCopyClick }, renderInner));
+}
+exports.Json = (0, react_1.memo)(JsonComponent);
+exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(() => ({
+    'data-component-name': 'JsonViewer/JsonViewer',
+})) `
+  .redoc-json code {
+    background-color: var(--panel-samples-code-block-background-color);
+    color: var(--text-color-inverse);
+    padding: inherit;
+    border: none;
+  }
+
+  contain: content;
+  overflow-x: auto;
+  position: relative;
+  padding: 10px;
+  border-radius: var(--border-radius);
+  background-color: var(--panel-samples-code-block-background-color);
+  color: var(--text-color-inverse);
+  font-size: var(--code-font-size);
+  font-family: var(--code-font-family);
+  white-space: var(--code-wrap, pre);
+
+  &.line-numbers {
+    padding: 20px 20px 20px 3em;
+
+    *[data-line]:not(.collapsed *[data-line]) {
+      &:before {
+        content: attr(data-line);
+        position: absolute;
+        left: 0;
+        min-width: 2em;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+        padding: 0 0.5em;
+        font-size: 13px;
+      }
+    }
+  }
+
+  .callback-function {
+    color: gray;
+  }
+
+  .ellipsis:after {
+    content: ' … ';
+  }
+
+  .collapsible {
+    padding-left: 2ch;
+    display: inline-block;
+  }
+
+  .hoverable {
+    padding: 1px 2px;
+    display: inline-block;
+  }
+
+  .collapsed {
+    white-space: nowrap;
+
+    & > .collapser:after {
+      content: '+';
+    }
+  }
+
+  .hovered {
+    background-color: rgba(235, 238, 249, 1);
+  }
+
+  .collapser {
+    --size: 15px;
+    --margin-right: 3px;
+
+    display: inline-block;
+    background-color: transparent;
+    border: 0;
+    padding: 1px;
+    color: #fff;
+    width: var(--size);
+    height: var(--size);
+    margin-left: calc((var(--size) + var(--margin-right)) * -1);
+    margin-right: var(--margin-right);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    font-family: var(--code-font-family);
+    font-size: var(--code-font-size);
+
+    &:after {
+      content: '-';
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+    }
+
+    &:focus {
+      outline: #fff dotted 1px;
+    }
+  }
+
+  .selected {
+    outline-width: 1px;
+    outline-style: dotted;
+  }
+
+  .collapsed > .collapsible {
+    display: none;
+  }
+
+  .ellipsis {
+    display: none;
+  }
+
+  .collapsed > .ellipsis {
+    display: inline;
+  }
+`;
+exports.JsonViewerWrap = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  &:hover > ${SamplesPanelControls_1.SampleControls} {
+    opacity: 1;
+  }
+`;
+exports.StyledCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock) `
+  flex: 1;
+
+  code {
+    font-family: var(--code-font-family);
+    font-size: 14px;
+    line-height: 18px;
+  }
+`;
+//# sourceMappingURL=JsonViewer.js.map

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

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

package/lib/components/JsonViewer/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/JsonViewer/JsonViewer"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/LastUpdated/LastUpdated.js

@@ -0,0 +1,75 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LastUpdated = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const timeago_js_1 = require("timeago.js");
+const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const FORMATS = {
+    timeago: (date, locale) => (0, timeago_js_1.format)(date, locale),
+    iso: (date) => date.toISOString().split('T')[0],
+    short: (date, locale) => date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+    long: (date, locale) => date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
+};
+function LastUpdated(props) {
+    const { markdown: { lastUpdatedBlock = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
+    if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
+        return null;
+    }
+    const lastModified = props.lastModified;
+    const format = props.format || lastUpdatedBlock.format || 'timeago';
+    const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
+    const isoDate = lastModified.toISOString().split('T')[0];
+    const lastUpdatedString = FORMATS[format](lastModified, locale);
+    const separator = format === 'timeago' ? ' ' : ' on ';
+    return (React.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate },
+        "Last updated",
+        separator,
+        React.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
+}
+exports.LastUpdated = LastUpdated;
+const Wrapper = styled_components_1.default.div `
+  color: var(--last-updated-text-color);
+  font-size: var(--last-updated-font-size);
+  font-family: var(--last-updated-font-family);
+  line-height: var(--last-updated-line-height);
+  padding-bottom: 30px;
+
+  ${({ rawOnPrint }) => rawOnPrint &&
+    `@media print {
+      time {
+        display: none;
+      }
+      &::after {
+        content: attr(data-print-datetime);
+      }
+    }
+  `}
+`;
+//# sourceMappingURL=LastUpdated.js.map

package/lib/components/Markdown/Admonition.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Admonition = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AlertIcon_1 = require("../../icons/AlertIcon/AlertIcon");
+function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(Wrapper, { type: type, className: className, "data-component-name": "Markdown/Admonition", "data-source": dataSource, "data-hash": dataHash },
+        react_1.default.createElement(AlertIcon_1.AlertIcon, { type: type }),
+        name ? react_1.default.createElement(Heading, { type: type }, name) : null,
+        react_1.default.createElement(Content, null, children)));
+}
+exports.Admonition = Admonition;
+const Wrapper = styled_components_1.default.div `
+  position: relative;
+  align-items: center;
+  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
+  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
+  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
+  border-radius: var(--admonition-border-radius);
+  font-size: var(--admonition-font-size);
+  font-weight: var(--admonition-font-weight);
+  line-height: var(--admonition-line-height);
+
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+
+  ${({ type }) => `
+    background-color: var(--admonition-${type}-background-color);
+    color: var(--admonition-${type}-text-color);
+    border: var(--admonition-${type}-border);
+  `}
+`;
+const Heading = styled_components_1.default.h5 `
+  display: block;
+  margin: 0 0 10px;
+
+  letter-spacing: var(--admonition-heading-letter-spacing);
+  color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
+
+  && {
+    font-size: var(--admonition-heading-font-size);
+    font-weight: var(--admonition-heading-font-weight);
+    line-height: var(--admonition-line-height);
+    text-transform: var(--admonition-heading-transform);
+  }
+`;
+const Content = styled_components_1.default.div `
+  & > p:first-child {
+    margin-top: 0;
+  }
+`;
+//# sourceMappingURL=Admonition.js.map

package/lib/components/Markdown/Heading.js

@@ -0,0 +1,48 @@
+"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.Heading = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../utils");
+const icons_1 = require("../../icons");
+/**
+ * Class name for all MD tags
+ */
+const mdClassName = 'md';
+function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
+        react_1.default.createElement(icons_1.AnchorIcon, null)));
+    return (0, react_1.createElement)(`h${level}`, {
+        id,
+        className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
+        'data-component-name': 'Markdown/Heading',
+        'data-source': dataSource,
+        'data-hash': dataHash,
+    }, react_1.default.createElement(react_1.default.Fragment, null,
+        linkEl,
+        children));
+}
+exports.Heading = Heading;
+//# sourceMappingURL=Heading.js.map

package/lib/components/Markdown/MarkdownLayout.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ResolvedNavItemWithLink } from '../../types/portal';
+type MarkdownLayoutProps = {
+    tableOfContent: React.ReactNode;
+    markdownWrapper: React.ReactNode;
+    feedback: React.ReactNode;
+    editPage?: {
+        to: string;
+        text: string;
+        icon?: string;
+    };
+    /** String in ISO format */
+    lastModified?: string | null;
+    nextPage?: ResolvedNavItemWithLink | null;
+    prevPage?: ResolvedNavItemWithLink | null;
+};
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, }: MarkdownLayoutProps): JSX.Element;
+export {};

package/lib/components/Markdown/MarkdownLayout.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownLayout = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PageWrapper_1 = require("../../components/Markdown/PageWrapper");
+const ContainerWrapper_1 = require("../../components/Markdown/ContainerWrapper");
+const PageNavigation_1 = require("../../components/PageNavigation/PageNavigation");
+const EditPageButton_1 = require("../../components/EditPageButton");
+const LastUpdated_1 = require("../../components/LastUpdated/LastUpdated");
+const hooks_1 = require("../../hooks");
+function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, }) {
+    const { markdown } = (0, hooks_1.useThemeConfig)();
+    const { editPage: themeEditPage } = markdown || {};
+    const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
+    return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
+        react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
+            react_1.default.createElement(LayoutTop, null,
+                lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
+                mergedConf && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: mergedConf.text, to: mergedConf.to, icon: mergedConf.icon }))),
+            markdownWrapper,
+            react_1.default.createElement(LayoutBottom, null, feedback),
+            react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })),
+        tableOfContent));
+}
+exports.MarkdownLayout = MarkdownLayout;
+const LayoutTop = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+const LayoutBottom = (0, styled_components_1.default)(LayoutTop) `
+  > * {
+    margin: 25px 5px;
+  }
+`;
+//# sourceMappingURL=MarkdownLayout.js.map