[its-a-numeric-story] Improving Numeric Input Storybook Stories (#2138)

## Summary:
This PR is part of the Numeric Input Project. 

The purpose of this PR is to improve our storybook setup for our Numeric Input Widget. This includes the following work:
- Modernizing story structure 
- Hooking up argTypes with descriptions 
- Updating RendererWithDebugUI to also set customKeypad to the same value as isMobile 
     - This allows us to ensure that our Widgets that use MathInput are properly updating when toggled into Mobile view
- Adjustments to SideBySide 
     - Automatically collapse the Perseus JSON view. 
     - Moved the PerseusJSON view below the Renderer View
     - Rename to SplitView to better encapsulate the new design 
     - Updated variable names to match

[Current (Live) Storybook Example](https://khan.github.io/perseus/?path=/docs/perseus-widgets-numericinput--docs) | [PR Storybook Example](https://650db21c3f5d1b2f13c02952-osexoxinde.chromatic.com/?path=/docs/perseus-widgets-numeric-input--docs)

Issue: LEMS-2449

## Video Example:
https://github.com/user-attachments/assets/69f6dbfb-1fda-445b-a06f-90a178f9dbeb

## Test plan:
- Ensure all tests pass + manual testing

Author: SonicScrewdriver

Reviewers: SonicScrewdriver, mark-fitzgerald

Required Reviewers:

Approved By: mark-fitzgerald

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x)

Pull Request URL: #2138

.changeset/six-cars-agree.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Cleanup of Numeric Input stories

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

@@ -4,7 +4,7 @@ import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import {Editor} from "..";
-import SideBySide from "../../../../testing/side-by-side";
+import SplitView from "../../../../testing/split-view";
 import {question1} from "../__testdata__/numeric-input.testdata";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
@@ -85,9 +85,9 @@ export const DemoInteractiveGraph = (): React.ReactElement => {
         // class to be above it.
         // TODO: Refactor to aphrodite styles instead of scoped CSS in Less.
         <div className="framework-perseus">
-            <SideBySide
-                leftTitle="Editor"
-                left={
+            <SplitView
+                rendererTitle="Editor"
+                renderer={
                     <View style={{width: "360px", margin: "20px"}}>
                         <Editor
                             ref={editorRef}
@@ -128,7 +128,7 @@ export const DemoInteractiveGraph = (): React.ReactElement => {
                         />
                     </View>
                 }
-                rightTitle="Serialized Widget Options"
+                JSONTitle="Serialized Widget Options"
                 jsonObject={options}
             />
         </div>