diff --git a/.changeset/shy-jeans-reply.md b/.changeset/shy-jeans-reply.md new file mode 100644 index 0000000000..7304f03be6 --- /dev/null +++ b/.changeset/shy-jeans-reply.md @@ -0,0 +1,6 @@ +--- +"@khanacademy/perseus": patch +"@khanacademy/perseus-editor": patch +--- + +Refactor PhET Sim widget name to PhET Simulation diff --git a/packages/perseus-editor/src/all-editors.ts b/packages/perseus-editor/src/all-editors.ts index 4084927675..672251d673 100644 --- a/packages/perseus-editor/src/all-editors.ts +++ b/packages/perseus-editor/src/all-editors.ts @@ -27,7 +27,7 @@ import OrdererEditor from "./widgets/orderer-editor"; import PassageEditor from "./widgets/passage-editor"; import PassageRefEditor from "./widgets/passage-ref-editor"; import PassageRefTargetEditor from "./widgets/passage-ref-target-editor"; -import PhetSimEditor from "./widgets/phet-sim-editor"; +import PhetSimulationEditor from "./widgets/phet-simulation-editor"; import PlotterEditor from "./widgets/plotter-editor"; import PythonProgramEditor from "./widgets/python-program-editor"; import RadioEditor from "./widgets/radio/editor"; @@ -65,7 +65,7 @@ export default [ PassageEditor, PassageRefEditor, PassageRefTargetEditor, - PhetSimEditor, + PhetSimulationEditor, PlotterEditor, PythonProgramEditor, SimpleMarkdownTesterEditor, diff --git a/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/phet-simulation-editor.stories.tsx similarity index 58% rename from packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx rename to packages/perseus-editor/src/widgets/__stories__/phet-simulation-editor.stories.tsx index 62dcafc601..1b7f260c0b 100644 --- a/packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx +++ b/packages/perseus-editor/src/widgets/__stories__/phet-simulation-editor.stories.tsx @@ -1,16 +1,16 @@ import {action} from "@storybook/addon-actions"; -import PhetSimEditor from "../phet-sim-editor"; +import PhetSimulationEditor from "../phet-simulation-editor"; import type {Meta, StoryObj} from "@storybook/react"; -const meta: Meta = { - component: PhetSimEditor, +const meta: Meta = { + component: PhetSimulationEditor, title: "PerseusEditor/Widgets/PhET Simulation Editor", }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Primary: Story = { args: { diff --git a/packages/perseus-editor/src/widgets/__tests__/phet-sim-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/phet-simulation-editor.test.tsx similarity index 82% rename from packages/perseus-editor/src/widgets/__tests__/phet-sim-editor.test.tsx rename to packages/perseus-editor/src/widgets/__tests__/phet-simulation-editor.test.tsx index 50c8736e31..cbce967dc7 100644 --- a/packages/perseus-editor/src/widgets/__tests__/phet-sim-editor.test.tsx +++ b/packages/perseus-editor/src/widgets/__tests__/phet-simulation-editor.test.tsx @@ -4,11 +4,11 @@ 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 PhetSimulationEditor from "../phet-simulation-editor"; import type {UserEvent} from "@testing-library/user-event"; -describe("phet-sim editor", () => { +describe("phet-simulation editor", () => { let userEvent: UserEvent; beforeEach(() => { userEvent = userEventLib.setup({ @@ -22,7 +22,7 @@ describe("phet-sim editor", () => { it("renders", async () => { // Act - render( {}} />); + render( {}} />); // Assert expect(screen.getByLabelText("URL")).toBeInTheDocument(); @@ -34,7 +34,7 @@ describe("phet-sim editor", () => { const onChangeMock = jest.fn(); // Act - render(); + render(); await userEvent.type(screen.getByLabelText("URL"), "h"); // Assert @@ -46,7 +46,7 @@ describe("phet-sim editor", () => { const onChangeMock = jest.fn(); // Act - render(); + render(); await userEvent.type(screen.getByLabelText("Description"), "P"); // Assert diff --git a/packages/perseus-editor/src/widgets/phet-sim-editor.tsx b/packages/perseus-editor/src/widgets/phet-simulation-editor.tsx similarity index 74% rename from packages/perseus-editor/src/widgets/phet-sim-editor.tsx rename to packages/perseus-editor/src/widgets/phet-simulation-editor.tsx index 21ac82c44d..80c36690fe 100644 --- a/packages/perseus-editor/src/widgets/phet-sim-editor.tsx +++ b/packages/perseus-editor/src/widgets/phet-simulation-editor.tsx @@ -3,11 +3,11 @@ import {LabeledTextField} from "@khanacademy/wonder-blocks-form"; import * as React from "react"; -import type {PerseusPhetSimWidgetOptions} from "@khanacademy/perseus"; +import type {PerseusPhetSimulationWidgetOptions} from "@khanacademy/perseus"; type DefaultProps = { - url: PerseusPhetSimWidgetOptions["url"]; - description: PerseusPhetSimWidgetOptions["description"]; + url: PerseusPhetSimulationWidgetOptions["url"]; + description: PerseusPhetSimulationWidgetOptions["description"]; }; type Props = DefaultProps & { @@ -17,13 +17,13 @@ type Props = DefaultProps & { }) => void; }; -class PhetSimEditor extends React.Component { +class PhetSimulationEditor extends React.Component { static defaultProps: DefaultProps = { url: "", description: "", }; - static widgetName = "phet-sim" as const; + static widgetName = "phet-simulation" as const; render(): React.ReactNode { return ( @@ -45,7 +45,7 @@ class PhetSimEditor extends React.Component { ); } - serialize(): PerseusPhetSimWidgetOptions { + serialize(): PerseusPhetSimulationWidgetOptions { return { url: this.props.url, description: this.props.description, @@ -53,4 +53,4 @@ class PhetSimEditor extends React.Component { } } -export default PhetSimEditor; +export default PhetSimulationEditor; diff --git a/packages/perseus/package.json b/packages/perseus/package.json index 6a6b086342..948de2cf3a 100644 --- a/packages/perseus/package.json +++ b/packages/perseus/package.json @@ -96,6 +96,7 @@ "@khanacademy/wonder-blocks-dropdown": "5.3.0", "@khanacademy/wonder-blocks-form": "^4.7.1", "@khanacademy/wonder-blocks-icon": "4.1.0", + "@khanacademy/wonder-blocks-icon-button": "5.2.1", "@khanacademy/wonder-blocks-layout": "2.0.32", "@khanacademy/wonder-blocks-link": "6.1.1", "@khanacademy/wonder-blocks-pill": "2.2.1", diff --git a/packages/perseus/src/extra-widgets.ts b/packages/perseus/src/extra-widgets.ts index bb48926e63..3d848f6b8a 100644 --- a/packages/perseus/src/extra-widgets.ts +++ b/packages/perseus/src/extra-widgets.ts @@ -26,7 +26,7 @@ import Orderer from "./widgets/orderer"; import Passage from "./widgets/passage"; import PassageRef from "./widgets/passage-ref"; import PassageRefTarget from "./widgets/passage-ref-target"; -import PhetSim from "./widgets/phet-sim"; +import PhetSimulation from "./widgets/phet-simulation"; import Plotter from "./widgets/plotter"; import PythonProgram from "./widgets/python-program"; import Sorter from "./widgets/sorter"; @@ -59,7 +59,7 @@ export default [ Passage, PassageRef, PassageRefTarget, - PhetSim, + PhetSimulation, Plotter, PythonProgram, Sorter, diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts index c0003283db..436a78ee77 100644 --- a/packages/perseus/src/index.ts +++ b/packages/perseus/src/index.ts @@ -195,7 +195,7 @@ export type { PerseusInputNumberWidgetOptions, PerseusInteractiveGraphWidgetOptions, PerseusItem, - PerseusPhetSimWidgetOptions, + PerseusPhetSimulationWidgetOptions, PerseusPlotterWidgetOptions, PerseusPythonProgramWidgetOptions, PerseusRadioWidgetOptions, diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts index b57c8ce773..b1588041bd 100644 --- a/packages/perseus/src/perseus-types.ts +++ b/packages/perseus/src/perseus-types.ts @@ -68,7 +68,7 @@ export type PerseusWidgetsMap = { } & { [key in `passage-ref-target ${number}`]: PassageRefWidget; } & { - [key in `phet-sim ${number}`]: PhetSimWidget; + [key in `phet-simulation ${number}`]: PhetSimulationWidget; } & { [key in `plotter ${number}`]: PlotterWidget; } & { @@ -249,7 +249,7 @@ export type PassageRefWidget = Widget<'passage-ref', PerseusPassageRefWidgetOpti // prettier-ignore export type PassageWidget = Widget<'passage', PerseusPassageWidgetOptions>; // prettier-ignore -export type PhetSimWidget = Widget<'phet-sim', PerseusPhetSimWidgetOptions>; +export type PhetSimulationWidget = Widget<'phet-simulation', PerseusPhetSimulationWidgetOptions>; // prettier-ignore export type PlotterWidget = Widget<'plotter', PerseusPlotterWidgetOptions>; // prettier-ignore @@ -305,7 +305,7 @@ export type PerseusWidget = | OrdererWidget | PassageRefWidget | PassageWidget - | PhetSimWidget + | PhetSimulationWidget | PlotterWidget | PythonProgramWidget | RadioWidget @@ -1567,7 +1567,7 @@ export type PerseusIFrameWidgetOptions = { static: boolean; }; -export type PerseusPhetSimWidgetOptions = { +export type PerseusPhetSimulationWidgetOptions = { // A URL to display, must start with https://phet.colorado.edu/ url: string; // Translatable Text; Description of the sim for Khanmigo and alt text @@ -1642,7 +1642,7 @@ export type PerseusWidgetOptions = | PerseusPassageRefTargetWidgetOptions | PerseusPassageRefWidgetOptions | PerseusPassageWidgetOptions - | PerseusPhetSimWidgetOptions + | PerseusPhetSimulationWidgetOptions | PerseusPlotterWidgetOptions | PerseusRadioWidgetOptions | PerseusSimpleMarkdownTesterWidgetOptions diff --git a/packages/perseus/src/util/widget-enum-utils.ts b/packages/perseus/src/util/widget-enum-utils.ts index 9db395676d..4bd8c671d1 100644 --- a/packages/perseus/src/util/widget-enum-utils.ts +++ b/packages/perseus/src/util/widget-enum-utils.ts @@ -34,7 +34,7 @@ type WidgetName = | "passage" | "passage-ref" | "passage-ref-target" - | "phet-sim" + | "phet-simulation" | "plotter" | "python-program" | "reaction-diagram" @@ -74,7 +74,7 @@ type WidgetEnum = | "PASSAGE" | "PASSAGE_REF" | "PASSAGE_REF_TARGET" - | "PHET_SIM" + | "PHET_SIMULATION" | "PLOTTER" | "PYTHON_PROGRAM" | "REACTION_DIAGRAM" @@ -115,7 +115,7 @@ const widgetNameToEnum: Record = { passage: "PASSAGE", "passage-ref": "PASSAGE_REF", "passage-ref-target": "PASSAGE_REF_TARGET", - "phet-sim": "PHET_SIM", + "phet-simulation": "PHET_SIMULATION", plotter: "PLOTTER", "python-program": "PYTHON_PROGRAM", "reaction-diagram": "REACTION_DIAGRAM", diff --git a/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx b/packages/perseus/src/widgets/__stories__/phet-simulation.stories.tsx similarity index 66% rename from packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx rename to packages/perseus/src/widgets/__stories__/phet-simulation.stories.tsx index 7c4710cb8c..545b825f98 100644 --- a/packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx +++ b/packages/perseus/src/widgets/__stories__/phet-simulation.stories.tsx @@ -1,14 +1,14 @@ -import {PhetSim} from "../phet-sim"; +import {PhetSimulation} from "../phet-simulation"; import type {Meta, StoryObj} from "@storybook/react"; -const meta: Meta = { - component: PhetSim, +const meta: Meta = { + component: PhetSimulation, title: "Perseus/Widgets/PhET Simulation", }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Primary: Story = { args: { diff --git a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts b/packages/perseus/src/widgets/__testdata__/phet-simulation.testdata.ts similarity index 78% rename from packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts rename to packages/perseus/src/widgets/__testdata__/phet-simulation.testdata.ts index 073a5d7681..64a6e216ad 100644 --- a/packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts +++ b/packages/perseus/src/widgets/__testdata__/phet-simulation.testdata.ts @@ -2,14 +2,14 @@ import type {PerseusRenderer} from "../../perseus-types"; export const question1: PerseusRenderer = { content: - "Do this fun PhET simulation! A projectile data lab!\n[[\u2603 phet-sim 1]]\n", + "Do this fun PhET simulation! A projectile data lab!\n[[\u2603 phet-simulation 1]]\n", images: {}, widgets: { - "phet-sim 1": { + "phet-simulation 1": { graded: false, version: {major: 0, minor: 0}, static: false, - type: "phet-sim", + type: "phet-simulation", options: { url: "https://phet.colorado.edu/sims/html/projectile-data-lab/latest/projectile-data-lab_all.html", description: "Projectile Data Lab", @@ -20,14 +20,14 @@ export const question1: PerseusRenderer = { }; export const nonPhetUrl: PerseusRenderer = { - content: "This should display an error!\n[[\u2603 phet-sim 2]]\n", + content: "This should display an error!\n[[\u2603 phet-simulation 2]]\n", images: {}, widgets: { - "phet-sim 2": { + "phet-simulation 2": { graded: false, version: {major: 0, minor: 0}, static: false, - type: "phet-sim", + type: "phet-simulation", options: { url: "https://google.com/", description: "Google", diff --git a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts b/packages/perseus/src/widgets/__tests__/phet-simulation.test.ts similarity index 93% rename from packages/perseus/src/widgets/__tests__/phet-sim.test.ts rename to packages/perseus/src/widgets/__tests__/phet-simulation.test.ts index 3e0b777e92..ec2560d775 100644 --- a/packages/perseus/src/widgets/__tests__/phet-sim.test.ts +++ b/packages/perseus/src/widgets/__tests__/phet-simulation.test.ts @@ -2,14 +2,14 @@ import {screen, waitFor} from "@testing-library/react"; import {testDependencies} from "../../../../../testing/test-dependencies"; import * as Dependencies from "../../dependencies"; -import {nonPhetUrl, question1} from "../__testdata__/phet-sim.testdata"; -import {makeSafeUrl} from "../phet-sim"; +import {nonPhetUrl, question1} from "../__testdata__/phet-simulation.testdata"; +import {makeSafeUrl} from "../phet-simulation"; import {renderQuestion} from "./renderQuestion"; import type {APIOptions} from "../../types"; -describe("phet-sim widget", () => { +describe("phet-simulation widget", () => { beforeEach(() => { jest.spyOn(Dependencies, "getDependencies").mockReturnValue( testDependencies, diff --git a/packages/perseus/src/widgets/phet-sim.tsx b/packages/perseus/src/widgets/phet-simulation.tsx similarity index 94% rename from packages/perseus/src/widgets/phet-sim.tsx rename to packages/perseus/src/widgets/phet-simulation.tsx index 82398a4b4a..5eaf899cfa 100644 --- a/packages/perseus/src/widgets/phet-sim.tsx +++ b/packages/perseus/src/widgets/phet-simulation.tsx @@ -17,11 +17,11 @@ import * as Changeable from "../mixins/changeable"; import {phoneMargin} from "../styles/constants"; import {basicBorderColor, borderRadiusLarge} from "../styles/global-constants"; -import type {PerseusPhetSimWidgetOptions} from "../perseus-types"; +import type {PerseusPhetSimulationWidgetOptions} from "../perseus-types"; import type {WidgetExports, WidgetProps} from "../types"; -type RenderProps = PerseusPhetSimWidgetOptions; -type Props = WidgetProps; +type RenderProps = PerseusPhetSimulationWidgetOptions; +type Props = WidgetProps; // For returning user input, but currently the PhET widget // does not support accessing user input @@ -36,7 +36,7 @@ type State = { }; // This renders the PhET sim -export class PhetSim extends React.Component { +export class PhetSimulation extends React.Component { static contextType = PerseusI18nContext; declare context: React.ContextType; private readonly iframeRef: React.RefObject = @@ -127,8 +127,8 @@ export class PhetSim extends React.Component { }; simpleValidate: (arg1: any) => any = (rubric) => { - // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSim'. - return PhetSim.validate(this.getUserInput(), rubric); + // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSimulation'. + return PhetSimulation.validate(this.getUserInput(), rubric); }; // kaLocales and PhET locales use different formats and abbreviations. @@ -239,13 +239,13 @@ export const makeSafeUrl = (urlString: string, locale: string): URL | null => { }; export default { - name: "phet-sim", + name: "phet-simulation", displayName: "PhET Simulation", - widget: PhetSim, + widget: PhetSimulation, // Hides widget from content creators until full release hidden: true, isLintable: true, -} as WidgetExports; +} as WidgetExports; const styles = StyleSheet.create({ container: {