[DRAFT] New Perseus Preview component

.changeset/hungry-seals-refuse.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/perseus-dev-ui": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Migrate Perseus preview to use non-iframe approach

.storybook/preview-head.html

@@ -1,7 +1,7 @@
 <!-- Preload WB fonts to prevent layout shifting due to font rendering -->
 <link
     rel="preload"
-    href="fonts/pre/Lato-Regular.woff2"
+    href="fonts/lato/Lato-Regular.woff2"
     as="font"
     type="font/woff2"
     crossorigin

dev/vite.config.ts

@@ -10,7 +10,41 @@ const packageAliases = {};
 glob.sync(resolve(__dirname, "../packages/*/package.json")).forEach(
     (packageJsonPath) => {
         const pkg = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
-        packageAliases[pkg.name] = join(dirname(packageJsonPath), pkg.source);
+
+        // "exports" is the more modern way to declare package exports. Some,
+        // but not all, Perseus packages delcare "exports".
+        if ("exports" in pkg) {
+            // Not all packages export strings, but for those that do we need
+            // to set up an alias so Vite properly resolves them.
+            // Eg `import {strings, mockStrings} from "@khanacademy/perseus/strings";`
+            // And MOST IMPORTANTLY, this alias _must_ precede the main
+            // import, otherwise Vite will just use the main export and tack
+            // `/strings` onto the end, resulting in a path like this:
+            // `packages/perseus/src/index.ts/strings`
+            const stringsSource = pkg.exports["./strings"]?.source;
+            if (stringsSource != null) {
+                packageAliases[`${pkg.name}/strings`] = join(
+                    dirname(packageJsonPath),
+                    stringsSource,
+                );
+            }
+
+            const mainSource = pkg.exports["."]?.source;
+            if (mainSource == null) {
+                throw new Error(
+                    `Package declares 'exports', but not provide a main export (exports["."])`,
+                );
+            }
+            packageAliases[pkg.name] = join(
+                dirname(packageJsonPath),
+                mainSource,
+            );
+        } else {
+            packageAliases[pkg.name] = join(
+                dirname(packageJsonPath),
+                pkg.source,
+            );
+        }
     },
 );
 

packages/perseus-editor/src/__stories__/editor-page-with-storybook-preview.tsx

@@ -1,24 +1,15 @@
 import {
-    Renderer,
     type APIOptions,
     type DeviceType,
     type Hint,
     type PerseusAnswerArea,
     type PerseusRenderer,
 } from "@khanacademy/perseus";
-import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
-import xIcon from "@phosphor-icons/core/regular/x.svg";
 import {action} from "@storybook/addon-actions";
-import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 // eslint-disable-next-line import/no-relative-packages
-import {mockStrings} from "../../../perseus/src/strings";
 import EditorPage from "../editor-page";
 
 import {flags} from "./flags-for-api-options";
@@ -27,13 +18,14 @@ type Props = {
     apiOptions?: APIOptions;
     question?: PerseusRenderer;
     hints?: ReadonlyArray<Hint>;
+    developerMode?: boolean;
 };
 
 const onChangeAction = action("onChange");
 
 function EditorPageWithStorybookPreview(props: Props) {
     const [previewDevice, setPreviewDevice] =
-        React.useState<DeviceType>("phone");
+        React.useState<DeviceType>("desktop");
     const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
     const [answerArea, setAnswerArea] = React.useState<
         PerseusAnswerArea | undefined | null
@@ -45,8 +37,6 @@ function EditorPageWithStorybookPreview(props: Props) {
         props.hints,
     );
 
-    const [panelOpen, setPanelOpen] = React.useState<boolean>(true);
-
     const apiOptions = props.apiOptions ?? {
         isMobile: false,
         flags,
@@ -60,7 +50,7 @@ function EditorPageWithStorybookPreview(props: Props) {
                 onPreviewDeviceChange={(newDevice) =>
                     setPreviewDevice(newDevice)
                 }
-                developerMode={true}
+                developerMode={props.developerMode}
                 jsonMode={jsonMode}
                 answerArea={answerArea}
                 question={question}
@@ -85,85 +75,8 @@ function EditorPageWithStorybookPreview(props: Props) {
                     }
                 }}
             />
-
-            {/* Button to open panel */}
-            {!panelOpen && (
-                <Button
-                    onClick={() => setPanelOpen(!panelOpen)}
-                    style={styles.openPanelButton}
-                >
-                    Open preview (storybook only)
-                </Button>
-            )}
-
-            {/* Panel to show the question/hint previews */}
-            {panelOpen && (
-                <View style={styles.panel}>
-                    {/* Close button */}
-                    <IconButton
-                        icon={xIcon}
-                        onClick={() => setPanelOpen(!panelOpen)}
-                        style={styles.closeButton}
-                    />
-
-                    <View style={styles.panelInner}>
-                        {/* Question preview */}
-                        <Renderer
-                            strings={mockStrings}
-                            apiOptions={apiOptions}
-                            {...question}
-                        />
-                    </View>
-
-                    {/* Hints preview */}
-                    {hints?.map((hint, index) => (
-                        <View key={index} style={styles.panelInner}>
-                            <Strut size={spacing.medium_16} />
-                            <LabelLarge>{`Hint ${index + 1}`}</LabelLarge>
-                            <Renderer
-                                strings={mockStrings}
-                                apiOptions={apiOptions}
-                                hintMode={true}
-                                {...hint}
-                            />
-                        </View>
-                    ))}
-                </View>
-            )}
         </View>
     );
 }
 
