Merge branch 'next' into docs-contributer-returns

storybookjs · Nov 9, 2023 · 420dfd3 · 420dfd3
2 parents 6eb4c40 + 4f527a8
commit 420dfd3
Show file tree

Hide file tree

Showing 332 changed files with 2,650 additions and 4,429 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -507,7 +507,7 @@ workflows:
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 9
+          parallelism: 11
           requires:
             - build-sandboxes
       - e2e-production:
@@ -563,7 +563,7 @@ workflows:
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 18
+          parallelism: 20
           requires:
             - build-sandboxes
       - e2e-production:
@@ -620,7 +620,7 @@ workflows:
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 33
+          parallelism: 35
           requires:
             - build-sandboxes
       - e2e-production:

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,21 @@
+## 7.6.0-alpha.4
+
+-  CLI: Ensure errors with opening the browser are caught - [#24668](https://github.com/storybookjs/storybook/pull/24668), thanks [@xueyawei](https://github.com/xueyawei)!
+- Babel: Update all @babel/* dependencies - [#24610](https://github.com/storybookjs/storybook/pull/24610), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- CLI: Catch when prettier failed to prettify main and preview config files - [#24604](https://github.com/storybookjs/storybook/pull/24604), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- CLI: Ignore `addon-onboarding` when checking versions - [#24634](https://github.com/storybookjs/storybook/pull/24634), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Use @storybook/test in template stories - [#24393](https://github.com/storybookjs/storybook/pull/24393), thanks [@yannbf](https://github.com/yannbf)!
+- Controls: Improve accessibility of BooleanControl for screen readers - [#24418](https://github.com/storybookjs/storybook/pull/24418), thanks [@danielmarcano](https://github.com/danielmarcano)!
+- Dependencies: Update @babel/traverse and @babel/core to fix vulnerability - [#24670](https://github.com/storybookjs/storybook/pull/24670), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Dependencies: Update browserify-sign transitive dependency - [#24674](https://github.com/storybookjs/storybook/pull/24674), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Dependencies: Update nx dependencies to v17 - [#24671](https://github.com/storybookjs/storybook/pull/24671), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Maintenance: Split renderers preview entrypoints - [#24623](https://github.com/storybookjs/storybook/pull/24623), thanks [@ndelangen](https://github.com/ndelangen)!
+- Next.js: Add avif support - [#24611](https://github.com/storybookjs/storybook/pull/24611), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Fix forwarding ref for Image component - [#24648](https://github.com/storybookjs/storybook/pull/24648), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Theming: Add theme variable to set the preview background color - [#24575](https://github.com/storybookjs/storybook/pull/24575), thanks [@JReinhold](https://github.com/JReinhold)!
+- UI: Fix button contrast-ratio - [#24525](https://github.com/storybookjs/storybook/pull/24525), thanks [@maheshchandra10](https://github.com/maheshchandra10)!
+- UI: Update zIndex on NotificationList to fix the notification not being clickable in certain cases - [#24602](https://github.com/storybookjs/storybook/pull/24602), thanks [@yoshi2no](https://github.com/yoshi2no)!
+
 ## 7.6.0-alpha.3
 
 - Action: Attach spies on actions across stories when defined in meta - [#24451](https://github.com/storybookjs/storybook/pull/24451), thanks [@kasperpeulen](https://github.com/kasperpeulen)!

diff --git a/MAINTAINERS.md b/MAINTAINERS.md
@@ -48,7 +48,7 @@ This document outlines some of the processes that the maintainers should adhere
 | maintenance                    | Issue, or pull request related to Storybook's internal maintenance                                                                                   |
 | mdx                            | Issue, bug, or pull request related to MDX and Storybook                                                                                             |
 | medium                         | Issue or pull request that involves a significant amount of work within Storybook                                                                    |
-| monorepos                      | Issue, bug, or pull request related to Storybook and monorepos (e.g., [lerna](https://lerna.js.org/) )                                               |
+| monorepos                      | Issue, bug, or pull request related to Storybook and monorepos                                                                                       |
 | mui                            | Issue, bug, or pull request that affects Storybook and [Material-UI](https://material-ui.com/)                                                       |
 | multiframework                 | Issue, bug, or pull request that affects multiple supported frameworks (e.g., React, Vue)                                                            |
 | needs more info                | Issue, or bug that requires additional context from the author                                                                                       |

diff --git a/README.md b/README.md
@@ -187,7 +187,7 @@ Looking for a first issue to tackle?
 
 ### Development scripts
 
-Storybook is organized as a monorepo using [Lerna](https://lerna.js.org/). Useful scripts include:
+Storybook is organized as a monorepo. Useful scripts include:
 
 #### `yarn start`
 

diff --git a/RESOLUTIONS.md b/RESOLUTIONS.md
@@ -9,3 +9,7 @@ [email protected] (bug: 3.5.x): Type issues
 ## code/ui/components/package.json
 
 [email protected] (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230
+
+## code/package.json
+
+@babel/core@^7.23.2: Make sure we use the latest version of @babel/traverse, which is a dependency of @babel/core, since it contains a fix for a vulnerability: https://security.snyk.io/vuln/SNYK-JS-BABELTRAVERSE-5962462
diff --git a/code/.eslintrc.js b/code/.eslintrc.js
@@ -68,6 +68,13 @@ module.exports = {
         '@typescript-eslint/ban-types': 'warn', // should become error, in the future
       },
     },
+    {
+      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
+      files: ['**/builder-vite/**/*.html'],
+      rules: {
+        '@typescript-eslint/no-unused-expressions': 'off', // should become error, in the future
+      },
+    },
     {
       // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies
       files: [

diff --git a/code/.gitignore b/code/.gitignore
@@ -0,0 +1 @@
+.nx/cache
diff --git a/code/.prettierignore b/code/.prettierignore
@@ -1 +1,3 @@
 *.mdx
+
+/.nx/cache
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

diff --git a/code/addons/a11y/src/components/Report/Item.tsx b/code/addons/a11y/src/components/Report/Item.tsx
@@ -21,16 +21,14 @@ const Wrapper = styled.div(({ theme }) => ({
   },
 }));
 
-const Icon = styled(Icons)(({ theme }) => ({
+const Icon = styled(Icons)({
   height: 10,
   width: 10,
   minWidth: 10,
-  color: theme.textMutedColor,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
-  alignSelf: 'center',
-  display: 'inline-flex',
-}));
+  verticalAlign: 'inherit',
+});
 
 const HeaderBar = styled.div(({ theme }) => ({
   padding: theme.layoutMargin,
@@ -78,7 +76,6 @@ export const Item = (props: ItemProps) => {
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
             icon="arrowdown"
-            color="#9DA5AB"
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}

diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

diff --git a/code/addons/docs/src/typings.d.ts b/code/addons/docs/src/typings.d.ts
@@ -1,7 +1,6 @@
 declare module '@egoist/vue-to-react';
 declare module 'remark-slug';
 declare module 'remark-external-links';
-declare module 'babel-plugin-react-docgen';
 declare module 'acorn-jsx';
 declare module 'vue/dist/vue';
 declare module '@storybook/mdx1-csf';

diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

diff --git a/code/addons/links/package.json b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",

diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",

diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html
@@ -22,6 +22,8 @@
     window.STORIES = '[STORIES HERE]';
     window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
 
+    ('OTHER_GLOBLALS HERE');
+
     // We do this so that "module && module.hot" etc. in Storybook source code
     // doesn't fail (it will simply be disabled)
     window.module = undefined;

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

diff --git a/code/builders/builder-vite/src/transform-iframe-html.ts b/code/builders/builder-vite/src/transform-iframe-html.ts
@@ -5,6 +5,7 @@ export type PreviewHtml = string | undefined;
 
 export async function transformIframeHtml(html: string, options: Options) {
   const { configType, features, presets } = options;
+  const build = await presets.apply('build');
   const frameworkOptions = await presets.apply<Record<string, any> | null>('frameworkOptions');
   const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
   const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
@@ -20,10 +21,20 @@ export async function transformIframeHtml(html: string, options: Options) {
     importPathMatcher: specifier.importPathMatcher.source,
   }));
 
+  const otherGlobals = {
+    ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
+  };
+
   return html
     .replace('[CONFIG_TYPE HERE]', configType || '')
     .replace('[LOGLEVEL HERE]', logLevel || '')
     .replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
+    .replace(
+      `('OTHER_GLOBLALS HERE');`,
+      Object.entries(otherGlobals)
+        .map(([k, v]) => `window["${k}"] = ${JSON.stringify(v)};`)
+        .join('')
+    )
     .replace(
       `'[CHANNEL_OPTIONS HERE]'`,
       JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {})

diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
@@ -77,6 +77,11 @@ export async function commonConfig(
 
 export async function pluginConfig(options: Options) {
   const frameworkName = await getFrameworkName(options);
+  const build = await options.presets.apply('build');
+
+  if (build?.test?.emptyBlocks) {
+    globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
+  }
 
   const plugins = [
     codeGeneratorPlugin(options),

diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.6.0-alpha.3",
+  "version": "7.6.0-alpha.4",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -36,6 +36,11 @@
       "node": "./dist/presets/preview-preset.js",
       "require": "./dist/presets/preview-preset.js"
     },
+    "./loaders/export-order-loader": {
+      "types": "./dist/loaders/export-order-loader.d.ts",
+      "node": "./dist/loaders/export-order-loader.js",
+      "require": "./dist/loaders/export-order-loader.js"
+    },
     "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
     "./templates/preview.ejs": "./templates/preview.ejs",
     "./package.json": "./package.json"
@@ -69,15 +74,16 @@
     "@types/node": "^18.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^9.0.0",
-    "babel-plugin-named-exports-order": "^0.0.2",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "constants-browserify": "^1.0.0",
     "css-loader": "^6.7.1",
+    "es-module-lexer": "^0.9.3",
     "express": "^4.17.3",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "fs-extra": "^11.1.0",
     "html-webpack-plugin": "^5.5.0",
+    "magic-string": "^0.30.5",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "semver": "^7.3.7",
@@ -114,7 +120,8 @@
     "entries": [
       "./src/index.ts",
       "./src/presets/custom-webpack-preset.ts",
-      "./src/presets/preview-preset.ts"
+      "./src/presets/preview-preset.ts",
+      "./src/loaders/export-order-loader.ts"
     ],
     "platform": "node"
   },