Create PhET simulation widget

[aemandine]

Summary:

Create a new Perseus widget for PhET simulations with the following features:

• Fullscreen mode
• Only allows URLs from the https://phet.colorado.edu origin
  • If the origin is wrong or the resource is not available, we display an error
• Displays simulation in your locale (forgot to put this in the demo so I'll attach a screenshot)
  • If the simulation is not available in your locale, we display a warning banner and load the simulation in English
• Skeleton widget editor
  • This is just to pass a Jest test that expects every widget will have an editor

I have documented the Perseus widget creation process here.

Issue: LEMS-2167

Test plan:

• Verify that the widget shows up appropriately in Storybook
  • Change this.locale to some nonexistent locale and verify that the warning shows up
  • Change URL to a non-PhET origin and verify that the error shows up
  • Change URL to a non-existent resource from the PhET origin and verify that the error shows up
  • Click the fullscreen button and verify that the iframe goes into fullscreen mode
• Verify screen reader accessibility
  • Make sure the fullscreen button, iframe, and iframe contents are all tab-focusable
  • Make sure the fullscreen button, iframe, and iframe contents all have appropriate aria labels

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/perseus for changes to .changeset/empty-seals-worry.md, packages/perseus/package.json, packages/perseus/src/extra-widgets.ts, packages/perseus/src/perseus-types.ts, packages/perseus/src/strings.ts, packages/perseus-editor/src/all-editors.ts, packages/perseus/src/util/widget-enum-utils.ts, packages/perseus/src/widgets/phet-sim.tsx, packages/perseus-editor/src/widgets/phet-sim-editor.tsx, packages/perseus/src/widgets/__stories__/phet-sim.stories.tsx, packages/perseus/src/widgets/__testdata__/phet-sim.testdata.ts, packages/perseus/src/widgets/__tests__/phet-sim.test.ts, packages/perseus-editor/src/widgets/__stories__/phet-sim-editor.stories.tsx

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

Size Change: +20.9 kB (+2.45%)

Total Size: 877 kB

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	277 kB	+81 B (+0.03%)
packages/perseus/dist/es/index.js	434 kB	+20.8 kB (+5.03%)	🔍
packages/perseus/dist/es/strings.js	3.34 kB	+53 B (+1.61%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	38.3 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	4.27 kB
packages/math-input/dist/es/index.js	77.7 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	1.48 kB
packages/perseus-linter/dist/es/index.js	21.8 kB
packages/pure-markdown/dist/es/index.js	3.67 kB
packages/simple-markdown/dist/es/index.js	12.4 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (fbdc96b) and published it to npm. You
can install it using the tag PR1512.

Example:

yarn add @khanacademy/perseus@PR1512

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR1512

[codecov]

Codecov Report

Attention: Patch coverage is 66.19217% with 95 lines in your changes missing coverage. Please review.

Project coverage is 70.92%. Comparing base (2509713) to head (fbdc96b).
Report is 1 commits behind head on phet-widget.

Files	Patch %	Lines
packages/perseus/src/widgets/phet-sim.tsx	71.36%	63 Missing ⚠️
...ges/perseus-editor/src/widgets/phet-sim-editor.tsx	30.43%	32 Missing ⚠️

Additional details and impacted files

@@               Coverage Diff               @@
##           phet-widget    #1512      +/-   ##
===============================================
+ Coverage        70.14%   70.92%   +0.77%     
===============================================
  Files              516      521       +5     
  Lines           106239   106553     +314     
  Branches          7622    10974    +3352     
===============================================
+ Hits             74526    75577    +1051     
+ Misses           31596    30976     -620     
+ Partials           117        0     -117     

Files	Coverage Δ
packages/perseus-editor/src/all-editors.ts	100.00% <100.00%> (ø)
packages/perseus/src/extra-widgets.ts	100.00% <100.00%> (ø)
packages/perseus/src/strings.ts	99.55% <100.00%> (+<0.01%)	⬆️
packages/perseus/src/util/widget-enum-utils.ts	94.20% <100.00%> (+0.12%)	⬆️
...ges/perseus-editor/src/widgets/phet-sim-editor.tsx	30.43% <30.43%> (ø)
packages/perseus/src/widgets/phet-sim.tsx	71.36% <71.36%> (ø)

... and 129 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2509713...fbdc96b. Read the comment docs.

[jeremywiebe]

Good stuff. I have some suggestions but overall this looks great.

[jeremywiebe]

Unfortunately, we have a mixture of "older style" stories mixed in with a few modern ones. It looks like this story came from one of the older ones.

Could you migrate this to use the format defined here: https://storybook.js.org/docs/get-started/whats-a-story

It will give better typing in these stories especially for the props that the widget supports.

Happy to do a short pairing session to migrate if you like. :)

[aemandine]

Hi Jeremy! Thanks for the note! Should I use the new story style for the PhET sim and the PhET sim editor, or just the PhET sim editor?

[aemandine]

Resolved! I am doing the new story style for both.

[jeremywiebe]

Perfect, that's what I would have suggested! :)

[jeremywiebe]

This is an improvement, but you can get closer (and have better typing)! :)

import type { Meta, StoryObj } from '@storybook/react';
 
import PhetSimEditor from "../phet-sim-editor";
 
const meta: Meta<typeof PhetSimEditor > = {
  component: PhetSimEditor,
};
 
export default meta;
type Story = StoryObj<typeof PhetSimEditor >;
 
export const Default: Story = {
  args: {
    onChange: action("onChange"),
  },
};

This means you don't even need a render function for the story, just the data. :)