Type fixes

.changeset/four-laws-wash.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Miscellaneous type improvements

packages/perseus-editor/src/article-editor.tsx

@@ -15,7 +15,7 @@ import SectionControlButton from "./components/section-control-button";
 import Editor from "./editor";
 import IframeContentRenderer from "./iframe-content-renderer";
 
-import type {APIOptions, Changeable} from "@khanacademy/perseus";
+import type {APIOptions, Changeable, ImageUploader} from "@khanacademy/perseus";
 
 const {HUD, InlineIcon} = components;
 const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
@@ -39,7 +39,7 @@ type DefaultProps = {
 };
 type Props = DefaultProps & {
     apiOptions?: APIOptions;
-    imageUploader?: (arg1: string, arg2: (arg1: string) => unknown) => unknown;
+    imageUploader?: ImageUploader;
     // URL of the route to show on initial load of the preview frames.
     previewURL: string;
 } & Changeable.ChangeableProps;

packages/perseus-editor/src/editor.tsx

@@ -24,7 +24,11 @@ import WidgetEditor from "./components/widget-editor";
 import WidgetSelect from "./components/widget-select";
 import TexErrorView from "./tex-error-view";
 
-import type {ChangeHandler, PerseusWidget} from "@khanacademy/perseus";
+import type {
+    ChangeHandler,
+    ImageUploader,
+    PerseusWidget,
+} from "@khanacademy/perseus";
 
 // like [[snowman input-number 1]]
 const widgetPlaceholder = "[[\u2603 {id}]]";
@@ -122,10 +126,7 @@ type Props = Readonly<{
     showWordCount: boolean;
     warnNoPrompt: boolean;
     warnNoWidgets: boolean;
-    imageUploader?: (
-        file: string,
-        callback: (url: string) => unknown,
-    ) => unknown;
+    imageUploader?: ImageUploader;
     onChange: ChangeHandler;
 }>;
 

packages/perseus-editor/src/hint-editor.tsx

@@ -19,16 +19,12 @@ import type {
     Hint,
     ChangeHandler,
     DeviceType,
+    ImageUploader,
 } from "@khanacademy/perseus";
 
 const {InfoTip, InlineIcon} = components;
 const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
 
