chore(examples): update react-storybook example to storybook v8

examples/react-storybook/.storybook/main.js

@@ -1,14 +1,8 @@
-module.exports = {
+export default {
  addons: ['@storybook/addon-essentials'],
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../public'],
- features: {
- storyStoreV7: true,
- },
- framework: '@storybook/react',
- core: {
- builder: '@storybook/builder-vite',
- },
+ framework: '@storybook/react-vite',
  async viteFinal(config) {
  config.optimizeDeps = {
  ...(config.optimizeDeps || {}),

examples/react-storybook/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider, setLogger } from 'react-query'
 import { initialize, mswDecorator } from 'msw-storybook-addon'
-import type { DecoratorFn } from '@storybook/react'
+import type { Preview } from '@storybook/react'
 
 // Disable `react-query` error logging
 setLogger({
@@ -13,25 +13,27 @@ setLogger({
 // Start Mock Service Worker
 initialize({ onUnhandledRequest: 'bypass' })
 
-export const parameters = {
- actions: { argTypesRegex: '^on[A-Z].*' },
-}
-
-export const decorators: DecoratorFn[] = [
- mswDecorator as DecoratorFn,
- (story) => {
- const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- refetchOnWindowFocus: false,
- refetchIntervalInBackground: false,
- retry: false,
+const preview: Preview = {
+ parameters: {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ },
+ decorators: [
+ mswDecorator as any,
+ (story) => {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false,
+ refetchIntervalInBackground: false,
+ retry: false,
+ },
  },
- },
- })
+ })
 
- return (
- <QueryClientProvider client={queryClient}>{story()}</QueryClientProvider>
- )
- },
-]
+ return (
+ <QueryClientProvider client={queryClient}>{story()}</QueryClientProvider>
+ )
+ },
+ ],
+}
+export default preview

examples/react-storybook/package.json

@@ -8,7 +8,7 @@
  "preview": "vite preview",
  "test": "vitest",
  "test:ui": "vitest --ui",
- "storybook": "start-storybook -p 6006"
+ "storybook": "storybook dev -p 6006"
  },
  "dependencies": {
  "cross-fetch": "^3.1.5",
@@ -18,16 +18,9 @@
  },
  "devDependencies": {
  "@babel/core": "^7.23.3",
- "@storybook/addon-actions": "^6.5.5",
- "@storybook/addon-essentials": "^6.5.5",
- "@storybook/addon-links": "^6.5.5",
- "@storybook/addons": "^6.5.5",
- "@storybook/builder-vite": "^0.1.35",
- "@storybook/client-api": "^6.5.5",
- "@storybook/preview-web": "^6.5.5",
- "@storybook/react": "^6.5.5",
- "@storybook/testing-library": "^0.0.11",
- "@storybook/testing-react": "^1.3.0",
+ "@storybook/addon-essentials": "8",
+ "@storybook/react": "8",
+ "@storybook/react-vite": "8",
  "@testing-library/jest-dom": "^5.16.4",
  "@testing-library/react": "^12.1.5",
  "@types/react": "^17.0.45",
@@ -38,6 +31,7 @@
  "jsdom": "latest",
  "msw": "^0.49.2",
  "msw-storybook-addon": "^1.6.3",
+ "storybook": "8",
  "typescript": "^5.2.2",
  "vite": "latest",
  "vitest": "latest"

examples/react-storybook/src/App.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 import { posts } from './mockData'
 import * as stories from './App.stories'
 

examples/react-storybook/src/setup.ts

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom'
-import { setGlobalConfig } from '@storybook/testing-react'
+import { setProjectAnnotations } from '@storybook/react'
 import { getWorker } from 'msw-storybook-addon'
-import * as globalStorybookConfig from '../.storybook/preview'
+import * as projectAnnotations from '../.storybook/preview'
 
-setGlobalConfig(globalStorybookConfig)
+setProjectAnnotations(projectAnnotations)
 
 // Ensure MSW connections are closed
 // @ts-expect-error https://github.com/mswjs/msw-storybook-addon/issues/65