tide-design-system 2.5.13 → 2.5.14

package/src/utilities/format.ts

@@ -1,184 +0,0 @@
-const capitalizeFirst = (string: string) => {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-};
-
-const formatCamelCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/^[\s_-]/, '')
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .replace(/[\s_-]/g, ' ')
-        .toLowerCase()
-        .split(' ')
-        .map((word, index) => (index === 0 ? word : word.slice(0, 1).toUpperCase() + word.slice(1)))
-        .join('')
-    : input;
-};
-
-const formatKebabCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .toLowerCase()
-        .replace(/[\s_-]/g, '-')
-    : input;
-};
-
-const formatLabel = (value: string) => {
-  const labelMap: { [key: string]: string } = {
-    false: 'No',
-    true: 'Yes',
-  };
-  return Object.hasOwn(labelMap, value) ? labelMap[value] : value;
-};
-
-const formatNumber = (input: number | string): string => {
-  let output = input && typeof input === 'number' ? new Intl.NumberFormat().format(input) : String(input || '');
-  let digits = output;
-
-  if (input && typeof input === 'string') {
-    digits = digits.replace(/\D/g, '');
-    if (Number(digits)) {
-      output = new Intl.NumberFormat().format(Number(digits));
-    } else {
-      output = '0';
-    }
-  }
-
-  return output;
-};
-
-const formatPascalCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .replace(/[\s_-]/g, ' ')
-        .toLowerCase()
-        .split(' ')
-        .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
-        .join('')
-    : input;
-};
-
-const formatPhone = (input: number | string): string => {
-  let output = input && typeof input === 'number' ? String(input) : String(input || '');
-  let digits = output;
-  digits = digits.replace(/\D/g, '');
-
-  switch (digits.length) {
-    case 7:
-      output = `${digits.slice(0, 3)}-${digits.slice(3)}`;
-      break;
-    case 10:
-      output = `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
-      break;
-    case 11:
-      output = `${digits.slice(0, 1)}-${digits.slice(1, 4)}-${digits.slice(4, 7)}-${digits.slice(7)}`;
-      break;
-    default:
-      output = digits;
-      break;
-  }
-
-  return output;
-};
-
-const formatPrice = (input: number | string): string => {
-  const output = input ? formatNumber(input) : String(input || '0');
-  return `$${output}`;
-};
-
-const formatQuotes = (value: string) => {
-  if (value.startsWith('"') && value.endsWith('"')) {
-    return value.slice(1, -1);
-  } else {
-    return value;
-  }
-};
-
-const formatSentenceCase = (input: string): string => {
-  let sentenceCase = input;
-
-  if (input && typeof input === 'string') {
-    const lowerCase = input
-      .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-      .toLowerCase()
-      .replace(/[\s_-]/g, ' ');
-
-    sentenceCase = lowerCase.slice(0, 1).toUpperCase() + lowerCase.slice(1);
-  }
-
-  return sentenceCase;
-};
-
-const formatSnakeCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .toLowerCase()
-        .replace(/[\s_-]/g, '_')
-    : input;
-};
-
-const formatTitleCase = (input: string): string => {
-  return input && typeof input === 'string'
-    ? input
-        .replace(/([a-z]{1})([A-Z]{1})/g, '$1 $2')
-        .toLowerCase()
-        .replace(/[\s_-]/g, ' ')
-        .split(' ')
-        .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
-        .join(' ')
-    : input;
-};
-
-const formatUrlFromRoot = (url: string) => {
-  const urlFormatted = url.split('.com/');
-
-  return urlFormatted.length > 1 ? `/${urlFormatted[1]}` : url;
-};
-
-const formatWeight = (input: number | string): string => {
-  const output = input ? formatNumber(input) : String(input || '0');
-  return `${output} lbs`;
-};
-
-const getArticle = (noun: string, isPlural = false, isDefinite = false) => {
-  const vowels = ['a', 'e', 'i', 'o', 'u'];
-  const isVowelLeading = vowels.includes(noun.charAt(0));
-
-  return isDefinite ? 'the' : isPlural ? 'some' : isVowelLeading ? 'an' : 'a';
-};
-
-const priceToNumber = (value: string) => {
-  if (Number.isNaN(Number(value))) {
-    value = value.replace('$', '');
-    value = value.replace(/,/g, '');
-  }
-  return parseInt(value, 10);
-};
-
-const unformatPrice = (input: string): string => {
-  const output = input.replace(/\$/g, '').replace(/,/g, '');
-  return `${output}`;
-};
-
-export {
-  capitalizeFirst,
-  formatCamelCase,
-  formatKebabCase,
-  formatLabel,
-  formatNumber,
-  formatPascalCase,
-  formatPhone,
-  formatPrice,
-  formatQuotes,
-  formatSentenceCase,
-  formatSnakeCase,
-  formatTitleCase,
-  formatUrlFromRoot,
-  formatWeight,
-  getArticle,
-  priceToNumber,
-  unformatPrice,
-};

package/src/utilities/forms.ts

@@ -1,22 +0,0 @@
-import { INPUT_MODE, TEXT_INPUT_TYPE } from '@/types/TextInput';
-
-import type { InputMode, TextInputType } from '@/types/TextInput';
-
-export const getTextInputMode = (type: TextInputType, inputmode?: InputMode): InputMode | undefined => {
-  if (inputmode) return inputmode;
-
-  switch (type) {
-    case TEXT_INPUT_TYPE.TEL:
-      return INPUT_MODE.TEL;
-    case TEXT_INPUT_TYPE.SEARCH:
-      return INPUT_MODE.SEARCH;
-    case TEXT_INPUT_TYPE.NUMBER:
-      return INPUT_MODE.NUMERIC;
-    case TEXT_INPUT_TYPE.EMAIL:
-      return INPUT_MODE.EMAIL;
-    case TEXT_INPUT_TYPE.URL:
-      return INPUT_MODE.URL;
-  }
-
-  return undefined;
-};

package/src/utilities/realm.ts

@@ -1,17 +0,0 @@
-import { REALM } from '@/types/Realm';
-
-import type { Realm, RealmKey } from '@/types/Realm';
-
-export const getRealmKeyFromRealm = (realm: Realm): RealmKey => {
-  const entries = Object.entries(REALM) as [RealmKey, Realm][];
-
-  const match = entries.find((entry): entry is [RealmKey, Realm] => {
-    return entry[1] === realm;
-  });
-
-  if (!match) {
-    throw new Error(`Mapping for ${realm} not found`);
-  }
-
-  return match[0];
-};

package/src/utilities/storybook.ts

@@ -1,354 +0,0 @@
-import { ELEMENT, ELEMENT_BROAD } from '@/types/Element';
-import { BOOLEAN, BOOLEAN_UNREQUIRED, NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
-import { CSS } from '@/types/Styles';
-import { formatKebabCase } from '@/utilities/format';
-
-import type { ArgTypes, StoryContext } from '@storybook/vue3';
-
-type KeyString = { [key: string]: string };
-
-// Extensible object of key/value pairs
-type KeyValue = { [key: string]: any };
-
-// Object with a retrievable key and an extensible object of key/value pairs as the value
-type KeyValueNamed = {
-  [key: string]: KeyValue;
-};
-
-type Nested = {
-  [key: string]: string | Nested;
-};
-
-export const lineBreak = '\r';
-export const tab = '  ';
-
-export const argTypeBoolean = {
-  control: 'select',
-  options: BOOLEAN,
-  table: {
-    defaultValue: { summary: 'False' },
-    type: { summary: 'boolean' },
-  },
-};
-
-export const argTypeBooleanUnrequired = {
-  control: 'select',
-  options: BOOLEAN_UNREQUIRED,
-  table: {
-    defaultValue: { summary: 'None' },
-    type: { summary: 'boolean' },
-  },
-};
-
-export const argTypeDimension = {
-  control: {
-    max: 500,
-    min: 100,
-    step: 100,
-    type: 'number',
-  },
-  table: {
-    defaultValue: { summary: 'None' },
-    type: { summary: 'number (px)' },
-  },
-};
-
-export const change = {
-  control: 'text',
-  description: 'JS code or function to execute on change event',
-  isEmit: true,
-  name: 'change',
-  table: {
-    category: 'Events',
-    defaultValue: { summary: 'None' },
-    type: { summary: '() => void' },
-  },
-};
-
-export const click = {
-  control: 'text',
-  description: 'JS code or function to execute on click event',
-  isEmit: true,
-  table: {
-    category: 'Events',
-    defaultValue: { summary: 'None' },
-    type: { summary: '() => void' },
-  },
-};
-
-export const close = {
-  control: 'text',
-  description: 'JS code or function to execute on close event',
-  isEmit: true,
-  table: {
-    category: 'Events',
-    defaultValue: { summary: 'None' },
-    type: { summary: '() => void' },
-  },
-};
-
-export const dataTrack = {
-  control: 'text',
-  description: 'Data attribute for external tracking',
-  table: {
-    category: 'Native',
-    defaultValue: { summary: 'None' },
-    type: { summary: 'string' },
-  },
-};
-
-export const disabledArgType = {
-  table: {
-    disable: true,
-  },
-};
-
-export const isProduction = process.env.NODE_ENV === 'production';
-
-export const doSomething = (message: string = 'Did something.') => {
-  const doSomethingAlert = document.getElementById('do-something-alert');
-
-  if (!doSomethingAlert) return;
-
-  doSomethingAlert.innerHTML = message;
-  doSomethingAlert.style.opacity = '1';
-
-  setTimeout(() => {
-    doSomethingAlert.style.opacity = '0';
-  }, 1000);
-};
-
-export const doSomethingElse = () => {
-  doSomething('Did something else.');
-};
-
-// Flatten a nested constant into a simple constant.
-export const flatten = (input: Nested): KeyString => {
-  const output: KeyString = {};
-
-  Object.entries(input).forEach(([key, value]) => {
-    if (typeof value === 'string') {
-      output[key] = value;
-    } else {
-      const flattened = flatten(value);
-
-      Object.entries(flattened).forEach(([key2, value2]) => {
-        output[`${key}.${key2}`] = value2;
-      });
-    }
-  });
-
-  return output;
-};
-
-// Accept a KeyValue as the value of an object with a retrievable key as a Storybook argType.
-export const formatArgType = (collection: KeyValueNamed) => {
-  const constant = getKey(collection);
-  const keyValues: KeyValue = collection[constant];
-
-  return {
-    constant,
-    control: 'select',
-    options: {
-      ...keyValues,
-    },
-    table: {
-      defaultValue: { summary: 'None' },
-      type: { summary: constant },
-    },
-  };
-};
-
-export const formatArgTypeCheck = (collection: KeyValueNamed) => {
-  const constant = getKey(collection);
-  const keyValues: KeyValue = collection[constant];
-
-  return {
-    constant,
-    control: 'check',
-    options: {
-      ...keyValues,
-    },
-    table: {
-      defaultValue: { summary: 'None' },
-      type: { summary: constant },
-    },
-  };
-};
-
-export const formatValueAsConstant = (keyValue: KeyValue, argTypes: ArgTypes): string => {
-  const [key, value] = Object.entries(keyValue)[0];
-  let constant: string = '';
-
-  const arg: ArgTypes = argTypes[key];
-
-  Object.entries(arg.options).forEach(([optionKey, optionValue]) => {
-    if (value === optionValue) {
-      constant = `${argTypes[key].constant}.${optionKey}`;
-    }
-  });
-
-  return constant;
-};
-
-export const formatSnippet = (code: string, context: StoryContext) => {
-  const tag = context.component?.__name;
-  const { args, argTypes } = context;
-
-  let classNames: string[] = [];
-
-  let attributes = Object.entries(args).map((arg: any) => {
-    const key = arg[0];
-    let value = arg[1];
-    const argType: ArgTypes = argTypes[key];
-    const conditionKey = argType.if?.arg;
-    const conditionValue = argType.if?.eq;
-
-    // TODO: TypeScript doesn't seem to believe the implict shapes of Storybook's native types?
-    const controlType = argType?.control?.type as any;
-
-    // If arg is conditional, hide when conditional is not met.
-    const isClick = key === 'click';
-    const isConditionMet = argType.if ? args[conditionKey] === conditionValue : true;
-    const isConstant = Object.keys(argTypes).includes(key) && !!argType.constant && controlType === 'select';
-    const isConstants = Object.keys(argTypes).includes(key) && !!argType.constant && controlType === 'check';
-    const isCustom = argType.isCustom;
-    const isDynamic = argType.isDynamic || isConstant || isConstants || typeof value === 'boolean';
-    const isEmpty = !isDynamic && value === '';
-    const isExcluded = value === undefined || (Array.isArray(value) && !value.length);
-    const isEmit = argType.isEmit;
-    const isSlot = key === 'default';
-
-    if (argType.isCss) {
-      classNames.push(value);
-    }
-
-    if (isConstant && value !== 'None') {
-      const arg: ArgTypes = argType;
-
-      Object.entries(arg.options).forEach(([optionKey, optionValue]) => {
-        if (value === optionValue) {
-          value = `${argType.constant}.${optionKey}`;
-        }
-      });
-    }
-
-    if (isConstants && value.length) {
-      const constantSlots: string[] = [];
-
-      Object.entries(argType.options).forEach(([optionKey, optionValue]) => {
-        value.forEach((valueSlot: any) => {
-          if (valueSlot === optionValue) {
-            constantSlots.push(`${argTypes[key].constant}.${optionKey}`);
-          }
-        });
-      });
-
-      value = `[${constantSlots.join(', ')}]`;
-    }
-
-    if (isCustom) {
-      return `:${formatKebabCase(key)}="${key}"`;
-    }
-
-    if (
-      isClick &&
-      value &&
-      (!args.element || args.element === ELEMENT.BUTTON || args.element === ELEMENT_BROAD.BUTTON)
-    ) {
-      return `@click="${value}"`;
-    }
-
-    if (isEmit) {
-      if (value) {
-        return `@${argType.name}="${value}"`;
-      }
-    }
-
-    if (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
-      return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
-    }
-  });
-
-  classNames = classNames.filter((className) => !!className);
-
-  if (classNames.length > 0) attributes.push(`class="${classNames.join(' ')}"`);
-
-  attributes = attributes.filter((attribute) => !!attribute).sort();
-
-  if (attributes) attributes.unshift('');
-
-  return args.default
-    ? `<${tag}${attributes.join(' ')}>${lineBreak}${tab}${args.default}${lineBreak}</${tag}>`
-    : `<${tag}${attributes.join(' ')} />`;
-};
-
-export const formatSnippetMinimal = (code: string) => {
-  return code.replace(/<[/]*template>/g, '');
-};
-
-export const getConstantByValue = (value: string) => {
-  const compareRecursively = (basis: string, shape: string | object, depth: number = 0): string | void => {
-    let output;
-
-    Object.entries(shape).forEach((entry: string[]) => {
-      const key = entry[0];
-      const value = entry[1];
-      const type = typeof value;
-
-      if (type === 'string' && basis === value) {
-        output = key;
-        return;
-      } else if (type === 'object') {
-        const match = compareRecursively(basis, value, depth + 1);
-
-        if (match) {
-          output = `${key}.${match}`;
-          return;
-        }
-      }
-    });
-
-    return output;
-  };
-
-  const constant = compareRecursively(value, CSS);
-
-  return constant ? `CSS.${constant}` : undefined;
-};
-
-export const getConstantsByValues = (classNames: string[]) =>
-  classNames.map((className) => getConstantByValue(className));
-
-export const getKey = (input: any) => Object.keys(input)[0];
-
-// Invert key/value pairs bc Storybook control option format is unintuitive.
-export const getLabelsFromOptions = (options: any) => {
-  const labels: { [key: string]: string } = {};
-
-  Object.entries(options).forEach(([key, value]) => {
-    labels[`${value}`] = key;
-  });
-
-  return labels;
-};
-
-export const parameters = {
-  docs: {
-    source: {
-      format: 'vue',
-      language: 'html',
-      transform: formatSnippet,
-    },
-  },
-};
-
-// Prepend a key/value pair to a constant.
-export const prependKeyValue = (collection: KeyValue, keyValue: KeyValue) => ({
-  ...keyValue,
-  ...collection,
-});
-
-export const prependNoneAsUndefined = (collection: KeyValue) => prependKeyValue(collection, NoneAsUndefined);
-
-export const prependNoneAsEmpty = (collection: KeyValue) => prependKeyValue(collection, NoneAsEmpty);