feat(examples): update with-storybook to v7

examples/with-storybook/.storybook/main.js

@@ -6,10 +6,14 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    'storybook-addon-next',
+    '@storybook/addon-styling',
   ],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  docs: {
+    autodocs: true,
   },
 }

examples/with-storybook/README.md

@@ -1,6 +1,6 @@
 # Example app with Storybook
 
-This example shows a default set up of Storybook using [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next). Included in this example are stories that demonstrate the ability to use Next.js features in Storybook.
+This example shows a default set up of Storybook. Included in this example are stories that demonstrate the ability to use Next.js features in Storybook. As of v7.0, Storybook has built-in Next.js support, so no addon is needed. If you want to customize the default configuration, refer to the [recipes](https://storybook.js.org/recipes/next#next).
 
 ### TypeScript
 

examples/with-storybook/package.json

@@ -4,8 +4,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "serve-storybook": "serve storybook-static"
   },
   "dependencies": {
@@ -16,15 +16,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/builder-webpack5": "^6.4.9",
-    "@storybook/manager-webpack5": "^6.4.9",
-    "@storybook/react": "^6.4.9",
-    "babel-loader": "^8.2.3",
+    "@storybook/addon-actions": "^7.0.12",
+    "@storybook/addon-essentials": "^7.0.12",
+    "@storybook/addon-links": "^7.0.12",
+    "@storybook/addon-styling": "^1.0.8",
+    "@storybook/nextjs": "^7.0.12",
     "serve": "13.0.2",
-    "storybook-addon-next": "1.3.1",
+    "storybook": "^7.0.12",
     "typescript": "4.5.5"
   }
 }

examples/with-storybook/stories/pages/absoluteImports.stories.jsx

@@ -5,4 +5,4 @@ export default {
   component: AbsoluteImports,
 }
 
-export const AbsoluteImportsPage = () => <AbsoluteImports />
+export const AbsoluteImportsPage = {}

examples/with-storybook/stories/pages/cssModules.stories.jsx

@@ -5,4 +5,4 @@ export default {
   component: CssModules,
 }
 
-export const CssModulesPage = () => <CssModules />
+export const CssModulesPage = {}

examples/with-storybook/stories/pages/globalStyleImports.stories.jsx

@@ -5,4 +5,4 @@ export default {
   component: GlobalStyleImports,
 }
 
-export const GlobalStyleImportsPage = () => <GlobalStyleImports />
+export const GlobalStyleImportsPage = {}

examples/with-storybook/stories/pages/home.stories.jsx

@@ -5,4 +5,4 @@ export default {
   component: Home,
 }
 
-export const HomePage = () => <Home />
+export const HomePage = {}

examples/with-storybook/stories/pages/nextjsImages.stories.jsx

@@ -5,4 +5,4 @@ export default {
   component: NextjsImages,
 }
 
-export const NextjsImagesPage = () => <NextjsImages />
+export const NextjsImagesPage = {}

examples/with-storybook/stories/pages/nextjsRouting.stories.jsx

@@ -5,10 +5,12 @@ export default {
   component: NextjsRouting,
 }
 
-export const NextjsRoutingPage = () => <NextjsRouting />
-
-NextjsRoutingPage.parameters = {
-  nextRouter: {
-    route: 'this-is-a-story-override',
+export const NextjsRoutingPage = {
+  parameters: {
+    nextjs: {
+      router: {
+        route: 'this-is-a-story-override',
+      },
+    },
   },
 }

examples/with-storybook/stories/pages/scssModules.stories.jsx

@@ -5,4 +5,4 @@ export default {
   component: ScssModules,
 }
 
-export const ScssModulesPage = () => <ScssModules />
+export const ScssModulesPage = {}

examples/with-storybook/stories/pages/styledJsx.stories.jsx

@@ -5,4 +5,4 @@ export default {
   component: StyledJsx,
 }
 
-export const StyledJsxPage = () => <StyledJsx />
+export const StyledJsxPage = {}

examples/with-storybook/stories/pages/typescript.stories.tsx

@@ -5,4 +5,4 @@ export default {
   component: Typescript,
 }
 
-export const TypescriptPage = () => <Typescript />
+export const TypescriptPage = {}