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

package/components/checkbox/checkbox.examples.tsx

@@ -0,0 +1,67 @@
+import React, {Fragment} from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Checkbox, {CheckboxProps} from './checkbox';
+
+export default {
+  title: 'Components/Checkbox',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    component: Checkbox,
+    framework: 'react'
+  }
+};
+
+export const controls = (args: CheckboxProps) => <Checkbox {...args}/>;
+controls.args = {label: 'label'};
+controls.parameters = {hermione: {skip: true}};
+
+export const basic = () => (
+  <Fragment>
+    <h1>Base Examples</h1>
+    <div id="checkbox-base">
+      <Checkbox label="One"/>
+      <br/>
+      <Checkbox label="Two" defaultChecked/>
+      <br/>
+      <Checkbox label="Indeterminate" indeterminate/>
+      <br/>
+      <Checkbox label="Indeterminate checked" indeterminate defaultChecked/>
+    </div>
+
+    <h1>Disabled checkboxes</h1>
+    <div id="checkbox-disabled">
+      <Checkbox label="One" disabled/>
+      <br/>
+      <Checkbox label="Two" disabled defaultChecked/>
+      <br/>
+      <Checkbox label="Indeterminate" disabled indeterminate/>
+      <br/>
+      <Checkbox label="Indeterminate checked" disabled indeterminate defaultChecked/>
+    </div>
+
+    <h1>Examples with outer styles</h1>
+    <div id="checkbox-additional">
+      <div style={{lineHeight: '60px'}}>
+        <Checkbox defaultChecked>This checkbox is inside a div with large line-height.</Checkbox>
+        <span>This text should be aligned on same line with checkbox label</span>
+      </div>
+      <div style={{lineHeight: '6px'}}>
+        <Checkbox defaultChecked>This checkbox is inside a div with small line-height.</Checkbox>
+        <span>This text should be aligned on same line with checkbox label</span>
+      </div>
+      <div style={{lineHeight: '48px', fontSize: '40px'}}>
+        <Checkbox defaultChecked>This checkbox is inside a div with large font-size.</Checkbox>
+        <span>This text should be aligned on same line with checkbox label</span>
+      </div>
+      <div style={{lineHeight: '6px', fontSize: '4px'}}>
+        <Checkbox defaultChecked>This checkbox is inside a div with small font-size.</Checkbox>
+        <span>This text should be aligned on same line with checkbox label</span>
+      </div>
+    </div>
+  </Fragment>
+);
+
+basic.storyName = 'basic';

package/components/checkbox/checkbox.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {Simulate} from 'react-dom/test-utils';
+import {shallow, mount} from 'enzyme';
+
+import Checkbox, {CheckboxProps} from './checkbox';
+
+type CheckboxAttributes = JSX.LibraryManagedAttributes<typeof Checkbox, CheckboxProps>
+
+describe('Checkbox', () => {
+  const shallowCheckbox = (props?: CheckboxAttributes) => shallow(<Checkbox {...props}/>);
+  const mountCheckbox = (props?: CheckboxAttributes) => mount<Checkbox>(<Checkbox {...props}/>);
+
+  it('should create component', () => {
+    shallowCheckbox().should.exist;
+  });
+
+  it('should render checkbox', () => {
+    const checkbox = mountCheckbox().instance();
+    should.exist(checkbox.input);
+    checkbox.input?.should.have.property('type', 'checkbox');
+  });
+
+  it('should set name', () => {
+    const checkbox = mountCheckbox({name: 'test'}).instance();
+
+    should.exist(checkbox.input);
+    checkbox.input?.should.have.property('name', 'test');
+  });
+
+  it('should call handler for click event', () => {
+    const clickHandler = sandbox.stub();
+
+    const checkbox = mountCheckbox({onClick: clickHandler}).instance();
+    checkbox.input && Simulate.click(checkbox.input);
+
+    clickHandler.should.have.been.called;
+  });
+
+  it('should not call handler on change event if disabled', () => {
+    const onChange = sandbox.stub();
+
+    const checkbox = shallowCheckbox({
+      disabled: true,
+      onChange
+    });
+
+    checkbox.simulate('click');
+    onChange.should.have.not.been.called;
+  });
+
+  it('should be unchecked by default', () => {
+    const checkbox = shallowCheckbox();
+
+    checkbox.should.not.be.checked();
+  });
+
+  it('should check control', () => {
+    const checkbox = mountCheckbox({defaultChecked: true}).instance();
+
+    should.exist(checkbox.input);
+    checkbox.input?.should.be.checked;
+  });
+
+  it('should be disabled', () => {
+    const checkbox = mountCheckbox({
+      disabled: true
+    }).instance();
+
+    should.exist(checkbox.input);
+    checkbox.input?.should.be.disabled;
+  });
+
+  it('should check control on change event', () => {
+    const eventMock = {
+      target: {
+        checked: true
+      } as HTMLInputElement
+    };
+    const checkbox = mountCheckbox().instance();
+
+    should.exist(checkbox.input);
+    checkbox.input && Simulate.change(checkbox.input, eventMock);
+    checkbox.input?.should.be.checked;
+  });
+});

