tide-design-system 2.0.0

package/dist/utilities/format.ts

@@ -0,0 +1,148 @@
+import type { RealmConfig } from '@/types/RealmConfig';
+
+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 formatNumber = (input: number | string): string => {
+  const integer = typeof input === 'number' ? input : parseInt(input.match(/\d/g)?.join('') || '', 10);
+  const output = integer ? new Intl.NumberFormat().format(integer) : '';
+
+  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 => {
+  const integer = typeof input === 'number' ? input : parseInt(input.match(/\d/g)?.join('') || '', 10);
+  let output = integer ? String(integer) : '';
+
+  if (integer && typeof integer === 'number') {
+    const digits = String(integer);
+
+    output = digits;
+
+    if (digits) {
+      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:
+          break;
+      }
+    }
+  }
+
+  return output;
+};
+
+const formatPrice = (input: number | string): string => {
+  const output = formatNumber(input);
+
+  return `$${output || '--'}`;
+};
+
+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 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 getCdn = (realm: RealmConfig) => {
+  return `https://cdn.${realm.cdn.domain}.com`;
+};
+
+const getCdnMediaRoot = (realm: RealmConfig) => {
+  return `https://cdn.${realm.cdn.domain}.com/${realm.cdn.version}/media`;
+};
+
+const removeMarkup = (markup: string) => {
+  return markup.replace(/<[^>]*>/g, '');
+};
+
+export {
+  formatCamelCase,
+  formatKebabCase,
+  formatNumber,
+  formatPascalCase,
+  formatPhone,
+  formatPrice,
+  formatSentenceCase,
+  formatSnakeCase,
+  formatTitleCase,
+  getArticle,
+  getCdn,
+  getCdnMediaRoot,
+  removeMarkup,
+};

package/dist/utilities/forms.ts

@@ -0,0 +1,47 @@
+import type { Ref } from 'vue';
+import type { SelectOption } from '@/types/Select';
+import type { ValidationError, Validator } from '@/types/Validation';
+
+import { errorMessageDefault, validateProperty } from '@/utilities/validation';
+
+export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
+  errorFromProps !== false || errorFromRef !== false;
+
+export const getSelectOptionsFromStrings = (strings: string[]) =>
+  strings.map(
+    (option) =>
+      ({
+        label: option,
+        value: option,
+      } as SelectOption)
+  );
+
+export const getSupportingText = (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;
+};
+
+export const handleFieldValidation = ({
+  error,
+  errorFromProps,
+  validators,
+  value,
+}: {
+  error: Ref<ValidationError>;
+  errorFromProps: ValidationError;
+  validators?: Validator[];
+  value: Ref<string>;
+}) => {
+  // error in props takes precedence over validation error
+  error.value = errorFromProps;
+
+  if (!errorFromProps && validators) {
+    const validation = validateProperty(value.value, validators);
+
+    if (!validation.valid) {
+      error.value = validation.message;
+    }
+  }
+};

package/dist/utilities/media.ts

@@ -0,0 +1,77 @@
+import { MEDIA_SLIDE_TYPES, type ListingMedia } from '@/types/ListingMedia';
+import type { VehicleDetail } from '@/types/VehicleDetail';
+
+export function getIdFromYoutubeUrl(url: string): string {
+  const prefixes = [
+    'http://www.youtube.com/v/',
+    'https://www.youtube.com/v/',
+    'http://www.youtube.com/watch?v=',
+    'https://www.youtube.com/watch?v=',
+    'http://youtu.be/',
+    'https://youtu.be/',
+  ];
+
+  let id = url;
+  prefixes.forEach((separator) => {
+    if (url.includes(separator)) {
+      id = url.split(separator).join('');
+    }
+  });
+
+  return id;
+}
+
+export function getListingMediaSlides(vehicle: VehicleDetail): ListingMedia[] {
+  const slides: ListingMedia[] = [];
+
+  // insert at a specific index but also handle cases where the index is out of bounds
+  const insertSlideAtIndex = (slide: ListingMedia, index: number) => {
+    slides.splice(Math.min(index, slides.length), 0, slide);
+  };
+
+  vehicle.photos.forEach((photo) => {
+    slides.push({
+      imageUrl: String(photo.url),
+      type: MEDIA_SLIDE_TYPES.IMAGE.IMAGE,
+    });
+  });
+
+  if (vehicle.floorPlanMediaId) {
+    insertSlideAtIndex(
+      {
+        imageUrl: String(vehicle.floorPlanMediaId),
+        type: MEDIA_SLIDE_TYPES.IMAGE.FLOORPLAN,
+      },
+      1
+    );
+  }
+
+  if (vehicle.video) {
+    insertSlideAtIndex(
+      {
+        imageUrl: String(vehicle.video.thumbnail),
+        type: MEDIA_SLIDE_TYPES.VIDEO,
+        videoUrl: String(vehicle.video.url),
+      },
+      2
+    );
+  }
+
+  if (vehicle.vrUrl) {
+    insertSlideAtIndex(
+      {
+        imageUrl: vehicle.photos?.[0]?.url && String(vehicle.photos[0].url),
+        type: MEDIA_SLIDE_TYPES.VR,
+        vrUrl: String(vehicle.vrUrl),
+      },
+      3
+    );
+  }
+
+  return slides;
+}
+
+export function getSlideIndex(slideToFind: ListingMedia, allSlides: ListingMedia[]): number {
+  // TODO: find a better way of matching a slide. this is not good.
+  return allSlides.findIndex((slide) => slide === slideToFind);
+}

