Organize locked figures into own folder

.changeset/giant-shoes-wait.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Organize locked figures within Interactive Graph into their own folders for better organization

packages/perseus-editor/src/components/__stories__/color-select.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import ColorSelect from "../color-select";
+import ColorSelect from "../graph-locked-figures/color-select";
 import {getDefaultFigureForType} from "../util";
 
 import type {LockedFigureColor} from "@khanacademy/perseus";

packages/perseus-editor/src/components/__stories__/color-swatch.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import ColorSwatch from "../color-swatch";
+import ColorSwatch from "../graph-locked-figures/color-swatch";
 import {getDefaultFigureForType} from "../util";
 
 import type {Meta} from "@storybook/react";

packages/perseus-editor/src/components/__stories__/locked-ellipse-settings.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import LockedEllipseSettings from "../locked-ellipse-settings";
+import LockedEllipseSettings from "../graph-locked-figures/locked-ellipse-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {Meta, StoryObj} from "@storybook/react";

packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx

@@ -3,7 +3,7 @@ import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import LockedFiguresSection from "../locked-figures-section";
+import LockedFiguresSection from "../graph-locked-figures/locked-figures-section";
 import {getDefaultFigureForType} from "../util";
 
 import type {Meta, StoryObj} from "@storybook/react";

packages/perseus-editor/src/components/__stories__/locked-line-settings.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import LockedLineSettings from "../locked-line-settings";
+import LockedLineSettings from "../graph-locked-figures/locked-line-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {Meta, StoryObj} from "@storybook/react";

packages/perseus-editor/src/components/__stories__/locked-point-settings.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import LockedPointSettings from "../locked-point-settings";
+import LockedPointSettings from "../graph-locked-figures/locked-point-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {Meta, StoryObj} from "@storybook/react";

packages/perseus-editor/src/components/__stories__/locked-polygon-settings.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import LockedPolygonSettings from "../locked-polygon-settings";
+import LockedPolygonSettings from "../graph-locked-figures/locked-polygon-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {Meta, StoryObj} from "@storybook/react";

packages/perseus-editor/src/components/__stories__/locked-vector-settings.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import LockedVectorSettings from "../locked-vector-settings";
+import LockedVectorSettings from "../graph-locked-figures/locked-vector-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {Meta, StoryObj} from "@storybook/react";

packages/perseus-editor/src/components/__tests__/locked-ellipse-settings.test.tsx

