Fix some type issues

.storybook/test-runner.ts

@@ -1,28 +1,32 @@
-import { TestRunnerConfig, getStoryContext } from '@storybook/test-runner';
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { TestRunnerConfig, getStoryContext } from '@storybook/test-runner'
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
 
-const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 };
+const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 }
 
 const config: TestRunnerConfig = {
  async preVisit(page, story) {
- const context = await getStoryContext(page, story);
- const viewportName = context.parameters?.viewport?.defaultViewport;
- const viewportParameter = MINIMAL_VIEWPORTS[viewportName];
+ const context = await getStoryContext(page, story)
+ const viewportName = context.parameters?.viewport?.defaultViewport
+ const viewportParameter = MINIMAL_VIEWPORTS[viewportName]
 
- if (viewportParameter) {
+ if (
+ viewportParameter &&
+ viewportParameter.styles &&
+ typeof viewportParameter.styles === 'object'
+ ) {
  const viewportSize = Object.entries(viewportParameter.styles).reduce(
  (acc, [screen, size]) => ({
  ...acc,
  // make sure your viewport config in Storybook only uses numbers, not percentages
  [screen]: parseInt(size),
  }),
- {}
- );
+ {} as { width: number; height: number },
+ )
 
- page.setViewportSize(viewportSize);
+ page.setViewportSize(viewportSize)
  } else {
- page.setViewportSize(DEFAULT_VIEWPORT_SIZE);
+ page.setViewportSize(DEFAULT_VIEWPORT_SIZE)
  }
  },
-};
-export default config;
+}
+export default config

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

@@ -12,7 +12,6 @@ import * as auth from '#app/auth/route'
 
 const meta = {
  component: Page,
- parameters: { layout: 'fullscreen' },
  decorators: [PageDecorator],
  async beforeEach() {
  await db.note.create({

components/auth-button.tsx

@@ -6,7 +6,7 @@ import { login } from '#app/actions'
 
 type Props = {
  children?: ReactNode
- noteId: string | null
+ noteId: number | null
 }
 
 export default function AuthButton({ children, noteId }: Props) {

components/sidebar-note.tsx

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect, useTransition } from 'react'
 import { useRouter, usePathname } from 'next/navigation'
 
 type Props = {
- id: string
+ id: number
  title: string
  children: React.ReactNode
  expandedChildren: React.ReactNode
@@ -18,7 +18,7 @@ export default function SidebarNote({
 }: Props) {
  const router = useRouter()
  const pathname = usePathname()
- const selectedId = pathname?.split('/')[1] || null
+ const selectedId = Number(pathname?.split('/')[1]) || null
  const [isPending] = useTransition()
  const [isExpanded, setIsExpanded] = useState(false)
  const isActive = id === selectedId

components/sidebar.stories.tsx

@@ -34,8 +34,7 @@ export const NotesExpanded: Story = {
 }
 
 
-//@ts-expect-error -- doesn't know about the Promise.withResolvers function
-const changeNoteGate = Promise.withResolvers();
+const changeNoteGate = Promise.withResolvers<void>();
 
 export const NoteChangedAnimation: Story = {
  render: () => {

package.json

@@ -27,6 +27,7 @@
  "start": "next start",
  "prisma:setup": "dotenv -e .env.local prisma migrate dev && pnpm run generate-dmmf",
  "prisma:seed": "dotenv -e .env.local prisma db seed",
+ "prisma:studio": "dotenv -e .env.local prisma studio",
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build",
  "test-storybook": "test-storybook",
@@ -53,9 +54,10 @@
  "@chromatic-com/storybook": "^1.2.25",
  "@prisma/client": "^5.11.0",
  "@storybook/addon-actions": "^8.1.0",
- "@storybook/addon-essentials": "^8.1.0",
  "@storybook/addon-coverage": "^1.0.3",
+ "@storybook/addon-essentials": "^8.1.0",
  "@storybook/addon-interactions": "^8.1.0",
+ "@storybook/addon-viewport": "^8.1.0",
  "@storybook/blocks": "^8.1.0",
  "@storybook/nextjs": "^8.1.0",
  "@storybook/react": "^8.1.0",