CSF: Allow overridding globals at the story level

code/.storybook/main.ts

@@ -8,33 +8,37 @@ const managerApiPath = path.join(__dirname, '../core/src/manager-api');
 
 const config: StorybookConfig = {
   stories: [
+    {
+      directory: '../core/template/stories',
+      titlePrefix: 'core',
+    },
     {
       directory: '../core/src/manager',
-      titlePrefix: '@manager',
+      titlePrefix: 'manager',
     },
     {
       directory: '../core/src/preview-api',
-      titlePrefix: '@preview',
+      titlePrefix: 'preview',
     },
     {
       directory: '../core/src/components',
-      titlePrefix: '@components',
+      titlePrefix: 'components',
     },
     {
       directory: '../lib/blocks/src',
-      titlePrefix: '@blocks',
+      titlePrefix: 'blocks',
     },
     {
       directory: '../addons/controls/src',
-      titlePrefix: '@addons/controls',
+      titlePrefix: 'addons/controls',
     },
     {
       directory: '../addons/onboarding/src',
-      titlePrefix: '@addons/onboarding',
+      titlePrefix: 'addons/onboarding',
     },
     {
       directory: '../addons/interactions/src',
-      titlePrefix: '@addons/interactions',
+      titlePrefix: 'addons/interactions',
     },
   ],
   addons: [
@@ -81,7 +85,7 @@ const config: StorybookConfig = {
         sourcemap: process.env.CI !== 'true',
       },
     }),
-  logLevel: 'debug',
+  // logLevel: 'debug',
 };
 
 export default config;

code/.storybook/preview.tsx

@@ -10,14 +10,21 @@ import {
   styled,
   useTheme,
 } from 'storybook/internal/theming';
-import { useArgs, DocsContext as DocsContextProps } from 'storybook/internal/preview-api';
+import {
+  useArgs,
+  DocsContext as DocsContextProps,
+  useGlobals,
+} from 'storybook/internal/preview-api';
 import type { PreviewWeb } from 'storybook/internal/preview-api';
 import type { ReactRenderer } from '@storybook/react';
 import type { Channel } from 'storybook/internal/channels';
 
+import '../renderers/react/template/components';
+
 import { DocsContext } from '@storybook/blocks';
 
 import { DocsPageWrapper } from '../lib/blocks/src/components';
+import type { PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
 const { document } = global;
 
@@ -133,6 +140,7 @@ export const loaders = [
     }
     return { docsContext };
   },
