@aurodesignsystem/auro-formkit 2.0.0-beta.3 → 2.0.0-beta.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.31",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",
@@ -11,7 +11,7 @@
   "engines": {
     "node": "^20.x || ^22.x"
   },
-  "packageManager": "npm@10.0.0",
+  "packageManager": "npm@11.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,10 +29,11 @@
     "types": "turbo run types",
     "dev": "turbo run dev --parallel",
     "lint": "turbo run lint",
-    "test": "echo \"Notice: no tests available\" && exit 0",
+    "test": "turbo run test",
+    "test:watch": "turbo run test:watch",
     "clean": "turbo run clean && rm -rf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "postinstall": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/postinstall.mjs",
+    "postinstall": "node ./packages/build-tools/src/postinstall.mjs",
     "build:docs": "turbo run build:docs",
     "build:docs:kit": "node ./packages/build-tools/src/kitDocProcessor.mjs",
     "sweep": "find ./components ./packages -type d -name 'dist' -exec rm -rf {} + && find ./components ./packages -not -path '*/node_modules/*' -type f \\( -name '*.css' -o -name '*-css.js' \\) -delete",
@@ -40,12 +41,15 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-library": "^3.0.5"
+    "@aurodesignsystem/auro-library": "^3.0.7"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "*"
   },
   "devDependencies": {
     "@aurodesignsystem/eslint-config": "^1.3.3",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
     "@open-wc/testing": "^4.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -58,30 +62,30 @@
     "babel-loader": "^9.2.1",
     "compression": "^1.7.5",
     "concat": "^1.0.3",
-    "concurrently": "^9.0.1",
+    "concurrently": "^9.1.2",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.38.1",
-    "eslint": "^9.14.0",
-    "eslint-plugin-jsdoc": "^50.5.0",
+    "core-js": "^3.40.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-jsdoc": "^50.6.1",
     "husky": "^9.1.7",
     "lodash": "^4.17.21",
-    "markdown-magic": "^2.6.1",
-    "nodemon": "^3.1.7",
+    "markdown-magic": "^3.3.0",
+    "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.0",
     "postcss-custom-properties": "^14.0.4",
     "postcss-discard-comments": "^7.0.3",
-    "prettier": "^3.0.0",
-    "sass": "^1.80.7",
-    "semantic-release": "^24.2.0",
-    "stylelint": "^16.10.0",
+    "prettier": "^3.4.2",
+    "sass": "^1.83.1",
+    "semantic-release": "^24.2.1",
+    "stylelint": "^16.13.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-config-standard": "^37.0.0",
+    "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.9.0",
-    "turbo": "^2.3.1",
-    "typescript": "^5.6.3",
+    "stylelint-scss": "^6.10.0",
+    "turbo": "^2.3.3",
+    "typescript": "^5.7.3",
     "whatwg-fetch": "^3.6.20",
     "yaml-lint": "^1.7.0"
   },

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/build-tools/src/postinstall.mjs

@@ -0,0 +1,8 @@
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+const postinstallPath = require.resolve('@aurodesignsystem/auro-library/scripts/build/postinstall.mjs');
+
+// Import and execute the script
+import(postinstallPath);

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 = 'patternMismatch';
-        elem.errorMessage = elem.setCustomValidityPatternMismatch || elem.setCustomValidity || '';
+  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') || ''
+          }
+        ]
       }
+    };
+  
+    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';
     }
-
-    // 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.errorMessage = elem.setCustomValidityTooShort || elem.setCustomValidity || '';
-    }
     
-    if (elem.value?.length > elem.maxLength) {
-      elem.validity = 'tooLong';
-      elem.errorMessage = elem.setCustomValidityTooLong || elem.setCustomValidity || '';
+    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);
+          }
+        });
+      }
     }
   }
 
@@ -170,7 +227,9 @@ export default class AuroFormValidation {
         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);
       }
     }
 

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,58 @@
         "*-css.js"
       ]
     },
-    "@auro-formkit/auro-combobox#build": {
+    "test:watch": {
+      "dependsOn": ["build"],
+      "persistent": true,
+      "cache": false
+    },
+    "@aurodesignsystem/auro-checkbox#build": {
+      "dependsOn": [
+        "@aurodesignsystem/auro-helptext#build",
+        "postCss:component",
+        "sass:render"
+      ]
+    },
+    "@aurodesignsystem/auro-combobox#build": {
+      "dependsOn": [
+        "@aurodesignsystem/auro-input#build",
+        "@aurodesignsystem/auro-dropdown#build",
+        "postCss:component",
+        "sass:render"
+      ]
+    },
+    "@aurodesignsystem/auro-datepicker#build": {
+      "dependsOn": [
+        "@aurodesignsystem/auro-input#build",
+        "@aurodesignsystem/auro-dropdown#build",
+        "postCss:component",
+        "sass:render"
+      ]
+    },
+    "@aurodesignsystem/auro-dropdown#build": {
+      "dependsOn": [
+        "@aurodesignsystem/auro-helptext#build",
+        "postCss:component",
+        "sass:render"
+      ]
+    },
+    "@aurodesignsystem/auro-input#build": {
       "dependsOn": [
-        "@auro-formkit/auro-input#build",
-        "@auro-formkit/auro-dropdown#build",
+        "@aurodesignsystem/auro-helptext#build",
         "postCss:component",
         "sass:render"
       ]
     },
-    "@auro-formkit/auro-datepicker#build": {
+    "@aurodesignsystem/auro-radio#build": {
       "dependsOn": [
-        "@auro-formkit/auro-input#build",
-        "@auro-formkit/auro-dropdown#build",
+        "@aurodesignsystem/auro-helptext#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"
       ]
@@ -97,4 +130,4 @@
       "outputs": []
     }
   }
-}
+}

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

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

package/.turbo/cache/02244170c798a2bd-meta.json

@@ -1 +0,0 @@
-{"hash":"02244170c798a2bd","duration":19027}

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"hash":"1ab37ce15d9be440","duration":6432}

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

@@ -1 +0,0 @@
-{"hash":"1b9818717e4bdf9f","duration":5431}

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

@@ -1 +0,0 @@
-{"hash":"1c0f580d37370ba2","duration":3004}

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

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

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

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

package/.turbo/cache/2110a4d14e0d11b2-meta.json

@@ -1 +0,0 @@
-{"hash":"2110a4d14e0d11b2","duration":19210}

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

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

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

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

package/.turbo/cache/2fd056afdf4eb39d-meta.json

@@ -1 +0,0 @@
-{"hash":"2fd056afdf4eb39d","duration":9944}

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

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

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

@@ -1 +0,0 @@
-{"hash":"3e12285c614db539","duration":6568}

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

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

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

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

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

@@ -1 +0,0 @@
-{"hash":"5bf2d3f7ba5891e0","duration":1908}

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"hash":"6dd67d179191bda8","duration":1012}

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

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

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

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

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

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

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

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

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

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

package/.turbo/cache/7e1043cffa69f327-meta.json

@@ -1 +0,0 @@
-{"hash":"7e1043cffa69f327","duration":19562}

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

@@ -1 +0,0 @@
-{"hash":"80a13352066a9801","duration":2753}

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

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

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

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

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

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

package/.turbo/cache/8e79bd5c3a16a72e-meta.json

@@ -1 +0,0 @@
-{"hash":"8e79bd5c3a16a72e","duration":5259}