Add polygon stories to interactive graph and the editor (#1359)

## Summary:
Adding some more stories for better visibility and more testing opportunities.

Issue: LEMS-1985

Interactive Graph Editor: 
<img height="450px" src=https://github.com/Khan/perseus/assets/60857422/c44a381a-9e0e-4134-b62c-afdc1ec8cca5)>

Interactive Graph:
<img width="300" src=https://github.com/Khan/perseus/assets/60857422/a7395d36-980a-4cc9-82fa-8923b2a0e877>


## Test plan:
- Check out the Polygon with Mafs story in the Interactive graph section (http://localhost:6006/?path=/story/perseus-widgets-interactive-graph--polygon-with-mafs) and confirm it is there and uses Mafs
- Check out the With Mafs Polygon story in the Interactive graph editor section (http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph-editor--with-mafs-polygon) and confirm it is there and uses Mafs

Author: Myranae

Reviewers: nishasy, mark-fitzgerald, benchristel

Required Reviewers:

Approved By: nishasy

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ gerald, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), 🚫 Upload Coverage, ✅ gerald, ⏭️  Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), 🚫 Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #1359

packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx

@@ -91,6 +91,35 @@ export const WithMafs: StoryComponentType = {
     },
 };
 
+/**
+ * Example of what the InteractiveGraphEditor experience is when using
+ * a Mafs-based InteractiveGraph to create Polygons.
+ */
+export const WithMafsPolygon: StoryComponentType = {
+    render: function Render() {
+        const reducer = (state, newState) => {
+            return {
+                ...state,
+                ...newState,
+            };
+        };
+
+        const [state, dispatch] = React.useReducer(reducer, {
+            ...mafsOptions,
+            graph: {type: "polygon"},
+            correct: {
+                type: "polygon",
+                numSides: 4,
+                showAngles: true,
+                showSides: true,
+                snapTo: "angles",
+            },
+        });
+
+        return <InteractiveGraphEditor {...state} onChange={dispatch} />;
+    },
+};
+
 /**
  * This InteractiveGraphEditor has locked points.
  *

packages/perseus/src/widgets/__stories__/interactive-graph.stories.tsx

@@ -32,6 +32,7 @@ const mafsOptions = {
         flags: {
             mafs: {
                 segment: true,
+                polygon: true,
             },
         },
     },
@@ -71,6 +72,10 @@ export const Polygon = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={polygonQuestion} />
 );
 
+export const PolygonWithMafs = (args: StoryArgs): React.ReactElement => (
+    <RendererWithDebugUI {...mafsOptions} question={polygonQuestion} />
+);
+
 export const Ray = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={rayQuestion} />
 );