-const styles = StyleSheet.create({
-    panel: {
-        position: "fixed",
-        right: 0,
-        height: "90vh",
-        overflow: "auto",
-        flex: "none",
-        backgroundColor: color.fadedBlue16,
-        padding: spacing.medium_16,
-        borderRadius: spacing.small_12,
-        alignItems: "end",
-    },
-    panelInner: {
-        flex: "none",
-        backgroundColor: color.white,
-        borderRadius: spacing.xSmall_8,
-        marginTop: spacing.medium_16,
-        width: "100%",
-        padding: spacing.xSmall_8,
-    },
-    closeButton: {
-        margin: 0,
-    },
-    openPanelButton: {
-        position: "fixed",
-        right: spacing.medium_16,
-        // Extra space so it doesn't get covered up by storybook's
-        // "Style warnings" button.
-        bottom: spacing.xxxLarge_64,
-    },
-});
-
 export default EditorPageWithStorybookPreview;

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

@@ -1,15 +1,20 @@
 import * as React from "react";
 
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
 import EditorPageWithStorybookPreview from "./editor-page-with-storybook-preview";
 
+import type {Meta, StoryObj} from "@storybook/react";
+
 registerAllWidgetsAndEditorsForTesting(); // SIDE_EFFECTY!!!! :cry:
 
-export default {
+const meta: Meta = {
     title: "PerseusEditor/EditorPage",
+    component: EditorPageWithStorybookPreview,
+    args: {developerMode: false},
 };
+export default meta;
 
-export const Demo = (): React.ReactElement => {
-    return <EditorPageWithStorybookPreview />;
-};
+type Story = StoryObj<typeof EditorPageWithStorybookPreview>;
+
+export const Demo: Story = {};

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

@@ -0,0 +1,77 @@
+import {Renderer} from "@khanacademy/perseus";
+// eslint-disable-next-line monorepo/no-internal-import
+import {mockStrings} from "@khanacademy/perseus/strings";
+
+import IFrameRenderer from "../iframe-renderer";
+
+import type {PerseusRenderer} from "@khanacademy/perseus";
+import type {Meta, StoryObj} from "@storybook/react";
+
+const meta: Meta<typeof IFrameRenderer> = {
+    title: "PerseusEditor/IFrameRenderer",
+    component: IFrameRenderer,
+};
+
+export default meta;
+type Story = StoryObj<typeof IFrameRenderer>;
+
+const question: PerseusRenderer = {
+    content:
+        "Which of the following values of $x$ satisfies the equation $\\sqrt{64}=x$ ?\n\n[[\u2603 radio 1]]\n\n",
+    images: {},
+    widgets: {
+        "radio 1": {
+            graded: true,
+            version: {
+                major: 1,
+                minor: 0,
+            },
+            static: false,
+            type: "radio",
+            options: {
+                displayCount: null,
+                onePerLine: false,
+                choices: [
+                    {
+                        content: "$-8$ and $8$",
+                        correct: false,
+                        clue: "The square root operation ($\\sqrt{\\phantom{x}}$) calculates *only* the positive square root when performed on a number, so $x$ is equal to *only* $8$.",
+                    },
+                    {
+                        content: "$-8$",
+                        correct: false,
+                        clue: "While $(-8)^2=64$, the square root operation ($\\sqrt{\\phantom{x}}$) calculates *only* the positive square root when performed on a number.",
+                    },
+                    {
+                        content: "$8$",
+                        correct: true,
+                        isNoneOfTheAbove: false,
+                        clue: "$8$ is the positive square root of $64$.",
+                    },
+                    {
+                        content: "No value of $x$ satisfies the equation.",
+                        correct: false,
+                        isNoneOfTheAbove: false,
+                        clue: "$8$ satisfies the equation.",
+                    },
+                ],
+                countChoices: false,
+                hasNoneOfTheAbove: false,
+                multipleSelect: false,
+                randomize: false,
+                deselectEnabled: false,
+            },
+            alignment: "default",
+        },
+    },
+};
+
+export const Primary: Story = {
+    args: {
+        style: {width: "100%", height: "500px"},
+        styleSelector: 'link, style[type="text/css"]',
+        children: (
+            <Renderer strings={mockStrings} apiOptions={{}} {...question} />
+        ),
+    },
+};

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

@@ -177,7 +177,9 @@ export const WithSaveWarnings = (): React.ReactElement => {
         segmentWithLockedFigures,
     );
     const [hints, setHints] = React.useState<ReadonlyArray<Hint> | undefined>();
-    const [saveWarnings, setSaveWarnings] = React.useState<string[]>([]);
+    const [saveWarnings, setSaveWarnings] = React.useState<readonly string[]>(
+        [],
+    );
 
     const editorPageRef = React.useRef<EditorPage>(null);