@redocly/theme 0.0.0-react18-20231120182601

package/lib/components/Markdown/Admonition.js

@@ -0,0 +1,59 @@
+"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 }),
+        react_1.default.createElement(TextContainer, null,
+            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 `
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
+  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
+  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
+  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 TextContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+`;
+const Heading = styled_components_1.default.div `
+  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/ContainerWrapper.d.ts

@@ -0,0 +1,3 @@
+export declare const ContainerWrapper: import("styled-components").StyledComponent<"section", any, {
+    withToc: boolean;
+}, never>;

package/lib/components/Markdown/ContainerWrapper.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ContainerWrapper = styled_components_1.default.section.attrs(({ className }) => ({
+    'data-component-name': 'Markdown/ContainerWrapper',
+    className,
+})) `
+  max-width: var(--md-container-max-width);
+  width: 90%;
+  margin: 0 auto;
+
+  padding: var(--md-container-padding-vertical) var(--md-container-padding-horizontal);
+
+  article:first-child > h1:first-child {
+    // disable margin top for h1 on the title heading
+    margin-top: 0;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
+  }
+`;
+//# sourceMappingURL=ContainerWrapper.js.map

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type DetailsProps = {
+    summary: string;
+    className?: string;
+};
+export declare function Details({ summary, children, className, }: React.PropsWithChildren<DetailsProps>): JSX.Element;
+export {};

package/lib/components/Markdown/Details.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Details = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Details({ summary, children, className, }) {
+    return (react_1.default.createElement(StyledDetails, { className: className },
+        react_1.default.createElement("summary", null, summary),
+        react_1.default.createElement(StyledDetailsContent, null, children)));
+}
+exports.Details = Details;
+const StyledDetails = styled_components_1.default.details ``;
+const StyledDetailsContent = styled_components_1.default.div ``;
+//# sourceMappingURL=Details.js.map

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

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, }: PropsWithChildren<{
+    level: number;
+    id: string;
+    'data-source'?: string;
+    'data-hash'?: string;
+    className?: string;
+}>): JSX.Element;

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, className, }) {
+    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, className),
+        '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,17 @@
+import React from 'react';
+import type { ResolvedNavItemWithLink } from '../../types/portal';
+type MarkdownLayoutProps = {
+    tableOfContent: React.ReactNode;
+    markdownWrapper: React.ReactNode;
+    feedback: React.ReactNode;
+    editPage?: {
+        to: string;
+    };
+    /** String in ISO format */
+    lastModified?: string | null;
+    nextPage?: ResolvedNavItemWithLink | null;
+    prevPage?: ResolvedNavItemWithLink | null;
+    className?: string;
+};
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, className, }: MarkdownLayoutProps): JSX.Element;
+export {};

package/lib/components/Markdown/MarkdownLayout.js

@@ -0,0 +1,47 @@
+"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");
+const Breadcrumbs_1 = require("../../components/Breadcrumbs");
+function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, className, }) {
+    var _a;
+    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", className: className },
+        react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: !((_a = markdown === null || markdown === void 0 ? void 0 : markdown.toc) === null || _a === void 0 ? void 0 : _a.hide) },
+            react_1.default.createElement(Breadcrumbs, null),
+            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, { to: mergedConf.to })),
+            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 Breadcrumbs = (0, styled_components_1.default)(Breadcrumbs_1.Breadcrumbs) `
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;
+const LayoutBottom = (0, styled_components_1.default)(LayoutTop) `
+  justify-content: center;
+  > * {
+    margin: 25px 5px;
+  }
+`;
+//# sourceMappingURL=MarkdownLayout.js.map

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

@@ -0,0 +1,8 @@
+import type { FlattenSimpleInterpolation } from 'styled-components';
+export declare const baseTable: FlattenSimpleInterpolation;
+export declare const linksCss: FlattenSimpleInterpolation;
+export declare function headingAnchor(className?: string): FlattenSimpleInterpolation;
+export declare const MarkdownWrapper: import("styled-components").StyledComponent<"main", any, {
+    compact?: boolean | undefined;
+    inline?: boolean | undefined;
+}, never>;

package/lib/components/Markdown/MarkdownWrapper.js

@@ -0,0 +1,415 @@
+"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.MarkdownWrapper = exports.headingAnchor = exports.linksCss = exports.baseTable = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const theme_helpers_1 = require("../../utils/theme-helpers");
+exports.baseTable = (0, styled_components_1.css) `
+  table.md {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: keep-all;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin-top: var(--md-table-margin-vertical);
+    margin-bottom: var(--md-table-margin-vertical);
+    font-size: var(--md-table-font-size);
+
+    th,
+    td {
+      padding: var(--md-table-cell-padding);
+      border-bottom: 1px solid var(--md-table-border-color);
+      color: var(--md-table-cell-text-color);
+    }
+
+    tr {
+      background-color: var(--md-table-stripe-background-color);
+    }
+
+    th {
+      /** th has text-align: center by default */
+      text-align: left;
+      font-weight: var(--md-table-head-font-weight);
+      color: var(--md-table-head-text-color);
+      background-color: var(--md-table-head-background-color);
+    }
+
+    /* need to overwrite the text-align: left from above */
+    th[align='center'] {
+      text-align: center;
+    }
+    th[align='right'] {
+      text-align: right;
+    }
+
+    tr th:first-child,
+    tr td:first-child {
+      border-left: 1px solid var(--md-table-border-color);
+    }
+
+    tr td:last-child,
+    tr th:last-child {
+      border-right: 1px solid var(--md-table-border-color);
+    }
+
+    thead td,
+    thead th {
+      border-top: 1px solid var(--md-table-border-color);
+    }
+
+    /* top-left border */
+
+    thead tr:first-child th:first-child {
+      border-top-left-radius: var(--md-table-border-radius);
+    }
+
+    /* top-right border */
+
+    thead tr:first-child th:last-child {
+      border-top-right-radius: var(--md-table-border-radius);
+    }
+
+    /* bottom-left border */
+
+    tbody tr:last-child td:first-child {
+      border-bottom-left-radius: var(--md-table-border-radius);
+    }
+
+    /* bottom-right border */
+
+    tbody tr:last-child td:last-child {
+      border-bottom-right-radius: var(--md-table-border-radius);
+    }
+  }
+`;
+exports.linksCss = (0, styled_components_1.css) `
+  a:not([role='button']) {
+    text-decoration: var(--link-decoration);
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+
+    &:visited {
+      color: var(--link-visited-text-color);
+      text-decoration: var(--link-visited-decoration);
+    }
+
+    &:hover {
+      text-decoration: var(--link-hover-decoration);
+      color: var(--link-hover-text-color);
+    }
+
+    &:focus {
+      color: var(--link-active-text-color);
+      text-decoration: var(--link-active-decoration);
+    }
+  }
+`;
+// TODO: Can users specify another className or we should hardcode it?
+function headingAnchor(className = 'anchor') {
+    return (0, styled_components_1.css) `
+    .${className}.before {
+      position: absolute;
+      left: 0;
+      transform: translateX(-100%);
+      padding-right: var(--heading-anchor-offset-right);
+    }
+
+    .${className}.after {
+      display: inline-block;
+      padding-left: 4px;
+    }
+
+    svg,
+    .${className} svg {
+      fill: var(--heading-anchor-color);
+      visibility: hidden;
+
+      background-image: var(--heading-anchor-icon);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    :hover .${className} svg,
+    .${className}:focus svg {
+      visibility: visible;
+    }
+  `;
+}
+exports.headingAnchor = headingAnchor;
+exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className }) => ({
+    'data-component-name': 'Markdown/MarkdownWrapper',
+    className,
+})) `
+  font-weight: var(--font-weight-regular);
+  padding: 0;
+
+  color: var(--text-secondary);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  ${({ compact }) => compact &&
+    (0, styled_components_1.css) `
+      p:first-child {
+        margin-top: 0;
+      }
+      p:last-child {
+        margin-bottom: 0;
+      }
+    `}
+
+  ${({ inline }) => inline &&
+    (0, styled_components_1.css) `
+      p {
+        display: inline-block;
+      }
+    `}
+
+  ${exports.linksCss}
+
+  img {
+    max-width: 100%;
+  }
+
+  h1.md,
+  h2.md,
+  h3.md,
+  h4.md,
+  h5.md,
+  h6.md {
+    font-weight: var(--heading-font-weight);
+    font-family: var(--heading-font-family);
+    position: relative;
+
+    scroll-margin-top: var(--navbar-height);
+  }
+
+  strong {
+    font-weight: var(--font-weight-bold);
+  }
+
+  hr {
+    border-top: 1px solid var(--md-hr-border-color);
+    background-color: var(--md-hr-background-color);
+    height: var(--md-hr-height);
+    margin: var(--md-hr-margin-vertical) 0;
+  }
+
+  details {
+    margin: 1.125em 0;
+
+    summary {
+      color: var(--text-secondary);
+      font-weight: var(--font-weight-regular);
+      outline: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    > :not(summary):first-of-type {
+      margin-top: 1.25em;
+    }
+
+    > *:last-child {
+      margin-bottom: 1.25em;
+    }
+  }
+
+  ${exports.baseTable};
+
+  p {
+    margin: var(--md-paragraph-margin-vertical) var(--md-paragraph-margin-horizontal);
+
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1.md {
+    ${(0, theme_helpers_1.typography)('h1', 'h')};
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h2.md {
+    ${(0, theme_helpers_1.typography)('h2', 'h')};
+    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h3.md {
+    ${(0, theme_helpers_1.typography)('h3', 'h')};
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h4.md {
+    ${(0, theme_helpers_1.typography)('h4', 'h')};
+    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h5.md {
+    ${(0, theme_helpers_1.typography)('h5', 'h')};
+    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h6.md {
+    ${(0, theme_helpers_1.typography)('h6', 'h')};
+    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h1.md code {
+    font-size: var(--h1-font-size);
+  }
+
+  h2.md code {
+    font-size: var(--h2-font-size);
+  }
+
+  h3.md code {
+    font-size: var(--h3-font-size);
+  }
+
+  h4.md code {
+    font-size: var(--h4-font-size);
+  }
+
+  h5.md code {
+    font-size: var(--h5-font-size);
+  }
+
+  h6.md code {
+    font-size: var(--h6-font-size);
+  }
+
+  code {
+    color: var(--inline-code-text-color);
+    background-color: var(--inline-code-background-color);
+
+    border-radius: var(--inline-code-border-radius);
+    border: 1px solid var(--inline-code-border-color);
+    padding: 0.1em 0.25em 0.2em;
+    font-weight: var(--code-font-weight);
+    word-break: break-word;
+    font-size: var(--inline-code-font-size);
+    font-family: var(--code-font-family);
+  }
+
+  pre {
+    white-space: var(--code-wrap, pre);
+    background-color: var(--code-block-background-color);
+    font-family: var(--code-block-font-family);
+    color: var(--code-block-text-color);
+    padding: calc(var(--spacing-unit) * 2);
+    overflow-x: auto;
+    line-height: normal;
+
+    code {
+      background-color: transparent;
+      color: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      border: none;
+    }
+  }
+
+  blockquote {
+    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
+    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);
+    border-left: var(--md-blockquote-border-left);
+    background-color: var(--md-blockquote-background-color);
+    color: var(--md-blockquote-text-color);
+    box-shadow: var(--md-blockquote-box-shadow);
+
+    & > p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+    margin: 0 auto;
+
+    &:only-child {
+      display: block;
+    }
+  }
+
+  p,
+  li {
+    & > img:only-child {
+      display: inline-block;
+    }
+  }
+
+  ul.md,
+  ol {
+    padding-left: var(--md-list-left-padding);
+    margin: 0 0 var(--md-list-margin);
+
+    ul,
+    ol {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
+
+  li {
+    margin: var(--md-list-item-margin);
+    list-style: var(--md-list-item-style);
+  }
+
+  ul > li:has(input[type='checkbox']) {
+    list-style: var(--md-checkbox-list-item-style);
+  }
+
+  ol > li {
+    list-style: var(--md-numbered-list-item-style);
+  }
+
+  ol > li:before {
+    content: counter(list-item);
+    display: var(--md-numbered-list-number-display);
+    color: var(--md-numbered-list-number-text-color);
+    font-size: var(--md-numbered-list-number-font-size);
+    font-family: var(--md-numbered-list-number-font-family);
+    font-weight: var(--md-numbered-list-number-font-weight);
+    background-color: var(--md-numbered-list-number-background-color);
+    border-radius: var(--md-numbered-list-number-border-radius);
+    border: var(--md-numbered-list-number-border);
+    margin-right: var(--md-numbered-list-number-margin-right);
+    padding: var(--md-numbered-list-number-padding);
+  }
+`;
+//# sourceMappingURL=MarkdownWrapper.js.map

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type MermaidProps = {
+    diagramHtml: string;
+    'data-source'?: string;
+    'data-hash'?: string;
+    className?: string;
+};
+export declare function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }: MermaidProps): JSX.Element;
+export {};