Merge pull request #23458 from storybookjs/valentin/fix-monorepositor…

…y-setups

CLI: Improve support of mono repositories

code/builders/builder-vite/src/index.ts

@@ -25,7 +25,8 @@ export * from './types';
  */
 export type StorybookViteConfig = StorybookBaseConfig & StorybookConfigVite;
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandler {
   return async (req, res, next) => {
@@ -66,7 +67,7 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as Options, devServer);
 
-  const previewResolvedDir = wrapForPnP('@storybook/preview');
+  const previewResolvedDir = getAbsolutePath('@storybook/preview');
   const previewDirOrigin = join(previewResolvedDir, 'dist');
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@@ -84,7 +85,7 @@ export const start: ViteBuilder['start'] = async ({
 export const build: ViteBuilder['build'] = async ({ options }) => {
   const viteCompilation = viteBuild(options as Options);
 
-  const previewResolvedDir = wrapForPnP('@storybook/preview');
+  const previewResolvedDir = getAbsolutePath('@storybook/preview');
   const previewDirOrigin = join(previewResolvedDir, 'dist');
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 

code/builders/builder-webpack5/package.json

@@ -55,7 +55,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.22.0",
+    "@babel/core": "^7.22.9",
     "@storybook/addons": "7.1.0",
     "@storybook/channels": "7.1.0",
     "@storybook/client-api": "7.1.0",

code/builders/builder-webpack5/src/index.ts

@@ -20,7 +20,8 @@ export const printDuration = (startTime: [number, number]) =>
     .replace(' s', ' seconds')
     .replace(' m', ' minutes');
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 let compilation: ReturnType<typeof webpackDevMiddleware> | undefined;
 let reject: (reason?: any) => void;
@@ -175,7 +176,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   compilation = webpackDevMiddleware(compiler, middlewareOptions);
 
-  const previewResolvedDir = wrapForPnP('@storybook/preview');
+  const previewResolvedDir = getAbsolutePath('@storybook/preview');
   const previewDirOrigin = join(previewResolvedDir, 'dist');
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@@ -288,7 +289,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     });
   });
 
-  const previewResolvedDir = wrapForPnP('@storybook/preview');
+  const previewResolvedDir = getAbsolutePath('@storybook/preview');
   const previewDirOrigin = join(previewResolvedDir, 'dist');
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -27,7 +27,8 @@ import { dedent } from 'ts-dedent';
 import type { BuilderOptions, TypescriptOptions } from '../types';
 import { createBabelLoader, createSWCLoader } from './loaders';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 const storybookPaths: Record<string, string> = {
   ...[
@@ -40,12 +41,12 @@ const storybookPaths: Record<string, string> = {
   ].reduce(
     (acc, sbPackage) => ({
       ...acc,
-      [`@storybook/${sbPackage}`]: wrapForPnP(`@storybook/${sbPackage}`),
+      [`@storybook/${sbPackage}`]: getAbsolutePath(`@storybook/${sbPackage}`),
     }),
     {}
   ),
   // deprecated, remove in 8.0
-  [`@storybook/api`]: wrapForPnP(`@storybook/manager-api`),
+  [`@storybook/api`]: getAbsolutePath(`@storybook/manager-api`),
 };
 
 export default async (

code/frameworks/angular/src/preset.ts

@@ -3,7 +3,8 @@ import { PresetProperty } from '@storybook/types';
 import { StorybookConfig } from './types';
 import { StandaloneOptions } from './builders/utils/standalone-options';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   require.resolve('./server/framework-preset-angular-cli'),
@@ -30,7 +31,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
+      name: getAbsolutePath('@storybook/builder-webpack5'),
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
   };

code/frameworks/ember/src/preset.ts

@@ -2,7 +2,8 @@ import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   require.resolve('./server/framework-preset-babel-ember'),
@@ -15,7 +16,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
+      name: getAbsolutePath('@storybook/builder-webpack5'),
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
   };

code/frameworks/html-vite/src/preset.ts

@@ -1,7 +1,12 @@
 import type { PresetProperty } from '@storybook/types';
+import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
+function getAbsolutePath<I extends string>(value: I): I {
+  return dirname(require.resolve(join(value, 'package.json'))) as any;
+}
+
 export const core: PresetProperty<'core', StorybookConfig> = {
-  builder: '@storybook/builder-vite',
-  renderer: '@storybook/html',
+  builder: getAbsolutePath('@storybook/builder-vite'),
+  renderer: getAbsolutePath('@storybook/html'),
 };

code/frameworks/html-webpack5/src/preset.ts

@@ -2,10 +2,11 @@ import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  wrapForPnP('@storybook/preset-html-webpack'),
+  getAbsolutePath('@storybook/preset-html-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
+      name: getAbsolutePath('@storybook/builder-webpack5'),
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: wrapForPnP('@storybook/html'),
+    renderer: getAbsolutePath('@storybook/html'),
   };
 };

code/frameworks/nextjs/package.json

@@ -64,12 +64,12 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-syntax-bigint": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-import-assertions": "^7.20.0",
-    "@babel/plugin-transform-runtime": "^7.22.0",
-    "@babel/preset-env": "^7.22.0",
-    "@babel/preset-react": "^7.22.0",
-    "@babel/preset-typescript": "^7.21.0",
-    "@babel/runtime": "^7.22.0",
+    "@babel/plugin-syntax-import-assertions": "^7.22.5",
+    "@babel/plugin-transform-runtime": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@babel/runtime": "^7.22.6",
     "@storybook/addon-actions": "7.1.0",
     "@storybook/builder-webpack5": "7.1.0",
     "@storybook/core-common": "7.1.0",
