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

package/components/global/theme.js

@@ -1,51 +0,0 @@
-import React, {createContext, forwardRef, memo} from 'react';
-
-const Theme = {
-  LIGHT: 'light',
-  DARK: 'dark'
-};
-
-export const ThemeContext = createContext(null);
-
-const getDisplayName = Component => (typeof Component === 'string' ? Component : (Component.name ?? Component.displayName ?? 'Component'));
-
-export const withTheme = (defaultTheme = Theme.LIGHT) => ComposedComponent => {
-  const WithTheme = memo(forwardRef(function WithTheme({theme, ...restProps}, ref) {
-    return (
-      <ThemeContext.Consumer>
-        {contextTheme => {
-          const usedTheme = theme || contextTheme || defaultTheme;
-          return (
-            <ThemeContext.Provider value={usedTheme}>
-              <ComposedComponent
-                ref={ref}
-                {...restProps}
-                theme={usedTheme}
-              />
-            </ThemeContext.Provider>
-          );
-        }}
-      </ThemeContext.Consumer>
-    );
-  }));
-  Object.assign(WithTheme, ComposedComponent);
-  WithTheme.propTypes = ComposedComponent.propTypes;
-  WithTheme.displayName = `withTheme(${getDisplayName(ComposedComponent)})`;
-  return WithTheme;
-};
-
-function applyTheme(params) {
-  if (!params || !params.element || !params.currentTheme) {
-    return;
-  }
-
-  if (params.prevTheme) {
-    params.element.classList.remove(params.prevTheme);
-  }
-
-  params.element.classList.add(params.currentTheme);
-}
-
-
-export {applyTheme};
-export default Theme;

package/components/global/trivial-template-tag.js

@@ -1,11 +0,0 @@
-const TWO = 2;
-
-export default function trivialTemplateTag(f) {
-  return (strings, ...interpolations) => {
-    const chunks = [...strings];
-    // insert the interpolations where they belong to
-    interpolations.forEach((value, i) =>
-      chunks.splice(TWO * i + 1, 0, value));
-    return f(chunks.join(''));
-  };
-}

package/components/global/url.js

