CSF: Allow overridding globals at the story level

.git-blame-ignore-revs

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

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",

code/addons/backgrounds/src/components/Tool.tsx

@@ -0,0 +1,145 @@
+import React, { useState, memo, Fragment, useCallback } from 'react';
+
+import { useGlobals, useParameter } from 'storybook/internal/manager-api';
+import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
+
+import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons';
+import { PARAM_KEY as KEY } from '../constants';
+import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';
+
+type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
+
+const emptyBackgroundMap: BackgroundMap = {};
+
+export const BackgroundTool = memo(function BackgroundSelector() {
+ const config = useParameter<Config>(KEY);
+ const [globals, updateGlobals, storyGlobals] = useGlobals();
+ const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+
+ const { options = emptyBackgroundMap, disable = true } = config || {};
+ if (disable) {
+ return null;
+ }
+
+ const data = globals[KEY] || {};
+ const backgroundName: string = data.value;
+ const isGridActive = data.grid || false;
+
+ const item = options[backgroundName];
+ const isLocked = !!storyGlobals?.[KEY];
+ const length = Object.keys(options).length;
+
+ return (
+ <Pure
+ {...{
+ length,
+ backgroundMap: options,
+ item,
+ updateGlobals,
+ backgroundName,
+ setIsTooltipVisible,
+ isLocked,
+ isGridActive,
+ isTooltipVisible,
+ }}
+ />
+ );
+});
+
+interface PureProps {
+ length: number;
+ backgroundMap: BackgroundMap;
+ item: Background | undefined;
+ updateGlobals: ReturnType<typeof useGlobals>['1'];
+ backgroundName: string | undefined;
+ setIsTooltipVisible: React.Dispatch<React.SetStateAction<boolean>>;
+ isLocked: boolean;
+ isGridActive: boolean;
+ isTooltipVisible: boolean;
+}
+
+const Pure = memo(function PureTool(props: PureProps) {
+ const {
+ item,
+ length,
+ updateGlobals,
+ setIsTooltipVisible,
+ backgroundMap,
+ backgroundName,
+ isLocked,
+ isGridActive: isGrid,
+ isTooltipVisible,
+ } = props;
+
+ const update = useCallback(
+ (input: GlobalStateUpdate) => {
+ updateGlobals({
+ [KEY]: input,
+ });
+ },
+ [updateGlobals]
+ );
+
+ return (
+ <Fragment>
+ <IconButton
+ key="grid"
+ active={isGrid}
+ disabled={isLocked}
+ title="Apply a grid to the preview"
+ onClick={() => update({ value: backgroundName, grid: !isGrid })}
+ >
+ <GridIcon />
+ </IconButton>
+
+ {length > 0 ? (
+ <WithTooltip
+ key="background"
+ placement="top"
+ closeOnOutsideClick
+ tooltip={({ onHide }) => {
+ return (
+ <TooltipLinkList
+ links={[
+ ...(!!item
+ ? [
+ {
+ id: 'reset',
+ title: 'Reset background',
+ icon: <RefreshIcon />,
+ onClick: () => {
+ update({ value: undefined, grid: isGrid });
+ onHide();
+ },
+ },
+ ]
+ : []),
+ ...Object.entries(backgroundMap).map<Link>(([k, value]) => ({
+ id: k,
+ title: value.name,
+ icon: <CircleIcon color={value?.value || 'grey'} />,
+ active: k === backgroundName,
+ onClick: () => {
+ update({ value: k, grid: isGrid });
+ onHide();
+ },
+ })),
+ ]}
+ />
+ );
+ }}
+ onVisibleChange={setIsTooltipVisible}
+ >
+ <IconButton
+ disabled={isLocked}
+ key="background"
+ title="Change the background of the preview"
+ active={!!item || isTooltipVisible}
+ >
+ <PhotoIcon />
+ </IconButton>
+ </WithTooltip>
+ ) : null}
+ </Fragment>
+ );
+});