Add PhET simulation content editor

.changeset/three-ligers-think.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Add a content editor for the PhET widget

packages/perseus-editor/src/widgets/__tests__/phet-sim-editor.test.tsx

@@ -0,0 +1,55 @@
+import {Dependencies} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import {userEvent as userEventLib} from "@testing-library/user-event";
+import * as React from "react";
+
+import {testDependencies} from "../../../../../testing/test-dependencies";
+import PhetSimEditor from "../phet-sim-editor";
+
+import type {UserEvent} from "@testing-library/user-event";
+
+describe("phet-sim editor", () => {
+    let userEvent: UserEvent;
+    beforeEach(() => {
+        userEvent = userEventLib.setup({
+            advanceTimers: jest.advanceTimersByTime,
+        });
+
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("renders", async () => {
+        // Act
+        render(<PhetSimEditor onChange={() => {}} />);
+
+        // Assert
+        expect(screen.getByLabelText("URL")).toBeInTheDocument();
+        expect(screen.getByLabelText("Description")).toBeInTheDocument();
+    });
+
+    it("should be possible to change URL", async () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+
+        // Act
+        render(<PhetSimEditor onChange={onChangeMock} />);
+        await userEvent.type(screen.getByLabelText("URL"), "h");
+
+        // Assert
+        expect(onChangeMock).toBeCalledWith({url: "h"});
+    });
+
+    it("should be possible to change Description", async () => {
+        // Arrange
+        const onChangeMock = jest.fn();
+
+        // Act
+        render(<PhetSimEditor onChange={onChangeMock} />);
+        await userEvent.type(screen.getByLabelText("Description"), "P");
+
+        // Assert
+        expect(onChangeMock).toBeCalledWith({description: "P"});
+    });
+});

packages/perseus-editor/src/widgets/phet-sim-editor.tsx

@@ -1,46 +1,56 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable react/sort-comp */
-import {Changeable, EditorJsonify} from "@khanacademy/perseus";
+import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";
 
-import BlurInput from "../components/blur-input";
+import type {PerseusPhetSimWidgetOptions} from "@khanacademy/perseus";
 
-type PhetSimEditorProps = any;
+type DefaultProps = {
+    url: PerseusPhetSimWidgetOptions["url"];
+    description: PerseusPhetSimWidgetOptions["description"];
+};
 
-class PhetSimEditor extends React.Component<PhetSimEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
-    static widgetName = "phet-sim" as const;
+type Props = DefaultProps & {
+    onChange: (arg1: {
+        url?: Props["url"];
+        description?: Props["description"];
+    }) => void;
+};
 
-    static defaultProps: PhetSimEditorProps = {
+class PhetSimEditor extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
         url: "",
         description: "",
     };
 
-    change: (arg1: any, arg2: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
+    static widgetName = "phet-sim" as const;
 
     render(): React.ReactNode {
         return (
             <div>
-                <label>
-                    URL:
-                    <BlurInput
-                        value={this.props.url}
-                        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-                        onChange={this.change("url")}
-                    />
-                </label>
+                <LabeledTextField
+                    label={"URL"}
+                    value={this.props.url}
+                    onChange={(url: string) => this.props.onChange({url})}
+                />
+                <br />
+                <LabeledTextField
+                    label={"Description"}
+                    value={this.props.description}
+                    onChange={(description: string) =>
+                        this.props.onChange({description})
+                    }
+                />
             </div>
         );
     }
 
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
+    serialize(): PerseusPhetSimWidgetOptions {
+        return {
+            url: this.props.url,
+            description: this.props.description,
+        };
+    }
 }
 
 export default PhetSimEditor;

packages/perseus/src/index.ts

@@ -193,6 +193,7 @@ export type {
     PerseusInputNumberWidgetOptions,
     PerseusInteractiveGraphWidgetOptions,
     PerseusItem,
+    PerseusPhetSimWidgetOptions,
     PerseusPlotterWidgetOptions,
     PerseusPythonProgramWidgetOptions,
     PerseusRadioWidgetOptions,

packages/perseus/src/perseus-types.ts

@@ -1561,8 +1561,6 @@ export type PerseusPhetSimWidgetOptions = {
     url: string;
     // Translatable Text; Description of the sim for Khanmigo and alt text
     description: string;
-    // Always false
-    static: boolean;
 };
 
 export type PerseusVideoWidgetOptions = {

packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts

@@ -13,7 +13,6 @@ export const question1: PerseusRenderer = {
             options: {
                 url: "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html",
                 description: "Projectile Data Lab",
-                static: false,
             },
             alignment: "default",
         },
@@ -32,7 +31,6 @@ export const nonPhetUrl: PerseusRenderer = {
             options: {
                 url: "https://google.com/",
                 description: "Google",
-                static: false,
             },
             alignment: "default",
         },