@khanacademy/perseus-editor 2.0.2 → 2.1.0

package/src/multirenderer-editor.tsx

@@ -141,13 +141,9 @@ type HeaderProps = {
     depth: number;
 };
 
-const Header: React.FC<HeaderProps> = ({
-    depth,
-    ...props
-}): React.ReactElement => {
+const Header = ({depth, ...props}: HeaderProps): React.ReactElement => {
     const headerLevel = Math.min(depth, 5) + 1;
     const HeaderTag = `h${headerLevel}`;
-    // @ts-expect-error [FEI-5003] - TS2559 - Type '{ children?: ReactNode; }' has no properties in common with type 'IntrinsicAttributes'.
     return <HeaderTag {...props} />;
 };
 
@@ -268,13 +264,13 @@ type LeafContainerProps = {
     path: Path;
     shape: Shape;
 };
-const LeafContainer: React.FC<LeafContainerProps> = ({
+const LeafContainer = ({
     name,
     controls,
     children,
     path,
     shape,
-}): React.ReactElement => {
+}: LeafContainerProps): React.ReactElement => {
     const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
     const previewHeading = hasPreviewHeading && (
         <div className={css(styles.containerHeader)}>
@@ -314,9 +310,7 @@ type ArrayContainerProps = {
     shape: ArrayShape;
     actions: ArrayContainerActions;
 };
-const ArrayContainer: React.FC<ArrayContainerProps> = (
-    props,
-): React.ReactElement => {
+const ArrayContainer = (props: ArrayContainerProps): React.ReactElement => {
     const {name, controls, children, path, shape, actions} = props;
     return (
         <div className={css(styles.container)}>
@@ -347,12 +341,12 @@ type ObjectContainerProps = {
     children?: React.ReactNode;
     path: Path;
 };
-const ObjectContainer: React.FC<ObjectContainerProps> = ({
+const ObjectContainer = ({
     name,
     controls,
     children,
     path,
-}): React.ReactElement => {
+}: ObjectContainerProps): React.ReactElement => {
     const headingEditor = (
         <div className={css(styles.containerHeader)}>
             {/* @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}

package/src/widgets/__stories__/label-image-editor.stories.tsx

@@ -93,6 +93,6 @@ class WithState extends React.Component<Empty, State> {
     }
 }
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/__stories__/radio-editor.stories.tsx

@@ -110,6 +110,6 @@ class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
     }
 }
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/label-image/__stories__/answer-choices.stories.tsx

@@ -57,16 +57,12 @@ class WithState extends React.Component<
     }
 }
 
-export const EmptyNonInteractive: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyNonInteractive = (args: StoryArgs): React.ReactElement => {
     const props = {choices: [], onChange: (...args) => {}} as const;
     return <Wrapper {...props} />;
 };
 
-export const FilledNonInteractive: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const FilledNonInteractive = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [
             "Lamborghini",
@@ -81,6 +77,6 @@ export const FilledNonInteractive: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/label-image/__stories__/behavior.stories.tsx

@@ -13,7 +13,7 @@ export default {
     title: "Perseus/Editor/Widgets/Label Image/Behavior",
 } as Story;
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     const [state, setState] = React.useState({
         multipleAnswers: false,
         hideChoicesFromInstructions: false,

package/src/widgets/label-image/__stories__/marker.stories.tsx

@@ -33,7 +33,7 @@ const Wrapper = (props) => (
     </div>
 );
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: [],
         choices: [],
@@ -50,7 +50,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const WithAnswers: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const WithAnswers = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         choices: [

package/src/widgets/label-image/__stories__/question-markers.stories.tsx

@@ -70,7 +70,7 @@ class WithState extends React.Component<
     }
 }
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [],
         imageUrl: "",
@@ -82,7 +82,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Filled = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [],
         imageUrl:
@@ -102,6 +102,6 @@ export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/label-image/__stories__/select-image.stories.tsx

@@ -36,7 +36,7 @@ const WithState = () => {
     );
 };
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         url: "",
         onChange: () => {},
@@ -45,7 +45,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Filled = (args: StoryArgs): React.ReactElement => {
     const props = {
         url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
         onChange: () => {},
@@ -54,6 +54,6 @@ export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/label-image/answer-choices.tsx

@@ -89,7 +89,7 @@ const DraggableGripIcon = () => (
 /**
  * A button link to add a new answer.
  */
-const AddAnswer: React.FC<AddAnswerProps> = ({onClick}): React.ReactElement => (
+const AddAnswer = ({onClick}: AddAnswerProps): React.ReactElement => (
     <Link
         className={css(styles.addAnswer, editorStyles.addAnswer)}
         onClick={onClick}
@@ -105,11 +105,11 @@ const AddAnswer: React.FC<AddAnswerProps> = ({onClick}): React.ReactElement => (
  *
  * TODO(michaelpolyak): Implement answer reordering, CP-117
  */
-const Answer: React.FC<AnswerProps> = ({
+const Answer = ({
     answer,
     onChange,
     onRemove,
-}): React.ReactElement => (
+}: AnswerProps): React.ReactElement => (
     <li className={css(styles.answer)}>
         <Link onClick={onRemove}>
             <Icon icon={removeIcon} size={24} color="#D92916" />
@@ -137,10 +137,10 @@ const Answer: React.FC<AnswerProps> = ({
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-const AnswerChoices: React.FC<AnswerChoicesProps> = ({
+const AnswerChoices = ({
     choices,
     onChange,
-}): React.ReactElement => (
+}: AnswerChoicesProps): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Answer Choices</div>
 

package/src/widgets/label-image/behavior.tsx

@@ -10,7 +10,7 @@ import Checkbox from "../../components/checkbox";
 
 const {colors, typography} = globalStyles;
 
-type BehaviorProps = {
+type Props = {
     // Whether multiple answer choices may be selected for markers.
     multipleAnswers: boolean;
     // Whether to hide answer choices from user instructions.
@@ -22,11 +22,11 @@ type BehaviorProps = {
     }) => void;
 };
 
-const Behavior: React.FC<BehaviorProps> = ({
+const Behavior = ({
     multipleAnswers,
     hideChoicesFromInstructions,
     onChange,
-}): React.ReactElement => (
+}: Props): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Behavior</div>
 

package/src/widgets/label-image/marker.tsx

@@ -17,7 +17,7 @@ import type {MarkerType} from "@khanacademy/perseus";
 
 const {colors, borderRadius} = globalStyles;
 
-type MarkerProps = MarkerType & {
+type Props = MarkerType & {
     // The list of possible answer choices.
     choices: ReadonlyArray<string>;
     // Callback for when any of the marker props are changed.
@@ -26,16 +26,16 @@ type MarkerProps = MarkerType & {
     onRemove: () => void;
 };
 
-type MarkerState = {
+type State = {
     // Whether answer choices dropdown is shown, controlled by the user clicking
     // on the marker icon.
     showDropdown: boolean;
 };
 
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     _marker: HTMLElement | null | undefined;
 
-    constructor(props: MarkerProps) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -47,7 +47,7 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
         document.addEventListener("click", this.handleClick, true);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: MarkerProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         const {answers} = this.props;
 
         // Exclude those answers that are no longer present in choices.

package/src/widgets/label-image/question-markers.tsx

@@ -13,7 +13,7 @@ import type {MarkerType} from "@khanacademy/perseus";
 
 const {colors, typography} = globalStyles;
 
-type QuestionMarkersProps = {
+type Props = {
     // The list of possible answers in a specific order.
     choices: ReadonlyArray<string>;
     // The question image properties.
@@ -26,7 +26,7 @@ type QuestionMarkersProps = {
     onChange: (markers: ReadonlyArray<MarkerType>) => void;
 };
 
-export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
+export default class QuestionMarkers extends React.Component<Props> {
     _markers: Array<Marker | null | undefined> = [];
 
     openDropdownForMarkerIndices(indices: ReadonlyArray<number>) {

package/src/widgets/label-image/select-image.tsx

@@ -11,17 +11,14 @@ import FormWrappedTextField from "../../components/form-wrapped-text-field";
 
 const {colors, typography} = globalStyles;
 
-type SelectImageProps = {
+type Props = {
     // Callback for when image URL is changed.
     onChange: (url: string) => void;
     // The selected image URL.
     url: string;
 };
 
-const SelectImage: React.FC<SelectImageProps> = ({
-    onChange,
-    url,
-}): React.ReactElement => (
+const SelectImage = ({onChange, url}: Props): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Image</div>
 

package/src/widgets/label-image-editor.tsx

@@ -19,7 +19,7 @@ import SelectImage from "./label-image/select-image";
 
 import type {MarkerType} from "@khanacademy/perseus";
 
-type LabelImageEditorProps = {
+type Props = {
     // List of answer choices to label question image with.
     choices: ReadonlyArray<string>;
     // The question image properties.
@@ -37,7 +37,7 @@ type LabelImageEditorProps = {
     onChange: (options: any) => void;
 };
 
-class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+class LabelImageEditor extends React.Component<Props> {
     _questionMarkers: QuestionMarkers | null | undefined;
 
     static defaultProps: {
@@ -62,7 +62,7 @@ class LabelImageEditor extends React.Component<LabelImageEditorProps> {
 
     static widgetName = "label-image" as const;
 
-    componentDidUpdate(prevProps: LabelImageEditorProps) {
+    componentDidUpdate(prevProps: Props) {
         const coordsToMarkers: Record<string, any> = {};
 
         prevProps.markers.forEach(

package/src/widgets/numeric-input-editor.tsx

@@ -66,7 +66,6 @@ const NumericInputEditor: any = createReactClass({
             size: "normal",
             coefficient: false,
             labelText: "",
-            multipleNumberInput: false,
             rightAlign: false,
         };
     },
@@ -417,16 +416,6 @@ const NumericInputEditor: any = createReactClass({
 
         return (
             <div className="perseus-input-number-editor">
-                <div ref={(e) => (this.multInputOption = e)}>
-                    <select onChange={this.onMultipleInputChange}>
-                        <option value="simple-numeric-input">
-                            Ask for one correct solution
-                        </option>
-                        <option value="multiple-numeric-input">
-                            Ask for all correct solutions
-                        </option>
-                    </select>
-                </div>
                 <div className="ui-title">User input</div>
                 <div className="msg-title">
                     Message shown to user on attempt
@@ -480,15 +469,6 @@ const NumericInputEditor: any = createReactClass({
         });
     },
 
-    onMultipleInputChange: function (event) {
-        const newOption = event.target.value;
-        if (newOption === "multiple-numeric-input") {
-            this.props.onChange({multipleNumberInput: true});
-        } else {
-            this.props.onChange({multipleNumberInput: false});
-        }
-    },
-
     updateAnswer: function (choiceIndex, update) {
         if (!_.isObject(update)) {
             return _.partial(

package/{tsconfig.json → tsconfig-build.json}

@@ -15,8 +15,8 @@
         }
     },
     "references": [
-        {"path": "../kas"},
-        {"path": "../kmath"},
-        {"path": "../perseus"},
+        {"path": "../kas/tsconfig-build.json"},
+        {"path": "../kmath/tsconfig-build.json"},
+        {"path": "../perseus/tsconfig-build.json"},
     ]
 }