fix storybook inferred default export types (#57785)

Fixes `tsc --build` errors of the form:

```
error TS2742: The inferred type of 'default' cannot be named without a reference to '.pnpm/@storybook+types@7.4.6/node_modules/@storybook/types'. This is likely not portable. A type annotation is necessary.
```

client/web/src/enterprise/batches/detail/BatchChangeDetailsPage.story.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from '@storybook/addons'
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type { Decorator, Meta, StoryFn, StoryObj } from '@storybook/react'
 import { subDays } from 'date-fns'
 import { of } from 'rxjs'
 import { MATCH_ANY_PARAMETERS, WildcardMockLink } from 'wildcard-mock-link'
@@ -32,7 +32,7 @@ import {
 import { CHANGESET_COUNTS_OVER_TIME_MOCK } from './testdata'
 
 const decorator: Decorator = story => <div className="p-3 container">{story()}</div>
-const config: Meta = {
+const config: Meta<Args> = {
     title: 'web/batches/details/BatchChangeDetailsPage',
     decorators: [decorator],
     parameters: {
@@ -86,13 +86,15 @@ const queryEmptyExternalChangesetWithFileDiffs: typeof queryExternalChangesetWit
 
 const deleteBatchChange = () => Promise.resolve(undefined)
 
-const Template: StoryFn<{
+interface Args {
     url: string
     supersedingBatchSpec?: boolean
     currentBatchSpec?: BatchChangeFields['currentSpec']
     viewerCanAdminister: boolean
     isClosed?: boolean
-}> = ({ url, supersedingBatchSpec, currentBatchSpec, viewerCanAdminister, isClosed }) => {
+}
+
+const Template: StoryFn<Args> = ({ url, supersedingBatchSpec, currentBatchSpec, viewerCanAdminister, isClosed }) => {
     const batchChange: BatchChangeFields = useMemo(() => {
         const currentSpec = currentBatchSpec ?? MOCK_BATCH_CHANGE.currentSpec
 
@@ -162,20 +164,22 @@ const Template: StoryFn<{
     )
 }
 
-export const Overview = Template.bind({})
+type Story = StoryObj<typeof config>
+
+export const Overview: Story = Template.bind({})
 Overview.args = { url: '/users/alice/batch-changes/awesome-batch-change', supersedingBatchSpec: false }
 Overview.argTypes = {
     supersedingBatchSpec: {},
 }
 
-export const BurndownChart = Template.bind({})
+export const BurndownChart: Story = Template.bind({})
 BurndownChart.args = { url: '/users/alice/batch-changes/awesome-batch-change?tab=chart', supersedingBatchSpec: false }
 BurndownChart.storyName = 'Burndown chart'
 BurndownChart.argTypes = {
     supersedingBatchSpec: {},
 }
 
-export const SpecFile = Template.bind({})
+export const SpecFile: Story = Template.bind({})
 SpecFile.args = {
     url: '/users/alice/batch-changes/awesome-batch-change?tab=spec',
     supersedingBatchSpec: false,
@@ -187,13 +191,13 @@ SpecFile.argTypes = {
     viewerCanAdminister: {},
 }
 
-export const Archived = Template.bind({})
+export const Archived: Story = Template.bind({})
 Archived.args = { url: '/users/alice/batch-changes/awesome-batch-change?tab=archived', supersedingBatchSpec: false }
 Archived.argTypes = {
     supersedingBatchSpec: {},
 }
 
-export const BulkOperations = Template.bind({})
+export const BulkOperations: Story = Template.bind({})
 BulkOperations.args = {
     url: '/users/alice/batch-changes/awesome-batch-change?tab=bulkoperations',
     supersedingBatchSpec: false,
@@ -203,14 +207,14 @@ BulkOperations.argTypes = {
     supersedingBatchSpec: {},
 }
 
-export const SupersededBatchSpec = Template.bind({})
+export const SupersededBatchSpec: Story = Template.bind({})
 SupersededBatchSpec.args = { url: '/users/alice/batch-changes/awesome-batch-change', supersedingBatchSpec: true }
 SupersededBatchSpec.storyName = 'Superseded batch-spec'
 SupersededBatchSpec.argTypes = {
     supersedingBatchSpec: {},
 }
 
-export const UnpublishableBatchSpec = Template.bind({})
+export const UnpublishableBatchSpec: Story = Template.bind({})
 UnpublishableBatchSpec.args = {
     url: '/users/alice/batch-changes/awesome-batch-change',
     supersedingBatchSpec: true,

client/web/src/enterprise/batches/detail/changesets/ChangesetCheckStatusCell.story.tsx

@@ -1,4 +1,4 @@
-import type { Decorator, Meta, StoryFn } from '@storybook/react'
+import type { Decorator, Meta, StoryFn, StoryObj } from '@storybook/react'
 
 import { WebStory } from '../../../../components/WebStory'
 import { ChangesetCheckState } from '../../../../graphql-operations'
@@ -7,7 +7,7 @@ import { ChangesetCheckStatusCell } from './ChangesetCheckStatusCell'
 
 const decorator: Decorator = story => <div className="p-3 container">{story()}</div>
 
-const config: Meta = {
+const config: Meta<typeof ChangesetCheckStatusCell> = {
     title: 'web/batches/ChangesetCheckStatusCell',
     decorators: [decorator],
 }
@@ -18,11 +18,13 @@ const Template: StoryFn<{ checkState: ChangesetCheckState }> = ({ checkState })
     <WebStory>{props => <ChangesetCheckStatusCell {...props} checkState={checkState} />}</WebStory>
 )
 
-export const Pending = Template.bind({})
+type Story = StoryObj<typeof config>
+
+export const Pending: Story = Template.bind({})
 Pending.args = { checkState: ChangesetCheckState.PENDING }
 
-export const Passed = Template.bind({})
+export const Passed: Story = Template.bind({})
 Passed.args = { checkState: ChangesetCheckState.PASSED }
 
-export const Failed = Template.bind({})
+export const Failed: Story = Template.bind({})
 Failed.args = { checkState: ChangesetCheckState.FAILED }

client/web/src/enterprise/batches/detail/changesets/ChangesetReviewStatusCell.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, Decorator, StoryFn } from '@storybook/react'
+import type { Meta, Decorator, StoryFn, StoryObj } from '@storybook/react'
 
 import { WebStory } from '../../../../components/WebStory'
 import { ChangesetReviewState } from '../../../../graphql-operations'
@@ -7,7 +7,7 @@ import { ChangesetReviewStatusCell } from './ChangesetReviewStatusCell'
 
 const decorator: Decorator = story => <div className="p-3 container">{story()}</div>
 
-const config: Meta = {
+const config: Meta<typeof ChangesetReviewStatusCell> = {
     title: 'web/batches/ChangesetReviewStatusCell',
     decorators: [decorator],
 }
@@ -18,18 +18,20 @@ const Template: StoryFn<{ reviewState: ChangesetReviewState }> = ({ reviewState
     <WebStory>{props => <ChangesetReviewStatusCell {...props} reviewState={reviewState} />}</WebStory>
 )
 
-export const Approved = Template.bind({})
+type Story = StoryObj<typeof config>
+
+export const Approved: Story = Template.bind({})
 Approved.args = { reviewState: ChangesetReviewState.APPROVED }
 
-export const ChangesRequested = Template.bind({})
+export const ChangesRequested: Story = Template.bind({})
 ChangesRequested.args = { reviewState: ChangesetReviewState.CHANGES_REQUESTED }
 ChangesRequested.storyName = 'Changes_requested'
 
-export const Commented = Template.bind({})
+export const Commented: Story = Template.bind({})
 Commented.args = { reviewState: ChangesetReviewState.COMMENTED }
 
-export const Pending = Template.bind({})
+export const Pending: Story = Template.bind({})
 Pending.args = { reviewState: ChangesetReviewState.PENDING }
 
-export const Dismissed = Template.bind({})
+export const Dismissed: Story = Template.bind({})
 Dismissed.args = { reviewState: ChangesetReviewState.DISMISSED }

client/web/src/enterprise/batches/detail/changesets/ChangesetStatusCell.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, Decorator, StoryFn } from '@storybook/react'
+import type { Meta, Decorator, StoryFn, StoryObj } from '@storybook/react'
 
 import { WebStory } from '../../../../components/WebStory'
 import { ChangesetState } from '../../../../graphql-operations'
@@ -6,7 +6,7 @@ import { ChangesetState } from '../../../../graphql-operations'
 import { ChangesetStatusCell } from './ChangesetStatusCell'
 
 const decorator: Decorator = story => <div className="p-3 container">{story()}</div>
-const config: Meta = {
+const config: Meta<typeof ChangesetStatusCell> = {
     title: 'web/batches/ChangesetStatusCell',
     decorators: [decorator],
 }
@@ -17,32 +17,34 @@ const Template: StoryFn<{ state: ChangesetState }> = ({ state }) => (
     <WebStory>{() => <ChangesetStatusCell state={state} className="d-flex text-muted" />}</WebStory>
 )
 
-export const Unpublished = Template.bind({})
+type Story = StoryObj<typeof config>
+
+export const Unpublished: Story = Template.bind({})
 Unpublished.args = { state: ChangesetState.UNPUBLISHED }
 
-export const Failed = Template.bind({})
+export const Failed: Story = Template.bind({})
 Failed.args = { state: ChangesetState.FAILED }
 
-export const Retrying = Template.bind({})
+export const Retrying: Story = Template.bind({})
 Retrying.args = { state: ChangesetState.RETRYING }
 
-export const Scheduled = Template.bind({})
+export const Scheduled: Story = Template.bind({})
 Scheduled.args = { state: ChangesetState.SCHEDULED }
 
-export const Processing = Template.bind({})
+export const Processing: Story = Template.bind({})
 Processing.args = { state: ChangesetState.PROCESSING }
 
-export const Open = Template.bind({})
+export const Open: Story = Template.bind({})
 Open.args = { state: ChangesetState.OPEN }
 
-export const Draft = Template.bind({})
+export const Draft: Story = Template.bind({})
 Draft.args = { state: ChangesetState.DRAFT }
 
-export const Closed = Template.bind({})
+export const Closed: Story = Template.bind({})
 Closed.args = { state: ChangesetState.CLOSED }
 
-export const Merged = Template.bind({})
+export const Merged: Story = Template.bind({})
 Merged.args = { state: ChangesetState.MERGED }
 
-export const Deleted = Template.bind({})
+export const Deleted: Story = Template.bind({})
 Deleted.args = { state: ChangesetState.DELETED }

client/web/src/enterprise/batches/list/BatchChangeNode.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, Decorator, StoryFn } from '@storybook/react'
+import type { Meta, Decorator, StoryFn, StoryObj } from '@storybook/react'
 import classNames from 'classnames'
 import { subDays } from 'date-fns'
 
@@ -49,18 +49,21 @@ const Template: StoryFn /* <{ node: ListBatchChange }>*/ = ({ node, ...args }) =
         )}
     </WebStory>
 )
-export const OpenBatchChange = Template.bind({})
+
+type Story = StoryObj<typeof config>
+
+export const OpenBatchChange: Story = Template.bind({})
 OpenBatchChange.args = { node: nodes['Open batch change'] }
 OpenBatchChange.storyName = 'Open batch change'
 
-export const FailedDraft = Template.bind({})
+export const FailedDraft: Story = Template.bind({})
 FailedDraft.args = { node: nodes['Failed draft'] }
 FailedDraft.storyName = 'Failed draft'
 
-export const NoDescription = Template.bind({})
+export const NoDescription: Story = Template.bind({})
 NoDescription.args = { node: nodes['No description'] }
 NoDescription.storyName = 'No description'
 
-export const ClosedBatchChange = Template.bind({})
+export const ClosedBatchChange: Story = Template.bind({})
 ClosedBatchChange.args = { node: nodes['Closed batch change'] }
 ClosedBatchChange.storyName = 'Closed batch change'

client/web/src/enterprise/batches/list/BatchChangesListIntro.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, Decorator, StoryFn } from '@storybook/react'
+import type { Meta, Decorator, StoryFn, StoryObj } from '@storybook/react'
 
 import { WebStory } from '../../../components/WebStory'
 
@@ -46,19 +46,21 @@ const Template: StoryFn = ({ state, ...args }) => (
     </WebStory>
 )
 
-export const Licensed = Template.bind({})
+type Story = StoryObj<typeof config>
+
+export const Licensed: Story = Template.bind({})
 Licensed.args = { state: LicensingState.Licensed }
 Licensed.argTypes = {
     licensed: {},
 }
 
-export const Unlicensed = Template.bind({})
+export const Unlicensed: Story = Template.bind({})
 Unlicensed.args = { state: LicensingState.Unlicensed }
 Unlicensed.argTypes = {
     licensed: {},
 }
 
-export const Loading = Template.bind({})
+export const Loading: Story = Template.bind({})
 Loading.args = { state: LicensingState.Loading }
 Loading.argTypes = {
     licensed: {},

client/web/src/enterprise/batches/preview/list/HiddenChangesetApplyPreviewNode.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, Decorator, StoryFn } from '@storybook/react'
+import type { Meta, Decorator, StoryFn, StoryObj } from '@storybook/react'
 import classNames from 'classnames'
 
 import { WebStory } from '../../../../components/WebStory'
@@ -12,7 +12,7 @@ import styles from './PreviewList.module.scss'
 const decorator: Decorator = story => (
     <div className={classNames(styles.previewListGrid, 'p-3 container')}>{story()}</div>
 )
-const config: Meta = {
+const config: Meta<typeof HiddenChangesetApplyPreviewNode> = {
     title: 'web/batches/preview/HiddenChangesetApplyPreviewNode',
     decorators: [decorator],
 }
@@ -23,13 +23,15 @@ const Template: StoryFn<{ node: HiddenChangesetApplyPreviewFields }> = ({ node }
     <WebStory>{props => <HiddenChangesetApplyPreviewNode {...props} node={node} />}</WebStory>
 )
 
-export const ImportChangeset = Template.bind({})
+type Story = StoryObj<typeof config>
+
+export const ImportChangeset: Story = Template.bind({})
 ImportChangeset.args = {
     node: hiddenChangesetApplyPreviewStories['Import changeset'],
 }
 ImportChangeset.storyName = 'Import changeset'
 
-export const CreateChangeset = Template.bind({})
+export const CreateChangeset: Story = Template.bind({})
 CreateChangeset.args = {
     node: hiddenChangesetApplyPreviewStories['Create changeset'],
 }

client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.story.tsx

@@ -1,4 +1,4 @@
-import type { Meta, Decorator, StoryFn } from '@storybook/react'
+import type { Meta, Decorator, StoryFn, StoryObj } from '@storybook/react'
 import classNames from 'classnames'
 import { of } from 'rxjs'
 
@@ -14,7 +14,7 @@ const decorator: Decorator = story => (
     <div className={classNames(styles.previewListGrid, 'p-3 container')}>{story()}</div>
 )
 
-const config: Meta = {
+const config: Meta<typeof VisibleChangesetApplyPreviewNode> = {
     title: 'web/batches/preview/VisibleChangesetApplyPreviewNode',
     decorators: [decorator],
 }
@@ -43,66 +43,68 @@ const Template: StoryFn<{ node: VisibleChangesetApplyPreviewFields }> = ({ node
     </WebStory>
 )
 
-export const ImportChangeset = Template.bind({})
+type Story = StoryObj<typeof config>
+
+export const ImportChangeset: Story = Template.bind({})
 ImportChangeset.args = { node: stories['Import changeset'] }
 ImportChangeset.storyName = 'Import changeset'
 
-export const CreateChangesetPublished = Template.bind({})
+export const CreateChangesetPublished: Story = Template.bind({})
 CreateChangesetPublished.args = { node: stories['Create changeset published'] }
 CreateChangesetPublished.storyName = 'Create changeset published'
 
-export const CreateChangesetDraft = Template.bind({})
+export const CreateChangesetDraft: Story = Template.bind({})
 CreateChangesetDraft.args = { node: stories['Create changeset draft'] }
 CreateChangesetDraft.storyName = 'Create changeset draft'
 
-export const CreateChangesetNotPublished = Template.bind({})
+export const CreateChangesetNotPublished: Story = Template.bind({})
 CreateChangesetNotPublished.args = { node: stories['Create changeset not published'] }
 CreateChangesetNotPublished.storyName = 'Create changeset not published'
 
-export const UpdateChangesetTitle = Template.bind({})
+export const UpdateChangesetTitle: Story = Template.bind({})
 UpdateChangesetTitle.args = { node: stories['Update changeset title'] }
 UpdateChangesetTitle.storyName = 'Update changeset title'
 
-export const UpdateChangesetBody = Template.bind({})
+export const UpdateChangesetBody: Story = Template.bind({})
 UpdateChangesetBody.args = { node: stories['Update changeset body'] }
 UpdateChangesetBody.storyName = 'Update changeset body'
 
-export const UndraftChangeset = Template.bind({})
+export const UndraftChangeset: Story = Template.bind({})
 UndraftChangeset.args = { node: stories['Undraft changeset'] }
 UndraftChangeset.storyName = 'Undraft changeset'
 
-export const ReopenChangeset = Template.bind({})
+export const ReopenChangeset: Story = Template.bind({})
 ReopenChangeset.args = { node: stories['Reopen changeset'] }
 ReopenChangeset.storyName = 'Reopen changeset'
 
-export const ChangeDiff = Template.bind({})
+export const ChangeDiff: Story = Template.bind({})
 ChangeDiff.args = { node: stories['Change diff'] }
 ChangeDiff.storyName = 'Change diff'
 
-export const CloseChangeset = Template.bind({})
+export const CloseChangeset: Story = Template.bind({})
 CloseChangeset.args = { node: stories['Close changeset'] }
 CloseChangeset.storyName = 'Close changeset'
 
-export const DetachChangeset = Template.bind({})
+export const DetachChangeset: Story = Template.bind({})
 DetachChangeset.args = { node: stories['Detach changeset'] }
 DetachChangeset.storyName = 'Detach changeset'
 
-export const ChangeBaseRef = Template.bind({})
+export const ChangeBaseRef: Story = Template.bind({})
 ChangeBaseRef.args = { node: stories['Change base ref'] }
 ChangeBaseRef.storyName = 'Change base ref'
 
-export const UpdateCommitMessage = Template.bind({})
+export const UpdateCommitMessage: Story = Template.bind({})
 UpdateCommitMessage.args = { node: stories['Update commit message'] }
 UpdateCommitMessage.storyName = 'Update commit message'
 
-export const UpdateCommitAuthor = Template.bind({})
+export const UpdateCommitAuthor: Story = Template.bind({})
 UpdateCommitAuthor.args = { node: stories['Update commit author'] }
 UpdateCommitAuthor.storyName = 'Update commit author'
 
-export const ForkedRepo = Template.bind({})
+export const ForkedRepo: Story = Template.bind({})
 ForkedRepo.args = { node: stories['Forked repo'] }
 ForkedRepo.storyName = 'Forked repo'
 
-export const ReattachChangeset = Template.bind({})
+export const ReattachChangeset: Story = Template.bind({})
 ReattachChangeset.args = { node: stories['Reattach changeset'] }
 ReattachChangeset.storyName = 'Reattach Changeset'

client/web/src/enterprise/insights/components/form/field/Field.story.tsx

@@ -7,10 +7,12 @@ import { WebStory } from '../../../../../components/WebStory'
 
 import { Field, FocusContainer } from '.'
 
-export default {
+const meta: Meta = {
     title: 'web/insights/form/Field',
     decorators: [story => <WebStory>{() => story()}</WebStory>],
-} as Meta
+}
+
+export default meta
 
 const MULTI_LINE_VALUE = `
 repo:^(github\\.com/sourcegraph/sourcegraph)$

client/web/src/enterprise/insights/components/views/card/InsightCard.story.tsx

@@ -23,10 +23,12 @@ import { SeriesBasedChartTypes, SeriesChart } from '../chart'
 
 import * as Card from './InsightCard'
 
-export default {
+const meta: Meta = {
     title: 'web/insights/shared-components',
     decorators: [story => <WebStory>{() => story()}</WebStory>],
-} as Meta
+}
+
+export default meta
 
 export const InsightCardShowcase: StoryFn = () => (
     <main style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>

client/web/src/enterprise/insights/pages/insights/creation/capture-group/CaptureGroupCreationPage.story.tsx

@@ -8,7 +8,7 @@ import { useCodeInsightsLicenseState } from '../../../../stores'
 
 import { CaptureGroupCreationPage as CaptureGroupCreationPageComponent } from './CaptureGroupCreationPage'
 
-export default {
+const meta: Meta = {
     title: 'web/insights/creation-ui/capture-group/CaptureGroupCreationPage',
     decorators: [story => <WebStory>{() => <div className="p-3 container web-content">{story()}</div>}</WebStory>],
     parameters: {
@@ -17,7 +17,9 @@ export default {
             disableSnapshot: false,
         },
     },
-} as Meta
+}
+
+export default meta
 
 export const CaptureGroupCreationPage: StoryFn = () => {
     useCodeInsightsLicenseState.setState({ licensed: true, insightsLimit: null })

client/web/src/enterprise/insights/pages/insights/creation/intro/cards/InsightCards.story.tsx

@@ -6,7 +6,7 @@ import { WebStory } from '../../../../../../../components/WebStory'
 
 import { CaptureGroupInsightCard, LangStatsInsightCard, SearchInsightCard } from './InsightCards'
 
-export default {
+const meta: Meta = {
     title: 'web/insights/InsightCards',
     decorators: [story => <WebStory>{() => story()}</WebStory>],
     parameters: {
@@ -15,7 +15,9 @@ export default {
             disableSnapshot: false,
         },
     },
-} as Meta
+}
+
+export default meta
 
 export const InsightCards: StoryFn = () => (
     <section className="row">

client/web/src/enterprise/insights/pages/landing/dot-com-get-started/CodeInsightsDotComGetStarted.story.tsx

@@ -6,10 +6,12 @@ import { WebStory } from '../../../../../components/WebStory'
 
 import { CodeInsightsDotComGetStarted } from './CodeInsightsDotComGetStarted'
 
-export default {
+const meta: Meta = {
     title: 'web/insights/dot-com-landing/CodeInsightsDotComGetStarted',
     decorators: [story => <WebStory>{() => story()}</WebStory>],
-} as Meta
+}
+
+export default meta
 
 export const CodeInsightsDotComGetStartedStory = () => (
     <CodeInsightsDotComGetStarted telemetryService={NOOP_TELEMETRY_SERVICE} authenticatedUser={null} />

client/web/src/enterprise/insights/pages/landing/dot-com-get-started/components/code-insights-examples-picker/code-insights-examples-slider/CodeInsightsExamplesSlider.story.tsx

@@ -6,10 +6,12 @@ import { WebStory } from '../../../../../../../../components/WebStory'
 
 import { CodeInsightsExamplesSlider } from './CodeInsightsExamplesSlider'
 
-export default {
+const meta: Meta = {
     title: 'web/insights/dot-com-landing/CodeInsightsExampleSlider',
     decorators: [story => <WebStory>{() => story()}</WebStory>],
-} as Meta
+}
+
+export default meta
 
 export const CodeInsightsExampleSliderExample = () => (
     <div style={{ width: 500 }}>

client/web/src/enterprise/insights/pages/landing/getting-started/components/code-insights-examples/CodeInsightsExamples.story.tsx

@@ -6,9 +6,11 @@ import { WebStory } from '../../../../../../../components/WebStory'
 
 import { CodeInsightsExamples } from './CodeInsightsExamples'
 
-export default {
+const meta: Meta = {
     title: 'web/insights/getting-started/CodeInsightExamples',
     decorators: [story => <WebStory>{() => story()}</WebStory>],
-} as Meta
+}
+
+export default meta
 
 export const StandardExample = () => <CodeInsightsExamples telemetryService={NOOP_TELEMETRY_SERVICE} />

client/web/src/nav/GlobalNavbar.story.tsx

@@ -57,7 +57,7 @@ const allAuthenticatedNavItemsProps: Partial<GlobalNavbarProps> = {
     } as AuthenticatedUser,
 }
 
-const decorator: Decorator = Story => {
+const decorator: Decorator<GlobalNavbarProps> = Story => {
     updateJSContextBatchChangesLicense('full')
 
     return (
@@ -71,7 +71,7 @@ const decorator: Decorator = Story => {
     )
 }
 
-const config: Meta = {
+const config: Meta<typeof GlobalNavbar> = {
     title: 'web/nav/GlobalNav',
     decorators: [decorator],
     parameters: {

client/web/src/search/Notepad.story.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 
-import type { ComponentStory, ComponentMeta } from '@storybook/react'
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 
 import { SearchPatternType } from '@sourcegraph/shared/src/graphql-operations'
 import { MockTemporarySettings } from '@sourcegraph/shared/src/settings/temporary/testUtils'
@@ -11,13 +11,13 @@ import type { NotepadEntry, NotepadStore } from '../stores/notepad'
 
 import { NotepadContainer } from './Notepad'
 
-function NotepadWrapper({
+const NotepadWrapper: React.FunctionComponent<{ open?: boolean; enableNotepad?: boolean } & NotepadStore> = ({
     entries = [],
     previousEntries = [],
     canRestoreSession = false,
     open = false,
     enableNotepad = true,
-}: { open?: boolean; enableNotepad?: boolean } & NotepadStore): React.ReactElement {
+}): React.ReactElement => {
     useEffect(() => {
         useNotepadState.setState({ entries, previousEntries, canRestoreSession }, true)
     }, [entries, previousEntries, canRestoreSession])
@@ -29,12 +29,14 @@ function NotepadWrapper({
     )
 }
 
-const META: ComponentMeta<typeof NotepadContainer> = {
+const META: Meta<typeof NotepadWrapper> = {
     title: 'web/search/Notepad',
     component: NotepadWrapper,
 }
 export default META
 
+type Story = StoryObj<typeof META>
+
 const mockEntries: NotepadEntry[] = [
     { id: 0, type: 'search', query: 'TODO', caseSensitive: false, patternType: SearchPatternType.standard },
     { id: 1, type: 'file', path: 'path/to/file1', repo: 'my/repo', revision: 'master', lineRange: null },
@@ -55,34 +57,32 @@ const mockEntries: NotepadEntry[] = [
     },
 ]
 
-const Template: ComponentStory<typeof NotepadWrapper> = args => (
-    <WebStory>{() => <NotepadWrapper {...args} />}</WebStory>
-)
+const Template: StoryFn<typeof NotepadWrapper> = args => <WebStory>{() => <NotepadWrapper {...args} />}</WebStory>
 
-export const NotepadClosed = Template.bind({})
+export const NotepadClosed: Story = Template.bind({})
 NotepadClosed.args = {
     entries: mockEntries,
 }
 
-export const NotepadClosedEmpty = Template.bind({})
+export const NotepadClosedEmpty: Story = Template.bind({})
 NotepadClosedEmpty.args = {
     entries: [],
 }
 
-export const NotepadOpen = Template.bind({})
+export const NotepadOpen: Story = Template.bind({})
 NotepadOpen.args = {
     entries: mockEntries,
     open: true,
 }
 
-export const NotepadRestorePreviousSession = Template.bind({})
+export const NotepadRestorePreviousSession: Story = Template.bind({})
 NotepadRestorePreviousSession.args = {
     entries: mockEntries,
     open: true,
     canRestoreSession: true,
 }
 
-export const NotepadManyEntries = Template.bind({})
+export const NotepadManyEntries: Story = Template.bind({})
 NotepadManyEntries.args = {
     entries: Array.from({ length: 50 }, (_element, index) => ({
         id: index,

client/web/src/search/results/sidebar/Revisions.story.tsx

@@ -3,7 +3,6 @@ import type { Meta } from '@storybook/react'
 
 import { type RevisionsProps, TabIndex } from '@sourcegraph/branded'
 import sidebarStyles from '@sourcegraph/branded/src/search-ui/results/sidebar/SearchSidebar.module.scss'
-// eslint-disable-next-line no-restricted-imports
 import { MockedTestProvider } from '@sourcegraph/shared/src/testing/apollo'
 import { H2 } from '@sourcegraph/wildcard'
 
@@ -22,14 +21,16 @@ import {
     GRAPHQL_ERROR_MOCKS,
 } from './Revisions.mocks'
 
-export default {
+const meta: Meta = {
     title: 'web/search/results/sidebar/Revisions',
     component: Revisions,
     argTypes: { onFilterClick: { action: 'onFilterClick' } },
     parameters: {
         chromatic: { disableSnapshot: false },
     },
-} as Meta
+}
+
+export default meta
 
 const examples: (RevisionsProps & Partial<Pick<MockedProviderProps, 'mocks'>> & { title: string })[] = [
     TabIndex.BRANCHES,

client/wildcard/src/components/Charts/core/components/scroll-box/ScrollBox.story.tsx

@@ -4,10 +4,12 @@ import { BrandedStory } from '../../../../../stories/BrandedStory'
 
 import { ScrollBox } from './ScrollBox'
 
-export default {
+const meta: Meta = {
     title: 'wildcard/Charts/Core',
     decorators: [story => <BrandedStory>{() => <div className="container mt-3">{story()}</div>}</BrandedStory>],
-} as Meta
+}
+
+export default meta
 
 export const ScrollBoxDemo = () => (
     <ScrollBox style={{ height: 400, width: 200, border: '1px solid var(--border-color)' }}>

client/wildcard/src/components/Form/TextArea/TextArea.story.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react'
 
 import type { Meta } from '@storybook/react'
-import type { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types'
 
 import { H1 } from '../..'
 import { BrandedStory } from '../../../stories/BrandedStory'
@@ -12,11 +11,7 @@ import { TextArea } from './TextArea'
 const config: Meta = {
     title: 'wildcard/TextArea',
 
-    decorators: [
-        (story: () => StoryFnReactReturnType): StoryFnReactReturnType => (
-            <BrandedStory>{() => <div className="container mt-3">{story()}</div>}</BrandedStory>
-        ),
-    ],
+    decorators: [story => <BrandedStory>{() => <div className="container mt-3">{story()}</div>}</BrandedStory>],
 
     parameters: {
         component: TextArea,