@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/utils/constants.js

@@ -1,347 +0,0 @@
-import { POSITION } from '../components/utilities/truncate/constants';
-
-export const COMMA = ',';
-
-export const CONTRAST_LEVELS = [
-  {
-    grade: 'F',
-    min: 0,
-    max: 3,
-  },
-  {
-    grade: 'AA+',
-    min: 3,
-    max: 4.5,
-  },
-  {
-    grade: 'AA',
-    min: 4.5,
-    max: 7,
-  },
-  {
-    grade: 'AAA',
-    min: 7,
-    max: 22,
-  },
-];
-
-export const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
-
-export const LEFT_MOUSE_BUTTON = 0;
-
-export const progressBarVariantOptions = {
-  primary: 'primary',
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-};
-
-export const badgeSizeOptions = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-};
-
-export const badgeVariantOptions = {
-  muted: 'muted',
-  neutral: 'neutral',
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-  tier: 'tier',
-};
-
-export const badgeIconSizeOptions = {
-  sm: 12,
-  md: 16,
-};
-
-export const variantCssColorMap = {
-  muted: 'gl-text-gray-500',
-  neutral: 'gl-text-blue-100',
-  info: 'gl-text-blue-500',
-  success: 'gl-text-green-500',
-  warning: 'gl-text-orange-500',
-  danger: 'gl-text-red-500',
-};
-
-export const targetOptions = ['_self', '_blank', '_parent', '_top', null];
-
-export const viewModeOptions = {
-  dark: 'dark',
-  light: 'light',
-};
-
-export const labelColorOptions = {
-  ...viewModeOptions,
-};
-
-export const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
-
-export const avatarsInlineSizeOptions = [32, 24, 16];
-
-export const avatarShapeOptions = {
-  circle: 'circle',
-  rect: 'rect',
-};
-
-export const formStateOptions = {
-  default: null,
-  valid: true,
-  invalid: false,
-};
-
-export const buttonCategoryOptions = {
-  primary: 'primary',
-  secondary: 'secondary',
-  tertiary: 'tertiary',
-};
-
-export const buttonVariantOptions = {
-  default: 'default',
-  confirm: 'confirm',
-  info: 'info (deprecated)',
-  success: 'success (deprecated)',
-  danger: 'danger',
-  dashed: 'dashed',
-  link: 'link',
-  /**
-   * The "reset" variant can be used when customization of GlButton styles is required
-   * (e.g. for the "close" button in GlLabel).
-   * It should be used sparingly and only when other approaches fail.
-   * Prefer supported variants where ever possible.
-   */
-  reset: 'gl-reset',
-};
-
-export const badgeForButtonOptions = {
-  [buttonVariantOptions.default]: badgeVariantOptions.neutral,
-  [buttonVariantOptions.confirm]: badgeVariantOptions.info,
-  [buttonVariantOptions.danger]: badgeVariantOptions.danger,
-};
-
-export const dropdownVariantOptions = {
-  default: 'default',
-  confirm: 'confirm',
-  info: 'info (deprecated)',
-  success: 'success (deprecated)',
-  danger: 'danger',
-  link: 'link',
-};
-
-export const dropdownPlacements = {
-  'right-start': 'right-start',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-  bottom: 'bottom',
-
-  left: 'bottom-start', // deprecated, should be replaced with "bottom-start"
-  center: 'bottom', // deprecated, should be replaced with "bottom"
-  right: 'bottom-end', // deprecated, should be replaced with "bottom-end"
-};
-
-const dropdownHorizontalCornerPlacement = ['right-start', 'right-end', 'left-start', 'left-end'];
-const dropdownVerticalCornerPlacement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
-
-export const dropdownAllowedAutoPlacements = {
-  'right-start': dropdownHorizontalCornerPlacement,
-  'bottom-start': dropdownVerticalCornerPlacement,
-  'bottom-end': dropdownVerticalCornerPlacement,
-  bottom: ['bottom', 'top'],
-
-  left: dropdownVerticalCornerPlacement, // deprecated, should be replaced with "bottom-start"
-  center: ['bottom', 'top'], // deprecated, should be replaced with "bottom"
-  right: dropdownVerticalCornerPlacement, // deprecated, should be replaced with "bottom-end"
-};
-
-export const buttonSizeOptions = {
-  small: 'sm',
-  medium: 'md',
-};
-
-export const datepickerWidthOptionsMap = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-  xl: 'xl',
-};
-
-// size options all have corresponding styles (e.g. .s12 defined in icon.scss)
-export const iconSizeOptions = [8, 12, 14, 16, 24, 32, 48, 72];
-
-export const iconVariantOptions = {
-  current: 'gl-fill-current',
-  default: 'gl-fill-icon-default',
-  subtle: 'gl-fill-icon-subtle',
-  strong: 'gl-fill-icon-strong',
-  disabled: 'gl-fill-icon-disabled',
-  link: 'gl-fill-icon-link',
-  info: 'gl-fill-icon-info',
-  warning: 'gl-fill-icon-warning',
-  danger: 'gl-fill-icon-danger',
-  success: 'gl-fill-icon-success',
-};
-
-export const triggerVariantOptions = {
-  click: 'click',
-  hover: 'hover',
-  focus: 'focus',
-};
-
-export const tooltipPlacements = {
-  top: 'top',
-  left: 'left',
-  right: 'right',
-  bottom: 'bottom',
-};
-
-// in milliseconds
-export const tooltipDelay = {
-  show: 500,
-  hide: 0,
-};
-
-export const popoverPlacements = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-};
-
-export const columnOptions = {
-  stacked: 'stacked',
-  tiled: 'tiled',
-};
-
-export const alignOptions = {
-  left: 'left',
-  center: 'center',
-  right: 'right',
-  fill: 'fill',
-};
-
-export const alertVariantOptions = {
-  success: 'success',
-  warning: 'warning',
-  danger: 'danger',
-  info: 'info',
-  tip: 'tip',
-};
-
-export const alertVariantIconMap = {
-  success: 'check-circle',
-  warning: 'warning',
-  danger: 'error',
-  info: 'information-o',
-  tip: 'bulb',
-};
-
-export const colorThemes = {
-  indigo: 'theme-indigo-900',
-  'light-indigo': 'theme-indigo-700',
-  blue: 'theme-blue-900',
-  'light-blue': 'theme-blue-700',
-  green: 'theme-green-900',
-  'light-green': 'theme-green-700',
-  red: 'theme-red-900',
-  'light-red': 'theme-red-700',
-  dark: 'gray-900',
-  light: 'gray-700',
-};
-
-export const modalButtonDefaults = {
-  actionPrimary: {
-    variant: 'confirm',
-    category: 'primary',
-  },
-  actionSecondary: {
-    variant: 'confirm',
-    category: 'secondary',
-  },
-  actionCancel: {
-    variant: 'default',
-  },
-};
-
-export const tabsButtonDefaults = {
-  actionPrimary: {
-    variant: 'success',
-    category: 'primary',
-  },
-  actionSecondary: {
-    variant: 'default',
-    category: 'secondary',
-  },
-  actionTertiary: {
-    variant: 'default',
-  },
-};
-
-export const tokenVariants = ['default', 'search-type', 'search-value'];
-
-export const resizeDebounceTime = 200;
-
-// Datetime constants
-export const defaultDateFormat = 'YYYY-MM-DD';
-
-export const bannerVariants = ['promotion', 'introduction'];
-
-export const maxZIndex = 10;
-
-export const modalSizeOptions = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-};
-
-export const focusableTags = ['INPUT', 'TEXTAREA', 'A', 'BUTTON', 'SELECT'];
-
-export const keyboard = {
-  escape: 'Escape',
-  backspace: 'Backspace',
-  delete: 'Delete',
-  left: 'Left',
-  arrowLeft: 'ArrowLeft',
-  right: 'Right',
-  arrowRight: 'ArrowRight',
-  home: 'Home',
-  end: 'End',
-  tab: 'Tab',
-};
-
-export const truncateOptions = POSITION;
-
-export const formInputWidths = {
-  xs: 'xs',
-  sm: 'sm',
-  md: 'md',
-  lg: 'lg',
-  xl: 'xl',
-  '(unset or null)': null,
-};
-
-export const toggleLabelPosition = {
-  hidden: 'hidden',
-  left: 'left',
-  top: 'top',
-};
-
-export const tooltipActionEvents = ['open', 'close', 'enable', 'disable'];
-
-export const drawerVariants = {
-  default: 'default',
-  sidebar: 'sidebar',
-};
-
-export const loadingIconSizes = {
-  'sm (16x16)': 'sm',
-  'md (24x24)': 'md',
-  'lg (32x32)': 'lg',
-  'xl (64x64)': 'xl',
-};
-
-export const loadingIconVariants = {
-  spinner: 'spinner',
-  dots: 'dots',
-};

