Merge pull request #24271 from storybookjs/release-8-0

Storybook v8.0.0 initial merge

.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

.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)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -311,6 +319,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
 
 #### CommonJS with Vite 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.3.2"
   },
   "publishConfig": {
     "access": "public"

code/addons/a11y/src/components/A11YPanel.tsx

@@ -2,7 +2,8 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import { styled } from '@storybook/theming';
 
-import { ActionBar, Icons, ScrollArea } from '@storybook/components';
+import { ActionBar, ScrollArea } from '@storybook/components';
+import { SyncIcon, CheckIcon } from '@storybook/icons';
 
 import type { AxeResults } from 'axe-core';
 import { useChannel, useParameter, useStorybookState } from '@storybook/manager-api';
@@ -21,9 +22,7 @@ export enum RuleType {
   INCOMPLETION,
 }
 
-const Icon = styled(Icons)({
-  height: 12,
-  width: 12,
+const Icon = styled(SyncIcon)({
   marginRight: 4,
 });
 
@@ -108,7 +107,7 @@ export const A11YPanel: React.FC = () => {
             'Rerun tests'
           ) : (
             <>
-              <Icon icon="check" /> Tests completed
+              <CheckIcon /> Tests completed
             </>
           ),
         onClick: handleManual,
@@ -164,7 +163,7 @@ export const A11YPanel: React.FC = () => {
       )}
       {status === 'running' && (
         <Centered>
-          <RotatingIcon icon="sync" /> Please wait while the accessibility scan is running ...
+          <RotatingIcon size={12} /> Please wait while the accessibility scan is running ...
         </Centered>
       )}
       {(status === 'ready' || status === 'ran') && (

code/addons/a11y/src/components/A11yContext.tsx

@@ -52,7 +52,10 @@ const defaultResult = {
   violations: [],
 };
 
-export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
+export const A11yContextProvider: React.FC<React.PropsWithChildren<A11yContextProviderProps>> = ({
+  active,
+  ...props
+}) => {
   const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
   const [tab, setTab] = React.useState(0);
   const [highlighted, setHighlighted] = React.useState<string[]>([]);

code/addons/a11y/src/components/Tabs.tsx

@@ -87,8 +87,8 @@ const List = styled.div(({ theme }) => ({
 
 interface TabsProps {
   tabs: {
-    label: JSX.Element;
-    panel: JSX.Element;
+    label: React.ReactElement;
+    panel: React.ReactElement;
     items: Result[];
     type: RuleType;
   }[];

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 import { Global, styled } from '@storybook/theming';
-import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
+import { AccessibilityIcon } from '@storybook/icons';
 import { Filters } from './ColorFilters';
 
 const iframeId = 'storybook-preview-iframe';
@@ -144,7 +145,7 @@ export const VisionSimulator = () => {
         onDoubleClick={() => setFilter(null)}
       >
         <IconButton key="filter" active={!!filter} title="Vision simulator">
-          <Icons icon="accessibility" />
+          <AccessibilityIcon />
         </IconButton>
       </WithTooltip>
       <Hidden>

code/addons/actions/package.json

@@ -77,11 +77,11 @@
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-inspector": "^6.0.0",
     "telejson": "^7.2.0",
-    "typescript": "~4.9.3"
+    "typescript": "^5.3.2"
   },
   "publishConfig": {
     "access": "public"

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { Fragment } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import type { Theme } from '@storybook/theming';
@@ -9,7 +9,10 @@ import { ActionBar, ScrollArea } from '@storybook/components';
 import { Action, InspectorContainer, Counter } from './style';
 import type { ActionDisplay } from '../../models';
 
-const UnstyledWrapped: FC<{ className?: string }> = ({ children, className }) => (
+const UnstyledWrapped: FC<PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

code/addons/actions/src/typings.d.ts

@@ -1 +1 @@
-declare var FEATURES: import('@storybook/types').StorybookConfig['features'];
+declare var FEATURES: import('@storybook/types').StorybookConfigRaw['features'];