Editor-Page storybook story (#887)

## Summary:

Adds a simple Story for the `EditorPage` component. This is basically the top-level Exercise Editor.

<img width="800" alt="image" src="https://github.com/Khan/perseus/assets/77138/7699c14e-25f5-4d68-9395-d487e5ebda1f">

Issue: "none"

## Test plan:

Author: jeremywiebe

Reviewers: nedredmond, handeyeco

Required Reviewers:

Approved By: nedredmond

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

Pull Request URL: #887

.changeset/chilled-news-explode.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Add Storybook story for EditorPage component

.changeset/modern-windows-swim.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Export `PerseusItem` type which represents an exercise question

packages/perseus-editor/src/__stories__/editor-page.stories.tsx

@@ -0,0 +1,65 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import {EditorPage} from "..";
+import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
+
+import type {
+    DeviceType,
+    Hint,
+    PerseusAnswerArea,
+    PerseusRenderer,
+} from "@khanacademy/perseus";
+
+registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
+
+export default {
+    title: "Perseus/Editor/EditorPage",
+};
+
+const onChangeAction = action("onChange");
+
+export const Demo = (): React.ReactElement => {
+    const [previewDevice, setPreviewDevice] =
+        React.useState<DeviceType>("phone");
+    const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
+    const [answerArea, setAnswerArea] = React.useState<
+        PerseusAnswerArea | undefined | null
+    >();
+    const [question, setQuestion] = React.useState<
+        PerseusRenderer | undefined
+    >();
+    const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();
+
+    return (
+        <EditorPage
+            apiOptions={{isMobile: false}}
+            previewDevice={previewDevice}
+            onPreviewDeviceChange={(newDevice) => setPreviewDevice(newDevice)}
+            developerMode={true}
+            jsonMode={jsonMode}
+            answerArea={answerArea}
+            question={question}
+            hints={hints}
+            frameSource="about:blank"
+            previewURL="about:blank"
+            itemId="1"
+            onChange={(props) => {
+                onChangeAction(props);
+
+                if ("jsonMode" in props) {
+                    setJsonMode(props.jsonMode);
+                }
+                if ("answerArea" in props) {
+                    setAnswerArea(props.answerArea);
+                }
+                if ("question" in props) {
+                    setQuestion(props.question);
+                }
+                if ("hints" in props) {
+                    setHints(props.hints);
+                }
+            }}
+        />
+    );
+};

packages/perseus-editor/src/__stories__/editor.stories.tsx

@@ -4,15 +4,13 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
+import {Editor} from "..";
 import SideBySide from "../../../../testing/side-by-side";
 import {question1} from "../__testdata__/input-number.testdata";
-import Editor from "../editor";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
 import type {PerseusRenderer} from "@khanacademy/perseus";
 
-import "../styles/perseus-editor.less";
-
 registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
 
 export default {

packages/perseus-editor/src/editor-page.tsx

@@ -15,6 +15,7 @@ import type {
     Hint,
     ImageUploader,
     Version,
+    PerseusItem,
 } from "@khanacademy/perseus";
 import type {KEScore} from "@khanacademy/perseus-core";
 
@@ -25,7 +26,7 @@ type Props = {
     answerArea?: any; // related to the question,
     // TODO(CP-4838): Should this be a required prop?
     contentPaths?: ReadonlyArray<string>;
-    // Only used in the perseus demos. Consider removing.
+    // "Power user" mode. Shows the raw JSON of the question.
     developerMode: boolean;
     // Source HTML for the iframe to render
     frameSource: string;
@@ -53,15 +54,8 @@ type Props = {
     previewURL: string;
 };
 
-type PerseusJson = {
-    question: any;
-    answerArea: any;
-    hints: ReadonlyArray<Hint>;
-    itemDataVersion?: Version;
-};
-
 type State = {
-    json: PerseusJson;
+    json: PerseusItem;
     gradeMessage: string;
     wasAnswered: boolean;
     highlightLint: boolean;
@@ -207,7 +201,7 @@ class EditorPage extends React.Component<Props, State> {
         return issues1.concat(issues2);
     }
 
-    serialize(options?: {keepDeletedWidgets?: boolean}): any | PerseusJson {
+    serialize(options?: {keepDeletedWidgets?: boolean}): any | PerseusItem {
         if (this.props.jsonMode) {
             return this.state.json;
         }
@@ -226,7 +220,7 @@ class EditorPage extends React.Component<Props, State> {
         this.props.onChange(newProps, cb, silent);
     };
 
-    changeJSON: (newJson: PerseusJson) => void = (newJson: PerseusJson) => {
+    changeJSON: (newJson: PerseusItem) => void = (newJson: PerseusItem) => {
         this.setState({
             json: newJson,
         });

packages/perseus/src/index.ts

@@ -120,15 +120,16 @@ export type {
 } from "./types";
 export type {ParsedValue} from "./util";
 export type {
-    MathFormat,
     InputNumberWidget,
+    MathFormat,
+    PerseusAnswerArea,
+    PerseusExpressionWidgetOptions,
     PerseusImageBackground,
     PerseusInteractiveGraphWidgetOptions,
-    PerseusRadioWidgetOptions,
-    PerseusExpressionWidgetOptions,
+    PerseusItem,
     PerseusPlotterWidgetOptions,
+    PerseusRadioWidgetOptions,
     PerseusRenderer,
-    PerseusAnswerArea,
 } from "./perseus-types";
 export type {Coord} from "./interactive2/types";
 export type {MarkerType} from "./widgets/label-image/types";

packages/perseus/src/types.ts

@@ -1,7 +1,11 @@
 import type {SerializedHighlightSet} from "./components/highlighting/types";
 import type {ILogger} from "./logging/log";
 import type {Item} from "./multi-items/item-types";
-import type {PerseusWidget} from "./perseus-types";
+import type {
+    PerseusAnswerArea,
+    PerseusRenderer,
+    PerseusWidget,
+} from "./perseus-types";
 import type {SizeClass} from "./util/sizing-utils";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {AnalyticsEventHandlerFn} from "@khanacademy/perseus-core";
@@ -45,10 +49,7 @@ export type PerseusScore =
           message?: string | null | undefined;
       };
 
-export type Hint = {
-    widgets: WidgetDict;
-    content: string; // JSON string,
-    images: ImageDict;
+export type Hint = PerseusRenderer & {
     replace?: boolean;
 };
 
@@ -78,7 +79,7 @@ export type ChangeHandler = (
         images?: ImageDict;
         // used only in EditorPage
         question?: any;
-        answerArea?: any;
+        answerArea?: PerseusAnswerArea | null;
         itemDataVersion?: Version;
         // used in MutirenderEditor
         item?: Item;