@jetbrains/ring-ui 5.1.23 → 5.1.24

package/components/clipboard/clipboard-fallback.js

@@ -0,0 +1,44 @@
+export function copyTextToClipboard(str) {
+    const el = document.createElement('textarea');
+    el.value = str;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    const selection = document.getSelection();
+    // Should restore previous selection
+    const selected = (selection && selection.rangeCount > 0)
+        ? selection.getRangeAt(0)
+        : false;
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected && selection) {
+        selection.removeAllRanges();
+        selection.addRange(selected);
+    }
+}
+export function copyHTMLToClipboard(str) {
+    const el = document.createElement('div');
+    el.innerHTML = str;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    const selection = document.getSelection();
+    // Should restore previous selection
+    const selected = (selection && selection.rangeCount > 0)
+        ? selection.getRangeAt(0)
+        : false;
+    selection?.removeAllRanges();
+    const range = document.createRange();
+    range.selectNode(el);
+    selection?.addRange(range);
+    document.execCommand('copy');
+    selection?.removeAllRanges();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected && selection) {
+        selection.addRange(selected);
+    }
+}

package/components/clipboard/clipboard.d.ts

@@ -0,0 +1,5 @@
+declare const clipboard: {
+    copyText: (text: string, successMessage?: string | undefined, errorMessage?: string | undefined, delay?: number) => Promise<void>;
+    copyHTML: (html: string, successMessage?: string | undefined, errorMessage?: string | undefined, delay?: number) => Promise<void>;
+};
+export default clipboard;

package/components/clipboard/clipboard.js

@@ -0,0 +1,41 @@
+import alertService from '../alert-service/alert-service';
+import { copyHTMLToClipboard, copyTextToClipboard } from './clipboard-fallback';
+const ALERT_DELAY = 1000;
+function getClipboardImplementation() {
+    if (navigator.clipboard && !window.isSecureContext) {
+        return {
+            copy: (text) => navigator.clipboard.writeText(text),
+            copyHTML: (html) => navigator.clipboard.write([
+                new ClipboardItem({
+                    ['text/html']: new Blob([html], { type: 'text/html' })
+                })
+            ])
+        };
+    }
+    return {
+        copy: (str) => Promise.resolve(copyTextToClipboard(str)),
+        copyHTML: (html) => Promise.resolve(copyHTMLToClipboard(html))
+    };
+}
+async function copy(text, successMessage, errorMessage, delay = ALERT_DELAY, isHtml = false) {
+    try {
+        const clipboardImpl = getClipboardImplementation();
+        const copyMethod = isHtml ? clipboardImpl.copyHTML : clipboardImpl.copy;
+        await copyMethod(text);
+        if (successMessage) {
+            alertService.successMessage(successMessage, delay);
+        }
+    }
+    catch (e) {
+        if (errorMessage) {
+            alertService.error(errorMessage, delay);
+        }
+        // eslint-disable-next-line no-console
+        console.error(e);
+    }
+}
+const clipboard = {
+    copyText: async (text, successMessage, errorMessage, delay = ALERT_DELAY) => await copy(text, successMessage, errorMessage, delay),
+    copyHTML: async (html, successMessage, errorMessage, delay = ALERT_DELAY) => await copy(html, successMessage, errorMessage, delay, true)
+};
+export default clipboard;

package/components/code/code.css

