@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/markdown/markdown.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import Code from '../code/code';
+import Link from '../link/link';
+
+import Markdown, {MarkdownProps} from './markdown';
+
+describe('Markdown', () => {
+  const shallowMarkdown = (props?: Partial<MarkdownProps>) => shallow(
+    <Markdown
+      source=""
+      {...props}
+    />
+  );
+  const mountMarkdown = (props?: Partial<MarkdownProps>) => mount(
+    <Markdown
+      source=""
+      {...props}
+    />
+  );
+
+  it('should wrap children with div', () => {
+    shallowMarkdown().should.have.tagName('div');
+  });
+
+  it('should use passed className', () => {
+    shallowMarkdown({className: 'test-class'}).should.have.className('test-class');
+  });
+
+  it('should convert links to ring Links', () => {
+    const wrapper = mountMarkdown({source: '[link](/)'});
+    wrapper.should.have.descendants(Link);
+  });
+
+  it('should convert inline code to ring Code', () => {
+    const wrapper = mountMarkdown({source: '`some(code)`'});
+    wrapper.should.have.descendants(Code);
+  });
+
+  it('should convert block code to ring Code', () => {
+    const wrapper = mountMarkdown({
+      source: `
+        \`\`\`
+        some(code)
+        \`\`\`
+      `
+    });
+    wrapper.should.have.descendants(Code);
+  });
+
+  it('should convert not finished code block to empty ring Code', () => {
+    const wrapper = mountMarkdown({
+      source: `
+        \`\`\`
+      `
+    });
+    wrapper.should.have.descendants(Code);
+  });
+});

package/components/markdown/markdown.tsx

@@ -0,0 +1,65 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import ReactMarkdown, {ReactMarkdownProps} from 'react-markdown';
+import classNames from 'classnames';
+import RemarkBreaks from 'remark-breaks';
+import RemarkGFM from 'remark-gfm';
+
+import normalizeIndent from '../global/normalize-indent';
+import trivialTemplateTag from '../global/trivial-template-tag';
+
+import Code from './code';
+import Link from './link';
+import Heading from './heading';
+import styles from './markdown.css';
+
+export interface BaseMarkdownProps {
+  source: string
+  inline?: boolean | null | undefined
+}
+
+export type MarkdownProps = ReactMarkdownProps & BaseMarkdownProps
+
+/**
+  * @name Markdown
+*/
+
+export default class Markdown extends PureComponent<MarkdownProps> {
+  static propTypes = {
+    inline: PropTypes.bool,
+    source: PropTypes.string,
+    className: PropTypes.string,
+    renderers: PropTypes.object,
+    plugins: PropTypes.array
+  };
+
+  render() {
+    const {className, renderers, inline, source, plugins = [], ...restProps} = this.props;
+
+    const classes = classNames(className, {
+      [styles.markdown]: !inline,
+      [styles.inline]: inline
+    });
+
+    return (
+      <ReactMarkdown
+        className={classes}
+        source={normalizeIndent(source)}
+        plugins={[RemarkBreaks, RemarkGFM, ...plugins] as ReactMarkdownProps['plugins']}
+        renderers={{
+          link: Link,
+          linkReference: Link,
+          code: Code,
+          inlineCode: Code,
+          heading: Heading,
+          ...renderers
+        }}
+        {...restProps}
+      />
+    );
+  }
+}
+
+const md = trivialTemplateTag(source => <Markdown {...{source}}/>);
+
+export {md};

package/components/message/message.examples.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import searchIcon from '@jetbrains/icons/search';
+
+import {Story} from '@storybook/react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Popup from '../popup/popup';
+import Icon from '../icon/icon';
+
+import Message, {MessageAttrs} from './message';
+
+const {Directions} = Popup.PopupProps;
+
+export default {
+  title: 'Components/Message',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    component: Message,
+    framework: 'react'
+  },
+  args: {
+    title: 'This is title',
+    direction: Directions.TOP_RIGHT,
+    children: 'This is long long long long long long long long long long long long long long long long long long description'
+  },
+  argTypes: {
+    onClose: {},
+    onDismiss: {}
+  }
+};
+
+export const basic: Story<MessageAttrs> = args => (
+  <div style={{padding: 200}} id="message-example">
+    <span>
+      Anchor
+      <Message {...args}/>
+    </span>
+  </div>
+);
+
+basic.storyName = 'basic';
+basic.args = {
+  tailOffset: 32
+};
+basic.parameters = {
+  actions: {argTypesRegex: '^onClose$'}
+};
+
+export const withOnDissmiss: Story<MessageAttrs> = args => (
+  <div style={{padding: 200}} id="message-example">
+    <span>
+      Anchor
+      <Message {...args}/>
+    </span>
+  </div>
+);
+
+withOnDissmiss.storyName = 'with onDissmiss';
+withOnDissmiss.args = {
+  tailOffset: 32
+};
+
+export const wishNarrowAnchor: Story<MessageAttrs> = args => (
+  <div style={{padding: 200}}>
+    <span>
+      <Icon glyph={searchIcon}/>
+      <Message {...args}/>
+    </span>
+  </div>
+);
+
+wishNarrowAnchor.storyName = 'with narrow anchor';
+wishNarrowAnchor.args = {
+  popupProps: {left: -8}
+};
+wishNarrowAnchor.parameters = {
+  actions: {argTypesRegex: null}
+};

