Release: Prerelease 8.0.0-beta.2

.github/workflows/prepare-patch-release.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
 
       - name: Cache dependencies
         uses: actions/cache@v3
@@ -89,7 +89,7 @@ jobs:
           yarn release:pick-patches
 
       - name: Cancel when no patches to pick
-        if: steps.pick-patches.outputs.pr-count == '0' && steps.pick-patches.outputs.pr-count != null
+        if: steps.pick-patches.outputs.no-patch-prs == 'true'
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         # From https://stackoverflow.com/a/75809743
@@ -123,7 +123,7 @@ jobs:
         run: |
           yarn release:write-changelog ${{ steps.versions.outputs.next }} --unpicked-patches --verbose
 
-      - name: 'Commit changes to branch: version-patch-from-${{ steps.versions.outputs.current }}'
+      - name: "Commit changes to branch: version-patch-from-${{ steps.versions.outputs.current }}"
         working-directory: .
         run: |
           git config --global user.name 'storybook-bot'
@@ -185,4 +185,4 @@ jobs:
           DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
         uses: Ilshidur/action-discord@master
         with:
-          args: 'The GitHub Action for preparing the release pull request bumping from v${{ steps.versions.outputs.current }} to v${{ steps.versions.outputs.next }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
+          args: "The GitHub Action for preparing the release pull request bumping from v${{ steps.versions.outputs.current }} to v${{ steps.versions.outputs.next }} (triggered by ${{ github.triggering_actor }}) failed! See run at: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.6.13
+
+- Next.js: Fix frameworkOptions resolution - [#25907](https://github.com/storybookjs/storybook/pull/25907), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- React Native: Fix init fails when package is already installed - [#25908](https://github.com/storybookjs/storybook/pull/25908), thanks [@dannyhw](https://github.com/dannyhw)!
+- React Native: Remove watcher from init - [#25895](https://github.com/storybookjs/storybook/pull/25895), thanks [@dannyhw](https://github.com/dannyhw)!
+- Webpack: Update StorybookConfig import in core-webpack types.ts - [#25740](https://github.com/storybookjs/storybook/pull/25740), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 7.6.12
 
 - CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)!

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 8.0.0-beta.2
+
+- Core: Fix boolean `true` args in URL getting ignored - [#25950](https://github.com/storybookjs/storybook/pull/25950), thanks [@JReinhold](https://github.com/JReinhold)!
+- Core: Move @types packages to dev deps in core-common - [#25387](https://github.com/storybookjs/storybook/pull/25387), thanks [@kyletsang](https://github.com/kyletsang)!
+- Maintenance: Rename testing-utils paths to portable-stories - [#25888](https://github.com/storybookjs/storybook/pull/25888), thanks [@yannbf](https://github.com/yannbf)!
+- Portable stories: Pass story context to the play function of a composed story - [#25943](https://github.com/storybookjs/storybook/pull/25943), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Fix `display=true` warning in console - [#25951](https://github.com/storybookjs/storybook/pull/25951), thanks [@JReinhold](https://github.com/JReinhold)!
+- UI: Update deprecated Icons with the new @storybook/icons in addons - [#25822](https://github.com/storybookjs/storybook/pull/25822), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- Vite: Add a `rollup-plugin-webpack-stats` to allow stats from preview builds - [#25923](https://github.com/storybookjs/storybook/pull/25923), thanks [@tmeasday](https://github.com/tmeasday)!
+
 ## 8.0.0-beta.1
 
 - Addon-docs: Fix MDX components not applied in Vite and theme loading twice - [#25925](https://github.com/storybookjs/storybook/pull/25925), thanks [@JReinhold](https://github.com/JReinhold)!

MIGRATION.md

@@ -7,6 +7,7 @@
   - [Removal of `storiesOf`-API](#removal-of-storiesof-api)
   - [Removed deprecated shim packages](#removed-deprecated-shim-packages)
   - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
+  - [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed)
   - [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)
   - [MDX related changes](#mdx-related-changes)
     - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3)
@@ -460,6 +461,12 @@ export default defineConfig({
 });
 ```
 
+### TurboSnap Vite plugin is no longer needed
+
+At least in build mode, `builder-vite` now supports the `--webpack-stats-json` flag and will output `preview-stats.json`.
+
+This means https://github.com/IanVS/vite-plugin-turbosnap is no longer necessary, and duplicative, and the plugin will automatically be removed if found.
+
 ### 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,
@@ -1493,7 +1500,7 @@ Storybook uses `react` in a variety of docs-related packages. In the past, we've
 To upgrade manually, add any version of `react` and `react-dom` as devDependencies using your package manager of choice, e.g.
 
 ```
-npm add react react-dom --dev
+npm add react react-dom --save-dev
 ```
 
 #### start-storybook / build-storybook binaries removed

code/addons/a11y/package.json

@@ -60,7 +60,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/a11y/src/components/Report/Item.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment, useState } from 'react';
 
 import { styled } from '@storybook/theming';
-import { Icons } from '@storybook/components';
 
 import type { Result } from 'axe-core';
 import { Info } from './Info';
@@ -11,6 +10,7 @@ import { Tags } from './Tags';
 
 import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',
@@ -21,10 +21,7 @@ const Wrapper = styled.div(({ theme }) => ({
   },
 }));
 
-const Icon = styled(Icons)({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)({
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   verticalAlign: 'inherit',
@@ -75,7 +72,6 @@ export const Item = (props: ItemProps) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,
             }}

code/addons/backgrounds/package.json

@@ -59,7 +59,7 @@
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/interactions/package.json

@@ -61,7 +61,7 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/instrumenter": "workspace:*",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",

code/addons/interactions/src/components/List.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
-import { Icons, type IconsProps } from '@storybook/components';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const ListWrapper = styled.ul({
   listStyle: 'none',
@@ -18,10 +18,7 @@ const Wrapper = styled.div({
   },
 });
 
-const Icon = styled(Icons)<IconsProps>({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)({
   color: convert(themes.light).textMutedColor,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
@@ -68,7 +65,6 @@ export const ListItem: React.FC<ListItemProps> = ({ item }) => {
       <Wrapper>
         <HeaderBar onClick={() => onToggle(!open)} role="button">
           <Icon
-            icon="arrowdown"
             color={convert(themes.light).appBorderColor}
             style={{
               transform: `rotate(${open ? 0 : -90}deg)`,

code/addons/interactions/src/components/StatusIcon.tsx

@@ -1,51 +1,44 @@
 import React from 'react';
-import { Icons, type IconsProps } from '@storybook/components';
 import { type Call, CallStates } from '@storybook/instrumenter';
-import { styled } from '@storybook/theming';
+import { styled, useTheme } from '@storybook/theming';
 
 import { transparentize } from 'polished';
-import localTheme from '../theme';
+import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
 
 export interface StatusIconProps {
   status: Call['status'];
-  useSymbol?: IconsProps['useSymbol'];
-  className?: string;
 }
 
-const {
-  colors: {
-    pure: { gray },
-  },
-} = localTheme;
-
-const StyledStatusIcon = styled(Icons)<StatusIconProps>(({ theme, status }) => {
-  const color = {
-    [CallStates.DONE]: theme.color.positive,
-    [CallStates.ERROR]: theme.color.negative,
-    [CallStates.ACTIVE]: theme.color.secondary,
-    [CallStates.WAITING]: transparentize(0.5, gray[500]),
-  }[status];
-  return {
-    width: status === CallStates.WAITING ? 6 : 12,
-    height: status === CallStates.WAITING ? 6 : 12,
-    color,
-    justifySelf: 'center',
-  };
+const WarningContainer = styled.div({
+  width: 14,
+  height: 14,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 });
 
-export const StatusIcon: React.FC<StatusIconProps> = ({ status, className }) => {
-  const icon = {
-    [CallStates.DONE]: 'check',
-    [CallStates.ERROR]: 'stopalt',
-    [CallStates.ACTIVE]: 'play',
-    [CallStates.WAITING]: 'circle',
-  }[status] as IconsProps['icon'];
-  return (
-    <StyledStatusIcon
-      data-testid={`icon-${status}`}
-      status={status}
-      icon={icon}
-      className={className}
-    />
-  );
+export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
+  const theme = useTheme();
+
+  switch (status) {
+    case CallStates.DONE: {
+      return <CheckIcon color={theme.color.positive} data-testid="icon-done" />;
+    }
+    case CallStates.ERROR: {
+      return <StopAltIcon color={theme.color.negative} data-testid="icon-error" />;
+    }
+    case CallStates.ACTIVE: {
+      return <PlayIcon color={theme.color.secondary} data-testid="icon-active" />;
+    }
+    case CallStates.WAITING: {
+      return (
+        <WarningContainer data-testid="icon-waiting">
+          <CircleIcon color={transparentize(0.5, '#CCCCCC')} size={6} />
+        </WarningContainer>
+      );
+    }
+    default: {
+      return null;
+    }
+  }
 };

code/addons/jest/package.json

@@ -62,6 +62,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/jest/src/components/Result.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment, useState } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
-import { Icons } from '@storybook/components';
 // eslint-disable-next-line import/no-named-as-default
 import Message from './Message';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({
   display: 'flex',
@@ -30,10 +30,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
   },
 }));
 
-const Icon = styled(Icons)(({ theme }) => ({
-  height: 10,
-  width: 10,
-  minWidth: 10,
+const Icon = styled(ChevronSmallDownIcon)(({ theme }) => ({
   color: theme.textMutedColor,
   marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
@@ -66,7 +63,6 @@ export function Result(props: ResultProps) {
         <HeaderBar onClick={onToggle} role="button" status={status}>
           {status === `failed` ? (
             <Icon
-              icon="arrowdown"
               color={convert(themes.light).textMutedColor}
               style={{
                 transform: `rotate(${isOpen ? 0 : -90}deg)`,

code/addons/measure/package.json

@@ -71,7 +71,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",

code/addons/outline/package.json

@@ -61,7 +61,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",

code/addons/themes/package.json

@@ -59,7 +59,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/toolbars/src/components/ToolbarMenuButton.tsx

@@ -10,6 +10,10 @@ interface ToolbarMenuButtonProps {
   onClick?: () => void;
 }
 
+// We can't remove the Icons component just yet because there's no way for now to import icons
+// in the preview directly. Before having a better solution, we are going to keep the Icons component
+// for now and remove the deprecated warning.
+
 export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
   active,
   title,
@@ -19,7 +23,7 @@ export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
 }) => {
   return (
     <IconButton active={active} title={description} onClick={onClick}>
-      {icon && <Icons icon={icon} />}
+      {icon && <Icons icon={icon} __suppressDeprecationWarning={true} />}
       {title ? `\xa0${title}` : null}
     </IconButton>
   );

code/addons/viewport/package.json

@@ -55,7 +55,7 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
+    "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/builders/builder-vite/package.json

@@ -57,7 +57,8 @@
     "express": "^4.17.3",
     "find-cache-dir": "^3.0.0",
     "fs-extra": "^11.1.0",
-    "magic-string": "^0.30.0"
+    "magic-string": "^0.30.0",
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",