tide-design-system 2.0.0 → 2.0.2

package/dist/types/Styles.ts

@@ -22,11 +22,31 @@ export const CSS = {
     END: 'tide-axis2-end',
     START: 'tide-axis2-start',
   },
+  BG: {
+    PRIMARY: 'tide-bg-primary',
+    SECONDARY: 'tide-bg-secondary',
+    SURFACE: {
+      ACCENT: 'tide-bg-surface-accent',
+      ACCENT_VARIANT: 'tide-bg-surface-accent-variant',
+      BRAND: 'tide-bg-surface-brand',
+      DEFAULT: 'tide-bg-surface',
+      FLOATING: 'tide-bg-surface-floating',
+      GRADIENT: 'tide-bg-surface-gradient',
+      VARIANT: 'tide-bg-surface-variant',
+    },
+  },
   BORDER: {
     BOTTOM: {
       ONE: 'tide-border-bottom-1',
       TWO: 'tide-border-bottom-2',
     },
+    COLOR: {
+      DEFAULT: 'tide-border',
+      FLOATING: 'tide-border-floating',
+      HIGH: 'tide-border-high',
+      LOW: 'tide-border-low',
+      PRIMARY: 'tide-border-primary',
+    },
     FULL: {
       ONE: 'tide-border-1',
       TWO: 'tide-border-2',
@@ -60,17 +80,18 @@ export const CSS = {
   CURSOR: {
     NOT_ALLOWED: 'tide-cursor-not-allowed',
     POINTER: 'tide-cursor-pointer',
+    TEXT: 'tide-cursor-text',
   },
   DISPLAY: {
     BLOCK: 'tide-display-block',
     CONTENTS: 'tide-contents',
     FLEX: 'tide-display-flex',
     GRID: 'tide-display-grid',
-    HIDDEN: 'tide-display-hidden',
     INITIAL: 'initial',
     INLINE: 'tide-display-inline',
     INLINE_BLOCK: 'tide-display-inline-block',
     INLINE_FLEX: 'tide-display-inline-flex',
+    NONE: 'tide-display-none',
   },
   FLEX: {
     DIRECTION: {
@@ -90,6 +111,17 @@ export const CSS = {
     WRAP: 'tide-flex-wrap',
   },
   FONT: {
+    COLOR: {
+      PRIMARY: 'tide-font-on-primary',
+      SECONDARY: 'tide-font-on-secondary',
+      SURFACE: {
+        BRAND: 'tide-font-on-surface-brand',
+        DEFAULT: 'tide-font-on-surface',
+        INVERSE: 'tide-font-on-surface-inverse',
+        VARIANT: 'tide-font-on-surface-variant',
+        VARIANT_INVERSE: 'tide-font-on-surface-variant-inverse',
+      },
+    },
     SIZE: {
       FOURTEEN: 'tide-font-14',
       SIXTEEN: 'tide-font-16',
@@ -303,7 +335,7 @@ export const cssSortOrder = [
   CSS.DISPLAY.CONTENTS,
   CSS.DISPLAY.FLEX,
   CSS.DISPLAY.GRID,
-  CSS.DISPLAY.HIDDEN,
+  CSS.DISPLAY.NONE,
   CSS.DISPLAY.INITIAL,
   CSS.DISPLAY.INLINE,
   CSS.DISPLAY.INLINE_BLOCK,

package/dist/types/Validation.ts

@@ -11,8 +11,14 @@ export const VALIDATOR = {
 
 export type ValidationError = string | boolean;
 export type ValidationResult = {
-  valid: boolean;
   message: string;
+  valid: boolean;
+};
+
+export type ValidationLength = {
+  maxlength?: number;
+  minlength?: number;
+  value: string;
 };
 
 export type Validator = (value: string) => ValidationResult;

package/dist/utilities/format.ts

@@ -1,4 +1,6 @@
-import type { RealmConfig } from '@/types/RealmConfig';
+const capitalizeFirst = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
 
 const formatCamelCase = (input: string): string => {
   return input && typeof input === 'string'
@@ -22,9 +24,26 @@ const formatKebabCase = (input: string): string => {
     : 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 => {
-  const integer = typeof input === 'number' ? input : parseInt(input.match(/\d/g)?.join('') || '', 10);
-  const output = integer ? new Intl.NumberFormat().format(integer) : '';
+  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;
 };
@@ -42,38 +61,39 @@ const formatPascalCase = (input: string): string => {
 };
 
 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;
-      }
-    }
+  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 = formatNumber(input);
+  const output = input ? formatNumber(input) : String(input || '0');
+  return `$${output}`;
+};
 
-  return `$${output || '--'}`;
+const formatQuotes = (value: string) => {
+  if (value.startsWith('"') && value.endsWith('"')) {
+    return value.slice(1, -1);
+  } else {
+    return value;
+  }
 };
 
 const formatSentenceCase = (input: string): string => {
@@ -112,6 +132,17 @@ const formatTitleCase = (input: string): string => {
     : 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));
@@ -119,30 +150,35 @@ const getArticle = (noun: string, isPlural = false, isDefinite = false) => {
   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 priceToNumber = (value: string) => {
+  if (Number.isNaN(Number(value))) {
+    value = value.replace('$', '');
+    value = value.replace(/,/g, '');
+  }
+  return parseInt(value, 10);
 };
 
-const removeMarkup = (markup: string) => {
-  return markup.replace(/<[^>]*>/g, '');
+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,
-  getCdn,
-  getCdnMediaRoot,
-  removeMarkup,
+  priceToNumber,
+  unformatPrice,
 };

package/dist/utilities/storybook.ts

@@ -1,6 +1,7 @@
 import type { ArgTypes } from '@storybook/vue3';
 
 import { BOOLEAN_UNREQUIRED } from '@/types/Storybook';
+import { CSS } from '@/types/Styles';
 import { ELEMENT, ELEMENT_TEXT_AS_ICON } from '@/types/Element';
 
 // Extensible object of key/value pairs
@@ -42,12 +43,23 @@ export const argTypeDimension = {
   },
 };
 
+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: '(event: Event) => void' },
+  },
+};
+
 export const click = {
   control: 'text',
-  description: 'JS function to execute on click',
+  description: 'JS code or function to execute on click event',
   table: {
     defaultValue: { summary: 'None' },
-    type: { summary: 'function' },
+    type: { summary: '(event: Event) => void' },
   },
 };
 
@@ -60,11 +72,17 @@ export const dataTrack = {
   },
 };
 
+export const disabledArgType = {
+  table: {
+    disable: true,
+  },
+};
+
 export const doSomething = () => {
   alert('Did something.');
 };
 
-// Accept a KeyValue as the value of an object with a retrievable key as a Storybook argType
+// 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];
@@ -138,8 +156,9 @@ export const formatSnippet = (code: string, context: StoryContext) => {
     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);
+    const isEmit = argType.isEmit;
+    const isSlot = key === 'default';
 
     if (argType.isCss) {
       classNames.push(value);
@@ -169,10 +188,6 @@ export const formatSnippet = (code: string, context: StoryContext) => {
       value = `[${constantSlots.join(', ')}]`;
     }
 
-    if (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
-      return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
-    }
-
     if (isCustom) {
       return `:${formatKebabCase(key)}="${key}"`;
     }
@@ -184,6 +199,16 @@ export const formatSnippet = (code: string, context: StoryContext) => {
     ) {
       return `@click="${value}"`;
     }
+
+    if (isEmit) {
+      if (value) {
+        return `@change="${value}"`;
+      }
+    }
+
+    if (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
+      return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
+    }
   });
 
   classNames = classNames.filter((className) => !!className);
@@ -203,6 +228,39 @@ 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.

package/dist/utilities/validation.ts

@@ -1,13 +1,22 @@
 import type { Ref } from 'vue';
-import type { StringField } from '@/types/Field';
-import type { ValidationResult } from '@/types/Validation';
 
-export function checkFormat(format: RegExp) {
+import type { RangeData } from '@/types/FacetRange';
+import type { SelectOption } from '@/types/Select';
+import type { StringInput } from '@/types/Form';
+import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
+
+import { priceToNumber } from '@/utilities/format';
+
+export const errorMessageDefault = 'Please enter a valid value.';
+
+export const noError = {
+  message: '',
+  valid: true,
+} as Readonly<ValidationResult>;
+
+export const checkFormat = (format: RegExp) => {
   return (value: string): ValidationResult => {
-    let result = {
-      message: '',
-      valid: true,
-    };
+    let result = noError;
 
     if (!value.trim().match(format)) {
       result = {
@@ -18,68 +27,164 @@ export function checkFormat(format: RegExp) {
 
     return result;
   };
-}
+};
 
-export function checkLength(minlength?: number, maxlength?: number) {
-  return (value: string): ValidationResult => {
-    const valid = getFieldLengthIsValid({
-      maxlength,
-      minlength,
-      value,
-    });
+export const getErrorMessage = (errorFromProps: ValidationError, errorFromRef: ValidationError) => {
+  // error in props takes precedence over validation error
+  if (typeof errorFromProps === 'string' && errorFromProps.length > 0) return errorFromProps;
 
-    let message = valid ? '' : errorMessageDefault;
+  return typeof errorFromRef === 'string' && errorFromRef.length > 0 ? errorFromRef : errorMessageDefault;
+};
 
-    if (maxlength && minlength) {
-      message = `Please enter a value between ${minlength} and ${maxlength} characters in length.`;
+export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
+  errorFromProps !== false || errorFromRef !== false;
+
+export const getFieldLengthIsValid = ({ maxlength, minlength, value }: ValidationLength) => {
+  const tooShort = maxlength && value.length > maxlength;
+  const tooLong = minlength && value.length < minlength;
+
+  return !tooShort && !tooLong;
+};
+
+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;
     }
+  };
+};
 
-    return {
-      message,
-      valid,
-    };
+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;
+    }
   };
-}
+};
 
-export const getFieldLengthIsValid = ({
+export const getSelectOptionsFromStrings = (strings: string[]) =>
+  strings.map(
+    (option) =>
+      ({
+        label: option,
+        value: option,
+      } as SelectOption)
+  );
+
+export const handleFieldValidation = ({
+  error,
+  errorFromProps,
   maxlength,
   minlength,
+  validators,
   value,
 }: {
+  error: Ref<ValidationError>;
+  errorFromProps: ValidationError;
   maxlength?: number;
   minlength?: number;
-  value: string;
+  validators?: Validator[];
+  value: Ref<string>;
 }) => {
-  const tooShort = maxlength && value.length > maxlength;
-  const tooLong = minlength && value.length < minlength;
+  // error in props takes precedence over validation error
 
-  return !tooShort && !tooLong;
-};
+  error.value = errorFromProps ? errorFromProps : false;
 
-export const errorMessageDefault = 'Please enter a valid value.';
+  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,
+      value: value.value,
+    });
+
+    if (!lengthvalidation.valid) {
+      error.value = lengthvalidation.message;
+    }
+  }
+};
 
