stuff fails, oh no

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons'
+import { addons } from '@storybook/manager-api'
 import { create } from '@storybook/theming/create'
 import logo from '../src/assets/images/logo-black.svg'
 

.storybook/preview.tsx

@@ -1,12 +1,15 @@
 import type { Preview } from '@storybook/react'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { mswLoader, initialize } from 'msw-storybook-addon'
 
 import { globalDecorators } from './decorators'
 import { viewports as breakpoints } from '../src/styles/breakpoints'
 import { DocsContainer, DocsContainerProps } from '@storybook/blocks'
 import { ThemeProvider } from 'styled-components'
 import { lightTheme } from '../src/styles/theme'
 
+initialize()
+
 // Create custom viewports using widths defined in design tokens
 const breakpointViewports = Object.keys(breakpoints).reduce((acc, key) => {
   acc[`breakpoint${key}`] = {

package.json

@@ -52,18 +52,17 @@
   "devDependencies": {
     "@babel/core": "^7.14.6",
     "@ladle/react": "^2.4.5",
-    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-a11y": "8.0.0-alpha.7",
     "@storybook/addon-coverage": "^0.0.9",
     "@storybook/addon-designs": "^7.0.5",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-interactions": "7.5.3",
-    "@storybook/addon-storyshots": "7.5.3",
-    "@storybook/blocks": "7.5.3",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-vite": "7.5.3",
-    "@storybook/test-runner": "0.13.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "8.0.0-alpha.7",
+    "@storybook/addon-interactions": "8.0.0-alpha.7",
+    "@storybook/blocks": "8.0.0-alpha.7",
+    "@storybook/jest": "^0.2.3-next.0",
+    "@storybook/react": "8.0.0-alpha.7",
+    "@storybook/react-vite": "8.0.0-alpha.7",
+    "@storybook/test-runner": "0.16.1-next.0",
+    "@storybook/testing-library": "^0.2.2-next.0",
     "@storybook/testing-react": "2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
@@ -99,11 +98,11 @@
     "jsdom": "^20.0.2",
     "lint-staged": ">=10",
     "msw": "^0.49.3",
-    "msw-storybook-addon": "^1.8.0",
+    "msw-storybook-addon": "2.0.0-next.1",
     "prettier": "^2.5.0",
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "storybook": "7.5.3",
+    "storybook": "8.0.0-alpha.7",
     "storybook-mobile-addon": "^2.0.2",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^2.2.2",

src/components/Button/Button.mdx

@@ -1,38 +1,5 @@
-import { Meta, Description } from '@storybook/blocks'
-import { Figma } from "@storybook/addon-designs/blocks";
-import { Grid } from './utils'
-import * as ButtonStories from './Button.stories'
-
-# Button
-
-<Meta of={ButtonStories} />
-<Description of={ButtonStories} />
-
-> The button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
-
-### Button variants
-
-<Grid of={ButtonStories} />
-
-# Usage
-
-To use this button. please install the following packages:
-```
-yarn add @mycompany/button
-```
-
-Then use it in your application such as:
-```jsx
-import { Button } from '@mycompany/button'
-
-export const Page = () => {
-  const getFood = () => {}
-  return <Button onClick={getFood}>Click me</Button>
-}
-```
-
-### Design specs
-
-<Figma url="https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=1005%3A2974&t=8pzYUq8GyzmMGjJ2-4" />
+import { Meta, Story } from '@storybook/addon-docs';
 
+<Meta title="Foobar" />
 
+<Story id="button--primary" />

src/docs/Introduction.mdx

@@ -127,6 +127,14 @@ import banner from './assets/mealdrop-banner.png'
   `}
 </style>
 
+```js
+Some stuff here
+```
+
+```ts
+Some stuff there
+```
+
 # Welcome to Mealdrop's Storybook!
 
 Storybook helps you build UI components in isolation from your app's business logic, data, and context.

src/pages/CategoryDetailPage/CategoryDetailPage.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { rest } from 'msw'
+import { delay, http, HttpResponse } from 'msw'
 
 import { restaurants } from '../../stub/restaurants'
 import { BASE_URL } from '../../api'
@@ -26,22 +26,22 @@ const Template: ComponentStory<typeof CategoryDetailPage> = () => <CategoryDetai
 export const Default = Template.bind({})
 Default.parameters = {
   msw: {
-    handlers: [rest.get(BASE_URL, (req, res, ctx) => res(ctx.json([restaurants[0]])))],
+    handlers: [http.get(BASE_URL, () => HttpResponse.json([restaurants[0]]))],
   },
 }
 
 export const Loading = Template.bind({})
 Loading.parameters = {
   msw: {
-    handlers: [rest.get(BASE_URL, (req, res, ctx) => res(ctx.delay('infinite')))],
+    handlers: [http.get(BASE_URL, () => delay('infinite'))],
   },
 }
 
 export const Missing = Template.bind({})
 Missing.parameters = {
   deeplink: { route: '/categories/wrong', path: '/categories/:id' },
   msw: {
-    handlers: [rest.get(BASE_URL, (req, res, ctx) => res(ctx.json([])))],
+    handlers: [http.get(BASE_URL, () => HttpResponse.json([]))],
   },
   design: {
     type: 'figma',

src/pages/HomePage/HomePage.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw'
 
 import { BASE_URL } from '../../api'
 import { restaurants } from '../../stub/restaurants'
@@ -16,7 +16,7 @@ export default {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=135%3A258',
     },
     msw: {
-      handlers: [rest.get(BASE_URL, (req, res, ctx) => res(ctx.json(restaurants)))],
+      handlers: [http.get(BASE_URL, () => HttpResponse.json(restaurants))],
     },
   },
 } as ComponentMeta<typeof HomePage>

src/pages/HomePage/components/RestaurantsSection/RestaurantsSection.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { rest } from 'msw'
+import { delay, http, HttpResponse } from 'msw'
 
 import { BASE_URL } from '../../../../api'
 import { restaurants } from '../../../../stub/restaurants'
@@ -21,7 +21,7 @@ Default.args = {
 }
 Default.parameters = {
   msw: {
-    handlers: [rest.get(BASE_URL, (req, res, ctx) => res(ctx.json(restaurants)))],
+    handlers: [http.get(BASE_URL, () => HttpResponse.json(restaurants))],
   },
 }
 
@@ -31,6 +31,6 @@ Loading.args = {
 }
 Loading.parameters = {
   msw: {
-    handlers: [rest.get(BASE_URL, (req, res, ctx) => res(ctx.delay('infinite')))],
+    handlers: [http.get(BASE_URL, async () => delay('infinite'))],
   },
 }

src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { rest } from 'msw'
+import { delay, http, HttpResponse } from 'msw'
 import { within, userEvent } from '@storybook/testing-library'
 import { expect } from '@storybook/jest'
 
@@ -41,7 +41,7 @@ export const Success = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=169%3A510',
     },
     msw: [
-      rest.get(BASE_URL, (req, res, ctx) => {
+      http.get(BASE_URL, () => {
         return res(ctx.json(restaurants[0]))
       }),
     ],
@@ -74,11 +74,7 @@ export const Loading: Story = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=2152%3A3158',
     },
     msw: {
-      handlers: [
-        rest.get(BASE_URL, (req, res, ctx) => {
-          return res(ctx.delay('infinite'))
-        }),
-      ],
+      handlers: [http.get(BASE_URL, async () => delay('infinite'))],
     },
   },
 }
@@ -91,8 +87,10 @@ export const NotFound: Story = {
     },
     msw: {
       handlers: [
-        rest.get(BASE_URL, (req, res, ctx) => {
-          return res(ctx.status(404))
+        http.get(BASE_URL, () => {
+          return new HttpResponse(null, {
+            status: 404,
+          })
         }),
       ],
     },
@@ -107,8 +105,10 @@ export const Error: Story = {
     },
     msw: {
       handlers: [
-        rest.get(BASE_URL, (req, res, ctx) => {
-          return res(ctx.status(500))
+        http.get(BASE_URL, () => {
+          return new HttpResponse(null, {
+            status: 500,
+          })
         }),
       ],
     },

src/pages/UserFlows.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic/isChromatic'
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw'
 import { expect } from '@storybook/jest'
 import { within, userEvent } from '@storybook/testing-library'
 
@@ -17,19 +17,20 @@ const meta = {
     deeplink: { route: '/', path: '/' },
     msw: {
       handlers: [
-        rest.get(BASE_URL, (req, res, ctx) => {
-          const id = req.url.searchParams.get('id')
-          const category = req.url.searchParams.get('category')
+        http.get(BASE_URL, ({ request }) => {
+          const url = new URL(request.url)
+          const id = url.searchParams.get('id')
+          const category = url.searchParams.get('category')
 
           if (id) {
-            return res(ctx.json(restaurants[0]))
+            return HttpResponse.json(restaurants[0] as any)
           }
 
           if (category) {
-            return res(ctx.json([restaurants[0], restaurants[1], restaurants[2]]))
+            return HttpResponse.json([restaurants[0], restaurants[1], restaurants[2]])
           }
 
-          return res(ctx.json(restaurants))
+          return HttpResponse.json(restaurants)
         }),
       ],
     },