Auro Form PR #1 ( #215

DukeFerdinand · 2025-01-15T20:31:51Z

To view the working form I had in the demo

I created a working.html page for testing a real form. Note: I specifically did not use apiExamples/ since the build times make it not worth the productivity loss. Use this URL:

http://localhost:8005/demo/working.html

Alaska Airlines Pull Request

This listens to, and attaches event listeners for, the following:

input
auroFormElement-validated
button[type=submit] clicks

It also adds a datepicker to the example form.

Closes #188
Closes #191
Closes #190

Before Submitting this pull request:

Link all tickets in this repository related to this PR in the Development section
note: all pull requests require at least one linked ticket
If this PR is Ready For Review, all ticket's linked under Development must have their status changed to Ready For Review as well

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license and I have performed a self-review of my own update.

Summary by Sourcery

Add support for date pickers, checkboxes, and buttons to the form.

New Features:

Added support for auro-datepicker, auro-checkbox-group, and auro-button elements within auro-form.

Tests:

Updated the demo page to showcase the new form elements and their interaction with the form's submit functionality.

This listens to, and attaches event listeners for, the following: - input - auroFormElement-validated - button[type=submit] clicks It also adds a datepicker to the example form.

sourcery-ai · 2025-01-15T20:31:58Z

Reviewer's Guide by Sourcery

This PR introduces new features to the auro-form component, adds support for new form elements, and updates the demo page.

Sequence diagram for form validation and submission

sequenceDiagram
    participant User
    participant Form as AuroForm
    participant Input as Form Elements

    User->>Input: Enters data
    Input->>Form: input event
    Note over Form: Updates _formState

    Input->>Form: auroFormElement-validated event
    Note over Form: Updates validity state

    User->>Form: Clicks submit button
    Form->>Form: Check validity
    Form->>Form: Collect form values
    Form-->>User: Submit form data

Class diagram for updated AuroForm component

classDiagram
    class AuroForm {
        -_formState: FormState
        +value: Record~string, any~
        +validity: string
        +static formElementTags: string[]
        +static submitElementTags: string[]
        +isFormElement(tagName: string): boolean
        +isSubmitElement(tagName: string): boolean
        +getSubmitFunction(): function
        +onSlotChange(event: any): void
    }
    note for AuroForm "Added support for datepicker,
checkbox-group, and button elements"

    class FormState {
        value: any
        validity: string
        required: boolean
    }

File-Level Changes

Change	Details	Files
Adds support for datepicker, checkbox group, and button elements within auro-form.	Added `auro-datepicker`, `auro-checkbox-group`, and `auro-button` to the list of supported form elements. Implemented `isFormElement` and `isSubmitElement` methods to check element types. Updated form submission to include values from the new form elements. Added event listeners for form element validation. Modified form state management to handle new element types. Updated form state to include validity and required status for each element. Added a reset button to the demo page. Updated the demo page to showcase new elements and their interaction with form submission. Added styling for the submit button block and datepicker block on the demo page. Added support for datepicker, checkbox group, and button elements within auro-form. Added event listeners for form element validation. Modified form state management to handle new element types. Updated form state to include validity and required status for each element. Added a reset button to the demo page. Updated the demo page to showcase new elements and their interaction with form submission. Added styling for the submit button block and datepicker block on the demo page. Added support for datepicker, checkbox group, and button elements within auro-form. Added event listeners for form element validation. Modified form state management to handle new element types. Updated form state to include validity and required status for each element. Added a reset button to the demo page. Updated the demo page to showcase new elements and their interaction with form submission. Added styling for the submit button block and datepicker block on the demo page. Added support for datepicker, checkbox group, and button elements within auro-form. Added event listeners for form element validation. Modified form state management to handle new element types. Updated form state to include validity and required status for each element. Added a reset button to the demo page. Updated the demo page to showcase new elements and their interaction with form submission. Added styling for the submit button block and datepicker block on the demo page. Added support for datepicker, checkbox group, and button elements within auro-form. Added event listeners for form element validation. Modified form state management to handle new element types. Updated form state to include validity and required status for each element. Added a reset button to the demo page. Updated the demo page to showcase new elements and their interaction with form submission. Added styling for the submit button block and datepicker block on the demo page. Added support for datepicker, checkbox group, and button elements within auro-form. Added event listeners for form element validation. Modified form state management to handle new element types. Updated form state to include validity and required status for each element. Added a reset button to the demo page. Updated the demo page to showcase new elements and their interaction with form submission. Added styling for the submit button block and datepicker block on the demo page. Added support for datepicker, checkbox group, and button elements within auro-form. Added event listeners for form element validation. Modified form state management to handle new element types. Updated form state to include validity and required status for each element. Added a reset button to the demo page. Updated the demo page to showcase new elements and their interaction with form submission. Added styling for the submit button block and datepicker block on the demo page. Added support for datepicker, checkbox group, and button elements within auro-form. Added event listeners for form element validation. Modified form state management to handle new element types. Updated form state to include validity and required status for each element. Added a reset button to the demo page. Updated the demo page to showcase new elements and their interaction with form submission. Added styling for the submit button block and datepicker block on the demo page.	`components/form/src/auro-form.js`
Updates the demo page to showcase the new form elements.	Added a datepicker to the form. Added a reset button to the form. Added a submit button to the form. Added styling for the submit button block and datepicker block.	`components/form/demo/working.html`
Updates the API documentation to reflect the changes.	Added documentation for the `isFormElement` and `isSubmitElement` methods.	`components/form/docs/api.md`
Updates package dependencies.	Added `@auro-formkit/auro-datepicker` and `@auro-formkit/auro-input` as dependencies. Updated workspace dependencies.	`components/form/package.json` `package.json` `package-lock.json`
Adds styling for the form.	Added border radius to the form.	`components/form/src/styles/style.scss`

