tide-design-system 2.5.13 → 2.5.15

package/src/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,
-  };
-}

package/src/utilities/validation.ts

@@ -1,132 +0,0 @@
-import { formatNumber } from '@/utilities/format';
-
-import type { ValidationLength, ValidationResult, Validator } from '@/types/Validation';
-import type { Ref } from 'vue';
-
-export const errorMessageDefault = 'Please enter a valid value';
-
-export const VALIDATION_RESULT = {
-  NO_ERROR: {
-    message: '',
-    valid: true,
-  },
-  REQUIRED: {
-    message: 'Please fill out this field',
-    valid: false,
-  },
-} as const;
-
-export const checkFormat = (format: RegExp, message?: string) => {
-  return (value: string): ValidationResult => {
-    let result: ValidationResult = VALIDATION_RESULT.NO_ERROR;
-
-    if (!value.trim().match(format)) {
-      result = {
-        message: message ?? errorMessageDefault,
-        valid: false,
-      };
-    }
-
-    return result;
-  };
-};
-
-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;
-};
-
-export const getFieldValidationResult = ({
-  errorFromProps,
-  maxlength,
-  minlength,
-  required,
-  validators,
-  value,
-}: {
-  errorFromProps: string;
-  maxlength?: number;
-  minlength?: number;
-  required: boolean;
-  validators?: Validator[];
-  value: Ref<string>;
-}): ValidationResult => {
-  // error in props takes precedence over validation error
-  if (errorFromProps !== '')
-    return {
-      message: errorFromProps,
-      valid: false,
-    };
-
-  // custom validator prop errors from have second highest precedence
-  if (validators) {
-    const validation = validateProperty(value.value ?? '', validators);
-
-    if (!validation.valid) {
-      return validation;
-    }
-  }
-
-  // all other prop-based errors come last
-  if (required && value.value?.trim() === '') {
-    return VALIDATION_RESULT.REQUIRED;
-  }
-
-  if (maxlength || minlength) {
-    const lengthValidation = validateLength({
-      maxlength,
-      minlength,
-      required,
-      value: value.value,
-    });
-
-    if (!lengthValidation.valid) {
-      return lengthValidation;
-    }
-  }
-  return VALIDATION_RESULT.NO_ERROR;
-};
-
-export const validateLength = ({ maxlength, minlength, required, 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 = `Enter a value between ${formatNumber(minlength)} and ${formatNumber(maxlength)} characters`;
-  } else if (maxlength) {
-    response.message = `Use ${formatNumber(maxlength)} characters or fewer`;
-  } else if (minlength) {
-    response.message = `Enter at least ${formatNumber(minlength)} characters`;
-  }
-
-  return response;
-};
-
-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,
-  };
-}

package/src/utilities/viewport.ts

@@ -1,63 +0,0 @@
-import { nextTick } from 'vue';
-
-/**
- * Directly modifies the `<body>` element to apply or remove scroll lock.
- * When `false` is provided, it only unlocks scroll if there are no open
- * HTML dialog elements.
- */
-export const setScrollLock = async (isLocked: boolean) => {
-  // Cannot be applied to body tag in marketplace repo due to data-css-scope
-  // const BODY_LOCK_CLASS = 'body-scroll-lock';
-
-  const body = document.body;
-
-  if (isLocked) {
-    if (!body.dataset.scrollLockY) {
-      const scrollY = window.scrollY;
-
-      body.dataset.scrollLockY = scrollY.toString();
-      body.style.setProperty('--saved-scroll-y', `${scrollY}px`);
-      body.style.setProperty('inset', '0');
-      body.style.setProperty('margin-top', `calc(0px - var(--saved-scroll-y, 0px))`);
-      body.style.setProperty('overflow-y', 'scroll');
-      body.style.setProperty('position', 'fixed');
-
-      // Cannot be applied to body tag in marketplace repo due to data-css-scope
-      // body.classList.add(BODY_LOCK_CLASS);
-    }
-  } else {
-    await nextTick();
-    if (!document.querySelector('dialog[open]')) {
-      const savedScrollY = parseInt(body.dataset.scrollLockY || '0');
-
-      // Cannot be applied to body tag in marketplace repo due to data-css-scope
-      // body.classList.remove(BODY_LOCK_CLASS);
-
-      body.style.removeProperty('inset');
-      body.style.removeProperty('margin-top');
-      body.style.removeProperty('overflow-y');
-      body.style.removeProperty('position');
-      body.style.removeProperty('--saved-scroll-y');
-
-      window.scrollTo({
-        behavior: 'auto',
-        top: savedScrollY,
-      });
-
-      delete body.dataset.scrollLockY;
-    }
-  }
-};
-
-export const TOP_LAYER_ID = 'tide-top-layer';
-
-export const initFauxTopLayer = () => {
-  let topLayer = document.getElementById(TOP_LAYER_ID);
-  if (!topLayer) {
-    topLayer = document.createElement('div');
-    topLayer.id = TOP_LAYER_ID;
-    topLayer.setAttribute('data-css-scope', '');
-    document.body.appendChild(topLayer);
-  }
-  topLayer.style.isolation = 'isolate';
-};

