@gitlab/duo-ui 0.1.0

package/src/utils/constants.js

@@ -0,0 +1,347 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,63 @@
+// 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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,120 @@
+/**
+ * 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

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

package/src/utils/set_utils.js

@@ -0,0 +1,24 @@
+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,
+  };
+};