diff --git a/apps/site/.storybook/__mocks__/client-context.mjs b/apps/site/.storybook/__mocks__/client-context.mjs
new file mode 100644
index 0000000000000..b5145b2f30a90
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..dc4f2ca56d285
--- /dev/null
+++ b/apps/site/.storybook/__mocks__/navigation.mjs
@@ -0,0 +1,6 @@
+export const { Link, redirect, usePathname, useRouter } = {
+ Link: 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
index 174f47be55331..790e14760e4c2 100644
--- a/apps/site/.storybook/main.ts
+++ b/apps/site/.storybook/main.ts
@@ -1,12 +1,6 @@
-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'],
@@ -14,18 +8,33 @@ const config: StorybookConfig = {
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
+ '' +
+ '' +
// This `' +
- // This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style
- ``,
+ // Injects the Open Sans font as the same font variable defined by `next.fonts.mjs`
+ '' +
+ // Injects the IBM Plex font as the same font variable defined by `next.fonts.mjs`
+ '',
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
index 43e68629f1c56..1cc9e387dce32 100644
--- 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
index 874840458209a..90ed9bd0fb8b0 100644
--- 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