Merge branch 'release-8-0' of github.com:storybookjs/storybook into a…

…llozaur/storybookjs#24886

.circleci/config.yml

@@ -560,27 +560,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 23
+          parallelism: 21
           requires:
             - build
       - build-sandboxes:
-          parallelism: 23
+          parallelism: 21
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 20
+          parallelism: 18
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 18
+          parallelism: 16
           requires:
             - build-sandboxes
       - e2e-dev:
-          parallelism: 4
+          parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 18
+          parallelism: 16
           requires:
             - build-sandboxes
       - bench:
@@ -614,30 +614,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 38
+          parallelism: 36
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 38
+          parallelism: 36
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 35
+          parallelism: 33
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 33
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-dev:
-          parallelism: 4
+          parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 33
+          parallelism: 31
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

.github/DISCUSSION_TEMPLATE/help.yml

@@ -1,25 +1,40 @@
----
 body:
-  - type: textarea
-    attributes:
-      label: Summary
-      description: How do you need help?
-      placeholder: I need help with...
-      validations:
-        required: true
-  - type: textarea
-    attributes:
-      label: Additional information
-      description: Share your Storybook configuration (`main.js or ts`), any error messages, or relevant dependencies
-      render: js
-      validations:
-        required: false
-  - type: input
-    attributes:
-      label: Share an example
-      description: Help us debug your issue by creating a minimal reproduction. You can do this with StackBlitz by heading to [https://storybook.new](https://storybook.new)!
-    validations:
-      required: false
-  - type: markdown
-    attributes: null
-    value: Before submitting, consider adding relevant labels to your thread (e.g. 'react', 'vue', 'vite'). That makes it easier for other users to spot your request. Thanks!
+- 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/workflows/generate-sandboxes-main.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Install dependencies
         run: |
           cd ./scripts
-          node --loader esbuild-register/loader -r esbuild-register ./check-dependencies.ts
+          node --experimental-modules ./check-dependencies.js
           cd ..
       - name: Compile Storybook libraries
         run: yarn task --task compile --start-from=auto --no-link

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

@@ -32,7 +32,7 @@ jobs:
       - name: Install dependencies
         run: |
           cd ./scripts
-          node --loader esbuild-register/loader -r esbuild-register ./check-dependencies.ts
+          node --experimental-modules ./check-dependencies.js
           cd ..
       - name: Compile Storybook libraries
         run: yarn task --task compile --start-from=auto --no-link

.vscode/settings.json

@@ -16,7 +16,7 @@
     "editor.formatOnSave": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.tabSize": 2,
   "editor.formatOnSave": true,

CODEOWNERS

@@ -26,8 +26,6 @@
 /code/addons/links/                @yannbf @JReinhold
 /code/addons/measure/              @yannbf @valentinpalkovic
 /code/addons/outline/              @yannbf @valentinpalkovic
-/code/addons/storyshots-core/      @ndelangen
-/code/addons/storyshots-puppeteer/ @ndelangen
 /code/addons/storysource/          @ndelangen
 /code/addons/themes/               @JReinhold @Integrayshaun
 /code/addons/toolbars/             @ndelangen @JReinhold

MIGRATION.md

@@ -1,5 +1,13 @@
 <h1>Migration</h1>
 
+- [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
+  - [Core changes](#core-changes)
+    - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons)
+      - [Storyshots has been removed](#storyshots-has-been-removed)
+    - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
+    - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
+    - [Icons is deprecated](#icons-is-deprecated)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) 
     - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
@@ -310,6 +318,115 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 7.x to 8.0.0
+
+### Implicit actions can not be used during rendering (for example in the play function)
+
+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 is 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.
+
+### Core changes
+
+#### React v18 in the manager UI (including addons)
+
+Storybook 7 used React 16 in the manager. In Storybook 8 this is upgraded to react v18.
+Addons that inject UI into panels, tools, etc. are possibly affected by this.
+
+Addon authors are advised to upgrade to react v18.
+
+##### Storyshots has been removed
+
+Storyshots was an addon for storybook which allowed users to turn their stories into automated snapshot-tests.
+
+Every story would automatically be taken into account and created a snapshot-file for.
+
+Snapshot-testing has since fallen out of favor and is no longer recommended.
+
+In addition to it's limited use, and high chance of false-positives, storyshots ran code developed to run in the browser in NodeJS via JSDOM.
+JSDOM has limitations and is not a perfect emulation of the browser environment; therefore storyshots was always a pain to setup and maintain.
+
+The storybook team has build the test-runner as a direct replacement, which utilizes playwright to connect to an actual browser where storybook runs the code.
+
+In addition CSF has expanded to allow for play-function to be defined on stories, which allows for more complex testing scenarios, fully integrated within storybook itself (and supported by the test-runner, and not storyshots).
+
+Finally `storyStoreV7: true` (the default and only options in storybook 8), was not supported by storyshots.
+
+By removing storyshots, the storybook team was unblocked from moving (eventually) to an ESM-only storybook, which is a big step towards a more modern storybook.
+
+#### UI layout state has changed shape
+
+In Storybook 7 it was possible to use `addons.setConfig({...});` to configure Storybook UI features and behavior as documented [here (v7)](https://storybook.js.org/docs/7.3/react/configure/features-and-behavior), [(latest)](https://storybook.js.org/docs/react/configure/features-and-behavior). The state and API for the UI layout has changed:
+
+- `showNav: boolean` is now `navSize: number`, where the number represents the size of the sidebar in pixels.
+- `showPanel: boolean` is now split into `bottomPanelHeight: number` and `rightPanelWidth: number`, where the numbers represents the size of the panel in pixels.
+- `isFullscreen: boolean` is no longer supported, but can be achieved by setting a combination of the above.
+
+#### New UI and props for Button and IconButton components
+
+We used to have a lot of different buttons in `@storybook/components` that were not used anywhere. In Storybook 8.0 we are deprecating `Form.Button` and added a new `Button` component that can be used in all places. The `IconButton` component has also been updated to use the new `Button` component under the hood. Going forward addon creators and Storybook maintainers should use the new `Button` component instead of `Form.Button`.
+
+For the `Button` component, the following props are now deprecated:
+
+- `isLink` - Please use the `asChild` prop instead like this: `<Button asChild><a href="">Link</a></Button>`
+- `primary` - Please use the `variant` prop instead.
+- `secondary` - Please use the `variant` prop instead.
+- `tertiary` - Please use the `variant` prop instead.
+- `gray` - Please use the `variant` prop instead.
+- `inForm` - Please use the `variant` prop instead.
+- `small` - Please use the `size` prop instead.
+- `outline` - Please use the `variant` prop instead.
+- `containsIcon`. Please add your icon as a child directly. No need for this prop anymore.
+
+The `IconButton` doesn't have any deprecated props but it now uses the new `Button` component under the hood so all props for `IconButton` will be the same as `Button`.
+
+#### Icons is deprecated
+
+In Storybook 8.0 we are introducing a new icon library available with `@storybook/icons`. We are deprecating the `Icons` component in `@storybook/components` and recommend that addon creators and Storybook maintainers use the new `@storybook/icons` component instead.
+
 ## From version 7.5.0 to 7.6.0
 
 #### Using implicit actions during rendering is deprecated

code/.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'off',
     'import/extensions': 'off', // for mjs, we sometimes need extensions
     'jest/no-done-callback': 'off',
+    'jsx-a11y/control-has-associated-label': 'off',
     '@typescript-eslint/dot-notation': [
       'error',
       {
@@ -140,13 +141,7 @@ module.exports = {
       },
     })),
     {
-      files: [
-        '**/__tests__/**',
-        '**/__testfixtures__/**',
-        '**/*.test.*',
-        '**/*.stories.*',
-        '**/storyshots-*/**/stories/**',
-      ],
+      files: ['**/__tests__/**', '**/__testfixtures__/**', '**/*.test.*', '**/*.stories.*'],
       rules: {
         '@typescript-eslint/no-empty-function': 'off',
         'import/no-extraneous-dependencies': 'off',

code/.yarnrc.yml

@@ -7,8 +7,6 @@ logFilters:
     level: discard
   - code: YN0076
     level: discard
-  - level: discard
-    pattern: '@workspace:addons/storyshots-*/'
 
 nodeLinker: node-modules
 
@@ -27,3 +25,5 @@ unsafeHttpWhitelist:
 
 yarnPath: ../.yarn/releases/yarn-4.0.0.cjs
 installStatePath: '../.yarn/code-install-state.gz'
+# Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
+# checksumBehavior: 'update'

code/addons/a11y/package.json

@@ -60,17 +60,18 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
+    "@storybook/icons": "^1.2.1",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^14.0.0",
     "lodash": "^4.17.21",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",
     "resize-observer-polyfill": "^1.5.1",
-    "typescript": "~4.9.3"
+    "typescript": "~5.2.2"
   },
   "publishConfig": {
     "access": "public"