tide-design-system 2.4.1 → 2.4.2

package/dist/utilities/storybook.ts

@@ -1,352 +0,0 @@
-import { ELEMENT, ELEMENT_TEXT_AS_ICON } 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',
-  description: 'Determines whether CSS utility is present',
-  options: BOOLEAN,
-  table: {
-    defaultValue: { summary: 'False' },
-    type: { summary: 'boolean' },
-  },
-};
-
-export const argTypeBooleanUnrequired = {
-  control: 'select',
-  description: 'True, False, or undefined<br />(for demonstration purposes)',
-  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: {
-    defaultValue: { summary: 'None' },
-    type: { summary: '() => void' },
-  },
-};
-
-export const click = {
-  control: 'text',
-  description: 'JS code or function to execute on click event',
-  isEmit: true,
-  table: {
-    defaultValue: { summary: 'None' },
-    type: { summary: '() => void' },
-  },
-};
-
-export const close = {
-  control: 'text',
-  description: 'JS code or function to execute on close event',
-  isEmit: true,
-  table: {
-    defaultValue: { summary: 'None' },
-    type: { summary: '() => void' },
-  },
-};
-
-export const dataTrack = {
-  control: 'text',
-  description: 'Data attribute for external tracking',
-  table: {
-    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) => {
-  const [key, value] = Object.entries(keyValue)[0];
-  let constant;
-
-  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_TEXT_AS_ICON.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);

package/dist/utilities/validation-deprecated.ts

@@ -1,252 +0,0 @@
-import { priceToNumber } from '@/utilities/format';
-
-import type { StringInput } from '@/types/FormDeprecated';
-import type { SelectOption } from '@/types/Select';
-import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/ValidationDeprecated';
-import type { Ref } from 'vue';
-
-/**
- * @deprecated
- */
-type RangeData = {
-  min: number | null;
-  max: number | null;
-};
-
-/**
- * @deprecated
- */
-export const errorMessageDefault = 'Please enter a valid value.';
-
-/**
- * @deprecated
- */
-export const noError = {
-  message: '',
-  valid: true,
-} as Readonly<ValidationResult>;
-
-/**
- * @deprecated
- */
-export const checkFormat = (format: RegExp) => {
-  return (value: string): ValidationResult => {
-    let result = noError;
-
-    if (!value.trim().match(format)) {
-      result = {
-        message: errorMessageDefault,
-        valid: false,
-      };
-    }
-
-    return result;
-  };
-};
-
-/**
- * @deprecated
- */
-export const getErrorMessage = (errorFromProps: ValidationError, errorFromRef: ValidationError) => {
-  // error in props takes precedence over validation error
-  if (typeof errorFromProps === 'string' && errorFromProps.length > 0) return errorFromProps;
-
-  return typeof errorFromRef === 'string' && errorFromRef.length > 0 ? errorFromRef : errorMessageDefault;
-};
-
-/**
- * @deprecated
- */
-export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
-  errorFromProps !== false || errorFromRef !== false;
-
-/**
- * @deprecated
- */
-export const getFieldLengthIsValid = ({ maxlength, minlength, required, value }: ValidationLength) => {
-  const isEmptyAndUnrequired = value.length === 0 && !required;
-  const isTooLong = maxlength && value.length > maxlength;
-  const isTooShort = !isEmptyAndUnrequired && minlength && value.length < minlength;
-
-  return !isTooShort && !isTooLong;
-};
-
-/**
- * @deprecated
- */
-export const getMaxRangeIsValid = ({ min }: Pick<RangeData, 'min'>, type?: 'price') => {
-  return (value: string): ValidationResult => {
-    let newMax: number | null = type === 'price' ? priceToNumber(value) : Number(value);
-    newMax = !isNaN(newMax) ? newMax : null;
-    if (min && newMax) {
-      if (newMax >= min) {
-        return {
-          message: '',
-          valid: true,
-        };
-      } else {
-        return {
-          message: `Must be greater than min`,
-          valid: false,
-        };
-      }
-    } else {
-      return noError;
-    }
-  };
-};
-
-/**
- * @deprecated
- */
-export const getMinRangeIsValid = ({ max }: Pick<RangeData, 'max'>, type?: 'price') => {
-  return (value: string): ValidationResult => {
-    let newMin: number | null = type === 'price' ? priceToNumber(value) : Number(value);
-    newMin = !isNaN(newMin) ? newMin : null;
-    if (max && newMin) {
-      if (newMin <= max) {
-        return {
-          message: '',
-          valid: true,
-        };
-      } else {
-        return {
-          message: `Must be less than max`,
-          valid: false,
-        };
-      }
-    } else {
-      return noError;
-    }
-  };
-};
-
-/**
- * @deprecated
- */
-export const getSelectOptionsFromStrings = (strings: string[]) =>
-  strings.map(
-    (option) =>
-      ({
-        label: option,
-        value: option,
-      } as SelectOption)
-  );
-
-/**
- * @deprecated
- */
-export const handleFieldValidation = ({
-  error,
-  errorFromProps,
-  maxlength,
-  minlength,
-  required = false,
-  validators,
-  value,
-}: {
-  error: Ref<ValidationError>;
-  errorFromProps: ValidationError;
-  maxlength?: number;
-  minlength?: number;
-  required?: boolean;
-  validators?: Validator[];
-  value?: Ref<string | undefined>;
-}) => {
-  // error in props takes precedence over validation error
-
-  error.value = errorFromProps ? errorFromProps : false;
-
-  if (!error.value && validators) {
-    const validation = validateProperty(value?.value || '', validators);
-
-    if (!validation.valid) {
-      error.value = validation.message;
-    }
-  }
-
-  if (!error.value && (maxlength || minlength)) {
-    const lengthValidation = validateLength({
-      maxlength,
-      minlength,
-      required,
-      value: value?.value || '',
-    });
-
-    if (!lengthValidation.valid) {
-      error.value = lengthValidation.message;
-    }
-  }
-};
-
-/**
- * @deprecated
- */
-export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringInput | null> }) {
-  let valid = true;
-
-  for (const key in fields) {
-    if (fields[key].value?.required) {
-      const value = fields[key].value?.value;
-      valid = valid && !!value && value.trim() !== '';
-    }
-
-    const error = fields[key].value?.error;
-    valid = valid && !error;
-  }
-
-  return valid;
-}
-
-/**
- * @deprecated
- */
-export const validateLength = ({
-  maxlength,
-  minlength,
-  required = false,
-  value,
-}: ValidationLength): ValidationResult => {
-  const response = {
-    message: '',
-    valid: true,
-  };
-
-  response.valid = getFieldLengthIsValid({
-    maxlength,
-    minlength,
-    required,
-    value,
-  });
-
-  if (response.valid) return response;
-
-  response.message = errorMessageDefault;
-
-  if (maxlength && minlength) {
-    response.message = `Please enter a value between ${minlength} and ${maxlength} characters in length.`;
-  } else if (maxlength) {
-    response.message = `Please enter a value no more than ${maxlength} characters in length.`;
-  } else if (minlength) {
-    response.message = `Please enter a value no less than ${minlength} characters in length.`;
-  }
-
-  return response;
-};
-
-/**
- * @deprecated
- */
-export function validateProperty(value: string, validators: ((value: string) => ValidationResult)[]): ValidationResult {
-  for (const validator of validators) {
-    const validation = validator(value);
-    if (!validation.valid) {
-      return validation;
-    }
-  }
-
-  return {
-    message: '',
-    valid: true,
-  };
-}