@redocly/theme 0.0.0-react18-20231120182601

package/lib/types/portal/src/shared/types/nav.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuStyle = void 0;
+var MenuStyle;
+(function (MenuStyle) {
+    MenuStyle["Drilldown"] = "drilldown";
+})(MenuStyle || (exports.MenuStyle = MenuStyle = {}));
+//# sourceMappingURL=nav.js.map

package/lib/types/portal/src/shared/types/searchDocument.d.ts

@@ -0,0 +1,21 @@
+import type { ProductConfig } from "../../../../../config";
+export interface OperationParameter {
+    name: string | string[];
+    description: string | string[];
+    place: string;
+    path?: string[];
+}
+export declare const PERMISSION_PROP_NAME = "redocly::permission";
+export interface SearchDocument {
+    id: string;
+    url: string;
+    title: string | string[];
+    text: string | string[];
+    path?: string[];
+    httpVerb?: string;
+    pathName?: string | string[];
+    parameters?: OperationParameter[];
+    metadata?: Record<string, any>;
+    product?: ProductConfig;
+    [PERMISSION_PROP_NAME]?: string;
+}

package/lib/types/portal/src/shared/types/searchDocument.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PERMISSION_PROP_NAME = void 0;
+exports.PERMISSION_PROP_NAME = 'redocly::permission';
+//# sourceMappingURL=searchDocument.js.map

package/lib/ui/ArrowBack.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ArrowBack: import("styled-components").StyledComponent<({ className, dataComponentName, }: {
+    className?: string | undefined;
+    dataComponentName?: string | undefined;
+}) => JSX.Element, any, {}, never>;

