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

package/components/global/url.ts

@@ -0,0 +1,162 @@
+/**
+ * @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: string) {
+  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: string, 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: string | null | undefined, path: string) {
+  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: string | null | undefined) {
+  if (queryString == null) {
+    return {};
+  }
+
+  const queryParameterPairRE = /([^&;=]+)=?([^&;]*)/g;
+  const FIRST_PAIR_ELEMENT = 1;
+  const SECOND_PAIR_ELEMENT = 2;
+  const urlParams: Record<string, string> = {};
+
+  function decode(s: string) {
+    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: unknown) {
+  const commaRE = /%2C/g;
+  return encodeURIComponent(String(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: string, params: Record<string, unknown>) {
+  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: string) {
+  return uri.indexOf('data:') === 0;
+}

package/components/global/variables.examples.tsx

@@ -0,0 +1,160 @@
+import darkVariables from './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: string) {
+  return getComputedStyle(document.body).getPropertyValue(propName).toUpperCase();
+}
+
+function renderColorItem(propName: string, 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.ts

@@ -0,0 +1,112 @@
+import type {Property} from 'csstype';
+
+export interface RingCSSProperties {
+  '--ring-unit'?: string
+
+  /* Element */
+  '--ring-line-color'?: Property.BorderColor
+  '--ring-dark-line-color'?: Property.BorderColor
+  '--ring-borders-color'?: Property.BorderColor
+  '--ring-dark-borders-color'?: Property.BorderColor
+  '--ring-icon-color'?: Property.Color
+  '--ring-icon-secondary-color'?: Property.Color
+  '--ring-border-disabled-color'?: Property.BorderColor
+  '--ring-icon-disabled-color'?: Property.Color
+  '--ring-border-hover-color'?: Property.BorderColor
+  '--ring-dark-border-hover-color'?: Property.BorderColor
+  '--ring-icon-hover-color'?: Property.Color
+  '--ring-main-color'?: Property.Color
+  '--ring-main-hover-color'?: Property.Color
+  '--ring-icon-error-color'?: Property.Color
+  '--ring-icon-warning-color'?: Property.Color
+  '--ring-icon-success-color'?: Property.Color
+  '--ring-pale-control-color'?: Property.Color
+  '--ring-popup-border-components'?: string
+  '--ring-popup-border-color'?: Property.BorderColor
+  '--ring-popup-shadow-color'?: Property.Color
+  '--ring-message-shadow-color'?: Property.Color
+  '--ring-pinned-shadow-color'?: Property.Color
+
+  /* Text */
+  '--ring-search-color'?: Property.Color
+  '--ring-hint-color'?: Property.Color
+  '--ring-link-color'?: Property.Color
+  '--ring-link-hover-color'?: Property.Color
+  '--ring-error-color'?: Property.Color
+  '--ring-warning-color'?: Property.Color
+  '--ring-success-color'?: Property.Color
+  '--ring-text-color'?: Property.Color
+  '--ring-dark-text-color'?: Property.Color
+  '--ring-heading-color'?: Property.Color
+  '--ring-secondary-color'?: Property.Color
+  '--ring-dark-secondary-color'?: Property.Color
+  '--ring-disabled-color'?: Property.Color
+  '--ring-dark-disabled-color'?: Property.Color
+  '--ring-dark-active-color'?: Property.Color
+
+  /* Background */
+  '--ring-content-background-color'?: Property.BackgroundColor
+  '--ring-popup-background-color'?: Property.BackgroundColor
+  '--ring-sidebar-background-color'?: Property.BackgroundColor
+  '--ring-selected-background-color'?: Property.BackgroundColor
+  '--ring-hover-background-color'?: Property.BackgroundColor
+  '--ring-dark-selected-background-color'?: Property.BackgroundColor
+  '--ring-message-background-color'?: Property.BackgroundColor
+  '--ring-navigation-background-color'?: Property.BackgroundColor
+  '--ring-tag-background-color'?: Property.BackgroundColor
+  '--ring-removed-background-color'?: Property.BackgroundColor
+  '--ring-warning-background-color'?: Property.BackgroundColor
+  '--ring-added-background-color'?: Property.BackgroundColor
+
+  /* Code */
+  '--ring-code-background-color'?: Property.BackgroundColor
+  '--ring-code-color'?: Property.Color
+  '--ring-code-comment-color'?: Property.Color
+  '--ring-code-meta-color'?: Property.Color
+  '--ring-code-keyword-color'?: Property.Color
+  '--ring-code-tag-background-color'?: Property.BackgroundColor
+  '--ring-code-tag-color'?: Property.Color
+  '--ring-code-tag-font-weight'?: Property.FontWeight
+  '--ring-code-field-color'?: Property.Color
+  '--ring-code-attribute-color'?: Property.Color
+  '--ring-code-number-color'?: Property.Color
+  '--ring-code-string-color'?: Property.Color
+  '--ring-code-addition-color'?: Property.Color
+  '--ring-code-deletion-color'?: Property.Color
+
+  /* Metrics */
+  '--ring-border-radius'?: Property.BorderRadius
+  '--ring-border-radius-small'?: Property.BorderRadius
+  '--ring-font-size-larger'?: Property.FontSize
+  '--ring-font-size'?: Property.FontSize
+  '--ring-font-size-smaller'?: Property.FontSize
+  '--ring-line-height-taller'?: Property.LineHeight
+  '--ring-line-height'?: Property.LineHeight
+  '--ring-line-height-lower'?: Property.LineHeight
+  '--ring-line-height-lowest'?: Property.LineHeight
+  '--ring-ease'?: string
+  '--ring-fast-ease'?: string
+  '--ring-font-family'?: Property.FontFamily
+  '--ring-font-family-monospace'?: Property.FontFamily
+
+  /* Common z-index-values */
+
+  /* Invisible element is an absolutely positioned element which should be below */
+  /* all other elements on the page */
+  '--ring-invisible-element-z-index'?: Property.ZIndex
+
+  /* z-index for position?: fixed elements */
+  '--ring-fixed-z-index'?: Property.ZIndex
+
+  /* Elements that should overlay all other elements on the page */
+  '--ring-overlay-z-index'?: Property.ZIndex
+
+  /* Alerts should de displayed above overlays */
+  '--ring-alert-z-index'?: Property.ZIndex
+}
+
+declare module 'csstype' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface Properties extends RingCSSProperties {}
+}
+

package/components/global/variables_dark.ts

@@ -0,0 +1,59 @@
+import type {RingCSSProperties} from './variables';
+
+const variables: RingCSSProperties = {
+  '--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'
+};
+
+export default variables;

package/components/grid/col.tsx

@@ -0,0 +1,72 @@
+import React, {Component, ReactNode} 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: Record<string, string> = {
+  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'
+};
+
+export interface ColProps {
+  children?: ReactNode
+  xs?: boolean | number | null | undefined
+  sm?: boolean | number | null | undefined
+  md?: boolean | number | null | undefined
+  lg?: boolean | number | null | undefined
+  xsOffset?: number | null | undefined
+  smOffset?: number | null | undefined
+  mdOffset?: number | null | undefined
+  lgOffset?: number | null | undefined
+  reverse?: boolean | null | undefined
+  className?: string | null | undefined
+}
+
+/**
+ * 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: Omit<ColProps, 'children' | 'className' | 'reverse'>) {
+  return Object.entries(props).
+    filter(([key]) => classMap[key]).
+    map(([key, value]) => styles[Number.isInteger(value) ? `${classMap[key]}-${value}` : classMap[key]]);
+}
+
+export default class Col extends Component<ColProps> {
+  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>
+    );
+  }
+}