tide-design-system 2.3.0 → 2.4.0

package/src/stories/TideSeoLinks.stories.ts

@@ -3,6 +3,8 @@ import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import type { Link } from '@/types/Link';
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TideSeoLinks>['$props'];
+
 const links: Link[] = new Array(12).fill({}).map((link, index) => {
   return {
     isNewTab: false,
@@ -27,7 +29,7 @@ const parameters = {
   },
 };
 
-const render = (args: any) => ({
+const render = (args: Args) => ({
   components: { TideSeoLinks },
   setup: () => ({ args }),
   template: '<TideSeoLinks v-bind="args" />',

package/src/stories/TideSheet.stories.ts

@@ -13,6 +13,12 @@ import {
 
 import type { StoryContext } from '@storybook/vue3';
 
+type Args = InstanceType<typeof TideSheet>['$props'] & {
+  default: string;
+  handleBack: string;
+  handleClose: string;
+};
+
 const formatSnippet = (code: string, context: StoryContext) => {
   const { args } = context;
 
@@ -35,7 +41,7 @@ const parameters = {
   },
 };
 
-const render = (args: any, { updateArgs }: any) => ({
+const render = (args: Args, context: StoryContext) => ({
   components: { TideButton, TideSheet },
   methods: {
     doSomething,
@@ -55,7 +61,7 @@ const render = (args: any, { updateArgs }: any) => ({
     },
     handleClose: () => {
       action('Sheet closed')({});
-      updateArgs({ ...args, isOpen: false });
+      context.updateArgs({ ...args, isOpen: false });
 
       try {
         const callback = eval(args.handleClose);
@@ -68,7 +74,7 @@ const render = (args: any, { updateArgs }: any) => ({
       }
     },
     handleOpenSheetClick: () => {
-      updateArgs({ ...args, isOpen: true });
+      context.updateArgs({ ...args, isOpen: true });
     },
   },
   setup: () => ({ args }),

package/src/stories/TideSwitch.stories.ts

@@ -10,7 +10,13 @@ import {
   parameters,
 } from '@/utilities/storybook';
 
-const render = (args: any, context: any) => ({
+import type { StoryContext } from '@storybook/vue3';
+
+type Args = InstanceType<typeof TideSwitch>['$props'] & {
+  handleChange: string;
+};
+
+const render = (args: Args, context: StoryContext) => ({
   components: { TideSwitch },
   methods: {
     doSomething,

package/src/types/{Field.ts → FieldDeprecated.ts}

@@ -1,38 +1,59 @@
 import type { FormValueTransformer } from '@/types/Form';
 import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 import type { TextInputType } from '@/types/TextInput';
-import type { ValidationError, Validator } from '@/types/Validation';
+import type { ValidationError, Validator } from '@/types/ValidationDeprecated';
 
+/**
+ * @deprecated
+ */
 interface BooleanValue {
   value?: boolean;
 }
 
+/**
+ * @deprecated
+ */
 interface CheckboxField extends GenericInput, BooleanValue {
   indeterminate?: boolean;
 }
 
+/**
+ * @deprecated
+ */
 interface GenericField extends GenericInput {
   transformValue?: FormValueTransformer;
   validators?: Validator[];
 }
 
+/**
+ * @deprecated
+ */
 interface GenericInput {
   disabled?: boolean;
-  error: ValidationError;
+  error?: ValidationError;
   label?: string;
   name: string;
   required?: boolean;
 }
 
+/**
+ * @deprecated
+ */
 interface SelectField extends GenericInput, StringValue {
   optgroups?: (SelectOption | SelectOptionGroup)[];
   options?: SelectOption[];
 }
 
+/**
+ * @deprecated
+ */
 interface StringValue {
   value?: string;
 }
 
+/**
+ * @deprecated
+ */
 interface TextareaField extends GenericField, StringValue {
   maxlength?: number;
   minlength?: number;
@@ -40,6 +61,9 @@ interface TextareaField extends GenericField, StringValue {
   value?: string;
 }
 
+/**
+ * @deprecated
+ */
 interface TextField extends GenericField, StringValue {
   maxlength?: number;
   minlength?: number;
@@ -48,8 +72,21 @@ interface TextField extends GenericField, StringValue {
   value?: string;
 }
 
+/**
+ * @deprecated
+ */
 export type BooleanField = CheckboxField;
+
+/**
+ * @deprecated
+ */
 export type Field = SelectField | TextField | TextareaField | CheckboxField;
+
+/**
+ * @deprecated
+ */
 export type StringField = SelectField | TextField | TextareaField;
+
 export type { BooleanValue, StringValue };
+
 export type { CheckboxField, GenericField, GenericInput, SelectField, TextareaField, TextField };

package/src/types/Form.ts

@@ -1,58 +1 @@
-import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-import type { TextInputType } from '@/types/TextInput';
-import type { ValidationError, Validator } from '@/types/Validation';
-
-interface GenericInput {
-  error?: ValidationError;
-  transformValue?: FormValueTransformer;
-  name: string;
-  validators?: Validator[];
-  required?: boolean;
-  label?: string;
-  disabled?: boolean;
-}
-
-interface StringValue {
-  value?: string;
-}
-
-interface BooleanValue {
-  value?: boolean;
-}
-
-export type SelectInput = GenericInput &
-  StringValue & {
-    options?: SelectOption[] | readonly SelectOption[];
-    placeholder?: string;
-    optgroups?: (SelectOption | SelectOptionGroup)[];
-  };
-
-export type TextInput = GenericInput &
-  StringValue & {
-    autocomplete?: boolean;
-    maxlength?: number;
-    minlength?: number;
-    type?: TextInputType;
-    placeholder?: string;
-    value?: string;
-  };
-
-export type TextareaInput = GenericInput &
-  StringValue & {
-    maxlength?: number;
-    minlength?: number;
-    placeholder?: string;
-    value?: string;
-  };
-
-export type CheckboxInput = GenericInput &
-  BooleanValue & {
-    checked?: boolean;
-    indeterminate?: boolean;
-  };
-
-export type StringInput = SelectInput | TextInput | TextareaInput;
-export type BooleanInput = CheckboxInput;
-export type Input = SelectInput | TextInput | TextareaInput | CheckboxInput;
-
 export type FormValueTransformer = (value: string) => string;

package/src/types/FormDeprecated.ts

@@ -0,0 +1,91 @@
+import type { SelectOption, SelectOptionGroup } from '@/types/Select';
+import type { TextInputType } from '@/types/TextInput';
+import type { ValidationError, Validator } from '@/types/ValidationDeprecated';
+
+/**
+ * @deprecated
+ */
+interface GenericInput {
+  error?: ValidationError;
+  transformValue?: FormValueTransformer;
+  name: string;
+  validators?: Validator[];
+  required?: boolean;
+  label?: string;
+  disabled?: boolean;
+}
+
+/**
+ * @deprecated
+ */
+interface StringValue {
+  value?: string;
+}
+
+/**
+ * @deprecated
+ */
+interface BooleanValue {
+  value?: boolean;
+}
+
+/**
+ * @deprecated
+ */
+export type SelectInput = GenericInput &
+  StringValue & {
+    options?: SelectOption[] | readonly SelectOption[];
+    placeholder?: string;
+    optgroups?: (SelectOption | SelectOptionGroup)[];
+  };
+
+/**
+ * @deprecated
+ */
+export type TextInput = GenericInput &
+  StringValue & {
+    autocomplete?: boolean;
+    maxlength?: number;
+    minlength?: number;
+    type?: TextInputType;
+    placeholder?: string;
+    value?: string;
+  };
+
+/**
+ * @deprecated
+ */
+export type TextareaInput = GenericInput &
+  StringValue & {
+    maxlength?: number;
+    minlength?: number;
+    placeholder?: string;
+    value?: string;
+  };
+
+/**
+ * @deprecated
+ */
+export type CheckboxInput = GenericInput &
+  BooleanValue & {
+    checked?: boolean;
+    indeterminate?: boolean;
+  };
+
+/**
+ * @deprecated
+ */
+export type StringInput = SelectInput | TextInput | TextareaInput;
+/**
+ * @deprecated
+ */
+export type BooleanInput = CheckboxInput;
+/**
+ * @deprecated
+ */
+export type Input = SelectInput | TextInput | TextareaInput | CheckboxInput;
+
+/**
+ * @deprecated
+ */
+export type FormValueTransformer = (value: string) => string;

package/src/types/Styles.ts

@@ -366,6 +366,7 @@ export const CSS = {
     SCALE_DOWN: 'tide-object-scale-down',
   },
   OPACITY: {
+    DISABLED: 'tide-opacity-disabled',
     OFF: 'tide-opacity-none',
     ON: 'tide-opacity',
   },
@@ -498,6 +499,10 @@ export const CSS = {
       OFF: 'tide-underline-none',
     },
   },
+  USER_SELECT: {
+    INITIAL: 'tide-user-select-initial',
+    NONE: 'tide-user-select-none',
+  },
   VISIBILITY: {
     OFF: 'tide-visible-none',
     ON: 'tide-visible',

package/src/types/TextInput.ts

@@ -14,3 +14,15 @@ export const TEXT_INPUT_TYPE = {
 } as const;
 
 export type TextInputType = (typeof TEXT_INPUT_TYPE)[keyof typeof TEXT_INPUT_TYPE];
+
+export const INPUT_MODE = {
+  DECIMAL: 'decimal',
+  EMAIL: 'email',
+  NUMERIC: 'numeric',
+  SEARCH: 'search',
+  TEL: 'tel',
+  TEXT: 'text',
+  URL: 'url',
+} as const;
+
+export type InputMode = (typeof INPUT_MODE)[keyof typeof INPUT_MODE];

package/src/types/Validation.ts

@@ -4,9 +4,9 @@ import { checkFormat } from '@/utilities/validation';
 export const VALIDATOR = {
   ALPHA_NUMBER_EMPTY: checkFormat(FORMAT_REGEX.alphaNumberOrEmpty),
   ALPHA_SPACE: checkFormat(FORMAT_REGEX.alphaSpace),
-  EMAIL: checkFormat(FORMAT_REGEX.email),
-  NUMBER: checkFormat(FORMAT_REGEX.numberFormatted),
-  PHONE: checkFormat(FORMAT_REGEX.phone),
+  EMAIL: checkFormat(FORMAT_REGEX.email, 'Enter a valid email address (e.g. name@example.com)'),
+  NUMBER: checkFormat(FORMAT_REGEX.numberFormatted, 'Enter a valid number'),
+  PHONE: checkFormat(FORMAT_REGEX.phone, 'Enter a valid phone number'),
 } as const;
 
 export type ValidationError = string | boolean;
@@ -18,8 +18,15 @@ export type ValidationResult = {
 export type ValidationLength = {
   maxlength?: number;
   minlength?: number;
-  required?: boolean;
+  required: boolean;
   value: string;
 };
 
 export type Validator = (value: string) => ValidationResult;
+
+export const ERROR_DISPLAY = {
+  EAGER: 'eager',
+  LAZY: 'lazy',
+} as const;
+
+export type ErrorDisplay = (typeof ERROR_DISPLAY)[keyof typeof ERROR_DISPLAY];

package/src/types/ValidationDeprecated.ts

@@ -0,0 +1,41 @@
+import { FORMAT_REGEX } from '@/types/Formatted';
+import { checkFormat } from '@/utilities/validation-deprecated';
+
+/**
+ * @deprecated
+ */
+export const VALIDATOR = {
+  ALPHA_NUMBER_EMPTY: checkFormat(FORMAT_REGEX.alphaNumberOrEmpty),
+  ALPHA_SPACE: checkFormat(FORMAT_REGEX.alphaSpace),
+  EMAIL: checkFormat(FORMAT_REGEX.email),
+  NUMBER: checkFormat(FORMAT_REGEX.numberFormatted),
+  PHONE: checkFormat(FORMAT_REGEX.phone),
+} as const;
+
+/**
+ * @deprecated
+ */
+export type ValidationError = string | boolean;
+
+/**
+ * @deprecated
+ */
+export type ValidationResult = {
+  message: string;
+  valid: boolean;
+};
+
+/**
+ * @deprecated
+ */
+export type ValidationLength = {
+  maxlength?: number;
+  minlength?: number;
+  required?: boolean;
+  value: string;
+};
+
+/**
+ * @deprecated
+ */
+export type Validator = (value: string) => ValidationResult;

package/src/utilities/forms.ts

@@ -0,0 +1,22 @@
+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/validation-deprecated.ts

@@ -0,0 +1,252 @@
+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,
+  };
+}