Update new radio types to interface (#2554)

## Summary:
Update new radio types to interface

Issue: LEMS-3170

## Test plan:
- No visual and behavior changes, just confirm radio widget still works as expected

Author: ivyolamit

Reviewers: anakaren-rojas, SonicScrewdriver, mark-fitzgerald

Required Reviewers:

Approved By: anakaren-rojas, SonicScrewdriver

Checks: ✅ 8 checks were successful

Pull Request URL: #2554

Author: ivyolamit

.changeset/eleven-wolves-count.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Update new radio types to interface

docs/architecture.md

@@ -171,7 +171,7 @@ specific render props the widget uses).
 ### `RenderProps`
 
 The `RenderProps` type defines the props that are returned by the widget's
-`transform` and `staticTransform` functions. If these fucntions are not defined
+`transform` and `staticTransform` functions. If these functions are not defined
 on the widget's `WidgetExport<T>` object, then `RenderProps` is synonymous with
 the widgets options type (ie. the type `T` wrapped in `WidgetOptions<T>` from
 `perseus-types.ts`).

packages/perseus/src/widgets/radio/base-radio.new.tsx

@@ -24,8 +24,9 @@ import type {StyleDeclaration} from "aphrodite";
 
 const {captureScratchpadTouchStart} = Util;
 
+// TODO(LEMS-3170): Simplify the ChoiceType by using ChoiceProps directly.
 // exported for tests
-export type ChoiceType = {
+export interface ChoiceType {
     checked: boolean;
     content: React.ReactNode;
     rationale: React.ReactNode;
@@ -38,9 +39,9 @@ export type ChoiceType = {
     previouslyAnswered: boolean;
     revealNoneOfTheAbove: boolean;
     disabled: boolean;
-};
+}
 
-type Props = {
+interface BaseRadioProps {
     apiOptions: APIOptions;
     choices: ReadonlyArray<ChoiceType>;
     deselectEnabled?: boolean;
@@ -61,7 +62,7 @@ type Props = {
     // Renderer. Determines whether we'll auto-scroll the page upon
     // entering review mode.
     isLastUsedWidget?: boolean;
-};
+}
 
 /**
  * The BaseRadio component is the core component for the radio widget.
@@ -85,7 +86,7 @@ const BaseRadio = ({
     numCorrect,
     isLastUsedWidget,
     onChange,
-}: Props): React.ReactElement => {
+}: BaseRadioProps): React.ReactElement => {
     const {strings} = usePerseusI18n();
 
     // useEffect doesn't have previous props

packages/perseus/src/widgets/radio/choice-icon/choice-icon.new.tsx

@@ -14,7 +14,7 @@ import {getChoiceLetter} from "../util";
 
 import choiceIconStyles, {CHOICE_ICON_SIZE} from "./choice-icon-styles";
 
-type ChoiceIconProps = {
+interface ChoiceIconProps {
     pos: number;
     checked: boolean;
     focused: boolean;
@@ -25,13 +25,13 @@ type ChoiceIconProps = {
     multipleSelect: boolean;
     reviewMode: boolean;
     previouslyAnswered: boolean;
-};
+}
 
-type ChoiceInnerProps = {
+interface ChoiceInnerProps {
     pos: number;
     showCorrectness: boolean;
     correct: boolean | null | undefined;
-};
+}
 
 function ChoiceInner(props: ChoiceInnerProps) {
     const {pos, showCorrectness, correct} = props;

packages/perseus/src/widgets/radio/choice-none-above.new.tsx

@@ -7,7 +7,7 @@ import Choice from "./choice.new";
 
 import type {ChoiceProps} from "./choice.new";
 
-interface Props extends ChoiceProps {
+interface ChoiceNoneAboveProps extends ChoiceProps {
     showContent?: boolean;
 }
 
@@ -18,7 +18,10 @@ interface Props extends ChoiceProps {
  *
  * TODO(LEMS-2994): Clean up this file.
  */
-const ChoiceNoneAbove = React.forwardRef<HTMLButtonElement, Props>(
+const ChoiceNoneAbove = React.forwardRef<
+    HTMLButtonElement,
+    ChoiceNoneAboveProps
+>(
     (
         {content, showContent = true, ...otherChoiceProps},
         forwardedRef,

packages/perseus/src/widgets/radio/choice.new.tsx

@@ -18,7 +18,7 @@ import type {APIOptions} from "../../types";
 const intermediateCheckboxPadding = `16px 16px`;
 const intermediateCheckboxPaddingPhone = `12px 16px`;
 
-export type ChoiceProps = {
+export interface ChoiceProps {
     apiOptions?: APIOptions;
     checked?: boolean;
     rationale: React.ReactNode;
@@ -41,7 +41,7 @@ export type ChoiceProps = {
     // an object with a `checked` key. It contains a boolean value specifying
     // the new checked value of this choice.
     onChange?: (newValues: {checked: boolean}) => void;
-};
+}
 
 /**
  * This component is a duplicate of the Choice component in choice.tsx

packages/perseus/src/widgets/radio/focus-ring.new.tsx

@@ -7,7 +7,7 @@ import * as React from "react";
 
 import * as styleConstants from "../../styles/constants";
 
-type Props = {
+interface FocusRingProps {
     children?: React.ReactNode;
     // Whether the focus ring is visible. Allows for positioning
     // the child identically regardless of whether the ring is visible.
@@ -16,7 +16,7 @@ type Props = {
     color?: string;
     // Whether a user can select multiple options or not
     multipleSelect?: boolean;
-};
+}
 
 /**
  * This component is a duplicate of the FocusRing component in focus-ring.tsx
@@ -30,7 +30,7 @@ const FocusRing = ({
     color = styleConstants.kaGreen,
     multipleSelect = false,
     children,
-}: Props): React.ReactElement => {
+}: FocusRingProps): React.ReactElement => {
     const borderColor = visible ? color : "transparent";
     const borderRadius = multipleSelect ? 5 : "50%";
     const style = {

packages/perseus/src/widgets/radio/option-status.new.tsx

@@ -14,15 +14,15 @@ import {usePerseusI18n} from "../../components/i18n-context";
 
 import {getOptionStatusText} from "./utils/string-utils";
 
-type Props = {
+interface OptionStatusProps {
     // Was this option the correct answer?
     correct: boolean;
     // Did the user select this option as the answer?
     checked: boolean;
     // Did the user select this option as the answer earlier?
     previouslyAnswered: boolean;
     reviewMode: boolean;
-};
+}
 
 /**
  * This component is a duplicate of the OptionStatus component in option-status.tsx
@@ -36,7 +36,7 @@ const OptionStatus = ({
     correct,
     previouslyAnswered,
     reviewMode,
-}: Props): React.ReactElement | null => {
+}: OptionStatusProps): React.ReactElement | null => {
     const {strings} = usePerseusI18n();
 
     // Option status is shown only in review mode, or for incorrectly