package/components/message/message.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import Popup from '../popup/popup';
+
+import Message, {MessageAttrs} from './message';
+
+describe('Message', () => {
+  const shallowMessage = (props: MessageAttrs) => shallow(<Message {...props}/>);
+  const mountMessage = (props: MessageAttrs) => mount(<Message {...props}/>);
+
+  it('should create component', () => {
+    mountMessage({title: 'foo'}).should.have.type(Message);
+  });
+
+  it('should wrap children with Popup', () => {
+    shallowMessage({title: 'foo'}).should.have.type(Popup);
+  });
+
+  it('should use passed className', () => {
+    shallowMessage({
+      title: 'foo',
+      className: 'test-class'
+    }).should.have.className('test-class');
+  });
+});

package/components/message/message.tsx

@@ -0,0 +1,184 @@
+import React, {Component, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import gift from '@jetbrains/icons/gift';
+
+import Popup, {PopupAttrs} from '../popup/popup';
+import {Directions} from '../popup/popup.consts';
+import Icon, {IconType} from '../icon/icon';
+import Button, {ButtonAttrs} from '../button/button';
+
+import styles from './message.css';
+
+
+/**
+  * @name Message
+  */
+
+const UNIT = 8;
+
+const getTailOffsets = (offset: number) => ({
+  [Directions.BOTTOM_RIGHT]: {top: 0, left: offset - UNIT, transform: 'rotate(180deg)'},
+  [Directions.BOTTOM_LEFT]: {top: 0, right: offset - UNIT, transform: 'rotate(180deg)'},
+  [Directions.BOTTOM_CENTER]: {top: 0, left: offset - UNIT, transform: 'rotate(180deg)'},
+  [Directions.TOP_RIGHT]: {bottom: -UNIT + 1, left: offset - UNIT},
+  [Directions.TOP_LEFT]: {bottom: -UNIT + 1, right: offset - UNIT},
+  [Directions.TOP_CENTER]: {bottom: -UNIT + 1, left: offset - UNIT},
+  [Directions.RIGHT_TOP]: {bottom: offset - UNIT, left: -UNIT, transform: 'rotate(90deg)'},
+  [Directions.RIGHT_BOTTOM]: {top: offset, left: -UNIT, transform: 'rotate(90deg)'},
+  [Directions.RIGHT_CENTER]: {top: offset, left: -UNIT, transform: 'rotate(90deg)'},
+  [Directions.LEFT_TOP]: {bottom: offset - UNIT, right: -UNIT, transform: 'rotate(-90deg)'},
+  [Directions.LEFT_BOTTOM]: {top: offset, right: -UNIT, transform: 'rotate(-90deg)'},
+  [Directions.LEFT_CENTER]: {top: offset, right: -UNIT, transform: 'rotate(-90deg)'}
+});
+
+export interface MessageTranslations {
+  gotIt: string
+  dismiss: string
+}
+
+export interface MessageProps {
+  icon: string | IconType | null
+  directions: readonly Directions[]
+  translations: MessageTranslations
+  title?: string | null | undefined
+  children?: ReactNode
+  className?: string | null | undefined
+  tailClassName?: string | null | undefined
+  direction?: Directions | null | undefined
+  popupProps?: Partial<PopupAttrs> | null | undefined
+  buttonProps?: ButtonAttrs | null | undefined
+  tailOffset?: number | null | undefined
+  onClose?: (() => void) | undefined
+  onDismiss?: (() => void) | null | undefined
+}
+
+interface MessageState {
+  direction?: Directions
+}
+
+/**
+ * Displays a popup containing a message.
+ */
+export default class Message extends Component<MessageProps> {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    tailClassName: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+    directions: PropTypes.arrayOf(PropTypes.string),
+    direction: PropTypes.string,
+    popupProps: PropTypes.object,
+    buttonProps: PropTypes.object,
+    tailOffset: PropTypes.number,
+    onClose: PropTypes.func,
+    onDismiss: PropTypes.func,
+    translations: PropTypes.object
+  };
+
+  static defaultProps = {
+    icon: gift,
+    directions: [
+      Directions.TOP_RIGHT, Directions.TOP_LEFT, Directions.TOP_CENTER,
+      Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.BOTTOM_CENTER,
+      Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.RIGHT_CENTER,
+      Directions.LEFT_TOP, Directions.LEFT_BOTTOM, Directions.LEFT_CENTER
+    ],
+    translations: {
+      gotIt: 'Got it',
+      dismiss: 'Dismiss'
+    }
+  };
+
+  state: MessageState = {};
+
+  static Directions = Directions;
+  static PopupProps = Popup.PopupProps;
+
+  private _onDirectionChange = (direction: Directions) =>
+    this.setState({direction});
+
+  popup?: Popup | null;
+  node?: HTMLElement | null;
+  popupRef = (el: Popup | null) => {
+    this.popup = el;
+    this.node = this.popup?.node;
+  };
+
+  getTailOffset() {
+    const DEFAULT_OFFSET = 32;
+    const {popupProps} = this.props;
+    if (this.props.tailOffset != null) {
+      return this.props.tailOffset;
+    }
+
+    const anchor = popupProps?.anchorElement || this.popup?.parent;
+    if (!anchor) {
+      return DEFAULT_OFFSET;
+    }
+
+    const offset = Math.floor(anchor.offsetWidth / 2);
+
+    const isOpenedToRight = this.state.direction != null &&
+      [Directions.TOP_RIGHT, Directions.BOTTOM_RIGHT].includes(this.state.direction);
+    if (popupProps?.left && isOpenedToRight) {
+      return offset - popupProps?.left;
+    }
+
+    return offset;
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      tailClassName,
+      title,
+      icon,
+      popupProps,
+      buttonProps,
+      onClose,
+      onDismiss,
+      translations
+    } = this.props;
+    const classes = classNames(styles.message, className);
+    const tailClasses = classNames(styles.tail, tailClassName);
+    const popupDirections = this.props.direction
+      ? [this.props.direction]
+      : this.props.directions;
+
+    const {direction} = this.state;
+
+    return (
+      <Popup
+        ref={this.popupRef}
+        hidden={false}
+        directions={popupDirections}
+        className={classes}
+        offset={UNIT * 2}
+        onDirectionChange={this._onDirectionChange}
+        {...popupProps}
+      >
+        {direction && (
+          <div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>
+        )}
+
+        {icon && <Icon className={styles.icon} glyph={icon}/>}
+        <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>
+        {children && <div className={styles.description}>{children}</div>}
+        {(onClose || buttonProps) && (
+          <Button
+            className={styles.button}
+            onClick={onClose}
+            primary
+            {...buttonProps}
+          >{translations.gotIt}</Button>
+        )}
+        {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
+      </Popup>
+    );
+  }
+}
+
+export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>

