Rc v1.1 (#15)

* perf(logic): refactor validation logic to work with form components

* feat(library): add functionality from auro-library to repo

* ci(settings): fix syntax in settings.yml

* ci(templates): update repo to latest github issue templates

* ci(workflows): add missing workflows

* ci(repo): add missing configs and scripting, correctly build docs #6

---------

Co-authored-by: Jason Baker <jason@capsule42.com>

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -10,6 +10,15 @@ body:
     attributes:
       value: |
         Thanks for taking the time to fill out this bug report!
+  - type: input
+    id: version
+    attributes:
+      label: Please verify the version of auro-formvalidation you have installed
+  - type: markdown
+    attributes:
+      value: >
+        [![See it on
+        NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-formvalidation?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-formvalidation)
   - type: textarea
     id: details
     attributes:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -27,3 +27,9 @@ body:
     attributes:
       label: Additional context
       description: Add any other context or screenshots about the feature request here.
+  - type: textarea
+    id: exit-criteria
+    attributes:
+      label: Exit criteria
+      description: Define your issue's exit criteria
+      placeholder: "This issue can be closed once the error has been corrected. Any additional scope e.g. updates or refactors, should be discussed PRIOR to adding scope to this issue."

.github/ISSUE_TEMPLATE/general-support.yml

@@ -22,3 +22,9 @@ body:
     attributes:
       label: Additional context
       description: Add any other context or screenshots about the feature request here.
+  - type: textarea
+    id: exit-criteria
+    attributes:
+      label: Exit criteria
+      description: Define your issue's exit criteria
+      placeholder: "This issue can be closed once the error has been corrected. Any additional scope e.g. updates or refactors, should be discussed PRIOR to adding scope to this issue."

.github/settings.yml

@@ -78,7 +78,7 @@ branches:
 # Labels: define labels for Issues and Pull Requests
 labels:
   - name: auro-formvalidation
-     color: 'fa23e4'
+    color: 'fa23e4'
     description:
     process: Key filter for this repo
   - name: duplicate

.github/workflows/addToProject.yml

@@ -0,0 +1,10 @@
+name: Add issue to Auro project
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  call-auro-assign-workflow:
+    uses: AlaskaAirlines/auro-library/.github/workflows/addToProject.yml@main
+    secrets: inherit

.github/workflows/codeql.yml

@@ -0,0 +1,58 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4.1.1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    # - name: Autobuild
+      # uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3

.gitignore

@@ -1,3 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# misc
 .DS_Store
 node_modules/
+docTemplates/
 .cache/
+
+## Demo support files
+demo/*.css
+demo/*.css.map
+
+## CSS built from Sass process
+src/*.css
+src/*.css.map
+
+## *-css built from sass-render process
+*-css.js
+
+## dist files
+dist/
+build/
+
+## Code coverage reports
+coverage/

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
+npm run linters

README.md

@@ -1,3 +1,76 @@
 # Auro Form Utilities
 
-This repository holds scripts to handle form and form element validation.
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
+<!-- The below content is automatically added from ./description.md -->
+The `auro-formvalidation` is a JavaScript utility that handles element validation. The purpose of having a separate validation utility is to ensure consistent validation workflow and results across all form element.
+
+The AuroDesignSystem validation workflow closely mirrors the [HTML5 form elements validation workflow](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation).
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## UI development browser support
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
+[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-formvalidation/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-formvalidation/actions/workflows/testPublish.yml)
+[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-formvalidation?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-formvalidation)
+[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-formvalidation?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
+![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
+
+```shell
+$ npm i @aurodesignsystem/auro-formvalidation
+```
+
+Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Define dependency in project component
+
+```js
+import "@aurodesignsystem/auro-formvalidation";
+```
+
+## auro-formvalidation use cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
+<!-- The below content is automatically added from ./useCases.md -->
+Validation allows for setting the following optional requirements on a form element. These options can be used individually or in any combination.
+
+- `required`: Specifies whether a form field needs to be filled in before the form can be submitted.
+- `minlength` and `maxlength`: Specifies the minimum and maximum length of textual data (strings).
+- `min` and `max`: Specifies the minimum and maximum values of numerical input types.
+- `type`: Specifies whether the data needs to be a number, an email address, or some other specific preset type.
+- `pattern`: Specifies a regular expression that defines a pattern the entered data needs to follow.
+- `error`: Forces the validation state to be _invalid_ and defines the custom validation message to display.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## API Code Examples
+
+## Development
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
+In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
+
+Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### API generation
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
+The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
+
+<!-- AURO-GENERATED-CONTENT:END -->
+
+### Testing
+
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
+Automated tests are required for every Auro component. See `.\test\auro-formvalidation.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
+
+<!-- AURO-GENERATED-CONTENT:END -->

dist/validation.d.ts

@@ -0,0 +1,53 @@
+export class AuroFormValidation {
+    /**
+     * Generates a camelCase version of the tag name for an element.
+     * @private
+     * @param {object} elem - HTML element with tagname to convert.
+     * @returns {string} Tag name in camelCase syntax.
+     */
+    private getCamelCaseName;
+    /**
+     * Determines the validity state of the element based on the common attribute restrictions (pattern).
+     * @private
+     * @param {object} elem - HTML element to validate.
+     * @returns {void}
+     */
+    private validateAttributes;
+    /**
+     * Determines the validity state of the element based on the type attribute.
+     * @private
+     * @param {object} elem - HTML element to validate.
+     * @returns {void}
+     */
+    private validateType;
+    /**
+     * Determines the validity state of the element.
+     * @param {object} elem - HTML element to validate.
+     * @returns {void}
+     */
+    validate(elem: object): void;
+    /**
+     * Gets all the HTML5 `inputs` in the element shadow DOM.
+     * @private
+     * @param {object} elem - HTML element to validate.
+     * @returns {void}
+     */
+    private getInputElements;
+    inputElements: any;
+    /**
+     * Gets all the `auro-inputs` in the element shadow DOM.
+     * @private
+     * @param {object} elem - HTML element to validate.
+     * @returns {void}
+     */
+    private getAuroInputs;
+    auroInputElements: any;
+    /**
+     * Return appropriate error message.
+     * @private
+     * @param {object} elem - HTML element to validate.
+     * @returns {void}
+     */
+    private getErrorMessage;
+}
+//# sourceMappingURL=validation.d.ts.map