chore: upgrade to storybook 7 & upgrade other dependencies

.storybook/main.js

 const path = require('path');
 
 module.exports = {
-  typescript: { reactDocgen: false },
-  core: {
-    builder: 'webpack5'
-  },
-  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      name: '@storybook/preset-scss',
-      options: {
-        cssLoaderOptions: {
-          modules: {
-            localIdentName: '[local]--[hash:base64:5]'
-          }
-        }
-      }
-    }
-  ],
+  stories: ['../components/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   webpackFinal: (config) => {
     config.resolve = {
       ...config.resolve,
       alias: {
         ...config.resolve.alias,
-        'next/link': path.resolve(__dirname, '../stories/__mocks__/link.js'),
         '@components': path.resolve(__dirname, '../components'),
-        '@containers': path.resolve(__dirname, '../containers'),
+        '@contexts': path.resolve(__dirname, '../contexts'),
         '@lib': path.resolve(__dirname, '../lib'),
         '@styles': path.resolve(__dirname, '../styles')
       }
     };
-
     return config;
+  },
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
   }
 };

.storybook/preview.js

-import * as NextImage from 'next/image';
-import '!style-loader!css-loader!sass-loader!@styles/global.scss';
+import '@styles/global.scss';
 
 export const parameters = {
   options: {
     storySort: (a, b) => {
       // We want the Welcome story at the top
-      if (b[1].kind === 'Welcome') {
+      if (b.title === 'Welcome') {
         return 1;
       }
 
       // Sort the other stories by ID
       // https://github.com/storybookjs/storybook/issues/548#issuecomment-530305279
-      return a[1].kind === b[1].kind
+      return a.title === b.title
         ? 0
-        : a[1].id.localeCompare(b[1].id, { numeric: true });
+        : a.id.localeCompare(b.id, { numeric: true });
     }
+  },
+  backgrounds: {
+    default: 'Light',
+    values: [
+      {
+        name: 'Light',
+        value: '#ffffff'
+      },
+      {
+        name: 'Dark',
+        value: '#333333'
+      },
+      {
+        name: 'Gray',
+        value: '#e8e8e8'
+      }
+    ]
   }
 };
-
-/** set a fallback for next/image */
-const OriginalNextImage = NextImage.default;
-Object.defineProperty(NextImage, 'default', {
-  configurable: true,
-  value: (props) => <OriginalNextImage {...props} unoptimized />
-});

app/another/page.js

@@ -4,7 +4,7 @@ const AnotherPage = () => {
   return (
     <div className="container">
       <center style={{ padding: '2em' }}>
-        <h3 style={{ fontWeight: 'normal' }}>You're landed on another page</h3>
+        <h3 style={{ fontWeight: 'normal' }}>You've landed on another page</h3>
         <Button size="small" href="/">
           View home page
         </Button>

stories/01-basic/01-button.stories.js → components/button/button.stories.js

 import React from 'react';
-import { Space, DarkBg } from '../_helpers';
-import Button from '@components/button';
+import { Space } from '@lib/storybook-helpers';
+import Button from './';
 
 export default {
   title: 'Basic/Button',

components/page-not-found/page-not-found.stories.js

+import React from 'react';
+import PageNotFound from './';
+
+export default {
+  title: 'Layout/PageNotFound',
+  component: PageNotFound,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export const Default = (args) => <PageNotFound />;

lib/storybook-helpers.js

+import { useEffect, useState } from 'react';
+import Button from '@components/button';
+
+export const NoPadding = (props) => {
+  useEffect(() => {
+    document.body.style.padding = '0';
+    return () => (document.body.style.padding = '');
+  });
+
+  return <div {...props} />;
+};
+
+export const Space = (props) =>
+  props.children.map((element) => (
+    <div style={{ padding: '0.5em', display: 'inline-block' }}>{element}</div>
+  ));
+
+export const DirSwitch = ({ defaultDir = 'ltr', children }) => {
+  const [dir, setDir] = useState(defaultDir);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('dir', dir);
+  }, [dir]);
+
+  return (
+    <>
+      {typeof children === 'function' ? children(dir) : children}
+      <p style={{ position: 'fixed', right: '1em', bottom: '1em', zIndex: 99 }}>
+        {dir === 'rtl' ? (
+          <Button size="sm" onClick={() => setDir('ltr')}>
+            Switch to LTR
+          </Button>
+        ) : (
+          <Button size="sm" onClick={() => setDir('rtl')}>
+            Switch to RTL
+          </Button>
+        )}
+      </p>
+    </>
+  );
+};

package.json

@@ -6,38 +6,36 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "storybook": "start-storybook -s ./public -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -s ./public -p 6006",
+    "build-storybook": "storybook build",
     "analyze": "cross-env ANALYZE=true next build"
   },
   "dependencies": {
     "classnames": "^2.3.2",
     "css-loader": "^6.7.3",
-    "next": "^13.2.4",
-    "next-images": "^1.8.4",
+    "next": "^13.4.1",
+    "next-images": "^1.8.5",
     "normalize.css": "^8.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sass": "^1.59.2",
-    "sass-loader": "^13.2.0",
-    "sharp": "^0.31.3",
-    "style-loader": "^3.3.1"
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
+    "sharp": "^0.32.1",
+    "style-loader": "^3.3.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.16",
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "@storybook/addon-essentials": "^7.0.9",
+    "@storybook/addon-links": "^7.0.9",
+    "@storybook/nextjs": "^7.0.9",
     "babel-loader": "^9.1.2",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "husky": "^8.0.3",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
+    "storybook": "^7.0.9",
     "webpack-bundle-analyzer": "^4.8.0"
   }
 }

stories/03-layout/page-not-found.stories.js

-import React from 'react';
-import { NoPadding } from '../_helpers';
-import PageNotFound from '@components/page-not-found';
-
-export default {
-  title: 'Layout/PageNotFound',
-  component: PageNotFound
-};
-
-export const Default = (args) => (
-  <NoPadding>
-    <PageNotFound />
-  </NoPadding>
-);

stories/__mocks__/link.js

-/** Mock for next/link */
-export default function ({ children, ...rest }) {
-  return <a {...rest}>{children}</a>;
-}

stories/_helpers.js

-import { useEffect } from 'react';
-
-export const NoPadding = (props) => {
-  useEffect(() => {
-    document.body.style.padding = '0';
-    return () => (document.body.style.padding = '');
-  });
-
-  return <div {...props} />;
-};
-
-export const DarkBg = (props) => {
-  useEffect(() => {
-    document.body.style.background = '#333';
-    document.body.style.color = '#ccc';
-    return () => {
-      document.body.style.background = '';
-      document.body.style.color = '';
-    };
-  });
-
-  return <>{props.children}</>;
-};
-
-export const Space = (props) =>
-  props.children.map((element) => (
-    <div style={{ padding: '0.5em', display: 'inline-block' }}>{element}</div>
-  ));