package/components/old-browsers-message/old-browsers-message.examples.ts

@@ -0,0 +1,38 @@
+import './old-browsers-message.css';
+import {stop} from './old-browsers-message';
+
+export default {
+  title: 'Style-only/Old Browsers Message',
+
+  parameters: {
+    notes: `
+Displays a full-screen "Browser is unsupported" message if a JavaScript error occurs on page load in an old browser.
+
+Note: this script does not have any dependencies, you should include it directly.
+Once loaded, it attaches a global error handler. When your app finishes loading you should probably turn it off by calling oldBrowserMessage.stop();
+    `
+  }
+};
+
+export const basic = () => {
+  function triggerGlobalError() {
+    // @ts-expect-error testing a runtime error
+    Object.unknownMethodToTriggerOldBrowsersMessage();
+    setTimeout(stop);
+  }
+
+  setTimeout(triggerGlobalError);
+
+  return `
+      <div id="ring-old-browsers-message" class="ring-old-browsers-message ring-old-browsers-message_hidden" hidden>
+        <span id="ring-old-browsers-message__smile" class="ring-old-browsers-message__smile">{{ (&gt;_&lt;) }}</span>
+        <br/><br/>
+        <span id="ring-old-browsers-message__browser-message">This version of your browser is not <a href="https://documentation.link">supported</a>.<br/>
+        Try upgrading to the latest stable version.</span>
+        <span id="ring-old-browsers-message__error-message">Something went seriously wrong.</span>
+        <br/><br/>
+      </div>
+    `;
+};
+
+basic.storyName = 'Old Browsers Message';

