@redocly/theme 0.1.26 → 0.1.29

package/utils/jsonToHtml.js

@@ -1,14 +1,57 @@
 "use strict";
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.jsonToHTML = void 0;
+exports.getLines = exports.jsonToHTML = void 0;
 // Moved from reference-docs
-var level = 1;
-function jsonToHTML(json, maxExpandLevel) {
-    level = 1;
+var level = 0;
+var line = 1;
+var ellipsis = '<span class="ellipsis"></span>';
+var colon = '<span class="colon">: </span>';
+function jsonToHTML(json, maxExpandLevel, startLine) {
+    if (startLine === void 0) { startLine = 1; }
+    level = 0;
+    line = startLine;
     var 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;
@@ -33,88 +76,249 @@ function decorateWithSpan(value, className) {
 function punctuation(val) {
     return '<span class="token punctuation">' + val + '</span>';
 }
-function valueToHTML(value, maxExpandLevel) {
-    var valueType = typeof value;
-    var output = '';
-    if (value === undefined || value === null) {
-        output += decorateWithSpan('null', 'token keyword');
-    }
-    else if (value && value.constructor === Array) {
-        level++;
-        output += arrayToHTML(value, maxExpandLevel);
-        level--;
-    }
-    else if (value && value.constructor === Date) {
-        output += decorateWithSpan('"' + value.toISOString() + '"', 'token string');
-    }
-    else if (valueType === 'object') {
-        level++;
-        output += objectToHTML(value, maxExpandLevel);
-        level--;
-    }
-    else if (valueType === 'number') {
-        output += decorateWithSpan(value, 'token number');
+function collapser(maxExpandLevel) {
+    var collapsed = level > maxExpandLevel ? 'expand' : 'collapse';
+    return "<button class=\"collapser\" aria-label=\"".concat(collapsed, "\"></button>");
+}
+function getLines(json, maxExpandLevel) {
+    var collapsibleLines = [];
+    var lines = valueToHTML(json, maxExpandLevel, 'root');
+    var nextLine = lines.next();
+    while (!nextLine.done) {
+        collapsibleLines.push(nextLine.value);
+        nextLine = lines.next();
     }
-    else if (valueType === 'string') {
-        if (/^(http|https):\/\/[^\s]+$/.test(value)) {
-            output +=
-                decorateWithSpan('"', 'token string') +
-                    '<a href="' +
-                    encodeURI(value) +
-                    '">' +
-                    htmlEncode(stringifyStringLiteral(value)) +
-                    '</a>' +
-                    decorateWithSpan('"', 'token string');
-        }
-        else {
-            output += decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
+    collapsibleLines.push(nextLine.value);
+    return collapsibleLines.join('\n');
+}
+exports.getLines = getLines;
+function valueToHTML(value, maxExpandLevel, context) {
+    var valueType, length_1, _a, _b, line_1, e_1_1, keys, _c, _d, line_2, e_2_1;
+    var e_1, _e, e_2, _f;
+    return __generator(this, function (_g) {
+        switch (_g.label) {
+            case 0:
+                valueType = typeof value;
+                if (!(value === undefined || value === null)) return [3 /*break*/, 1];
+                return [2 /*return*/, decorateWithSpan('null', 'token keyword')];
+            case 1:
+                if (!(value && value.constructor === Array)) return [3 /*break*/, 11];
+                length_1 = typeof value.length === 'number' ? value.length : 0;
+                if (!length_1) {
+                    return [2 /*return*/, punctuation('[ ]')];
+                }
+                level++;
+                return [4 /*yield*/, context === 'root'
+                        ? "<span data-line=\"".concat(line++, "\">").concat(punctuation('['), "</span>")
+                        : punctuation('[')];
+            case 2:
+                _g.sent();
+                _g.label = 3;
+            case 3:
+                _g.trys.push([3, 8, 9, 10]);
+                _a = __values(arrayToHTML(value, length_1, maxExpandLevel)), _b = _a.next();
+                _g.label = 4;
+            case 4:
+                if (!!_b.done) return [3 /*break*/, 7];
+                line_1 = _b.value;
+                return [4 /*yield*/, line_1];
+            case 5:
+                _g.sent();
+                _g.label = 6;
+            case 6:
+                _b = _a.next();
+                return [3 /*break*/, 4];
+            case 7: return [3 /*break*/, 10];
+            case 8:
+                e_1_1 = _g.sent();
+                e_1 = { error: e_1_1 };
+                return [3 /*break*/, 10];
+            case 9:
+                try {
+                    if (_b && !_b.done && (_e = _a.return)) _e.call(_a);
+                }
+                finally { if (e_1) throw e_1.error; }
+                return [7 /*endfinally*/];
+            case 10:
+                level--;
+                return [2 /*return*/, "<span data-line=\"".concat(line++, "\">").concat(punctuation(']'), "</span>")];
+            case 11:
+                if (!(value && value.constructor === Date)) return [3 /*break*/, 12];
+                return [2 /*return*/, decorateWithSpan('"' + value.toISOString() + '"', 'token string')];
+            case 12:
+                if (!(valueType === 'object')) return [3 /*break*/, 22];
+                keys = Object.keys(value);
+                if (!keys.length) {
+                    return [2 /*return*/, punctuation('{ }')];
+                }
+                level++;
+                return [4 /*yield*/, context === 'root'
+                        ? "<span data-line=\"".concat(line++, "\">").concat(punctuation('{'), "</span>")
+                        : punctuation('{')];
+            case 13:
+                _g.sent();
+                _g.label = 14;
+            case 14:
+                _g.trys.push([14, 19, 20, 21]);
+                _c = __values(objectToHTML(value, keys, maxExpandLevel)), _d = _c.next();
+                _g.label = 15;
+            case 15:
+                if (!!_d.done) return [3 /*break*/, 18];
+                line_2 = _d.value;
+                return [4 /*yield*/, line_2];
+            case 16:
+                _g.sent();
+                _g.label = 17;
+            case 17:
+                _d = _c.next();
+                return [3 /*break*/, 15];
+            case 18: return [3 /*break*/, 21];
+            case 19:
+                e_2_1 = _g.sent();
+                e_2 = { error: e_2_1 };
+                return [3 /*break*/, 21];
+            case 20:
+                try {
+                    if (_d && !_d.done && (_f = _c.return)) _f.call(_c);
+                }
+                finally { if (e_2) throw e_2.error; }
+                return [7 /*endfinally*/];
+            case 21:
+                level--;
+                return [2 /*return*/, "<span data-line=\"".concat(line++, "\">").concat(punctuation('}'), "</span>")];
+            case 22:
+                if (valueType === 'number') {
+                    return [2 /*return*/, decorateWithSpan(value, 'token number')];
+                }
+                else if (valueType === 'string') {
+                    if (/^(http|https):\/\/[^\s]+$/.test(value)) {
+                        return [2 /*return*/, (decorateWithSpan('"', 'token string') +
+                                "<a href=\"".concat(encodeURI(value), "\">") +
+                                htmlEncode(stringifyStringLiteral(value)) +
+                                '</a>' +
+                                decorateWithSpan('"', 'token string'))];
+                    }
+                    else {
+                        return [2 /*return*/, decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string')];
+                    }
+                }
+                else if (valueType === 'boolean') {
+                    return [2 /*return*/, decorateWithSpan(value, 'token boolean')];
+                }
+                _g.label = 23;
+            case 23: return [2 /*return*/];
         }
-    }
-    else if (valueType === 'boolean') {
-        output += decorateWithSpan(value, 'token boolean');
-    }
-    return output;
+    });
 }
-function arrayToHTML(json, maxExpandLevel) {
-    var collapsed = level > maxExpandLevel ? 'collapsed' : '';
-    var output = "<button class=\"collapser\" aria-label=\"".concat(level > maxExpandLevel + 1 ? 'expand' : 'collapse', "\"></button>").concat(punctuation('['), "<span class=\"ellipsis\"></span><ul class=\"array collapsible\">");
-    var hasContents = false;
-    var length = json.length;
-    for (var i = 0; i < length; i++) {
-        hasContents = true;
-        output += '<li><div class="hoverable ' + collapsed + '">';
-        output += valueToHTML(json[i], maxExpandLevel);
-        if (i < length - 1) {
-            output += ',';
+function getLineTemplate(_a) {
+    var isFirstKey = _a.isFirstKey, isLastKey = _a.isLastKey, nextLine = _a.nextLine, context = _a.context, lineTemplate = _a.lineTemplate, maxExpandLevel = _a.maxExpandLevel;
+    var lineValue = isFirstKey ? "".concat(ellipsis, "<span class=\"").concat(context, " collapsible\">") : '';
+    // Create hoverable
+    lineValue += "<span data-line=\"".concat(line++, "\" class=\"").concat(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(array, arrayLength, maxExpandLevel) {
+    var i, lines, isFirstKey, isLastKey, nextLine;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                i = 0;
+                _a.label = 1;
+            case 1:
+                if (!(i < arrayLength)) return [3 /*break*/, 8];
+                lines = valueToHTML(array[i], maxExpandLevel, 'array');
+                isFirstKey = i === 0;
+                isLastKey = i === arrayLength - 1;
+                nextLine = lines.next();
+                return [4 /*yield*/, getLineTemplate({
+                        context: 'array',
+                        isFirstKey: isFirstKey,
+                        isLastKey: isLastKey,
+                        nextLine: nextLine,
+                        lineTemplate: '',
+                        maxExpandLevel: maxExpandLevel,
+                    })];
+            case 2:
+                _a.sent();
+                nextLine = lines.next();
+                _a.label = 3;
+            case 3:
+                if (!!nextLine.done) return [3 /*break*/, 5];
+                return [4 /*yield*/, nextLine.value];
+            case 4:
+                _a.sent();
+                nextLine = lines.next();
+                return [3 /*break*/, 3];
+            case 5:
+                if (!nextLine.value) return [3 /*break*/, 7];
+                // Close hoverable and collapsible (if last array item)
+                return [4 /*yield*/, "".concat(nextLine.value).concat(i < arrayLength - 1 ? punctuation(',') : '</span>', "</span>")];
+            case 6:
+                // Close hoverable and collapsible (if last array item)
+                _a.sent();
+                _a.label = 7;
+            case 7:
+                i++;
+                return [3 /*break*/, 1];
+            case 8: return [2 /*return*/];
         }
-        output += '</div></li>';
-    }
-    output += "</ul>".concat(punctuation(']'));
-    if (!hasContents) {
-        output = punctuation('[ ]');
-    }
-    return output;
+    });
 }
-function objectToHTML(json, maxExpandLevel) {
-    var collapsed = level > maxExpandLevel ? 'collapsed' : '';
-    var keys = Object.keys(json);
-    var length = keys.length;
-    var output = "<button class=\"collapser\" aria-label=\"".concat(level > maxExpandLevel + 1 ? 'expand' : 'collapse', "\"></button>").concat(punctuation('{'), "<span class=\"ellipsis\"></span><ul class=\"obj collapsible\">");
-    var hasContents = false;
-    for (var i = 0; i < length; i++) {
-        var 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(',');
+function objectToHTML(object, keys, maxExpandLevel) {
+    var i, key, lines, isFirstKey, isLastKey, nextLine;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                i = 0;
+                _a.label = 1;
+            case 1:
+                if (!(i < keys.length)) return [3 /*break*/, 8];
+                key = keys[i];
+                lines = valueToHTML(object[key], maxExpandLevel, 'object');
+                isFirstKey = i === 0;
+                isLastKey = i === keys.length - 1;
+                nextLine = lines.next();
+                return [4 /*yield*/, getLineTemplate({
+                        context: 'obj',
+                        isFirstKey: isFirstKey,
+                        isLastKey: isLastKey,
+                        nextLine: nextLine,
+                        lineTemplate: "<span class=\"property token string\">\"".concat(htmlEncode(key), "\"</span>").concat(colon),
+                        maxExpandLevel: maxExpandLevel,
+                    })];
+            case 2:
+                _a.sent();
+                nextLine = lines.next();
+                _a.label = 3;
+            case 3:
+                if (!!nextLine.done) return [3 /*break*/, 5];
+                return [4 /*yield*/, nextLine.value];
+            case 4:
+                _a.sent();
+                nextLine = lines.next();
+                return [3 /*break*/, 3];
+            case 5:
+                if (!nextLine.value) return [3 /*break*/, 7];
+                // Close hoverable and collapsible (if last field)
+                return [4 /*yield*/, "".concat(nextLine.value).concat(isLastKey ? '</span>' : punctuation(','), "</span>")];
+            case 6:
+                // Close hoverable and collapsible (if last field)
+                _a.sent();
+                _a.label = 7;
+            case 7:
+                i++;
+                return [3 /*break*/, 1];
+            case 8: return [2 /*return*/];
         }
-        output += '</div></li>';
-    }
-    output += "</ul>".concat(punctuation('}'));
-    if (!hasContents) {
-        output = punctuation('{ }');
-    }
-    return output;
+    });
 }

package/utils/media-css.js

@@ -1,12 +1,49 @@
 "use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateMediaQueries = exports.breakpoints = void 0;
 exports.breakpoints = { small: '50rem', medium: '85rem', large: '105rem' };
 function generateMediaQueries(breakpoints) {
+    var e_1, _a;
     var result = { print: '@media print' };
-    for (var _i = 0, _a = Object.entries(breakpoints); _i < _a.length; _i++) {
-        var _b = _a[_i], key = _b[0], value = _b[1];
-        result[key] = "@media screen and (min-width: ".concat(value, ")");
+    try {
+        for (var _b = __values(Object.entries(breakpoints)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
+            result[key] = "@media screen and (min-width: ".concat(value, ")");
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
     }
     return result;
 }

package/utils/theme-helpers.js

@@ -3,6 +3,33 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateCodeBlockTokens = exports.typography = exports.getTypographyCssRulesByComponentName = void 0;
 var styled_components_1 = require("styled-components");
@@ -13,7 +40,7 @@ var Token;
     Token["Doctype"] = "doctype";
     Token["Cdata"] = "cdata";
     Token["Punctuation"] = "punctuation";
-    Token["property"] = "property";
+    Token["Property"] = "property";
     Token["Tag"] = "tag";
     Token["Number"] = "number";
     Token["Constant"] = "constant";
@@ -29,6 +56,8 @@ var Token;
     Token["Url"] = "url";
     Token["Variable"] = "variable";
     Token["Atrule"] = "atrule";
+    Token["AttrValue"] = "attr-value";
+    Token["AttrName"] = "attr-name";
     Token["Keyword"] = "keyword";
     Token["Regex"] = "regex";
     Token["Important"] = "important";
@@ -45,12 +74,22 @@ var typographyProperties = Object.entries({
     textTransform: 'text-transform',
 });
 function getTypographyCssRulesByComponentName(componentName, fallbackName) {
+    var e_1, _a;
     var result = {};
-    for (var _i = 0, typographyProperties_1 = typographyProperties; _i < typographyProperties_1.length; _i++) {
-        var _a = typographyProperties_1[_i], styledPropertyName = _a[0], cssPropertyName = _a[1];
-        var cssVariable = "--".concat(componentName, "-").concat(cssPropertyName);
-        var fallbackVariable = fallbackName ? ",var(--".concat(fallbackName, "-").concat(cssPropertyName, ")") : '';
-        result[styledPropertyName] = "var(".concat(cssVariable).concat(fallbackVariable, ")");
+    try {
+        for (var typographyProperties_1 = __values(typographyProperties), typographyProperties_1_1 = typographyProperties_1.next(); !typographyProperties_1_1.done; typographyProperties_1_1 = typographyProperties_1.next()) {
+            var _b = __read(typographyProperties_1_1.value, 2), styledPropertyName = _b[0], cssPropertyName = _b[1];
+            var cssVariable = "--".concat(componentName, "-").concat(cssPropertyName);
+            var fallbackVariable = fallbackName ? ",var(--".concat(fallbackName, "-").concat(cssPropertyName, ")") : '';
+            result[styledPropertyName] = "var(".concat(cssVariable).concat(fallbackVariable, ")");
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (typographyProperties_1_1 && !typographyProperties_1_1.done && (_a = typographyProperties_1.return)) _a.call(typographyProperties_1);
+        }
+        finally { if (e_1) throw e_1.error; }
     }
     return result;
 }
@@ -60,11 +99,21 @@ function typography(componentName, fallbackName) {
 }
 exports.typography = typography;
 function generateCodeBlockTokens() {
+    var e_2, _a;
     var res = '';
-    for (var _i = 0, _a = Object.values(Token); _i < _a.length; _i++) {
-        var token = _a[_i];
-        var cssTokenColorVariableName = "--code-block-tokens-".concat(token, "-color");
-        res += ".token.".concat(token, " { color: var(").concat(cssTokenColorVariableName, ")}; }\n");
+    try {
+        for (var _b = __values(Object.values(Token)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var token = _c.value;
+            var cssTokenColorVariableName = "--code-block-tokens-".concat(token, "-color");
+            res += ".token.".concat(token, " { color: var(").concat(cssTokenColorVariableName, ")}; }\n");
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_2) throw e_2.error; }
     }
     return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    pre& {\n      color: var(--code-block-tokens-default-color);\n    }\n    ", "\n  "], ["\n    pre& {\n      color: var(--code-block-tokens-default-color);\n    }\n    ", "\n  "])), res);
 }