@redocly/theme 0.1.2 → 0.1.3

package/src/utils/highlight.ts

@@ -0,0 +1,81 @@
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-clike.js';
+import 'prismjs/components/prism-coffeescript.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-csharp.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-markup-templating.js'; // dep of php
+import 'prismjs/components/prism-markup.js'; // xml
+import 'prismjs/components/prism-objectivec.js';
+import 'prismjs/components/prism-perl.js';
+import 'prismjs/components/prism-php.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-ruby.js';
+import 'prismjs/components/prism-scala.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-swift.js';
+import 'prismjs/components/prism-graphql.js';
+
+const DEFAULT_LANG = 'clike';
+
+Prism.languages.insertBefore(
+  'javascript',
+  'string',
+  {
+    'property string': {
+      pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
+      lookbehind: true,
+    },
+  },
+  undefined,
+);
+
+Prism.languages.insertBefore(
+  'javascript',
+  'punctuation',
+  {
+    property: {
+      pattern: /([{,]\s*)[a-z]\w*(?=\s*:)/i,
+      lookbehind: true,
+    },
+  },
+  undefined,
+);
+
+/**
+ * map language names to Prism.js names
+ */
+export function mapLang(lang: string): string {
+  return (
+    {
+      json: 'js',
+      'c++': 'cpp',
+      'c#': 'csharp',
+      'objective-c': 'objectivec',
+      shell: 'bash',
+      viml: 'vim',
+      curl: 'bash',
+      'node.js': 'js',
+    }[lang] || DEFAULT_LANG
+  );
+}
+
+/**
+ * Highlight source code string using Prism.js
+ * @param source source code to highlight
+ * @param lang highlight language
+ * @return highlighted source code as **html string**
+ */
+export function highlight(source: string | number | boolean, lang: string = DEFAULT_LANG): string {
+  lang = lang.toLowerCase();
+  let grammar = Prism.languages[lang];
+  if (!grammar) {
+    grammar = Prism.languages[mapLang(lang)];
+  }
+  return Prism.highlight(source.toString(), grammar, lang);
+}

package/src/utils/index.ts

@@ -0,0 +1,6 @@
+export * from './ClipboardService';
+export * from './css-variables';
+export * from './highlight';
+export * from './jsonToHtml';
+export * from './media-css';
+export * from './theme-helpers';

package/src/utils/jsonToHtml.ts

@@ -0,0 +1,122 @@
+// Moved from reference-docs
+let level = 1;
+
+export function jsonToHTML(json: JSON | Record<string, unknown>, maxExpandLevel: number): string {
+  level = 1;
+  let output = '';
+  output += '<div data-cy="json-sample" class="redoc-json">';
+  output += '<code>';
+  output += valueToHTML(json, maxExpandLevel);
+  output += '</code>';
+  output += '</div>';
+  return output;
+}
+
+function htmlEncode(t: any) {
+  return t !== undefined
+    ? t
+        .toString()
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+    : '';
+}
+
+function stringifyStringLiteral(str: string) {
+  return JSON.stringify(str).slice(1, -1);
+}
+
+function decorateWithSpan(value: any, className: string) {
+  return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
+}
+
+function punctuation(val: any) {
+  return '<span class="token punctuation">' + val + '</span>';
+}
+
+function valueToHTML(value: any, maxExpandLevel: number) {
+  const valueType = typeof value;
+  let 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');
+  } 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');
+    }
+  } else if (valueType === 'boolean') {
+    output += decorateWithSpan(value, 'token boolean');
+  }
+
+  return output;
+}
+
+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 += ',';
+    }
+    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++) {
+    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(',');
+    }
+    output += '</div></li>';
+  }
+  output += `</ul>${punctuation('}')}`;
+  if (!hasContents) {
+    output = punctuation('{ }');
+  }
+  return output;
+}

package/src/utils/media-css.ts

@@ -0,0 +1,16 @@
+export type MediaQueries = {
+  print: string;
+  small: string;
+  medium: string;
+  large: string;
+};
+
+export const breakpoints = { small: '50rem', medium: '85rem', large: '105rem' };
+
+export function generateMediaQueries(breakpoints: Omit<MediaQueries, 'print'>): MediaQueries {
+  const result = <Record<string, string>>{ print: '@media print' };
+  for (const [key, value] of Object.entries(breakpoints)) {
+    result[key] = `@media screen and (min-width: ${value})`;
+  }
+  return result as MediaQueries;
+}

package/src/utils/theme-helpers.ts

