Fix StoryBook Story imports (#1090)

src/components/Accordion/Accordion.stories.tsx

@@ -16,7 +16,7 @@
 
 import React from "react";
 import { useState } from "@storybook/client-api";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import Accordion from "./";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Accordion>;
 
-const Template: Story<AccordionProps> = ({
+const Template: StoryFn<AccordionProps> = ({
   title,
   children,
   disabled,

src/components/ApplicationLogo/ApplicationLogo.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import ApplicationLogo from "./";
 import { ApplicationLogoProps } from "./ApplicationLogo.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ApplicationLogo>;
 
-const Template: Story<ApplicationLogoProps> = (args) => (
+const Template: StoryFn<ApplicationLogoProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <div style={{ maxWidth: "200px" }}>

src/components/Autocomplete/Autocomplete.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import Autocomplete from "./";
@@ -34,7 +34,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Autocomplete>;
 
-const Template: Story<AutocompleteProps> = ({
+const Template: StoryFn<AutocompleteProps> = ({
   label,
   required,
   tooltip,

src/components/BackLink/BackLink.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import BackLink from "./";
 import { BackLinkProps } from "./BackLink.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof BackLink>;
 
-const Template: Story<BackLinkProps> = (args) => (
+const Template: StoryFn<BackLinkProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <BackLink {...args} onClick={() => alert("You clicked me!")} />

src/components/Badge/Badge.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import Badge from "./";
@@ -30,7 +30,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Badge>;
 
-const Template: Story<BadgeProps> = ({ label, id, sx, color }) => {
+const Template: StoryFn<BadgeProps> = ({ label, id, sx, color }) => {
   return (
     <StoryThemeProvider>
       <GlobalStyles />

src/components/Box/Box.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useRef } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Box from "./";
 import { BoxProps } from "./Box.types";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Box>;
 
-const Template: Story<BoxProps> = (args) => {
+const Template: StoryFn<BoxProps> = (args) => {
   const reference = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {

src/components/BoxedIcon/BoxedIcon.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useRef } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import BoxedIcon from "./";
 import { IBoxedIconProps } from "./BoxedIcon.types";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof BoxedIcon>;
 
-const Template: Story<IBoxedIconProps> = (args) => {
+const Template: StoryFn<IBoxedIconProps> = (args) => {
   return (
     <StoryThemeProvider>
       <GlobalStyles />

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { BreadcrumbsOption, BreadcrumbsProps } from "./Breadcrumbs.types";
 import Breadcrumbs from "./";
@@ -31,7 +31,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Breadcrumbs>;
 
-const Template: Story<BreadcrumbsProps> = (args) => (
+const Template: StoryFn<BreadcrumbsProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <Breadcrumbs {...args} />

src/components/Button/Button.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ButtonProps } from "./Button.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Button>;
 
-const Template: Story<ButtonProps> = (args) => (
+const Template: StoryFn<ButtonProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <Button {...args} onClick={() => alert("You clicked me!")} />

src/components/Button/Button.uikit.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Button from "./";
 import { ButtonProps } from "./Button.types";
@@ -38,7 +38,7 @@ export default {
   },
 } as Meta<typeof Button>;
 
-const Template: Story<ButtonProps> = (args) => (
+const Template: StoryFn<ButtonProps> = (args) => (
   <StoryThemeProvider>
     <Box
       sx={{

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ButtonGroupProps } from "./ButtonGroup.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -37,7 +37,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ButtonGroup>;
 
-const Template: Story<ButtonGroupProps> = (args) => (
+const Template: StoryFn<ButtonGroupProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <ButtonGroup {...args}>

src/components/Checkbox/Checkbox.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import Checkbox from "./";
 import { CheckboxProps } from "./Checkbox.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof Checkbox>;
 
-const Template: Story<CheckboxProps> = (args) => (
+const Template: StoryFn<CheckboxProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <Checkbox {...args} />

src/components/CodeEditor/CodeEditor.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import { CodeEditorProps } from "./CodeEditor.types";
@@ -30,7 +30,7 @@ export default {
   argTypes: {},
 } as Meta<typeof CodeEditor>;
 
-const Template: Story<CodeEditorProps> = (args) => (
+const Template: StoryFn<CodeEditorProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <CodeEditor {...args} />

src/components/CodeSnippet/CodeSnippet.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import TestIcon from "../../utils/TestIcon";
@@ -31,7 +31,7 @@ export default {
   argTypes: {},
 } as Meta<typeof CodeSnippet>;
 
-const Template: Story<CodeSnippetProps> = (args) => (
+const Template: StoryFn<CodeSnippetProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <CodeSnippet {...args}>

src/components/DataTable/DataTable.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import DataTable from "./";
 import { DataTableProps } from "./DataTable.types";
@@ -40,7 +40,7 @@ export default {
   argTypes: {},
 } as Meta;
 
-const Template: Story<DataTableProps<RecordType>> = (args) => {
+const Template: StoryFn<DataTableProps<RecordType>> = (args) => {
   const [selected, setSelected] = useState<Array<keyof RecordType | string[]>>(
     [],
   );

src/components/DateTimeInput/DateTimeInput.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useEffect, useState } from "@storybook/addons";
 import { DateTime } from "luxon";
 
@@ -32,7 +32,7 @@ export default {
   argTypes: {},
 } as Meta<typeof DateTimeInput>;
 
-const Template: Story<DateTimeInputProps> = ({
+const Template: StoryFn<DateTimeInputProps> = ({
   mode,
   usePortal,
   maxDate,

src/components/DateTimeInput/DateTimeSelector.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { DateTime } from "luxon";
 
 import { DateTimeSelectorProps } from "./DateTimeInput.types";
@@ -28,7 +28,7 @@ export default {
   argTypes: {},
 } as Meta<typeof DateTimeSelector>;
 
-const Template: Story<DateTimeSelectorProps> = ({
+const Template: StoryFn<DateTimeSelectorProps> = ({
   mode,
   id,
   usePortal,

src/components/DropdownSelector/DropdownSelector.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import DropdownSelector from "./";
@@ -31,7 +31,7 @@ export default {
   argTypes: {},
 } as Meta<typeof DropdownSelector>;
 
-const Template: Story<DropdownSelectorProps> = (args) => {
+const Template: StoryFn<DropdownSelectorProps> = (args) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const openDownloadMenu = Boolean(anchorEl);
 

src/components/ExpandMenu/ExpandMenu.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { ExpandMenuProps } from "./ExpandMenu.types";
 import ExpandMenuOption from "./ExpandMenuOption";
@@ -36,7 +36,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ExpandMenu>;
 
-const Template: Story<ExpandMenuProps> = (args) => {
+const Template: StoryFn<ExpandMenuProps> = (args) => {
   const [open, setOpen] = useState<boolean>(false);
 
   const extraArgs = {

src/components/ExpandOptionsButton/ExpandOptionsButton.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import ExpandOptionsButton from "./";
@@ -30,7 +30,7 @@ export default {
   argTypes: {},
 } as Meta<typeof ExpandOptionsButton>;
 
-const Template: Story<ExpandOptionsButtonProps> = (args) => {
+const Template: StoryFn<ExpandOptionsButtonProps> = (args) => {
   const [open, setOpen] = useState<boolean>(false);
 
   const extraArgs = {

src/components/FileSelector/FileSelector.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "@storybook/addons";
 
 import FileSelector from "./";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof FileSelector>;
 
-const Template: Story<FileSelectorProps> = ({
+const Template: StoryFn<FileSelectorProps> = ({
   label,
   required,
   disabled,

src/components/FormActionsTray/FormActionsTray.stories.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { FormActionsTrayProps } from "./FormActionsTray.types";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
@@ -29,7 +29,7 @@ export default {
   argTypes: {},
 } as Meta<typeof FormActionsTray>;
 
-const Template: Story<FormActionsTrayProps> = (args) => (
+const Template: StoryFn<FormActionsTrayProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <FormActionsTray {...args}>