package/src/utils/data_utils.js

@@ -1,28 +0,0 @@
-import curry from 'lodash/fp/curry';
-
-const getRepeatingValue = (index) => {
-  const values = [
-    100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400,
-    600, 700,
-  ];
-  return index < values.length ? values[index] : values[index % values.length];
-};
-
-export const generateTimeSeries = () =>
-  new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]);
-
-// takes an element and a list and `intersperses' that element between the elements of the list.
-// (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
-export const intersperse = curry((separator, items) => {
-  const [head, ...rest] = items;
-  const separatorFactory = typeof separator === 'function' ? separator : () => separator;
-  return [head, ...rest.flatMap((item) => [separatorFactory(), item], rest)];
-});
-
-// inserts a value at a given index into an array
-// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
-export const insert = curry((index, newItem, items) => [
-  ...items.slice(0, index),
-  newItem,
-  ...items.slice(index),
-]);

package/src/utils/datetime_utility.js

@@ -1,63 +0,0 @@
-// These utility methods come from the Gitlab repo; app/assets/javascripts/lib/utils/datetime_utility.js
-
-/**
- * This method allows you to create new Date instance from existing
- * date instance without keeping the reference.
- *
- * @param {Date} date
- */
-export const newDate = (date) => (date instanceof Date ? new Date(date.getTime()) : new Date());
-
-/**
- * Computes the difference between 2 date objects.
- *
- * @param {Date} a the start date
- * @param {Date} b the end date
- * @example
- * // returns 5
- * getDayDifference(new Date('2020-08-10'), new Date('2020-08-15'));
- * @returns {Number} Number of days between the 2 dates
- */
-export const getDayDifference = (a, b) => {
-  const millisecondsPerDay = 1000 * 60 * 60 * 24;
-  const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
-  const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
-
-  return Math.floor((date2 - date1) / millisecondsPerDay);
-};
-
-/**
- * Subtracts a given number of days from a given date and returns the new date.
- *
- * @param {Date} date the date that we will substract days from
- * @param {Number} daysInPast number of days that are subtracted from a given date
- * @example
- * // returns Mon Aug 10 2020 00:00:00
- * getDateInPast(new Date('2020-08-15'), 5);
- * @returns {Date} Date in past as Date object
- */
-export const getDateInPast = (date, daysInPast) =>
-  new Date(newDate(date).setDate(date.getDate() - daysInPast));
-
-/**
- * Adds a given number of days to a given date and returns the new date.
- *
- * @param {Date} date the date that we will add days to
- * @param {Number} daysInFuture number of days that are added to a given date
- * @example
- * // returns Mon Aug 15 2020 00:00:00
- * getDateInFuture(new Date('2020-08-10'), 5);
- * @returns {Date} Date in future as Date object
- */
-export const getDateInFuture = (date, daysInFuture) =>
-  new Date(newDate(date).setDate(date.getDate() + daysInFuture));
-
-/**
- * Are the given two dates equal
- *
- * @param {Date} date1
- * @param {Date} date2
- * @returns {Boolean}
- */
-export const areDatesEqual = (date1, date2) =>
-  Boolean(date1 && date2 && new Date(date1).getTime() === new Date(date2).getTime());