@@ -0,0 +1,34 @@
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import { css } from 'styled-components';
+
+const typographyProperties = Object.entries({
+  fontSize: 'font-size',
+  fontWeight: 'font-weight',
+  fontFamily: 'font-family',
+  lineHeight: 'line-height',
+  color: 'color',
+  textTransform: 'text-transform',
+});
+
+export function getTypographyCssRulesByComponentName(
+  componentName: string,
+  fallbackName?: string,
+): Record<string, string> {
+  const result = {} as Record<string, string>;
+  for (const [styledPropertyName, cssPropertyName] of typographyProperties) {
+    const cssVariable = `--${componentName}-${cssPropertyName}`;
+    const fallbackVariable = fallbackName ? `,var(--${fallbackName}-${cssPropertyName})` : '';
+
+    result[styledPropertyName] = `var(${cssVariable}${fallbackVariable})`;
+  }
+  return result;
+}
+
+export function typography(
+  componentName: string,
+  fallbackName?: string,
+): FlattenSimpleInterpolation {
+  return css`
+    ${getTypographyCssRulesByComponentName(componentName, fallbackName)}
+  `;
+}

package/utils/ClipboardService.d.ts

@@ -0,0 +1,8 @@
+export declare class ClipboardService {
+    static isSupported(): boolean;
+    static selectElement(element: HTMLDivElement | null): void;
+    static deselect(): void;
+    static copySelected(): boolean;
+    static copyElement(element: HTMLDivElement | null): boolean;
+    static copyCustom(text: string): boolean;
+}

package/utils/ClipboardService.js

@@ -0,0 +1,83 @@
+var ClipboardService = /** @class */ (function () {
+    function ClipboardService() {
+    }
+    ClipboardService.isSupported = function () {
+        return (typeof document !== 'undefined' &&
+            !!document.queryCommandSupported &&
+            document.queryCommandSupported('copy'));
+    };
+    ClipboardService.selectElement = function (element) {
+        if (!element) {
+            return;
+        }
+        var range;
+        var selection;
+        if (document.body.createTextRange) {
+            range = document.body.createTextRange();
+            range.moveToElementText(element);
+            range.select();
+        }
+        else if (document.createRange && window.getSelection) {
+            selection = window.getSelection();
+            range = document.createRange();
+            range.selectNodeContents(element);
+            selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+            selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+        }
+    };
+    ClipboardService.deselect = function () {
+        if (document.selection) {
+            document.selection.empty();
+        }
+        else if (window.getSelection) {
+            var selection = window.getSelection();
+            if (selection) {
+                selection.removeAllRanges();
+            }
+        }
+    };
+    ClipboardService.copySelected = function () {
+        var result;
+        try {
+            result = document.execCommand('copy');
+        }
+        catch (err) {
+            result = false;
+        }
+        return result;
+    };
+    ClipboardService.copyElement = function (element) {
+        ClipboardService.selectElement(element);
+        var res = ClipboardService.copySelected();
+        if (res) {
+            ClipboardService.deselect();
+        }
+        return res;
+    };
+    ClipboardService.copyCustom = function (text) {
+        var textArea = document.createElement('textarea');
+        textArea.style.position = 'fixed';
+        textArea.style.top = '0';
+        textArea.style.left = '0';
+        // Ensure it has a small width and height. Setting to 1px / 1em
+        // doesn't work as this gives a negative w/h on some browsers.
+        textArea.style.width = '2em';
+        textArea.style.height = '2em';
+        // We don't need padding, reducing the size if it does flash render.
+        textArea.style.padding = '0';
+        // Clean up any borders.
+        textArea.style.border = 'none';
+        textArea.style.outline = 'none';
+        textArea.style.boxShadow = 'none';
+        // Avoid flash of white box if rendered for any reason.
+        textArea.style.background = 'transparent';
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        var res = ClipboardService.copySelected();
+        document.body.removeChild(textArea);
+        return res;
+    };
+    return ClipboardService;
+}());
+export { ClipboardService };

package/utils/css-variables.d.ts

@@ -0,0 +1 @@
+export declare const getCssColorVariable: (color: string | undefined, defaultValue?: string) => string;

package/utils/css-variables.js

@@ -0,0 +1,4 @@
+export var getCssColorVariable = function (color, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = 'inherit'; }
+    return (color === null || color === void 0 ? void 0 : color.startsWith('--')) ? "var(".concat(color, ")") : color || defaultValue;
+};

package/utils/highlight.d.ts

@@ -0,0 +1,32 @@
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-clike.js';
+import 'prismjs/components/prism-coffeescript.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-csharp.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-markup-templating.js';
+import 'prismjs/components/prism-markup.js';
+import 'prismjs/components/prism-objectivec.js';
+import 'prismjs/components/prism-perl.js';
+import 'prismjs/components/prism-php.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-ruby.js';
+import 'prismjs/components/prism-scala.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-swift.js';
+import 'prismjs/components/prism-graphql.js';
+/**
+ * map language names to Prism.js names
+ */
+export declare function mapLang(lang: string): string;
+/**
+ * Highlight source code string using Prism.js
+ * @param source source code to highlight
+ * @param lang highlight language
+ * @return highlighted source code as **html string**
+ */
+export declare function highlight(source: string | number | boolean, lang?: string): string;

package/utils/highlight.js

