Merge pull request #29039 from storybookjs/version-non-patch-from-8.3…

….0-beta.2

Release: Prerelease 8.3.0-beta.3

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/addons/test/package.json

@@ -8,14 +8,14 @@
     "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",
@@ -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"

code/addons/test/project.json

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

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 });