Add HTMX and Alpine.js alongside helpful utilities, common js_entry point

[biyeun]

Product Description

The time has come! We are officially including HTMX and Alpine in our JavaScript dependencies.

I didn't want to just drop these dependencies into HQ without some examples and documentation providing structure for how we want to use these libraries in our codebase. With such a large team, structure is immensely important. Hopefully, these examples and corresponding docs in the Styleguide will provide a good starting point for us!

Example 1: CrispyForms usage

This example uses Alpine to sprinkle interactivity into a Crispy Form—a very common use case for HQ. It also uses
HTMX to asynchronously load that form to a "host" view and process the response from that form.

view on staging (must be logged in)

Example 2: To-Do List

Taking inspiration from @snopoke's presentation at the GTD Summit, we have a simple To-Do list demoing the usage of HtmxActionMixin (explained in the technical summary). Additionally, this demos the usage of Alpine for a simple inline editing widget.

view on staging (must be logged in)

(a demo of the HTMX request error modal can be triggered here as well!)

Styleguide documentation to visually link everything together for the demos!

Technical Summary

• Adds htmx and alpine.js as javascript dependencies
• adds a common js_entry point hqwebapp/js/htmx_and_alpine that can be used on a page for folks to quickly get started with HTMX and Alpine without writing any additional javascript files
• adds HqHtmxActionMixin, which can be mixed into django template views so that HTMX requests to that view can process and return partial template responses via methods decorated with @hq_hx_action()
• adds an example To-Do list illustrating the usage of HqHtmxActionMixin
• adds an example usage of alpine inside a crispy form for adding interactivity without extra javascript
• provides an example with an alternative to HqHtmxActionMixin for form interactions with HTMX that FormView that processes HTMX requests and is hosted on a regular template view. Note, it's possible to also have that template view use HqHtmxActionMixin for additional non-form HTMX activity for more complex usage
• adds a utility which inserts the CSRF token into HTMX requests
• adds a utility to retry HTMX requests
• adds a utility to handle HTMX errors and generate a modal (with alpine) to relay those errors to the user
• adds guidance for accessing Alpine globals (e.g. Alpine.data()) for more complex pages
• documentation in styleguide going over the two examples above and an quick start suggestion
• HqHtmxDebugMixin added for simulating server issues during development of views using HqHtmxActionMixin

Safety Assurance

Safety story

Only introducing new dependencies and examples / documentation. Not affecting any active pages.

Automated test coverage

N/A

QA Plan

N/A

Rollback instructions

• This PR can be reverted after deploy with no further considerations

Labels & Review

• Risk label is set correctly
• The set of people pinged as reviewers is appropriate for the level of risk of the change

[nospame]

Comments from today's product team code review. Makes sense on the whole, noting I (and other devs probably) will need to read through htmx and alpine docs for some particulars.

[nospame]

Does htmx have a way of constructing its own request that we could use here? The answer could be "no"

[biyeun]

updated the signature of the function to make things easier to read. but, yes, no easy retry option with HTMX sadly

[biyeun]

Thank you @nospame and @mjriley for your group review today! I addressed the feedback and added a styleguide page which will be available here as soon as the next staging deploy completes. :)

[snopoke]

Amazing work @biyeun