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

package/components/error-message/error-message.examples.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import frownIcon from '@jetbrains/icons/frown';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Link from '../link/link';
+
+import ErrorMessage from './error-message';
+
+export default {
+  title: 'Components/Error Message',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes:
+      'Displays an error message centered both vertically and horizontally inside the parent container.'
+  }
+};
+
+export const basic = () => (
+  <div style={{height: '300px'}}>
+    <ErrorMessage
+      icon={frownIcon}
+      code="Disconnected"
+      message="no answer from server."
+      description="Please try again soon."
+    >
+      <Link href="/">Go to the home page</Link>
+    </ErrorMessage>
+  </div>
+);
+
+basic.storyName = 'Error Message';

package/components/error-message/error-message.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import ErrorMessage, {ErrorMessageProps} from './error-message';
+
+describe('Error Message', () => {
+  const shallowErrorMessage = (props?: ErrorMessageProps) => shallow(<ErrorMessage {...props}/>);
+  const mountErrorMessage = (props?: ErrorMessageProps) => mount(<ErrorMessage {...props}/>);
+
+  it('should create component', () => {
+    mountErrorMessage().should.have.type(ErrorMessage);
+  });
+
+  it('should wrap children with div', () => {
+    shallowErrorMessage().should.have.tagName('div');
+  });
+
+  it('should use passed className', () => {
+    shallowErrorMessage({className: 'test-class'}).should.have.className('test-class');
+  });
+});

package/components/error-message/error-message.tsx

@@ -0,0 +1,62 @@
+import React, {Component, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Icon, {IconType} from '../icon/icon';
+import {Size} from '../icon/icon__constants';
+
+import styles from './error-message.css';
+
+export interface ErrorMessageProps {
+  children?: ReactNode
+  icon?: string | IconType | null | undefined
+  code?: string | null | undefined
+  message?: string | null | undefined
+  description?: string | null | undefined
+  className?: string | null | undefined
+}
+
+/**
+ * @name Error Message
+ */
+
+export default class ErrorMessage extends Component<ErrorMessageProps> {
+  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>
+          )}
+          {children}
+        </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.examples.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Footer from './footer';
+
+export default {
+  title: 'Components/Footer',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    notes: `
+Displays a configurable page footer.
+
+A footer consists of three sections, each optional:
+
+- left
+- center
+- right
+    `
+  }
+};
+
+export const basic = () => (
+  <Footer
+    className="stuff"
+    left={[
+      [
+        {
+          url: 'http://www.jetbrains.com/teamcity/?fromserver',
+          label: 'TeamCity'
+        },
+        ' by JetBrains'
+      ],
+      'Enterprise 8.0.2 EAP (build 27448)'
+    ]}
+    center={[
+      [{copyright: 2000, label: ' JetBrains'}],
+      {
+        url: 'https://teamcity.jetbrains.com/showAgreement.html',
+        label: 'License agreement',
+        title: 'read me!',
+        target: '_blank'
+      }
+    ]}
+    right={[
+      {
+        url:
+          'http://www.jetbrains.com/teamcity/feedback?source=footer&version=8.0.3%20(build%2027531)&build=27531&mode=ent',
+        label: 'Feedback'
+      }
+    ]}
+  />
+);
+
+basic.storyName = 'Footer';

