wip nextjs@15 with storybook-webpack (#7203)

Co-authored-by: Claudio Wunder <[email protected]>
nodejs · Nov 8, 2024 · 958af21 · 958af21
1 parent 52d068f
commit 958af21
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 18 deletions.
diff --git a/apps/site/.storybook/__mocks__/client-context.mjs b/apps/site/.storybook/__mocks__/client-context.mjs
@@ -0,0 +1,11 @@
+// todo sidebar is broken - react cache import is a problem
+
+export const getClientContext = () => ({
+  frontmatter: '',
+  pathname: '',
+  headings: [],
+  readingTime: {},
+  filename: '',
+});
+
+export const setClientContext = () => void null;
diff --git a/apps/site/.storybook/__mocks__/navigation.mjs b/apps/site/.storybook/__mocks__/navigation.mjs
@@ -0,0 +1,6 @@
+export const { Link, redirect, usePathname, useRouter } = {
+  Link: props => <a {...props} />,
+  redirect: () => void null,
+  usePathname: () => '',
+  useRouter: () => ({ push: () => void null, replace: () => void null }),
+};
diff --git a/apps/site/.storybook/main.ts b/apps/site/.storybook/main.ts
@@ -1,31 +1,40 @@
-import type { StorybookConfig } from '@storybook/nextjs';
-import classNames from 'classnames';
+import { join } from 'node:path';
 
-const rootClasses = classNames(
-  // note: this is hard-coded sadly as next/font can only be loaded within next.js context
-  '__variable_open-sans-normal',
-  // note: this is hard-coded sadly as next/font can only be loaded within next.js context
-  '__variable_ibm-plex-mono-normal'
-);
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: ['../components/**/*.stories.tsx'],
   logLevel: 'error',
   staticDirs: ['../public'],
   typescript: { reactDocgen: false, check: false },
   core: { disableTelemetry: true, disableWhatsNewNotifications: true },
-  framework: {
-    name: '@storybook/nextjs',
-    options: { builder: { useSWC: true } },
-  },
+  framework: '@storybook/react-webpack5',
+  swc: () => ({ jsc: { transform: { react: { runtime: 'automatic' } } } }),
   previewBody:
+    // This injects Google Fonts as next-fonts is not supported on plain Storybook React
+    '<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' +
+    '<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">' +
     // This `<style>` is necessary to simulate what `next-themes` (ThemeProvider) does on real applications
     // `next-theme` automatically injects the color-scheme based on the system preference or the current applied theme
     // on Storybook we don't use `next-theme` as we want to simulate themes
     '<style>:root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }</style>' +
-    // This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style
-    `<body class="${rootClasses}"></body>`,
+    // Injects the Open Sans font as the same font variable defined by `next.fonts.mjs`
+    '<style>:root { --font-open-sans: "Open Sans"; }</style>' +
+    // Injects the IBM Plex font as the same font variable defined by `next.fonts.mjs`
+    '<style>:root { --font-ibm-plex-mono: "IBM Plex Mono"; }</style>',
   addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader', 'postcss-loader'],
+          },
+        ],
+      },
+    },
     '@storybook/addon-controls',
     '@storybook/addon-interactions',
     '@storybook/addon-themes',
@@ -39,7 +48,15 @@ const config: StorybookConfig = {
     performance: { hints: false },
     // `nodevu` is a Node.js-specific package that requires Node.js modules
     // this is incompatible with Storybook. So we just mock the module
-    resolve: { ...config.resolve, alias: { '@nodevu/core': false } },
+    resolve: {
+      ...config.resolve,
+      alias: {
+        '@nodevu/core': false,
+        '@/navigation.mjs': join(__dirname, '__mocks__/navigation.mjs'),
+        '@/client-context': join(__dirname, '__mocks__/client-context.mjs'),
+        '@': join(__dirname, '../'),
+      },
+    },
     // We need to configure `node:` APIs as Externals to WebPack
     // since essentially they're not supported on the browser
     externals: {

diff --git a/apps/site/.storybook/preview.tsx b/apps/site/.storybook/preview.tsx
@@ -6,12 +6,10 @@ import { NextIntlClientProvider } from 'next-intl';
 import { STORYBOOK_MODES, STORYBOOK_SIZES } from '@/.storybook/constants';
 import { NotificationProvider } from '@/providers/notificationProvider';
 
-import '../next.fonts';
 import '../styles/index.css';
 
 const preview: Preview = {
   parameters: {
-    nextjs: { router: { basePath: '' }, appDirectory: true },
     chromatic: { modes: STORYBOOK_MODES },
     viewport: { defaultViewport: 'large', viewports: STORYBOOK_SIZES },
   },

diff --git a/apps/site/styles/effects.css b/apps/site/styles/effects.css
@@ -35,7 +35,6 @@ h1.special {
     w-36
     -rotate-90
     select-none
-    bg-[url('/static/images/smoke.gif')]
     opacity-[0.15]
     content-['']
     md:-left-1/2