package/lib/ui/ArrowBack.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowBack = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Arrow = ({ className, dataComponentName, }) => (react_1.default.createElement("span", { "data-component-name": dataComponentName },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "10px", height: "10px", className: className },
+        react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
+        react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
+exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
+  fill: var(--sidebar-back-button-icon-color);
+
+  background-image: var(--sidebar-back-button-icon);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+`;
+//# sourceMappingURL=ArrowBack.js.map

package/lib/ui/Background.d.ts

@@ -0,0 +1,7 @@
+export declare const Background: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+} & import("./Box").BoxProps & {
+    'data-component-name': string;
+} & import("../ui/Flex").FlexProps & {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/ui/Background.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Background = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Flex_1 = require("../ui/Flex");
+exports.Background = (0, styled_components_1.default)(Flex_1.Flex).attrs(() => ({
+    'data-component-name': 'ui/Background',
+})) `
+  background: var(--navbar-background-color);
+  color: var(--navbar-text-color);
+  font-family: var(--heading-font-family);
+
+  a:not([role='button']),
+  a:not([role='button']):hover {
+    color: var(--navbar-text-color);
+  }
+`;
+//# sourceMappingURL=Background.js.map

package/lib/ui/Box.d.ts

@@ -0,0 +1,6 @@
+import type { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps, GridProps } from 'styled-system';
+export interface BoxProps extends SpaceProps, LayoutProps, PositionProps, FlexProps, TextAlignProps, ColorProps, BordersProps, GridProps {
+}
+export declare const Box: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+} & BoxProps, "data-component-name">;

package/lib/ui/Box.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const styled_system_1 = require("styled-system");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Box = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'ui/Box',
+})) `
+  max-width: 100%;
+  ${styled_system_1.space}
+  ${styled_system_1.layout}
+  ${styled_system_1.position}
+  ${styled_system_1.flex}
+  ${styled_system_1.textAlign}
+  ${styled_system_1.color}
+  ${styled_system_1.border}
+  ${styled_system_1.grid}
+`;
+//# sourceMappingURL=Box.js.map

package/lib/ui/Burger.d.ts

@@ -0,0 +1,8 @@
+import type { MouseEventHandler } from 'react';
+export interface BurgerProps {
+    onClick: MouseEventHandler;
+    className?: string;
+}
+declare function BurgerComponent({ onClick, className }: BurgerProps): JSX.Element;
+export declare const Burger: import("styled-components").StyledComponent<typeof BurgerComponent, any, {}, never>;
+export {};

package/lib/ui/Burger.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Burger = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function BurgerComponent({ onClick, className }) {
+    return (react_1.default.createElement(Button, { onClick: onClick, className: className, "data-component-name": "ui/Burger" },
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(Line, null)));
+}
+const Button = styled_components_1.default.button `
+  all: unset;
+  max-width: 20px;
+  min-width: 20px;
+  width: 100%;
+  min-width: 10px;
+  display: block;
+  cursor: pointer;
+`;
+const Line = styled_components_1.default.div `
+  margin: 4px 0;
+  width: 100%;
+  height: 2px;
+  background: var(--border-primary);
+  border-radius: 1px;
+`;
+exports.Burger = (0, styled_components_1.default)(BurgerComponent) ``;
+//# sourceMappingURL=Burger.js.map

package/lib/ui/Checkbox.d.ts

@@ -0,0 +1 @@
+export declare const Checkbox: import("styled-components").StyledComponent<"input", any, {}, never>;

package/lib/ui/Checkbox.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Checkbox = styled_components_1.default.input `
+  position: absolute;
+  opacity: 0;
+
+  & + label {
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+
+    div {
+      margin-top: 1px;
+    }
+    p {
+      line-height: 1.2;
+    }
+
+    &::before {
+      content: '';
+      margin-right: 10px;
+      display: inline-block;
+      vertical-align: top;
+      width: 18px;
+      height: 18px;
+      background: var(--checkbox-backround-color);
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+  }
+
+  &:focus + label:before {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+  }
+
+  &:checked + label {
+    &::before {
+      background: var(--checkbox-checked-backround-color);
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 10px;
+      background: var(--checkbox-backround-color);
+      width: 2px;
+      height: 2px;
+      box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white,
+        4px -8px 0 white;
+      transform: rotate(45deg);
+    }
+  }
+
+  &:disabled + label {
+    color: #b8b8b8;
+    cursor: auto;
+    &::before {
+      box-shadow: none;
+      background: #ddd;
+    }
+  }
+`;
+//# sourceMappingURL=Checkbox.js.map

package/lib/ui/Dropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { Version } from '../types/portal';
+type DropdownProps = {
+    items: Version[];
+    activeItem: Version;
+};
+export declare function Dropdown({ items, activeItem }: DropdownProps): JSX.Element;
+export {};

package/lib/ui/Dropdown.js

@@ -0,0 +1,114 @@
+"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.Dropdown = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../mocks/Link");
+const Icon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    react_1.default.createElement("polyline", { points: "6 9 12 15 18 9" })));
+const DropDownContainer = styled_components_1.default.div `
+  position: relative;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+`;
+const DropDownHeader = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid var(--border-primary);
+  font-weight: 600;
+  color: var(--text-primary);
+  background: var(--background-color);
+`;
+const DropDownList = styled_components_1.default.div `
+  position: absolute;
+  background: var(--background-color);
+  margin: 2px 20px 0 20px;
+  padding: 0;
+  border-radius: 4px;
+  border: 1px solid var(--border-primary);
+  z-index: var(--z-index-popover);
+  left: 0;
+  right: 0;
+`;
+const IconWrapper = styled_components_1.default.span `
+  transition: transform 0.2s;
+  display: inline-block;
+  font-size: 0;
+  &.active {
+    transform: rotate(-180deg);
+  }
+`;
+const ListItem = styled_components_1.default.div `
+  background-color: var(--background-color);
+  padding: 0.4em 10px;
+  font-size: 1em;
+  color: var(--text-secondary);
+  cursor: pointer;
+  &:hover {
+    background-color: var(--bg-raised);
+  }
+  &.active {
+    background-color: var(--bg-raised);
+  }
+`;
+const DropDownLink = (0, styled_components_1.default)(Link_1.Link) `
+  display: block;
+  text-decoration: none;
+  color: var(--text-secondary);
+`;
+function Dropdown({ items, activeItem }) {
+    const ref = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const toggling = () => setIsOpen(!isOpen);
+    (0, react_1.useEffect)(() => {
+        const checkIfClickedOutside = (e) => {
+            if (!(e.target instanceof HTMLElement)) {
+                return;
+            }
+            if (isOpen && ref.current && !ref.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', checkIfClickedOutside);
+        return () => {
+            document.removeEventListener('mousedown', checkIfClickedOutside);
+        };
+    }, [isOpen]);
+    return (react_1.default.createElement(DropDownContainer, { ref: ref, "data-component-name": "ui/Dropdown" },
+        react_1.default.createElement(DropDownHeader, { onClick: toggling },
+            (activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || activeItem.version,
+            react_1.default.createElement(IconWrapper, { className: isOpen ? 'active' : '' },
+                react_1.default.createElement(Icon, null))),
+        isOpen && (react_1.default.createElement(DropDownList, null, items.map((item) => (react_1.default.createElement(ListItem, { className: activeItem.version === item.version ? 'active' : '', onClick: toggling, key: (item === null || item === void 0 ? void 0 : item.link) + (item === null || item === void 0 ? void 0 : item.version) },
+            react_1.default.createElement(DropDownLink, { to: (item === null || item === void 0 ? void 0 : item.link) || '#' }, (item === null || item === void 0 ? void 0 : item.label) || item.version))))))));
+}
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=Dropdown.js.map

package/lib/ui/Flex.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FlexboxProps, WidthProps } from 'styled-system';
+export interface FlexProps extends FlexboxProps, WidthProps {
+}
+export declare const Flex: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+} & import("../ui/Box").BoxProps & {
+    'data-component-name': string;
+} & FlexProps, "data-component-name">;
+export declare function FlexSection(props: React.PropsWithChildren<FlexProps>): JSX.Element;

package/lib/ui/Flex.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexSection = exports.Flex = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const styled_system_1 = require("styled-system");
+const Box_1 = require("../ui/Box");
+exports.Flex = (0, styled_components_1.default)(Box_1.Box).attrs({ 'data-component-name': 'ui/Flex' }) `
+  display: flex;
+  flex-wrap: wrap;
+  ${styled_system_1.flexbox}
+  ${styled_system_1.width}
+`;
+function FlexSection(props) {
+    return (react_1.default.createElement(exports.Flex, Object.assign({}, props, { width: props.width || { xs: '90%', large: 910 } }), props.children));
+}
+exports.FlexSection = FlexSection;
+//# sourceMappingURL=Flex.js.map

package/lib/ui/Highlight.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const HighlightContext: React.Context<string[]>;
+export declare function Highlight(props: {
+    children: React.ReactChildren | string;
+}): JSX.Element | null;

package/lib/ui/Highlight.js

@@ -0,0 +1,63 @@
+"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.Highlight = exports.HighlightContext = void 0;
+const React = __importStar(require("react"));
+const highlight_words_core_1 = require("highlight-words-core");
+exports.HighlightContext = React.createContext([]);
+function Highlight(props) {
+    const { children } = props;
+    const searchWords = React.useContext(exports.HighlightContext);
+    if (!searchWords.length) {
+        return children ? React.createElement(React.Fragment, null, children) : null;
+    }
+    function highlight(str, childIdx = 0) {
+        const chunks = (0, highlight_words_core_1.findAll)({
+            searchWords,
+            textToHighlight: str,
+        });
+        return (React.createElement(React.Fragment, { key: childIdx }, chunks.map((chunk, idx) => {
+            const { end, highlight, start } = chunk;
+            const text = str.substr(start, end - start);
+            if (highlight) {
+                return React.createElement("mark", { key: idx }, text);
+            }
+            else {
+                return text;
+            }
+        })));
+    }
+    if (typeof children === 'string') {
+        return highlight(children);
+    }
+    else if (Array.isArray(children)) {
+        return (React.createElement(React.Fragment, null, children.map((child, idx) => typeof children === 'string' ? highlight(child, idx) : child || null)));
+    }
+    else {
+        return React.createElement(React.Fragment, null, "children") || null;
+    }
+}
+exports.Highlight = Highlight;
+//# sourceMappingURL=Highlight.js.map

package/lib/ui/Jumbotron.d.ts

@@ -0,0 +1,18 @@
+export declare const Jumbotron: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+} & import("./Box").BoxProps & {
+    'data-component-name': string;
+} & import("./Flex").FlexProps & {
+    'data-component-name': string;
+} & {
+    'data-component-name': string;
+} & {
+    pt?: string | undefined;
+    pb?: string | undefined;
+    pl?: string | undefined;
+    pr?: string | undefined;
+    bgImage?: string | undefined;
+    bgColor?: string | undefined;
+    parallaxEffect?: boolean | undefined;
+    textColor?: string | undefined;
+}, "data-component-name">;

package/lib/ui/Jumbotron.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Jumbotron = void 0;
+const styled_system_1 = require("styled-system");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Typography_1 = require("../components/Typography");
+const Background_1 = require("../ui/Background");
+exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).attrs(() => ({
+    'data-component-name': 'ui/Jumbotron',
+})) `
+  flex-direction: column;
+  padding-top: ${({ pt }) => pt || '0'};
+  padding-bottom: ${({ pb }) => pb || '8em'};
+  padding-left: ${({ pl }) => pl || '1rem'};
+  padding-right: ${({ pr }) => pr || '1rem'};
+  ${({ bgColor }) => bgColor && `background: ${bgColor}`};
+  ${({ bgImage, bgColor }) => bgImage &&
+    `
+      background: ${bgColor || 'var(--text-base)'} url(${bgImage});
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+  `};
+  ${({ parallaxEffect }) => parallaxEffect &&
+    `
+      background-attachment: scroll, fixed;
+  `};
+  ${styled_system_1.space}
+  ${Typography_1.H1}, ${Typography_1.H2} {
+    color: ${({ textColor }) => textColor || 'var(--navbar-text-color)'};
+    text-align: center;
+    padding: 0;
+  }
+  h1 {
+    font-size: 3.5em;
+    line-height: 1.2;
+    font-weight: var(--font-weight-bold);
+    margin: 1.75em 0 0.5em 0;
+  }
+  h2 {
+    font-size: 1.875em;
+    line-height: 1;
+    font-weight: var(--font-weight-regular);
+    margin: 0;
+    margin-bottom: 2em;
+  }
+`;
+//# sourceMappingURL=Jumbotron.js.map

package/lib/ui/darkColors.d.ts

@@ -0,0 +1 @@
+export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;