package/components/footer/footer.test.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import React from 'react';
+import {shallow, mount, render} from 'enzyme';
+
+import Footer, {FooterProps} from './footer';
+
+describe('Footer', () => {
+  const shallowFooter = (props?: FooterProps) => shallow(<Footer {...props}/>);
+  const mountFooter = (props?: FooterProps) => mount(<Footer {...props}/>);
+  const renderFooter = (props?: FooterProps) => render(<Footer {...props}/>);
+
+  it('should create component', () => {
+    shallowFooter().should.exist;
+  });
+
+  it('should be empty by default', () => {
+    const wrapper = shallowFooter();
+    wrapper.should.have.tagName('footer');
+    wrapper.should.be.blank();
+  });
+
+  describe('should render items', () => {
+    it('should add given class', () => {
+      const wrapper = shallowFooter({className: 'myClass'});
+
+      wrapper.should.have.className('myClass');
+    });
+
+    it('add left column one line', () => {
+      const wrapper = renderFooter({left: ['One Line']});
+      wrapper.should.have.text('One Line');
+      wrapper.find('li').should.have.text('One Line');
+    });
+
+    it('add left column two lines', () => {
+      const wrapper = renderFooter({left: ['One Line', 'Second Line']});
+      wrapper.should.have.exactly(2).descendants('li');
+    });
+
+    it('add three columns two lines', () => {
+      const wrapper = mountFooter({
+        left: ['One Line', 'Second Line'],
+        center: ['One Line', 'Second Line'],
+        right: ['One Line', 'Second Line']
+      });
+
+      wrapper.should.have.exactly(3).descendants('ul');
+      const uls = wrapper.find('ul');
+
+      uls.forEach(ul => ul.should.have.exactly(2).descendants('li'));
+    });
+
+  });
+
+  it('should render copyright', () => {
+    const wrapper = renderFooter({
+      left: [
+        {copyright: 2010, label: ' JetBrains'}
+      ]
+    });
+
+    wrapper.find('li').should.contain.text(`Copyright © 2010–${(new Date()).getFullYear()} JetBrains`);
+  });
+
+  it('should render link', () => {
+    const wrapper = renderFooter({
+      left: [
+        {url: 'http://jetbrains.com', label: 'JetBrains', title: 'JetBrains Official Site'}
+      ]
+    });
+
+    const link = wrapper.find('a');
+
+    link.should.have.text('JetBrains');
+    link.should.have.attr('href', 'http://jetbrains.com');
+    link.should.have.attr('title', 'JetBrains Official Site');
+  });
+});

package/components/footer/footer.tsx

@@ -0,0 +1,175 @@
+/**
+ * @name Footer
+ */
+import React, {
+  memo,
+  isValidElement,
+  ReactNode,
+  ComponentType,
+  HTMLAttributeAnchorTarget, ReactChild
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Link from '../link/link';
+
+import styles from './footer.css';
+
+type Position = 'left' | 'center' | 'right'
+
+interface FooterColumnProps {
+  position: Position
+  children: ReactNode
+}
+
+const FooterColumn = memo(function FooterColumn({position, children}: FooterColumnProps) {
+  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>
+  );
+});
+(FooterColumn as ComponentType<FooterColumnProps>).propTypes = {
+  position: PropTypes.oneOf(['left', 'center', 'right'] as const).isRequired,
+  children: PropTypes.node
+};
+
+/**
+ * Return copyright string
+ * @param year {int}
+ * @returns {string}
+ */
+export function copyright(year: number) {
+  const currentYear = (new Date()).getUTCFullYear();
+  const ndash = '–';
+  let ret = 'Copyright © ';
+
+  if (year >= currentYear) {
+    ret += year;
+  } else {
+    ret += year + ndash + currentYear;
+  }
+
+  return ret;
+}
+
+export interface FooterLinkItem {
+  copyright?: number | null | undefined
+  label?: string | null | undefined
+  url?: string | null | undefined
+  target?: HTMLAttributeAnchorTarget | undefined
+  title?: string | undefined
+}
+
+type FooterItem = FooterLinkItem | ReactChild
+
+interface FooterLineProps {
+  item: FooterItem | readonly FooterItem[]
+}
+
+/**
+ * @constructor
+ * @extends {ReactComponent}
+ */
+const FooterLine = memo(function FooterLine(props: FooterLineProps) {
+  const items = Array.isArray(props.item) ? props.item : [props.item];
+
+  function renderItem(item: FooterItem) {
+    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 (
+    <li className={styles.line}>
+      {items.map(renderItem)}
+    </li>
+  );
+});
+(FooterLine as unknown as ComponentType<unknown>).propTypes = {
+  item: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array,
+    PropTypes.string
+  ])
+};
+
+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
+}
+
+const Footer = memo(function Footer({floating, className, left, center, right}: FooterProps) {
+  function content(elements: FooterItems | null | undefined, position: 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>
+  );
+});
+(Footer as ComponentType<FooterProps>).propTypes = {
+  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.ts

@@ -0,0 +1,41 @@
+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
+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
+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
+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
+function compose<A, R1, R2, R3>(
+  f3: (a: R2) => R3,
+  f2: (a: R1) => R2,
+  f1: (a: A) => R1,
+): (a: A) => R3
+function compose<A, R1, R2>(f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R2
+function compose<A>(...funcs: Array<(a: A) => A>): (a: A) => A {
+  return funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
+}
+
+export default compose;

package/components/global/composeRefs.ts

@@ -0,0 +1,9 @@
+import {Ref, MutableRefObject} from 'react';
+
+export default <T>(...refs: (Ref<T> | undefined)[]) => (value: T | null) => refs.forEach(ref => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref != null) {
+    (ref as MutableRefObject<T | null>).current = value;
+  }
+});

