Add PhET simulation content editor

.changeset/gold-knives-study.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/thin-lemons-switch.md

@@ -0,0 +1,2 @@
+---
+---

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

@@ -0,0 +1,49 @@
+import {render, screen} from "@testing-library/react";
+import {userEvent as userEventLib} from "@testing-library/user-event";
+import * as React from "react";
+
+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,
+        });
+    });
+
+    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,45 +1,55 @@
 /* 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/src/perseus-types";
 
-type PhetSimEditorProps = any;
+type Options = {
+    url: PerseusPhetSimWidgetOptions["url"];
+    description: PerseusPhetSimWidgetOptions["description"];
+};
 
-class PhetSimEditor extends React.Component<PhetSimEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
-    static widgetName = "phet-sim" as const;
+type Props = Options & {
+    onChange: (arg1: {
+        url?: Props["url"];
+        description?: Props["description"];
+    }) => void;
+};
 
-    static defaultProps: PhetSimEditorProps = {
+class PhetSimEditor extends React.Component<Props> {
+    static defaultProps: Options = {
         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: () => Options = () => {
+        return {
+            url: this.props.url,
+            description: this.props.description,
+        };
     };
 }
 

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

@@ -215,6 +215,6 @@ export default {
     displayName: "PhET Simulation",
     widget: PhetSim,
     // Let's not expose it to all content creators yet
-    hidden: true,
+    hidden: false,
     isLintable: true,
 } as WidgetExports<typeof PhetSim>;