@khanacademy/perseus 4.0.2 → 5.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

@@ -19,33 +19,33 @@ const defaultObject = {
     ruleName: "Test rule",
 } as const;
 
-export const DefaultLintContainerAndMessage: React.FC<StoryArgs> = (
-    args,
+export const DefaultLintContainerAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} />;
 };
-export const Severity1DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const Severity1DefaultLintAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} severity={1} />;
 };
-export const Severity2DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const Severity2DefaultLintAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} severity={2} />;
 };
-export const Severity3DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const Severity3DefaultLintAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} severity={3} />;
 };
-export const Severity4DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const Severity4DefaultLintAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} severity={4} />;
 };
-export const InlineLintContainerAndMessage: React.FC<StoryArgs> = (
-    args,
+export const InlineLintContainerAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} inline={true} />;
 };

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

@@ -14,8 +14,8 @@ export default {
     title: "Perseus/Components/Sortable",
 } as Story;
 
-export const SortableHorizontalExample: React.FC<StoryArgs> = (
-    args,
+export const SortableHorizontalExample = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Sortable
@@ -26,8 +26,8 @@ export const SortableHorizontalExample: React.FC<StoryArgs> = (
     );
 };
 
-export const SortableVerticalExample: React.FC<StoryArgs> = (
-    args,
+export const SortableVerticalExample = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Sortable
@@ -38,33 +38,33 @@ export const SortableVerticalExample: React.FC<StoryArgs> = (
     );
 };
 
-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"]}

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

@@ -16,24 +16,18 @@ const defaultObject = {
     onChange: () => {},
 } as const;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} />;
 };
 
-export const TestValueProvided: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestValueProvided = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} value="Test value" />;
 };
 
-export const AriaLabelTextProvided: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AriaLabelTextProvided = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} labelText="Test label" />;
 };
 
-export const Disabled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Disabled = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} disabled={true} />;
 };

package/src/components/__stories__/text-list-editor.stories.tsx

@@ -22,9 +22,7 @@ const defaultObject = {
 
 const ClassName = "framework-perseus orderer";
 
-export const SimpleListOfOptions: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SimpleListOfOptions = (args: StoryArgs): React.ReactElement => {
     return (
         // @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: Element; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
         <div class={ClassName}>

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

@@ -12,16 +12,18 @@ export default {
     title: "Perseus/Components/Zoomable Tex",
 } as Story;
 
-const ForceZoomWrapper: React.FC<{
+type Props = {
     children: React.ReactNode;
-}> = ({children}): React.ReactElement => (
+};
+
+const ForceZoomWrapper = ({children}: Props): React.ReactElement => (
     <>
         <h1>Click on equation to zoom/unzoom</h1>
         <div style={{width: "50px"}}>{children}</div>
     </>
 );
 
-export const KaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const KaTeX = (args: StoryArgs): React.ReactElement => {
     return (
         <ForceZoomWrapper>
             <ZoomableTex children="\sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6}" />
@@ -29,7 +31,7 @@ export const KaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const ComplexKaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ComplexKaTeX = (args: StoryArgs): React.ReactElement => {
     return (
         <ForceZoomWrapper>
             {" "}

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

@@ -27,9 +27,7 @@ const computeChildBounds = (
     };
 };
 
-export const ZoomableExample: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ZoomableExample = (args: StoryArgs): React.ReactElement => {
     return (
         <Zoomable computeChildBounds={computeChildBounds}>
             <span>