package/src/utils/i18n.js

@@ -1,62 +0,0 @@
-import escape from 'lodash/escape';
-import { i18n } from '../config';
-
-const defaultPluralHandler = (n, singleValue, pluralValue) => {
-  const value = n === 1 ? singleValue : pluralValue;
-
-  return value.replace(/%d/g, n);
-};
-
-/**
- * Mark a label as translatable.
- *
- * @param {string} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
- * @param {string} defaultValue A fallback value to be relied on if the consumer doesn't have translation capabilities.
- * @returns {string} The translated label.
- */
-export const translate = (key, defaultValue) => i18n[key] ?? defaultValue;
-
-/**
- * Marks a label as translatable and pluralized.
- *
- * @param {*} key Translation key to be leveraged by the consumer to provide a generic translation at configuration time.
- * @param {*} singularValue The singular value to be relied on if the consumer doesn't have translation capabilities.
- * @param {*} pluralValue The plural value to be relied on if the consumer doesn't have translation capabilities.
- * @returns {function} A function that takes a number and returns the pluralized translated label.
- */
-export const translatePlural = (key, singularValue, pluralValue) => {
-  if (i18n[key]) {
-    return i18n[key];
-  }
-  return (x) => defaultPluralHandler(x, singularValue, pluralValue);
-};
-
-/**
- * Very limited implementation of sprintf supporting only named parameters.
- * Copied from the GitLab repo: https://gitlab.com/gitlab-org/gitlab/-/blob/0dff8b02accb3dccbf6cd31236834c37013aad59/app/assets/javascripts/locale/sprintf.js.
- * @param {string} input - (translated) text with parameters (e.g. '%{num_users} users use us')
- * @param {Object.<string, string|number>} [parameters] - object mapping parameter names to values (e.g. { num_users: 5 })
- * @param {boolean} [escapeParameters=true] - whether parameter values should be escaped (see https://lodash.com/docs/4.17.15#escape)
- * @returns {string} the text with parameters replaces (e.g. '5 users use us')
- * @see https://ruby-doc.org/core-2.3.3/Kernel.html#method-i-sprintf
- * @see https://gitlab.com/gitlab-org/gitlab-foss/issues/37992
- */
-export function sprintf(input, parameters, escapeParameters = true) {
-  let output = input;
-
-  output = output.replace(/%+/g, '%');
-
-  if (parameters) {
-    const mappedParameters = new Map(Object.entries(parameters));
-
-    mappedParameters.forEach((key, parameterName) => {
-      const parameterValue = mappedParameters.get(parameterName);
-      const escapedParameterValue = escapeParameters ? escape(parameterValue) : parameterValue;
-      // Pass the param value as a function to ignore special replacement patterns like $` and $'.
-      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#syntax
-      output = output.replace(new RegExp(`%{${parameterName}}`, 'g'), () => escapedParameterValue);
-    });
-  }
-
-  return output;
-}

