Merge branch 'next' into chalkless

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 8.3.0-beta.3
+
+- Addon Test: Improve messages and post install script handling - [#29036](https://github.com/storybookjs/storybook/pull/29036), thanks @yannbf!
+- Next.js-Vite: Fix vite plugin exports - [#29046](https://github.com/storybookjs/storybook/pull/29046), thanks @valentinpalkovic!
+- Next.js: Update dependencies - [#29052](https://github.com/storybookjs/storybook/pull/29052), thanks @valentinpalkovic!
+- UI: Fix conditional hooks usage in sidebar - [#28979](https://github.com/storybookjs/storybook/pull/28979), thanks @JReinhold!
+
 ## 8.3.0-beta.2
 
 - Addon Vitest: Fix indentation of 'vitePluginNext' in generated Vitest config file - [#29011](https://github.com/storybookjs/storybook/pull/29011), thanks @ghengeveld!

code/.eslintrc.js

@@ -177,5 +177,28 @@ module.exports = {
         'local-rules/no-duplicated-error-codes': 'error',
       },
     },
+    {
+      files: ['./e2e-tests/*.ts'],
+      extends: ['plugin:playwright/recommended'],
+      rules: {
+        'playwright/no-skipped-test': [
+          'warn',
+          {
+            allowConditional: true,
+          },
+        ],
+        'playwright/no-raw-locators': 'off', // TODO: enable this, requires the UI to actually be accessible
+        'playwright/prefer-comparison-matcher': 'error',
+        'playwright/prefer-equality-matcher': 'error',
+        'playwright/prefer-hooks-on-top': 'error',
+        'playwright/prefer-strict-equal': 'error',
+        'playwright/prefer-to-be': 'error',
+        'playwright/prefer-to-contain': 'error',
+        'playwright/prefer-to-have-count': 'error',
+        'playwright/prefer-to-have-length': 'error',
+        'playwright/require-to-throw-message': 'error',
+        'playwright/require-top-level-describe': 'error',
+      },
+    },
   ],
 };

code/.storybook/vitest.config.ts

@@ -21,7 +21,7 @@ export default mergeConfig(
   vitestCommonConfig,
   defineProject({
     plugins: [
-      import('@storybook/experimental-addon-test/vite-plugin').then(({ storybookTest }) =>
+      import('@storybook/experimental-addon-test/vitest-plugin').then(({ storybookTest }) =>
         storybookTest({
           configDir: process.cwd(),
         })

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/onboarding/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/test/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.3.0-beta.2",
+  "version": "8.3.0-beta.3",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
     "addon-test",
     "vitest",
     "testing"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/vitest",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/test",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "code/addons/vitest"
+    "directory": "code/addons/test"
   },
   "funding": {
     "type": "opencollective",
@@ -29,24 +29,24 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./vite-plugin": {
-      "types": "./dist/plugin/index.d.ts",
-      "import": "./dist/plugin/index.js",
-      "require": "./dist/plugin/index.cjs"
+    "./vitest-plugin": {
+      "types": "./dist/vitest-plugin/index.d.ts",
+      "import": "./dist/vitest-plugin/index.js",
+      "require": "./dist/vitest-plugin/index.cjs"
     },
     "./internal/global-setup": {
-      "types": "./dist/plugin/global-setup.d.ts",
-      "import": "./dist/plugin/global-setup.js",
-      "require": "./dist/plugin/global-setup.cjs"
+      "types": "./dist/vitest-plugin/global-setup.d.ts",
+      "import": "./dist/vitest-plugin/global-setup.js",
+      "require": "./dist/vitest-plugin/global-setup.cjs"
     },
     "./internal/setup-file": {
-      "types": "./dist/plugin/setup-file.d.ts",
-      "import": "./dist/plugin/setup-file.js"
+      "types": "./dist/vitest-plugin/setup-file.d.ts",
+      "import": "./dist/vitest-plugin/setup-file.js"
     },
     "./internal/test-utils": {
-      "types": "./dist/plugin/test-utils.d.ts",
-      "import": "./dist/plugin/test-utils.js",
-      "require": "./dist/plugin/test-utils.cjs"
+      "types": "./dist/vitest-plugin/test-utils.d.ts",
+      "import": "./dist/vitest-plugin/test-utils.js",
+      "require": "./dist/vitest-plugin/test-utils.cjs"
     },
     "./manager": "./dist/manager.js",
     "./preset": "./dist/preset.cjs",
@@ -73,8 +73,11 @@
     "@storybook/csf": "^0.1.11"
   },
   "devDependencies": {
+    "@types/semver": "^7",
     "@vitest/browser": "^2.0.0",
+    "boxen": "^8.0.1",
     "find-up": "^7.0.0",
+    "semver": "^7.6.3",
     "tinyrainbow": "^1.2.0",
     "ts-dedent": "^2.2.0",
     "vitest": "^2.0.0"
@@ -90,16 +93,16 @@
   "bundler": {
     "exportEntries": [
       "./src/index.ts",
-      "./src/plugin/test-utils.ts",
-      "./src/plugin/setup-file.ts"
+      "./src/vitest-plugin/test-utils.ts",
+      "./src/vitest-plugin/setup-file.ts"
     ],
     "managerEntries": [
       "./src/manager.tsx"
     ],
     "nodeEntries": [
       "./src/preset.ts",
-      "./src/plugin/index.ts",
-      "./src/plugin/global-setup.ts",
+      "./src/vitest-plugin/index.ts",
+      "./src/vitest-plugin/global-setup.ts",
       "./src/postinstall.ts"
     ]
   }

code/addons/test/project.json

@@ -5,4 +5,4 @@
   "targets": {
     "build": {}
   }
-}
+}

code/addons/test/src/index.ts

@@ -1,9 +1,9 @@
-import type { storybookTest as storybookTestImport } from './plugin';
+import type { storybookTest as storybookTestImport } from './vitest-plugin';
 
 // make it work with --isolatedModules
 export default {};
 
 // @ts-expect-error - this is a hack to make the module's sub-path augmentable
-declare module '@storybook/experimental-addon-test/vite-plugin' {
+declare module '@storybook/experimental-addon-test/vitest-plugin' {
   export const storybookTest: typeof storybookTestImport;
 }

code/addons/test/src/postinstall-logger.ts

@@ -0,0 +1,34 @@
+import { colors, logger } from 'storybook/internal/node-logger';
+
+import boxen, { type Options } from 'boxen';
+
+const fancy =
+  process.platform !== 'win32' || process.env.CI || process.env.TERM === 'xterm-256color';
+
+export const step = colors.gray('›');
+export const info = colors.blue(fancy ? 'ℹ' : 'i');
+export const success = colors.green(fancy ? '✔' : '√');
+export const warning = colors.orange(fancy ? '⚠' : '‼');
+export const error = colors.red(fancy ? '✖' : '×');
+
+const baseOptions: Options = {
+  borderStyle: 'round',
+  padding: 1,
+};
+
+export const print = (message: string, options: Options) => {
+  logger.line(1);
+  logger.plain(boxen(message, { ...baseOptions, ...options }));
+};
+
+export const printInfo = (title: string, message: string, options?: Options) =>
+  print(message, { borderColor: 'blue', title, ...options });
+
+export const printWarning = (title: string, message: string, options?: Options) =>
+  print(message, { borderColor: 'yellow', title, ...options });
+
+export const printError = (title: string, message: string, options?: Options) =>
+  print(message, { borderColor: 'red', title, ...options });
+
+export const printSuccess = (title: string, message: string, options?: Options) =>
+  print(message, { borderColor: 'green', title, ...options });