restructuring

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/modern/BackgroundSelectorModern.tsx → code/addons/backgrounds/src/components/Tool.tsx

@@ -12,7 +12,7 @@ type BackgroundMap = Record<string, Background>;
 
 const emptyBackgroundMap: BackgroundMap = {};
 
-export const BackgroundSelector = memo(function BackgroundSelector() {
+export const BackgroundTool = memo(function BackgroundSelector() {
   const globalTypes = useGlobalTypes();
   const [globals, updateGlobals, storyGlobals] = useGlobals();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);

code/addons/backgrounds/src/modern/decorator.ts → code/addons/backgrounds/src/decorator.ts

@@ -5,9 +5,9 @@ import type {
   StoryContext,
 } from 'storybook/internal/types';
 
-import { PARAM_KEY as KEY } from '../constants';
-import { clearStyles, addBackgroundStyle, isReduceMotionEnabled, addGridStyle } from '../helpers';
-import type { Background } from '../types';
+import { PARAM_KEY as KEY } from './constants';
+import { clearStyles, addBackgroundStyle, isReduceMotionEnabled, addGridStyle } from './utils';
+import type { Background } from './types';
 
 const defaultGrid = {
   cellSize: 100,
@@ -20,11 +20,13 @@ type BackgroundMap = Record<string, Background>;
 const BG_SELECTOR_BASE = `addon-backgrounds`;
 const GRID_SELECTOR_BASE = 'addon-backgrounds-grid';
 
+const transitionStyle = isReduceMotionEnabled() ? '' : 'transition: background-color 0.3s;';
+
 export const withBackgroundAndGrid = (
   StoryFn: StoryFunction<Renderer>,
   context: StoryContext<Renderer>
 ) => {
-  const { globals, globalTypes, parameters } = context;
+  const { globals, globalTypes, parameters, viewMode, id } = context;
   const data = globals[KEY] || {};
   const backgroundMap = (globalTypes[KEY]?.options as any as BackgroundMap) || {};
   const backgroundName: string = data.value;
@@ -34,9 +36,6 @@ export const withBackgroundAndGrid = (
   const isGrid = data.grid || false;
   const shownBackground = !!item;
 
-  const viewMode = context.viewMode;
-  const id = context.id;
-
   const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
   const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main';
 
@@ -50,8 +49,6 @@ export const withBackgroundAndGrid = (
     offsetY = defaultOffset,
   } = gridConfig;
 
-  const transitionStyle = isReduceMotionEnabled() ? '' : 'transition: background-color 0.3s;';
-
   const backgroundSelectorId =
     viewMode === 'docs' ? `${BG_SELECTOR_BASE}-docs-${id}` : `${BG_SELECTOR_BASE}-color`;
   const backgroundTarget = viewMode === 'docs' ? id : null;

code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx

@@ -8,14 +8,14 @@ import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/com
 
 import { PhotoIcon } from '@storybook/icons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import { ColorIcon } from '../components/ColorIcon';
+import { ColorIcon } from './ColorIcon';
 import type {
   BackgroundSelectorItem,
   Background,
   BackgroundsParameter,
   GlobalState,
 } from '../types';
-import { getBackgroundColorByName } from '../helpers';
+import { getBackgroundColorByName } from './getBackgroundColorByName';
 
 const createBackgroundSelectorItem = memoize(1000)(
   (
@@ -62,7 +62,7 @@ const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
   values: [],
 };
 
-export const BackgroundSelector: FC = memo(function BackgroundSelector() {
+export const BackgroundToolLegacy: FC = memo(function BackgroundSelector() {
   const backgroundsConfig = useParameter<BackgroundsParameter>(
     BACKGROUNDS_PARAM_KEY,
     DEFAULT_BACKGROUNDS_CONFIG

code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx

@@ -7,7 +7,7 @@ import { IconButton } from 'storybook/internal/components';
 import { GridIcon } from '@storybook/icons';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
-export const GridSelector: FC = memo(function GridSelector() {
+export const GridToolLegacy: FC = memo(function GridSelector() {
   const [globals, updateGlobals, storyGlobals] = useGlobals();
 
   const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, {

code/addons/backgrounds/src/legacy/getBackgroundColorByName.ts

@@ -0,0 +1,39 @@
+import { dedent } from 'ts-dedent';
+import { logger } from 'storybook/internal/client-logger';
+import type { Background } from '../types';
+
+export const getBackgroundColorByName = (
+  currentSelectedValue: string,
+  backgrounds: Background[] = [],
+  defaultName: string | null | undefined
+): string => {
+  if (currentSelectedValue === 'transparent') {
+    return 'transparent';
+  }
+
+  if (backgrounds.find((background) => background.value === currentSelectedValue)) {
+    return currentSelectedValue;
+  }
+
+  if (currentSelectedValue) {
+    return currentSelectedValue;
+  }
+
+  const defaultBackground = backgrounds.find((background) => background.name === defaultName);
+  if (defaultBackground) {
+    return defaultBackground.value;
+  }
+
+  if (defaultName) {
+    const availableColors = backgrounds.map((background) => background.name).join(', ');
+    logger.warn(
+      dedent`
+        Backgrounds Addon: could not find the default color "${defaultName}".
+        These are the available colors for your story based on your configuration:
+        ${availableColors}.
+      `
+    );
+  }
+
+  return 'transparent';
+};

code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts

@@ -6,12 +6,8 @@ import type {
 } from 'storybook/internal/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
-import {
-  clearStyles,
-  addBackgroundStyle,
-  getBackgroundColorByName,
-  isReduceMotionEnabled,
-} from '../helpers';
+import { clearStyles, addBackgroundStyle, isReduceMotionEnabled } from '../utils';
+import { getBackgroundColorByName } from './getBackgroundColorByName';
 
 export const withBackground = (
   StoryFn: StoryFunction<Renderer>,

code/addons/backgrounds/src/legacy/withGridLegacy.ts

@@ -5,7 +5,7 @@ import type {
   StoryContext,
 } from 'storybook/internal/types';
 
-import { clearStyles, addGridStyle } from '../helpers';
+import { clearStyles, addGridStyle } from '../utils';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
 export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {

code/addons/backgrounds/src/manager.tsx

@@ -2,10 +2,9 @@ import React, { Fragment } from 'react';
 import { addons, types } from 'storybook/internal/manager-api';
 
 import { ADDON_ID } from './constants';
-import { BackgroundSelector as BackgroundSelectorLegacy } from './legacy/BackgroundSelectorLegacy';
-import { GridSelector as GridSelectorLegacy } from './legacy/GridSelectorLegacy';
-import { BackgroundSelector } from './modern/BackgroundSelectorModern';
-import { GridSelector } from './modern/GridSelectorModern';
+import { BackgroundToolLegacy } from './legacy/BackgroundSelectorLegacy';
+import { GridToolLegacy } from './legacy/GridSelectorLegacy';
+import { BackgroundTool } from './components/Tool';
 
 addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
@@ -14,11 +13,11 @@ addons.register(ADDON_ID, () => {
     match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
     render: () =>
       FEATURES?.backgroundsStoryGlobals ? (
-        <BackgroundSelector />
+        <BackgroundTool />
       ) : (
         <Fragment>
-          <BackgroundSelectorLegacy />
-          <GridSelectorLegacy />
+          <BackgroundToolLegacy />
+          <GridToolLegacy />
         </Fragment>
       ),
   });

code/addons/backgrounds/src/preview.tsx → code/addons/backgrounds/src/preview.ts

@@ -2,11 +2,13 @@ import type { Addon_DecoratorFunction } from 'storybook/internal/types';
 import { withBackground } from './legacy/withBackgroundLegacy';
 import { withGrid } from './legacy/withGridLegacy';
 import { PARAM_KEY } from './constants';
-import { withBackgroundAndGrid } from './modern/decorator';
+import { withBackgroundAndGrid } from './decorator';
 
 export const decorators: Addon_DecoratorFunction[] = FEATURES?.backgroundsStoryGlobals
   ? [withBackgroundAndGrid]
   : [withGrid, withBackground];
+
+// TODO: remove in 9.0
 export const parameters = FEATURES?.backgroundsStoryGlobals
   ? {}
   : {
@@ -23,10 +25,20 @@ export const parameters = FEATURES?.backgroundsStoryGlobals
       },
     };
 
+// TODO: remove feature flag in 9.0
 export const globalTypes = FEATURES?.backgroundsStoryGlobals
   ? {
-      grid: { defaultValue: 0 },
-      backgrounds: {},
+      [PARAM_KEY]: {
+        grid: {
+          cellSize: 20,
+          opacity: 0.5,
+          cellAmount: 5,
+        },
+        values: [
+          { name: 'light', value: '#F8F8F8' },
+          { name: 'dark', value: '#333333' },
+        ],
+      },
     }
   : {};
 

code/addons/backgrounds/src/types/index.ts → code/addons/backgrounds/src/types.ts

@@ -1,10 +1,17 @@
 import type { ReactElement } from 'react';
 
+export interface Background {
+  name: string;
+  value: string;
+}
+
+// TODO: remove in 9.0
 export interface GlobalState {
   name: string | undefined;
   selected: string | undefined;
 }
 
+// TODO: remove in 9.0
 export interface BackgroundSelectorItem {
   id: string;
   title: string;
@@ -14,17 +21,14 @@ export interface BackgroundSelectorItem {
   right?: ReactElement;
 }
 
-export interface Background {
-  name: string;
-  value: string;
-}
-
+// TODO: remove in 9.0
 export interface BackgroundsParameter {
   default?: string | null;
   disable?: boolean;
   values: Background[];
 }
 
+// TODO: remove in 9.0
 export interface BackgroundsConfig {
   backgrounds: Background[] | null;
   selectedBackgroundName: string | null;

code/addons/backgrounds/src/helpers/index.ts → code/addons/backgrounds/src/utils.ts

@@ -1,51 +1,10 @@
 import { global } from '@storybook/global';
-import { dedent } from 'ts-dedent';
-
-import { logger } from 'storybook/internal/client-logger';
-
-import type { Background } from '../types';
 
 const { document, window } = global;
 
 export const isReduceMotionEnabled = () => {
-  const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-  return prefersReduceMotion.matches;
-};
-
-export const getBackgroundColorByName = (
-  currentSelectedValue: string,
-  backgrounds: Background[] = [],
-  defaultName: string | null | undefined
-): string => {
-  if (currentSelectedValue === 'transparent') {
-    return 'transparent';
-  }
-
-  if (backgrounds.find((background) => background.value === currentSelectedValue)) {
-    return currentSelectedValue;
-  }
-
-  if (currentSelectedValue) {
-    return currentSelectedValue;
-  }
-
-  const defaultBackground = backgrounds.find((background) => background.name === defaultName);
-  if (defaultBackground) {
-    return defaultBackground.value;
-  }
-
-  if (defaultName) {
-    const availableColors = backgrounds.map((background) => background.name).join(', ');
-    logger.warn(
-      dedent`
-        Backgrounds Addon: could not find the default color "${defaultName}".
-        These are the available colors for your story based on your configuration:
-        ${availableColors}.
-      `
-    );
-  }
-
-  return 'transparent';
+  const prefersReduceMotion = window?.matchMedia('(prefers-reduced-motion: reduce)');
+  return !!prefersReduceMotion?.matches;
 };
 
 export const clearStyles = (selector: string | string[]) => {

code/addons/viewport/src/Tool.tsx → code/addons/viewport/src/components/Tool.tsx

@@ -5,18 +5,18 @@ import { IconButton, WithTooltip, TooltipLinkList, P } from 'storybook/internal/
 import { useGlobals, type API, useGlobalTypes } from 'storybook/internal/manager-api';
 
 import { GrowIcon, RefreshIcon, TransferIcon } from '@storybook/icons';
-import { PARAM_KEY } from './constants';
-import { registerShortcuts } from './shortcuts';
+import { PARAM_KEY } from '../constants';
+import { registerShortcuts } from '../shortcuts';
 import {
   IconButtonWithLabel,
   IconButtonLabel,
   ActiveViewportSize,
   ActiveViewportLabel,
   iconsMap,
   emptyViewportMap,
-} from './utils';
-import { responsiveViewport } from './responsiveViewport';
-import type { Viewport, ViewportMap } from './models/Viewport';
+} from '../utils';
+import { responsiveViewport } from '../responsiveViewport';
+import type { Viewport, ViewportMap } from '../types';
 
 interface PureProps {
   item: Viewport;

code/addons/viewport/src/legacy/ToolLegacy.tsx

@@ -11,8 +11,8 @@ import { GrowIcon, TransferIcon } from '@storybook/icons';
 import { registerShortcuts } from '../shortcuts';
 import { PARAM_KEY } from '../constants';
 import { MINIMAL_VIEWPORTS } from '../defaults';
-import type { Styles, ViewportMap, ViewportStyles } from '../models/Viewport';
-import type { ViewportAddonParameter } from '../models/ViewportAddonParameter';
+import type { Styles, ViewportMap, ViewportStyles } from '../types';
+import type { ViewportAddonParameter } from './ViewportAddonParameter';
 
 interface ViewportItem {
   id: string;

code/addons/viewport/src/models/ViewportAddonParameter.ts → code/addons/viewport/src/legacy/ViewportAddonParameter.ts

@@ -1,4 +1,4 @@
-import type { ViewportMap } from './Viewport';
+import type { ViewportMap } from '../types';
 
 // TODO: remove at 9.0
 export interface ViewportAddonParameter {

code/addons/viewport/src/manager.tsx

@@ -4,7 +4,7 @@ import { addons, types } from 'storybook/internal/manager-api';
 import { ADDON_ID } from './constants';
 
 import { ViewportToolLegacy } from './legacy/ToolLegacy';
-import { ViewportTool } from './Tool';
+import { ViewportTool } from './components/Tool';
 
 addons.register(ADDON_ID, (api) => {
   addons.add(ADDON_ID, {

code/addons/viewport/src/responsiveViewport.tsx

@@ -1,4 +1,4 @@
-import type { Viewport } from './models';
+import type { Viewport } from './types';
 
 export const responsiveViewport: Viewport = {
   name: 'Reset viewport',

code/addons/viewport/src/utils.tsx

@@ -4,7 +4,7 @@ import { styled } from 'storybook/internal/theming';
 import { IconButton } from 'storybook/internal/components';
 
 import { BrowserIcon, MobileIcon, TabletIcon } from '@storybook/icons';
-import type { Viewport, ViewportMap } from './models/Viewport';
+import type { Viewport, ViewportMap } from './types';
 
 export const ActiveViewportSize = styled.div(() => ({
   display: 'inline-flex',