@@ -0,0 +1,31 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.code {
+  margin: calc(unit * 2) 0;
+}
+
+/* override hljs */
+.code code {
+  display: block;
+
+  padding: calc(unit * 1.5) calc(unit * 2) calc(unit * 2);
+
+  border-radius: var(--ring-border-radius);
+  background-color: var(--ring-sidebar-background-color);
+
+  font-family: var(--ring-font-family-monospace);
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.inline code {
+  display: inline-block;
+
+  padding: 0 calc(unit / 2);
+}
+
+.softWrap code {
+  white-space: pre-wrap;
+}

package/components/code/code.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="highlight.js" />
+import React, { PureComponent, Ref } from 'react';
+import PropTypes from 'prop-types';
+import highlight from 'highlight.js/lib/core';
+declare function noop(): void;
+export interface CodeProps {
+    code: string;
+    inline: boolean;
+    softWrap: boolean;
+    replacer: ((element: HTMLElement | null) => void);
+    className?: string | null | undefined;
+    language?: string | null | undefined;
+    codeRef?: Ref<HTMLElement> | null | undefined;
+}
+/**
+ * @name Code
+ */
+export default class Code extends PureComponent<CodeProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        code: PropTypes.Validator<string>;
+        inline: PropTypes.Requireable<boolean>;
+        softWrap: PropTypes.Requireable<boolean>;
+        language: PropTypes.Requireable<string>;
+        replacer: PropTypes.Requireable<(...args: any[]) => any>;
+        codeRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            current: PropTypes.Requireable<Element>;
+        }> | null | undefined>>;
+    };
+    static defaultProps: {
+        inline: boolean;
+        softWrap: boolean;
+        replacer: typeof noop;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    code?: HTMLElement | null;
+    highlight(): Promise<void>;
+    get codeRef(): HTMLElement | null | undefined;
+    get initCodeRef(): React.RefObject<HTMLElement> | ((ref: HTMLElement | null) => void);
+    render(): React.JSX.Element;
+}
+declare const code: (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;
+export { code, highlight };

package/components/code/code.js

@@ -0,0 +1,94 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import highlight from 'highlight.js/lib/core';
+import normalizeIndent from '../global/normalize-indent';
+import trivialTemplateTag from '../global/trivial-template-tag';
+import memoize from '../global/memoize';
+import styles from './code.css';
+import highlightStyles from './highlight.css';
+function noop() { }
+const registerLanguage = memoize(async (language) => {
+    const languageExports = await import(
+    /* webpackChunkName: "highlight-[request]" */
+    `highlight.js/lib/languages/${language}`);
+    highlight.registerLanguage(language, languageExports.default);
+});
+/**
+ * @name Code
+ */
+export default class Code extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        code: PropTypes.string.isRequired,
+        inline: PropTypes.bool,
+        softWrap: PropTypes.bool,
+        language: PropTypes.string,
+        replacer: PropTypes.func,
+        codeRef: PropTypes.oneOfType([
+            PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+            PropTypes.func
+        ])
+    };
+    static defaultProps = {
+        inline: false,
+        softWrap: false,
+        replacer: noop
+    };
+    componentDidMount() {
+        this.highlight();
+    }
+    componentDidUpdate() {
+        this.highlight();
+    }
+    code;
+    async highlight() {
+        const codeRef = this.codeRef;
+        if (codeRef == null) {
+            return;
+        }
+        const { language, inline, replacer } = this.props;
+        if (!inline) {
+            if (language != null && highlight.getLanguage(language) == null) {
+                await registerLanguage(language);
+            }
+            // @ts-expect-error https://github.com/highlightjs/highlight.js/issues/2945
+            highlight.highlightElement(codeRef);
+        }
+        replacer(codeRef);
+    }
+    get codeRef() {
+        const { codeRef } = this.props;
+        return !codeRef || typeof codeRef === 'function' ? this.code : codeRef.current;
+    }
+    get initCodeRef() {
+        const { codeRef } = this.props;
+        const isFunctionCodeRef = typeof codeRef === 'function';
+        if (codeRef && !isFunctionCodeRef) {
+            return codeRef;
+        }
+        return (ref) => {
+            this.code = ref;
+            if (isFunctionCodeRef) {
+                codeRef(this.code);
+            }
+        };
+    }
+    render() {
+        const { code, className, inline, softWrap, language } = this.props;
+        const Tag = inline ? 'span' : 'pre';
+        const classes = classNames(styles.code, className, language, {
+            [styles.inline]: inline,
+            [styles.softWrap]: softWrap
+        });
+        return (<Tag className={classes} data-test="ring-code">
+        <code 
+        // should be focusable because it can be scrollable
+        tabIndex={inline ? -1 : 0} ref={this.initCodeRef} className={highlightStyles.highlightContainer}>
+          {normalizeIndent(code)}
+        </code>
+      </Tag>);
+    }
+}
+const code = trivialTemplateTag((source) => <Code code={source}/>);
+export { code, highlight };

package/components/code/highlight.css

