[Interactive Graph Editor] Moving around/renaming components (#1379)

## Summary: When working on the "Start coordinates" UI (requirement for Hint Mode), I will need to use the `LockedFiguresSettingsAccordion` and `CoordinatePairInput`. To make these more intuitive to use, I renamed `LockedFiguresSettingsAccordion` to `PerseusEditorAccordion` (since it's not only used for locked figures anymore), and I also moved `CoordinatePairInput` out of the `locked-figures` directory. I also moved `Heading` into its own component, since I'd like to reuse it outside the `interactive-graph-settings.tsx` file. Issue: https://khanacademy.atlassian.net/browse/LEMS-2052 ## Test plan: `yarn jest` `yarn typecheck` Author: nishasy Reviewers: mark-fitzgerald Required Reviewers: Approved By: mark-fitzgerald Checks: ✅ gerald, ✅ Upload Coverage (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), 🚫 Upload Coverage, ✅ gerald, ⏭️ Publish npm snapshot, 🚫 Check builds for changes in size (ubuntu-latest, 20.x), 🚫 Cypress (ubuntu-latest, 20.x), 🚫 Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), 🚫 Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), 🚫 Jest Coverage (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1379
Khan · Jun 26, 2024 · 685fa90 · 685fa90
1 parent 48e879a
commit 685fa90
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 67 deletions.
diff --git a/.changeset/mean-needles-float.md b/.changeset/mean-needles-float.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+[Interactive Graph Editor] Moving around/renaming components so they make more sense for the upcoming hint mode work
diff --git a/...-locked-figures/coordinate-pair-input.tsx → .../src/components/coordinate-pair-input.tsx b/...-locked-figures/coordinate-pair-input.tsx → .../src/components/coordinate-pair-input.tsx
diff --git a/packages/perseus-editor/src/components/graph-locked-figures/defining-point-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/defining-point-settings.tsx
@@ -11,11 +11,12 @@ import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
 import ColorSwatch from "./color-swatch";
-import CoordinatePairInput from "./coordinate-pair-input";
 import LabeledSwitch from "./labeled-switch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 
 import type {LockedPointType} from "@khanacademy/perseus";
 
@@ -72,7 +73,7 @@ const DefiningPointSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={expanded}
             onToggle={onToggle}
             containerStyle={styles.container}
@@ -125,7 +126,7 @@ const DefiningPointSettings = (props: Props) => {
                     />
                 </>
             )}
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx
@@ -8,11 +8,11 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import AngleInput from "../angle-input";
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
 
 import ColorSelect from "./color-select";
-import CoordinatePairInput from "./coordinate-pair-input";
 import EllipseSwatch from "./ellipse-swatch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