package/components/checkbox/checkbox.tsx

@@ -0,0 +1,114 @@
+import React, {PureComponent, InputHTMLAttributes, CSSProperties} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import checkmarkIcon from '@jetbrains/icons/checkmark';
+import minusIcon from '@jetbrains/icons/remove-10px';
+
+import Icon from '../icon/icon';
+
+import styles from './checkbox.css';
+
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string | null | undefined
+  containerClassName?: string | null | undefined
+  containerStyle?: CSSProperties | undefined
+  cellClassName?: string | null | undefined
+  labelClassName?: string | null | undefined
+  indeterminate: boolean
+}
+
+/**
+ * @name Checkbox
+ */
+/**
+ * Displays a checkbox.
+ */
+export default class Checkbox extends PureComponent<CheckboxProps> {
+  static propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    className: PropTypes.string,
+    containerClassName: PropTypes.string,
+    containerStyle: PropTypes.object,
+    cellClassName: PropTypes.string,
+    labelClassName: PropTypes.string,
+    defaultChecked: PropTypes.bool,
+    checked: PropTypes.bool,
+    indeterminate: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+    children: PropTypes.node
+  };
+
+  static defaultProps = {
+    indeterminate: false
+  };
+
+  componentDidMount() {
+    if (this.input != null) {
+      this.input.indeterminate = this.props.indeterminate;
+    }
+  }
+
+  componentDidUpdate(prevProps: CheckboxProps) {
+    const {indeterminate} = this.props;
+    if (this.input != null && indeterminate !== prevProps.indeterminate) {
+      this.input.indeterminate = this.props.indeterminate;
+    }
+  }
+
+  input?: HTMLInputElement | null;
+
+  inputRef = (el: HTMLInputElement | null) => {
+    if (el != null) {
+      el.indeterminate = this.props.indeterminate;
+    }
+    this.input = el;
+  };
+
+  render() {
+    const {
+      children,
+      label,
+      className,
+      containerClassName,
+      containerStyle,
+      cellClassName,
+      labelClassName,
+      indeterminate,
+      ...restProps
+    } = this.props;
+
+    const classes = classNames(styles.input, className);
+    const containerClasses = classNames(styles.checkbox, containerClassName);
+    const cellClasses = classNames(styles.cell, cellClassName);
+    const labelClasses = classNames(styles.label, labelClassName);
+
+    return (
+      <label
+        className={containerClasses}
+        style={containerStyle}
+        data-test="ring-checkbox"
+      >
+        <input
+          {...restProps}
+          data-checked={restProps.checked}
+          ref={this.inputRef}
+          type="checkbox"
+          className={classes}
+        />
+        <span className={cellClasses}>
+          <Icon
+            glyph={checkmarkIcon}
+            className={styles.check}
+          />
+          <Icon
+            glyph={minusIcon}
+            className={styles.minus}
+          />
+        </span>
+        <span className={labelClasses}>{label || children}</span>
+      </label>
+    );
+  }
+}

package/components/checkbox-ng/checkbox-ng.examples.js

@@ -3,9 +3,9 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
-import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
+import CheckboxNG from './checkbox-ng';
 
 export default {
   title: 'Legacy Angular/Checkbox Ng',

package/components/code/code.examples.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Code, {code, highlight} from './code';
+
+highlight.registerLanguage('javascript', javascript);
+highlight.registerLanguage('xml', xml);
+
+export default {
+  title: 'Components/Code',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: `
+Displays a block of code. Syntax highlighting is loaded lazily using [dynamic imports](https://webpack.js.org/api/module-methods/#import-1).
+
+You can also preload the languages you need:
+
+\`import {highlight} from '../code/code'\`
+
+\`import 1c from 'highlight.js/lib/languages/1c';\`
+
+\`highlight.registerLanguage('1c', 1c);\`
+    `
+  }
+};
+
+export const basic = () => (
+  <Code
+    code={`
+          import React, {Component} from 'react';
+          import ChildComponent from './child-component';
+
+          const MyComponent = () => (
+            <div className="class">
+              <ChildComponent prop="value" />
+            </div>
+          );
+        `}
+  />
+);
+
+basic.storyName = 'basic';
+
+export const lazy = () => (
+  <Code
+    language="actionscript"
+    code={`
+      package org.example.dummy {
+          import org.dummy.*;
+
+          /*define package inline interface*/
+          public interface IFooBarzable {
+              public function foo(... pairs):Array;
+          }
+
+          public class FooBar implements IFooBarzable {
+              static private var cnt:uint = 0;
+              private var bar:String;
+
+              //constructor
+              public function TestBar(bar:String):void {
+                  bar = bar;
+                  ++cnt;
+              }
+
+              public function foo(... pairs):Array {
+                  pairs.push(bar);
+                  return pairs;
+              }
+          }
+      }
+    `}
+  />
+);
+
+export const taggedTemplate = () =>
+  code`
+      import React from 'react';
+      import {code} from '../code/code';
+
+      const el = code\`some('js')\`;
+    `;
+
+taggedTemplate.storyName = 'tagged template';
+
+taggedTemplate.parameters = {
+  hermione: {skip: true}
+};

