@redocly/theme 0.0.0-react18-20231120182601

package/src/utils/jsonToHtml.ts

@@ -0,0 +1,234 @@
+// Moved from reference-docs
+let level = 0;
+let line = 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 += getLines(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 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;
+
+  if (value === undefined || value === null) {
+    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++;
+
+    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) {
+    return decorateWithSpan('"' + value.toISOString() + '"', 'token string');
+  } else if (valueType === 'object') {
+    const keys = Object.keys(value);
+
+    if (!keys.length) {
+      return punctuation('{ }');
+    }
+
+    level++;
+
+    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') {
+    return decorateWithSpan(value, 'token number');
+  } else if (valueType === 'string') {
+    if (/^(http|https):\/\/[^\s]+$/.test(value)) {
+      return (
+        decorateWithSpan('"', 'token string') +
+        `<a href="${encodeURI(value)}">` +
+        htmlEncode(stringifyStringLiteral(value)) +
+        '</a>' +
+        decorateWithSpan('"', 'token string')
+      );
+    } else {
+      return decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
+    }
+  } else if (valueType === 'boolean') {
+    return decorateWithSpan(value, 'token boolean');
+  }
+}
+
+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(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>`;
+    }
+  }
+}
+
+function* objectToHTML(
+  object: Record<any, any>,
+  keys: any[],
+  maxExpandLevel: number,
+): LineGenerator {
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    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>`;
+    }
+  }
+}

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/replaceHashInColor.ts

@@ -0,0 +1,3 @@
+export function replaceHashInColor(color: string): string {
+  return color.replace('#', '%23');
+}

package/src/utils/tags-parser.ts

@@ -0,0 +1,8 @@
+export const slug = (value: string) => {
+  const matches = value.match(/[a-zA-Z0-9_-]*/g);
+  const result = matches
+    ?.filter((value) => value !== '')
+    .join('-')
+    .toLowerCase();
+  return result ?? value;
+};

package/src/utils/text-transform.ts

@@ -0,0 +1,3 @@
+export function capitalize(input: string): string {
+  return input.charAt(0).toUpperCase() + input.slice(1);
+}

package/src/utils/theme-helpers.ts

@@ -0,0 +1,83 @@
+import { css } from 'styled-components';
+
+import type { FlattenSimpleInterpolation } from 'styled-components';
+
+enum Token {
+  Comment = 'comment',
+  Prolog = 'prolog',
+  Doctype = 'doctype',
+  Cdata = 'cdata',
+  Punctuation = 'punctuation',
+  Property = 'property',
+  Tag = 'tag',
+  Number = 'number',
+  Constant = 'constant',
+  Symbol = 'symbol',
+  Boolean = 'boolean',
+  Selector = 'selector',
+  String = 'string',
+  Char = 'char',
+  Builtin = 'builtin',
+  Inserted = 'inserted',
+  Operator = 'operator',
+  Entity = 'entity',
+  Url = 'url',
+  Variable = 'variable',
+  Atrule = 'atrule',
+  AttrValue = 'attr-value',
+  AttrName = 'attr-name',
+  Keyword = 'keyword',
+  Regex = 'regex',
+  Important = 'important',
+  Bold = 'bold',
+  Italic = 'italic',
+  Deleted = 'deleted',
+}
+
+const typographyProperties = Object.entries({
+  fontSize: 'font-size',
+  fontWeight: 'font-weight',
+  fontFamily: 'font-family',
+  lineHeight: 'line-height',
+  color: 'text-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)}
+  `;
+}
+
+export function generateCodeBlockTokens(): FlattenSimpleInterpolation | string {
+  let res = '';
+
+  for (const token of Object.values(Token)) {
+    const cssTokenColorVariableName = `--code-block-tokens-${token}-color`;
+    res += `.token.${token} { color: var(${cssTokenColorVariableName})}; }\n`;
+  }
+
+  return css`
+    pre& {
+      color: var(--code-block-tokens-default-color);
+    }
+    ${res}
+  `;
+}

package/src/utils/urls.ts

@@ -0,0 +1,54 @@
+export function combineUrls(baseURL: string, ...relativeURLs: string[]) {
+  let res = baseURL;
+  for (let relativeURL of relativeURLs) {
+    res = relativeURL
+      ? res.replace(/[\/\\]+$/, '') + '/' + relativeURL.replace(/^[\/\\]+/, '')
+      : res;
+  }
+
+  return res;
+}
+
+export function withPathPrefix(url: string) {
+  return combineUrls(getPathPrefix(), url);
+}
+
+export function withoutPathPrefix(pathname: string) {
+  const pathPrefix = getPathPrefix();
+  return pathPrefix && pathname.startsWith(pathPrefix)
+    ? pathname.slice(pathPrefix.length)
+    : pathname;
+}
+
+export function withoutHash(url: undefined | null): undefined;
+export function withoutHash(url: string): string;
+export function withoutHash(url: string | undefined): string | undefined;
+export function withoutHash(url: string | undefined | null): string | undefined {
+  if (url == null) return undefined;
+  return url.split('#')[0];
+}
+
+export function getPathPrefix() {
+  if (process.env.REDOCLY_PREFIX_PATHS) {
+    return normalizePathPrefix(process.env.REDOCLY_PREFIX_PATHS);
+  }
+
+  return '';
+}
+
+export function normalizePathPrefix(prefix: string) {
+  const withoutTrailing = removeTrailingSlash(prefix);
+  return addLeadingSlash(withoutTrailing === '.' ? '' : withoutTrailing);
+}
+
+export function addLeadingSlash(url: string): string {
+  return url.startsWith('/') ? url : `/${url}`;
+}
+
+export function removeTrailingSlash(url: string): string {
+  return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
+}
+
+export function removeLeadingSlash(url: string): string {
+  return url.startsWith('/') ? url.substring(1) : url;
+}