@@ -1,162 +0,0 @@
-/**
- * @description Provides a set of utilities for URL manipulation.
- */
-
-/**
- * @const {RegExp}
- */
-const ORIGIN_PATTERN = /^[a-z]+:\/\/[^/]+/i;
-
-/**
- * @const {RegExp}
- */
-const ABSOLUTE_URL_PATTERN = /^[a-z]+:\/\//i;
-
-/**
- * @const {RegExp}
- */
-export const ENDING_SLASH_PATTERN = /\/$/;
-
-/**
- * Get URI from the <base> tag
- * @return {string|undefined} base URI
- */
-export function getBaseURI() {
-  const baseElement = document.getElementsByTagName('base')[0];
-  return baseElement ? baseElement.href : undefined;
-}
-
-/**
- * Get absolute URI from the <base> tag
- * @return {string} absolute base URI
- */
-export function getAbsoluteBaseURL() {
-  const baseUrl = getBaseURI();
-  const host = `${window.location.protocol}//${window.location.host}`;
-
-  let uri;
-  if (baseUrl) {
-    uri = ABSOLUTE_URL_PATTERN.test(baseUrl) ? baseUrl : host + baseUrl;
-  } else {
-    uri = host;
-  }
-
-  return uri;
-}
-
-/**
- * Get origin from the URL
- * @param {string} url URL to extract origin from
- * @returns {string|undefined} origin
- */
-export function getOrigin(url) {
-  const matches = url.match(ORIGIN_PATTERN);
-
-  if (matches) {
-    return matches[0];
-  }
-
-  return undefined;
-}
-
-/**
- * Get absolute URI from current page
- * @return {string} absolute URL of current page
- */
-export function getAbsoluteURL() {
-  return window.location.href.split('#')[0];
-}
-
-/**
- * Fixes the URL
- * If the URL is relative and the page contains a <base> TAG, the URL will be converted to absolute
- * <base href="/">: some/path => /some/path
- * @param {string} url URL to fix
- * @param {Function} baseURIGetter a function that returns base URI
- * @return {string} fixed URL
- */
-export function fixUrl(url, baseURIGetter = getBaseURI) {
-  if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1 && url.indexOf('/') !== 0) {
-    const baseUrl = baseURIGetter();
-
-    if (baseUrl) {
-      return baseUrl + url;
-    }
-  }
-
-  return url;
-}
-
-export function joinBaseURLAndPath(baseUrl, path) {
-  if (!baseUrl || path.indexOf('http://') !== -1 || path.indexOf('https://') !== -1) {
-    return path;
-  }
-
-  return baseUrl + path;
-}
-
-/**
- * Parses a queryString into an object.
- * ```
- * parseQueryString("access_token=2YotnFZFEjr1zCsicMWpAA&state=xyz&token_type=example&expires_in=3600");
- * // is {access_token: "2YotnFZFEjr1zCsicMWpAA", state: "xyz", token_type: "example", expires_in: "3600"}
- * ```
- * @param {string} queryString query parameter string to parse
- * @return {AuthResponse} object with query parameters map
- */
-export function parseQueryString(queryString) {
-  if (queryString == null) {
-    return {};
-  }
-
-  const queryParameterPairRE = /([^&;=]+)=?([^&;]*)/g;
-  const FIRST_PAIR_ELEMENT = 1;
-  const SECOND_PAIR_ELEMENT = 2;
-  const urlParams = {};
-
-  function decode(s) {
-    return decodeURIComponent(s.replace(/\+/g, ' '));
-  }
-
-  let matchedQueryPair;
-  while ((matchedQueryPair = queryParameterPairRE.exec(queryString)) != null) {
-    urlParams[decode(matchedQueryPair[FIRST_PAIR_ELEMENT])] =
-      decode(matchedQueryPair[SECOND_PAIR_ELEMENT]);
-  }
-
-  return urlParams;
-}
-
-function customEncodeURIComponent(str) {
-  const commaRE = /%2C/g;
-  return encodeURIComponent(str).replace(commaRE, ',');
-}
-
-/**
- * Takes a URL as input and a params object.
- * Each property in the params is added to the URL as query string parameters
- * @param {string} url URL to add parameters to
- * @param {Object} params parameters to add
- * @returns {string} encoded URL
- */
-export function encodeURL(url, params) {
-  const equalsSign = '=';
-  const firstSeparator = (url.indexOf('?') === -1) ? '?' : '&';
-
-  let res = url;
-  let k;
-  let i = 0;
-
-  for (k in params) {
-    if (params.hasOwnProperty(k) && params[k] != null) {
-      res += (i++ === 0 ? firstSeparator : '&') +
-        customEncodeURIComponent(k) + equalsSign + customEncodeURIComponent(params[k]);
-    }
-  }
-
-  return res;
-}
-
-export function isDataURI(uri) {
-  return uri.indexOf('data:') === 0;
-}

package/components/global/url.test.js

