Merge pull request #10 from storybookjs/kasper/redirect-boundary

Bunch of fixes and improvements

.storybook/decorators.tsx

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

.storybook/main.ts

@@ -1,5 +1,4 @@
 import type { StorybookConfig } from '@storybook/nextjs'
-import * as path from 'node:path'
 
 const config: StorybookConfig = {
  stories: ['../docs/**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],

.storybook/preview.tsx

@@ -1,12 +1,10 @@
 import '../app/style.css'
-import { resetMockDB } from '#lib/db.mock'
 import type { Preview } from '@storybook/react'
-import { onMockCall } from '@storybook/test'
-import MockDate from 'mockdate'
+import { initialize, mswLoader } from 'msw-storybook-addon'
+import * as MockDate from 'mockdate'
+import { initializeDB } from '#lib/db.mock'
 
-onMockCall((spy, args) => {
- console.log(spy.name, args)
-})
+initialize({ onUnhandledRequest: 'bypass' })
 
 const preview: Preview = {
  parameters: {
@@ -16,11 +14,19 @@ const preview: Preview = {
  date: /Date$/i,
  },
  },
+ test: {
+ // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
+ // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
+ dangerouslyIgnoreUnhandledErrors: true,
+ },
  nextjs: { appDirectory: true },
  },
+ loaders: [mswLoader],
  beforeEach() {
- MockDate.set('2024-05-04T14:00:00.000Z')
- resetMockDB()
+ // Fixed dates for consistent screenshots
+ MockDate.set('2024-04-18T12:24:02Z')
+ // reset the database to avoid hanging state between stories
+ initializeDB()
  },
 }
 

.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/actions.mock.ts

@@ -4,3 +4,4 @@ import * as actions from './actions'
 export const saveNote = fn(actions.saveNote).mockName('saveNote')
 export const deleteNote = fn(actions.deleteNote).mockName('deleteNote')
 export const logout = fn(actions.logout).mockName('logout')
+export const login = fn(actions.login).mockName('login')

app/actions.ts

@@ -7,7 +7,7 @@ import { redirect } from 'next/navigation'
 import { getUserFromSession } from '#lib/session'
 
 export async function saveNote(
- noteId: string | undefined,
+ noteId: number | undefined,
  title: string,
  body: string,
 ) {
@@ -16,28 +16,25 @@ export async function saveNote(
  if (!user) {
  redirect('/')
  }
-
- if (!noteId) {
- noteId = Date.now().toString()
- }
-
  const payload = {
  id: noteId,
  title: title.slice(0, 255),
  body: body.slice(0, 2048),
  createdBy: user,
  }
 
- await db.note.upsert({
+ if (!noteId) {
+ const newNote = await db.note.create({ data: payload })
+ redirect(`/note/${newNote.id}`)
+ }
+ await db.note.update({
  where: { id: noteId },
- update: payload,
- create: payload,
+ data: payload,
  })
-
  redirect(`/note/${noteId}`)
 }
 
-export async function deleteNote(noteId: string) {
+export async function deleteNote(noteId: number) {
  await db.note.delete({
  where: {
  id: noteId,
@@ -53,3 +50,9 @@ export async function logout() {
 
  redirect('/')
 }
+
+export async function login() {
+ redirect(
+ `https://github.com/login/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_KEY}&allow_signup=false`,
+ )
+}

app/auth/route.ts

@@ -0,0 +1,57 @@
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { createUserCookie, userCookieKey } from '#lib/session'
+
+const CLIENT_ID = process.env.OAUTH_CLIENT_KEY
+const CLIENT_SECRET = process.env.OAUTH_CLIENT_SECRET
+
+export async function GET(request: Request) {
+ const code = new URL(request.url).searchParams.get('code')
+
+ let token = ''
+ try {
+ const data = await (
+ await fetch('https://github.com/login/oauth/access_token', {
+ method: 'POST',
+ body: JSON.stringify({
+ client_id: CLIENT_ID,
+ client_secret: CLIENT_SECRET,
+ code,
+ }),
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ })
+ ).json()
+
+ const accessToken = data.access_token
+
+ // Let's also fetch the user info and store it in the session.
+ if (accessToken) {
+ const userInfo = await (
+ await fetch('https://api.github.com/user', {
+ method: 'GET',
+ headers: {
+ Authorization: `token ${accessToken}`,
+ Accept: 'application/json',
+ },
+ })
+ ).json()
+
+ token = userInfo.login
+ }
+ } catch (err: any) {
+ console.error(err)
+ redirect('/')
+ }
+
+ if (!token) {
+ console.error('Github authorization failed')
+ redirect('/')
+ }
+
+ const cookieValue = await createUserCookie(token)
+ cookies().set(userCookieKey, `${cookieValue}; Secure; HttpOnly`)
+ redirect('/')
+}

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

@@ -1,36 +1,43 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { useSearchParams } from '@storybook/nextjs/navigation.mock'
 import { cookies } from '@storybook/nextjs/headers.mock'
-import Page from '#app/note/[id]/page'
-import { db } from '#lib/db'
+import { http } from 'msw'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
+import Page from './page'
+import { db, initializeDB } from '#lib/db.mock'
 import { createUserCookie, userCookieKey } from '#lib/session'
 import { PageDecorator } from '#.storybook/decorators'
+import { login } from '#app/actions.mock'
+import * as auth from '#app/auth/route'
 
 const meta = {
  component: Page,
- parameters: { layout: 'fullscreen' },
  decorators: [PageDecorator],
  async beforeEach() {
  await db.note.create({
  data: {
- id: '1',
  title: 'Module mocking in Storybook?',
  body: "Yup, that's a thing now! 🎉",
  createdBy: 'storybookjs',
  },
  })
  await db.note.create({
  data: {
- id: '2',
  title: 'RSC support as well??',
  body: 'RSC is pretty cool, even cooler that Storybook supports it!',
  createdBy: 'storybookjs',
  },
  })
  },
- args: {
- params: { id: '2' },
+ parameters: {
+ layout: 'fullscreen',
+ nextjs: {
+ navigation: {
+ pathname: '/note/[id]',
+ query: { id: '1' },
+ },
+ },
  },
+ args: { params: { id: '1' } },
 } satisfies Meta<typeof Page>
 
 export default meta
@@ -45,14 +52,68 @@ export const LoggedIn: Story = {
 
 export const NotLoggedIn: Story = {}
 
-export const WithSearchFilter: Story = {
+export const LoginShouldGetOAuthTokenAndSetCookie: Story = {
+ parameters: {
+ msw: {
+ // Mock out OAUTH
+ handlers: [
+ http.post(
+ 'https://github.com/login/oauth/access_token',
+ async ({ request }) => {
+ let json = (await request.json()) as any
+ return Response.json({ access_token: json.code })
+ },
+ ),
+ http.get('https://api.github.com/user', async ({ request }) =>
+ Response.json({
+ login: request.headers.get('Authorization')?.replace('token ', ''),
+ }),
+ ),
+ ],
+ },
+ },
  beforeEach() {
- useSearchParams.mockReturnValue({ get: () => 'RSC' })
+ // Point the login implementation to the endpoint github would have redirected too.
+ login.mockImplementation(async () => {
+ return await auth.GET(new Request('/auth?code=storybookjs'))
+ })
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ await expect(cookies().get(userCookieKey)?.value).toBeUndefined()
+ await userEvent.click(
+ await canvas.findByRole('menuitem', { name: /login to add/i }),
+ )
+ await waitFor(async () => {
+ await expect(cookies().get(userCookieKey)?.value).toContain('storybookjs')
+ })
+ },
+}
+
+export const LogoutShouldDeleteCookie: Story = {
+ async beforeEach() {
+ cookies().set(userCookieKey, await createUserCookie('storybookjs'))
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement)
+ await expect(cookies().get(userCookieKey)?.value).toContain('storybookjs')
+ await userEvent.click(await canvas.findByRole('button', { name: 'logout' }))
+ await expect(cookies().get(userCookieKey)).toBeUndefined()
+ },
+}
+
+export const SearchInputShouldFilterNotes: Story = {
+ parameters: {
+ nextjs: {
+ navigation: {
+ query: { q: 'RSC' },
+ },
+ },
  },
 }
 
 export const EmptyState: Story = {
  async beforeEach() {
- await db.note.deleteMany()
+ initializeDB({}) // init an empty DB
  },
 }

app/note/[id]/page.tsx

@@ -2,22 +2,15 @@ import NoteUI from '#components/note-ui'
 import { db } from '#lib/db'
 
 export const metadata = {
- robots: {
- index: false,
- },
+ robots: { index: false },
 }
 
 type Props = {
  params: { id: string }
 }
 
 export default async function Page({ params }: Props) {
- const note = await db.note.findUnique({
- where: {
- id: params.id,
- },
- })
-
+ const note = await db.note.findUnique({ where: { id: Number(params.id) } })
  if (note === null) {
  return (
  <div className="note--empty-state">