package/dist/utilities/storybook.ts

@@ -0,0 +1,237 @@
+import type { ArgTypes } from '@storybook/vue3';
+
+import { BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
+
+// 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;
+};
+
+import type { StoryContext } from '@storybook/vue3';
+
+import { formatKebabCase } from '@/utilities/format';
+import { NoneAsEmpty, NoneAsUndefined } from '@/types/Storybook';
+
+export const lineBreak = '\r';
+export const tab = '  ';
+
+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 click = {
+  control: 'text',
+  description: 'JS function to execute on click',
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: 'function' },
+  },
+};
+
+export const dataTrack = {
+  control: 'text',
+  description: 'Data attribute for external tracking',
+  table: {
+    defaultValue: { summary: 'None' },
+    type: { summary: 'string' },
+  },
+};
+
+export const doSomething = () => {
+  alert('Did something.');
+};
+
+// 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 isSlot = key === 'default';
+    const isExcluded = value === undefined || (Array.isArray(value) && !value.length);
+
+    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 (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
+      return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
+    }
+
+    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}"`;
+    }
+  });
+
+  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 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.ts

@@ -0,0 +1,92 @@
+import type { Ref } from 'vue';
+import type { StringField } from '@/types/Field';
+import type { ValidationResult } from '@/types/Validation';
+
+export function checkFormat(format: RegExp) {
+  return (value: string): ValidationResult => {
+    let result = {
+      message: '',
+      valid: true,
+    };
+
+    if (!value.trim().match(format)) {
+      result = {
+        message: errorMessageDefault,
+        valid: false,
+      };
+    }
+
+    return result;
+  };
+}
+
+export function checkLength(minlength?: number, maxlength?: number) {
+  return (value: string): ValidationResult => {
+    const valid = getFieldLengthIsValid({
+      maxlength,
+      minlength,
+      value,
+    });
+
+    let message = valid ? '' : errorMessageDefault;
+
+    if (maxlength && minlength) {
+      message = `Please enter a value between ${minlength} and ${maxlength} characters in length.`;
+    }
+
+    return {
+      message,
+      valid,
+    };
+  };
+}
+
+export const getFieldLengthIsValid = ({
+  maxlength,
+  minlength,
+  value,
+}: {
+  maxlength?: number;
+  minlength?: number;
+  value: string;
+}) => {
+  const tooShort = maxlength && value.length > maxlength;
+  const tooLong = minlength && value.length < minlength;
+
+  return !tooShort && !tooLong;
+};
+
+export const errorMessageDefault = 'Please enter a valid value.';
+
+export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringField | 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;
+}
+
+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/package.json

@@ -0,0 +1,63 @@
+{
+  "author": "Trader Interactive",
+  "dependencies": {},
+  "description": "TIDE Design System",
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@storybook/addon-a11y": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/test": "^8.0.9",
+    "@storybook/vue3": "^8.0.9",
+    "@storybook/vue3-vite": "^8.0.9",
+    "@tsconfig/node18": "^2.0.1",
+    "@types/node": "^18.16.16",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.32.0",
+    "@vue/eslint-config-airbnb-with-typescript": "^7.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "happy-dom": "^8.9.0",
+    "jsdom": "^21.1.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^8.0.9",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0",
+    "vitest": "^0.31.0",
+    "vue": "^3.2.45",
+    "vue-tsc": "^1.0.12"
+  },
+  "exports": {
+    ".": "./dist/tide-design-system.js",
+    "./css": "./dist/style.css",
+    "./css/*": "./dist/css/*.css",
+    "./types/*": "./dist/types/*.ts"
+  },
+  "files": [
+    "dist",
+    "!dist/utilities/storybook.js"
+  ],
+  "license": "MIT",
+  "main": "./dist/tide-design-system.js",
+  "name": "tide-design-system",
+  "scripts": {
+    "build": "run-p type-check build-only",
+    "build-only": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/types/ dist/types/ && cp -r src/utilities/ dist/utilities/",
+    "build-storybook": "storybook build",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
+    "lint:fix": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore --fix",
+    "sb": "npm run storybook",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest run",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "type": "module",
+  "version": "2.0.0"
+}