@khanacademy/perseus-editor 2.0.2 → 2.0.3

package/dist/section-control-button.d.ts

@@ -1,5 +1,14 @@
 import * as React from "react";
-declare const InlineIcon: React.FC<import("../../perseus/src/components/inline-icon").InlineIconProps>;
+declare const InlineIcon: {
+    ({ path, width, height, style, title, }: import("../../perseus/src/components/inline-icon").InlineIconProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    propTypes: {
+        path: import("prop-types").Validator<string>;
+        height: import("prop-types").Validator<number>;
+        width: import("prop-types").Validator<number>;
+        style: import("prop-types").Requireable<object>;
+        title: import("prop-types").Requireable<string>;
+    };
+};
 type InlineIconProps = JSX.LibraryManagedAttributes<typeof InlineIcon, React.ComponentProps<typeof InlineIcon>>;
 type SectionControlButtonProps = {
     icon: InlineIconProps;

package/dist/section-control-button.js.flow

@@ -5,8 +5,20 @@
  * @flow
  */
 import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_components_2f_inline_2d_icon from "../../perseus/src/components/inline-icon";
+import * as $Flowgen$Import$prop_2d_types from "prop-types";
 import * as React from "react";
-declare var InlineIcon: React.StatelessFunctionalComponent<$Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_components_2f_inline_2d_icon.InlineIconProps>;
+declare var InlineIcon: {|
+  (
+    x: $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_components_2f_inline_2d_icon.InlineIconProps
+  ): React.Element<any, string | React.JSXElementConstructor<any>>,
+  propTypes: {|
+    path: $Flowgen$Import$prop_2d_types.Validator<string>,
+    height: $Flowgen$Import$prop_2d_types.Validator<number>,
+    width: $Flowgen$Import$prop_2d_types.Validator<number>,
+    style: $Flowgen$Import$prop_2d_types.Requireable<{ ... }>,
+    title: $Flowgen$Import$prop_2d_types.Requireable<string>,
+  |},
+|};
 declare type InlineIconProps = React.ElementConfig<typeof InlineIcon>;
 declare type SectionControlButtonProps = {|
   icon: InlineIconProps,

package/dist/widgets/label-image/answer-choices.d.ts

@@ -9,5 +9,5 @@ type AnswerChoicesProps = {
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-declare const AnswerChoices: React.FC<AnswerChoicesProps>;
+declare const AnswerChoices: ({ choices, onChange, }: AnswerChoicesProps) => React.ReactElement;
 export default AnswerChoices;

package/dist/widgets/label-image/answer-choices.js.flow

@@ -12,5 +12,5 @@ declare type AnswerChoicesProps = {|
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-declare var AnswerChoices: React.StatelessFunctionalComponent<AnswerChoicesProps>;
+declare var AnswerChoices: (x: AnswerChoicesProps) => React.Element<any>;
 declare export default typeof AnswerChoices;

package/dist/widgets/label-image/behavior.d.ts

@@ -2,7 +2,7 @@
  * Controlled component to display and change widget options.
  */
 import * as React from "react";
-type BehaviorProps = {
+type Props = {
     multipleAnswers: boolean;
     hideChoicesFromInstructions: boolean;
     onChange: (options: {
@@ -10,5 +10,5 @@ type BehaviorProps = {
         hideChoicesFromInstructions?: boolean;
     }) => void;
 };
-declare const Behavior: React.FC<BehaviorProps>;
+declare const Behavior: ({ multipleAnswers, hideChoicesFromInstructions, onChange, }: Props) => React.ReactElement;
 export default Behavior;

package/dist/widgets/label-image/behavior.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import * as React from "react";
-declare type BehaviorProps = {|
+declare type Props = {|
   multipleAnswers: boolean,
   hideChoicesFromInstructions: boolean,
   onChange: (options: {|
@@ -13,5 +13,5 @@ declare type BehaviorProps = {|
     hideChoicesFromInstructions?: boolean,
   |}) => void,
 |};
-declare var Behavior: React.StatelessFunctionalComponent<BehaviorProps>;
+declare var Behavior: (x: Props) => React.Element<any>;
 declare export default typeof Behavior;

package/dist/widgets/label-image/marker.d.ts

@@ -6,19 +6,19 @@
  */
 import * as React from "react";
 import type { MarkerType } from "@khanacademy/perseus";
-type MarkerProps = MarkerType & {
+type Props = MarkerType & {
     choices: ReadonlyArray<string>;
     onChange: (marker: MarkerType) => void;
     onRemove: () => void;
 };
-type MarkerState = {
+type State = {
     showDropdown: boolean;
 };
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     _marker: HTMLElement | null | undefined;
-    constructor(props: MarkerProps);
+    constructor(props: Props);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: MarkerProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentWillUnmount(): void;
     openDropdown(): void;
     updateMarker(props: any): void;

package/dist/widgets/label-image/marker.js.flow

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type MarkerProps = {|
+declare type Props = {|
   ...MarkerType,
   ...{|
     choices: $ReadOnlyArray<string>,
@@ -14,16 +14,14 @@ declare type MarkerProps = {|
     onRemove: () => void,
   |},
 |};
-declare type MarkerState = {|
+declare type State = {|
   showDropdown: boolean,
 |};
-declare export default class Marker
-  extends React.Component<MarkerProps, MarkerState>
-{
+declare export default class Marker extends React.Component<Props, State> {
   _marker: HTMLElement | null | void;
-  constructor(props: MarkerProps): this;
+  constructor(props: Props): this;
   componentDidMount(): void;
-  UNSAFE_componentWillReceiveProps(nextProps: MarkerProps): void;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
   componentWillUnmount(): void;
   openDropdown(): void;
   updateMarker(props: any): void;

package/dist/widgets/label-image/question-markers.d.ts

@@ -5,7 +5,7 @@
 import * as React from "react";
 import Marker from "./marker";
 import type { MarkerType } from "@khanacademy/perseus";
-type QuestionMarkersProps = {
+type Props = {
     choices: ReadonlyArray<string>;
     imageUrl: string;
     imageWidth: number;
@@ -13,7 +13,7 @@ type QuestionMarkersProps = {
     markers: ReadonlyArray<MarkerType>;
     onChange: (markers: ReadonlyArray<MarkerType>) => void;
 };
-export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
+export default class QuestionMarkers extends React.Component<Props> {
     _markers: Array<Marker | null | undefined>;
     openDropdownForMarkerIndices(indices: ReadonlyArray<number>): void;
     handleImageDoubleClick: (e: React.MouseEvent) => void;

package/dist/widgets/label-image/question-markers.js.flow

@@ -7,7 +7,7 @@
 import * as React from "react";
 import Marker from "./marker";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type QuestionMarkersProps = {|
+declare type Props = {|
   choices: $ReadOnlyArray<string>,
   imageUrl: string,
   imageWidth: number,
@@ -15,9 +15,7 @@ declare type QuestionMarkersProps = {|
   markers: $ReadOnlyArray<MarkerType>,
   onChange: (markers: $ReadOnlyArray<MarkerType>) => void,
 |};
-declare export default class QuestionMarkers
-  extends React.Component<QuestionMarkersProps>
-{
+declare export default class QuestionMarkers extends React.Component<Props> {
   _markers: Array<Marker | null | void>;
   openDropdownForMarkerIndices(indices: $ReadOnlyArray<number>): void;
   handleImageDoubleClick: (e: SyntheticMouseEvent<>) => void;

package/dist/widgets/label-image/select-image.d.ts

@@ -2,9 +2,9 @@
  * Controlled component for selecting the question image, for answer labeling.
  */
 import * as React from "react";
-type SelectImageProps = {
+type Props = {
     onChange: (url: string) => void;
     url: string;
 };
-declare const SelectImage: React.FC<SelectImageProps>;
+declare const SelectImage: ({ onChange, url }: Props) => React.ReactElement;
 export default SelectImage;

package/dist/widgets/label-image/select-image.js.flow

@@ -5,9 +5,9 @@
  * @flow
  */
 import * as React from "react";
-declare type SelectImageProps = {|
+declare type Props = {|
   onChange: (url: string) => void,
   url: string,
 |};
-declare var SelectImage: React.StatelessFunctionalComponent<SelectImageProps>;
+declare var SelectImage: (x: Props) => React.Element<any>;
 declare export default typeof SelectImage;

package/dist/widgets/label-image-editor.d.ts

@@ -8,7 +8,7 @@
 import * as React from "react";
 import QuestionMarkers from "./label-image/question-markers";
 import type { MarkerType } from "@khanacademy/perseus";
-type LabelImageEditorProps = {
+type Props = {
     choices: ReadonlyArray<string>;
     imageAlt: string;
     imageUrl: string;
@@ -19,7 +19,7 @@ type LabelImageEditorProps = {
     hideChoicesFromInstructions: boolean;
     onChange: (options: any) => void;
 };
-declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+declare class LabelImageEditor extends React.Component<Props> {
     _questionMarkers: QuestionMarkers | null | undefined;
     static defaultProps: {
         choices: ReadonlyArray<any>;
@@ -32,7 +32,7 @@ declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
         multipleAnswers: boolean;
     };
     static widgetName: "label-image";
-    componentDidUpdate(prevProps: LabelImageEditorProps): void;
+    componentDidUpdate(prevProps: Props): void;
     getSaveWarnings: () => ReadonlyArray<any | string>;
     serialize(): any;
     handleImageChange: (url: string) => void;

package/dist/widgets/label-image-editor.js.flow

@@ -7,7 +7,7 @@
 import * as React from "react";
 import QuestionMarkers from "./label-image/question-markers";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type LabelImageEditorProps = {|
+declare type Props = {|
   choices: $ReadOnlyArray<string>,
   imageAlt: string,
   imageUrl: string,
@@ -18,7 +18,7 @@ declare type LabelImageEditorProps = {|
   hideChoicesFromInstructions: boolean,
   onChange: (options: any) => void,
 |};
-declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+declare class LabelImageEditor extends React.Component<Props> {
   _questionMarkers: QuestionMarkers | null | void;
   static defaultProps: {|
     choices: $ReadOnlyArray<any>,
@@ -31,7 +31,7 @@ declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
     multipleAnswers: boolean,
   |};
   static widgetName: "label-image";
-  componentDidUpdate(prevProps: LabelImageEditorProps): void;
+  componentDidUpdate(prevProps: Props): void;
   getSaveWarnings: () => $ReadOnlyArray<any | string>;
   serialize(): any;
   handleImageChange: (url: string) => void;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/perseus": "^4.0.2"
+        "@khanacademy/perseus": "^5.0.0"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.0.8",

package/src/__stories__/section-control-button.stories.tsx

@@ -13,9 +13,9 @@ export default {
     title: "Perseus Editor/Widgets/Section Control Button",
 } as Story;
 
-export const ButtonForEditingSectionsOfContentWithInArticleEditor: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const ButtonForEditingSectionsOfContentWithInArticleEditor = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <SectionControlButton
             icon={icons.iconTrash}

package/src/article-editor.tsx

@@ -44,7 +44,7 @@ type DefaultProps = {
     ) => React.ReactElement<React.ComponentProps<"span">>;
     useNewStyles: boolean;
 };
-type PerseusArticleEditorProps = DefaultProps & {
+type Props = DefaultProps & {
     apiOptions?: APIOptions;
     imageUploader?: (arg1: string, arg2: (arg1: string) => unknown) => unknown;
     // URL of the route to show on initial load of the preview frames.
@@ -54,10 +54,7 @@ type PerseusArticleEditorProps = DefaultProps & {
 type State = {
     highlightLint: boolean;
 };
-export default class ArticleEditor extends React.Component<
-    PerseusArticleEditorProps,
-    State
-> {
+export default class ArticleEditor extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
         contentPaths: [],
         json: [{}],

package/src/components/dropdown-option.tsx

@@ -31,7 +31,7 @@ const findAndFocusElement = (component?: Element | null) => {
     }
 };
 
-type OptionProps = {
+type Props = {
     // The value to use when the option is selected
     value: string;
     // The display of the option
@@ -65,7 +65,7 @@ const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10
 
 export const optionHeight = 30;
 
-class Option extends React.Component<OptionProps> {
+class Option extends React.Component<Props> {
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor.
     node: HTMLDivElement;
 

package/src/components/link.ts

@@ -24,7 +24,7 @@ type DefaultProps = {
     style: CSSProperties | Array<CSSProperties>;
 };
 
-type LinkProps = DefaultProps & {
+type Props = DefaultProps & {
     children?: React.ReactNode;
     // An additional class name to add. This is supported so-as to allow
     // Perseus to add class-based styles to links when using this
@@ -66,7 +66,7 @@ type LinkProps = DefaultProps & {
 /**
  * A wrapper that creates an anchor tag with normalized styles
  */
-class Link extends React.Component<LinkProps> {
+class Link extends React.Component<Props> {
     static defaultProps: DefaultProps = {
         highlighted: false,
         href: DEFAULT_HREF,

package/src/diffs/__stories__/perseus-diff-wrapper.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
 
-const Wrapper: React.FC<{
+type Props = {
     children: React.ReactNode;
-}> = ({children}): React.ReactElement => {
+};
+
+const Wrapper = ({children}: Props): React.ReactElement => {
     return <div className="perseus-diff">{children}</div>;
 };
 

package/src/diffs/__stories__/structured-item-diff.stories.tsx

@@ -33,7 +33,7 @@ const tags = {
     c: "c tag",
 } as const;
 
-export const ContentAdded: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ContentAdded = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -175,8 +175,8 @@ export const ContentAdded: React.FC<StoryArgs> = (args): React.ReactElement => {
 };
 
 // second instance
-export const ContentAddedRemovedAndChanged: React.FC<StoryArgs> = (
-    args,
+export const ContentAddedRemovedAndChanged = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const props = {
         before: {
@@ -383,9 +383,7 @@ export const ContentAddedRemovedAndChanged: React.FC<StoryArgs> = (
 };
 
 // third instance
-export const MiscContentChanges: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MiscContentChanges = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -681,9 +679,7 @@ export const MiscContentChanges: React.FC<StoryArgs> = (
 };
 
 // fourth
-export const ContentRemoved: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ContentRemoved = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {

package/src/diffs/__stories__/tags-diff.stories.tsx

@@ -24,7 +24,7 @@ export default {
     ],
 } as Story;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     return (
         <TagsDiff
             title="tags"

package/src/diffs/__stories__/text-diff.stories.tsx

@@ -24,7 +24,7 @@ export default {
     ],
 } as Story;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     return (
         <TextDiff
             title="A day in the life of a text diff"

package/src/editor.tsx

@@ -127,9 +127,7 @@ type WidgetEditorState = {
     widgetInfo: WidgetInfo;
 };
 
-const _upgradeWidgetInfo: React.FC<WidgetEditorProps> = (
-    props,
-): React.ReactElement => {
+const _upgradeWidgetInfo = (props: WidgetEditorProps): React.ReactElement => {
     // We can't call serialize here because this.refs.widget
     // doesn't exist before this component is mounted.
     const filteredProps = _.omit(props, WIDGET_PROP_DENYLIST);
@@ -368,7 +366,7 @@ const imageUrlsFromContent = function (content: string) {
     return _.map(allMatches(IMAGE_REGEX, content), (capture) => capture[1]);
 };
 
-type EditorProps = Readonly<{
+type Props = Readonly<{
     apiOptions: any;
     className?: string;
     content: string;
@@ -406,14 +404,14 @@ type DeafultProps = {
     };
 };
 
-type EditorState = {
+type State = {
     showKatexErrors: boolean;
     textAreaValue: string;
     katex?: katex;
 };
 
 // eslint-disable-next-line react/no-unsafe
-class Editor extends React.Component<EditorProps, EditorState> {
+class Editor extends React.Component<Props, State> {
     lastUserValue: string | null | undefined;
     deferredChange: any | null | undefined;
     widgetIds: any | null | undefined;
@@ -431,7 +429,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
         warnNoWidgets: false,
     };
 
-    state: EditorState = {
+    state: State = {
         katex: undefined,
         showKatexErrors: false,
         textAreaValue: this.props.content,
@@ -463,13 +461,13 @@ class Editor extends React.Component<EditorProps, EditorState> {
     }
 
     // TODO(arun): This is a deprecated method, use the appropriate replacement
-    UNSAFE_componentWillReceiveProps(nextProps: EditorProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (this.props.content !== nextProps.content) {
             this.setState({textAreaValue: nextProps.content});
         }
     }
 
-    componentDidUpdate(prevProps: EditorProps) {
+    componentDidUpdate(prevProps: Props) {
         // TODO(alpert): Maybe fix React so this isn't necessary
         // eslint-disable-next-line react/no-string-refs
         const textarea = ReactDOM.findDOMNode(this.refs.textarea);
@@ -574,7 +572,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
      * Calculate the size of all the images in props.content, and send
      * those sizes to this.props.images using props.onChange.
      */
-    _sizeImages: (props: EditorProps) => void = (props: EditorProps) => {
+    _sizeImages: (props: Props) => void = (props: Props) => {
         const imageUrls = imageUrlsFromContent(props.content);
 
         // Discard any images in our dimension table that no

package/src/multirenderer-editor.tsx

@@ -141,13 +141,9 @@ type HeaderProps = {
     depth: number;
 };
 
-const Header: React.FC<HeaderProps> = ({
-    depth,
-    ...props
-}): React.ReactElement => {
+const Header = ({depth, ...props}: HeaderProps): React.ReactElement => {
     const headerLevel = Math.min(depth, 5) + 1;
     const HeaderTag = `h${headerLevel}`;
-    // @ts-expect-error [FEI-5003] - TS2559 - Type '{ children?: ReactNode; }' has no properties in common with type 'IntrinsicAttributes'.
     return <HeaderTag {...props} />;
 };
 
@@ -268,13 +264,13 @@ type LeafContainerProps = {
     path: Path;
     shape: Shape;
 };
-const LeafContainer: React.FC<LeafContainerProps> = ({
+const LeafContainer = ({
     name,
     controls,
     children,
     path,
     shape,
-}): React.ReactElement => {
+}: LeafContainerProps): React.ReactElement => {
     const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
     const previewHeading = hasPreviewHeading && (
         <div className={css(styles.containerHeader)}>
@@ -314,9 +310,7 @@ type ArrayContainerProps = {
     shape: ArrayShape;
     actions: ArrayContainerActions;
 };
-const ArrayContainer: React.FC<ArrayContainerProps> = (
-    props,
-): React.ReactElement => {
+const ArrayContainer = (props: ArrayContainerProps): React.ReactElement => {
     const {name, controls, children, path, shape, actions} = props;
     return (
         <div className={css(styles.container)}>
@@ -347,12 +341,12 @@ type ObjectContainerProps = {
     children?: React.ReactNode;
     path: Path;
 };
-const ObjectContainer: React.FC<ObjectContainerProps> = ({
+const ObjectContainer = ({
     name,
     controls,
     children,
     path,
-}): React.ReactElement => {
+}: ObjectContainerProps): React.ReactElement => {
     const headingEditor = (
         <div className={css(styles.containerHeader)}>
             {/* @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}

package/src/widgets/__stories__/label-image-editor.stories.tsx

@@ -93,6 +93,6 @@ class WithState extends React.Component<Empty, State> {
     }
 }
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/__stories__/radio-editor.stories.tsx

@@ -110,6 +110,6 @@ class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
     }
 }
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/label-image/__stories__/answer-choices.stories.tsx

@@ -57,16 +57,12 @@ class WithState extends React.Component<
     }
 }
 
-export const EmptyNonInteractive: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyNonInteractive = (args: StoryArgs): React.ReactElement => {
     const props = {choices: [], onChange: (...args) => {}} as const;
     return <Wrapper {...props} />;
 };
 
-export const FilledNonInteractive: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const FilledNonInteractive = (args: StoryArgs): React.ReactElement => {
     const props = {
         choices: [
             "Lamborghini",
@@ -81,6 +77,6 @@ export const FilledNonInteractive: React.FC<StoryArgs> = (
     return <Wrapper {...props} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/label-image/__stories__/behavior.stories.tsx

@@ -13,7 +13,7 @@ export default {
     title: "Perseus/Editor/Widgets/Label Image/Behavior",
 } as Story;
 
-export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Default = (args: StoryArgs): React.ReactElement => {
     const [state, setState] = React.useState({
         multipleAnswers: false,
         hideChoicesFromInstructions: false,

package/src/widgets/label-image/__stories__/marker.stories.tsx

@@ -33,7 +33,7 @@ const Wrapper = (props) => (
     </div>
 );
 
-export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Empty = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: [],
         choices: [],
@@ -50,7 +50,7 @@ export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <Wrapper {...props} />;
 };
 
-export const WithAnswers: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const WithAnswers = (args: StoryArgs): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         choices: [