@@ -0,0 +1,112 @@
+/*
+  Custom theme for highlight.js
+  Based on "idea.css" and "darcula.css" themes of hljs distributive
+*/
+
+.highlightContainer {
+  &:global(.hljs) {
+    display: block;
+    overflow-x: auto;
+
+    color: var(--ring-code-color);
+  }
+
+  & :global(.hljs-subst),
+  & :global(.hljs-title) {
+    color: var(--ring-code-color);
+
+    font-weight: normal;
+  }
+
+  & :global(.hljs-comment),
+  & :global(.hljs-quote) {
+    color: var(--ring-code-comment-color);
+
+    font-style: italic;
+  }
+
+  & :global(.hljs-meta) {
+    color: var(--ring-code-meta-color);
+  }
+
+  & :global(.hljs-tag) {
+    background: var(--ring-code-tag-background-color);
+    box-shadow: 0 1px var(--ring-code-tag-background-color), 0 -1px var(--ring-code-tag-background-color);
+  }
+
+  & :global(.hljs-section),
+  & :global(.hljs-literal),
+  & :global(.hljs-keyword),
+  & :global(.hljs-type) {
+    color: var(--ring-code-keyword-color);
+
+    font-weight: bold;
+  }
+
+  & :global(.hljs-name),
+  & :global(.hljs-selector-pseudo),
+  & :global(.hljs-selector-id),
+  & :global(.hljs-selector-class) {
+    color: var(--ring-code-tag-color);
+
+    font-weight: var(--ring-code-tag-font-weight);
+  }
+
+  & :global(.hljs-selector-tag) {
+    color: var(--ring-code-keyword-color);
+
+    font-weight: var(--ring-code-tag-font-weight);
+  }
+
+  & :global(.hljs-attr) {
+    color: var(--ring-code-field-color);
+
+    font-weight: bold;
+  }
+
+  & :global(.hljs-tag) > :global(.hljs-attr),
+  & :global(.hljs-attribute) {
+    color: var(--ring-code-attribute-color);
+
+    font-weight: var(--ring-code-tag-font-weight);
+  }
+
+  & :global(.hljs-number),
+  & :global(.hljs-regexp),
+  & :global(.hljs-link) {
+    color: var(--ring-code-number-color);
+
+    font-weight: normal;
+  }
+
+  & :global(.hljs-string) {
+    color: var(--ring-code-string-color);
+
+    font-weight: bold;
+  }
+
+  & :global(.hljs-doctag) {
+    text-decoration: underline;
+  }
+
+  & :global(.hljs-variable),
+  & :global(.hljs-template-variable) {
+    color: var(--ring-code-field-color);
+  }
+
+  & :global(.hljs-addition) {
+    background: var(--ring-code-addition-color);
+  }
+
+  & :global(.hljs-deletion) {
+    background: var(--ring-code-deletion-color);
+  }
+
+  & :global(.hljs-emphasis) {
+    font-style: italic;
+  }
+
+  & :global(.hljs-strong) {
+    font-weight: bold;
+  }
+}

package/components/compiler-ng/compiler-ng.js

@@ -0,0 +1,63 @@
+/**
+ * @name Compiler Ng
+ */
+import angular from 'angular';
+
+const angularModule = angular.module('Ring.compiler', []).
+  factory('rgCompiler', function rgCompilerFactory($q, $controller, $injector, $compile) {
+    return options => {
+      const template = options.template;
+      const controller = options.controller;
+      const controllerAs = options.controllerAs;
+      const resolve = angular.extend({}, options.resolve);
+      const bindToController = options.bindToController;
+
+      angular.forEach(resolve, (value, key) => {
+        if (angular.isString(value)) {
+          resolve[key] = $injector.get(value);
+        } else {
+          // Use comma expression to disable babel-plugin-angular-annotate
+          // Otherwise is fails with "Maximum call stack size exceeded" error
+          resolve[key] = $injector.invoke((0, value));
+        }
+      });
+
+      angular.extend(resolve, options.locals);
+
+      return $q.all(resolve).then(locals => {
+        const element = options.element || angular.element('<div>').
+          html(template.trim()).
+          contents();
+        const linkFn = $compile(element, locals.$transclude);
+        locals.$element = element;
+
+        return {
+          locals,
+          element,
+          link: function link(scope) {
+            locals.$scope = scope;
+
+            if (controller) {
+              const invokeCtrl = $controller(controller, locals, true);
+
+              if (bindToController) {
+                angular.extend(invokeCtrl.instance, locals);
+              }
+
+              const ctrl = invokeCtrl();
+
+              element.data('$ngControllerController', ctrl);
+
+              if (controllerAs) {
+                scope[controllerAs] = ctrl;
+              }
+            }
+
+            return linkFn(scope);
+          }
+        };
+      });
+    };
+  });
+
+export default angularModule.name;

package/components/compiler-ng/compiler-ng.stories.js

@@ -0,0 +1,32 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import CompilerNG from './compiler-ng';
+
+export default {
+  title: 'Legacy Angular/Compiler Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [CompilerNG]).run(function controller($rootScope, rgCompiler) {
+    const $scope = $rootScope.$new();
+    $scope.testValue = 'Hello from compiled node';
+
+    rgCompiler({template: '<div>{{testValue}}</div>'}).then(data => {
+      data.link($scope);
+      setTimeout(() => {
+        document.getElementById('for-compiled').appendChild(data.element[0]);
+      });
+    });
+  });
+
+  return '<div id="for-compiled"></div>';
+};
+
+basic.storyName = 'Compiler Ng';

package/components/compiler-ng/compiler-ng.test.js