package/components/code/code.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+import css from 'highlight.js/lib/languages/css';
+import javascript from 'highlight.js/lib/languages/javascript';
+import xml from 'highlight.js/lib/languages/xml';
+
+import Code, {CodeProps, highlight} from './code';
+
+highlight.registerLanguage('css', css);
+highlight.registerLanguage('javascript', javascript);
+highlight.registerLanguage('xml', xml);
+
+type CodeAttributes = JSX.LibraryManagedAttributes<typeof Code, CodeProps>
+
+describe('Code', () => {
+  const shallowCode = (props?: Omit<CodeAttributes, 'code'> & Partial<Pick<CodeAttributes, 'code'>>) => shallow(
+    <Code
+      code=""
+      {...props}
+    />,
+    {disableLifecycleMethods: true}
+  );
+  const mountCode = (props?: CodeAttributes) => mount(
+    <Code
+      code=""
+      {...props}
+    />
+  );
+
+  it('should wrap children with pre', () => {
+    shallowCode().should.have.tagName('pre');
+  });
+
+  it('should use passed className', () => {
+    shallowCode({className: 'test-class'}).should.have.className('test-class');
+  });
+
+  it('should add passed language to class attribute', () => {
+    shallowCode({language: 'js'}).should.have.className('js');
+  });
+
+  it('should detect javascript/JSX', () => {
+    const wrapper = mountCode({
+      code: `
+        import React, {Component} from 'react';
+        import ChildComponent from './child-component';
+
+        const MyComponent = () => (
+          <div className="class">
+            <ChildComponent prop="value" />
+          </div>
+        );
+      `
+    });
+
+    // child tree is rendered with highlight.js, so it's unaccessible by enzyme
+    wrapper.getDOMNode().should.contain('.javascript');
+    wrapper.getDOMNode().should.contain('.xml');
+  });
+
+  it('should detect CSS', () => {
+    const wrapper = mountCode({
+      code: `
+        .className {
+          display: inline-block;
+          font-size: 18px;
+        }
+      `
+    });
+    wrapper.getDOMNode().should.contain('.css');
+  });
+
+  it('should detect HTML', () => {
+    const wrapper = mountCode({
+      code: `
+        <body>
+          <div id="app"></div>
+        </body>
+      `
+    });
+    wrapper.getDOMNode().should.contain('.xml');
+  });
+
+  it('should parse and highlight the code', () => {
+    const wrapper = mountCode({
+      code: '"foo"'
+    });
+    const token = wrapper.getDOMNode().querySelector('.hljs-string');
+    should.exist(token?.textContent);
+    token?.textContent?.should.equal('"foo"');
+  });
+
+  it('should parse and highlight the code after props update', () => {
+    const wrapper = mountCode({
+      code: '"foo"'
+    });
+    wrapper.setProps({
+      code: '"bar"'
+    });
+    const token = wrapper.getDOMNode().querySelector('.hljs-string');
+    should.exist(token?.textContent);
+    token?.textContent?.should.equal('"bar"');
+  });
+});

package/components/code/code.tsx

@@ -0,0 +1,128 @@
+import React, {PureComponent, Ref} 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: string) => {
+  const languageExports = await import(
+    /* webpackChunkName: "highlight-[request]" */
+    `highlight.js/lib/languages/${language}`
+  );
+  highlight.registerLanguage(language, languageExports.default);
+});
+
+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.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?: HTMLElement | null;
+
+  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: HTMLElement | null) => {
+      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}>
+        <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: string) => <Code code={source}/>);
+
+export {code, highlight};

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

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import CompilerNG from '@jetbrains/ring-ui/components/compiler-ng/compiler-ng';
+import CompilerNG from './compiler-ng';
 
 export default {
   title: 'Legacy Angular/Compiler Ng',