Release: Prerelease 8.3.0-alpha.4

.git-blame-ignore-revs

@@ -1,4 +1,5 @@
 34e364a0ca1d93555d36a7367d78e8e229493de8
 c0896915fb7fb9a8dd416b9aebca17abd909d1c1
 a41c227037e7e7249b8b376f838f4f8bcc3e3e59
-13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54
+13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54
+0a4522a3f84773f39daec4820c49b8a92e9f9d11

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.2.7
+
+- CPC: Fix type usage in renderers - [#28745](https://github.com/storybookjs/storybook/pull/28745), thanks @ndelangen!
+- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
+
 ## 8.2.6
 
 - CPC: Fix missing exports for addon-kit - [#28691](https://github.com/storybookjs/storybook/pull/28691), thanks @ndelangen!

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 8.3.0-alpha.4
+
+- CSF: Allow overridding globals at the story level - [#26654](https://github.com/storybookjs/storybook/pull/26654), thanks @tmeasday!
+- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
+- Core: Split Storybook CLI  - [#28519](https://github.com/storybookjs/storybook/pull/28519), thanks @kasperpeulen!
+- Fix: Invariant failed: Expected package.json#version to be defined in the "undefined" package - [#28752](https://github.com/storybookjs/storybook/pull/28752), thanks @abcdmku!
+- Next.js: Make RSC portable-stories compatible - [#28756](https://github.com/storybookjs/storybook/pull/28756), thanks @valentinpalkovic!
+- UI: Fix collapse/expand all functionality - [#28582](https://github.com/storybookjs/storybook/pull/28582), thanks @filipemelo2002!
+
 ## 8.3.0-alpha.3
 
 - Angular: Fix Angular template error for props with a circular reference - [#28498](https://github.com/storybookjs/storybook/pull/28498), thanks @Marklb!

MIGRATION.md

@@ -1632,7 +1632,7 @@ export const Primary = {
 
 ## From version 6.5.x to 7.0.0
 
-A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx dlx storybook@latest upgrade --prerelease`.
+A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@7 upgrade` or `pnpx dlx storybook@7 upgrade`.
 
 ### 7.0 breaking changes
 

code/.storybook/main.ts

@@ -68,6 +68,10 @@ const config: StorybookConfig = {
       directory: '../addons/toolbars/template/stories',
       titlePrefix: 'addons/toolbars',
     },
+    {
+      directory: '../addons/themes/template/stories',
+      titlePrefix: 'addons/themes',
+    },
     {
       directory: '../addons/onboarding/src',
       titlePrefix: 'addons/onboarding',
@@ -83,6 +87,7 @@ const config: StorybookConfig = {
   ],
   addons: [
     '@storybook/addon-links',
+    '@storybook/addon-themes',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
@@ -119,7 +124,6 @@ const config: StorybookConfig = {
   },
   features: {
     viewportStoryGlobals: true,
-    themesStoryGlobals: true,
     backgroundsStoryGlobals: true,
   },
   viteFinal: (viteConfig, { configType }) =>

code/.storybook/preview.tsx

@@ -12,16 +12,17 @@ import {
 } from 'storybook/internal/theming';
 import { useArgs, DocsContext as DocsContextProps } from 'storybook/internal/preview-api';
 import type { PreviewWeb } from 'storybook/internal/preview-api';
-import type { ReactRenderer } from '@storybook/react';
+import type { ReactRenderer, Decorator } from '@storybook/react';
 import type { Channel } from 'storybook/internal/channels';
 
 import { DocsContext } from '@storybook/blocks';
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { DocsPageWrapper } from '../lib/blocks/src/components';
 
 const { document } = global;
 
-const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
+const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
   {
     position: 'absolute',
     top: 0,
@@ -31,8 +32,10 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
     height: '100vh',
     bottom: 0,
     overflow: 'auto',
-    padding: 10,
   },
+  ({ layout }) => ({
+    padding: layout === 'fullscreen' ? 0 : '1rem',
+  }),
   ({ theme }) => ({
     background: theme.background.content,
     color: theme.color.defaultText,
@@ -49,14 +52,17 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right' }>(
         }
 );
 
-const ThemeStack = styled.div(
+const ThemeStack = styled.div<{ layout: string }>(
   {
     position: 'relative',
-    minHeight: 'calc(50vh - 15px)',
+    flex: 1,
   },
   ({ theme }) => ({
     background: theme.background.content,
     color: theme.color.defaultText,
+  }),
+  ({ layout }) => ({
+    padding: layout === 'fullscreen' ? 0 : '1rem',
   })
 );
 
@@ -80,6 +86,25 @@ const PlayFnNotice = styled.div(
   })
 );
 
+const StackContainer = ({ children, layout }) => (
+  <div
+    style={{
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      // margin: layout === 'fullscreen' ? 0 : '-1rem',
+    }}
+  >
+    <style dangerouslySetInnerHTML={{ __html: 'html, body, #storybook-root { height: 100%; }' }} />
+    {layout === 'fullscreen' ? null : (
+      <style
+        dangerouslySetInnerHTML={{ __html: 'html, body { padding: 0!important; margin: 0; }' }}
+      />
+    )}
+    {children}
+  </div>
+);
+
 const ThemedSetRoot = () => {
   const theme = useTheme();
 
@@ -159,10 +184,20 @@ export const decorators = [
   /**
    * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
    */
-  (StoryFn, { globals, parameters, playFunction, args }) => {
-    const defaultTheme =
-      isChromatic() && !playFunction && args.autoplay !== true ? 'stacked' : 'light';
-    const theme = globals.theme || parameters.theme || defaultTheme;
+  (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
+    let theme = globals.sb_theme;
+    let showPlayFnNotice = false;
+
+    // this makes the decorator be out of 'phase' with the actually selected theme in the toolbar
+    // but this is acceptable, I guess
+    // we need to ensure only a single rendering in chromatic
+    // a more 'correct' approach would be to set a specific theme global on every story that has a playFunction
+    if (playFunction && args.autoplay !== false && !(theme === 'light' || theme === 'dark')) {
+      theme = 'light';
+      showPlayFnNotice = true;
+    } else if (isChromatic() && !storyGlobals.sb_theme && !playFunction) {
+      theme = 'stacked';
+    }
 
     switch (theme) {
       case 'side-by-side': {
@@ -172,12 +207,12 @@ export const decorators = [
               <Global styles={createReset} />
             </ThemeProvider>
             <ThemeProvider theme={convert(themes.light)}>
-              <ThemeBlock side="left" data-side="left">
+              <ThemeBlock side="left" data-side="left" layout={parameters.layout}>
                 <StoryFn />
               </ThemeBlock>
             </ThemeProvider>
             <ThemeProvider theme={convert(themes.dark)}>
-              <ThemeBlock side="right" data-side="right">
+              <ThemeBlock side="right" data-side="right" layout={parameters.layout}>
                 <StoryFn />
               </ThemeBlock>
             </ThemeProvider>
@@ -190,16 +225,18 @@ export const decorators = [
             <ThemeProvider theme={convert(themes.light)}>
               <Global styles={createReset} />
             </ThemeProvider>
-            <ThemeProvider theme={convert(themes.light)}>
-              <ThemeStack data-side="left">
-                <StoryFn />
-              </ThemeStack>
-            </ThemeProvider>
-            <ThemeProvider theme={convert(themes.dark)}>
-              <ThemeStack data-side="right">
-                <StoryFn />
-              </ThemeStack>
-            </ThemeProvider>
+            <StackContainer layout={parameters.layout}>
+              <ThemeProvider theme={convert(themes.light)}>
+                <ThemeStack data-side="left" layout={parameters.layout}>
+                  <StoryFn />
+                </ThemeStack>
+              </ThemeProvider>
+              <ThemeProvider theme={convert(themes.dark)}>
+                <ThemeStack data-side="right" layout={parameters.layout}>
+                  <StoryFn />
+                </ThemeStack>
+              </ThemeProvider>
+            </StackContainer>
           </Fragment>
         );
       }
@@ -209,7 +246,7 @@ export const decorators = [
           <ThemeProvider theme={convert(themes[theme])}>
             <Global styles={createReset} />
             <ThemedSetRoot />
-            {!parameters.theme && isChromatic() && playFunction && (
+            {showPlayFnNotice && (
               <>
                 <PlayFnNotice>
                   <span>
@@ -233,7 +270,7 @@ export const decorators = [
    *
    * If parameters.withRawArg is not set, this decorator will do nothing
    */
-  (StoryFn, { parameters, args, hooks }) => {
+  (StoryFn, { parameters, args }) => {
     const [, updateArgs] = useArgs();
     if (!parameters.withRawArg) {
       return <StoryFn />;
@@ -246,6 +283,7 @@ export const decorators = [
             ...args,
             onChange: (newValue) => {
               updateArgs({ [parameters.withRawArg]: newValue });
+              // @ts-expect-error onChange is not a valid arg
               args.onChange?.(newValue);
             },
           }}
@@ -257,7 +295,7 @@ export const decorators = [
       </>
     );
   },
-];
+] satisfies Decorator[];
 
 export const parameters = {
   options: {
@@ -295,4 +333,22 @@ export const parameters = {
       'slategray',
     ],
   },
+  viewport: {
+    options: MINIMAL_VIEWPORTS,
+  },
+  themes: {
+    disable: true,
+  },
+  backgrounds: {
+    options: {
+      light: { name: 'light', value: '#edecec' },
+      dark: { name: 'dark', value: '#262424' },
+      blue: { name: 'blue', value: '#1b1a2c' },
+    },
+    grid: {
+      cellSize: 15,
+      cellAmount: 10,
+      opacity: 0.4,
+    },
+  },
 };

code/addons/backgrounds/package.json

@@ -80,7 +80,7 @@
       "./src/manager.tsx"
     ],
     "previewEntries": [
-      "./src/preview.tsx"
+      "./src/preview.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",