@@ -1,138 +0,0 @@
-import {
-  encodeURL,
-  fixUrl,
-  joinBaseURLAndPath,
-  getBaseURI,
-  getOrigin,
-  isDataURI,
-  parseQueryString
-} from './url';
-
-describe('Url', () => {
-  describe('fixUrl', () => {
-    let baseTag;
-    let baseUrl;
-
-    beforeEach(() => {
-      baseTag = document.createElement('base');
-      baseTag.setAttribute('href', '/some/base/url/');
-      document.head.prepend(baseTag);
-      baseUrl = getBaseURI();
-    });
-
-    it('should fix relative url', () => {
-      fixUrl('relative/path').should.be.equal(`${baseUrl}relative/path`);
-    });
-
-    it('should not fix absolute url', () => {
-      fixUrl('/absolute/path').should.be.equal('/absolute/path');
-    });
-
-    it('should not fix absolute url with http', () => {
-      fixUrl('http://simple/path').should.be.equal('http://simple/path');
-    });
-
-    it('should not fix absolute url with https', () => {
-      fixUrl('https://secure/path').should.be.equal('https://secure/path');
-    });
-
-    it('should concat base url and path', () => {
-      joinBaseURLAndPath('http://base.com', '/test').should.be.equal('http://base.com/test');
-    });
-
-    it('should not concat base url and path if base is empty', () => {
-      joinBaseURLAndPath(null, 'test').should.be.equal('test');
-    });
-
-    it('should ignore base url if path is absolute url', () => {
-      joinBaseURLAndPath('http://base.com', 'http://absolute.com').
-        should.be.equal('http://absolute.com');
-    });
-
-    afterEach(() => {
-      baseTag.remove();
-    });
-  });
-
-  describe('getOrigin', () => {
-    it('should return origin for absolute URIs', () => {
-      getOrigin('https://secure:433/path?q=p#hash').should.equal('https://secure:433');
-    });
-
-    it('should return undefined for relative URLs', () => {
-      should.not.exist(getOrigin('/path:433/path?q=p#hash'));
-    });
-
-    it('should return undefined for broken URLs', () => {
-      should.not.exist(getOrigin('http:/'));
-    });
-  });
-
-  describe('parseQueryString', () => {
-    it('should parse urls correctly', () => {
-      const queryString = 'access_token=2YotnFZFEjr1zCsicMWpAA' +
-        '&state=xyz&token_type=example&expires_in=3600';
-      /* eslint-disable camelcase */
-      parseQueryString(queryString).should.be.deep.equal({
-        access_token: '2YotnFZFEjr1zCsicMWpAA',
-        state: 'xyz',
-        token_type: 'example',
-        expires_in: '3600'
-      });
-      /* eslint-enable camelcase */
-    });
-
-    it('should accept empty string', () => {
-      parseQueryString('').should.be.deep.equal({});
-    });
-
-    it('should accept undefined', () => {
-      parseQueryString(undefined).should.be.deep.equal({});
-    });
-  });
-
-  describe('encodeURL', () => {
-    it('should build URL correctly', () => {
-      encodeURL('http://localhost:8080/hub', {
-        a: 'a',
-        b: 'b'
-      }).
-        should.be.equal('http://localhost:8080/hub?a=a&b=b');
-    });
-
-    it('should accept relative URI', () => {
-      encodeURL('hub', {a: 'a', b: 'b'}).
-        should.be.equal('hub?a=a&b=b');
-    });
-
-    it('should not encode null and undefined values', () => {
-      encodeURL('hub', {a: 'a', b: null, c: undefined, d: '', e: false}).
-        should.be.equal('hub?a=a&d=&e=false');
-    });
-
-    it('should handle already existing query parameters', () => {
-      encodeURL('hub?c=c', {a: 'a', b: 'b'}).
-        should.be.equal('hub?c=c&a=a&b=b');
-    });
-
-    it('should encode query parameters', () => {
-      encodeURL('hub', {'i am naughty': 'with%23some+problems'}).
-        should.be.equal('hub?i%20am%20naughty=with%2523some%2Bproblems');
-    });
-
-    it('should not encode comma', () => {
-      encodeURL('hub', {test: 'with(some,allowed)'}).
-        should.be.equal('hub?test=with(some,allowed)');
-    });
-  });
-
-  describe('isDataURI', () => {
-    it('should detect data uri', () => {
-      isDataURI('data:image/svg+xml;utf8,<svg></svg>').should.be.true;
-    });
-
-    it('should not detect other uris', () => {
-      isDataURI('https://ring-ui').should.be.false;
-    });
-  });
-});

package/components/global/variables.examples.js

