AI-powered frontend web dev

import { useDialog } from 'react-aria';

// I was intending to get more of a reusable modal dialog component,
// instead of a full modal dialog example with hardcoded markup, but
// I didn't prompt for that.
function MyModal({ isOpen, onClose }) {
  // ✅ This is exactly where you should call the `useDialog` hook
  // ❌ `useDialog` doesn't accept `isOpen` or `onClose` props
  const dialog = useDialog({ isOpen, onClose });

  return (
    <>
      {/*
        ✅ `triggerProps` is the correct variable name for this button
        ✅ Tailwind classes look good
        
        ❌ `triggerProps` gets returned from a `useOverlayTriggerState`
           hook, not `useDialog`
      */}
      <button
        className="bg-blue-500 text-white py-2 px-4 rounded-lg"
        {...dialog.triggerProps}
      >
        Open Modal
      </button>
      <div
        className={
          `fixed top-0 left-0 h-full w-full z-50
          flex items-center justify-center
          ${isOpen ? 'block' : 'hidden'}`
        }
        // ✅ This is the correct place to put `dialog.dialogProps`
        // ✅ Tailwind classes look good, though `z-50` is a weird choice
        {...dialog.dialogProps}
      >
        {/*
          ✅ ChatGPT continues to show good Tailwind knowledge
          ⚠️ In a reusable component, this would be a slot for `children`.
            I'm 100% certain I could better prompt the AI to set that up
            for me instead of hardcoding this markup.
        */}
        <div className="bg-white p-6 rounded-lg">
          <h2 className="text-lg font-medium">Modal Title</h2>
          <p className="mt-4">Modal content goes here...</p>
          <button
            className="bg-red-500 text-white py-2 px-4 rounded-lg"
            // ❌ `closeProps` is not a thing. Opening and closing should
            //    be handled in a separate `ModalOverlay` component.
            {...dialog.closeProps}
          >
            Close
          </button>
        </div>
      </div>
    </>
  );
}

import {
  ref,
  onMounted,
  onUnmounted,
  watch
} from 'vue'

export default function useListbox(props) {
  // We ended up with a `useListbox` that only supports multiselect.
  // I was hoping for something that supports both multi and single
  // select, but I didn't explicitly ask for that.
  const selectedIndices = ref(new Set())
  // The `() => ref()` callback sets each item in the array to a
  // reactive ref by default. This is fine, but doesn't really serve
  // any useful purpose in this implementation or any implementation I've
  // ever written myself.
  const listItems = ref(Array.from({
      length: props.listItems.length
    },
    () => ref()
  ))
  const listboxRef = ref()

  // I omitted a bunch of code from this `handleKeydown` function
  // just to keep the blog post length under control,  but it was all
  // good code. ChatGPT clearly knew how to navigate its `selectedIndices`
  // set to add or remove selections.
  //
  // It was checking for the ctrl key to add selections to the set instead
  // of clearing and resetting. I wanted to see support for shift and
  // cmd, but those were not included.
  function handleKeyDown(event) {
    switch (event.key) {
      case 'ArrowUp':
        // ...
        break
      case 'ArrowDown':
        // ...
        break
      case 'Home':
        // ...
        break
      case 'End':
        // ...
        break
    }
  }

  // All of the `handleKeydown` code was similar to what you see hear,
  // it's pretty great stuff.
  function handleClick(event) {
    const newSelectedIndex = listItems.value.indexOf(event.target)
    if (!event.ctrlKey) {
      selectedIndices.value.clear()
    }
    if (selectedIndices.value.has(newSelectedIndex)) {
      selectedIndices.value.delete(newSelectedIndex)
    } else {
      selectedIndices.value.add(newSelectedIndex)
    }
  }

  // I had to coach ChatGPT pretty heavily to get it to write this
  // function ref. It was totally unaware of the function ref feature
  // in Vue, which isn't surprising, considering this code is rare in
  // the training dataset.
  //
  // This is also a weird place to put the code—ideally the function ref
  // would be defined right next to the reactive reference it mutates,
  // to keep things nicely organized. Again, ChatGPT doesn't have enough
  // training data for stuff like this.
  function setListItem(element, index) {
    listItems.value[index].value = element
  }

  // Mounted and unmounted hooks look good. I didn't do any additional
  // prompting, it just knew how and where to add and clean up listeners.
  onMounted(() => {
    listboxRef.value.setAttribute('role', 'listbox')
    listboxRef.value.addEventListener('keydown', handleKeyDown)
    listboxRef.value.addEventListener('click', handleClick)
  })
  onUnmounted(() => {
    listboxRef.value.removeEventListener('keydown', handleKeyDown)
    listboxRef.value.removeEventListener('click', handleClick)
  })

  // All code comments inside this `watch` were written by ChatGPT,
  // so I left them in for you to read. Interesting stuff! This is
  // how ChatGPT is handling the case where list options can change
  // length or order reactively, and should retain selection if that
  // happens.
  //
  // It's good code, but again, it shows a lack of understanding of
  // how function refs work. When you're capturing options via a function
  // ref, you don't need to accept `props.listItems` and react to its
  // changes—you can just watch the `listItems` ref directly for changes
  // to rendered content.
  watch(props.listItems, (newItems) => {
      const diff = newItems.length - listItems.value.length
      if (diff > 0) {
        // if the new listItems is longer than the previous one
        // add new refs to the listItems
        listItems.value = [...listItems.value, ...Array.from({
          length: diff
        }, () => ref())]
      } else if (diff < 0) {
        // if the new listItems is shorter than the previous one
        // remove items from the listItems
        listItems.value = listItems.value.slice(0, diff)
        // remove indices from selectedIndices that are not present anymore
        const newSelectedIndices = new Set()
        for (const index of selectedIndices.value) {
          if (index < newItems.length) {
            newSelectedIndices.add(index)
          }
        }
        selectedIndices.value = newSelectedIndices
      }
    }, {
      deep: true
    }),

    // Setting `tabindex` based on selection is on the right track. For
    // proper accessibility though, you'd only want `tabindex=0` on
    // one list item. Usually it would be on the most recently focused
    // item, and you'd have to maintain a separate piece of reactive state
    // to track the focused item.
    watch(selectedIndices, (newIndices) => {
      listItems.value.forEach((itemRef, index) => {
        itemRef.value.setAttribute("tabindex", newIndices.has(index) ? 0 : -1)
      });
    });

  // API is a good start. It's missing functions to programmatically
  // select items, but I didn't prompt ChatGPT to add those.
  return {
    selectedIndices,
    listItems,
    listboxRef,
    setListItem
  }
}