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);