Move some editor-only components into perseus-editor (#1591)

## Summary:
There were 4 components declared in `perseus` but only used in `perseus-editor` so I moved them.

Issue: LEMS-2321

## Test plan:
Nothing should change, implementation nit

Author: handeyeco

Reviewers: handeyeco, jeremywiebe

Required Reviewers:

Approved By: jeremywiebe

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (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), ✅ gerald

Pull Request URL: #1591

.changeset/pretty-garlics-give.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": major
+"@khanacademy/perseus-editor": patch
+---
+
+Move interaction-editor sub-components into perseus-editor

packages/perseus/src/widgets/interaction/arrow-picker.tsx → packages/perseus-editor/src/widgets/interaction-editor/arrow-picker.tsx

@@ -1,12 +1,13 @@
+import {components} from "@khanacademy/perseus";
 import * as React from "react";
 
-import ButtonGroup from "../../components/button-group";
+import type {Changeable} from "@khanacademy/perseus";
 
-import type {ChangeableProps} from "../../mixins/changeable";
+const {ButtonGroup} = components;
 
 type Props = {
     value?: string;
-} & ChangeableProps;
+} & Changeable.ChangeableProps;
 
 class ArrowPicker extends React.Component<Props> {
     static defaultProps: {

packages/perseus/src/widgets/interaction/color-picker.tsx → packages/perseus-editor/src/widgets/interaction-editor/color-picker.tsx

@@ -1,10 +1,10 @@
+import {components, KhanColors} from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
-import ButtonGroup from "../../components/button-group";
-import KhanColors from "../../util/colors";
+import type {Changeable} from "@khanacademy/perseus";
 
-import type {ChangeableProps} from "../../mixins/changeable";
+const {ButtonGroup} = components;
 
 const COLORS = [
     KhanColors.BLACK,
@@ -29,7 +29,7 @@ const LIGHT_COLORS = [
 type Props = {
     lightColors?: boolean;
     value?: string;
-} & ChangeableProps;
+} & Changeable.ChangeableProps;
 
 class ColorPicker extends React.Component<Props> {
     static defaultProps: {

packages/perseus/src/widgets/interaction/dash-picker.tsx → packages/perseus-editor/src/widgets/interaction-editor/dash-picker.tsx

@@ -1,12 +1,13 @@
+import {components} from "@khanacademy/perseus";
 import * as React from "react";
 
-import ButtonGroup from "../../components/button-group";
-
-import type {ChangeableProps} from "../../mixins/changeable";
+import type {Changeable} from "@khanacademy/perseus";
 
 type Props = {
     value?: string;
-} & ChangeableProps;
+} & Changeable.ChangeableProps;
+
+const {ButtonGroup} = components;
 
 class DashPicker extends React.Component<Props> {
     static defaultProps: {

packages/perseus/src/widgets/interaction/element-container.tsx → packages/perseus-editor/src/widgets/interaction-editor/element-container.tsx

@@ -1,14 +1,9 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
+
+import {components, icons} from "@khanacademy/perseus";
 import * as React from "react";
 
-import InlineIcon from "../../components/inline-icon";
-import {
-    iconChevronDown,
-    iconChevronRight,
-    iconCircleArrowDown,
-    iconCircleArrowUp,
-    iconTrash,
-} from "../../icon-paths";
+const {InlineIcon} = components;
 
 type Props = {
     children: React.ReactElement<any> | ReadonlyArray<React.ReactElement<any>>;
@@ -57,9 +52,9 @@ class ElementContainer extends React.Component<Props, State> {
                     onClick={this.toggle}
                 >
                     {this.state.show ? (
-                        <InlineIcon {...iconChevronDown} />
+                        <InlineIcon {...icons.iconChevronDown} />
                     ) : (
-                        <InlineIcon {...iconChevronRight} />
+                        <InlineIcon {...icons.iconChevronRight} />
                     )}
                     {this.props.title}
                 </a>
@@ -76,17 +71,19 @@ class ElementContainer extends React.Component<Props, State> {
                         <div className="edit-controls">
                             {this.props.onUp != null && (
                                 <button onClick={this.props.onUp}>
-                                    <InlineIcon {...iconCircleArrowUp} />
+                                    <InlineIcon {...icons.iconCircleArrowUp} />
                                 </button>
                             )}
                             {this.props.onDown != null && (
                                 <button onClick={this.props.onDown}>
-                                    <InlineIcon {...iconCircleArrowDown} />
+                                    <InlineIcon
+                                        {...icons.iconCircleArrowDown}
+                                    />
                                 </button>
                             )}
                             {this.props.onDelete != null && (
                                 <button onClick={this.props.onDelete}>
-                                    <InlineIcon {...iconTrash} />
+                                    <InlineIcon {...icons.iconTrash} />
                                 </button>
                             )}
                         </div>

packages/perseus-editor/src/widgets/interaction-editor/function-editor.tsx

@@ -4,12 +4,12 @@ import {
     Dependencies,
     EditorJsonify,
     KhanColors,
-    ColorPicker,
-    DashPicker,
 } from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
+import ColorPicker from "./color-picker";
+import DashPicker from "./dash-picker";
 import MathquillInput from "./mathquill-input";
 
 const {NumberInput} = components;

packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx

@@ -5,13 +5,13 @@ import {
     Dependencies,
     EditorJsonify,
     Util,
-    ElementContainer,
 } from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
 import GraphSettings from "../../components/graph-settings";
 
+import ElementContainer from "./element-container";
 import FunctionEditor from "./function-editor";
 import LabelEditor from "./label-editor";
 import LineEditor from "./line-editor";

packages/perseus-editor/src/widgets/interaction-editor/label-editor.tsx

@@ -4,11 +4,11 @@ import {
     Dependencies,
     EditorJsonify,
     KhanColors,
-    ColorPicker,
 } from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
+import ColorPicker from "./color-picker";
 import MathquillInput from "./mathquill-input";
 
 const {TextInput} = components;

packages/perseus-editor/src/widgets/interaction-editor/line-editor.tsx

@@ -4,13 +4,13 @@ import {
     Dependencies,
     EditorJsonify,
     KhanColors,
-    ArrowPicker,
-    ColorPicker,
-    DashPicker,
 } from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
+import ArrowPicker from "./arrow-picker";
+import ColorPicker from "./color-picker";
+import DashPicker from "./dash-picker";
 import MathquillInput from "./mathquill-input";
 
 const {NumberInput} = components;

packages/perseus-editor/src/widgets/interaction-editor/parametric-editor.tsx

@@ -4,12 +4,12 @@ import {
     Dependencies,
     EditorJsonify,
     KhanColors,
-    ColorPicker,
-    DashPicker,
 } from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
+import ColorPicker from "./color-picker";
+import DashPicker from "./dash-picker";
 import MathquillInput from "./mathquill-input";
 
 const {NumberInput} = components;

packages/perseus-editor/src/widgets/interaction-editor/point-editor.tsx

@@ -3,11 +3,11 @@ import {
     Dependencies,
     EditorJsonify,
     KhanColors,
-    ColorPicker,
 } from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
+import ColorPicker from "./color-picker";
 import MathquillInput from "./mathquill-input";
 
 const {getDependencies} = Dependencies;

packages/perseus-editor/src/widgets/interaction-editor/rectangle-editor.tsx

@@ -3,11 +3,11 @@ import {
     Dependencies,
     EditorJsonify,
     KhanColors,
-    ColorPicker,
 } from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
+import ColorPicker from "./color-picker";
 import MathquillInput from "./mathquill-input";
 
 const {getDependencies} = Dependencies;

packages/perseus/src/index.ts

@@ -36,10 +36,6 @@ export {default as TableWidget} from "./widgets/table";
 export {default as PlotterWidget} from "./widgets/plotter";
 export {default as GrapherWidget} from "./widgets/grapher";
 
-export {default as ArrowPicker} from "./widgets/interaction/arrow-picker";
-export {default as ColorPicker} from "./widgets/interaction/color-picker";
-export {default as DashPicker} from "./widgets/interaction/dash-picker";
-export {default as ElementContainer} from "./widgets/interaction/element-container";
 export * as GrapherUtil from "./widgets/grapher/util";
 
 /**