@redocly/theme 0.0.1

package/lib/src/hooks/useMount.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+
+export const useMount = (callback: () => void): void => {
+  useEffect(() => {
+    callback();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/lib/src/hooks/useUnmount.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+
+export const useUnmount = (callback: () => void): void => {
+  useEffect(() => {
+    return () => {
+      callback();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/lib/src/icons/ShelfIcon/ShelfIcon.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+import { getCssColorVariable } from '../../utils/css-variables';
+
+const directionMap = {
+  right: '0deg',
+  down: '90deg',
+  left: '180deg',
+  up: '270deg',
+};
+
+export interface ShelfIconProps {
+  className?: string;
+  float?: 'left' | 'right';
+  size?: string;
+  color?: string;
+  direction: 'left' | 'right' | 'up' | 'down';
+  style?: React.CSSProperties;
+}
+
+const IntShelfIcon = ({ className, style }: ShelfIconProps): JSX.Element => (
+  <svg
+    className={className}
+    style={style}
+    viewBox="0 0 4.25 7"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" />
+    <path d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" />
+  </svg>
+);
+
+export const ShelfIcon = styled(IntShelfIcon)`
+  ${({ size = '9px', float = '', direction, color }) => css`
+    height: ${size};
+    width: ${size};
+    float: ${float};
+    transform: rotateZ(${directionMap[direction]});
+    fill: ${getCssColorVariable(color)};
+  `}
+  vertical-align: middle;
+  transition: transform 0.2s ease-out;
+`;

package/lib/src/icons/ShelfIcon/index.ts

@@ -0,0 +1,2 @@
+export { ShelfIcon } from './ShelfIcon';
+export type { ShelfIconProps } from './ShelfIcon';

package/lib/src/icons/index.ts

@@ -0,0 +1 @@
+export * from './ShelfIcon';

package/lib/src/index.ts

@@ -0,0 +1,14 @@
+export * from './Button';
+export * from './CopyButton';
+export * from './JsonViewer';
+export * from './Headings';
+export * from './SidebarLogo';
+export * from './CodeBlock';
+export * from './SamplesPanelControls';
+export * from './Tooltip';
+export * from './SourceCode';
+export * from './Panel';
+export * from './icons';
+export * from './hooks';
+export * from './utils';
+export * from './globalStyle';

package/lib/src/mocks/Link.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+// TODO: use real typings here
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function Link(props: any): JSX.Element {
+  return <a href={props.to} {...props} />;
+}

package/lib/src/mocks/utils.ts

@@ -0,0 +1,3 @@
+export function withPathPrefix(link: string): string {
+  return link;
+}

package/lib/src/utils/ClipboardService.ts

@@ -0,0 +1,92 @@
+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

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@redocly/theme",
+  "version": "0.0.1",
+  "description": "Shared UI components",
+  "author": "team@redocly.com",
+  "license": "SEE LICENSE IN LICENSE",
+  "main": "index.js",
+  "typings": "index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "npm run storybook",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "clean": "rm -rf lib",
+    "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build:copy": " cp -R src package.json .npmignore lib/",
+    "build": "npm run clean && npm run compile && npm run build:copy",
+    "build:watch": "npm run build && tsc --watch -p tsconfig.build.json & tsc-alias -w -p tsconfig.build.json",
+    "deploy": "npm publish lib",
+    "lint": "eslint . --ext .ts,.tsx --cache",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "prettier-base": "prettier \"**/*.{json,js,jsx,ts,tsx,yml,yaml,html,md}\"",
+    "prettier": "npm run prettier-base -- --write",
+    "prettier:check": "npm run prettier-base -- --check",
+    "ts:check": "tsc --noEmit --skipLibCheck",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepare": "husky install",
+    "chromatic": "chromatic --exit-zero-on-changes"
+  },
+  "peerDependencies": {
+    "prismjs": "^1.28.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/builder-webpack5": "^6.4.22",
+    "@storybook/core-common": "^6.4.22",
+    "@storybook/manager-webpack5": "^6.4.22",
+    "@storybook/node-logger": "^6.4.22",
+    "@storybook/preset-create-react-app": "^4.1.0",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "^0.0.11",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^16.11.26",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "chromatic": "^6.5.4",
+    "esbuild": "^0.14.38",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-storybook": "^0.5.11",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "jest-styled-components": "^7.0.8",
+    "lint-staged": "^12.4.1",
+    "prettier": "2.6.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-refresh": "^0.13.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.5",
+    "ts-jest": "^27.1.4",
+    "tsc-alias": "^1.6.7",
+    "typescript": "^4.6.3",
+    "webpack": "^5.72.0"
+  },
+  "lint-staged": {
+    "**/*": "prettier --write  --ignore-unknown"
+  }
+}