Use @total-typescript/tsconfig/bundler/dom

.storybook/decorators.tsx

@@ -1,4 +1,4 @@
-import { Decorator } from '@storybook/react'
+import { type Decorator } from '@storybook/react'
 import { Layout } from '#app/layout'
 
 export const PageDecorator: Decorator = (Story) => {

.storybook/test-runner.ts

@@ -1,4 +1,4 @@
-import { TestRunnerConfig, getStoryContext } from '@storybook/test-runner'
+import { type TestRunnerConfig, getStoryContext } from '@storybook/test-runner'
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 }

app/note/[id]/page.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import { http } from 'msw'
 import { getWorker } from 'msw-storybook-addon'

app/note/edit/[id]/page.stories.tsx

@@ -1,5 +1,5 @@
 import { expect, fireEvent, userEvent, waitFor, within } from '@storybook/test'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import Page from './page'
 import { deleteNote, saveNote } from '#app/actions.mock'

app/note/edit/page.stories.tsx

@@ -1,5 +1,5 @@
 import { expect, fireEvent, userEvent, within } from '@storybook/test'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import Page from './page'
 import { saveNote, deleteNote } from '#app/actions.mock'

components/auth-button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import AuthButton from './auth-button'
 import { getUserFromSession } from '#lib/session.mock'
 

components/auth-button.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { type ReactNode } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import { getUserFromSession } from '#lib/session'

components/logout-button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import LogoutButton from './logout-button'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import { createUserCookie, userCookieKey } from '#lib/session'

components/note-editor.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import NoteEditor from "./note-editor";
 
 const meta = {

components/note-list-skeleton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import NoteListSkeleton from "./note-list-skeleton";
 
 const meta = {

components/note-list.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import NoteList from '#components/note-list'
 import { createNotes } from '#mocks/notes'
 

components/note-preview.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import NotePreview from "./note-preview";
 
 const meta = {

components/note-ui.stories.tsx

@@ -1,5 +1,5 @@
 import { expect, fireEvent, userEvent, within } from '@storybook/test'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import { saveNote, deleteNote } from '#app/actions.mock'
 import NoteUI from '#components/note-ui'
@@ -20,18 +20,18 @@ type Story = StoryObj<typeof meta>
 const notes = createNotes()
 
 export const Default: Story = {
- args: { isEditing: false, note: notes[0] },
+ args: { isEditing: false, note: notes[0]! },
 }
 
 export const EditMode: Story = {
- args: { isEditing: true, note: notes[0] },
+ args: { isEditing: true, note: notes[0]! },
 }
 
 export const EditModeFlow: Story = {
  name: 'Edit Mode Flow ▶',
  args: {
  isEditing: true,
- note: notes[0],
+ note: notes[0]!,
  },
  play: async ({ canvasElement, step }) => {
  const canvas = within(canvasElement)

components/search.stories.tsx

@@ -1,5 +1,5 @@
 import { getRouter } from '@storybook/nextjs/navigation.mock'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import Search from './search'
 import { expect, fireEvent, userEvent, within } from '@storybook/test'
 

components/sidebar.stories.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import Sidebar from './sidebar'
 import { createNotes } from '#mocks/notes'
 import { expect, fireEvent, userEvent, within, waitFor } from '@storybook/test'
@@ -33,8 +33,7 @@ export const NotesExpanded: Story = {
  },
 }
 
-
-const changeNoteGate = Promise.withResolvers<void>();
+const changeNoteGate = Promise.withResolvers<void>()
 
 export const NoteChangedAnimation: Story = {
  render: () => {
@@ -44,20 +43,20 @@ export const NoteChangedAnimation: Story = {
  setNotes((prevNotes) => {
  return [
  {
- ...prevNotes[0],
+ ...prevNotes[0]!,
  title: 'New title',
  },
  ...prevNotes.slice(1),
  ]
  })
- changeNoteGate.resolve();
+ changeNoteGate.resolve()
  }, 1000)
  }, [])
  return <Sidebar notes={notes} />
  },
  play: async () => {
- await changeNoteGate.promise;
- }
+ await changeNoteGate.promise
+ },
 }
 
 export const ToggleSidebarOnMobile: Story = {
@@ -79,8 +78,8 @@ export const ToggleSidebarOnMobile: Story = {
  await step('Select note', async () => {
  const note = canvas.getAllByRole('button', {
  name: /Open note for preview/i,
- })[0]
- note.click()
+ })[0]!
+ await userEvent.click(note)
  })
 
  await waitFor(function sidebarIsNotVisible() {

package.json

@@ -63,6 +63,7 @@
  "@storybook/react": "^8.1.0",
  "@storybook/test": "^8.1.0",
  "@storybook/test-runner": "^0.17.0",
+ "@total-typescript/tsconfig": "^1.0.4",
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
@@ -84,7 +85,7 @@
  "storybook": "^8.1.0",
  "ts-node": "^10.9.2",
  "tsx": "^4.7.1",
- "typescript": "^5.4.3",
+ "typescript": "^5.4.5",
  "wait-on": "^7.2.0"
  },
  "prettier": {