From 4f9967d8d5eaddb33f4956c6d23704c5e1f89130 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 23 Jul 2024 20:22:48 +0200 Subject: [PATCH] restructuring --- code/addons/backgrounds/package.json | 2 +- .../Tool.tsx} | 2 +- .../backgrounds/src/{modern => }/decorator.ts | 15 +++---- .../src/legacy/BackgroundSelectorLegacy.tsx | 6 +-- .../src/{components => legacy}/ColorIcon.tsx | 0 .../src/legacy/GridSelectorLegacy.tsx | 2 +- .../src/legacy/getBackgroundColorByName.ts | 39 ++++++++++++++++ .../src/legacy/withBackgroundLegacy.ts | 8 +--- .../backgrounds/src/legacy/withGridLegacy.ts | 2 +- code/addons/backgrounds/src/manager.tsx | 13 +++--- .../src/{preview.tsx => preview.ts} | 18 ++++++-- .../src/{types/index.ts => types.ts} | 14 +++--- code/addons/backgrounds/src/typings.d.ts | 1 - .../src/{helpers/index.ts => utils.ts} | 45 +------------------ .../viewport/src/{ => components}/Tool.tsx | 10 ++--- .../addons/viewport/src/legacy/ToolLegacy.tsx | 4 +- .../ViewportAddonParameter.ts | 2 +- code/addons/viewport/src/manager.tsx | 2 +- .../viewport/src/responsiveViewport.tsx | 2 +- .../src/{models/Viewport.ts => types.ts} | 0 code/addons/viewport/src/utils.tsx | 2 +- 21 files changed, 97 insertions(+), 92 deletions(-) rename code/addons/backgrounds/src/{modern/BackgroundSelectorModern.tsx => components/Tool.tsx} (98%) rename code/addons/backgrounds/src/{modern => }/decorator.ts (90%) rename code/addons/backgrounds/src/{components => legacy}/ColorIcon.tsx (100%) create mode 100644 code/addons/backgrounds/src/legacy/getBackgroundColorByName.ts rename code/addons/backgrounds/src/{preview.tsx => preview.ts} (70%) rename code/addons/backgrounds/src/{types/index.ts => types.ts} (87%) delete mode 100644 code/addons/backgrounds/src/typings.d.ts rename code/addons/backgrounds/src/{helpers/index.ts => utils.ts} (59%) rename code/addons/viewport/src/{ => components}/Tool.tsx (95%) rename code/addons/viewport/src/{models => legacy}/ViewportAddonParameter.ts (80%) rename code/addons/viewport/src/{models/Viewport.ts => types.ts} (100%) diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 4b1a210dab04..82b62ab3f294 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -80,7 +80,7 @@ "./src/manager.tsx" ], "previewEntries": [ - "./src/preview.tsx" + "./src/preview.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16", diff --git a/code/addons/backgrounds/src/modern/BackgroundSelectorModern.tsx b/code/addons/backgrounds/src/components/Tool.tsx similarity index 98% rename from code/addons/backgrounds/src/modern/BackgroundSelectorModern.tsx rename to code/addons/backgrounds/src/components/Tool.tsx index a406c1c1c0b0..ef9a6f632057 100644 --- a/code/addons/backgrounds/src/modern/BackgroundSelectorModern.tsx +++ b/code/addons/backgrounds/src/components/Tool.tsx @@ -12,7 +12,7 @@ type BackgroundMap = Record; 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); diff --git a/code/addons/backgrounds/src/modern/decorator.ts b/code/addons/backgrounds/src/decorator.ts similarity index 90% rename from code/addons/backgrounds/src/modern/decorator.ts rename to code/addons/backgrounds/src/decorator.ts index dab008e0ec50..044e70e716f5 100644 --- a/code/addons/backgrounds/src/modern/decorator.ts +++ b/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; 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, context: StoryContext ) => { - 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; diff --git a/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx b/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx index 2cbe2df583a6..2504e7a4c6af 100644 --- a/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx +++ b/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( BACKGROUNDS_PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG diff --git a/code/addons/backgrounds/src/components/ColorIcon.tsx b/code/addons/backgrounds/src/legacy/ColorIcon.tsx similarity index 100% rename from code/addons/backgrounds/src/components/ColorIcon.tsx rename to code/addons/backgrounds/src/legacy/ColorIcon.tsx diff --git a/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx b/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx index ead3e78b3bfd..9a114b75ee8f 100644 --- a/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx +++ b/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, { diff --git a/code/addons/backgrounds/src/legacy/getBackgroundColorByName.ts b/code/addons/backgrounds/src/legacy/getBackgroundColorByName.ts new file mode 100644 index 000000000000..95b5296752c1 --- /dev/null +++ b/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'; +}; diff --git a/code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts b/code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts index 1cdbf499db84..ba649a0a1d36 100644 --- a/code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts +++ b/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, diff --git a/code/addons/backgrounds/src/legacy/withGridLegacy.ts b/code/addons/backgrounds/src/legacy/withGridLegacy.ts index 70cc47cf48bd..801a1962d926 100644 --- a/code/addons/backgrounds/src/legacy/withGridLegacy.ts +++ b/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, context: StoryContext) => { diff --git a/code/addons/backgrounds/src/manager.tsx b/code/addons/backgrounds/src/manager.tsx index 91a481f64de1..3f8ab23da58d 100644 --- a/code/addons/backgrounds/src/manager.tsx +++ b/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 ? ( - + ) : ( - - + + ), }); diff --git a/code/addons/backgrounds/src/preview.tsx b/code/addons/backgrounds/src/preview.ts similarity index 70% rename from code/addons/backgrounds/src/preview.tsx rename to code/addons/backgrounds/src/preview.ts index 9bf3d5c77bb8..2a842f4f0963 100644 --- a/code/addons/backgrounds/src/preview.tsx +++ b/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' }, + ], + }, } : {}; diff --git a/code/addons/backgrounds/src/types/index.ts b/code/addons/backgrounds/src/types.ts similarity index 87% rename from code/addons/backgrounds/src/types/index.ts rename to code/addons/backgrounds/src/types.ts index 1439f4cd1329..08e1119b0948 100644 --- a/code/addons/backgrounds/src/types/index.ts +++ b/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; diff --git a/code/addons/backgrounds/src/typings.d.ts b/code/addons/backgrounds/src/typings.d.ts deleted file mode 100644 index bfd9e55123ff..000000000000 --- a/code/addons/backgrounds/src/typings.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; diff --git a/code/addons/backgrounds/src/helpers/index.ts b/code/addons/backgrounds/src/utils.ts similarity index 59% rename from code/addons/backgrounds/src/helpers/index.ts rename to code/addons/backgrounds/src/utils.ts index d1d1d19956a1..1487e21a345d 100644 --- a/code/addons/backgrounds/src/helpers/index.ts +++ b/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[]) => { diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/components/Tool.tsx similarity index 95% rename from code/addons/viewport/src/Tool.tsx rename to code/addons/viewport/src/components/Tool.tsx index 47e1b31288f5..994e87b48107 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/components/Tool.tsx @@ -5,8 +5,8 @@ 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, @@ -14,9 +14,9 @@ import { 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; diff --git a/code/addons/viewport/src/legacy/ToolLegacy.tsx b/code/addons/viewport/src/legacy/ToolLegacy.tsx index db35ddb1a9d9..a1e8b497b36e 100644 --- a/code/addons/viewport/src/legacy/ToolLegacy.tsx +++ b/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; diff --git a/code/addons/viewport/src/models/ViewportAddonParameter.ts b/code/addons/viewport/src/legacy/ViewportAddonParameter.ts similarity index 80% rename from code/addons/viewport/src/models/ViewportAddonParameter.ts rename to code/addons/viewport/src/legacy/ViewportAddonParameter.ts index 8d52dde2cc6d..1d68f691f90b 100644 --- a/code/addons/viewport/src/models/ViewportAddonParameter.ts +++ b/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 { diff --git a/code/addons/viewport/src/manager.tsx b/code/addons/viewport/src/manager.tsx index 96cb4c1600a3..e7425aff76d3 100644 --- a/code/addons/viewport/src/manager.tsx +++ b/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, { diff --git a/code/addons/viewport/src/responsiveViewport.tsx b/code/addons/viewport/src/responsiveViewport.tsx index 921f9cdce69d..ce108cf07d9a 100644 --- a/code/addons/viewport/src/responsiveViewport.tsx +++ b/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', diff --git a/code/addons/viewport/src/models/Viewport.ts b/code/addons/viewport/src/types.ts similarity index 100% rename from code/addons/viewport/src/models/Viewport.ts rename to code/addons/viewport/src/types.ts diff --git a/code/addons/viewport/src/utils.tsx b/code/addons/viewport/src/utils.tsx index b6f47ad62b05..be4f3cb16096 100644 --- a/code/addons/viewport/src/utils.tsx +++ b/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',