Assessment against linked issues

Issue	Objective	Addressed
#188	Generate id/value/validity sets in a JSON object for all form elements on slot change as `form.state`	✅
#188	Specifically ignore inputs/elements that do not have a `name` attribute	✅
#191	Create `form.value` as a subset of `form.state` containing only id and value	✅
#190	Maintain form.validity each time a form element fires a validity event	✅

Tips and commands

Interacting with Sourcery

Trigger a new review: Comment @sourcery-ai review on the pull request.
Continue discussions: Reply directly to Sourcery's review comments.
Generate a GitHub issue from a review comment: Ask Sourcery to create an
issue from a review comment by replying to it.
Generate a pull request title: Write @sourcery-ai anywhere in the pull
request title to generate a title at any time.
Generate a pull request summary: Write @sourcery-ai summary anywhere in
the pull request body to generate a PR summary at any time. You can also use
this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

Enable or disable review features such as the Sourcery-generated pull request
summary, the reviewer's guide, and others.
Change the review language.
Add, remove or edit custom review instructions.
Adjust other review settings.

Getting Help

Contact our support team for questions or feedback.
Visit our documentation for detailed guides and information.
Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

sourcery-ai

Hey @DukeFerdinand - I've reviewed your changes - here's some feedback:

Overall Comments:

Consider removing development artifacts like console.log statements and commented out code (e.g. isInitialState) before merging to production
The error handling in onSlotChange() silently catches and ignores errors. Consider being more specific about which errors to catch and how to handle them.

Here's what I looked at during the review

🟡 General issues: 3 issues found
🟢 Security: all looks good
🟢 Testing: all looks good
🟢 Complexity: all looks good
🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

components/form/src/auro-form.js

components/form/docs/api.md

feat: implement initial event listeners

e619b31

This listens to, and attaches event listeners for, the following: - input - auroFormElement-validated - button[type=submit] clicks It also adds a datepicker to the example form.

DukeFerdinand self-assigned this Jan 15, 2025

fix(form): make form validity only return valid or invalid

b88797d

DukeFerdinand marked this pull request as ready for review January 15, 2025 21:50

DukeFerdinand requested a review from a team as a code owner January 15, 2025 21:50

sourcery-ai bot reviewed Jan 15, 2025

View reviewed changes

components/form/src/auro-form.js Show resolved Hide resolved

components/form/docs/api.md Show resolved Hide resolved

components/form/docs/api.md Show resolved Hide resolved

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auro Form PR #1 ( #215

Auro Form PR #1 ( #215

DukeFerdinand commented Jan 15, 2025 •

edited

Loading

sourcery-ai bot commented Jan 15, 2025 •

edited

Loading

Interacting with Sourcery

Customizing Your Experience

Getting Help

sourcery-ai bot left a comment

Auro Form PR #1 ( #215

Are you sure you want to change the base?

Auro Form PR #1 ( #215

Conversation

DukeFerdinand commented Jan 15, 2025 • edited Loading

To view the working form I had in the demo

Alaska Airlines Pull Request

Before Submitting this pull request:

Summary by Sourcery

sourcery-ai bot commented Jan 15, 2025 • edited Loading

Reviewer's Guide by Sourcery

Sequence diagram for form validation and submission

Class diagram for updated AuroForm component

File-Level Changes

Assessment against linked issues

Interacting with Sourcery

Customizing Your Experience

Getting Help

sourcery-ai bot left a comment

Choose a reason for hiding this comment

DukeFerdinand commented Jan 15, 2025 •

edited

Loading

sourcery-ai bot commented Jan 15, 2025 •

edited

Loading