feat: prototype MultipleChoiceWidget

[fillerwriter]

Introduce a new widget to allow for input of multiple choice questions. Provides a basic data structure MultipleChoiceData that can be used to display data. I'm using this PR to describe how the work is organized, and where the work would focus on with followup PRs.

Requirements Doc

This PR establishes two primary components within the app, along with one type.

packages/c3-ui-editor/lib/components/MultipleChoiceWidget/MultipleChoiceData.ts

This type defines a structure that the MultipleChoiceWidget builds on.

• prompt: The question being asked.
• answers[]: An array of strings that represent one or more answers.
• correct: A JavaScript Set that defines which answers are the correct answers. Each value is tied to the array index for answers. I chose to use a Set instead of an Array to make keeping track of one and only one version appearing in the Set easier, even though it slightly complicated setting up immer.
• multiple: A boolean that determines whether or not multiple answers could be considered correct. I use this flag in the widget to determine checkbox behavior when setting correct values.

packages/c3-ui-core/lib/components/MultipleChoiceItem.tsx

This is a widget that holds a text input and a checkbox to signal whether or not it is a correct answer. Based on the mockups, the checkbox holds the data for the "A", "B", "C" etc. selector for the widget, and would be styled accordingly in a future PR. This widget holds no internal state.

This component is in c3-ui-core rather than c3-ui-editor because it seems like something that might make sense in other components, assuming that c3-ui-core is a Campfire standard library. This is not a strongly held opinion, and could easily live in c3-ui-editor instead.

packages/c3-ui-editor/lib/components/MultipleChoiceWidget/MultipleChoiceWidget.tsx

This is the primary widget, and where the component state is stored. Some logic is baked into this component (including how multiple choice selection is handled). You can preview this in the Item Editor page of this app. Selecting a checkbox when multiple options is disabled results in all other options being deselected.

A new to me trick here is the use of useEffect as a trigger to pass state up a onChange chain, so that ItemEditor can correctly catch an updated dataStore from this component.

General notes on current PR

• The focus of this PR is to ensure data events are firing properly up and down the component chain, hence the lack of styling.
• I'm not sure what Campfire's preferred organization strategy for types is, hence the haphazard placement of them either inline in components, or in one separately imported file. Before merging, I'd want to match whatever code style is preferred by the team.
• I added tabIndex values to all the inputs to aid with keyboard accessibility, (as per best practices)[https://www.a11y-collective.com/blog/tabindex-accessibility/].

Expected followup PRs

• Cypress integration for component testing, once MultipleChoiceData's structure is generally accepted by team.
• A read widget for item preview, built on MultipleChoiceData's structure.
• Adding a checkbox/toggle for enabling/disabling multiple choice per widget in MultipleChoiceWidget.
• Adding a button to MultipleChoiceWidget to allow for adding new answers to a prompt.
• Adding a button to MultipleChoiceItem to trigger a deletion of an answer in MultipleChoiceWidget.
• Adding question reordering functionality using the DnD library flagged in the requirements. I would also want to explore adding keyboard-driven reordering for a11y purposes. I'm not familiar with the DnD library that Campfire uses, but I do like the functionality demoed here, and think the UI pattern could be reimplemented alongside our own.
• Styling. This could happen either earlier in the process to establish norms, or later as a single pass.