@khanacademy/perseus 4.0.2 → 5.0.0

package/src/widgets/radio/__stories__/choice-icon.stories.tsx

@@ -40,13 +40,11 @@ export default {
     args: defaultProps,
 };
 
-const Panel: React.FC<{
-    children: React.ReactNode;
-}> = (props): React.ReactElement => {
+const Panel = (props: {children: React.ReactNode}): React.ReactElement => {
     return <div style={{padding: "10px"}}>{props.children}</div>;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...args} />
@@ -54,7 +52,7 @@ export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} />
@@ -63,7 +61,7 @@ export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Focused: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Focused = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} focused={true} />
@@ -76,7 +74,7 @@ export const Focused: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Checked = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} checked={true} />
@@ -89,7 +87,7 @@ export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const CrossedOut: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const CrossedOut = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon {...defaultProps} crossedOut={true} />
@@ -102,7 +100,7 @@ export const CrossedOut: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Correct = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon
@@ -124,7 +122,7 @@ export const Correct: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Incorrect = (args: StoryArgs): React.ReactElement => {
     return (
         <Panel>
             <ChoiceIcon
@@ -146,7 +144,7 @@ export const Incorrect: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const AllPositions: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const AllPositions = (args: StoryArgs): React.ReactElement => {
     // @ts-expect-error [FEI-5003] - TS2554 - Expected 1-3 arguments, but got 0.
     const allLetters = Array(26).fill();
     return (

package/src/widgets/radio/__stories__/choice-none-above.stories.tsx

@@ -34,7 +34,7 @@ const ChoiceDefaults = {
     onChange: action("changed"),
 } as const;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     const combineProps = {...ChoiceDefaults, ...args} as const;
     return <ChoiceNoneAbove {...combineProps} />;
 };

package/src/widgets/radio/__stories__/choice.stories.tsx

@@ -45,11 +45,11 @@ export default {
     args: defaultProps,
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <Choice {...args} />;
 };
 
-export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Checked = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         checked: true,
@@ -73,7 +73,7 @@ export const Checked: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const ReviewMode: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ReviewMode = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         showCorrectness: true,
@@ -108,7 +108,7 @@ export const ReviewMode: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const Rationale: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Rationale = (args: StoryArgs): React.ReactElement => {
     const sharedProps = {
         ...defaultProps,
         checked: true,

package/src/widgets/radio/__stories__/focus-ring.stories.tsx

@@ -25,7 +25,7 @@ export default {
     },
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     // faux choice is just for demonstration
     const fauxChoiceStyles = {
         height: "20px",

package/src/widgets/radio/__stories__/option-status.stories.tsx

@@ -26,13 +26,11 @@ export default {
     },
 } as Story;
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <OptionStatus {...args} />;
 };
 
-export const AllPossibleOutputs: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AllPossibleOutputs = (args: StoryArgs): React.ReactElement => {
     return (
         <>
             <div>

package/src/widgets/radio/base-radio.tsx

@@ -86,7 +86,7 @@ function getInstructionsText(
     return i18n._("Choose 1 answer:");
 }
 
-const BaseRadio: React.FC<Props> = function (props): React.ReactElement {
+const BaseRadio = function (props: Props): React.ReactElement {
     const {
         apiOptions,
         reviewModeRubric,

package/src/widgets/radio/choice-icon/choice-icon.tsx

@@ -27,11 +27,13 @@ type ChoiceIconProps = {
     previouslyAnswered: boolean;
 };
 
-function ChoiceInner(props: {
+type ChoiceInnerProps = {
     pos: number;
     showCorrectness: boolean;
     correct: boolean | null | undefined;
-}) {
+};
+
+function ChoiceInner(props: ChoiceInnerProps) {
     const {pos, showCorrectness, correct} = props;
     const letter = getChoiceLetter(pos);
 
@@ -96,9 +98,7 @@ function getDynamicStyles(
     return {backgroundColor, borderColor, color, borderRadius};
 }
 
-const ChoiceIcon: React.FC<ChoiceIconProps> = function (
-    props,
-): React.ReactElement {
+const ChoiceIcon = function (props: ChoiceIconProps): React.ReactElement {
     const {
         checked,
         crossedOut,

package/src/widgets/radio/choice-icon/cross-out-line.tsx

@@ -14,9 +14,7 @@ const CROSS_OUT_LINE_SIZE = CHOICE_ICON_SIZE + CROSS_OUT_LINE_PADDING * 2;
  * The "cross-out line" that appears over the icon when the choice has been
  * `crossedOut`.
  */
-const CrossOutLine: React.FC<{
-    color: string;
-}> = function (props): React.ReactElement {
+const CrossOutLine = function (props: {color: string}): React.ReactElement {
     return (
         <svg
             width={CROSS_OUT_LINE_SIZE}

package/src/widgets/radio/choice-none-above.tsx

@@ -17,8 +17,8 @@ type WithForwardRef = {
 
 type PropsWithForwardRef = Props & WithForwardRef;
 
-const ChoiceNoneAbove: React.FC<PropsWithForwardRef> = function (
-    props,
+const ChoiceNoneAbove = function (
+    props: PropsWithForwardRef,
 ): React.ReactElement {
     const {showContent, content, forwardedRef, ...rest} = props;
 

package/src/widgets/radio/choice.tsx

@@ -78,9 +78,7 @@ function uniqueId() {
     return `choice-${id++}`;
 }
 
-const Choice: React.FC<ChoicePropsWithForwardRef> = function (
-    props,
-): React.ReactElement {
+const Choice = function (props: ChoicePropsWithForwardRef): React.ReactElement {
     const {
         disabled = false,
         checked = false,

package/src/widgets/radio/focus-ring.tsx

@@ -18,7 +18,7 @@ type Props = {
     multipleSelect: boolean;
 };
 
-const FocusRing: React.FC<Props> = function (props): React.ReactElement {
+const FocusRing = function (props: Props): React.ReactElement {
     const {visible, color, children, multipleSelect} = props;
 
     const borderColor = visible ? color : "transparent";

package/src/widgets/radio/option-status.tsx

@@ -11,7 +11,7 @@ import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-type OptionStatusProps = {
+type Props = {
     // Was this option the correct answer?
     correct: boolean;
     // Did the user select this option as the answer?
@@ -47,9 +47,7 @@ function renderText(
     return i18n._("Incorrect");
 }
 
-const OptionStatus: React.FC<OptionStatusProps> = function (
-    props,
-): React.ReactElement {
+const OptionStatus = function (props: Props): React.ReactElement {
     const {checked, correct, crossedOut, previouslyAnswered, reviewMode} =
         props;
 

package/src/widgets/radio/widget.tsx

@@ -502,7 +502,6 @@ class Radio extends React.Component<Props> {
         return (
             <BaseRadio
                 labelWrap={true}
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'boolean | undefined' is not assignable to type 'boolean'.
                 multipleSelect={this.props.multipleSelect}
                 countChoices={this.props.countChoices}
                 numCorrect={this.props.numCorrect}

package/src/widgets/reaction-diagram.tsx

@@ -7,6 +7,8 @@ import {Molecule} from "./molecule";
 import type {WidgetExports} from "../types";
 
 class Separator extends React.Component<any> {
+    arrowLength = 100;
+
     static propTypes = {
         // TODO(colin): figure out and add shape.
         data: PropTypes.any,
@@ -21,8 +23,6 @@ class Separator extends React.Component<any> {
         this.drawArrow();
     }
 
-    arrowLength = 100;
-
     drawArrow = () => {
         // eslint-disable-next-line react/no-string-refs
         const canvas = this.refs["arrowCanvas" + this.props.index];

package/src/widgets/video-transcript-link.tsx

@@ -31,7 +31,7 @@ type Props = {
 /**
  * Video Transcript Link Component.
  */
-const VideoTranscriptLink: React.FC<Props> = (props): React.ReactElement => {
+const VideoTranscriptLink = (props: Props): React.ReactElement => {
     const {location} = props;
     const {useVideo} = getDependencies();
     const [id, kind] = IS_URL.test(location)