@khanacademy/perseus 4.0.2 → 6.0.0

package/src/components/__stories__/info-tip.stories.tsx

@@ -14,9 +14,7 @@ export default {
 
 const svgUrl = "http://www.khanacademy.org/images/ohnoes-concerned.svg";
 
-export const TextOnMouseover: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TextOnMouseover = (args: StoryArgs): React.ReactElement => {
     return (
         <InfoTip>
             <span>Sample text</span>
@@ -24,9 +22,7 @@ export const TextOnMouseover: React.FC<StoryArgs> = (
     );
 };
 
-export const ImageOnMouseover: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ImageOnMouseover = (args: StoryArgs): React.ReactElement => {
     return (
         <InfoTip>
             <img alt="" src={svgUrl} />

package/src/components/__stories__/inline-icon.stories.tsx

@@ -18,14 +18,12 @@ export default {
     title: "Perseus/Components/Inline Icon",
 } as Story;
 
-export const BasicIconPathAndSizing: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const BasicIconPathAndSizing = (args: StoryArgs): React.ReactElement => {
     return <InlineIcon {...defaultPath} />;
 };
 
-export const BasicIconWithAdditionalStyling: React.FC<StoryArgs> = (
-    args,
+export const BasicIconWithAdditionalStyling = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <InlineIcon
@@ -37,8 +35,6 @@ export const BasicIconWithAdditionalStyling: React.FC<StoryArgs> = (
     );
 };
 
-export const BasicIconWithAriaTitle: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const BasicIconWithAriaTitle = (args: StoryArgs): React.ReactElement => {
     return <InlineIcon {...defaultPath} title="Sample ARIA title" />;
 };

package/src/components/__stories__/input-with-examples.stories.tsx

@@ -20,20 +20,18 @@ const defaultObject = {
 } as const;
 const testExamples = ["Sample 1", "Sample 2", "Sample 3"];
 
-export const DefaultAndMostlyEmptyProps: React.FC<StoryArgs> = (
-    args,
+export const DefaultAndMostlyEmptyProps = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <InputWithExamples {...defaultObject} />;
 };
 
-export const ListOfExamples: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ListOfExamples = (args: StoryArgs): React.ReactElement => {
     return <InputWithExamples {...defaultObject} examples={testExamples} />;
 };
 
-export const AriaLabelTextWithListOfExamples: React.FC<StoryArgs> = (
-    args,
+export const AriaLabelTextWithListOfExamples = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <InputWithExamples
@@ -44,9 +42,7 @@ export const AriaLabelTextWithListOfExamples: React.FC<StoryArgs> = (
     );
 };
 
-export const DisabledInput: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const DisabledInput = (args: StoryArgs): React.ReactElement => {
     return (
         <InputWithExamples
             {...defaultObject}

package/src/components/__stories__/lint.stories.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 
-type StoryArgs = Record<any, any>;
+import Lint from "../lint";
+
+import type {Meta} from "@storybook/react";
 
-type Story = {
-    title: string;
+const meta: Meta<typeof Lint> = {
+    title: "Perseus/Components/Lint",
 };
 
-import Lint from "../lint";
+export default meta;
 
-export default {
-    title: "Perseus/Components/Lint",
-} as Story;
+type StoryArgs = Record<any, any>;
 
 const defaultObject = {
     children: <div>This is the sample lint child</div>,
@@ -19,33 +19,68 @@ const defaultObject = {
     ruleName: "Test rule",
 } as const;
 
-export const DefaultLintContainerAndMessage: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
-    return <Lint {...defaultObject} />;
+const Container = ({children}: {children: React.ReactNode}) => {
+    return (
+        <div
+            style={{
+                width: "250px",
+                padding: "8px",
+                margin: "20px",
+                border: "solid 1px grey",
+            }}
+        >
+            {children}
+        </div>
+    );
 };
-export const Severity1DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+
+export const DefaultLintContainerAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
-    return <Lint {...defaultObject} severity={1} />;
+    return (
+        <Container>
+            <Lint {...defaultObject} />
+        </Container>
+    );
 };
-export const Severity2DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
-    return <Lint {...defaultObject} severity={2} />;
+export const LintSeverity1Error = (args: StoryArgs): React.ReactElement => {
+    return (
+        <Container>
+            <Lint {...defaultObject} severity={1} />
+        </Container>
+    );
+};
+export const LintSeverity2Warning = (args: StoryArgs): React.ReactElement => {
+    return (
+        <Container>
+            <Lint {...defaultObject} severity={2} />
+        </Container>
+    );
 };
-export const Severity3DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const LintSeverity3Recommendation = (
+    args: StoryArgs,
 ): React.ReactElement => {
-    return <Lint {...defaultObject} severity={3} />;
+    return (
+        <Container>
+            <Lint {...defaultObject} severity={3} />
+        </Container>
+    );
 };
-export const Severity4DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const LintSeverity4OfflineReportingOnly = (
+    args: StoryArgs,
 ): React.ReactElement => {
-    return <Lint {...defaultObject} severity={4} />;
+    return (
+        <Container>
+            <Lint {...defaultObject} severity={4} />
+        </Container>
+    );
 };
-export const InlineLintContainerAndMessage: React.FC<StoryArgs> = (
-    args,
+export const InlineLintContainerAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
-    return <Lint {...defaultObject} inline={true} />;
+    return (
+        <Container>
+            <Lint {...defaultObject} inline={true} />
+        </Container>
+    );
 };

package/src/components/__stories__/math-input.stories.tsx

@@ -17,18 +17,14 @@ const defaultObject = {
     onChange: () => {},
 } as const;
 
-export const DefaultWithBasicButtonSet: React.FC<StoryArgs> = (
-    args,
+export const DefaultWithBasicButtonSet = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <MathInput {...defaultObject} />;
 };
-export const AlwaysVisibleButtonSet: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AlwaysVisibleButtonSet = (args: StoryArgs): React.ReactElement => {
     return <MathInput {...defaultObject} buttonsVisible="always" />;
 };
-export const DefaultWithAriaLabel: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const DefaultWithAriaLabel = (args: StoryArgs): React.ReactElement => {
     return <MathInput {...defaultObject} labelText="Sample label" />;
 };

package/src/components/__stories__/math-output.stories.tsx

@@ -12,14 +12,12 @@ export default {
     title: "Perseus/Components/Math Ouput",
 } as Story;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <MathOutput />;
 };
-export const StringValue: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const StringValue = (args: StoryArgs): React.ReactElement => {
     return <MathOutput value="Test string value" />;
 };
-export const NumericValue: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const NumericValue = (args: StoryArgs): React.ReactElement => {
     return <MathOutput value={1234567890} />;
 };

package/src/components/__stories__/multi-button-group.stories.tsx

@@ -39,9 +39,7 @@ const HarnassedButtonGroup = (
     );
 };
 
-export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithNoTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             {...args}
@@ -54,9 +52,7 @@ export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
     );
 };
 
-export const ButtonsWithTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             {...args}

package/src/components/__stories__/number-input.stories.tsx

@@ -16,28 +16,26 @@ export default {
     title: "Perseus/Components/Number Input",
 } as Story;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} />;
 };
 
-export const SampleValue: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SampleValue = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} value={1234567890} />;
 };
 