package/tests/InternalBaseLink.spec.ts

@@ -1,61 +0,0 @@
-/// <reference types="vitest/globals" />
-
-import { mount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import { defineComponent, h, markRaw } from 'vue';
-
-import InternalBaseLink from '@/components/InternalBaseLink.vue';
-import { provideTideConfig } from '@/composables/useTideConfig';
-
-// @vitest-environment jsdom
-
-/* eslint-disable vue/one-component-per-file */
-const TestWrapper = defineComponent({
-  props: {
-    config: { type: Object, default: () => ({}) },
-  },
-  setup(props, { slots }) {
-    provideTideConfig(props.config);
-    return () => h(InternalBaseLink, null, slots);
-  },
-});
-/* eslint-enable vue/one-component-per-file */
-
-describe('InternalBaseLink', () => {
-  it('renders default <a> when no provider is used', () => {
-    const wrapper = mount(InternalBaseLink, {
-      slots: { default: 'Hello' },
-    });
-
-    expect(wrapper.element.tagName.toLowerCase()).toBe('a');
-    expect(wrapper.text()).toBe('Hello');
-  });
-
-  it('renders a provided custom link component', () => {
-    const CustomLink = markRaw(
-      /* eslint-disable vue/one-component-per-file */
-      defineComponent({
-        name: 'CustomLink',
-        render() {
-          return h('custom-link', {}, this.$slots.default?.());
-        },
-      })
-      /* eslint-enable vue/one-component-per-file */
-    );
-
-    const wrapper = mount(TestWrapper, {
-      props: {
-        config: {
-          linkComponent: CustomLink,
-        },
-      },
-      slots: {
-        default: 'Custom Content',
-      },
-    });
-
-    const btn = wrapper.find('custom-link');
-    expect(btn.exists()).toBe(true);
-    expect(btn.text()).toBe('Custom Content');
-  });
-});

package/tests/TideRealmLogo.spec.ts

@@ -1,58 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { describe, expect, it } from 'vitest';
-
-import { LOGO_WIDTH_LARGE } from '@/types/RealmLogo';
-
-const BRANDING_DIR = path.resolve(__dirname, '../src/assets/svg/branding');
-const LOGO_DIR = path.join(BRANDING_DIR, 'logo');
-const MARK_DIR = path.join(BRANDING_DIR, 'mark');
-
-function getViewBoxWidth(content: string): number | null {
-  const viewBoxMatch = content.match(/viewBox\s*=\s*["']0\s+0\s+(\d+\.?\d*)\s+\d+\.?\d*["']/i);
-  return viewBoxMatch ? parseFloat(viewBoxMatch[1]) : null;
-}
-
-describe('Realm Logo Constant Validation', () => {
-  const realms = Object.keys(LOGO_WIDTH_LARGE) as (keyof typeof LOGO_WIDTH_LARGE)[];
-
-  describe('Full Logos', () => {
-    realms.forEach((realm) => {
-      const fileName = `logo-${realm.toLowerCase()}.svg`;
-      const filePath = path.join(LOGO_DIR, fileName);
-
-      it(`should match the viewBox width in ${fileName}`, () => {
-        if (!fs.existsSync(filePath)) {
-          throw new Error(`SVG file missing: ${filePath}`);
-        }
-
-        const content = fs.readFileSync(filePath, 'utf8');
-        const vbWidth = getViewBoxWidth(content);
-
-        expect(vbWidth, `Could not parse viewBox in ${fileName}`).not.toBeNull();
-
-        expect(LOGO_WIDTH_LARGE[realm], `LOGO_WIDTH_LARGE[${realm}] does not match ${fileName}`).toBe(vbWidth);
-      });
-    });
-  });
-
-  describe('Logo Marks', () => {
-    realms.forEach((realm) => {
-      const fileName = `mark-${realm.toLowerCase()}.svg`;
-      const filePath = path.join(MARK_DIR, fileName);
-
-      it(`should match the viewBox width in ${fileName}`, () => {
-        if (!fs.existsSync(filePath)) {
-          throw new Error(`SVG file missing: ${filePath}`);
-        }
-
-        const content = fs.readFileSync(filePath, 'utf8');
-        const vbWidth = getViewBoxWidth(content);
-
-        expect(vbWidth, `Could not parse viewBox in ${fileName}`).not.toBeNull();
-
-        expect(vbWidth, `Logo mark width does not match ${fileName}`).toBe(32);
-      });
-    });
-  });
-});

package/tests/svg-icons.spec.ts

@@ -1,74 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { describe, expect, it } from 'vitest';
-
-const SVG_DIR: string = path.resolve(__dirname, '../src/assets/svg/icons');
-
-const numberRegex = /-?\d*\.\d+|-?\d+/g;
-
-function findExcessivePrecision(content: string, maxDecimals: number): string[] {
-  const matches = content.match(numberRegex);
-  if (!matches) return [];
-
-  return matches.filter((numStr) => {
-    if (numStr.includes('.')) {
-      const decimals = numStr.split('.')[1].length;
-      return decimals > maxDecimals;
-    }
-    return false;
-  });
-}
-
-describe('SVG validation tests', () => {
-  const svgFiles: string[] = fs.readdirSync(SVG_DIR).filter((file: string) => file.endsWith('.svg'));
-
-  it('should have at least one svg file to check', () => {
-    expect(svgFiles.length).toBeGreaterThan(0);
-  });
-
-  svgFiles.forEach((file: string) => {
-    describe(`"${file}"`, () => {
-      const filePath: string = path.join(SVG_DIR, file);
-      const content: string = fs.readFileSync(filePath, 'utf8');
-      const match: RegExpMatchArray | null = content.match(/<svg[^>]*>/i);
-
-      it('should contain an <svg> root element', () => {
-        expect(match).not.toBeNull();
-      });
-
-      if (match) {
-        const svgTag: string = match[0];
-
-        it("should have viewBox='0 0 24 24'", () => {
-          const viewBoxMatch: RegExpMatchArray | null = svgTag.match(/viewBox\s*=\s*["']([^"']+)["']/i);
-          expect(viewBoxMatch).not.toBeNull();
-          expect(viewBoxMatch![1]).toBe('0 0 24 24');
-        });
-
-        it('should not have a fill attribute', () => {
-          const hasFill: boolean = /\sfill\s*=\s*["'][^"']*["']/i.test(svgTag);
-          expect(hasFill).toBe(false);
-        });
-
-        it('should not have width or height attributes', () => {
-          const hasWidth: boolean = /\swidth\s*=\s*["'][^"']*["']/i.test(svgTag);
-          const hasHeight: boolean = /\sheight\s*=\s*["'][^"']*["']/i.test(svgTag);
-          expect(hasWidth).toBe(false);
-          expect(hasHeight).toBe(false);
-        });
-      }
-
-      const MAX_PRECISION = 3;
-
-      it(`should not contain numbers with more than ${MAX_PRECISION} decimal places`, () => {
-        const badNumbers = findExcessivePrecision(content, MAX_PRECISION);
-        expect(
-          badNumbers,
-          `Found overly precise numbers: ${badNumbers.join(
-            ', '
-          )}. Use www.svgomg.net to optimize the vector asset before committing it.`
-        ).toEqual([]);
-      });
-    });
-  });
-});