-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26654 from storybookjs/tom/23347-story-globals
CSF: Allow overridding globals at the story level
- Loading branch information
Showing
145 changed files
with
2,756 additions
and
1,185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| 34e364a0ca1d93555d36a7367d78e8e229493de8 | ||
| c0896915fb7fb9a8dd416b9aebca17abd909d1c1 | ||
| a41c227037e7e7249b8b376f838f4f8bcc3e3e59 | ||
| 13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54 | ||
| 13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54 | ||
| 0a4522a3f84773f39daec4820c49b8a92e9f9d11 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }); |
Oops, something went wrong.