Upgrade Storybook

Co-authored-by: Scott Nonnenberg <scott@signal.org>

ts/components/installScreen/InstallScreenQrCodeNotScannedStep.stories.tsx

@@ -3,13 +3,13 @@
 
 import React, { useEffect, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-
+import type { Meta, StoryFn } from '@storybook/react';
 import { setupI18n } from '../../util/setupI18n';
 import { DialogType } from '../../types/Dialogs';
 import enMessages from '../../../_locales/en/messages.json';
-
 import type { Loadable } from '../../util/loadable';
 import { LoadingState } from '../../util/loadable';
+import type { PropsType } from './InstallScreenQrCodeNotScannedStep';
 import { InstallScreenQrCodeNotScannedStep } from './InstallScreenQrCodeNotScannedStep';
 
 const i18n = setupI18n('en', enMessages);
@@ -32,7 +32,7 @@ const DEFAULT_UPDATES = {
 export default {
   title: 'Components/InstallScreen/InstallScreenQrCodeNotScannedStep',
   argTypes: {},
-};
+} satisfies Meta<PropsType>;
 
 function Simulation({ finalResult }: { finalResult: Loadable<string> }) {
   const [provisioningUrl, setProvisioningUrl] = useState<Loadable<string>>({
@@ -77,10 +77,6 @@ export function QrCodeLoading(): JSX.Element {
   );
 }
 
-QrCodeLoading.story = {
-  name: 'QR code loading',
-};
-
 export function QrCodeFailedToLoad(): JSX.Element {
   return (
     <InstallScreenQrCodeNotScannedStep
@@ -98,10 +94,6 @@ export function QrCodeFailedToLoad(): JSX.Element {
   );
 }
 
-QrCodeFailedToLoad.story = {
-  name: 'QR code failed to load',
-};
-
 export function QrCodeLoaded(): JSX.Element {
   return (
     <InstallScreenQrCodeNotScannedStep
@@ -116,18 +108,10 @@ export function QrCodeLoaded(): JSX.Element {
   );
 }
 
-QrCodeLoaded.story = {
-  name: 'QR code loaded',
-};
-
 export function SimulatedLoading(): JSX.Element {
   return <Simulation finalResult={LOADED_URL} />;
 }
 
-SimulatedLoading.story = {
-  name: 'Simulated loading',
-};
-
 export function SimulatedFailure(): JSX.Element {
   return (
     <Simulation
@@ -139,46 +123,43 @@ export function SimulatedFailure(): JSX.Element {
   );
 }
 
-SimulatedFailure.story = {
-  name: 'Simulated failure',
-};
+export const WithUpdateKnobs: StoryFn<PropsType & { dialogType: DialogType }> =
+  // eslint-disable-next-line react/function-component-definition
+  function WithUpdateKnobs({
+    dialogType,
+    currentVersion,
+  }: {
+    dialogType: DialogType;
+    currentVersion: string;
+  }): JSX.Element {
+    return (
+      <InstallScreenQrCodeNotScannedStep
+        i18n={i18n}
+        provisioningUrl={LOADED_URL}
+        hasExpired
+        updates={{
+          ...DEFAULT_UPDATES,
+          dialogType,
+        }}
+        OS="macOS"
+        startUpdate={action('startUpdate')}
+        currentVersion={currentVersion}
+        retryGetQrCode={action('retryGetQrCode')}
+      />
+    );
+  };
 
-export function WithUpdateKnobs({
-  dialogType,
-  currentVersion,
-}: {
-  dialogType: DialogType;
-  currentVersion: string;
-}): JSX.Element {
-  return (
-    <InstallScreenQrCodeNotScannedStep
-      i18n={i18n}
-      provisioningUrl={LOADED_URL}
-      hasExpired
-      updates={{
-        ...DEFAULT_UPDATES,
-        dialogType,
-      }}
-      OS="macOS"
-      startUpdate={action('startUpdate')}
-      currentVersion={currentVersion}
-      retryGetQrCode={action('retryGetQrCode')}
-    />
-  );
-}
-
-WithUpdateKnobs.story = {
-  name: 'With Update Knobs',
-  argTypes: {
-    dialogType: {
-      control: { type: 'select' },
-      defaultValue: DialogType.AutoUpdate,
-      options: Object.values(DialogType),
-    },
-    currentVersion: {
-      control: { type: 'select' },
-      defaultValue: 'v6.0.0',
-      options: ['v6.0.0', 'v6.1.0-beta.1'],
-    },
+WithUpdateKnobs.argTypes = {
+  dialogType: {
+    control: { type: 'select' },
+    options: Object.values(DialogType),
+  },
+  currentVersion: {
+    control: { type: 'select' },
+    options: ['v6.0.0', 'v6.1.0-beta.1'],
   },
 };
+WithUpdateKnobs.args = {
+  dialogType: DialogType.AutoUpdate,
+  currentVersion: 'v6.0.0',
+};