-type ImageUploader = (
-    file: string,
-    callback: (url: string) => unknown,
-) => unknown;
-
 type HintEditorProps = {
     itemId?: string;
     apiOptions?: APIOptions;

packages/perseus-editor/src/item-editor.tsx

@@ -12,6 +12,7 @@ import type {
     ImageUploader,
     ChangeHandler,
     DeviceType,
+    PerseusRenderer,
 } from "@khanacademy/perseus";
 
 const ITEM_DATA_VERSION = itemDataVersion;
@@ -22,7 +23,7 @@ type Props = {
     gradeMessage?: string;
     imageUploader?: ImageUploader;
     wasAnswered?: boolean;
-    question?: any;
+    question?: PerseusRenderer;
     answerArea?: any;
     // URL of the route to show on initial load of the preview frames.
     previewURL: string;

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

@@ -9,12 +9,11 @@ import type {
     PerseusRenderer,
     APIOptions,
 } from "@khanacademy/perseus";
+import type {Meta, StoryObj} from "@storybook/react";
 
-type StoryArgs = Record<any, any>;
+type StoryArgs = StoryObj<RadioEditor>;
 
-type Story = {
-    title: string;
-};
+type Story = Meta<RadioEditor>;
 
 export default {
     title: "PerseusEditor/Widgets/Radio Editor",

packages/perseus/src/__stories__/server-item-renderer.stories.tsx

@@ -13,11 +13,11 @@ import {
 } from "../__testdata__/server-item-renderer.testdata";
 import {ServerItemRenderer} from "../server-item-renderer";
 
-type StoryArgs = Record<any, any>;
+import type {StoryObj, Meta} from "@storybook/react";
 
-type Story = {
-    title: string;
-};
+type StoryArgs = StoryObj<ServerItemRenderer>;
+
+type Story = Meta<ServerItemRenderer>;
 
 export default {
     title: "Perseus/Renderers/Server Item Renderer",

packages/perseus/src/components/__stories__/button-group.stories.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 
 import ButtonGroup from "../button-group";
 
-type StoryArgs = Record<any, any>;
+import type {Meta, StoryObj} from "@storybook/react";
 
-type Story = {
-    title: string;
-};
+type StoryArgs = StoryObj<ButtonGroup>;
+
+type Story = Meta<ButtonGroup>;
 
 export default {
     title: "Perseus/Components/Button Group",

packages/perseus/src/components/__stories__/fixed-to-responsive.stories.tsx

@@ -3,11 +3,11 @@ import * as React from "react";
 import {getDependencies} from "../../dependencies";
 import FixedToResponsive from "../fixed-to-responsive";
 
-type StoryArgs = Record<any, any>;
+import type {Meta, StoryObj} from "@storybook/react";
 
-type Story = {
-    title: string;
-};
+type StoryArgs = StoryObj<FixedToResponsive>;
+
+type Story = Meta<FixedToResponsive>;
 
 const svgUrl = "https://www.khanacademy.org/images/ohnoes-concerned.svg";
 const imgUrl = "https://www.khanacademy.org/images/hand-tree.new.png";

packages/perseus/src/components/__stories__/graph.stories.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 
 import Graph from "../graph";
 
-type StoryArgs = Record<any, any>;
+import type {StoryObj, Meta} from "@storybook/react";
 
-type Story = {
-    title: string;
-};
+type StoryArgs = StoryObj<Graph>;
+
+type Story = Meta<Graph>;
 
 const size = 200;
 

packages/perseus/src/components/__stories__/graphie.stories.tsx

@@ -4,11 +4,11 @@ import {ServerItemRendererWithDebugUI} from "../../../../../testing/server-item-
 import {itemWithPieChart} from "../../__testdata__/graphie.testdata";
 import Graphie from "../graphie";
 
-type StoryArgs = Record<any, any>;
+import type {StoryObj, Meta} from "@storybook/react";
 
-type Story = {
-    title: string;
-};
+type StoryArgs = StoryObj<Graphie>;
+
+type Story = Meta<Graphie>;
 
 const size = 200;
 

packages/perseus/src/components/__stories__/hud.stories.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 
 import Hud from "../hud";
 
-type StoryArgs = Record<any, any>;
+import type {StoryObj, Meta} from "@storybook/react";
 
-type Story = {
-    title: string;
-};
+type StoryArgs = StoryObj<typeof Hud>;
+
+type Story = Meta<typeof Hud>;
 
 export default {
     title: "Perseus/Components/HUD",

packages/perseus/src/components/__stories__/icon.stories.tsx

@@ -3,36 +3,11 @@ import * as React from "react";
 import * as IconPaths from "../../icon-paths";
 import IconComponent from "../icon";
 
-type StorybookStoryArgs = {
-    options?: ReadonlyArray<string>;
-    mapping?: {
-        [value: string]: any;
-    };
-    defaultValue?: string;
-    control?: string;
-};
+import type {StoryObj, Meta} from "@storybook/react";
 
-type StoryArgs = {
-    color?: string;
-    size?: number;
-    title?: string;
-    icon?: typeof IconPaths.iconCheck;
-};
+type StoryArgs = StoryObj<IconComponent>;
 
-type SetValueType<T, V> = {
-    [Property in keyof T]: V;
-};
-
-type StoryArgTypes = SetValueType<
-    StoryArgs,
-    StorybookStoryArgs | null | undefined
->;
-
-type Story = {
-    title: string;
-    args?: StoryArgs;
-    argTypes: StoryArgTypes;
-};
+type Story = Meta<IconComponent>;
 
 export default {
     title: "Perseus/Components",

packages/perseus/src/renderer.tsx

@@ -47,6 +47,7 @@ import type {
     PerseusScore,
     WidgetProps,
 } from "./types";
+import type {KeypadAPI} from "@khanacademy/math-input";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 import "./styles/perseus-renderer.less";
@@ -169,7 +170,7 @@ type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
     findExternalWidgets: any;
     highlightedWidgets?: ReadonlyArray<any>;
     images: PerseusRenderer["images"];
-    keypadElement?: any; // TODO(kevinb): add proper types,
+    keypadElement?: KeypadAPI | null;
     onInteractWithWidget: (id: string) => void;
     onRender: (node?: any) => void;
     problemNum?: number;

packages/perseus/src/types.ts

@@ -101,7 +101,7 @@ export type ChangeHandler = (
 ) => unknown;
 
 export type ImageUploader = (
-    file: string,
+    file: File,
     callback: (url: string) => unknown,
 ) => unknown;