package/src/utils/is_slot_empty.js

@@ -1,40 +0,0 @@
-import Vue from 'vue';
-
-// Fragment will be available only in Vue.js 3
-const { Fragment, Comment } = Vue;
-
-function callIfNeeded(fnOrResult, args) {
-  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
-}
-
-function isEmpty(vnode) {
-  if (!vnode || (Comment && vnode.type === Comment)) {
-    return true;
-  }
-
-  if (Array.isArray(vnode)) {
-    // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.every(isEmpty);
-  }
-
-  if (Fragment && vnode.type === Fragment) {
-    // Vue.js 3 fragment, check children
-    // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.children.every(isEmpty);
-  }
-
-  return false;
-}
-
-export function isSlotEmpty(vueInstance, slot, slotArgs) {
-  const isVue3 = Boolean(Fragment);
-
-  const slotContent = isVue3
-    ? // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
-      // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
-      callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs)
-    : vueInstance.$scopedSlots[slot]?.(slotArgs);
-
-  // eslint-disable-next-line unicorn/no-array-callback-reference
-  return isEmpty(slotContent);
-}

package/src/utils/number_utils.js

@@ -1,120 +0,0 @@
-/**
- * Adds two numbers together
- * @param {Number} a
- * @param {Number} b
- */
-export const addition = (a, b) => a + b;
-
-/**
- * Returns the sum of all arguments
- * @param  {...Number} numbers
- */
-export const sum = (...numbers) => numbers.reduce(addition); // eslint-disable-line unicorn/no-array-callback-reference
-
-/**
- * Returns the average of all arguments
- * @param  {...Number} numbers
- */
-export const average = (...numbers) => sum(...numbers) / numbers.length;
-
-/**
- * Returns the modulo of n for a divisor.
- *
- * Maps the integer n into the range [0, divisor) when the divisor is positive,
- * and (divisor, 0] when the divisor is negative.
- *
- * This is useful when indexing into an array, to ensure you always stay within
- * the array bounds.
- *
- * See https://2ality.com/2019/08/remainder-vs-modulo.html.
- *
- * @param {number} n The number to mod.
- * @param {number} divisor The divisor (e.g., the length of an array).
- * @returns {number}
- */
-export function modulo(n, divisor) {
-  const result = ((n % divisor) + divisor) % divisor;
-  // Never return -0.
-  return result === 0 ? 0 : result;
-}
-
-/**
- * Convert number to engineering format, using SI suffix
- * @param {Number|String} value - Number or Number-convertible String
- * @param {Number} precision
- * @return {String} number, possibly with a suffix
- */
-export const engineeringNotation = (value, precision = 2) => {
-  const invalidValues = [NaN, Infinity, -Infinity];
-  const num = Number(value);
-
-  if (invalidValues.includes(num) || invalidValues.includes(Number(precision))) {
-    return num.toString();
-  }
-
-  const allYourBase = {
-    '-24': 'y',
-    '-21': 'z',
-    '-18': 'a',
-    '-15': 'f',
-    '-12': 'p',
-    '-9': 'n',
-    '-6': 'μ',
-    '-3': 'm',
-    0: '',
-    3: 'k',
-    6: 'M',
-    9: 'G',
-    12: 'T',
-    15: 'P',
-    18: 'E',
-    21: 'Z',
-    24: 'Y',
-  };
-
-  const exponentialNotation = num.toExponential(precision);
-
-  const power = exponentialNotation.split('e').map(Number)[1] || 0;
-
-  if (power < -24 || power > 24) {
-    return exponentialNotation;
-  }
-
-  const scaledPower = 3 * Math.floor(power / 3);
-  const scaledMantissa = (exponentialNotation / 10 ** scaledPower)
-    // strip trailing decimals from floating point rounding errors
-    .toFixed(precision)
-    // strip trailing 0s after a decimal point
-    .replace(/\.([1-9]*)0+$/, (_, fractionalDigits) => {
-      if (fractionalDigits) {
-        return `.${fractionalDigits}`;
-      }
-      return '';
-    });
-
-  return `${scaledMantissa}${allYourBase[scaledPower]}`;
-};
-
-/**
- * Formats a number as a locale-based string using `Intl.NumberFormat`.
- *
- * 2333 -> 2,333
- * 232324 -> 232,324
- *
- * @param {Number|string} value - number to be converted
- * @param {{}?} options - options to be passed to
- * `Intl.NumberFormat` such as `unit` and `style`.
- * @param {String|String[]} locales - If set, forces a different
- * language code from the one currently in the document.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
- *
- * @returns {String}
- */
-export const formatNumberToLocale = (value, options = {}, locales = undefined) => {
-  if (Number.isNaN(Number(value))) {
-    return value;
-  }
-
-  return new Intl.NumberFormat(locales, options).format(value);
-};

package/src/utils/play_utils.js

@@ -1,9 +0,0 @@
-import { userEvent } from '@storybook/test';
-
-export const triggerBlurEvent = async () =>
-  userEvent.pointer([
-    {
-      keys: '[MouseLeft]',
-      coords: { x: 0, y: 0 },
-    },
-  ]);

package/src/utils/set_utils.js

@@ -1,24 +0,0 @@
-import isObject from 'lodash/isObject';
-
-/**
- * Purpose is a substitute of Vue.set but with preserving reactivity
- * New object can be assigned to data property of aa component
- * @param source
- * @param key
- * @param value
- * @returns {*}
- */
-export const setObjectProperty = (source, key, value = '') => {
-  if (!source || !key || !isObject(source)) {
-    return {};
-  }
-
-  if (typeof key !== 'string') {
-    return source;
-  }
-
-  return {
-    ...source,
-    [key]: value,
-  };
-};