@@ -0,0 +1,207 @@
+import 'angular';
+import 'angular-mocks';
+import compilerModuleName from './compiler-ng';
+
+describe('Compiler Ng', () => {
+
+
+  beforeEach(window.module(
+    compilerModuleName
+  ));
+
+
+  let $rootScope;
+  let $scope;
+  let runDigest;
+  beforeEach(window.inject(_$rootScope_ => {
+    $rootScope = _$rootScope_;
+    runDigest = () => {
+      $rootScope.$apply();
+    };
+
+    $scope = $rootScope.$new();
+  }));
+
+
+  let compiler;
+  beforeEach(window.inject(rgCompiler => {
+    compiler = rgCompiler;
+  }));
+
+
+  it('should compile template', () => {
+    $scope.text = 'Hello World';
+    let compileData = null;
+
+
+    compiler({
+      template: '<div>{{text}}</div>'
+    }).then(data => (compileData = data));
+    runDigest();
+
+
+    compileData.link($scope);
+    runDigest();
+
+    compileData.element[0].should.have.html($scope.text);
+  });
+
+
+  it('should allow pass controller', () => {
+    let compileData = null;
+    const text = 'Test';
+
+
+    compiler({
+      template: '<div>{{text}}</div>',
+      controller: [
+        '$scope',
+        scope => {
+          scope.text = text;
+        }]
+    }).then(data => (compileData = data));
+    runDigest();
+
+
+    compileData.link($scope);
+    runDigest();
+
+    compileData.element[0].should.have.html(text);
+  });
+
+
+  it('should allow use controllerAs syntax', () => {
+    let compileData = null;
+    const text = 'Test';
+
+
+    compiler({
+      template: '<div>{{myCtrl.text}}</div>',
+      controllerAs: 'myCtrl',
+      controller() {
+        this.text = text;
+      }
+    }).then(data => (compileData = data));
+    runDigest();
+
+
+    compileData.link($scope);
+    runDigest();
+
+    compileData.element[0].should.have.html(text);
+  });
+
+
+  it('should allow pass local dependencies', () => {
+    let compileData = null;
+    const text = 'Test';
+
+
+    compiler({
+      template: '<div>{{text}}</div>',
+      locals: {
+        textLocal: text
+      },
+      controller: [
+        '$scope',
+        'textLocal', (scope, textLocal) => {
+          scope.text = textLocal;
+        }]
+    }).then(data => (compileData = data));
+    runDigest();
+
+
+    compileData.link($scope);
+    runDigest();
+
+    compileData.element[0].should.have.html(text);
+  });
+
+
+  it('should allow pass asynchronous dependencies', () => {
+    let compileData = null;
+    const text = 'Test';
+
+
+    compiler({
+      template: '<div>{{text}}</div>',
+      resolve: {
+        textResolve($q) {
+          return $q.when(text);
+        }
+      },
+      controller: [
+        '$scope',
+        'textResolve', (scope, textResolve) => {
+          scope.text = textResolve;
+        }]
+    }).then(data => (compileData = data));
+    runDigest();
+
+
+    compileData.link($scope);
+    runDigest();
+
+    compileData.element[0].should.have.html(text);
+  });
+
+
+  it('should fail if resolve was not satisfied', () => {
+    const onCompileError = sandbox.stub();
+
+    compiler({
+      template: '<div/>',
+      resolve: {
+        rejectedResolve: $q => $q.reject()
+      }
+    }).catch(onCompileError);
+    runDigest();
+
+    onCompileError.should.have.been.called;
+  });
+
+
+  it('should allow use bindToController for resolve and locals', () => {
+    let compileData = null;
+    const text = 'Test';
+
+
+    compiler({
+      template: '<div>{{myCtrl.textResolve}}</div>',
+      resolve: {
+        textResolve($q) {
+          return $q.when(text);
+        }
+      },
+      bindToController: true,
+      controllerAs: 'myCtrl',
+      controller: window.angular.noop
+    }).then(data => (compileData = data));
+    runDigest();
+
+
+    compileData.link($scope);
+    runDigest();
+
+    compileData.element[0].should.have.html(text);
+  });
+
+
+  it('should allow use ngTransclude', () => {
+    let compileData = null;
+    const transcludeFn = sandbox.stub();
+
+
+    compiler({
+      template: '<ng-transclude>',
+      locals: {$transclude: transcludeFn}
+    }).then(data => (compileData = data));
+    runDigest();
+
+
+    compileData.link($scope);
+    runDigest();
+
+    transcludeFn.should.have.been.called;
+  });
+});

package/components/confirm/confirm.css

@@ -0,0 +1,9 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.description {
+  margin-top: unit;
+
+  font-size: var(--ring-font-size);
+}