From 1dadd476f9bd3ab73880bd2afb77ecd6aaed7cb0 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 2 Sep 2024 09:56:54 +0200 Subject: [PATCH 1/3] don't use parameters for default viewports, as they are not overridable --- code/addons/viewport/src/components/Tool.tsx | 6 +++--- code/addons/viewport/src/preview.ts | 8 -------- code/addons/viewport/src/utils.tsx | 2 -- 3 files changed, 3 insertions(+), 13 deletions(-) diff --git a/code/addons/viewport/src/components/Tool.tsx b/code/addons/viewport/src/components/Tool.tsx index 3564ecad2c08..52b8713c7919 100644 --- a/code/addons/viewport/src/components/Tool.tsx +++ b/code/addons/viewport/src/components/Tool.tsx @@ -7,15 +7,15 @@ import { Global } from 'storybook/internal/theming'; import { GrowIcon, RefreshIcon, TransferIcon } from '@storybook/icons'; import { PARAM_KEY as KEY } from '../constants'; +import { MINIMAL_VIEWPORTS } from '../defaults'; import { responsiveViewport } from '../responsiveViewport'; import { registerShortcuts } from '../shortcuts'; -import type { Config, GlobalState, GlobalStateUpdate, Viewport, ViewportMap } from '../types'; +import type { Config, GlobalStateUpdate, Viewport, ViewportMap } from '../types'; import { ActiveViewportLabel, ActiveViewportSize, IconButtonLabel, IconButtonWithLabel, - emptyViewportMap, iconsMap, } from '../utils'; @@ -39,7 +39,7 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => { const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const { options = emptyViewportMap, disable } = config || {}; + const { options = MINIMAL_VIEWPORTS, disable } = config || {}; const data = globals?.[KEY] || {}; const viewportName: string = data.value; const isRotated: boolean = data.isRotated; diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts index 21f45e310635..9c8ddc9cfb0e 100644 --- a/code/addons/viewport/src/preview.ts +++ b/code/addons/viewport/src/preview.ts @@ -10,11 +10,3 @@ const modern: Record = { const legacy = { viewport: 'reset', viewportRotated: false }; export const initialGlobals = FEATURES?.viewportStoryGlobals ? modern : legacy; - -export const parameters = FEATURES?.viewportStoryGlobals - ? { - [KEY]: { - options: MINIMAL_VIEWPORTS, - }, - } - : {}; diff --git a/code/addons/viewport/src/utils.tsx b/code/addons/viewport/src/utils.tsx index e83572e89628..619ddc178d3e 100644 --- a/code/addons/viewport/src/utils.tsx +++ b/code/addons/viewport/src/utils.tsx @@ -42,5 +42,3 @@ export const iconsMap: Record = { tablet: , other: , }; - -export const emptyViewportMap: ViewportMap = {}; From 873493b3f762c268d4623c687b339325a361a941 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 2 Sep 2024 10:29:28 +0200 Subject: [PATCH 2/3] dont' use parameters for default backgrounds, as they are not overridable --- .../backgrounds/src/components/Tool.tsx | 5 ++--- code/addons/backgrounds/src/decorator.ts | 8 +++++++- code/addons/backgrounds/src/defaults.ts | 6 ++++++ code/addons/backgrounds/src/preview.ts | 19 +++++-------------- 4 files changed, 20 insertions(+), 18 deletions(-) create mode 100644 code/addons/backgrounds/src/defaults.ts diff --git a/code/addons/backgrounds/src/components/Tool.tsx b/code/addons/backgrounds/src/components/Tool.tsx index 5f94606d0614..828cc3b3a3d4 100644 --- a/code/addons/backgrounds/src/components/Tool.tsx +++ b/code/addons/backgrounds/src/components/Tool.tsx @@ -6,18 +6,17 @@ import { useGlobals, useParameter } from 'storybook/internal/manager-api'; import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons'; import { PARAM_KEY as KEY } from '../constants'; +import { DEFAULT_BACKGROUNDS } from '../defaults'; import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types'; type Link = Parameters['0']['links'][0]; -const emptyBackgroundMap: BackgroundMap = {}; - export const BackgroundTool = memo(function BackgroundSelector() { const config = useParameter(KEY); const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const { options = emptyBackgroundMap, disable = true } = config || {}; + const { options = DEFAULT_BACKGROUNDS, disable = true } = config || {}; if (disable) { return null; } diff --git a/code/addons/backgrounds/src/decorator.ts b/code/addons/backgrounds/src/decorator.ts index ecaccb44c99d..82d12f715366 100644 --- a/code/addons/backgrounds/src/decorator.ts +++ b/code/addons/backgrounds/src/decorator.ts @@ -6,6 +6,7 @@ import type { } from 'storybook/internal/types'; import { PARAM_KEY as KEY } from './constants'; +import { DEFAULT_BACKGROUNDS } from './defaults'; import type { Config, GridConfig } from './types'; import { addBackgroundStyle, addGridStyle, clearStyles, isReduceMotionEnabled } from './utils'; @@ -25,7 +26,11 @@ export const withBackgroundAndGrid = ( context: StoryContext ) => { const { globals, parameters, viewMode, id } = context; - const { options = {}, disable, grid = defaultGrid } = (parameters[KEY] || {}) as Config; + const { + options = DEFAULT_BACKGROUNDS, + disable, + grid = defaultGrid, + } = (parameters[KEY] || {}) as Config; const data = globals[KEY] || {}; const backgroundName: string | undefined = data.value; @@ -35,6 +40,7 @@ export const withBackgroundAndGrid = ( const showGrid = data.grid || false; const shownBackground = !!item && !disable; + console.log({ context, globals, parameters, options, data, item, value, shownBackground, KEY }); const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main'; const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main'; diff --git a/code/addons/backgrounds/src/defaults.ts b/code/addons/backgrounds/src/defaults.ts new file mode 100644 index 000000000000..6b9329d15458 --- /dev/null +++ b/code/addons/backgrounds/src/defaults.ts @@ -0,0 +1,6 @@ +import type { BackgroundMap } from './types'; + +export const DEFAULT_BACKGROUNDS: BackgroundMap = { + light: { name: 'light', value: '#F8F8F8' }, + dark: { name: 'dark', value: '#333' }, +}; diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts index 9d773da2d48e..212a88c0bec2 100644 --- a/code/addons/backgrounds/src/preview.ts +++ b/code/addons/backgrounds/src/preview.ts @@ -2,6 +2,7 @@ import type { Addon_DecoratorFunction } from 'storybook/internal/types'; import { PARAM_KEY as KEY } from './constants'; import { withBackgroundAndGrid } from './decorator'; +import { DEFAULT_BACKGROUNDS } from './defaults'; import { withBackground } from './legacy/withBackgroundLegacy'; import { withGrid } from './legacy/withGridLegacy'; import type { Config, GlobalState } from './types'; @@ -18,20 +19,10 @@ export const parameters = { cellAmount: 5, }, disable: false, - ...(FEATURES?.backgroundsStoryGlobals - ? { - options: { - light: { name: 'light', value: '#F8F8F8' }, - dark: { name: 'dark', value: '#333' }, - }, - } - : { - // TODO: remove in 9.0 - values: [ - { name: 'light', value: '#F8F8F8' }, - { name: 'dark', value: '#333333' }, - ], - }), + // TODO: remove in 9.0 + ...(!FEATURES?.backgroundsStoryGlobals && { + values: Object.values(DEFAULT_BACKGROUNDS), + }), } satisfies Partial, }; From ec394c0ac7a9b926773c49e65dd58769b72cddf9 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 2 Sep 2024 12:45:26 +0200 Subject: [PATCH 3/3] cleanup --- code/addons/backgrounds/src/decorator.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/backgrounds/src/decorator.ts b/code/addons/backgrounds/src/decorator.ts index 82d12f715366..9fa8419d8eb0 100644 --- a/code/addons/backgrounds/src/decorator.ts +++ b/code/addons/backgrounds/src/decorator.ts @@ -40,7 +40,6 @@ export const withBackgroundAndGrid = ( const showGrid = data.grid || false; const shownBackground = !!item && !disable; - console.log({ context, globals, parameters, options, data, item, value, shownBackground, KEY }); const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main'; const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';