-export const Placeholder: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Placeholder = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} placeholder="Sample placeholder" />;
 };
 
-export const SizeMini: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SizeMini = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} placeholder="Sample placeholder" />;
 };
 
-export const SizeSmall: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SizeSmall = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} size="small" />;
 };
 
-export const SizeNormal: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SizeNormal = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} size="normal" />;
 };

package/src/components/__stories__/prop-check-box.stories.tsx

@@ -12,8 +12,8 @@ export default {
     title: "Perseus/Components/Prop Check Box",
 } as Story;
 
-export const TestLabelWithCheckedObject: React.FC<StoryArgs> = (
-    args,
+export const TestLabelWithCheckedObject = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <PropCheckBox
@@ -25,8 +25,8 @@ export const TestLabelWithCheckedObject: React.FC<StoryArgs> = (
     );
 };
 
-export const TestLabelWithUncheckedObject: React.FC<StoryArgs> = (
-    args,
+export const TestLabelWithUncheckedObject = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <PropCheckBox
@@ -38,8 +38,8 @@ export const TestLabelWithUncheckedObject: React.FC<StoryArgs> = (
     );
 };
 
-export const TestLabelWithCheckedObjectLabelOnTheRight: React.FC<StoryArgs> = (
-    args,
+export const TestLabelWithCheckedObjectLabelOnTheRight = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <PropCheckBox
@@ -51,9 +51,9 @@ export const TestLabelWithCheckedObjectLabelOnTheRight: React.FC<StoryArgs> = (
     );
 };
 