@@ -1,160 +0,0 @@
-import darkVariables from '@jetbrains/ring-ui/components/global/variables_dark';
-
-export default {
-  title: 'Style-only/Theme palette',
-
-  parameters: {
-    notes: `
-Ring UI colors are based on CSS custom properties spec. You can use them in you markup directly.
-    `,
-    hermione: {skip: true}
-  }
-};
-
-function getDarkThemeStyle() {
-  return Object.entries(darkVariables).
-    map(([propName, val]) => `${propName}: ${val}`).
-    join('; ');
-}
-
-function getValue(propName) {
-  return getComputedStyle(document.body).getPropertyValue(propName).toUpperCase();
-}
-
-function renderColorItem(propName, isDark = propName.includes('-dark-')) {
-  return `
-    <div class="color-item ${isDark ? 'dark-background' : ''}">
-      <div class="color-square" style="background-color: var(${propName})"></div>
-      <div class="color-info">
-        <div>${propName}</div>
-        <div class="color-value">${getValue(propName)}</div>
-      </div>
-    </div>
-  `;
-}
-
-const renderColors = () => `
-  <div class="container">
-    <h3>Element colors:</h3>
-    <div class="colors-group">
-      ${renderColorItem('--ring-line-color')}
-      ${renderColorItem('--ring-borders-color')}
-      ${renderColorItem('--ring-icon-color')}
-      ${renderColorItem('--ring-icon-secondary-color')}
-      ${renderColorItem('--ring-border-disabled-color')}
-      ${renderColorItem('--ring-icon-disabled-color')}
-      ${renderColorItem('--ring-border-hover-color')}
-      ${renderColorItem('--ring-icon-hover-color')}
-      ${renderColorItem('--ring-main-color')}
-      ${renderColorItem('--ring-main-hover-color')}
-      ${renderColorItem('--ring-icon-error-color')}
-      ${renderColorItem('--ring-icon-warning-color')}
-      ${renderColorItem('--ring-icon-success-color')}
-      ${renderColorItem('--ring-pale-control-color')}
-      ${renderColorItem('--ring-popup-border-color')}
-      ${renderColorItem('--ring-popup-shadow-color')}
-      ${renderColorItem('--ring-message-shadow-color')}
-      ${renderColorItem('--ring-dark-line-color')}
-      ${renderColorItem('--ring-dark-borders-color')}
-      ${renderColorItem('--ring-dark-border-hover-color')}
-    </div>
-
-    <h3>Text colors:</h3>
-    <div class="colors-group">
-      ${renderColorItem('--ring-search-color')}
-      ${renderColorItem('--ring-hint-color')}
-      ${renderColorItem('--ring-link-color')}
-      ${renderColorItem('--ring-link-hover-color')}
-      ${renderColorItem('--ring-error-color')}
-      ${renderColorItem('--ring-warning-color')}
-      ${renderColorItem('--ring-success-color')}
-      ${renderColorItem('--ring-text-color')}
-      ${renderColorItem('--ring-heading-color')}
-      ${renderColorItem('--ring-secondary-color')}
-      ${renderColorItem('--ring-disabled-color')}
-      ${renderColorItem('--ring-dark-secondary-color')}
-      ${renderColorItem('--ring-dark-text-color')}
-      ${renderColorItem('--ring-dark-disabled-color')}
-      ${renderColorItem('--ring-dark-active-color')}
-    </div>
-
-    <h3>Background colors:</h3>
-    <div class="colors-group">
-      ${renderColorItem('--ring-content-background-color')}
-      ${renderColorItem('--ring-popup-background-color')}
-      ${renderColorItem('--ring-sidebar-background-color')}
-      ${renderColorItem('--ring-selected-background-color')}
-      ${renderColorItem('--ring-hover-background-color')}
-      ${renderColorItem('--ring-message-background-color')}
-      ${renderColorItem('--ring-navigation-background-color')}
-      ${renderColorItem('--ring-removed-background-color')}
-      ${renderColorItem('--ring-warning-background-color')}
-      ${renderColorItem('--ring-added-background-color')}
-      ${renderColorItem('--ring-tag-background-color')}
-      ${renderColorItem('--ring-dark-selected-background-color')}
-    </div>
-  </div>
-`;
-
-export const basic = () => `
-  <div>
-    <h2>Default theme</h2>
-    ${renderColors()}
-
-    <div style="${getDarkThemeStyle()}">
-      <h2>Dark theme</h2>
-      ${renderColors()}
-    </div>
-  </div>
-`;
-
-basic.storyName = 'Theme palette';
-
-basic.parameters = {
-  storyStyles: `
-<style>
-  .container {
-    background-color: var(--ring-content-background-color);
-    color: var(--ring-text-color);
-    font-family: var(--ring-font-family);
-  }
-
-  .colors-group {
-    display: flex;
-    flex-wrap: wrap;
-    font-family: var(--ring-font-family-monospace);
-  }
-
-  .dark-background {
-    background-color: var(--ring-navigation-background-color);
-    color: var(--ring-dark-text-color);
-  }
-
-  .color-square {
-    width: calc(var(--ring-unit) * 4);
-    height: calc(var(--ring-unit) * 4);
-    border-radius: var(--ring-border-radius);
-  }
-
-  .color-info {
-    margin-left: var(--ring-unit);
-  }
-
-  .color-value {
-    font-size: var(--ring-font-size-smaller);
-    color: var(--ring-secondary-color);
-  }
-
-  .dark-background .color-value {
-    color: var(--ring-dark-secondary-color);
-  }
-
-  .color-item {
-    display: flex;
-    flex-basis: 30%;
-    padding: 4px var(--ring-unit);
-    align-items: center;
-  }
-</style>
-      `
-};

package/components/global/variables_dark.js

