Release: Patch 8.1.6

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 8.1.6
+
+- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!
+- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!
+- Tags: Fix unsafe project-level tags lookup - [#27511](https://github.com/storybookjs/storybook/pull/27511), thanks @shilman!
+- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!
+
 ## 8.1.5
 
 - CSF-Tools: Fix export specifier bug - [#27418](https://github.com/storybookjs/storybook/pull/27418), thanks @valentinpalkovic!

code/addons/docs/docs/recipes.md

@@ -259,16 +259,18 @@ Example.parameters = {
 };
 ```
 
-Alternatively, you can provide a function in the `docs.transformSource` parameter. For example, the following snippet in `.storybook/preview.js` globally removes the arrow at the beginning of a function that returns a string:
+Alternatively, you can provide a function in the `docs.source.transform` parameter. For example, the following snippet in `.storybook/preview.js` globally removes the arrow at the beginning of a function that returns a string:
 
 ```js
 const SOURCE_REGEX = /^\(\) => `(.*)`$/;
 export const parameters = {
   docs: {
-    transformSource: (src, storyContext) => {
-      const match = SOURCE_REGEX.exec(src);
-      return match ? match[1] : src;
-    },
+    source: {
+      transform: (src, storyContext) => {
+        const match = SOURCE_REGEX.exec(src);
+        return match ? match[1] : src;
+      }
+    }
   },
 };
 ```

code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts

@@ -2,6 +2,7 @@
 
 import type { BuilderStats } from '@storybook/types';
 import path from 'path';
+import slash from 'slash';
 import type { Plugin } from 'vite';
 
 /*
@@ -58,7 +59,7 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W
     else {
       const relativePath = path.relative(workingDir, stripQueryParams(filename));
       // This seems hacky, got to be a better way to add a `./` to the start of a path.
-      return `./${relativePath}`;
+      return `./${slash(relativePath)}`;
     }
   }
 

code/lib/cli/src/upgrade.test.ts

@@ -1,10 +1,8 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import * as sbcc from '@storybook/core-common';
-import {
-  UpgradeStorybookToLowerVersionError,
-  UpgradeStorybookToSameVersionError,
-} from '@storybook/core-events/server-errors';
+import { UpgradeStorybookToLowerVersionError } from '@storybook/core-events/server-errors';
 import { doUpgrade, getStorybookVersion } from './upgrade';
+import { logger } from '@storybook/node-logger';
 
 const findInstallationsMock = vi.fn<string[], Promise<sbcc.InstallationMetadata | undefined>>();
 
@@ -16,6 +14,8 @@ vi.mock('@storybook/core-common', async (importOriginal) => {
     JsPackageManagerFactory: {
       getPackageManager: () => ({
         findInstallations: findInstallationsMock,
+        latestVersion: async () => '8.0.0',
+        retrievePackageJson: async () => {},
         getAllDependencies: async () => ({ storybook: '8.0.0' }),
       }),
     },
@@ -68,7 +68,7 @@ describe('Upgrade errors', () => {
     await expect(doUpgrade({} as any)).rejects.toThrowError(UpgradeStorybookToLowerVersionError);
     expect(findInstallationsMock).toHaveBeenCalledWith(Object.keys(sbcc.versions));
   });
-  it('should throw an error when upgrading to the same version number', async () => {
+  it('should show a warning when upgrading to the same version number', async () => {
     findInstallationsMock.mockResolvedValue({
       dependencies: {
         '@storybook/cli': [
@@ -82,7 +82,15 @@ describe('Upgrade errors', () => {
       dedupeCommand: '',
     });
 
-    await expect(doUpgrade({} as any)).rejects.toThrowError(UpgradeStorybookToSameVersionError);
+    // Mock as a throw, so that we don't have to mock the content of the doUpgrade fn that comes after it
+    vi.spyOn(logger, 'warn').mockImplementation((error) => {
+      // eslint-disable-next-line @typescript-eslint/no-throw-literal
+      throw error;
+    });
+
+    await expect(doUpgrade({ packageManager: 'npm' } as any)).rejects.toContain(
+      'You are upgrading Storybook to the same version that is currently installed in the project'
+    );
     expect(findInstallationsMock).toHaveBeenCalledWith(Object.keys(sbcc.versions));
   });
 });

code/lib/cli/src/upgrade.ts

@@ -143,8 +143,10 @@ export const doUpgrade = async ({
   if (!isCanary && lt(currentVersion, beforeVersion)) {
     throw new UpgradeStorybookToLowerVersionError({ beforeVersion, currentVersion });
   }
+
   if (!isCanary && eq(currentVersion, beforeVersion)) {
-    throw new UpgradeStorybookToSameVersionError({ beforeVersion });
+    // Not throwing, as the beforeVersion calculation doesn't always work in monorepos.
+    logger.warn(new UpgradeStorybookToSameVersionError({ beforeVersion }).message);
   }
 
   const [latestVersion, packageJson, storybookVersion] = await Promise.all([

code/lib/core-events/src/errors/server-errors.ts

@@ -545,7 +545,7 @@ export class UpgradeStorybookToSameVersionError extends StorybookError {
 
   template() {
     return dedent`
-      You are trying to upgrade Storybook to the same version that is currently installed in the project, version ${this.data.beforeVersion}. This is not supported.
+      You are upgrading Storybook to the same version that is currently installed in the project, version ${this.data.beforeVersion}.
 
       This usually happens when running the upgrade command without a version specifier, e.g. "npx storybook upgrade".
       This will cause npm to run the globally cached storybook binary, which might be the same version that you already have.

code/lib/core-server/package.json

@@ -87,7 +87,6 @@
     "express": "^4.17.3",
     "fs-extra": "^11.1.0",
     "globby": "^14.0.1",
-    "ip": "^2.0.1",
     "lodash": "^4.17.21",
     "open": "^8.4.0",
     "pretty-hrtime": "^1.0.3",
@@ -105,7 +104,6 @@
   "devDependencies": {
     "@storybook/addon-docs": "workspace:*",
     "@types/compression": "^1.7.0",
-    "@types/ip": "^1.1.0",
     "@types/node-fetch": "^2.5.7",
     "@types/ws": "^8",
     "boxen": "^7.1.1",

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -672,8 +672,24 @@ export class StoryIndexGenerator {
     const defaultTags = ['dev', 'test'];
     const extraTags = this.options.docs.autodocs === true ? [AUTODOCS_TAG] : [];
     if (previewCode) {
-      const projectAnnotations = loadConfig(previewCode).parse();
-      projectTags = projectAnnotations.getFieldValue(['tags']) ?? [];
+      try {
+        const projectAnnotations = loadConfig(previewCode).parse();
+        projectTags = projectAnnotations.getFieldValue(['tags']) ?? [];
+      } catch (err) {
+        once.warn(dedent`
+          Unable to parse tags from project configuration. If defined, tags should be specified inline, e.g.
+
+          export default {
+            tags: ['foo'],
+          }
+
+          ---
+
+          Received:
+
+          ${previewCode}
+        `);
+      }
     }
     return [...defaultTags, ...projectTags, ...extraTags];
   }

code/lib/core-server/src/utils/__tests__/server-address.test.ts

@@ -1,13 +1,24 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import ip from 'ip';
+import os, { type NetworkInterfaceInfoIPv4 } from 'os';
 import { getServerAddresses } from '../server-address';
 
-vi.mock('ip');
-const mockedIp = vi.mocked(ip);
+vi.mock('os');
+const mockedOs = vi.mocked(os);
 
 describe('getServerAddresses', () => {
+  const mockedNetworkAddress: NetworkInterfaceInfoIPv4 = {
+    address: '192.168.0.5',
+    netmask: '255.255.255.0',
+    family: 'IPv4',
+    mac: '01:02:03:0a:0b:0c',
+    internal: false,
+    cidr: '192.168.0.5/24',
+  };
+
   beforeEach(() => {
-    mockedIp.address.mockReturnValue('192.168.0.5');
+    mockedOs.networkInterfaces.mockReturnValue({
+      eth0: [mockedNetworkAddress],
+    });
   });
 
   it('builds addresses with a specified host', () => {
@@ -19,6 +30,15 @@ describe('getServerAddresses', () => {
   it('builds addresses with local IP when host is not specified', () => {
     const { address, networkAddress } = getServerAddresses(9009, '', 'http');
     expect(address).toEqual('http://localhost:9009/');
-    expect(networkAddress).toEqual('http://192.168.0.5:9009/');
+    expect(networkAddress).toEqual(`http://${mockedNetworkAddress.address}:9009/`);
+  });
+
+  it('builds addresses with default address when host is not specified and external IPv4 is not found', () => {
+    mockedOs.networkInterfaces.mockReturnValueOnce({
+      eth0: [{ ...mockedNetworkAddress, internal: true }],
+    });
+    const { address, networkAddress } = getServerAddresses(9009, '', 'http');
+    expect(address).toEqual('http://localhost:9009/');
+    expect(networkAddress).toEqual('http://0.0.0.0:9009/');
   });
 });

code/lib/core-server/src/utils/server-address.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, vi } from 'vitest';
 import detectPort from 'detect-port';
 import { getServerAddresses, getServerPort, getServerChannelUrl } from './server-address';
 
-vi.mock('ip');
+vi.mock('os');
 vi.mock('detect-port');
 vi.mock('@storybook/node-logger');
 

code/lib/core-server/src/utils/server-address.ts

@@ -1,4 +1,4 @@
-import ip from 'ip';
+import os from 'os';
 
 import { logger } from '@storybook/node-logger';
 import detectFreePort from 'detect-port';
@@ -10,7 +10,7 @@ export function getServerAddresses(
   initialPath?: string
 ) {
   const address = new URL(`${proto}://localhost:${port}/`);
-  const networkAddress = new URL(`${proto}://${host || ip.address()}:${port}/`);
+  const networkAddress = new URL(`${proto}://${host || getLocalIp()}:${port}/`);
 
   if (initialPath) {
     const searchParams = `?path=${decodeURIComponent(
@@ -46,3 +46,10 @@ export const getServerPort = (port?: number, { exactPort }: PortOptions = {}) =>
 export const getServerChannelUrl = (port: number, { https }: { https?: boolean }) => {
   return `${https ? 'wss' : 'ws'}://localhost:${port}/storybook-server-channel`;
 };
+
+const getLocalIp = () => {
+  const allIps = Object.values(os.networkInterfaces()).flat();
+  const allFilteredIps = allIps.filter((ip) => ip && ip.family === 'IPv4' && !ip.internal);
+
+  return allFilteredIps.length ? allFilteredIps[0]?.address : '0.0.0.0';
+};

code/package.json

@@ -299,5 +299,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.1.6"
 }

code/yarn.lock

@@ -5976,7 +5976,6 @@ __metadata:
     "@types/compression": "npm:^1.7.0"
     "@types/detect-port": "npm:^1.3.0"
     "@types/diff": "npm:^5.0.9"
-    "@types/ip": "npm:^1.1.0"
     "@types/node": "npm:^18.0.0"
     "@types/node-fetch": "npm:^2.5.7"
     "@types/pretty-hrtime": "npm:^1.0.0"
@@ -5993,7 +5992,6 @@ __metadata:
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
     globby: "npm:^14.0.1"
-    ip: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
     node-fetch: "npm:^3.3.1"
     open: "npm:^8.4.0"
@@ -7984,15 +7982,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ip@npm:^1.1.0":
-  version: 1.1.3
-  resolution: "@types/ip@npm:1.1.3"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/af576e33830196be01b71c48ad5f83380a1c51d62f394a5601e8c2a5b8b31cf6dc8fe71ac39c38d806bcf1d6f1c5c8205c129eca6b6d168c0df7ab3722df23b9
-  languageName: node
-  linkType: hard
-
 "@types/is-empty@npm:^1.0.0":
   version: 1.2.3
   resolution: "@types/is-empty@npm:1.2.3"
@@ -17527,7 +17516,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ip@npm:^2.0.0, ip@npm:^2.0.1":
+"ip@npm:^2.0.0":
   version: 2.0.1
   resolution: "ip@npm:2.0.1"
   checksum: 10c0/cab8eb3e88d0abe23e4724829621ec4c4c5cb41a7f936a2e626c947128c1be16ed543448d42af7cca95379f9892bfcacc1ccd8d09bc7e8bea0e86d492ce33616

docs/snippets/angular/before-each-in-meta-mock-date.ts.mdx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import MockDate from 'mockdate';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { getUserFromSession } from '../../api/session.mock';
+import { getUserFromSession } from '#api/session.mock';
 import { Page } from './Page';
 
 const meta: Meta<Page> = {

docs/snippets/angular/storybook-test-fn-mock-spy.ts.mdx

@@ -4,8 +4,8 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { expect, userEvent, within } from '@storybook/test';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { saveNote } from '../../app/actions.mock';
-import { createNotes } from '../../mocks/notes';
+import { saveNote } from '#app/actions.mock';
+import { createNotes } from '#mocks/notes';
 import NoteUI from './note-ui';
 
 const meta: Meta<NoteUI> = {

docs/snippets/angular/storybook-test-mock-return-value.ts.mdx

@@ -3,7 +3,7 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { getUserFromSession } from '../../api/session.mock';
+import { getUserFromSession } from '#api/session.mock';
 import { Page } from './Page';
 
 const meta: Meta<Page> = {

docs/snippets/common/before-each-in-meta-mock-date.js.mdx

@@ -2,7 +2,7 @@
 // Page.stories.js
 import MockDate from 'mockdate';
 
-import { getUserFromSession } from '../../api/session.mock';
+import { getUserFromSession } from '#api/session.mock';
 import { Page } from './Page';
 
 export default {

docs/snippets/common/before-each-in-meta-mock-date.ts-4-9.mdx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/your-renderer';
 import MockDate from 'mockdate';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { getUserFromSession } from '../../api/session.mock';
+import { getUserFromSession } from '#api/session.mock';
 import { Page } from './Page';
 
 const meta = {

docs/snippets/common/before-each-in-meta-mock-date.ts.mdx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/your-renderer';
 import MockDate from 'mockdate';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { getUserFromSession } from '../../api/session.mock';
+import { getUserFromSession } from '#api/session.mock';
 import { Page } from './Page';
 
 const meta: Meta<typeof Page> = {

docs/snippets/common/storybook-test-fn-mock-spy.js.mdx

@@ -2,8 +2,8 @@
 // NoteUI.stories.js
 import { expect, userEvent, within } from '@storybook/test';
 
-import { saveNote } from '../../app/actions.mock';
-import { createNotes } from '../../mocks/notes';
+import { saveNote } from '#app/actions.mock';
+import { createNotes } from '#mocks/notes';
 import NoteUI from './note-ui';
 
 export default {

docs/snippets/common/storybook-test-fn-mock-spy.ts-4-9.mdx

@@ -5,8 +5,8 @@ import type { Meta, StoryObj } from '@storybook/your-renderer';
 import { expect, userEvent, within } from '@storybook/test';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { saveNote } from '../../app/actions.mock';
-import { createNotes } from '../../mocks/notes';
+import { saveNote } from '#app/actions.mock';
+import { createNotes } from '#mocks/notes';
 import NoteUI from './note-ui';
 
 const meta = {

docs/snippets/common/storybook-test-fn-mock-spy.ts.mdx

@@ -5,8 +5,8 @@ import type { Meta, StoryObj } from '@storybook/your-renderer';
 import { expect, userEvent, within } from '@storybook/test';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
-import { saveNote } from '../../app/actions.mock';
-import { createNotes } from '../../mocks/notes';
+import { saveNote } from '#app/actions.mock';
+import { createNotes } from '#mocks/notes';
 import NoteUI from './note-ui';
 
 const meta: Meta<typeof NoteUI> = {

docs/snippets/common/storybook-test-mock-return-value.js.mdx

@@ -1,6 +1,6 @@
 ```js
 // Page.stories.js
-import { getUserFromSession } from '../../api/session.mock';
+import { getUserFromSession } from '#api/session.mock';
 import { Page } from './Page';
 
 export default {