[Interactive Graph Editor] Add/Edit/Delete Locked Function

.changeset/chilly-apples-accept.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus-editor": minor
+"@khanacademy/perseus": patch
+---
+
+Add/Edit/Delete Locked Function in Interactive Graph Editor

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+
+import LockedFunctionSettings from "../graph-locked-figures/locked-function-settings";
+import {getDefaultFigureForType} from "../util";
+
+import type {Meta, StoryObj} from "@storybook/react";
+
+export default {
+    title: "PerseusEditor/Components/Locked Function Settings",
+    component: LockedFunctionSettings,
+} as Meta<typeof LockedFunctionSettings>;
+
+export const Default = (args): React.ReactElement => {
+    return <LockedFunctionSettings {...args} />;
+};
+
+const defaultProps = {
+    ...getDefaultFigureForType("function"),
+    onChangeProps: () => {},
+    onMove: () => {},
+    onRemove: () => {},
+};
+
+type StoryComponentType = StoryObj<typeof LockedFunctionSettings>;
+
+// Set the default values in the control panel.
+Default.args = defaultProps;
+
+export const Expanded: StoryComponentType = {
+    render: function Render() {
+        const [props, setProps] = React.useState(defaultProps);
+
+        const handlePropsUpdate = (newProps) => {
+            setProps({
+                ...props,
+                ...newProps,
+            });
+        };
+
+        return (
+            <LockedFunctionSettings
+                {...props}
+                expanded={true}
+                onChangeProps={handlePropsUpdate}
+            />
+        );
+    },
+};