@redocly/theme 0.1.0 → 0.1.1

package/lib/src/utils/ClipboardService.ts

@@ -1,92 +0,0 @@
-export class ClipboardService {
-  static isSupported(): boolean {
-    return (
-      typeof document !== 'undefined' &&
-      !!document.queryCommandSupported &&
-      document.queryCommandSupported('copy')
-    );
-  }
-
-  static selectElement(element: HTMLDivElement | null): void {
-    if (!element) {
-      return;
-    }
-    let range;
-    let selection;
-    if ((document.body as any).createTextRange) {
-      range = (document.body as any).createTextRange();
-      range.moveToElementText(element);
-      range.select();
-    } else if (document.createRange && window.getSelection) {
-      selection = window.getSelection();
-      range = document.createRange();
-      range.selectNodeContents(element);
-      selection?.removeAllRanges();
-      selection?.addRange(range);
-    }
-  }
-
-  static deselect(): void {
-    if ((document as any).selection) {
-      (document as any).selection.empty();
-    } else if (window.getSelection) {
-      const selection = window.getSelection();
-      if (selection) {
-        selection.removeAllRanges();
-      }
-    }
-  }
-
-  static copySelected(): boolean {
-    let result;
-    try {
-      result = document.execCommand('copy');
-    } catch (err) {
-      result = false;
-    }
-    return result;
-  }
-
-  static copyElement(element: HTMLDivElement | null): boolean {
-    ClipboardService.selectElement(element);
-    const res = ClipboardService.copySelected();
-    if (res) {
-      ClipboardService.deselect();
-    }
-    return res;
-  }
-
-  static copyCustom(text: string): boolean {
-    const 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();
-
-    const res = ClipboardService.copySelected();
-
-    document.body.removeChild(textArea);
-    return res;
-  }
-}

package/lib/src/utils/css-variables.ts

@@ -1,2 +0,0 @@
-export const getCssColorVariable = (color: string | undefined, defaultValue = 'inherit'): string =>
-  color?.startsWith('--') ? `var(${color})` : color || defaultValue;

package/lib/src/utils/highlight.ts

@@ -1,81 +0,0 @@
-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/lib/src/utils/index.ts

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

package/lib/src/utils/jsonToHtml.ts

@@ -1,122 +0,0 @@
-// 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/lib/src/utils/media-css.ts

@@ -1,16 +0,0 @@
-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/lib/src/utils/theme-helpers.ts

@@ -1,34 +0,0 @@
-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)}
-  `;
-}