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

package/components/progress-bar/progress-bar.tsx

@@ -0,0 +1,115 @@
+import React, {HTMLAttributes, PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Theme from '../global/theme';
+
+import styles from './progress-bar.css';
+
+export interface ProgressBarProps extends HTMLAttributes<HTMLElement>{
+  max: number
+  value: number
+  theme: Theme
+  label: string
+  global?: boolean | null | undefined
+}
+
+/**
+ * @name Progress Bar
+ */
+export default class ProgressBar extends PureComponent<ProgressBarProps> {
+  /**
+   * @param {number} value The progress task value
+   * @param {number} max The maximum value
+   * @return {number} The progress task value in percents
+   * @private
+   */
+  static toPercent(value: number, max: number) {
+    const HUNDRED_PERCENT = 100;
+    const percents = (value * HUNDRED_PERCENT) / max;
+    return percents > HUNDRED_PERCENT ? HUNDRED_PERCENT : percents;
+  }
+
+  static propTypes = {
+    label: PropTypes.string,
+    theme: PropTypes.string,
+
+    /**
+     * Sets the ring-progress-bar_global class to position the progress bar on top of the screen.
+     * Should be placed directly inside body, will be positioned right below .ring-header
+     * if placed adjacent to it.
+     * @type {boolean}
+     */
+    global: PropTypes.bool,
+
+    /**
+     * Custom class
+     * @type {string}
+     */
+    className: PropTypes.string,
+
+    style: PropTypes.object,
+
+    /**
+     * A floating point number that specifies minimum completion rate for a task to be considered
+     * complete. Default value is 1.0.
+     * @type {number}
+     */
+    max: PropTypes.number,
+
+    /**
+     * A floating point number that specifies current task completion rate.
+     * @type {number}
+     */
+    value: PropTypes.number
+  };
+
+  static defaultProps = {
+    max: 1.0,
+    value: 0,
+    theme: Theme.LIGHT,
+    label: 'Progress'
+  };
+
+  progressbarWrapper?: (HTMLElement | null);
+  progressbarWrapperRef = (el: HTMLElement | null) => {
+    this.progressbarWrapper = el;
+  };
+
+  progressbar?: (HTMLElement | null);
+  progressbarRef = (el: HTMLElement | null) => {
+    this.progressbar = el;
+  };
+
+  render() {
+    const {theme, className, global, max, value, label, ...otherProps} = this.props;
+
+    const width = value ? `${ProgressBar.toPercent(value, max)}%` : undefined;
+    const classes = classNames(styles.progressBar, className, {
+      [styles.light]: theme === Theme.LIGHT,
+      [styles.dark]: theme === Theme.DARK,
+      [styles.globalMode]: global
+    });
+
+    return (
+      <div
+        {...otherProps}
+        className={classes}
+        ref={this.progressbarWrapperRef}
+      >
+        <div
+          className={styles.line}
+          ref={this.progressbarRef}
+          role="progressbar"
+          aria-label={label}
+          aria-valuenow={value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+          style={{width}}
+        />
+      </div>
+    );
+  }
+}
+
+export type ProgressBarAttrs = JSX.LibraryManagedAttributes<typeof ProgressBar, ProgressBarProps>

package/components/progress-bar-ng/progress-bar-ng.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import RingProgressBar from '@jetbrains/ring-ui/components/progress-bar-ng/progress-bar-ng';
+import RingProgressBar from './progress-bar-ng';
 
 const disableAnimations = window.location.search.includes('block-animations');
 

package/components/promised-click-ng/promised-click-ng.examples.js

@@ -2,9 +2,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 PromisedClickNG from '@jetbrains/ring-ui/components/promised-click-ng/promised-click-ng';
+import PromisedClickNG from './promised-click-ng';
 
 export default {
   title: 'Legacy Angular/Promised Click Ng',

package/components/query-assist/query-assist.examples.tsx

@@ -0,0 +1,312 @@
+import React, {Component} from 'react';
+import permissionIcon from '@jetbrains/icons/permission';
+
+import {Story} from '@storybook/react';
+
+import hubConfig from '../../.storybook/hub-config';
+
+import reactDecorator from '../../.storybook/react-decorator';
+
+import Auth from '../auth/auth';
+import HTTP from '../http/http';
+import List from '../list/list';
+import Icon from '../icon/icon';
+
+
+import QueryAssist, {
+  QueryAssistAttrs,
+  QueryAssistRequestParams
+} from './query-assist';
+import {QueryAssistSuggestion} from './query-assist__suggestions';
+
+export default {
+  title: 'Components/Query Assist',
+  decorators: [reactDecorator()],
+
+  parameters: {
+    component: QueryAssist,
+    framework: 'react'
+  },
+  args: {
+    placeholder: 'placeholder',
+    glass: true,
+    clear: true,
+    hint: 'hint',
+    hintOnSelection: 'hint on selection'
+  },
+  argTypes: {
+    theme: {},
+    translations: {}
+  }
+};
+
+class Basic extends Component {
+  constructor(props: QueryAssistAttrs) {
+    super(props);
+    this.auth.init().then(() => this.setState({authReady: true}));
+  }
+
+  state = {authReady: false};
+  auth = new Auth(hubConfig);
+  http = new HTTP(this.auth, this.auth.getAPIPath());
+
+  dataSource = (props: QueryAssistRequestParams) => {
+    const params = {
+      query: {
+        ...props,
+        fields: `query,caret,styleRanges${props.omitSuggestions ? '' : ',suggestions'}`
+      }
+    };
+
+    return this.http.get('users/queryAssist', params);
+  };
+
+  render() {
+    if (!this.state.authReady) {
+      return <span>Loading...</span>;
+    }
+
+    return (
+      <QueryAssist
+        {...this.props}
+        dataSource={this.dataSource}
+      />
+    );
+  }
+}
+export const basic: Story<QueryAssistAttrs> = args => <Basic {...args}/>;
+
+basic.storyName = 'basic';
+basic.parameters = {hermione: {skip: true}};
+basic.args = {
+  query: 'test',
+  focus: true,
+  hint: 'lol',
+  hintOnSelection: 'lol selected',
+  popupClassName: 'test',
+  className: 'custom-class'
+};
+
+export const noAuth: Story<QueryAssistAttrs> = args => <QueryAssist {...args}/>;
+
+noAuth.storyName = 'no auth';
+noAuth.args = {
+  dataSource: ({query, caret}) => ({
+    query,
+    caret,
+    styleRanges: [
+      {start: 0, length: 1, style: 'text'},
+      {start: 1, length: 1, style: 'field_value'},
+      {start: 2, length: 1, style: 'field_name'},
+      {start: 3, length: 1, style: 'operator'}
+    ],
+    suggestions: [
+      {
+        prefix: 'login: ',
+        option: 'test',
+        suffix: ' ',
+        description: '1',
+        matchingStart: 0,
+        matchingEnd: query.length,
+        caret: 2,
+        completionStart: 0,
+        completionEnd: query.length,
+        group: 'Logins'
+      },
+      {
+        prefix: 'login: ',
+        option: 'test.1',
+        suffix: ' ',
+        description: '2',
+        matchingStart: 0,
+        matchingEnd: query.length,
+        caret: 2,
+        completionStart: 0,
+        completionEnd: query.length,
+        group: 'Logins'
+      },
+      {
+        prefix: 'name: ',
+        option: 'another',
+        suffix: ' ',
+        description: '2',
+        matchingStart: 0,
+        matchingEnd: query.length,
+        caret: 2,
+        completionStart: 0,
+        completionEnd: query.length,
+        group: 'Names'
+      }
+    ]
+  })
+};
+noAuth.parameters = {
+  hermione: {
+    actions: [
+      {type: 'capture', name: 'queryAssist', selector: ['[data-test~=ring-query-assist]']},
+      {type: 'click', selector: '[data-test=ring-query-assist-input]'},
+      {type: 'sendKeys', selector: '[data-test=ring-query-assist-input]', value: 'test '},
+      {
+        type: 'capture',
+        name: 'withPopup',
+        selector: ['[data-test~=ring-query-assist]', '[data-test~=ring-query-assist-popup]']
+      }
+    ]
+  }
+};
+
+const template = (item: QueryAssistSuggestion) =>
+  React.createElement(
+    'span',
+    null,
+    `My name is ${item.description}, my ${item.prefix} is ${item.option}`
+  );
+
+export const withCustomRenderer: Story<QueryAssistAttrs> = args => <QueryAssist {...args}/>;
+
+withCustomRenderer.args = {
+  useCustomItemRender: true,
+  dataSource: ({query, caret}) => ({
+    query,
+    caret,
+    styleRanges: [
+      {start: 0, length: 1, style: 'text'},
+      {start: 1, length: 1, style: 'field_value'},
+      {start: 2, length: 1, style: 'field_name'},
+      {start: 3, length: 1, style: 'operator'}
+    ],
+    suggestions: [
+      {
+        prefix: 'login:',
+        option: 'John.Abrams',
+        description: 'John Abrams',
+        group: 'Logins'
+      },
+      {
+        prefix: 'login:',
+        option: 'lenni',
+        description: 'Lenni Joy',
+        group: 'Names'
+      }
+    ].map(i => ({
+      ...i,
+      rgItemType: List.ListProps.Type.CUSTOM,
+      template: template(i),
+      data: i
+    }))
+  })
+};
+withCustomRenderer.storyName = 'with custom renderer';
+withCustomRenderer.parameters = {hermione: {skip: true}};
+
+export const darkThemeNoAuth: Story<QueryAssistAttrs> = args => (
+  <div style={{background: '#000', padding: '24px', margin: '-16px', paddingBottom: 0}}>
+    <QueryAssist {...args}/>
+  </div>
+);
+
+darkThemeNoAuth.args = {
+  theme: QueryAssist.Theme.DARK,
+  dataSource: ({query, caret}) => ({
+    query,
+    caret,
+    styleRanges: [
+      {start: 0, length: 1, style: 'text'},
+      {start: 1, length: 1, style: 'field_value'},
+      {start: 2, length: 1, style: 'field_name'},
+      {start: 3, length: 1, style: 'operator'}
+    ],
+    suggestions: [
+      {
+        prefix: 'login: ',
+        option: 'test',
+        suffix: ' ',
+        description: '1',
+        matchingStart: 0,
+        matchingEnd: query.length,
+        caret: 2,
+        completionStart: 0,
+        completionEnd: query.length,
+        group: 'logins'
+      },
+      {
+        prefix: 'login: ',
+        option: 'test.1',
+        suffix: ' ',
+        description: '2',
+        matchingStart: 0,
+        matchingEnd: query.length,
+        caret: 2,
+        completionStart: 0,
+        completionEnd: query.length,
+        group: 'logins'
+      }
+    ]
+  })
+};
+
+darkThemeNoAuth.storyName = 'dark theme (no-auth)';
+
+darkThemeNoAuth.parameters = {
+  hermione: {
+    actions: [
+      {type: 'capture', name: 'queryAssist', selector: ['[data-test~=ring-query-assist]']},
+      {type: 'click', selector: '[data-test=ring-query-assist-input]'},
+      {type: 'sendKeys', selector: '[data-test=ring-query-assist-input]', value: 'test '},
+      {
+        type: 'capture',
+        name: 'withPopup',
+        selector: ['[data-test~=ring-query-assist]', '[data-test~=ring-query-assist-popup]']
+      }
+    ]
+  }
+};
+
+class QueryAssistExample extends Component {
+  constructor(props: QueryAssistAttrs) {
+    super(props);
+    const auth = new Auth(hubConfig);
+    this.http = new HTTP(auth, auth.getAPIPath());
+    auth.init().then(() => this.setState({authReady: true}));
+  }
+
+  state = {authReady: false};
+  http: HTTP;
+
+  dataSource = (props: QueryAssistRequestParams) => {
+    const params = {
+      query: {
+        ...props,
+        fields: `query,caret,styleRanges${props.omitSuggestions ? '' : ',suggestions'}`
+      }
+    };
+
+    return this.http.get('users/queryAssist', params);
+  };
+
+  render() {
+    if (!this.state.authReady) {
+      return <span>Loading...</span>;
+    }
+
+    return (
+      <QueryAssist
+        {...this.props}
+        dataSource={this.dataSource}
+      />
+    );
+  }
+}
+
+export const withCustomActions: Story<QueryAssistAttrs> = args => <QueryAssistExample {...args}/>;
+
+withCustomActions.args = {
+  query: 'test',
+  focus: true,
+  hint: 'lol',
+  hintOnSelection: 'lol selected',
+  popupClassName: 'test',
+  actions: [<Icon glyph={permissionIcon} key="custom-action"/>]
+};
+withCustomActions.storyName = 'with custom actions';
+withCustomActions.parameters = {hermione: {skip: true}};