@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/error-message/error-message.js

@@ -1,54 +1,35 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Icon from '../icon/icon';
-import {Size} from '../icon/icon__constants';
-
+import { Size } from '../icon/icon__constants';
 import styles from './error-message.css';
-
-
 /**
  * @name Error Message
  */
-
 export default class ErrorMessage extends Component {
-  static propTypes = {
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    code: PropTypes.string,
-    message: PropTypes.string,
-    description: PropTypes.string,
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
-
-  render() {
-    const {className, icon, code, message, description, children} = this.props;
-    const classes = classNames(styles.errorMessage, className);
-
-    return (
-      <div className={classes}>
-        {icon && (
-          <Icon
-            className={styles.icon}
-            glyph={icon}
-            size={Size.Size64}
-            suppressSizeWarning
-          />
-        )}
+    static propTypes = {
+        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+        code: PropTypes.string,
+        message: PropTypes.string,
+        description: PropTypes.string,
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { className, icon, code, message, description, children } = this.props;
+        const classes = classNames(styles.errorMessage, className);
+        return (<div className={classes}>
+        {icon && (<Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>)}
         <div className={styles.content}>
           <div className={styles.title}>
             {code && `${code}:`} {message}
           </div>
-          {description && (
-            <div className={styles.description}>
+          {description && (<div className={styles.description}>
               {description}
-            </div>
-          )}
+            </div>)}
           {children}
         </div>
-      </div>
-    );
-  }
+      </div>);
+    }
 }

package/components/error-message-ng/error-message-ng.examples.js

@@ -4,7 +4,7 @@ import frownIcon from '@jetbrains/icons/frown';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ErrorMessageNG from '@jetbrains/ring-ui/components/error-message-ng/error-message-ng';
+import ErrorMessageNG from './error-message-ng';
 
 export default {
   title: 'Legacy Angular/Error Message Ng',

package/components/error-page-ng/error-page-ng.examples.js

@@ -4,9 +4,9 @@ import AngularRoute from 'angular-route';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import authMock from '@jetbrains/ring-ui/components/auth-ng/auth-ng.mock';
+import authMock from '../auth-ng/auth-ng.mock';
 
-import ErrorPageNG from '@jetbrains/ring-ui/components/error-page-ng/error-page-ng';
+import ErrorPageNG from './error-page-ng';
 
 export default {
   title: 'Legacy Angular/Error Page Ng',

package/components/footer/footer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @name Footer
+ */
+import React, { HTMLAttributeAnchorTarget, ReactChild } from 'react';
+/**
+ * Return copyright string
+ * @param year {int}
+ * @returns {string}
+ */
+export declare function copyright(year: number): string;
+export interface FooterLinkItem {
+    copyright?: number | null | undefined;
+    label?: string | null | undefined;
+    url?: string | null | undefined;
+    target?: HTMLAttributeAnchorTarget | undefined;
+    title?: string | undefined;
+}
+declare type FooterItem = FooterLinkItem | ReactChild;
+declare type FooterItems = readonly (FooterItem | readonly FooterItem[])[];
+export interface FooterProps {
+    className?: string | null | undefined;
+    floating?: boolean | null | undefined;
+    left?: FooterItems | null | undefined;
+    center?: FooterItems | null | undefined;
+    right?: FooterItems | null | undefined;
+}
+declare const Footer: React.NamedExoticComponent<FooterProps>;
+export default Footer;

package/components/footer/footer.js

@@ -1,138 +1,96 @@
 /**
  * @name Footer
  */
-import React, {memo, isValidElement} from 'react';
+import React, { memo, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Link from '../link/link';
-
 import styles from './footer.css';
-
-const FooterColumn = memo(function FooterColumn({position, children}) {
-  const classes = classNames({
-    [styles.columnLeft]: position === 'left',
-    [styles.columnCenter]: position === 'center',
-    [styles.columnRight]: position === 'right'
-  });
-  return (
-    <div className={classes}>
+const FooterColumn = memo(function FooterColumn({ position, children }) {
+    const classes = classNames({
+        [styles.columnLeft]: position === 'left',
+        [styles.columnCenter]: position === 'center',
+        [styles.columnRight]: position === 'right'
+    });
+    return (<div className={classes}>
       <ul className={styles.columnItem}>
         {children}
       </ul>
-    </div>
-  );
+    </div>);
 });
 FooterColumn.propTypes = {
-  position: PropTypes.string,
-  children: PropTypes.node
+    position: PropTypes.oneOf(['left', 'center', 'right']).isRequired,
+    children: PropTypes.node
 };
-
 /**
  * Return copyright string
  * @param year {int}
  * @returns {string}
  */
 export function copyright(year) {
-  const currentYear = (new Date()).getUTCFullYear();
-  const ndash = '–';
-  let ret = 'Copyright © ';
-
-  if (year >= currentYear) {
-    ret += year;
-  } else {
-    ret += year + ndash + currentYear;
-  }
-
-  return ret;
+    const currentYear = (new Date()).getUTCFullYear();
+    const ndash = '–';
+    let ret = 'Copyright © ';
+    if (year >= currentYear) {
+        ret += year;
+    }
+    else {
+        ret += year + ndash + currentYear;
+    }
+    return ret;
 }
-
 /**
  * @constructor
  * @extends {ReactComponent}
  */
 const FooterLine = memo(function FooterLine(props) {
-  const items = Array.isArray(props.item) ? props.item : [props.item];
-
-  function renderItem(item) {
-    if (isValidElement(item)) {
-      return item;
-    }
-
-    const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
-
-    if (item.url) {
-      return (
-        <Link
-          href={item.url}
-          target={item.target}
-          key={item.url + item.title}
-          title={item.title}
-        >{element}</Link>
-      );
+    const items = Array.isArray(props.item) ? props.item : [props.item];
+    function renderItem(item) {
+        if (isValidElement(item) || typeof item !== 'object') {
+            return item;
+        }
+        const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
+        if (item.url) {
+            return (<Link href={item.url} target={item.target} key={item.url + item.title} title={item.title}>{element}</Link>);
+        }
+        return element;
     }
-
-    return element;
-  }
-
-  return (
-    <li className={styles.line}>
+    return (<li className={styles.line}>
       {items.map(renderItem)}
-    </li>
-  );
+    </li>);
 });
 FooterLine.propTypes = {
-  item: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.array,
-    PropTypes.string
-  ])
+    item: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.array,
+        PropTypes.string
+    ])
 };
-
-const Footer = memo(function Footer({floating, className, left, center, right}) {
-  function content(elements, position) {
-    if (!elements) {
-      return false;
-    }
-
-    return (
-      <FooterColumn
-        key={position}
-        position={position}
-      >
-        {elements.map((item, idx) => (
-          <FooterLine
+const Footer = memo(function Footer({ floating, className, left, center, right }) {
+    function content(elements, position) {
+        if (!elements) {
+            return false;
+        }
+        return (<FooterColumn key={position} position={position}>
+        {elements.map((item, idx) => (<FooterLine 
             // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            item={item}
-          />
-        ))}
-      </FooterColumn>
-    );
-  }
-
-  const classes = classNames(styles.footer, className, {
-    [styles.footerFloating]: floating
-  });
-
-  return (
-    <footer
-      className={classes}
-      data-test="ring-footer"
-    >{
-        [
-          content(left, 'left'),
-          content(center, 'center'),
-          content(right, 'right')
-        ]
-      }</footer>
-  );
+            key={idx} item={item}/>))}
+      </FooterColumn>);
+    }
+    const classes = classNames(styles.footer, className, {
+        [styles.footerFloating]: floating
+    });
+    return (<footer className={classes} data-test="ring-footer">{[
+            content(left, 'left'),
+            content(center, 'center'),
+            content(right, 'right')
+        ]}</footer>);
 });
 Footer.propTypes = {
-  className: PropTypes.string,
-  floating: PropTypes.bool,
-  left: PropTypes.array,
-  center: PropTypes.array,
-  right: PropTypes.array
+    className: PropTypes.string,
+    floating: PropTypes.bool,
+    left: PropTypes.array,
+    center: PropTypes.array,
+    right: PropTypes.array
 };
 export default Footer;

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

@@ -1,9 +1,9 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import '@jetbrains/ring-ui/components/link/link__legacy.css';
+import '../link/link__legacy.css';
 
-import FooterNG from '@jetbrains/ring-ui/components/footer-ng/footer-ng';
+import FooterNG from './footer-ng';
 
 export default {
   title: 'Legacy Angular/Footer Ng',

package/components/form/form.examples.js

@@ -2,11 +2,11 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import '@jetbrains/ring-ui/components/input/input-legacy.css';
-import '@jetbrains/ring-ui/components/form/form.css';
-import '@jetbrains/ring-ui/components/input-size/input-size.css';
+import '../input/input-legacy.css';
+import './form.css';
+import '../input-size/input-size.css';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
 export default {
   title: 'Style-only/Form',

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

@@ -2,15 +2,15 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import '@jetbrains/ring-ui/components/form/form.css';
+import '../form/form.css';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
-import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
-import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
+import ButtonNG from '../button-ng/button-ng';
+import SelectNG from '../select-ng/select-ng';
+import CheckboxNG from '../checkbox-ng/checkbox-ng';
 
-import InputNG from '@jetbrains/ring-ui/components/input-ng/input-ng';
+import InputNG from '../input-ng/input-ng';
 
-import FormNG from '@jetbrains/ring-ui/components/form-ng/form-ng';
+import FormNG from './form-ng';
 
 export default {
   title: 'Legacy Angular/Form Ng',

package/components/global/compose.d.ts

@@ -0,0 +1,7 @@
+declare function compose<A, R1, R2, R3, R4, R5, R6, R7>(f7: (a: R6) => R7, f6: (a: R5) => R6, f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R7;
+declare function compose<A, R1, R2, R3, R4, R5, R6>(f6: (a: R5) => R6, f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R6;
+declare function compose<A, R1, R2, R3, R4, R5>(f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R5;
+declare function compose<A, R1, R2, R3, R4>(f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R4;
+declare function compose<A, R1, R2, R3>(f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R3;
+declare function compose<A, R1, R2>(f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R2;
+export default compose;

package/components/global/compose.js

@@ -1,4 +1,4 @@
-const compose = (...funcs) =>
-  funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
-
+function compose(...funcs) {
+    return funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
+}
 export default compose;

package/components/global/composeRefs.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'react';
+declare const _default: <T>(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void;
+export default _default;

package/components/global/composeRefs.js

@@ -1,7 +1,8 @@
-export default (...refs) => value => refs.forEach(ref => {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref != null) {
-    ref.current = value;
-  }
+export default (...refs) => (value) => refs.forEach(ref => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        ref.current = value;
+    }
 });