@@ -3,7 +3,7 @@ import {render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
-import LockedEllipseSettings from "../locked-ellipse-settings";
+import LockedEllipseSettings from "../graph-locked-figures/locked-ellipse-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {UserEvent} from "@testing-library/user-event";

packages/perseus-editor/src/components/__tests__/locked-figures-section.test.tsx

@@ -3,7 +3,7 @@ import {screen, render} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
-import LockedFiguresSection from "../locked-figures-section";
+import LockedFiguresSection from "../graph-locked-figures/locked-figures-section";
 import {getDefaultFigureForType} from "../util";
 
 import type {UserEvent} from "@testing-library/user-event";

packages/perseus-editor/src/components/__tests__/locked-line-settings.test.tsx

@@ -3,7 +3,7 @@ import {render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
-import LockedLineSettings from "../locked-line-settings";
+import LockedLineSettings from "../graph-locked-figures/locked-line-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {UserEvent} from "@testing-library/user-event";

packages/perseus-editor/src/components/__tests__/locked-point-settings.test.tsx

@@ -3,7 +3,7 @@ import {render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
-import LockedPointSettings from "../locked-point-settings";
+import LockedPointSettings from "../graph-locked-figures/locked-point-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {UserEvent} from "@testing-library/user-event";

packages/perseus-editor/src/components/__tests__/locked-polygon-settings.test.tsx

@@ -3,7 +3,7 @@ import {render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
-import LockedPolygonSettings from "../locked-polygon-settings";
+import LockedPolygonSettings from "../graph-locked-figures/locked-polygon-settings";
 import {getDefaultFigureForType} from "../util";
 
 import type {UserEvent} from "@testing-library/user-event";

packages/perseus-editor/src/components/__tests__/locked-vector-settings.test.tsx

@@ -3,10 +3,10 @@ import {render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
-import LockedVectorSettings from "../locked-vector-settings";
+import LockedVectorSettings from "../graph-locked-figures/locked-vector-settings";
 import {getDefaultFigureForType} from "../util";
 
-import type {Props} from "../locked-vector-settings";
+import type {Props} from "../graph-locked-figures/locked-vector-settings";
 import type {UserEvent} from "@testing-library/user-event";
 
 const defaultProps = {

packages/perseus-editor/src/components/locked-ellipse-settings.tsx → packages/perseus-editor/src/components/graph-locked-figures/locked-ellipse-settings.tsx

@@ -7,7 +7,8 @@ import {LabelMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import AngleInput from "./angle-input";
+import AngleInput from "../angle-input";
+
 import ColorSelect from "./color-select";
 import CoordinatePairInput from "./coordinate-pair-input";
 import EllipseSwatch from "./ellipse-swatch";

packages/perseus-editor/src/components/locked-figures-section.tsx → packages/perseus-editor/src/components/graph-locked-figures/locked-figures-section.tsx

@@ -10,12 +10,13 @@ import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import {getDefaultFigureForType} from "../util";
+
 import LockedFigureSelect from "./locked-figure-select";
 import LockedFigureSettings from "./locked-figure-settings";
-import {getDefaultFigureForType} from "./util";
 
 import type {LockedFigureSettingsMovementType} from "./locked-figure-settings-actions";
-import type {Props as InteractiveGraphEditorProps} from "../widgets/interactive-graph-editor";
+import type {Props as InteractiveGraphEditorProps} from "../../widgets/interactive-graph-editor";
 import type {LockedFigure, LockedFigureType} from "@khanacademy/perseus";
 
 type Props = {

packages/perseus-editor/src/components/interactive-graph-settings.tsx

@@ -17,7 +17,7 @@ import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
-import LabeledRow from "./labeled-row";
+import LabeledRow from "./graph-locked-figures/labeled-row";
 import ToggleableCaret from "./toggleable-caret";
 
 import type {PerseusImageBackground} from "@khanacademy/perseus";

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

@@ -17,11 +17,11 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
+import LabeledRow from "../components/graph-locked-figures/labeled-row";
+import LockedFiguresSection from "../components/graph-locked-figures/locked-figures-section";
 import GraphPointsCountSelector from "../components/graph-points-count-selector";
 import GraphTypeSelector from "../components/graph-type-selector";
 import InteractiveGraphSettings from "../components/interactive-graph-settings";
-import LabeledRow from "../components/labeled-row";
-import LockedFiguresSection from "../components/locked-figures-section";
 import SegmentCountSelector from "../components/segment-count-selector";
 import {parsePointCount} from "../util/points";
 

packages/perseus/src/widgets/interactive-graphs/graph-locked-layer.tsx

@@ -1,11 +1,11 @@
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
 import * as React from "react";
 
-import LockedEllipse from "./locked-ellipse";
-import LockedLine from "./locked-line";
-import LockedPoint from "./locked-point";
-import LockedPolygon from "./locked-polygon";
-import LockedVector from "./locked-vector";
+import LockedEllipse from "./locked-figures/locked-ellipse";
+import LockedLine from "./locked-figures/locked-line";
+import LockedPoint from "./locked-figures/locked-point";
+import LockedPolygon from "./locked-figures/locked-polygon";
+import LockedVector from "./locked-figures/locked-vector";
 
 import type {LockedFigure} from "../../perseus-types";
 import type {Interval} from "mafs";

packages/perseus/src/widgets/interactive-graphs/locked-ellipse.tsx → packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-ellipse.tsx

@@ -5,7 +5,7 @@ import {
     lockedFigureFillStyles,
     lockedFigureColors,
     type LockedEllipseType,
-} from "../../perseus-types";
+} from "../../../perseus-types";
 
 const LockedEllipse = (props: LockedEllipseType) => {
     const {center, radius, angle, color, fillStyle, strokeStyle} = props;

packages/perseus/src/widgets/interactive-graphs/locked-line.tsx → packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-line.tsx

@@ -2,17 +2,16 @@ import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Point, Line, vec} from "mafs";
 import * as React from "react";
 
-import {lockedFigureColors} from "../../perseus-types";
-
-import {Arrowhead} from "./graphs/components/arrowhead";
-import {Vector} from "./graphs/components/vector";
-import {useTransformVectorsToPixels} from "./graphs/use-transform";
+import {lockedFigureColors} from "../../../perseus-types";
+import {Arrowhead} from "../graphs/components/arrowhead";
+import {Vector} from "../graphs/components/vector";
+import {useTransformVectorsToPixels} from "../graphs/use-transform";
 import {
     calculateAngleInDegrees,
     getIntersectionOfRayWithBox,
-} from "./graphs/utils";
+} from "../graphs/utils";
 
-import type {LockedLineType} from "../../perseus-types";
+import type {LockedLineType} from "../../../perseus-types";
 import type {Interval} from "mafs";
 
 type Props = LockedLineType & {

packages/perseus/src/widgets/interactive-graphs/locked-point.tsx → packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-point.tsx

@@ -2,7 +2,7 @@ import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Point} from "mafs";
 import * as React from "react";
 
-import {lockedFigureColors, type LockedPointType} from "../../perseus-types";
+import {lockedFigureColors, type LockedPointType} from "../../../perseus-types";
 
 const LockedPoint = (props: LockedPointType) => {
     const {color, coord, filled} = props;

packages/perseus/src/widgets/interactive-graphs/locked-polygon.tsx → packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-polygon.tsx

@@ -1,9 +1,12 @@
 import {Point, Polygon} from "mafs";
 import * as React from "react";
 
-import {lockedFigureColors, lockedFigureFillStyles} from "../../perseus-types";
+import {
+    lockedFigureColors,
+    lockedFigureFillStyles,
+} from "../../../perseus-types";
 
-import type {LockedPolygonType} from "../../perseus-types";
+import type {LockedPolygonType} from "../../../perseus-types";
 
 const LockedPolygon = (props: LockedPolygonType) => {
     const {points, color, showVertices, fillStyle, strokeStyle} = props;

packages/perseus/src/widgets/interactive-graphs/locked-vector.tsx → packages/perseus/src/widgets/interactive-graphs/locked-figures/locked-vector.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 
-import {lockedFigureColors} from "../../perseus-types";
+import {lockedFigureColors} from "../../../perseus-types";
+import {Vector} from "../graphs/components/vector";
 
-import {Vector} from "./graphs/components/vector";
-
-import type {LockedVectorType} from "../../perseus-types";
+import type {LockedVectorType} from "../../../perseus-types";
 
 const LockedVector = (props: LockedVectorType) => {
     const {color, points} = props;