@@ -53,7 +53,7 @@ const LockedEllipseSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={expanded}
             onToggle={onToggle}
             header={
@@ -165,7 +165,7 @@ const LockedEllipseSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-line-settings.tsx
@@ -13,10 +13,11 @@ import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
 import DefiningPointSettings from "./defining-point-settings";
 import LineSwatch from "./line-swatch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
@@ -90,7 +91,7 @@ const LockedLineSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={props.expanded}
             onToggle={props.onToggle}
             header={
@@ -182,7 +183,7 @@ const LockedLineSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-point-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-point-settings.tsx
@@ -11,11 +11,12 @@ import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
 import ColorSwatch from "./color-swatch";
-import CoordinatePairInput from "./coordinate-pair-input";
 import LabeledSwitch from "./labeled-switch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
@@ -44,7 +45,7 @@ const LockedPointSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={props.expanded}
             onToggle={props.onToggle}
             header={
@@ -84,7 +85,7 @@ const LockedPointSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-polygon-settings.tsx
@@ -17,10 +17,11 @@ import plusCircle from "@phosphor-icons/core/regular/plus-circle.svg";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
-import CoordinatePairInput from "./coordinate-pair-input";
 import LabeledSwitch from "./labeled-switch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import PolygonSwatch from "./polygon-swatch";
 
@@ -53,7 +54,7 @@ const LockedPolygonSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={expanded}
             onToggle={onToggle}
             header={
@@ -133,7 +134,7 @@ const LockedPolygonSettings = (props: Props) => {
                 style={styles.spaceUnder}
             />
 
-            <LockedFigureSettingsAccordion
+            <PerseusEditorAccordion
                 header={<LabelLarge>Points</LabelLarge>}
                 expanded={true}
                 containerStyle={styles.pointAccordionContainer}
@@ -193,7 +194,7 @@ const LockedPolygonSettings = (props: Props) => {
                 >
                     Add point
                 </Button>
-            </LockedFigureSettingsAccordion>
+            </PerseusEditorAccordion>
 
             {/* Actions */}
             <LockedFigureSettingsActions
@@ -202,7 +203,7 @@ const LockedPolygonSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 

diff --git a/packages/perseus-editor/src/components/graph-locked-figures/locked-vector-settings.tsx b/packages/perseus-editor/src/components/graph-locked-figures/locked-vector-settings.tsx
@@ -12,10 +12,11 @@ import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import CoordinatePairInput from "../coordinate-pair-input";
+import PerseusEditorAccordion from "../perseus-editor-accordion";
+
 import ColorSelect from "./color-select";
-import CoordinatePairInput from "./coordinate-pair-input";
 import LineSwatch from "./line-swatch";
-import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 
 import type {LockedFigureSettingsCommonProps} from "./locked-figure-settings";
@@ -61,7 +62,7 @@ const LockedVectorSettings = (props: Props) => {
     }
 
     return (
-        <LockedFigureSettingsAccordion
+        <PerseusEditorAccordion
             expanded={props.expanded}
             onToggle={props.onToggle}
             header={
@@ -88,7 +89,7 @@ const LockedVectorSettings = (props: Props) => {
             )}
 
             {/* Coordinates */}
-            <LockedFigureSettingsAccordion
+            <PerseusEditorAccordion
                 expanded={true} // Initial state is expanded
                 containerStyle={styles.container}
                 panelStyle={styles.accordionPanel}
@@ -105,9 +106,9 @@ const LockedVectorSettings = (props: Props) => {
                         handleChangePoint(newProps, 0);
                     }}
                 />
-            </LockedFigureSettingsAccordion>
+            </PerseusEditorAccordion>
 
-            <LockedFigureSettingsAccordion
+            <PerseusEditorAccordion
                 expanded={true} // Initial state is expanded
                 containerStyle={styles.container}
                 panelStyle={styles.accordionPanel}
@@ -124,7 +125,7 @@ const LockedVectorSettings = (props: Props) => {
                         handleChangePoint(newProps, 1);
                     }}
                 />
-            </LockedFigureSettingsAccordion>
+            </PerseusEditorAccordion>
 
             {/* Actions */}
             <LockedFigureSettingsActions
@@ -133,7 +134,7 @@ const LockedVectorSettings = (props: Props) => {
                 onMove={onMove}
                 onRemove={onRemove}
             />
-        </LockedFigureSettingsAccordion>
+        </PerseusEditorAccordion>
     );
 };
 

diff --git a/packages/perseus-editor/src/components/heading.tsx b/packages/perseus-editor/src/components/heading.tsx
@@ -0,0 +1,40 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import * as React from "react";
+
+import ToggleableCaret from "./toggleable-caret";
+
+function Heading({
+    title,
+    isOpen,
+    onToggle,
+}: {
+    title: string;
+    isOpen: boolean;
+    onToggle?: (isOpen: boolean) => void;
+}) {
+    return (
+        <View
+            style={{
+                flexDirection: "row",
+                justifyContent: "space-between",
+                backgroundColor: color.offBlack8,
+                padding: spacing.xSmall_8,
+                marginTop: spacing.small_12,
+                // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+                // variable found in perseus-editor.less. For now, it must
+                // match otherwise there's a gap from this header to the edge
+                // of the editor borders.
+                marginInline: -10,
+                cursor: "pointer",
+            }}
+            onClick={() => onToggle?.(!isOpen)}
+        >
+            <LabelSmall>{title}</LabelSmall>
+            <ToggleableCaret isExpanded={isOpen} />
+        </View>
+    );
+}
+
+export default Heading;
diff --git a/packages/perseus-editor/src/components/interactive-graph-settings.tsx b/packages/perseus-editor/src/components/interactive-graph-settings.tsx
@@ -12,13 +12,12 @@ import Banner from "@khanacademy/wonder-blocks-banner";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
 import LabeledRow from "./graph-locked-figures/labeled-row";
-import ToggleableCaret from "./toggleable-caret";
+import Heading from "./heading";
 
 import type {PerseusImageBackground} from "@khanacademy/perseus";
 
@@ -34,38 +33,6 @@ function numSteps(range: any, step: any) {
     return Math.floor((range[1] - range[0]) / step);
 }
 
-function Heading({
-    title,
-    isOpen,
-    onToggle,
-}: {
-    title: string;
-    isOpen: boolean;
-    onToggle?: (isOpen: boolean) => void;
-}) {
-    return (
-        <View
-            style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                backgroundColor: color.offBlack8,
-                padding: spacing.xSmall_8,
-                marginTop: spacing.small_12,
-                // NOTE(jeremy): This is the inverse of the @editorPadding CSS
-                // variable found in perseus-editor.less. For now, it must
-                // match otherwise there's a gap from this header to the edge
-                // of the editor borders.
-                marginInline: -10,
-                cursor: "pointer",
-            }}
-            onClick={() => onToggle?.(!isOpen)}
-        >
-            <LabelSmall>{title}</LabelSmall>
-            <ToggleableCaret isExpanded={isOpen} />
-        </View>
-    );
-}
-
 type Range = [min: number, max: number];
 
 type Props = {

diff --git a/...ures/locked-figure-settings-accordion.tsx → ...c/components/perseus-editor-accordion.tsx b/...ures/locked-figure-settings-accordion.tsx → ...c/components/perseus-editor-accordion.tsx
@@ -15,7 +15,7 @@ type Props = {
     onToggle?: (expanded: boolean) => void;
 };
 
-const LockedFigureSettingsAccordion = (props: Props) => {
+const PerseusEditorAccordion = (props: Props) => {
     const {children, header, expanded, containerStyle, panelStyle, onToggle} =
         props;
 
@@ -24,7 +24,7 @@ const LockedFigureSettingsAccordion = (props: Props) => {
             // More specificity so that we can override the default
             // .heading > h2 > .header styles from the articles.less
             // file (which is imported in perseus-renderer.less).
-            className="locked-figure-accordion"
+            className="perseus-editor-accordion"
         >
             <AccordionSection
                 expanded={expanded}
@@ -62,4 +62,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default LockedFigureSettingsAccordion;
+export default PerseusEditorAccordion;
diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts
@@ -173,6 +173,7 @@ export type {
     // Utility types
     Range,
     Size,
+    CollinearTuple,
     MathFormat,
     InputNumberWidget, // TODO(jeremy): remove?
     // Widget configuration types

diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less
@@ -718,7 +718,7 @@
     }
 }
 
-.perseus-widget-editor-content .locked-figure-accordion h2 {
+.perseus-widget-editor-content .perseus-editor-accordion h2 {
     // Reset the padding that's added to article h2
     // for the accordion h2.
     padding-top: 0;