-export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringField | null> }) {
+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;
 }
 
+export const validateLength = ({ maxlength, minlength, value }: ValidationLength): ValidationResult => {
+  const response = {
+    message: '',
+    valid: true,
+  };
+
+  response.valid = getFieldLengthIsValid({
+    maxlength,
+    minlength,
+    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;
+};
+
 export function validateProperty(value: string, validators: ((value: string) => ValidationResult)[]): ValidationResult {
   for (const validator of validators) {
     const validation = validator(value);
-
     if (!validation.valid) {
       return validation;
     }

package/package.json

@@ -49,15 +49,16 @@
   "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",
+    "build-storybook": "storybook build && cp -r src/assets/css/realm/ storybook-static/public/",
     "coverage": "vitest run --coverage",
     "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore --fix",
+    "preview": "npm run build-storybook && npx http-server -a localhost storybook-static/",
     "sb": "npm run storybook",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "type-check": "vue-tsc --noEmit"
   },
   "type": "module",
-  "version": "2.0.0"
+  "version": "2.0.2"
 }

package/dist/IconAccountBalance-91cf067b.js

@@ -1,10 +0,0 @@
-import { openBlock as c, createElementBlock as e } from "vue";
-import { _ as o } from "./index-c5bc4216.js";
-const t = {}, n = { d: "M5.5 17v-7h2v7h-2Zm6 0v-7h2v7h-2Zm-9 4v-2h20v2h-20Zm15-4v-7h2v7h-2Zm-15-9V6l10-5 10 5v2h-20Zm4.45-2h11.1L12.5 3.25 6.95 6Z" };
-function h(r, m) {
-  return c(), e("path", n);
-}
-const s = /* @__PURE__ */ o(t, [["render", h]]);
-export {
-  s as default
-};

package/dist/IconAdd-95c51c0e.js

@@ -1,10 +0,0 @@
-import { openBlock as e, createElementBlock as o } from "vue";
-import { _ as t } from "./index-c5bc4216.js";
-const c = {}, r = { d: "M11 13H5v-2h6V5h2v6h6v2h-6v6h-2v-6Z" };
-function n(_, s) {
-  return e(), o("path", r);
-}
-const d = /* @__PURE__ */ t(c, [["render", n]]);
-export {
-  d as default
-};

package/dist/IconAi-08172540.js

@@ -1,22 +0,0 @@
-import { openBlock as c, createElementBlock as l, Fragment as n, createElementVNode as e } from "vue";
-import { _ as o } from "./index-c5bc4216.js";
-const t = {}, r = /* @__PURE__ */ e("path", { d: "M18.111 18V6.389H16V18h2.111Z" }, null, -1), d = /* @__PURE__ */ e("path", {
-  "clip-rule": "evenodd",
-  d: "M14.485 18.111 11.325 6.5h-3.54L4.626 18.111H6.5L7.111 15H12l.5 3.111h1.985Zm-3.16-4.889h-3.54L9 8.5h1l1.326 4.722Z",
-  "fill-rule": "evenodd"
-}, null, -1), a = /* @__PURE__ */ e("path", {
-  "clip-rule": "evenodd",
-  d: "M8.038 1h7.924c.983 0 1.795 0 2.457.054.687.056 1.318.177 1.912.479a4.889 4.889 0 0 1 2.136 2.136c.302.594.423 1.225.479 1.912C23 6.243 23 7.055 23 8.038v7.924c0 .983 0 1.795-.054 2.457-.056.687-.177 1.318-.479 1.912a4.889 4.889 0 0 1-2.136 2.136c-.594.302-1.225.423-1.912.479-.662.054-1.474.054-2.457.054H8.038c-.983 0-1.795 0-2.457-.054-.687-.056-1.318-.177-1.912-.479a4.889 4.889 0 0 1-2.136-2.136c-.302-.594-.423-1.225-.479-1.912C1 17.757 1 16.945 1 15.962V8.038c0-.983 0-1.795.054-2.457.056-.687.177-1.318.479-1.912a4.889 4.889 0 0 1 2.136-2.136c.594-.302 1.225-.423 1.912-.479C6.243 1 7.055 1 8.038 1ZM5.78 3.046c-.536.044-.81.123-1 .22-.46.235-1.28 1.053-1.514 1.513-.097.191-.176.465-.22 1.001C3 6.33 3 7.042 3 8.09v7.822c0 .98 0 1.665.038 2.2H3l.044.089.002.02c.044.536.123.81.22 1 .235.46.609 1.28 1.069 1.514.19.097.91.176 1.445.22.358.03.784.04 1.326.044L7.11 21h8.8c1.047 0 1.759 0 2.309-.046.536-.044.81-.123 1-.22.46-.235 1.28-1.053 1.514-1.513.097-.191.176-.465.22-1.001.045-.55.046-1.262.046-2.309V8.09c0-1.047 0-1.759-.046-2.309-.044-.536-.123-.81-.22-1-.235-.46-1.053-1.28-1.513-1.514-.191-.097-.465-.176-1.001-.22C17.67 3 16.958 3 15.91 3H8.09c-1.047 0-1.759.001-2.309.046Z",
-  "fill-rule": "evenodd"
-}, null, -1);
-function _(h, s) {
-  return c(), l(n, null, [
-    r,
-    d,
-    a
-  ], 64);
-}
-const p = /* @__PURE__ */ o(t, [["render", _]]);
-export {
-  p as default
-};