+  async () => ({ projectValue: 2 }),
 ];
 
 export const decorators = [
@@ -159,10 +167,16 @@ 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 }) => {
+  (StoryFn, { globals, parameters, playFunction, args, userGlobals, storyGlobals, ...rest }) => {
+    console.log({ rest, userGlobals, globals });
     const defaultTheme =
       isChromatic() && !playFunction && args.autoplay !== true ? 'stacked' : 'light';
-    const theme = globals.theme || parameters.theme || defaultTheme;
+    const theme =
+      storyGlobals.theme || userGlobals.theme || globals.theme || parameters.theme || defaultTheme;
+
+    const [x, y] = useGlobals();
+
+    console.log({ x, y });
 
     switch (theme) {
       case 'side-by-side': {
@@ -257,9 +271,20 @@ export const decorators = [
       </>
     );
   },
+  (storyFn: PartialStoryFn, context: StoryContext) => {
+    if (context.parameters.useProjectDecorator)
+      return storyFn({ args: { ...context.args, text: `project ${context.args.text}` } });
+    return storyFn();
+  },
 ];
 
 export const parameters = {
+  projectParameter: 'projectParameter',
+  storyObject: {
+    a: 'project',
+    b: 'project',
+    c: 'project',
+  },
   options: {
     storySort: (a, b) =>
       a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
@@ -312,4 +337,11 @@ export const globalTypes = {
       ],
     },
   },
+  foo: { defaultValue: 'fooDefaultValue' },
+  bar: { defaultValue: 'barDefaultValue' },
+};
+
+export const initialGlobals = {
+  foo: 'fooValue',
+  baz: 'bazValue',
 };

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -54,10 +54,7 @@ export const Disabled: Story = {
 
 export const Hovered: Story = {
   ...Done,
-  parameters: {
-    // Set light theme to avoid stacked theme in chromatic
-    theme: 'light',
-  },
+  globals: { theme: 'light' },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.hover(canvas.getByRole('button'));

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -33,10 +33,8 @@ const meta = {
       </StyledWrapper>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-    theme: 'light', // stacked will break interactions
-  },
+  parameters: { layout: 'fullscreen' },
+  globals: { theme: 'light' },
   args: {
     calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,

code/addons/links/package.json

@@ -67,7 +67,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.11",
+    "@storybook/csf": "0.1.12--canary.95.1b1fb52.0",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

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

@@ -4,6 +4,7 @@ import { Icons, IconButton, type IconsProps } from 'storybook/internal/component
 
 interface ToolbarMenuButtonProps {
   active: boolean;
+  disabled?: boolean;
   title: string;
   icon?: IconsProps['icon'];
   description: string;
@@ -16,13 +17,19 @@ interface ToolbarMenuButtonProps {
 
 export const ToolbarMenuButton: FC<ToolbarMenuButtonProps> = ({
   active,
+  disabled,
   title,
   icon,
   description,
   onClick,
 }) => {
   return (
-    <IconButton active={active} title={description} onClick={onClick}>
+    <IconButton
+      active={active}
+      title={description}
+      disabled={disabled}
+      onClick={disabled ? () => {} : onClick}
+    >
       {icon && <Icons icon={icon} __suppressDeprecationWarning={true} />}
       {title ? `\xa0${title}` : null}
     </IconButton>

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

@@ -18,11 +18,12 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
     description,
     toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle },
   }) => {
-    const [globals, updateGlobals] = useGlobals();
+    const [globals, updateGlobals, storyGlobals] = useGlobals();
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
     const currentValue = globals[id];
     const hasGlobalValue = !!currentValue;
+    const isOverridden = id in storyGlobals;
     let icon = _icon;
     let title = _title;
 
@@ -42,7 +43,7 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
       (value: string | undefined) => {
         updateGlobals({ [id]: value });
       },
-      [currentValue, updateGlobals]
+      [id, updateGlobals]
     );
 
     return (
@@ -79,6 +80,7 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
       >
         <ToolbarMenuButton
           active={isTooltipVisible || hasGlobalValue}
+          disabled={isOverridden}
           description={description || ''}
           icon={icon}
           title={title || ''}

code/addons/toolbars/template/stories/globals.stories.ts

@@ -31,3 +31,9 @@ export default {
 };
 
 export const Basic = {};
+
+export const Override = {
+  globals: {
+    locale: 'kr',
+  },
+};

code/core/package.json

@@ -245,7 +245,7 @@
     "prep": "bun ./scripts/prep.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.11",
+    "@storybook/csf": "0.1.12--canary.95.1b1fb52.0",
     "@types/express": "^4.17.21",
     "@types/node": "^18.0.0",
     "browser-assert": "^1.2.1",

code/core/src/common/js-package-manager/PNPMProxy.ts

@@ -3,7 +3,7 @@ import dedent from 'ts-dedent';
 import { existsSync, readFileSync } from 'node:fs';
 import { findUpSync } from 'find-up';
 import path from 'node:path';
-import { FindPackageVersionsError } from '@storybook/core-events/server-errors';
+import { FindPackageVersionsError } from '@storybook/core/server-errors';
 
 import { JsPackageManager } from './JsPackageManager';
 import type { PackageJson } from './PackageJson';

code/core/src/common/js-package-manager/Yarn1Proxy.ts

@@ -2,7 +2,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import dedent from 'ts-dedent';
 import { findUpSync } from 'find-up';
 import path from 'node:path';
-import { FindPackageVersionsError } from '@storybook/core-events/server-errors';
+import { FindPackageVersionsError } from '@storybook/core/server-errors';
 
 import { createLogStream } from '../utils/cli';
 import { JsPackageManager } from './JsPackageManager';

code/core/src/common/js-package-manager/Yarn2Proxy.ts

@@ -4,7 +4,7 @@ import { existsSync, readFileSync } from 'node:fs';
 import path from 'node:path';
 import { PosixFS, VirtualFS, ZipOpenFS } from '@yarnpkg/fslib';
 import { getLibzipSync } from '@yarnpkg/libzip';
-import { FindPackageVersionsError } from '@storybook/core-events/server-errors';
+import { FindPackageVersionsError } from '@storybook/core/server-errors';
 
 import { createLogStream } from '../utils/cli';
 import { JsPackageManager } from './JsPackageManager';

code/core/src/components/components/tabs/tabs.stories.tsx

@@ -181,9 +181,9 @@ export const StatefulDynamicWithOpenTooltip = {
       defaultViewport: 'sized',
       viewports: customViewports,
     },
-    theme: 'light',
     chromatic: { viewports: [380] },
   },
+  globals: { theme: 'light' },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);