feat: adds new form component and monorepo structure

[chrisfalaska]

Alaska Airlines Pull Request

Creates a new auro-form component that will eventually incorporate all form components within it as part of a monorepo.

This pull request integrates 3 initial form components:

• input
• dropdown
• form

Summary of Major Changes

• New folder structure, with a new /components/ folder
• Each component has its own package.json & node_modules
• Changes to root package.json to accommodate the new monorepo structure (2d01cb2) | (96bbadb)
• auro-library scripts now reference the ESM import, rather than local copies
• Local formVersionWriter (formerly of auro-library) an exception to overcome challenges with monorepo folder structure (with potential to be moved back to auro-library if a solution can be found to manage both folder structures)
• New npm tasks to build, test & lint individual components
• gitignore updated with patterns in /components/ directory
• New dropdown component added as a work-in-progress (5806718)
• input component migrated as a work-in-progress (266aeb8)
• form component migrated as a work-in-progress
• Updates tsconfig to work with /components/
• Updates Rollup for new bundling, adds missing input dependencies (7d4720e)
• Updates web-test-runner.config.mjs to work with /components/
• Updated demo pages to refer to scripts in the new /components/ directory (550c274)

Summary of component changes

• Moved to /components/ folder and renamed to its elemental name (auro-input is now simply input)
• Scripts referred to in component's package.json now refer to auro-library in node_modules as opposed to locally in their respective repository
• build, lint & test scripts removed from component package.json(TBD if this should be the final solution. See "Challenges" below)
• SCSS & JS files updated to refer to relative paths, example: import './notificationIcons';
• {component}/src/scripts/version.mjs updated to point to new local file, formVersionWriter.js

Intentions

Component code as a starting point

The input and dropdown code featured in this PR reflects the state as of the initial integration into auro-form. In other words, it is already outdated.

Once the auro-form component is ready for v1, the plan is to migrate all Auro form components into the monorepo and deprecate their current repositories. This work is still to be determined and is out of scope for this PR.

Success Criteria

input should build, test & lint as expected, without error.

dropdown as a component was added to form in a work-in-progress state and will fail during test. However, it should build & run in dev without error.

Development

From the form root, components can be run in dev individually:

npm run dev:input

npm run dev:dropdown

Building, Testing & Linting

All build, test & lint tasks are executed from the auro-form root.

auro-form components can build, test & lint collectively, or individually by component:

npm run build:input

npm run test:input

npm run linters:input

Challenges

There are challenges with this approach.

Maintaining so many individual tasks in the root package.json could become difficult to scale and maintain over time.

For example, building all commands currently requires each component to be manually listed in the respective command:

"build": "npm-run-all build:input build:dropdown build:sass sass:render types",

An alternative approach may be to keep each component's tasks within its respective package.json, while tasks for running all form components together as a group could be stored in the root package.json with a more scalable solution.

Resolves

This PR resolves these issues:

• fix: moves auro library to dependencies in package.json #7 #8

Supporting Tickets

The following tickets were merged to facilitate these updates:

• Update package.json tasks to check folders recursively and add compatibility for monorepos WC-Generator#579

Related Tickets

The following tickets were merged to support this PR:

• auro-library: update postCss.mjs to work recursively in folders auro-library#68
• Update package.json tasks to check folders recursively and add compatibility for monorepos WC-Generator#579
• Search folders recursively during SASS build tasks auro-input#340
• Update postinstall script to reference component's package.json with an absolute path auro-library#72

Summary by Sourcery

Add a new form component with advanced input features and a dropdown component with interactive capabilities. Organize the project into a monorepo structure for better management. Include detailed documentation and extensive test coverage for the new components.

New Features:

• Introduce a new form component with enhanced input capabilities, including support for various input types like text, password, email, and credit card, with validation and error handling.
• Implement a dropdown component that supports interactive content, with features like chevron display, border styling, and event-driven visibility control.

Enhancements:

• Adopt a monorepo structure to organize components, facilitating better management and scalability of the codebase.

Documentation:

• Add comprehensive documentation for the new form and dropdown components, including usage examples, API details, and design notes.

Tests:

• Introduce extensive test coverage for the new form and dropdown components, ensuring functionality and reliability across various use cases.

Summary by Sourcery

Add a new form component with advanced input features and a dropdown component with interactive capabilities. Organize the project into a monorepo structure for better management. Include detailed documentation and extensive test coverage for the new components.

New Features:

• Introduce a new form component with enhanced input capabilities, including support for various input types like text, password, email, and credit card, with validation and error handling.
• Implement a dropdown component that supports interactive content, with features like chevron display, border styling, and event-driven visibility control.

Enhancements:

• Adopt a monorepo structure to organize components, facilitating better management and scalability of the codebase.

Documentation:

• Add comprehensive documentation for the new form and dropdown components, including usage examples, API details, and design notes.

Tests:

• Introduce extensive test coverage for the new form and dropdown components, ensuring functionality and reliability across various use cases.

