@khanacademy/perseus-editor 1.1.1 → 2.0.0

package/src/components/{sortable.jsx → sortable.tsx}

@@ -1,4 +1,3 @@
-// @noflow
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -80,10 +79,11 @@ const SortableArea = createReactClass({
     _setDragEvents: function () {
         this._dragItems = this._dragItems || [];
         const items =
+            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'
             ReactDOM.findDOMNode(this).querySelectorAll("[draggable=true]");
 
-        const oldItems = [];
-        const newItems = [];
+        const oldItems: Array<HTMLElement> = [];
+        const newItems: Array<HTMLElement> = [];
 
         for (let i = 0; i < this._dragItems.length; i++) {
             const item = this._dragItems[i];

package/src/components/{util.js → util.ts}

@@ -1,4 +1,3 @@
-// @flow
 export function focusWithChromeStickyFocusBugWorkaround(element: Element) {
     // NOTE(marksandstrom) Chrome sticky focus bug.
     //
@@ -34,6 +33,6 @@ export function focusWithChromeStickyFocusBugWorkaround(element: Element) {
     // this is an issue, however, so there isn't currently a way to out of the
     // `preventScroll` behavior.
 
-    // $FlowIgnore[prop-missing]
+    // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'Element'.
     element.focus({preventScroll: true});
 }

package/src/components/{viewport-resizer.jsx → viewport-resizer.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * A component that displays controls for choosing a viewport size.
  * Renders three buttons: "Phone", "Tablet", and "Desktop".
@@ -13,10 +12,10 @@ const {ButtonGroup, InlineIcon} = components;
 const {devices} = constants;
 const {iconDesktop, iconMobilePhone, iconTablet} = icons;
 
-type Props = {|
-    deviceType: DeviceType,
-    onViewportSizeChanged: (DeviceType) => mixed,
-|};
+type Props = {
+    deviceType: DeviceType;
+    onViewportSizeChanged: (arg1: DeviceType) => unknown;
+};
 
 class ViewportResizer extends React.Component<Props> {
     static propTypes = {
@@ -31,7 +30,7 @@ class ViewportResizer extends React.Component<Props> {
         this.props.onViewportSizeChanged(value);
     };
 
-    render(): React.Element<"span"> {
+    render(): React.ReactNode {
         const phoneButtonContents = (
             <span>
                 <InlineIcon {...iconMobilePhone} /> Phone

package/src/diffs/__stories__/{perseus-diff-wrapper.jsx → perseus-diff-wrapper.tsx}

@@ -1,7 +1,8 @@
-// @flow
 import * as React from "react";
 
-const Wrapper = ({children}: {|children: React.Node|}): React.Node => {
+const Wrapper: React.FC<{
+    children: React.ReactNode;
+}> = ({children}): React.ReactElement => {
     return <div className="perseus-diff">{children}</div>;
 };
 

package/src/diffs/__stories__/{structured-item-diff.stories.jsx → structured-item-diff.stories.tsx}

@@ -1,23 +1,22 @@
-// @flow
-
 import * as React from "react";
 
-import StructuredItemDiff from "../structured-item-diff.jsx";
+import StructuredItemDiff from "../structured-item-diff";
 
-import Wrapper from "./perseus-diff-wrapper.jsx";
+import Wrapper from "./perseus-diff-wrapper";
 
+// @ts-expect-error [FEI-5003] - TS2307 - Cannot find module '../../styles/perseus-editor.less' or its corresponding type declarations.
 import("../../styles/perseus-editor.less");
 
-type StoryArgs = {||};
+type StoryArgs = Record<any, any>;
 
-type Story = {|
-    title: string,
-    decorators: $ReadOnlyArray<
-        (StoryComponent: typeof React.Component) => React.Node,
-    >,
-|};
+type Story = {
+    title: string;
+    decorators: ReadonlyArray<
+        (StoryComponent: typeof React.Component) => React.ReactElement
+    >;
+};
 
-export default ({
+export default {
     title: "Perseus/Editor/Diffs/Structured Item Diff",
     decorators: [
         (StoryComponent) => (
@@ -26,15 +25,15 @@ export default ({
             </Wrapper>
         ),
     ],
-}: Story);
+} as Story;
 
 const tags = {
     a: "a tag",
     b: "b tag",
     c: "c tag",
-};
+} as const;
 
-export const ContentAdded = (args: StoryArgs): React.Node => {
+export const ContentAdded: React.FC<StoryArgs> = (args): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -170,13 +169,15 @@ export const ContentAdded = (args: StoryArgs): React.Node => {
             nameToId: (name) => name[0],
             names: ["a tag", "b tag", "c tag"],
         },
-    };
+    } as const;
 
     return <StructuredItemDiff {...props} />;
 };
 
 // second instance
-export const ContentAddedRemovedAndChanged = (args: StoryArgs): React.Node => {
+export const ContentAddedRemovedAndChanged: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -377,12 +378,14 @@ export const ContentAddedRemovedAndChanged = (args: StoryArgs): React.Node => {
             nameToId: (name) => name[0],
             names: ["a tag", "b tag", "c tag"],
         },
-    };
+    } as const;
     return <StructuredItemDiff {...props} />;
 };
 
 // third instance
-export const MiscContentChanges = (args: StoryArgs): React.Node => {
+export const MiscContentChanges: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -672,13 +675,15 @@ export const MiscContentChanges = (args: StoryArgs): React.Node => {
             nameToId: (name) => name[0],
             names: ["a tag", "b tag", "c tag"],
         },
-    };
+    } as const;
 
     return <StructuredItemDiff {...props} />;
 };
 
 // fourth
-export const ContentRemoved = (args: StoryArgs): React.Node => {
+export const ContentRemoved: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -849,7 +854,7 @@ export const ContentRemoved = (args: StoryArgs): React.Node => {
             nameToId: (name) => name[0],
             names: ["a tag", "b tag", "c tag"],
         },
-    };
+    } as const;
 
     return <StructuredItemDiff {...props} />;
 };

package/src/diffs/__stories__/{tags-diff.stories.jsx → tags-diff.stories.tsx}

@@ -1,21 +1,19 @@
-// @flow
-
 import * as React from "react";
 
-import TagsDiff from "../tags-diff.jsx";
+import TagsDiff from "../tags-diff";
 
-import Wrapper from "./perseus-diff-wrapper.jsx";
+import Wrapper from "./perseus-diff-wrapper";
 
-type StoryArgs = {||};
+type StoryArgs = Record<any, any>;
 
-type Story = {|
-    title: string,
-    decorators: $ReadOnlyArray<
-        (StoryComponent: typeof React.Component) => React.Node,
-    >,
-|};
+type Story = {
+    title: string;
+    decorators: ReadonlyArray<
+        (StoryComponent: typeof React.Component) => React.ReactElement
+    >;
+};
 
-export default ({
+export default {
     title: "Perseus/Editor/Diffs/Tags Diff",
     decorators: [
         (StoryComponent) => (
@@ -24,9 +22,9 @@ export default ({
             </Wrapper>
         ),
     ],
-}: Story);
+} as Story;
 
-export const Example = (args: StoryArgs): React.Node => {
+export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
     return (
         <TagsDiff
             title="tags"

package/src/diffs/__stories__/{text-diff.stories.jsx → text-diff.stories.tsx}

@@ -1,21 +1,19 @@
-// @flow
-
 import * as React from "react";
 
-import TextDiff from "../text-diff.jsx";
+import TextDiff from "../text-diff";
 
-import Wrapper from "./perseus-diff-wrapper.jsx";
+import Wrapper from "./perseus-diff-wrapper";
 
-type StoryArgs = {||};
+type StoryArgs = Record<any, any>;
 
-type Story = {|
-    title: string,
-    decorators: $ReadOnlyArray<
-        (StoryComponent: typeof React.Component) => React.Node,
-    >,
-|};
+type Story = {
+    title: string;
+    decorators: ReadonlyArray<
+        (StoryComponent: typeof React.Component) => React.ReactElement
+    >;
+};
 
-export default ({
+export default {
     title: "Perseus/Editor/Diffs/Text Diff",
     decorators: [
         (StoryComponent) => (
@@ -24,9 +22,9 @@ export default ({
             </Wrapper>
         ),
     ],
-}: Story);
+} as Story;
 
-export const Example = (args: StoryArgs): React.Node => {
+export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
     return (
         <TextDiff
             title="A day in the life of a text diff"

package/src/diffs/__tests__/{split-diff_test.js → split-diff.test.ts}

@@ -1,5 +1,4 @@
-// @flow
-import splitDiff from "../split-diff.jsx";
+import splitDiff from "../split-diff";
 
 describe("split diff", function () {
     it("splits an empty diff", function () {

package/src/diffs/__tests__/{string-array-diff_test.js → string-array-diff.test.ts}

@@ -1,5 +1,4 @@
-// @flow
-import stringArrayDiff from "../string-array-diff.jsx";
+import stringArrayDiff from "../string-array-diff";
 
 describe("string array diff", function () {
     it("diffs an empty diff", function () {

package/src/diffs/__tests__/{structured-item-diff_test.js → structured-item-diff.test.ts}

@@ -1,7 +1,8 @@
-// @flow
 import {buildEmptyItemTreeForShape, shapes} from "@khanacademy/perseus";
 
-import StructuredItemDiff from "../structured-item-diff.jsx";
+import StructuredItemDiff from "../structured-item-diff";
+
+import type {Path} from "@khanacademy/perseus";
 
 const gtpPassageShape = shapes.shape({
     directions: shapes.content,
@@ -59,8 +60,9 @@ describe("StructuredItemDiff", function () {
             [emptyHint, ["questions", 1, "hints", 1]],
         ];
 
-        const addingResult = [];
+        const addingResult: Array<Path> = [];
         StructuredItemDiff.generateCompletePathsList(
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[][]' is not assignable to parameter of type 'ItemList[]'.
             beforeList.slice(),
             afterList.slice(),
             addingResult,
@@ -70,6 +72,7 @@ describe("StructuredItemDiff", function () {
 
         const removingResult = [];
         StructuredItemDiff.generateCompletePathsList(
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[][]' is not assignable to parameter of type 'ItemList[]'.
             afterList,
             beforeList,
             removingResult,
@@ -121,16 +124,12 @@ describe("StructuredItemDiff", function () {
      */
     it("test editing items", function () {
         const passage = buildEmptyItemTreeForShape(shapes.content);
-        // $FlowFixMe[prop-missing]
         passage.content = "passage";
         const firstQuestion = buildEmptyItemTreeForShape(shapes.content);
-        // $FlowFixMe[prop-missing]
         firstQuestion.content = "question 1";
         const firstHint = buildEmptyItemTreeForShape(shapes.hint);
-        // $FlowFixMe[prop-missing]
         firstHint.content = "hint 1";
         const secondQuestionFirstHint = buildEmptyItemTreeForShape(shapes.hint);
-        // $FlowFixMe[prop-missing]
         secondQuestionFirstHint.content = "question 1 hint 1";
         const beforeList = [
             [emptyContent, ["directions"]],
@@ -151,18 +150,14 @@ describe("StructuredItemDiff", function () {
         ];
 
         const passageEdited = buildEmptyItemTreeForShape(shapes.content);
-        // $FlowFixMe[prop-missing]
         passageEdited.content = "passage edited";
         const firstQuestionEdited = buildEmptyItemTreeForShape(shapes.content);
-        // $FlowFixMe[prop-missing]
         firstQuestionEdited.content = "question edited 1";
         const firstHintEdited = buildEmptyItemTreeForShape(shapes.hint);
-        // $FlowFixMe[prop-missing]
         firstHintEdited.content = "edited hint 1";
         const secondQuestionFirstHintEdited = buildEmptyItemTreeForShape(
             shapes.hint,
         );
-        // $FlowFixMe[prop-missing]
         secondQuestionFirstHintEdited.content = "question 1 hint 1 edited";
         const afterList = [
             [emptyContent, ["directions"]],
@@ -182,8 +177,9 @@ describe("StructuredItemDiff", function () {
             [emptyHint, ["questions", 1, "hints", 1]],
         ];
 
-        const firstResult = [];
+        const firstResult: Array<Path> = [];
         StructuredItemDiff.generateCompletePathsList(
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[][]' is not assignable to parameter of type 'ItemList[]'.
             beforeList.slice(),
             afterList.slice(),
             firstResult,
@@ -193,6 +189,7 @@ describe("StructuredItemDiff", function () {
 
         const secondResult = [];
         StructuredItemDiff.generateCompletePathsList(
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[][]' is not assignable to parameter of type 'ItemList[]'.
             afterList,
             beforeList,
             secondResult,
@@ -302,8 +299,9 @@ describe("StructuredItemDiff", function () {
             // removed question 2, added two hints to question 3
         ];
 
-        const firstResult = [];
+        const firstResult: Array<Path> = [];
         StructuredItemDiff.generateCompletePathsList(
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[][]' is not assignable to parameter of type 'ItemList[]'.
             beforeList.slice(),
             afterList.slice(),
             firstResult,
@@ -311,8 +309,9 @@ describe("StructuredItemDiff", function () {
             [],
         );
 
-        const secondResult = [];
+        const secondResult: Array<Path> = [];
         StructuredItemDiff.generateCompletePathsList(
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[][]' is not assignable to parameter of type 'ItemList[]'.
             afterList,
             beforeList,
             secondResult,
@@ -399,6 +398,7 @@ describe("StructuredItemDiff", function () {
 
         const firstResult = [];
         StructuredItemDiff.generateCompletePathsList(
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[][]' is not assignable to parameter of type 'ItemList[]'.
             beforeList.slice(),
             afterList.slice(),
             firstResult,
@@ -408,6 +408,7 @@ describe("StructuredItemDiff", function () {
 
         const secondResult = [];
         StructuredItemDiff.generateCompletePathsList(
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[][]' is not assignable to parameter of type 'ItemList[]'.
             afterList,
             beforeList,
             secondResult,

package/src/diffs/__tests__/{widget-diff-performer_test.js → widget-diff-performer.test.ts}

@@ -1,5 +1,4 @@
-// @flow
-import diff from "../widget-diff-performer.jsx";
+import diff from "../widget-diff-performer";
 
 describe("widget-diff-performer", function () {
     it("diffs a same single value", function () {

package/src/diffs/{article-diff.jsx → article-diff.tsx}

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-unsafe */
-// @flow
 /**
  * A side by side diff view for Perseus articles.
  */
@@ -8,7 +7,7 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import RendererDiff from "./renderer-diff.jsx";
+import RendererDiff from "./renderer-diff";
 
 const rendererProps = PropTypes.shape({
     content: PropTypes.string,
@@ -16,8 +15,8 @@ const rendererProps = PropTypes.shape({
     widgets: PropTypes.objectOf(PropTypes.any),
 });
 
-type Props = $FlowFixMe;
-type State = $FlowFixMe;
+type Props = any;
+type State = any;
 
 class ArticleDiff extends React.Component<Props, State> {
     static propTypes = {
@@ -33,7 +32,7 @@ class ArticleDiff extends React.Component<Props, State> {
         ]).isRequired,
     };
 
-    static _stateFromProps: (Props) => State = (props) => {
+    static _stateFromProps: (arg1: Props) => State = (props) => {
         const {before, after} = props;
         return {
             before: Array.isArray(before) ? before : [before],
@@ -47,7 +46,7 @@ class ArticleDiff extends React.Component<Props, State> {
         this.setState(ArticleDiff._stateFromProps(nextProps));
     }
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {before, after} = this.state;
 
         const sectionCount = Math.max(before.length, after.length);

package/src/diffs/{item-diff.jsx → item-diff.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * A side by side diff view for Perseus exercise items
  * in the standard layout.
@@ -8,8 +7,8 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import RendererDiff from "./renderer-diff.jsx";
-import WidgetDiff from "./widget-diff.jsx";
+import RendererDiff from "./renderer-diff";
+import WidgetDiff from "./widget-diff";
 
 const itemProps = PropTypes.shape({
     question: PropTypes.shape({}).isRequired,
@@ -17,7 +16,7 @@ const itemProps = PropTypes.shape({
     hints: PropTypes.arrayOf(PropTypes.any).isRequired,
 });
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class ItemDiff extends React.Component<Props> {
     static propTypes = {
@@ -25,7 +24,7 @@ class ItemDiff extends React.Component<Props> {
         before: itemProps.isRequired,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {before, after} = this.props;
 
         const hintCount = Math.max(before.hints.length, after.hints.length);

package/src/diffs/{renderer-diff.jsx → renderer-diff.tsx}

@@ -1,38 +1,37 @@
-// @flow
+import {Widgets} from "@khanacademy/perseus";
 /**
  * A side by side diff view for Perseus renderers.
  */
-import {Widgets} from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
-import TextDiff from "./text-diff.jsx";
-import WidgetDiff from "./widget-diff.jsx";
+import TextDiff from "./text-diff";
+import WidgetDiff from "./widget-diff";
 
 import type {PerseusRenderer} from "@khanacademy/perseus";
 
 // In diffs, only show the widgetInfo props that can change
-const filterWidgetInfo = function (widgetInfo, showAlignmentOptions) {
+const filterWidgetInfo = function (widgetInfo, showAlignmentOptions: boolean) {
     const {alignment, graded, options, type} = widgetInfo || {};
 
-    const filteredWidgetInfo = {options};
+    const filteredWidgetInfo = {options} as const;
 
     // Show alignment options iff multiple valid ones exist for this widget
     if (
         showAlignmentOptions &&
         Widgets.getSupportedAlignments(type).length > 1
     ) {
-        // $FlowFixMe[prop-missing]
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'alignment' does not exist on type '{ readonly options: any; }'.
         filteredWidgetInfo.alignment = alignment;
     }
 
     if (type === "transformer") {
-        // $FlowFixMe[prop-missing]
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'graded' does not exist on type '{ readonly options: any; }'.
         filteredWidgetInfo.graded = graded;
     }
 
     if (Widgets.supportsStaticMode(type)) {
-        // $FlowFixMe[prop-missing]
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'static' does not exist on type '{ readonly options: any; }'.
         filteredWidgetInfo.static = widgetInfo?.static ?? undefined;
     }
 
@@ -41,35 +40,30 @@ const filterWidgetInfo = function (widgetInfo, showAlignmentOptions) {
 
 // TODO(michaelpolyak): This type is very similar to `PerseusRenderer` type
 // found in `perseus-all-package/perseus-type.js`, consider just using it.
-type RendererProps = {|
-    content: string,
-
+type RendererProps = {
+    content: string;
     // NOTE: images and widgets may not be set for some items hints,
     // specifically in old revisions, which may only be loaded for diffing.
-    widgets: ?PerseusRenderer["widgets"],
-    images: ?PerseusRenderer["images"],
-|};
+    widgets: PerseusRenderer["widgets"] | null | undefined;
+    images: PerseusRenderer["images"] | null | undefined;
+};
 
-type Props = {|
+type Props = {
     // The "after" props of the renderer. Will be displayed on the right.
-    after: RendererProps,
-
+    after: RendererProps;
     // The "before" props of the renderer. Will be displayed on the left.
-    before: RendererProps,
-
+    before: RendererProps;
     // If true, show widget alignment options in the diff.
-    showAlignmentOptions: boolean,
-
+    showAlignmentOptions: boolean;
     // If true, render a horizontal rule after this diff.
-    showSeparator: boolean,
-
+    showSeparator: boolean;
     // The heading to render above the side by side diff.
     // (In a code review tool this would be the filename.)
-    title: string,
-|};
+    title: string;
+};
 
 class RendererDiff extends React.Component<Props> {
-    static defaultProps: $Rest<Props, {|title: string|}> = {
+    static defaultProps: Partial<Omit<Props, "title">> = {
         after: {
             content: "",
             images: {},
@@ -84,7 +78,7 @@ class RendererDiff extends React.Component<Props> {
         showSeparator: false,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {after, before, showAlignmentOptions, showSeparator, title} =
             this.props;
 

package/src/diffs/{split-diff.jsx → split-diff.ts}

@@ -1,18 +1,18 @@
-// @flow
 import _ from "underscore";
 
 // Split a word-wise diff generated by jsdiff into multiple lines, for the
 // purpose of breaking up the diffs into lines, so that modified lines can be
 // faintly highlighted
 
-const splitDiff = function (diffEntries: $FlowFixMe): $FlowFixMe {
+const splitDiff = function (diffEntries: any): any {
     const lines = [];
-    let currentLine = [];
+    let currentLine: Array<any> = [];
     _.each(diffEntries, (entry) => {
         const values = entry.value.split("\n");
         _.each(values, (value, i) => {
             const isNewline = i > 0;
             if (isNewline) {
+                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'never'.
                 lines.push(currentLine);
                 currentLine = [];
             }
@@ -22,6 +22,7 @@ const splitDiff = function (diffEntries: $FlowFixMe): $FlowFixMe {
     });
 
     if (currentLine.length) {
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'never'.
         lines.push(currentLine);
     }
     return lines;