@@ -1,55 +0,0 @@
-export default {
-  '--ring-line-color': '#475159',
-  '--ring-borders-color': '#406380',
-  '--ring-icon-color': '#80929d',
-  '--ring-icon-secondary-color': '#80929d',
-  '--ring-border-disabled-color': '#475159',
-  '--ring-border-hover-color': '#70b1e6',
-  '--ring-icon-error-color': '#c22731',
-  '--ring-icon-warning-color': '#cc8b00',
-  '--ring-icon-success-color': '#1c8c32',
-  '--ring-popup-border-components': '0, 42, 76',
-  '--ring-popup-border-color': 'rgba(var(--ring-popup-border-components), 0.1)',
-  '--ring-popup-shadow-color': 'rgba(var(--ring-popup-border-components), 0.15)',
-  '--ring-message-shadow-color': 'rgba(var(--ring-popup-border-components), 0.3)',
-  '--ring-pinned-shadow-color': '#000',
-
-  /* Text */
-  '--ring-hint-color': '#80929d',
-  '--ring-link-color': '#70b1e6',
-  '--ring-error-color': '#db5860',
-  '--ring-warning-color': '#eda200',
-  '--ring-success-color': '#59a869',
-  '--ring-text-color': '#bbb',
-  '--ring-heading-color': 'var(--ring-text-color)',
-  '--ring-secondary-color': '#80929d',
-  '--ring-disabled-color': '#80929d',
-
-  /* Background */
-  '--ring-content-background-color': '#23272b',
-  '--ring-popup-background-color': '#111314',
-  '--ring-sidebar-background-color': '#28343d',
-  '--ring-selected-background-color': '#062640',
-  '--ring-hover-background-color': '#0b1a26',
-  '--ring-message-background-color': 'var(--ring-popup-background-color)',
-  '--ring-navigation-background-color': '#111314',
-  '--ring-tag-background-color': '#3e4d59',
-  '--ring-removed-background-color': '#8f5247',
-  '--ring-warning-background-color': '#593d01',
-  '--ring-added-background-color': '#365947',
-
-  /* Code */
-  '--ring-code-background-color': '#2b2b2b',
-  '--ring-code-color': '#a9b7c6',
-  '--ring-code-meta-color': '#bbb529',
-  '--ring-code-keyword-color': '#cc7832',
-  '--ring-code-tag-background-color': '#2b2b2b',
-  '--ring-code-tag-color': '#e8BF6a',
-  '--ring-code-tag-font-weight': 'normal',
-  '--ring-code-field-color': '#9876aa',
-  '--ring-code-attribute-color': '#bababa',
-  '--ring-code-number-color': '#6897bb',
-  '--ring-code-string-color': '#6a8759',
-  '--ring-code-addition-color': '#447152',
-  '--ring-code-deletion-color': '#656e76'
-};

package/components/grid/col.js

@@ -1,58 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import styles from './grid.css';
-
-const ModifierType = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
-
-const classMap = {
-  xs: 'col-xs',
-  sm: 'col-sm',
-  md: 'col-md',
-  lg: 'col-lg',
-  xsOffset: 'col-xs-offset',
-  smOffset: 'col-sm-offset',
-  mdOffset: 'col-md-offset',
-  lgOffset: 'col-lg-offset'
-};
-
-/**
- * Converts props like "xs=9 xsOffset={2}" to classes "col-xs-9 col-xs-offset-2"
- * @param {Object} props incoming props
- * @returns {Array} result classnames
- */
-function getClassNames(props) {
-  return Object.keys(props).
-    filter(key => classMap[key]).
-    map(key => styles[Number.isInteger(props[key]) ? `${classMap[key]}-${props[key]}` : classMap[key]]);
-}
-
-export default class Col extends Component {
-  static propTypes = {
-    xs: ModifierType,
-    sm: ModifierType,
-    md: ModifierType,
-    lg: ModifierType,
-    xsOffset: PropTypes.number,
-    smOffset: PropTypes.number,
-    mdOffset: PropTypes.number,
-    lgOffset: PropTypes.number,
-    reverse: PropTypes.bool,
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, reverse, ...restProps} = this.props;
-    const classes = classNames(styles.col, className, getClassNames(restProps), {
-      [styles.reverse]: reverse
-    });
-
-    return (
-      <div className={classes}>
-        {children}
-      </div>
-    );
-  }
-}