Release: Prerelease 7.6.0-alpha.7

.circleci/config.yml

@@ -322,7 +322,7 @@ jobs:
           at: .
       - run:
           name: Starting Event Collector
-          command: yarn ts-node ./event-log-collector.ts
+          command: node --loader esbuild-register/loader -r esbuild-register ./event-log-collector.ts
           working_directory: scripts
           background: true
       - run:
@@ -334,7 +334,7 @@ jobs:
             TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task build)
             if [[ $TEMPLATE != bench/* ]]
             then
-              yarn ts-node ./event-log-checker build $TEMPLATE
+              node --loader esbuild-register/loader -r esbuild-register ./event-log-checker build $TEMPLATE
             fi
           working_directory: scripts
       - report-workflow-on-failure:
@@ -645,4 +645,3 @@ workflows:
       #     parallelism: 4
       #     requires:
       #       - create-sandboxes
-

.github/DISCUSSION_TEMPLATE/help.yml

@@ -0,0 +1,40 @@
+body:
+- type: markdown
+  id: intro
+  attributes:
+    value: |
+      Thanks for taking the time to start a new discussion!
+
+      ### Before you post
+      Check if someone has already asked/answered your question in a previous discussion.
+
+      ### When you're ready to post
+      Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users.
+
+- type: textarea
+  id: summary
+  attributes:
+    label: Summary
+    description: How can we help?
+  validations:
+    required: true
+
+- type: textarea
+  id: additional-info
+  attributes:
+    label: Additional information
+    description: |
+      Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong.
+
+      P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster.
+  validations:
+    required: false
+
+- type: input
+  id: reproduction
+  attributes:
+    label: Create a reproduction
+    description: |
+      Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). Learn more about creating a reproduction [here](https://storybook.js.org/docs/react/contribute/how-to-reproduce).
+  validations:
+    required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -3,15 +3,18 @@ contact_links:
   - name: View documentation 📚
     url: https://storybook.js.org/docs/
     about: Check out the official docs for answers to common questions.
-  - name: Feature Requests 💡
+  - name: Feature requests 💡
     url: https://github.com/storybookjs/storybook/discussions/new?category=ideas
     about: Suggest a feature idea for this project.
   - name: Open an RFC 🦄
     url: https://github.com/storybookjs/storybook/discussions/new?category=rfc
     about: Do you want to propose a more involved change to Storybook? Open an RFC (Request for Comments) to start a discussion.
-  - name: Questions & discussions 🤔
+  - name: Questions 💭
+    url: https://github.com/storybookjs/storybook/discussions/new?category=help
+    about: Need support with a Storybook problem? Open up a help request.
+  - name: Discussions 🙌
     url: https://github.com/storybookjs/storybook/discussions
-    about: Ask questions, show off your Storybook, etc. 
-  - name: Community Discord 💬
+    about: Show off your Storybook or discuss the project.
+  - name: Community Discord 🎉
     url: https://discord.gg/storybook
-    about: Community discussions, interactive support, contributor help
+    about: Meet other community members and get contributor help.

.github/workflows/generate-sandboxes-main.yml

@@ -30,7 +30,10 @@ jobs:
           git config --global user.name "Storybook Bot"
           git config --global user.email "[email protected]"
       - name: Install dependencies
-        run: node ./scripts/check-dependencies.js
+        run: |
+          cd ./scripts
+          node --experimental-modules ./check-dependencies.js
+          cd ..
       - name: Compile Storybook libraries
         run: yarn task --task compile --start-from=auto --no-link
       - name: Publishing to local registry

.github/workflows/generate-sandboxes-next.yml

@@ -30,7 +30,10 @@ jobs:
           git config --global user.name "Storybook Bot"
           git config --global user.email "[email protected]"
       - name: Install dependencies
-        run: node ./scripts/check-dependencies.js
+        run: |
+          cd ./scripts
+          node --experimental-modules ./check-dependencies.js
+          cd ..
       - name: Compile Storybook libraries
         run: yarn task --task compile --start-from=auto --no-link
       - name: Publishing to local registry

CHANGELOG.prerelease.md

@@ -1,3 +1,28 @@
+## 7.6.0-alpha.7
+
+- Actions: Warn on implicit actions - [#24856](https://github.com/storybookjs/storybook/pull/24856), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - ATTEMPT 2 - [#24834](https://github.com/storybookjs/storybook/pull/24834), thanks [@JReinhold](https://github.com/JReinhold)!
+- CLI: Add "doctor" command - [#22236](https://github.com/storybookjs/storybook/pull/22236), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Add deprecation notice for Vite + CommonJS - [#23950](https://github.com/storybookjs/storybook/pull/23950), thanks [@JReinhold](https://github.com/JReinhold)!
+- Core: Detect no matching export error in storybook start and build - [#24877](https://github.com/storybookjs/storybook/pull/24877), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Fix `useStoryPrepared` hook failing with `undefined` data - [#22631](https://github.com/storybookjs/storybook/pull/22631), thanks [@SpookyJelly](https://github.com/SpookyJelly)!
+- Core: Gracefully handle error when parsing preview.js file - [#24858](https://github.com/storybookjs/storybook/pull/24858), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Make warnOnIncompatibleAddons fault-tolerant - [#24880](https://github.com/storybookjs/storybook/pull/24880), thanks [@taozhou-glean](https://github.com/taozhou-glean)!
+- Dependency: Fix Yarn 4 failing to install due to jscodeshift dependency issue - [#24914](https://github.com/storybookjs/storybook/pull/24914), thanks [@samvv](https://github.com/samvv)!
+- Dependency: Update jscodeshift to v0.15.1 - [#24882](https://github.com/storybookjs/storybook/pull/24882), thanks [@epreston](https://github.com/epreston)!
+- FastBuild: Fix disabledAddons filter - [#24924](https://github.com/storybookjs/storybook/pull/24924), thanks [@IanVS](https://github.com/IanVS)!
+- ManagerAPI: Fix setting status without index, crashes storybook - [#24866](https://github.com/storybookjs/storybook/pull/24866), thanks [@ndelangen](https://github.com/ndelangen)!
+- Next.js: Add back image context CommonJS export - [#24885](https://github.com/storybookjs/storybook/pull/24885), thanks [@martinnabhan](https://github.com/martinnabhan)!
+- Next.js: Add experimental SWC support - [#24852](https://github.com/storybookjs/storybook/pull/24852), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Next.js: Fix import path in swc loader - [#24922](https://github.com/storybookjs/storybook/pull/24922), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- Svelte: Fix decorators always running twice - [#24921](https://github.com/storybookjs/storybook/pull/24921), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
+- SvelteKit: Add experimental page and navigation mocking - [#24795](https://github.com/storybookjs/storybook/pull/24795), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
+- Test: Model loaders as before each and restore mocks properly - [#24948](https://github.com/storybookjs/storybook/pull/24948), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- TestBuild: Add env-variable support to `--test` CLI-flag - [#24862](https://github.com/storybookjs/storybook/pull/24862), thanks [@ndelangen](https://github.com/ndelangen)!
+- TestBuild: Add tests and rename to camelCase - [#24911](https://github.com/storybookjs/storybook/pull/24911), thanks [@ndelangen](https://github.com/ndelangen)!
+- TestBuild: Fix indexer bug - [#24890](https://github.com/storybookjs/storybook/pull/24890), thanks [@ndelangen](https://github.com/ndelangen)!
+- Typescript: Add 'skipCompiler' option to TypeScript presets - [#24847](https://github.com/storybookjs/storybook/pull/24847), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 7.6.0-alpha.6
 
 - Addon: Move Visual Test addon to the code directory - [#24771](https://github.com/storybookjs/storybook/pull/24771), thanks [@cdedreuille](https://github.com/cdedreuille)!

MIGRATION.md

@@ -1,6 +1,9 @@
 <h1>Migration</h1>
 
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
+    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
+    - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
+    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
     - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
     - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
@@ -310,6 +313,65 @@
 
 ## From version 7.5.0 to 7.6.0
 
+#### CommonJS with Vite is deprecated
+
+Using CommonJS in the `main` configuration with `main.cjs` or `main.cts` is deprecated, and will be removed in Storybook 8.0. This is a necessary change because [Vite will remove support for CommonJS in an upcoming release](https://github.com/vitejs/vite/discussions/13928).
+
+You can address this by converting your `main` configuration file to ESM syntax and renaming it to `main.mjs` or `main.mts` if your project does not have `"type": "module"` in its `package.json`. To convert the config file to ESM you will need to replace any CommonJS syntax like `require()`, `module.exports`, or `__dirname`. If you haven't already, you may also consider adding `"type": "module"` to your package.json and converting your project to ESM.
+
+#### Using implicit actions during rendering is deprecated
+
+In Storybook 7, we inferred if the component accepts any action props,
+by checking if it starts with `onX` (for example `onClick`), or as configured by `actions.argTypesRegex`.
+If that was the case, we would fill in jest spies for those args automatically.
+
+```ts
+export default {
+  component: Button,
+};
+
+export const ButtonClick = {
+  play: async ({ args, canvasElement }) => {
+    await userEvent.click(within(canvasElement).getByRole('button'));
+    // args.onClick is a jest spy in 7.0
+    await expect(args.onClick).toHaveBeenCalled();
+  },
+};
+```
+
+In Storybook 8 this feature will be removed, and spies have to added explicitly:
+
+```ts
+import { fn } from '@storybook/test';
+
+export default {
+  component: Button,
+  args: {
+    onClick: fn(),
+  },
+};
+
+export const ButtonClick = {
+  play: async ({ args, canvasElement }) => {
+    await userEvent.click(within(canvasElement).getByRole('button'));
+    await expect(args.onClick).toHaveBeenCalled();
+  },
+};
+```
+
+For more context, see this RFC:
+https://github.com/storybookjs/storybook/discussions/23649
+
+To summarize:
+
+- This makes CSF files less magical and more portable, so that CSF files will render the same in a test environment where docgen is not available.
+- This allows users and (test) integrators to run or build storybook without docgen, boosting the user performance and allows tools to give quicker feedback.
+- This will make sure that we can one day lazy load docgen, without changing how stories are rendered.
+
+#### typescript.skipBabel deprecated
+
+We will remove the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescirpt.skipCompiler` instead.
+
 #### Primary doc block accepts of prop
 
 The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all.

code/.eslintrc.js

@@ -1,10 +1,22 @@
 const path = require('path');
+const fs = require('fs');
 
 const scriptPath = path.join(__dirname, '..', 'scripts');
 
+const addonsPackages = fs
+  .readdirSync(path.join(__dirname, 'addons'))
+  .filter((p) => fs.statSync(path.join(__dirname, 'addons', p)).isDirectory());
+const libPackages = fs
+  .readdirSync(path.join(__dirname, 'lib'))
+  .filter((p) => fs.statSync(path.join(__dirname, 'lib', p)).isDirectory());
+const uiPackages = fs
+  .readdirSync(path.join(__dirname, 'ui'))
+  .filter((p) => fs.statSync(path.join(__dirname, 'ui', p)).isDirectory())
+  .filter((p) => !p.startsWith('.'));
+
 module.exports = {
   root: true,
-  extends: [path.join(scriptPath, '.eslintrc.js')],
+  extends: [path.join(scriptPath, '.eslintrc.cjs')],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
@@ -53,7 +65,6 @@ module.exports = {
         project: null,
       },
       rules: {
-        // '@typescript-eslint/no-var-requires': 'off',
         '@typescript-eslint/dot-notation': 'off',
         '@typescript-eslint/no-implied-eval': 'off',
         '@typescript-eslint/no-throw-literal': 'off',
@@ -77,15 +88,7 @@ module.exports = {
     },
     {
       // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies
-      files: [
-        'addons/**/*',
-        'frameworks/**/*',
-        'lib/**/*',
-        'builders/**/*',
-        'deprecated/**/*',
-        'renderers/**/*',
-        'ui/**/*',
-      ],
+      files: ['frameworks/**/*', 'builders/**/*', 'deprecated/**/*', 'renderers/**/*'],
       excludedFiles: ['frameworks/angular/**/*', 'frameworks/ember/**/*', 'lib/core-server/**/*'],
       rules: {
         'import/no-extraneous-dependencies': [
@@ -95,11 +98,47 @@ module.exports = {
       },
     },
     {
-      files: ['**/ui/*', '**/ui/.storybook/*'],
+      files: ['**/ui/.storybook/**'],
       rules: {
-        'import/no-extraneous-dependencies': ['error', { packageDir: __dirname }],
+        'import/no-extraneous-dependencies': [
+          'error',
+          { packageDir: [__dirname], devDependencies: true },
+        ],
       },
     },
+    ...addonsPackages.map((directory) => ({
+      files: [path.join('**', 'addons', directory, '**', '*.*')],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          {
+            packageDir: [__dirname, path.join(__dirname, 'addons', directory)],
+            devDependencies: true,
+          },
+        ],
+      },
+    })),
+    ...uiPackages.map((directory) => ({
+      files: [path.join('**', 'ui', directory, '**', '*.*')],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          { packageDir: [__dirname, path.join(__dirname, 'ui', directory)], devDependencies: true },
+        ],
+      },
+    })),
+    ...libPackages.map((directory) => ({
+      files: [path.join('**', 'lib', directory, '**', '*.*')],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          {
+            packageDir: [__dirname, path.join(__dirname, 'lib', directory)],
+            devDependencies: true,
+          },
+        ],
+      },
+    })),
     {
       files: [
         '**/__tests__/**',
@@ -121,16 +160,24 @@ module.exports = {
         'react/require-default-props': 'off',
       },
     },
-    { files: '**/.storybook/config.js', rules: { 'global-require': 'off' } },
     {
       files: ['**/*.stories.*'],
       rules: {
         'no-console': 'off',
       },
     },
+    {
+      files: ['**/renderers/preact/**/*'],
+      rules: {
+        'react/react-in-jsx-scope': 'off',
+        'react/prop-types': 'off',
+      },
+    },
     {
       files: ['**/*.tsx', '**/*.ts'],
       rules: {
+        'no-shadow': 'off',
+        '@typescript-eslint/ban-types': 'warn', // should become error, in the future
         'react/require-default-props': 'off',
         'react/prop-types': 'off', // we should use types
         'react/forbid-prop-types': 'off', // we should use types