package/components/global/conic-gradient.ts

@@ -0,0 +1,43 @@
+import 'conic-gradient';
+
+import {RadialGradientMask} from './radial-gradient-mask';
+
+import memoize from './memoize';
+import supportsCss from './supports-css';
+
+
+export interface ConicGradientConfig {
+  stops: string
+  size?: number | null | undefined
+}
+
+declare class ConicGradient {
+  constructor(config: ConicGradientConfig)
+  svg: string;
+}
+
+const conicGradient = memoize(({stops, size}: ConicGradientConfig) => (
+  supportsCss('background-image: conic-gradient(white, black)')
+    ? `conic-gradient(${stops})`
+    : new ConicGradient({stops, size})
+));
+
+export default (stops: ConicGradientConfig) => conicGradient(stops).toString();
+
+export const conicGradientWithMask = (mask: RadialGradientMask, stops: string, size?: number) => {
+  const gradient = conicGradient({stops, size});
+
+  if (!mask.supports && gradient instanceof ConicGradient) {
+    Object.defineProperty(gradient, 'svg', {
+      value: gradient.svg.replace('<image ', `
+        ${mask.svgDefs}
+        <image mask="url(#${mask.maskId})" `)
+    });
+  }
+
+  return {
+    ...mask.css,
+    'background-image': gradient.toString()
+  };
+};
+

package/components/global/create-stateful-context.tsx

@@ -0,0 +1,55 @@
+import React, {createContext, memo, useContext, useEffect, useState, ReactNode} from 'react';
+import PropTypes from 'prop-types';
+
+type Update<T> = (value: T) => void
+export interface ProviderProps {
+  children: ReactNode
+}
+export interface UpdaterProps<T> {
+  value: T
+  skipUpdate?: boolean
+}
+
+export default function createStatefulContext<T>(initialValue: T, name = '') {
+  const ValueContext = createContext(initialValue);
+  const UpdateContext = createContext<Update<T>>(() => {});
+
+  function Provider({children}: ProviderProps) {
+    const [value, update] = useState(initialValue);
+    return (
+      <ValueContext.Provider value={value}>
+        <UpdateContext.Provider value={update}>
+          {children}
+        </UpdateContext.Provider>
+      </ValueContext.Provider>
+    );
+  }
+  Provider.propTypes = {
+    children: PropTypes.node
+  };
+  Provider.displayName = `${name}Provider`;
+
+  function useUpdate(value: T, skipUpdate?: boolean) {
+    const update = useContext(UpdateContext);
+    useEffect(() => {
+      if (!skipUpdate) {
+        update(value);
+      }
+    }, [update, value, skipUpdate]);
+  }
+
+  function Updater({value, skipUpdate}: UpdaterProps<T>) {
+    useUpdate(value, skipUpdate);
+
+    return null;
+  }
+  Updater.displayName = `${name}Updater`;
+
+  return {
+    ValueContext,
+    UpdateContext,
+    Provider,
+    useUpdate,
+    Updater: memo(Updater)
+  };
+}

package/components/global/data-tests.ts

@@ -0,0 +1,23 @@
+
+type AttrsMap = Record<string, boolean | null | undefined>
+
+function expandMap(attrsMap: AttrsMap) {
+  return Object.entries(attrsMap).
+    reduce<string[]>((result, [key, value]) => (value ? [...result, key] : result), []);
+}
+
+export default function joinDataTestAttributes(
+  ...attrs: Array<string | AttrsMap | null | undefined>
+) {
+  return attrs.
+    reduce<string[]>((result, attr) => {
+      if (!attr) {
+        return result;
+      }
+      if (typeof attr === 'object') {
+        return [...result, ...expandMap(attr)];
+      }
+      return [...result, attr];
+    }, []).
+    join(' ');
+}