-export const TestLabelWithUncheckedObjectLabelOnTheRight: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const TestLabelWithUncheckedObjectLabelOnTheRight = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <PropCheckBox
             test={false}

package/src/components/__stories__/range-input.stories.tsx

@@ -12,19 +12,17 @@ export default {
     title: "Perseus/Components/Range Input",
 } as Story;
 
-export const EmptyValueArray: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyValueArray = (args: StoryArgs): React.ReactElement => {
     return <RangeInput onChange={() => {}} value={[]} />;
 };
 
-export const SimpleWithSmallValueRanges: React.FC<StoryArgs> = (
-    args,
+export const SimpleWithSmallValueRanges = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <RangeInput onChange={() => {}} value={[-10, 10]} />;
 };
 
-export const Placeholders: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Placeholders = (args: StoryArgs): React.ReactElement => {
     return (
         <RangeInput onChange={() => {}} placeholder={["?", "!"]} value={[]} />
     );

package/src/components/__stories__/simple-keypad-input.stories.tsx

@@ -18,12 +18,10 @@ export default {
     title: "Perseus/Components/Simple Keypad Input",
 } as Story;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <SimpleKeypadInput {...defaultObject} />;
 };
 
-export const CustomValue: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const CustomValue = (args: StoryArgs): React.ReactElement => {
     return <SimpleKeypadInput {...defaultObject} value="Test value" />;
 };

package/src/components/__stories__/sortable.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import Sortable from "../sortable";
+import Sortable, {Layout} from "../sortable";
 
 type StoryArgs = Record<any, any>;
 
@@ -14,57 +14,57 @@ export default {
     title: "Perseus/Components/Sortable",
 } as Story;
 
-export const SortableHorizontalExample: React.FC<StoryArgs> = (
-    args,
+export const SortableHorizontalExample = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Sortable
-            layout="horizontal"
+            layout={Layout.HORIZONTAL}
             options={["a", "b", "c"]}
-            waitForKatexLoad={false}
+            waitForTexRendererToLoad={false}
         />
     );
 };
 
-export const SortableVerticalExample: React.FC<StoryArgs> = (
-    args,
+export const SortableVerticalExample = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Sortable
-            layout="vertical"
+            layout={Layout.VERTICAL}
             options={["a", "b", "c"]}
-            waitForKatexLoad={false}
+            waitForTexRendererToLoad={false}
         />
     );
 };
 
-export const BasicSortableOptionsTest: React.FC<StoryArgs> = (
-    args,
+export const BasicSortableOptionsTest = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Sortable options={defaultOptions} />;
 };
 
-export const BasicSortableOptionsTestWithNoPadding: React.FC<StoryArgs> = (
-    args,
+export const BasicSortableOptionsTestWithNoPadding = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Sortable options={defaultOptions} padding={false} />;
 };
 
-export const BasicSortableOptionsTestWithLargeMargin: React.FC<StoryArgs> = (
-    args,
+export const BasicSortableOptionsTestWithLargeMargin = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Sortable options={defaultOptions} margin={64} />;
 };
 
-export const BasicSortableOptionsTestDisabled: React.FC<StoryArgs> = (
-    args,
+export const BasicSortableOptionsTestDisabled = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Sortable options={defaultOptions} disabled={true} />;
 };
 
-export const BasicSortableOptionsTestWithWidthAndHeightConstraints: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const BasicSortableOptionsTestWithWidthAndHeightConstraints = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <Sortable
             options={defaultOptions}

package/src/components/__stories__/stub-tag-editor.stories.tsx

