@aurodesignsystem/auro-formkit 2.0.0-beta.1 → 2.0.0-beta.11

package/packages/build-tools/src/docProcessor.mjs

@@ -1,7 +1,7 @@
 import { Logger } from "@aurodesignsystem/auro-library/scripts/utils/logger.mjs";
+import fs from "node:fs/promises";
 import {
   fromAuroComponentRoot,
-  generateReadmeUrl,
   processContentForFile,
   templateFiller
 } from "@aurodesignsystem/auro-library/scripts/utils/sharedFileProcessorUtils.mjs";
@@ -16,7 +16,6 @@ import {
  * (like "_esm" to make README_esm.md).
  */
 
-
 /**
  * @param {ProcessorConfig} config - The configuration for this processor.
  */
@@ -30,6 +29,38 @@ export const defaultDocsProcessorConfig = {
   remoteReadmeVariant: "_updated_paths"
 };
 
+/**
+ * Get the version from the root package.json
+ * @returns {Promise<string>}
+ */
+async function getPackageVersion() {
+  const packageJsonPath = fromAuroComponentRoot('package.json');
+  const packageContent = await fs.readFile(packageJsonPath, 'utf8');
+  const packageJson = JSON.parse(packageContent);
+  return packageJson.version;
+}
+
+const formkitVersion = await getPackageVersion();
+
+export const monorepoVars = {
+  formkitVersion,
+  'monorepoName': 'auro-formkit',
+  'dependentComponents': [] //  populated by componentDependencyTree in processDocFiles
+}
+
+export const componentDependencyTree = {
+  'checkbox': ['checkbox'],
+  'combobox': ['dropdown', 'input', 'menu', 'combobox'],
+  'counter': ['counter'],
+  'datepicker': ['dropdown', 'input', 'popover', 'datepicker'],
+  'dropdown': ['dropdown'],
+  'form': ['form'],
+  'input': ['input'],
+  'menu': ['menu'],
+  'radio': ['radio'],
+  'select': ['dropdown', 'menu', 'select'],
+}
+
 /**
  * @param {ProcessorConfig} config - The configuration for this processor.
  * @returns {import('@aurodesignsystem/auro-library/scripts/utils/sharedFileProcessorUtils').FileProcessorConfig[]}
@@ -38,11 +69,7 @@ export const fileConfigs = (config) => [
   // README.md
   {
     identifier: 'README.md',
-    input: {
-      remoteUrl: generateReadmeUrl(config.remoteReadmeVersion, config.remoteReadmeVariant),
-      fileName: fromAuroComponentRoot(`components/${config.component}/docTemplates/README.md`),
-      overwrite: config.overwriteLocalCopies
-    },
+    input: fromAuroComponentRoot(`docs/templates/componentReadmeTemplate.md`),
     output: fromAuroComponentRoot(`components/${config.component}/README.md`)
   },
   // index.md
@@ -79,8 +106,10 @@ export async function processDocFiles(componentName) {
 
     for (const fileConfig of fileConfigs(config)) {
       try {
+        const dependencies = componentDependencyTree[config.component];
+
         // eslint-disable-next-line no-await-in-loop
-        await processContentForFile(fileConfig);
+        await processContentForFile({ ...fileConfig, extraVars: { ...monorepoVars, dependentComponents: dependencies} });
       } catch (err) {
         Logger.error(`Error processing ${fileConfig.identifier}: ${err.message}`);
       }

package/packages/form-validation/src/validation.js

@@ -37,30 +37,87 @@ export default class AuroFormValidation {
   }
 
   /**
-   * Determines the validity state of the element based on the common attribute restrictions (pattern).
-   * @private
-   * @param {object} elem - HTML element to validate.
+   * Validates the attributes of a given element based on predefined validation rules.
+   *
+   * @param {HTMLElement} elem - The element to be validated.
    * @returns {void}
+   *
+   * @example
+   * // Assuming `inputElement` is a reference to an input element in the DOM
+   * validateElementAttributes(inputElement);
+   *
+   * The function checks the element's attributes against the validation rules defined for 'input' and 'counter' types.
+   * If a validation rule is violated, it sets the element's validity state and error message accordingly.
+   *
+   * Validation rules:
+   * - input:
+   *   - length:
+   *     - tooShort: Checks if the value length is less than the minimum length.
+   *     - tooLong: Checks if the value length exceeds the maximum length.
+   *   - pattern:
+   *     - patternMismatch: Checks if the value does not match the specified pattern.
+   * - counter:
+   *   - range:
+   *     - rangeOverflow: Checks if the value exceeds the maximum value.
+   *     - rangeUnderflow: Checks if the value is less than the minimum value.
    */
-  validateAttributes(elem) {
-    if (elem.pattern) {
-      const pattern = new RegExp(`^${elem.pattern}$`, 'u');
-
-      if (!pattern.test(elem.value)) {
-        elem.validity = 'badInput';
-        elem.setCustomValidity = elem.setCustomValidityBadInput || '';
+  validateElementAttributes(elem) {
+    const validationRules = {
+      input: {
+        length: [
+          {
+            check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
+            validity: 'tooShort',
+            message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
+          },
+          {
+            check: (e) => e.value?.length > e.maxLength,
+            validity: 'tooLong',
+            message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
+          }
+        ],
+        pattern: [
+          {
+            check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
+            validity: 'patternMismatch',
+            message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
+          }
+        ]
+      },
+      counter: {
+        range: [
+          {
+            check: (e) => e.max !== undefined && Number(e.max) < Number(e.value),
+            validity: 'rangeOverflow',
+            message: e => e.getAttribute('setCustomValidityRangeOverflow') || ''
+          },
+          {
+            check: (e) => e.min !== undefined && Number(e.min) > Number(e.value),
+            validity: 'rangeUnderflow',
+            message: e => e.getAttribute('setCustomValidityRangeUnderflow') || ''
+          }
+        ]
       }
-    }
-
-    // Length > 0 is required to prevent the error message from showing when the input is empty
-    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
-      elem.validity = 'tooShort';
-      elem.setCustomValidity = elem.setCustomValidityTooShort || '';
+    };
+  
+    let elementType;
+    if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      elementType = 'input';
+    } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+      elementType = 'counter';
     }
     
-    if (elem.value?.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.setCustomValidity = elem.setCustomValidityTooLong || '';
+    if (elementType) {
+      const rules = validationRules[elementType];
+    
+      if (rules) {
+        Object.values(rules).flat().forEach(rule => {
+          if (rule.check(elem)) {
+            elem.validity = rule.validity;
+            elem.errorMessage = rule.message(elem);
+          }
+        });
+      }
     }
   }
 
@@ -76,33 +133,32 @@ export default class AuroFormValidation {
         const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp
 
         if (!elem.value.match(emailRegex)) {
-          elem.validity = 'badInput';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.validity = 'patternMismatch';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'credit-card') {
         if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         }
       } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
         }
 
-        if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) {
+        if (elem.min !== undefined && elem.value?.length > 0 && Number(elem.min) > Number(elem.value)) {
           elem.validity = 'rangeUnderflow';
-          elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+          elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
         }
-
       } else if (elem.type === 'month-day-year' ||
                  elem.type === 'month-year' ||
                  elem.type === 'month-fullYear' ||
                  elem.type === 'year-month-day'
       ) {
-        if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) {
+        if (elem.value?.length > 0 && elem.value.length < elem.dateStrLength) {
           elem.validity = 'tooShort';
-          elem.setCustomValidity = elem.setCustomValidityForType || '';
+          elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
         } else {
           const valueDate = new Date(elem.value);
 
@@ -112,7 +168,7 @@ export default class AuroFormValidation {
 
             if (valueDate > maxDate) {
               elem.validity = 'rangeOverflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeOverflow || elem.setCustomValidity || '';
             }
           }
 
@@ -122,7 +178,7 @@ export default class AuroFormValidation {
 
             if (valueDate < minDate) {
               elem.validity = 'rangeUnderflow';
-              elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || '';
+              elem.errorMessage = elem.setCustomValidityRangeUnderflow || elem.setCustomValidity || '';
             }
           }
         }
@@ -145,10 +201,10 @@ export default class AuroFormValidation {
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
-      elem.setCustomValidity = elem.error;
+      elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
     } else if (validationShouldRun) {
       elem.validity = 'valid';
-      elem.setCustomValidity = '';
+      elem.errorMessage = '';
 
       /**
        * Only validate once we interact with the datepicker
@@ -160,7 +216,7 @@ export default class AuroFormValidation {
       let hasValue = elem.value && elem.value.length > 0;
 
       // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false;
-      if (this.auroInputElements && this.auroInputElements.length === 2) {
+      if (this.auroInputElements?.length === 2) {
         if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) {
           hasValue = false;
         }
@@ -168,31 +224,29 @@ export default class AuroFormValidation {
 
       if (!hasValue && elem.required) {
         elem.validity = 'valueMissing';
-        elem.setCustomValidity = elem.setCustomValidityValueMissing || '';
+        elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
         this.validateType(elem);
-        this.validateAttributes(elem);
+        this.validateElementAttributes(elem);
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
+        this.validateElementAttributes(elem);
       }
     }
 
-    if (this.auroInputElements && this.auroInputElements.length > 0) {
+    if (this.auroInputElements?.length > 0) {
       elem.validity = this.auroInputElements[0].validity;
-      elem.setCustomValidity = this.auroInputElements[0].setCustomValidity;
+      elem.errorMessage = this.auroInputElements[0].errorMessage;
 
-      if (elem.validity === 'valid') {
-        if (this.auroInputElements.length > 1) {
-          elem.validity = this.auroInputElements[1].validity;
-          elem.setCustomValidity = this.auroInputElements[1].setCustomValidity;
-        }
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1) {
+        elem.validity = this.auroInputElements[1].validity;
+        elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
     }
 
     if (validationShouldRun || elem.hasAttribute('error')) {
-      if (elem.validity && elem.validity !== 'valid') {
-        // Use the validity message override if it is declared
-        if (elem.ValidityMessageOverride) {
-          elem.setCustomValidity = elem.ValidityMessageOverride;
-        }
+      // Use the validity message override if it is declared
+      if (elem.validity && elem.validity !== 'valid' && elem.ValidityMessageOverride) {
+        elem.errorMessage = elem.ValidityMessageOverride;
       }
 
       this.getErrorMessage(elem);
@@ -238,18 +292,18 @@ export default class AuroFormValidation {
     if (elem.validity !== 'valid') {
       if (elem.setCustomValidity) {
         elem.errorMessage = elem.setCustomValidity;
-      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
+      } else if (this.runtimeUtils.elementMatch(elem, 'auro-input') && elem.errorMessage === '') {
         const input = elem.renderRoot.querySelector('input');
 
         if (input.validationMessage.length > 0) {
           elem.errorMessage = input.validationMessage;
         }
-      } else if (this.inputElements && this.inputElements.length > 0) {
+      } else if (this.inputElements?.length > 0  && elem.errorMessage === '') {
         const firstInput = this.inputElements[0];
 
         if (firstInput.validationMessage.length > 0) {
           elem.errorMessage = firstInput.validationMessage;
-        } else if (this.inputElements.length === 2) {
+        } else if (this.inputElements?.length === 2) {
           const secondInput = this.inputElements[1];
 
           if (secondInput.validationMessage.length > 0) {

package/packages/utils/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@auro-formkit/utils",
+  "description": "Shared utility functions for all components in auro-formkit monorepo",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "tsc",
+  "exports": {
+    ".": "./src/index.js"
+  }
+}

package/packages/utils/src/iconUtil.js

@@ -0,0 +1,25 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { html } from "lit/static-html.js";
+
+export class IconUtil {
+
+  /**
+   * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
+   *
+   * @param {string} svgContent - The SVG content to be embedded.
+   * @param {Object} _attributes - Additional attributes to set on the icon element.
+   * @returns {Element} The HTML element containing the SVG icon.
+   */
+  static generateSvgHtml(svgContent) {
+    const dom = new DOMParser().parseFromString(svgContent.svg, 'text/html');
+    const svg = dom.body.firstChild;
+    
+    svg.setAttribute('slot', 'svg');
+
+    return html`${svg}`;
+  }
+}

package/packages/utils/src/index.js

@@ -0,0 +1 @@
+export { IconUtil } from './iconUtil.js';

package/turbo.json

@@ -19,25 +19,25 @@
         "*-css.js"
       ]
     },