package/components/old-browsers-message/old-browsers-message.ts

@@ -0,0 +1,103 @@
+import {isBrowserInWhiteList} from './white-list';
+
+/**
+ * @name Old Browsers Message
+ */
+
+/**
+  The list of versions which are definitely supported. "Browser is unsupported"
+  won't be displayed for those and higher versions even when a JS error occurs
+  on application start.
+ */
+
+let smileChanges = 0;
+const MAX_SMILE_CHANGES = 50;
+let previousWindowErrorHandler: OnErrorEventHandler;
+
+function changeSmileClickListener(event: Event) {
+  const eyes = ['O', 'o', '-', '>', '<'];
+  const target = (event.target || event.srcElement) as HTMLElement;
+
+  smileChanges++;
+
+  function rand(min: number, max: number) {
+    return Math.round((Math.random() * (max - min))) + min;
+  }
+
+  function getRandomEye() {
+    return eyes[rand(0, (eyes.length - 1))];
+  }
+
+  function getRandomSmile() {
+    if (smileChanges >= MAX_SMILE_CHANGES) {
+      return '\\\\ (x_x) //';
+    }
+
+    return `{{ (${getRandomEye()}_${getRandomEye()}) }}`;
+  }
+
+  target.innerHTML = getRandomSmile();
+}
+
+function attachSmileClickListener(smileNode: Node) {
+  if (smileNode.addEventListener) {
+    smileNode.addEventListener('click', changeSmileClickListener);
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+  } else if ((smileNode as any).attachEvent) {
+    (smileNode as any).attachEvent('onclick', changeSmileClickListener);
+    /* eslint-enable */
+  }
+}
+
+/**
+ * Listens to unhandled errors and displays passed node
+ */
+function startOldBrowsersDetector(onOldBrowserDetected?: () => void) {
+  previousWindowErrorHandler = window.onerror;
+
+  window.onerror = function oldBrowsersMessageShower(errorMsg, url, lineNumber) {
+    if (onOldBrowserDetected) {
+      onOldBrowserDetected();
+    }
+
+    if (previousWindowErrorHandler) {
+      return previousWindowErrorHandler(errorMsg, url, lineNumber);
+    }
+
+    return false;
+  };
+}
+
+function stopOldBrowserDetector() {
+  window.onerror = previousWindowErrorHandler;
+}
+
+
+//Start javascript error detection
+startOldBrowsersDetector(() => {
+  const oldBrowsersMessageContainer = document.getElementById('ring-old-browsers-message');
+  const browserMessage = document.getElementById('ring-old-browsers-message__browser-message');
+  const errorMessage = document.getElementById('ring-old-browsers-message__error-message');
+  const smileNode = document.getElementById('ring-old-browsers-message__smile');
+
+  if (browserMessage != null && errorMessage != null) {
+    if (isBrowserInWhiteList()) {
+      browserMessage.style.display = 'none';
+      errorMessage.style.display = 'block';
+    } else {
+      browserMessage.style.display = 'block';
+      errorMessage.style.display = 'none';
+    }
+  }
+
+  if (oldBrowsersMessageContainer) {
+    oldBrowsersMessageContainer.hidden = false;
+    oldBrowsersMessageContainer.style.display = 'block';
+  }
+
+  if (smileNode) {
+    attachSmileClickListener(smileNode);
+  }
+});
+
+export {stopOldBrowserDetector as stop};

package/components/old-browsers-message/white-list.ts

@@ -0,0 +1,33 @@
+import sniffer from '../global/sniffer';
+
+const MAJOR_VERSION_INDEX = 0;
+
+declare const SUPPORTED_BROWSERS: string[] | undefined;
+
+/**
+ * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
+ */
+if (!SUPPORTED_BROWSERS) {
+  // eslint-disable-next-line no-console
+  console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
+}
+const SUPPORTED = SUPPORTED_BROWSERS || [];
+
+const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
+
+export const WHITE_LIST = SUPPORTED.
+  reduce((acc: Record<string, number>, item) => {
+    const [, browserName, version] = item.match(/(\S+)\s(\S+)/) ?? [];
+    if (!WHITE_LISTED_BROWSERS.includes(browserName)) {
+      return acc;
+    }
+
+    return {
+      ...acc,
+      [browserName]: parseInt(version, 10)
+    };
+  }, {});
+
+export function isBrowserInWhiteList() {
+  return sniffer.browser.version[MAJOR_VERSION_INDEX] >= WHITE_LIST[sniffer.browser.name];
+}