@redocly/theme 0.1.0 → 0.1.3

package/src/utils/__tests__/highlight.test.ts

@@ -0,0 +1,51 @@
+import * as Prism from 'prismjs';
+
+import { highlight, mapLang } from '../highlight';
+
+jest.mock('prismjs', () => {
+  const original = jest.requireActual('prismjs');
+  return {
+    __isModule: true,
+    ...original,
+    highlight: jest.fn().mockImplementation((...args) => {
+      return original.highlight(...args);
+    }),
+  };
+});
+
+describe('highlight', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should work with correct lang name', () => {
+    const highlighted = highlight('int name = "John"', 'cpp');
+
+    expect(highlighted).toMatchSnapshot();
+  });
+
+  it('should work with mapped lang name', () => {
+    const highlighted = highlight('int name = "John"', 'c++');
+
+    expect(highlighted).toMatchSnapshot();
+  });
+
+  it('should have default value for lang', () => {
+    const highlightSpy = jest.spyOn(Prism, 'highlight');
+
+    highlight('i++');
+
+    expect(highlightSpy).toBeCalledTimes(1);
+    expect(highlightSpy).toBeCalledWith('i++', expect.any(Object), 'clike');
+  });
+
+  describe('mapLang', () => {
+    it('should work with known lang', () => {
+      expect(mapLang('node.js')).toBe('js');
+    });
+
+    it('should work with unknown lang', () => {
+      expect(mapLang('ada')).toBe('clike');
+    });
+  });
+});

package/src/utils/__tests__/jsonToHtml.test.ts

@@ -0,0 +1,40 @@
+import { jsonToHTML } from '../jsonToHtml';
+
+const data = {
+  id: '600dc3b5d617e547a0e74cb9',
+  name: 'Mitchell Fitzgerald',
+  about: 'lorem ipsum',
+  address: '48 Avenue, City, North',
+  company: 'Test',
+  bio: null,
+  nicknames: [
+    'Mitch',
+    'Fitz',
+    { title: 'MitFitz', createdAt: new Date('2022-04-19T11:46:00.019Z') },
+  ],
+  age: 27,
+  isBanned: true,
+  link: 'https://google.com',
+  emptyArray: [],
+  empty: {},
+  contacts: {
+    phone: {
+      code: '+1',
+      rest: '999',
+    },
+  },
+};
+
+describe('jsonToHTML', () => {
+  it('should work with maxExpandLevel 1', () => {
+    const result = jsonToHTML(data, 1);
+
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should work with maxExpandLevel 3', () => {
+    const result = jsonToHTML(data, 3);
+
+    expect(result).toMatchSnapshot();
+  });
+});

package/src/utils/__tests__/media-css.test.ts

@@ -0,0 +1,20 @@
+import { generateMediaQueries } from '../media-css';
+
+describe('media-css helpers', () => {
+  describe('generateMediaQueries function', () => {
+    it('generate media queries according to breakpoints', () => {
+      expect(
+        generateMediaQueries({
+          small: '50rem',
+          medium: '85rem',
+          large: '105rem',
+        }),
+      ).toEqual({
+        large: '@media screen and (min-width: 105rem)',
+        medium: '@media screen and (min-width: 85rem)',
+        print: '@media print',
+        small: '@media screen and (min-width: 50rem)',
+      });
+    });
+  });
+});

package/src/utils/__tests__/theme-helpers.test.ts

@@ -0,0 +1,25 @@
+import { getTypographyCssRulesByComponentName } from '../theme-helpers';
+
+describe('getTypographyCssRulesByComponentName', () => {
+  it('should return object with defined css variable for component', () => {
+    expect(getTypographyCssRulesByComponentName('component')).toEqual({
+      fontSize: 'var(--component-font-size)',
+      fontWeight: 'var(--component-font-weight)',
+      fontFamily: 'var(--component-font-family)',
+      lineHeight: 'var(--component-line-height)',
+      color: 'var(--component-color)',
+      textTransform: 'var(--component-text-transform)',
+    });
+  });
+
+  it('should return object with fallback', () => {
+    expect(getTypographyCssRulesByComponentName('component', 'component1')).toEqual({
+      fontSize: 'var(--component-font-size,var(--component1-font-size))',
+      fontWeight: 'var(--component-font-weight,var(--component1-font-weight))',
+      fontFamily: 'var(--component-font-family,var(--component1-font-family))',
+      lineHeight: 'var(--component-line-height,var(--component1-line-height))',
+      color: 'var(--component-color,var(--component1-color))',
+      textTransform: 'var(--component-text-transform,var(--component1-text-transform))',
+    });
+  });
+});

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;

package/LICENSE

@@ -1 +0,0 @@
-(c) Copyright 2022 Redocly Inc, all rights reserved.

package/lib/package.json

@@ -1,91 +0,0 @@
-{
-  "name": "@redocly/theme",
-  "version": "0.1.0",
-  "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"
-  }
-}