-    "@auro-formkit/auro-combobox#build": {
+    "@aurodesignsystem/auro-combobox#build": {
       "dependsOn": [
-        "@auro-formkit/auro-input#build",
-        "@auro-formkit/auro-dropdown#build",
+        "@aurodesignsystem/auro-input#build",
+        "@aurodesignsystem/auro-dropdown#build",
         "postCss:component",
         "sass:render"
       ]
     },
-    "@auro-formkit/auro-datepicker#build": {
+    "@aurodesignsystem/auro-datepicker#build": {
       "dependsOn": [
-        "@auro-formkit/auro-input#build",
-        "@auro-formkit/auro-dropdown#build",
+        "@aurodesignsystem/auro-input#build",
+        "@aurodesignsystem/auro-dropdown#build",
         "postCss:component",
         "sass:render"
       ]
     },
-    "@auro-formkit/auro-select#build": {
+    "@aurodesignsystem/auro-select#build": {
       "dependsOn": [
-        "@auro-formkit/auro-dropdown#build",
+        "@aurodesignsystem/auro-dropdown#build",
         "postCss:component",
         "sass:render"
       ]

package/.turbo/cache/013a48308b893dac-meta.json

@@ -1 +0,0 @@
-{"hash":"013a48308b893dac","duration":2974}

package/.turbo/cache/0663fcbb1d711029-meta.json

@@ -1 +0,0 @@
-{"hash":"0663fcbb1d711029","duration":954}

package/.turbo/cache/07ca42419b9f050c-meta.json

@@ -1 +0,0 @@
-{"hash":"07ca42419b9f050c","duration":4669}

package/.turbo/cache/0a2b0a4df8a0443f-meta.json

@@ -1 +0,0 @@
-{"hash":"0a2b0a4df8a0443f","duration":6014}

package/.turbo/cache/0cea4c1f34f3683b-meta.json

@@ -1 +0,0 @@
-{"hash":"0cea4c1f34f3683b","duration":1921}

package/.turbo/cache/120c8e207aa1ba35-meta.json

@@ -1 +0,0 @@
-{"hash":"120c8e207aa1ba35","duration":19116}

package/.turbo/cache/141bb7d9a95e288b-meta.json

@@ -1 +0,0 @@
-{"hash":"141bb7d9a95e288b","duration":19833}

package/.turbo/cache/17259cf94d8f8925-meta.json

@@ -1 +0,0 @@
-{"hash":"17259cf94d8f8925","duration":2092}

package/.turbo/cache/17dd4bdef6550a07-meta.json

@@ -1 +0,0 @@
-{"hash":"17dd4bdef6550a07","duration":19081}

package/.turbo/cache/1c99a949ec63ab35-meta.json

@@ -1 +0,0 @@
-{"hash":"1c99a949ec63ab35","duration":1044}

package/.turbo/cache/1de15d89eed2d760-meta.json

@@ -1 +0,0 @@
-{"hash":"1de15d89eed2d760","duration":3318}

package/.turbo/cache/257a7a26ea72dbc5-meta.json

@@ -1 +0,0 @@
-{"hash":"257a7a26ea72dbc5","duration":1834}

package/.turbo/cache/2990aaa7ebc5b967-meta.json

@@ -1 +0,0 @@
-{"hash":"2990aaa7ebc5b967","duration":3826}

package/.turbo/cache/32c0b9995fb5f8dd-meta.json

@@ -1 +0,0 @@
-{"hash":"32c0b9995fb5f8dd","duration":18535}

package/.turbo/cache/3bf45120d0cc9bd8-meta.json

@@ -1 +0,0 @@
-{"hash":"3bf45120d0cc9bd8","duration":3072}

package/.turbo/cache/45035bf5c4147ccd-meta.json

@@ -1 +0,0 @@
-{"hash":"45035bf5c4147ccd","duration":2099}

package/.turbo/cache/4f92cea2d8c63de2-meta.json

@@ -1 +0,0 @@
-{"hash":"4f92cea2d8c63de2","duration":2582}

package/.turbo/cache/56cb35d4c7473a23-meta.json

@@ -1 +0,0 @@
-{"hash":"56cb35d4c7473a23","duration":20457}

package/.turbo/cache/5c16ce3cff5c9dff-meta.json

@@ -1 +0,0 @@
-{"hash":"5c16ce3cff5c9dff","duration":4124}

package/.turbo/cache/5f304c0f37ef25f3-meta.json

@@ -1 +0,0 @@
-{"hash":"5f304c0f37ef25f3","duration":2001}

package/.turbo/cache/626afdc67e0cb540-meta.json

@@ -1 +0,0 @@
-{"hash":"626afdc67e0cb540","duration":3054}

package/.turbo/cache/64de7a53e02db647-meta.json

@@ -1 +0,0 @@
-{"hash":"64de7a53e02db647","duration":1060}

package/.turbo/cache/691a74627ec57993-meta.json

@@ -1 +0,0 @@
-{"hash":"691a74627ec57993","duration":2682}

package/.turbo/cache/69aae513b7ec6c7d-meta.json

@@ -1 +0,0 @@
-{"hash":"69aae513b7ec6c7d","duration":1811}

package/.turbo/cache/6dd7058e6703cb35-meta.json

@@ -1 +0,0 @@
-{"hash":"6dd7058e6703cb35","duration":2660}

package/.turbo/cache/6ef81cf9a66f982a-meta.json

@@ -1 +0,0 @@
-{"hash":"6ef81cf9a66f982a","duration":5672}

package/.turbo/cache/73e9073a5274616d-meta.json

@@ -1 +0,0 @@
-{"hash":"73e9073a5274616d","duration":4485}

package/.turbo/cache/773edc0f83c8c5a5-meta.json

@@ -1 +0,0 @@
-{"hash":"773edc0f83c8c5a5","duration":1839}

package/.turbo/cache/784c03fe9fd5ac05-meta.json

@@ -1 +0,0 @@
-{"hash":"784c03fe9fd5ac05","duration":5313}

package/.turbo/cache/786a822763403879-meta.json

@@ -1 +0,0 @@
-{"hash":"786a822763403879","duration":3286}

package/.turbo/cache/80b5d974184a01df-meta.json

@@ -1 +0,0 @@
-{"hash":"80b5d974184a01df","duration":2905}

package/.turbo/cache/87219c41a4ace9cd-meta.json

@@ -1 +0,0 @@
-{"hash":"87219c41a4ace9cd","duration":18641}

package/.turbo/cache/8954c6073396fadd-meta.json

@@ -1 +0,0 @@
-{"hash":"8954c6073396fadd","duration":2833}

package/.turbo/cache/9154e8fe6ab767ea-meta.json

@@ -1 +0,0 @@
-{"hash":"9154e8fe6ab767ea","duration":6783}

package/.turbo/cache/92daa6d7c389d548-meta.json

@@ -1 +0,0 @@
-{"hash":"92daa6d7c389d548","duration":804}

package/.turbo/cache/993dff2edb7b6766-meta.json

@@ -1 +0,0 @@
-{"hash":"993dff2edb7b6766","duration":637}

package/.turbo/cache/9a097d6576dadd64-meta.json

@@ -1 +0,0 @@
-{"hash":"9a097d6576dadd64","duration":1921}