@@ -0,0 +1,65 @@
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-clike.js';
+import 'prismjs/components/prism-coffeescript.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-csharp.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-markup-templating.js'; // dep of php
+import 'prismjs/components/prism-markup.js'; // xml
+import 'prismjs/components/prism-objectivec.js';
+import 'prismjs/components/prism-perl.js';
+import 'prismjs/components/prism-php.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-ruby.js';
+import 'prismjs/components/prism-scala.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-swift.js';
+import 'prismjs/components/prism-graphql.js';
+var DEFAULT_LANG = 'clike';
+Prism.languages.insertBefore('javascript', 'string', {
+    'property string': {
+        pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
+        lookbehind: true,
+    },
+}, undefined);
+Prism.languages.insertBefore('javascript', 'punctuation', {
+    property: {
+        pattern: /([{,]\s*)[a-z]\w*(?=\s*:)/i,
+        lookbehind: true,
+    },
+}, undefined);
+/**
+ * map language names to Prism.js names
+ */
+export function mapLang(lang) {
+    return ({
+        json: 'js',
+        'c++': 'cpp',
+        'c#': 'csharp',
+        'objective-c': 'objectivec',
+        shell: 'bash',
+        viml: 'vim',
+        curl: 'bash',
+        'node.js': 'js',
+    }[lang] || DEFAULT_LANG);
+}
+/**
+ * Highlight source code string using Prism.js
+ * @param source source code to highlight
+ * @param lang highlight language
+ * @return highlighted source code as **html string**
+ */
+export function highlight(source, lang) {
+    if (lang === void 0) { lang = DEFAULT_LANG; }
+    lang = lang.toLowerCase();
+    var grammar = Prism.languages[lang];
+    if (!grammar) {
+        grammar = Prism.languages[mapLang(lang)];
+    }
+    return Prism.highlight(source.toString(), grammar, lang);
+}

package/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ClipboardService';
+export * from './css-variables';
+export * from './highlight';
+export * from './jsonToHtml';
+export * from './media-css';
+export * from './theme-helpers';

package/utils/index.js

@@ -0,0 +1,6 @@
+export * from './ClipboardService';
+export * from './css-variables';
+export * from './highlight';
+export * from './jsonToHtml';
+export * from './media-css';
+export * from './theme-helpers';

package/utils/jsonToHtml.d.ts

@@ -0,0 +1 @@
+export declare function jsonToHTML(json: JSON | Record<string, unknown>, maxExpandLevel: number): string;

package/utils/jsonToHtml.js

@@ -0,0 +1,116 @@
+// Moved from reference-docs
+var level = 1;
+export function jsonToHTML(json, maxExpandLevel) {
+    level = 1;
+    var output = '';
+    output += '<div data-cy="json-sample" class="redoc-json">';
+    output += '<code>';
+    output += valueToHTML(json, maxExpandLevel);
+    output += '</code>';
+    output += '</div>';
+    return output;
+}
+function htmlEncode(t) {
+    return t !== undefined
+        ? t
+            .toString()
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+        : '';
+}
+function stringifyStringLiteral(str) {
+    return JSON.stringify(str).slice(1, -1);
+}
+function decorateWithSpan(value, className) {
+    return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
+}
+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');
+    }
+    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');
+        }
+    }
+    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 += ',';
+        }
+        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(',');
+        }
+        output += '</div></li>';
+    }
+    output += "</ul>".concat(punctuation('}'));
+    if (!hasContents) {
+        output = punctuation('{ }');
+    }
+    return output;
+}

package/utils/media-css.d.ts

@@ -0,0 +1,12 @@
+export declare type MediaQueries = {
+    print: string;
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const breakpoints: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare function generateMediaQueries(breakpoints: Omit<MediaQueries, 'print'>): MediaQueries;

package/utils/media-css.js

@@ -0,0 +1,9 @@
+export var breakpoints = { small: '50rem', medium: '85rem', large: '105rem' };
+export function generateMediaQueries(breakpoints) {
+    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, ")");
+    }
+    return result;
+}

package/utils/theme-helpers.d.ts

@@ -0,0 +1,3 @@
+import type { FlattenSimpleInterpolation } from 'styled-components';
+export declare function getTypographyCssRulesByComponentName(componentName: string, fallbackName?: string): Record<string, string>;
+export declare function typography(componentName: string, fallbackName?: string): FlattenSimpleInterpolation;

package/utils/theme-helpers.js

@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css } from 'styled-components';
+var typographyProperties = Object.entries({
+    fontSize: 'font-size',
+    fontWeight: 'font-weight',
+    fontFamily: 'font-family',
+    lineHeight: 'line-height',
+    color: 'color',
+    textTransform: 'text-transform',
+});
+export function getTypographyCssRulesByComponentName(componentName, fallbackName) {
+    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, ")");
+    }
+    return result;
+}
+export function typography(componentName, fallbackName) {
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), getTypographyCssRulesByComponentName(componentName, fallbackName));
+}
+var templateObject_1;