Release: Patch 7.6.7

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.6.7
+
+- Core: Skip no-framework error when ignorePreview=true - [#25286](https://github.com/storybookjs/storybook/pull/25286), thanks [@ndelangen](https://github.com/ndelangen)!
+- Dependencies: Semver dependency fixes - [#25283](https://github.com/storybookjs/storybook/pull/25283), thanks [@ndelangen](https://github.com/ndelangen)!
+- Vite: Fix pre-transform error in Vite 5 - [#25329](https://github.com/storybookjs/storybook/pull/25329), thanks [@yannbf](https://github.com/yannbf)!
+- Vue3: Fix pnp by making compiler-core a dependency - [#25311](https://github.com/storybookjs/storybook/pull/25311), thanks [@shilman](https://github.com/shilman)!
+
 ## 7.6.6
 
 - SvelteKit: Support 2.0 modules with mocks - [#25244](https://github.com/storybookjs/storybook/pull/25244), thanks [@paoloricciuti](https://github.com/paoloricciuti)!

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

@@ -11,6 +11,8 @@ export async function createViteServer(options: Options, devServer: Server) {
 
   const config = {
     ...commonCfg,
+    // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256
+    assetsInclude: ['/sb-preview/**'],
     // Set up dev server
     server: {
       middlewareMode: true,

code/frameworks/nextjs/package.json

@@ -107,6 +107,7 @@
     "@storybook/preview-api": "workspace:*",
     "@storybook/react": "workspace:*",
     "@types/node": "^18.0.0",
+    "@types/semver": "^7.3.4",
     "css-loader": "^6.7.3",
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",

code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx

@@ -24,7 +24,7 @@ function Component() {
       name: 'Prefetch',
     },
     {
-      // @ts-expect-error (old-api)
+      // @ts-expect-error (a legacy nextjs api?)
       cb: () => router.push('/push-html', { forceOptimisticNavigation: true }),
       name: 'Push HTML',
     },
@@ -33,7 +33,7 @@ function Component() {
       name: 'Refresh',
     },
     {
-      // @ts-expect-error (old-api)
+      // @ts-expect-error (a legacy nextjs api?)
       cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }),
       name: 'Replace',
     },

code/lib/cli/package.json

@@ -102,7 +102,6 @@
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
-    "@types/semver": "^7.3.4",
     "@types/util-deprecate": "^1.0.0",
     "boxen": "^5.1.2",
     "slash": "^5.0.0",

code/lib/core-server/src/build-dev.ts

@@ -74,10 +74,15 @@ export async function buildDevStandalone(
   const { framework } = config;
   const corePresets = [];
 
-  const frameworkName = typeof framework === 'string' ? framework : framework?.name;
-  validateFrameworkName(frameworkName);
+  let frameworkName = typeof framework === 'string' ? framework : framework?.name;
+  if (!options.ignorePreview) {
+    validateFrameworkName(frameworkName);
+  }
+  if (frameworkName) {
+    corePresets.push(join(frameworkName, 'preset'));
+  }
 
-  corePresets.push(join(frameworkName, 'preset'));
+  frameworkName = frameworkName || 'custom';
 
   try {
     await warnOnIncompatibleAddons(config);

code/lib/core-server/src/build-static.ts

@@ -73,7 +73,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
   const frameworkName = typeof framework === 'string' ? framework : framework?.name;
   if (frameworkName) {
     corePresets.push(join(frameworkName, 'preset'));
-  } else {
+  } else if (!options.ignorePreview) {
     logger.warn(`you have not specified a framework in your ${options.configDir}/main.js`);
   }
 

code/lib/manager-api/package.json

@@ -54,7 +54,6 @@
     "dequal": "^2.0.2",
     "lodash": "^4.17.21",
     "memoizerific": "^1.11.3",
-    "semver": "^7.3.7",
     "store2": "^2.14.2",
     "telejson": "^7.2.0",
     "ts-dedent": "^2.0.0"
@@ -63,10 +62,12 @@
     "@jest/globals": "^29.3.1",
     "@types/lodash": "^4.14.167",
     "@types/qs": "^6",
+    "@types/semver": "^7.3.4",
     "flush-promises": "^1.0.2",
     "qs": "^6.10.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
+    "semver": "^7.3.7",
     "typescript": "~4.9.3"
   },
   "publishConfig": {

code/package.json

@@ -328,5 +328,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.6.7"
 }

code/presets/create-react-app/package.json

@@ -53,6 +53,7 @@
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
     "@storybook/types": "workspace:*",
     "@types/babel__core": "^7.1.7",
+    "@types/semver": "^7.3.4",
     "pnp-webpack-plugin": "^1.7.0",
     "semver": "^7.3.5"
   },

code/renderers/vue3/package.json

@@ -52,6 +52,7 @@
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",
+    "@vue/compiler-core": "^3.0.0",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19",
@@ -60,15 +61,13 @@
   "devDependencies": {
     "@digitak/esrun": "^3.2.2",
     "@types/prettier": "2.7.2",
-    "@vue/compiler-core": "^3.3.4",
     "@vue/vue3-jest": "29",
     "babel-jest": "^29.7.0",
     "typescript": "~4.9.3",
     "vue": "^3.2.47",
     "vue-tsc": "latest"
   },
   "peerDependencies": {
-    "@vue/compiler-core": "^3.0.0",
     "vue": "^3.0.0"
   },
   "engines": {

code/ui/blocks/src/components/ArgsTable/ArgJsDoc.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
+import type { CSSObject } from '@storybook/theming';
 import { styled } from '@storybook/theming';
 import { codeCommon } from '@storybook/components';
 import type { JsDocTags } from './types';
@@ -53,7 +54,7 @@ export const Table = styled.table(({ theme }) => ({
       border: 'none',
     },
 
-    code: codeCommon({ theme }),
+    code: codeCommon({ theme }) as CSSObject,
 
     div: {
       span: {

code/ui/blocks/src/components/ArgsTable/ArgRow.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React, { useState } from 'react';
 import Markdown from 'markdown-to-jsx';
 import { transparentize } from 'polished';
+import type { CSSObject } from '@storybook/theming';
 import { styled } from '@storybook/theming';
 import { codeCommon } from '@storybook/components';
 import type { ArgType, Args, TableAnnotation } from './types';
@@ -39,10 +40,10 @@ const Description = styled.div(({ theme }) => ({
   },
 
   code: {
-    ...codeCommon({ theme }),
+    ...(codeCommon({ theme }) as CSSObject),
     fontSize: 12,
     fontFamily: theme.typography.fonts.mono,
-  },
+  } as CSSObject,
 
   '& code': {
     margin: 0,

code/ui/blocks/src/controls/options/Select.tsx

@@ -23,9 +23,7 @@ const styleResets: CSSObject = {
   position: 'relative',
 };
 
-const OptionsSelect = styled.select(({ theme }) => ({
-  ...styleResets,
-
+const OptionsSelect = styled.select(styleResets, ({ theme }) => ({
   boxSizing: 'border-box',
   position: 'relative',
   padding: '6px 10px',

code/ui/components/src/components/form/input/input.tsx

@@ -22,7 +22,7 @@ const styleResets: CSSObject = {
 };
 
 const styles = ({ theme }: { theme: Theme }): CSSObject => ({
-  ...styleResets,
+  ...(styleResets as any),
 
   transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
   color: theme.input.color || 'inherit',

code/ui/components/src/components/typography/elements/DL.tsx

@@ -1,8 +1,7 @@
 import { styled } from '@storybook/theming';
 import { withReset, withMargin } from '../lib/common';
 
-export const DL = styled.dl(withReset, {
-  ...withMargin,
+export const DL = styled.dl(withReset, withMargin, {
   padding: 0,
   '& dt': {
     fontSize: '14px',

code/ui/components/src/components/typography/elements/LI.tsx

@@ -1,3 +1,4 @@
+import type { CSSObject } from '@storybook/theming';
 import { styled } from '@storybook/theming';
 import { withReset, codeCommon } from '../lib/common';
 
@@ -12,5 +13,5 @@ export const LI = styled.li(withReset, ({ theme }) => ({
     marginTop: '.25em',
     marginBottom: 0,
   },
-  '& code': codeCommon({ theme }),
+  '& code': codeCommon({ theme }) as CSSObject,
 }));

code/ui/components/src/components/typography/elements/OL.tsx

@@ -12,4 +12,4 @@ const listCommon: CSSObject = {
   },
 };
 
-export const OL = styled.ol(withReset, withMargin, { ...listCommon, listStyle: 'decimal' });
+export const OL = styled.ol(withReset, withMargin, listCommon, { listStyle: 'decimal' });

code/ui/components/src/components/typography/elements/P.tsx

@@ -1,9 +1,10 @@
+import type { CSSObject } from '@storybook/theming';
 import { styled } from '@storybook/theming';
 import { withReset, withMargin, codeCommon } from '../lib/common';
 
 export const P = styled.p(withReset, withMargin, ({ theme }) => ({
   fontSize: theme.typography.size.s2,
   lineHeight: '24px',
   color: theme.color.defaultText,
-  '& code': codeCommon({ theme }),
+  '& code': codeCommon({ theme }) as CSSObject,
 }));

code/ui/components/src/components/typography/elements/UL.tsx

@@ -12,4 +12,4 @@ const listCommon: CSSObject = {
   },
 };
 
-export const UL = styled.ul(withReset, withMargin, { ...listCommon, listStyle: 'disc' });
+export const UL = styled.ul(withReset, withMargin, listCommon, { listStyle: 'disc' });