Summary by Sourcery

Add a new form component with advanced input features and a dropdown component with interactive capabilities. Organize the project into a monorepo structure for better management. Include detailed documentation and extensive test coverage for the new components.

New Features:

• Introduce a new form component with enhanced input capabilities, including support for various input types like text, password, email, and credit card, with validation and error handling.
• Implement a dropdown component that supports interactive content, with features like chevron display, border styling, and event-driven visibility control.

Enhancements:

• Adopt a monorepo structure to organize components, facilitating better management and scalability of the codebase.

Documentation:

• Add comprehensive documentation for the new form and dropdown components, including usage examples, API details, and design notes.

Tests:

• Introduce extensive test coverage for the new form and dropdown components, ensuring functionality and reliability across various use cases.

Summary by Sourcery

Add a new form component with integrated input and dropdown elements, organized within a monorepo structure. Update build and TypeScript configurations to support the new structure. Enhance documentation and test coverage for the new components.

New Features:

• Introduce a new form component that integrates input, dropdown, and form elements into a monorepo structure.
• Implement a dropdown component with interactive capabilities, including chevron display and event-driven visibility control.

Enhancements:

• Adopt a monorepo structure to organize components, facilitating better management and scalability of the codebase.
• Update Rollup configuration to support new component entry points and bundling.
• Update TypeScript configuration to accommodate the new monorepo structure.

Build:

• Modify root package.json to support the new monorepo structure, including new npm tasks for building, testing, and linting individual components.

Documentation:

• Add comprehensive documentation for the new form and dropdown components, including usage examples and API details.

Tests:

• Introduce extensive test coverage for the new form and dropdown components, ensuring functionality and reliability across various use cases.

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR implements a monorepo structure for form-related components and adds initial implementations of auro-form, auro-input, and auro-dropdown components. The changes focus on establishing the monorepo architecture while migrating and adapting existing components to work within this new structure.

Class diagram for new form components

classDiagram
    class AuroForm {
        +registerComponent(name)
    }
    class AuroDropdown {
        +show()
        +hide()
    }
    class AuroInput {
        +validate()
    }
    class MySelect {
        +configureBibContent()
        +firstUpdated()
        +updated(changedProperties)
    }
    AuroForm --> AuroDropdown
    AuroForm --> AuroInput
    AuroDropdown --> MySelect

Loading

File-Level Changes

Change	Details	Files
Established monorepo structure for form components	Created new /components/ directory to house individual form components Updated root package.json to support monorepo structure Modified build configurations to support component-specific builds Added component-specific package.json files and node_modules	rollup.config.mjs tsconfig.json eslint.config.mjs web-test-runner.config.mjs
Implemented auro-input component with form validation and styling	Created base input component with validation support Added support for different input types (text, email, password, etc) Implemented input styling and theming Added input-specific tests and documentation	components/input/src/auro-input.js components/input/src/base-input.js components/input/src/styles/style.scss components/input/test/auro-input.test.js
Implemented auro-dropdown component with floating UI support	Created dropdown component with trigger and bib functionality Added floating UI positioning system Implemented dropdown styling and theming Added dropdown-specific tests and documentation	components/dropdown/src/auro-dropdown.js components/dropdown/src/auro-dropdownBib.js components/dropdown/src/floatingUI.mjs components/dropdown/test/auro-dropdown.test.js

---

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 @chrisfalaska - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider implementing a more scalable build process using glob patterns or automation rather than manually listing each component in the build commands
• Look into consolidating duplicated utility code and version files into shared locations within the monorepo structure

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 2 issues found
• 🟢 Documentation: all looks good

---

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

• X
• Mastodon
• LinkedIn
• Facebook

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

[sourcery-ai]

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

Overall Comments:

• Consider automating the build process to avoid manually listing components in package.json scripts. This will improve maintainability as more components are added to the monorepo.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 1 issue found
• 🟢 Documentation: all looks good

---

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

• X
• Mastodon
• LinkedIn
• Facebook

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

[sourcery-ai]

We have skipped reviewing this pull request. It looks like we've already reviewed the commit dabec23 in this pull request.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
4 out of 5 committers have signed the CLA.

✅ chrisfalaska
✅ jason-capsule42
✅ jordanjones243
✅ sun-mota
❌ Chris Friedberg

---

Chris Friedberg seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[sun-mota]

FYI, build:docs does not do anything due to Auro-library's bug on ^2.9.0 and 2.8.0 has another bug to process build:docs. To fix this, we should wait for new stable version of auro-libarary. We can move on and address build:docs issue on a separate ticket.

[chrisfalaska]

FYI, build:docs does not do anything due to Auro-library's bug on ^2.9.0 and 2.8.0 has another bug to process build:docs. To fix this, we should wait for new stable version of auro-libarary. We can move on and address build:docs issue on a separate ticket.

Thanks, I made a ticket to track it: #30

[jason-capsule42]

🎉 This PR is included in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