@@ -14,19 +14,15 @@ export default {
 
 const defaultValues = ["Test value 1", "Test value 2", "Test value 3"];
 
-export const ShowingTitle: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ShowingTitle = (args: StoryArgs): React.ReactElement => {
     return <StubTagEditor onChange={() => {}} showTitle={true} />;
 };
 
-export const NotShowingTitle: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const NotShowingTitle = (args: StoryArgs): React.ReactElement => {
     return <StubTagEditor onChange={() => {}} showTitle={false} />;
 };
 
-export const ShowingTitleWithValue: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ShowingTitleWithValue = (args: StoryArgs): React.ReactElement => {
     return (
         <StubTagEditor
             onChange={() => {}}
@@ -36,8 +32,8 @@ export const ShowingTitleWithValue: React.FC<StoryArgs> = (
     );
 };
 
-export const NotShowingTitleWithValue: React.FC<StoryArgs> = (
-    args,
+export const NotShowingTitleWithValue = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <StubTagEditor

package/src/components/__stories__/svg-image.stories.tsx

@@ -17,15 +17,11 @@ const imgUrl = "https://www.khanacademy.org/images/hand-tree.new.png";
 const graphieUrl =
     "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1e06f6d4071f30cee2cc3ccb7435b3a66a62fe3f";
 
-export const MostlyEmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MostlyEmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <SvgImage alt="ALT" />;
 };
 
-export const SvgImageThatDoesntLoad: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SvgImageThatDoesntLoad = (args: StoryArgs): React.ReactElement => {
     return (
         <SvgImage
             alt="ALT"
@@ -36,26 +32,22 @@ export const SvgImageThatDoesntLoad: React.FC<StoryArgs> = (
     );
 };
 
-export const SvgImageBasic: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SvgImageBasic = (args: StoryArgs): React.ReactElement => {
     return <SvgImage src={svgUrl} alt="ALT" />;
 };
 
-export const SvgImageWithFixedHeight: React.FC<StoryArgs> = (
-    args,
+export const SvgImageWithFixedHeight = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <SvgImage height={50} src={svgUrl} alt="ALT" />;
 };
 
-export const SvgImageWithFixedWidth: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SvgImageWithFixedWidth = (args: StoryArgs): React.ReactElement => {
     return <SvgImage src={svgUrl} width={50} alt="ALT" />;
 };
 
-export const SvgImageWithExtraGraphieProps: React.FC<StoryArgs> = (
-    args,
+export const SvgImageWithExtraGraphieProps = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <SvgImage
@@ -73,10 +65,10 @@ export const SvgImageWithExtraGraphieProps: React.FC<StoryArgs> = (
     );
 };
 
-export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const PngImage = (args: StoryArgs): React.ReactElement => {
     return <SvgImage src={imgUrl} alt="ALT" />;
 };
 
-export const GraphieImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const GraphieImage = (args: StoryArgs): React.ReactElement => {
     return <SvgImage src={graphieUrl} alt="ALT" />;
 };

package/src/components/__stories__/tex.stories.tsx

@@ -18,8 +18,6 @@ export default {
     },
 } as Story;
 
-export const BasicOperation: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const BasicOperation = (args: StoryArgs): React.ReactElement => {
     return <TeX setAssetStatus={() => {}} children={args.equation} />;
 };

package/src/components/__stories__/text-buttons.stories.tsx

@@ -12,51 +12,39 @@ export default {
     title: "Perseus/Components/Tex Buttons",
 } as Story;
 
-export const ButtonSetBasic: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetBasic = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["basic"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetBasicDiv: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetBasicDiv = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["basic+div"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetTrig: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetTrig = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["trig"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetPrealgebra: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetPrealgebra = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["prealgebra"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetLogarithms: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetLogarithms = (args: StoryArgs): React.ReactElement => {
     return <TexButtons sets={["logarithms"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetBasicRelations: React.FC<StoryArgs> = (
-    args,
+export const ButtonSetBasicRelations = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <TexButtons sets={["basic relations"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetAdvancedRelations: React.FC<StoryArgs> = (
-    args,
+export const ButtonSetAdvancedRelations = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <TexButtons sets={["advanced relations"]} onInsert={() => {}} />;
 };
 
-export const ButtonSetMultiple: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonSetMultiple = (args: StoryArgs): React.ReactElement => {
     return (
         <TexButtons
             sets={["basic", "trig", "advanced relations"]}