@@ -97,8 +97,8 @@
     "tsconfig-paths-webpack-plugin": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.0",
-    "@babel/types": "^7.22.0",
+    "@babel/core": "^7.22.9",
+    "@babel/types": "^7.22.5",
     "@types/babel__core": "^7",
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",

code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts

@@ -29,7 +29,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex
 
       return `@font-face {
           font-family: ${id};
-          src: url(${localFontPath});
+          src: url(.${localFontPath});
       }`;
     }
     return localFontSrc
@@ -38,7 +38,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex
 
         return `@font-face {
           font-family: ${id};
-          src: url(${localFontPath});
+          src: url(.${localFontPath});
           ${font.weight ? `font-weight: ${font.weight};` : ''}
           ${font.style ? `font-style: ${font.style};` : ''}
         }`;

code/frameworks/preact-vite/src/preset.ts

@@ -1,11 +1,15 @@
 import { hasVitePlugins } from '@storybook/builder-vite';
 import type { PresetProperty } from '@storybook/types';
 import preact from '@preact/preset-vite';
+import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
+
 export const core: PresetProperty<'core', StorybookConfig> = {
-  builder: '@storybook/builder-vite',
-  renderer: '@storybook/preact',
+  builder: getAbsolutePath('@storybook/builder-vite'),
+  renderer: getAbsolutePath('@storybook/preact'),
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config) => {

code/frameworks/preact-webpack5/src/preset.ts

@@ -2,10 +2,11 @@ import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  wrapForPnP('@storybook/preset-preact-webpack'),
+  getAbsolutePath('@storybook/preset-preact-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
+      name: getAbsolutePath('@storybook/builder-webpack5'),
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: wrapForPnP('@storybook/preact'),
+    renderer: getAbsolutePath('@storybook/preact'),
   };
 };

code/frameworks/react-vite/src/preset.ts

@@ -4,11 +4,12 @@ import { hasVitePlugins } from '@storybook/builder-vite';
 import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const core: PresetProperty<'core', StorybookConfig> = {
-  builder: wrapForPnP('@storybook/builder-vite') as '@storybook/builder-vite',
-  renderer: wrapForPnP('@storybook/react'),
+  builder: getAbsolutePath('@storybook/builder-vite'),
+  renderer: getAbsolutePath('@storybook/react'),
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {

code/frameworks/react-webpack5/src/preset.ts

@@ -4,10 +4,11 @@ import { dirname, join } from 'path';
 import type { PresetProperty, Options } from '@storybook/types';
 import type { FrameworkOptions, StorybookConfig } from './types';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  wrapForPnP('@storybook/preset-react-webpack'),
+  getAbsolutePath('@storybook/preset-react-webpack'),
 ];
 
 const defaultFrameworkOptions: FrameworkOptions = {
@@ -28,7 +29,7 @@ export const frameworkOptions = async (
   }
   if (typeof config === 'undefined') {
     return {
-      name: wrapForPnP('@storybook/react-webpack5') as '@storybook/react-webpack5',
+      name: getAbsolutePath('@storybook/react-webpack5'),
       options: defaultFrameworkOptions,
     };
   }
@@ -48,10 +49,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
+      name: getAbsolutePath('@storybook/builder-webpack5'),
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: wrapForPnP('@storybook/react'),
+    renderer: getAbsolutePath('@storybook/react'),
   };
 };
 
@@ -60,7 +61,7 @@ export const webpack: StorybookConfig['webpack'] = async (config) => {
 
   config.resolve.alias = {
     ...config.resolve?.alias,
-    '@storybook/react': wrapForPnP('@storybook/react'),
+    '@storybook/react': getAbsolutePath('@storybook/react'),
   };
   return config;
 };

code/frameworks/server-webpack5/src/preset.ts

@@ -2,10 +2,11 @@ import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  wrapForPnP('@storybook/preset-server-webpack'),
+  getAbsolutePath('@storybook/preset-server-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
+      name: getAbsolutePath('@storybook/builder-webpack5'),
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: wrapForPnP('@storybook/server'),
+    renderer: getAbsolutePath('@storybook/server'),
   };
 };

code/frameworks/svelte-vite/src/preset.ts

@@ -1,12 +1,16 @@
 import { hasVitePlugins } from '@storybook/builder-vite';
 import type { PresetProperty } from '@storybook/types';
+import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 import { handleSvelteKit } from './utils';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
+
 export const core: PresetProperty<'core', StorybookConfig> = {
-  builder: '@storybook/builder-vite',
-  renderer: '@storybook/svelte',
+  builder: getAbsolutePath('@storybook/builder-vite'),
+  renderer: getAbsolutePath('@storybook/svelte'),
 };
 
 export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {

code/frameworks/svelte-webpack5/src/preset.ts

@@ -2,10 +2,11 @@ import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
-const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+const getAbsolutePath = <I extends string>(input: I): I =>
+  dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  wrapForPnP('@storybook/preset-svelte-webpack'),
+  getAbsolutePath('@storybook/preset-svelte-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -14,9 +15,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
+      name: getAbsolutePath('@storybook/builder-webpack5'),
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: wrapForPnP('@storybook/svelte'),
+    renderer: getAbsolutePath('@storybook/svelte'),
   };
 };