@redocly/theme 0.1.26 → 0.1.29

package/src/utils/jsonToHtml.ts

@@ -1,12 +1,21 @@
 // Moved from reference-docs
-let level = 1;
+let level = 0;
+let line = 1;
 
-export function jsonToHTML(json: JSON | Record<string, unknown>, maxExpandLevel: number): string {
-  level = 1;
+type ValueContext = 'array' | 'object' | 'root';
+type LineGenerator = Generator<string, string | void, void>;
+type JsonValue = JSON | Record<string, unknown>;
+
+const ellipsis = '<span class="ellipsis"></span>';
+const colon = '<span class="colon">: </span>';
+
+export function jsonToHTML(json: JsonValue, maxExpandLevel: number, startLine = 1): string {
+  level = 0;
+  line = startLine;
   let output = '';
   output += '<div data-cy="json-sample" class="redoc-json">';
   output += '<code>';
-  output += valueToHTML(json, maxExpandLevel);
+  output += getLines(json, maxExpandLevel);
   output += '</code>';
   output += '</div>';
   return output;
@@ -35,88 +44,191 @@ function punctuation(val: any) {
   return '<span class="token punctuation">' + val + '</span>';
 }
 
-function valueToHTML(value: any, maxExpandLevel: number) {
+function collapser(maxExpandLevel: number): string {
+  const collapsed = level > maxExpandLevel ? 'expand' : 'collapse';
+
+  return `<button class="collapser" aria-label="${collapsed}"></button>`;
+}
+
+export function getLines(json: JsonValue, maxExpandLevel: number): string {
+  const collapsibleLines = [];
+  const lines = valueToHTML(json, maxExpandLevel, 'root');
+
+  let nextLine = lines.next();
+
+  while (!nextLine.done) {
+    collapsibleLines.push(nextLine.value);
+    nextLine = lines.next();
+  }
+
+  collapsibleLines.push(nextLine.value);
+
+  return collapsibleLines.join('\n');
+}
+
+function* valueToHTML(value: any, maxExpandLevel: number, context: ValueContext) {
   const valueType = typeof value;
-  let output = '';
+
   if (value === undefined || value === null) {
-    output += decorateWithSpan('null', 'token keyword');
+    return decorateWithSpan('null', 'token keyword');
   } else if (value && value.constructor === Array) {
+    const length = typeof value.length === 'number' ? value.length : 0;
+
+    if (!length) {
+      return punctuation('[ ]');
+    }
+
     level++;
-    output += arrayToHTML(value, maxExpandLevel);
+
+    yield context === 'root'
+      ? `<span data-line="${line++}">${punctuation('[')}</span>`
+      : punctuation('[');
+
+    for (const line of arrayToHTML(value, length, maxExpandLevel)) {
+      yield line;
+    }
+
     level--;
+
+    return `<span data-line="${line++}">${punctuation(']')}</span>`;
   } else if (value && value.constructor === Date) {
-    output += decorateWithSpan('"' + value.toISOString() + '"', 'token string');
+    return decorateWithSpan('"' + value.toISOString() + '"', 'token string');
   } else if (valueType === 'object') {
+    const keys = Object.keys(value);
+
+    if (!keys.length) {
+      return punctuation('{ }');
+    }
+
     level++;
-    output += objectToHTML(value, maxExpandLevel);
+
+    yield context === 'root'
+      ? `<span data-line="${line++}">${punctuation('{')}</span>`
+      : punctuation('{');
+
+    for (const line of objectToHTML(value, keys, maxExpandLevel)) {
+      yield line;
+    }
+
     level--;
+
+    return `<span data-line="${line++}">${punctuation('}')}</span>`;
   } else if (valueType === 'number') {
-    output += decorateWithSpan(value, 'token number');
+    return decorateWithSpan(value, 'token number');
   } else if (valueType === 'string') {
     if (/^(http|https):\/\/[^\s]+$/.test(value)) {
-      output +=
+      return (
         decorateWithSpan('"', 'token string') +
-        '<a href="' +
-        encodeURI(value) +
-        '">' +
+        `<a href="${encodeURI(value)}">` +
         htmlEncode(stringifyStringLiteral(value)) +
         '</a>' +
-        decorateWithSpan('"', 'token string');
+        decorateWithSpan('"', 'token string')
+      );
     } else {
-      output += decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
+      return decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
     }
   } else if (valueType === 'boolean') {
-    output += decorateWithSpan(value, 'token boolean');
+    return decorateWithSpan(value, 'token boolean');
   }
+}
 
-  return output;
+function getLineTemplate({
+  isFirstKey,
+  isLastKey,
+  nextLine,
+  context,
+  lineTemplate,
+  maxExpandLevel,
+}: {
+  isFirstKey: boolean;
+  isLastKey: boolean;
+  nextLine: IteratorResult<string, string | undefined>;
+  maxExpandLevel: number;
+  lineTemplate: string;
+  context: 'array' | 'obj';
+}) {
+  let lineValue = isFirstKey ? `${ellipsis}<span class="${context} collapsible">` : '';
+  // Create hoverable
+  lineValue += `<span data-line="${line++}" class="${
+    level > maxExpandLevel ? 'hoverable collapsed' : 'hoverable'
+  }">`;
+  // Add collapser button if item has nested lines
+  lineValue += (!nextLine.done && collapser(maxExpandLevel)) || '';
+  lineValue += lineTemplate;
+  lineValue += nextLine.value;
+  // Add punctuation in case we dont have more nested lines and it is not last item
+  lineValue += nextLine.done && !isLastKey ? punctuation(',') : '';
+  // Close hoverable if we dont have nested lines
+  lineValue += nextLine.done ? '</span>' : '';
+  // Close collapsible if value is single line and we are on last item
+  lineValue += nextLine.done && isLastKey ? '</span>' : '';
+
+  return lineValue;
 }
 
-function arrayToHTML(json: any, maxExpandLevel: number) {
-  const collapsed = level > maxExpandLevel ? 'collapsed' : '';
-  let output = `<button class="collapser" aria-label="${
-    level > maxExpandLevel + 1 ? 'expand' : 'collapse'
-  }"></button>${punctuation('[')}<span class="ellipsis"></span><ul class="array collapsible">`;
-  let hasContents = false;
-  const length = json.length;
-  for (let i = 0; i < length; i++) {
-    hasContents = true;
-    output += '<li><div class="hoverable ' + collapsed + '">';
-    output += valueToHTML(json[i], maxExpandLevel);
-    if (i < length - 1) {
-      output += ',';
+function* arrayToHTML(array: any[], arrayLength: number, maxExpandLevel: number): LineGenerator {
+  for (let i = 0; i < arrayLength; i++) {
+    const lines = valueToHTML(array[i], maxExpandLevel, 'array');
+    const isFirstKey = i === 0;
+    const isLastKey = i === arrayLength - 1;
+    let nextLine = lines.next();
+
+    yield getLineTemplate({
+      context: 'array',
+      isFirstKey,
+      isLastKey,
+      nextLine,
+      lineTemplate: '',
+      maxExpandLevel,
+    });
+
+    nextLine = lines.next();
+
+    while (!nextLine.done) {
+      yield nextLine.value;
+
+      nextLine = lines.next();
+    }
+
+    if (nextLine.value) {
+      // Close hoverable and collapsible (if last array item)
+      yield `${nextLine.value}${i < arrayLength - 1 ? punctuation(',') : '</span>'}</span>`;
     }
-    output += '</div></li>';
-  }
-  output += `</ul>${punctuation(']')}`;
-  if (!hasContents) {
-    output = punctuation('[ ]');
   }
-  return output;
 }
 
-function objectToHTML(json: any, maxExpandLevel: number) {
-  const collapsed = level > maxExpandLevel ? 'collapsed' : '';
-  const keys = Object.keys(json);
-  const length = keys.length;
-  let output = `<button class="collapser" aria-label="${
-    level > maxExpandLevel + 1 ? 'expand' : 'collapse'
-  }"></button>${punctuation('{')}<span class="ellipsis"></span><ul class="obj collapsible">`;
-  let hasContents = false;
-  for (let i = 0; i < length; i++) {
+function* objectToHTML(
+  object: Record<any, any>,
+  keys: any[],
+  maxExpandLevel: number,
+): LineGenerator {
+  for (let i = 0; i < keys.length; i++) {
     const key = keys[i];
-    hasContents = true;
-    output += '<li><div class="hoverable ' + collapsed + '">';
-    output += '<span class="property token string">"' + htmlEncode(key) + '"</span>: ';
-    output += valueToHTML(json[key], maxExpandLevel);
-    if (i < length - 1) {
-      output += punctuation(',');
+    const lines = valueToHTML(object[key], maxExpandLevel, 'object');
+    const isFirstKey = i === 0;
+    const isLastKey = i === keys.length - 1;
+
+    let nextLine = lines.next();
+
+    yield getLineTemplate({
+      context: 'obj',
+      isFirstKey,
+      isLastKey,
+      nextLine,
+      lineTemplate: `<span class="property token string">"${htmlEncode(key)}"</span>${colon}`,
+      maxExpandLevel,
+    });
+
+    nextLine = lines.next();
+
+    while (!nextLine.done) {
+      yield nextLine.value;
+      nextLine = lines.next();
+    }
+
+    if (nextLine.value) {
+      // Close hoverable and collapsible (if last field)
+      yield `${nextLine.value}${isLastKey ? '</span>' : punctuation(',')}</span>`;
     }
-    output += '</div></li>';
-  }
-  output += `</ul>${punctuation('}')}`;
-  if (!hasContents) {
-    output = punctuation('{ }');
   }
-  return output;
 }

package/src/utils/theme-helpers.ts

@@ -7,7 +7,7 @@ enum Token {
   Doctype = 'doctype',
   Cdata = 'cdata',
   Punctuation = 'punctuation',
-  property = 'property',
+  Property = 'property',
   Tag = 'tag',
   Number = 'number',
   Constant = 'constant',
@@ -23,6 +23,8 @@ enum Token {
   Url = 'url',
   Variable = 'variable',
   Atrule = 'atrule',
+  AttrValue = 'attr-value',
+  AttrName = 'attr-name',
   Keyword = 'keyword',
   Regex = 'regex',
   Important = 'important',

package/ui/Burger.d.ts

@@ -0,0 +1,8 @@
+import { 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/ui/Burger.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Burger = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function BurgerComponent(_a) {
+    var onClick = _a.onClick, className = _a.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)));
+}
+var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  all: unset;\n  max-width: 30px;\n  width: 100%;\n  min-width: 10px;\n  display: block;\n  cursor: pointer;\n"], ["\n  all: unset;\n  max-width: 30px;\n  width: 100%;\n  min-width: 10px;\n  display: block;\n  cursor: pointer;\n"])));
+var Line = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 4px 0;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n"], ["\n  margin: 4px 0;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n  border-radius: 1px;\n"])));
+exports.Burger = (0, styled_components_1.default)(BurgerComponent)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Dropdown.js

@@ -26,6 +26,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -45,7 +61,7 @@ var DropDownLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_
 function Dropdown(_a) {
     var items = _a.items, activeItem = _a.activeItem;
     var ref = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _b = __read((0, react_1.useState)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
     var toggling = function () { return setIsOpen(!isOpen); };
     (0, react_1.useEffect)(function () {
         var checkIfClickedOutside = function (e) {

package/ui/Flex.js

@@ -23,7 +23,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var styled_system_1 = require("styled-system");
 var Box_1 = require("../ui/Box");
-exports.Flex = (0, styled_components_1.default)(Box_1.Box).attrs({ 'data-component-name': 'ui/Flex' })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  ", "\n  ", "\n"])), styled_system_1.flexbox, styled_system_1.width);
+exports.Flex = (0, styled_components_1.default)(Box_1.Box).attrs({ 'data-component-name': 'ui/Flex' })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  ", "\n  ", "\n"])), styled_system_1.flexbox, styled_system_1.width);
 function FlexSection(props) {
     return (react_1.default.createElement(exports.Flex, __assign({}, props, { width: props.width || { xs: '90%', large: 910 } }), props.children));
 }

package/ui/UniversalLink.js

@@ -37,6 +37,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -66,7 +82,7 @@ var propsList = [
 var withPropsFilter = function (filterList) { return function (WrappedComponent) {
     return function WithPropsFilter(props) {
         var filteredProps = Object.fromEntries(Object.entries(props).filter(function (_a) {
-            var key = _a[0];
+            var _b = __read(_a, 1), key = _b[0];
             return !filterList.includes(key);
         }));
         return React.createElement(WrappedComponent, __assign({}, filteredProps));

package/utils/args-typecheck.d.ts

@@ -0,0 +1,2 @@
+export declare function isEmptyArray(items: any): boolean;
+export declare function isPrimitive(arg: any): boolean;

package/utils/args-typecheck.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isPrimitive = exports.isEmptyArray = void 0;
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function isEmptyArray(items) {
+    return Array.isArray(items) && !(items === null || items === void 0 ? void 0 : items.length);
+}
+exports.isEmptyArray = isEmptyArray;
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function isPrimitive(arg) {
+    return ['string', 'boolean', 'number'].includes(typeof arg);
+}
+exports.isPrimitive = isPrimitive;

package/utils/class-names.d.ts

@@ -0,0 +1 @@
+export declare function concatClassNames(...args: Array<string | undefined>): string;

package/utils/class-names.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.concatClassNames = void 0;
+var SPACE_DELIMITER = ' ';
+function concatClassNames() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args
+        .map(function (className) { return (className ? className.trim() : className); })
+        .filter(Boolean)
+        .join(SPACE_DELIMITER);
+}
+exports.concatClassNames = concatClassNames;

package/utils/color.d.ts

@@ -0,0 +1,2 @@
+export declare const getRandomNumber: (limit: number) => number;
+export declare function getRandomColor(): string;

package/utils/color.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRandomColor = exports.getRandomNumber = void 0;
+var getRandomNumber = function (limit) { return Math.floor(Math.random() * limit); };
+exports.getRandomNumber = getRandomNumber;
+function getRandomColor() {
+    var h = (0, exports.getRandomNumber)(360);
+    var s = (0, exports.getRandomNumber)(100);
+    var l = (0, exports.getRandomNumber)(100);
+    return "hsl(".concat(h, "deg, ").concat(s, "%, ").concat(l, "%)");
+}
+exports.getRandomColor = getRandomColor;

package/utils/highlight.d.ts

@@ -30,3 +30,4 @@ export declare function mapLang(lang: string): string;
  * @return highlighted source code as **html string**
  */
 export declare function highlight(source: string | number | boolean, lang?: string): string;
+export declare function addLineNumbers(highlightedCode: string, start?: number): string;

package/utils/highlight.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.highlight = exports.mapLang = void 0;
+exports.addLineNumbers = exports.highlight = exports.mapLang = void 0;
 var Prism = __importStar(require("prismjs"));
 require("prismjs/components/prism-bash.js");
 require("prismjs/components/prism-c.js");
@@ -47,6 +47,7 @@ require("prismjs/components/prism-sql.js");
 require("prismjs/components/prism-swift.js");
 require("prismjs/components/prism-graphql.js");
 var DEFAULT_LANG = 'clike';
+var NEW_LINE_EXP = /\n(?!$)/g;
 Prism.languages.insertBefore('javascript', 'string', {
     'property string': {
         pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
@@ -91,3 +92,13 @@ function highlight(source, lang) {
     return Prism.highlight(source.toString(), grammar, lang);
 }
 exports.highlight = highlight;
+function addLineNumbers(highlightedCode, start) {
+    if (start === void 0) { start = 1; }
+    var codeLines = highlightedCode.split(NEW_LINE_EXP);
+    return codeLines
+        .map(function (line, i) {
+        return "<span class=\"code-line\" data-line-number=".concat(start + i, ">").concat(line, "</span>");
+    })
+        .join('\n');
+}
+exports.addLineNumbers = addLineNumbers;

package/utils/index.d.ts

@@ -4,3 +4,6 @@ export * from './highlight';
 export * from './jsonToHtml';
 export * from './media-css';
 export * from './theme-helpers';
+export * from './class-names';
+export * from './args-typecheck';
+export * from './color';

package/utils/index.js

@@ -20,3 +20,6 @@ __exportStar(require("./highlight"), exports);
 __exportStar(require("./jsonToHtml"), exports);
 __exportStar(require("./media-css"), exports);
 __exportStar(require("./theme-helpers"), exports);
+__exportStar(require("./class-names"), exports);
+__exportStar(require("./args-typecheck"), exports);
+__exportStar(require("./color"), exports);

package/utils/jsonToHtml.d.ts

@@ -1 +1,4 @@
-export declare function jsonToHTML(json: JSON | Record<string, unknown>, maxExpandLevel: number): string;
+declare type JsonValue = JSON | Record<string, unknown>;
+export declare function jsonToHTML(json: JsonValue, maxExpandLevel: number, startLine?: number): string;
+export declare function getLines(json: JsonValue, maxExpandLevel: number): string;
+export {};