From 2588fbd8a9a3158795a546bb4765923646f76310 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 26 Mar 2024 14:56:22 +1100 Subject: [PATCH 001/105] Add globalOverrides concept to CSF --- .../src/modules/store/StoryStore.ts | 5 ++++- .../src/modules/store/csf/normalizeStory.ts | 8 ++++++-- .../src/modules/store/csf/prepareStory.ts | 3 ++- .../template/stories/globals.stories.ts | 18 ++++++++++++++++++ code/lib/types/src/modules/story.ts | 7 +++++++ 5 files changed, 37 insertions(+), 4 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 8e2c6e444f80..26b88a3c3784 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -233,7 +233,10 @@ export class StoryStore { return prepareContext({ ...story, args: forceInitialArgs ? story.initialArgs : this.args.get(story.id), - globals: this.globals.get(), + globals: { + ...this.globals.get(), + ...story.globalOverrides, + }, hooks: this.hooks[story.id] as unknown, }); } diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts index fc228251d82e..ba1993395742 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts @@ -7,6 +7,7 @@ import type { StoryAnnotations, StoryFn, StoryId, + PreparedStory, } from '@storybook/types'; import { storyNameFromExport, toId } from '@storybook/csf'; import { dedent } from 'ts-dedent'; @@ -29,7 +30,9 @@ export function normalizeStory( storyAnnotations: LegacyStoryAnnotationsOrFn, meta: NormalizedComponentAnnotations ): NormalizedStoryAnnotations { - const storyObject: StoryAnnotations = storyAnnotations; + const storyObject: StoryAnnotations & { + globalOverrides?: PreparedStory['globalOverrides']; + } = storyAnnotations; const userStoryFn: StoryFn | null = typeof storyAnnotations === 'function' ? storyAnnotations : null; @@ -58,7 +61,7 @@ export function normalizeStory( ...normalizeArrays(storyObject.beforeEach), ...normalizeArrays(story?.beforeEach), ]; - const { render, play, tags = [] } = storyObject; + const { render, play, tags = [], globalOverrides } = storyObject; // eslint-disable-next-line no-underscore-dangle const id = parameters.__id || toId(meta.id, exportName); @@ -76,5 +79,6 @@ export function normalizeStory( ...(render && { render }), ...(userStoryFn && { userStoryFn }), ...(play && { play }), + globalOverrides, }; } diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index ce99cef8f1e0..9c4da06a1653 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -41,7 +41,7 @@ export function prepareStory( // NOTE: in the current implementation we are doing everything once, up front, rather than doing // anything at render time. The assumption is that as we don't load all the stories at once, this // will have a limited cost. If this proves misguided, we can refactor it. - const { moduleExport, id, name } = storyAnnotations || {}; + const { moduleExport, id, name, globalOverrides } = storyAnnotations || {}; const partialAnnotations = preparePartialAnnotations( storyAnnotations, @@ -133,6 +133,7 @@ export function prepareStory( applyLoaders, applyBeforeEach, playFunction, + globalOverrides, }; } export function prepareMeta( diff --git a/code/lib/preview-api/template/stories/globals.stories.ts b/code/lib/preview-api/template/stories/globals.stories.ts index d6bc63b75e22..8515ec66f8c9 100644 --- a/code/lib/preview-api/template/stories/globals.stories.ts +++ b/code/lib/preview-api/template/stories/globals.stories.ts @@ -40,3 +40,21 @@ export const Events = { await within(canvasElement).findByText('fooValue'); }, }; + +export const Overrides = { + // Compose all the globals into `object`, so the pre component only needs a single prop + decorators: [ + (storyFn: PartialStoryFn, context: StoryContext) => + storyFn({ args: { object: context.globals } }), + ], + globalOverrides: { + foo: 'fooOverridden', + bar: 'barOverridden', + }, + play: async ({ canvasElement }: PlayFunctionContext) => { + await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ + foo: 'fooOverridden', + bar: 'barOverridden', + }); + }, +}; diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts index 041aaed2e709..ca5fa540bb51 100644 --- a/code/lib/types/src/modules/story.ts +++ b/code/lib/types/src/modules/story.ts @@ -87,6 +87,10 @@ export type NormalizedStoryAnnotations = userStoryFn?: StoryFn; decorators?: DecoratorFunction[]; loaders?: LoaderFunction[]; + // Proof of concept + globalOverrides?: { + [name: string]: any; + }; }; export type CSFFile = { @@ -106,6 +110,9 @@ export type PreparedStory = ) => Promise & { loaded: StoryContext['loaded'] }>; applyBeforeEach: (context: StoryContext) => Promise; playFunction?: (context: StoryContext) => Promise | void; + + // Proof of concept + globalOverrides?: NormalizedStoryAnnotations['globalOverrides']; }; export type PreparedMeta = Omit< From 2c09577a95550091d1e2c3f2a993557fbe4870aa Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 27 Mar 2024 13:47:26 +1100 Subject: [PATCH 002/105] Override globals and emit old values on UPDATE_GLOBALS --- .../src/modules/preview-web/Preview.tsx | 40 ++++++++++++++----- .../modules/preview-web/PreviewWeb.test.ts | 12 +++--- .../preview-web/PreviewWithSelection.tsx | 23 +++++++++-- .../src/modules/store/StoryStore.test.ts | 2 +- .../src/modules/store/StoryStore.ts | 14 ++++--- .../lib/preview-api/src/modules/store/args.ts | 9 +++++ 6 files changed, 76 insertions(+), 24 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index ee4524c32ecf..e340b7ee7529 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -208,7 +208,7 @@ export class Preview { throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'emitGlobals' }); const payload: SetGlobalsPayload = { - globals: this.storyStoreValue.globals.get() || {}, + globals: this.storyStoreValue.userGlobals.get() || {}, globalTypes: this.storyStoreValue.projectAnnotations.globalTypes || {}, }; this.channel.emit(SET_GLOBALS, payload); @@ -274,17 +274,39 @@ export class Preview { await this.storyStoreValue.onStoriesChanged({ importFn, storyIndex }); } - async onUpdateGlobals({ globals }: { globals: Globals }) { - if (!this.storyStoreValue) + async onUpdateGlobals({ + globals: updatedGlobals, + currentStory, + }: { + globals: Globals; + currentStory?: PreparedStory; + }) { + if (!this.storyStoreValue) { throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'onUpdateGlobals' }); - this.storyStoreValue.globals.update(globals); + } - await Promise.all(this.storyRenders.map((r) => r.rerender())); + this.storyStoreValue.userGlobals.update(updatedGlobals); - this.channel.emit(GLOBALS_UPDATED, { - globals: this.storyStoreValue.globals.get(), - initialGlobals: this.storyStoreValue.globals.initialGlobals, - }); + if (currentStory) { + const { initialGlobals, userGlobals, globals } = + this.storyStoreValue.getStoryContext(currentStory); + this.channel.emit(GLOBALS_UPDATED, { + globals, + userGlobals, + initialGlobals, + }); + } else { + // If there is no known selected story (e.g. if we are in docs mode), the userGlobals + // are not overridden. + const { initialGlobals, globals } = this.storyStoreValue.userGlobals; + this.channel.emit(GLOBALS_UPDATED, { + globals, + userGlobals: globals, + initialGlobals, + }); + } + + await Promise.all(this.storyRenders.map((r) => r.rerender())); } async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) { diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 8d4a37436bdf..5c7a85682d84 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -162,7 +162,7 @@ describe('PreviewWeb', () => { const preview = await createAndRenderPreview(); - expect((preview.storyStore as StoryStore)!.globals.get()).toEqual({ a: 'c' }); + expect((preview.storyStore as StoryStore)!.userGlobals.get()).toEqual({ a: 'c' }); }); it('emits the SET_GLOBALS event', async () => { @@ -227,7 +227,7 @@ describe('PreviewWeb', () => { }); await preview.ready(); - expect((preview.storyStore as StoryStore)!.globals.get()).toEqual({ a: 'b' }); + expect((preview.storyStore as StoryStore)!.userGlobals.get()).toEqual({ a: 'b' }); }); }); @@ -783,7 +783,7 @@ describe('PreviewWeb', () => { emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } }); - expect((preview.storyStore as StoryStore)!.globals.get()).toEqual({ a: 'b' }); + expect((preview.storyStore as StoryStore)!.userGlobals.get()).toEqual({ a: 'b' }); }); it('passes globals in context to renderToCanvas', async () => { @@ -3315,7 +3315,7 @@ describe('PreviewWeb', () => { preview.onGetProjectAnnotationsChanged({ getProjectAnnotations }); await waitForRender(); - expect((preview.storyStore as StoryStore)!.globals.get()).toEqual({ a: 'c' }); + expect((preview.storyStore as StoryStore)!.userGlobals.get()).toEqual({ a: 'c' }); }); }); @@ -3364,7 +3364,9 @@ describe('PreviewWeb', () => { preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); await waitForRender(); - expect((preview.storyStore as StoryStore)!.globals.get()).toEqual({ a: 'edited' }); + expect((preview.storyStore as StoryStore)!.userGlobals.get()).toEqual({ + a: 'edited', + }); }); it('emits SET_GLOBALS with new values', async () => { diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index 9b1a8ed9348a..a20a1adc5368 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -2,6 +2,7 @@ import invariant from 'tiny-invariant'; import { CURRENT_STORY_WAS_SET, DOCS_PREPARED, + GLOBALS_UPDATED, PRELOAD_ENTRIES, PREVIEW_KEYDOWN, SET_CURRENT_STORY, @@ -44,6 +45,7 @@ import { MdxDocsRender } from './render/MdxDocsRender'; import type { Selection, SelectionStore } from './SelectionStore'; import type { View } from './View'; import type { StorySpecifier } from '../store/StoryIndexStore'; +import { shallowEqual } from '../store'; const globalWindow = globalThis; @@ -120,7 +122,7 @@ export class PreviewWithSelection extends Preview extends Preview extends Preview extends Preview { const story = await store.loadStory({ storyId: 'component-one--a' }); store.args.update(story.id, { foo: 'bar' }); - store.globals!.update({ a: 'c' }); + store.userGlobals!.update({ a: 'c' }); expect(store.getStoryContext(story)).toMatchObject({ args: { foo: 'bar' }, diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 26b88a3c3784..8f6b77d5eccd 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -51,7 +51,7 @@ export class StoryStore { projectAnnotations: NormalizedProjectAnnotations; - globals: GlobalsStore; + userGlobals: GlobalsStore; args: ArgsStore; @@ -80,7 +80,7 @@ export class StoryStore { const { initialGlobals, globalTypes } = this.projectAnnotations; this.args = new ArgsStore(); - this.globals = new GlobalsStore({ globals: initialGlobals, globalTypes }); + this.userGlobals = new GlobalsStore({ globals: initialGlobals, globalTypes }); this.hooks = {}; this.cleanupCallbacks = {}; @@ -96,7 +96,7 @@ export class StoryStore { // By changing `this.projectAnnotations, we implicitly invalidate the `prepareStoryWithCache` this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations); const { initialGlobals, globalTypes } = projectAnnotations; - this.globals.set({ globals: initialGlobals, globalTypes }); + this.userGlobals.set({ globals: initialGlobals, globalTypes }); } // This means that one of the CSF files has changed. @@ -230,11 +230,15 @@ export class StoryStore { story: PreparedStory, { forceInitialArgs = false } = {} ): Omit { + const userGlobals = this.userGlobals.get(); + const { initialGlobals } = this.userGlobals; return prepareContext({ ...story, args: forceInitialArgs ? story.initialArgs : this.args.get(story.id), + initialGlobals, + userGlobals, globals: { - ...this.globals.get(), + ...userGlobals, ...story.globalOverrides, }, hooks: this.hooks[story.id] as unknown, @@ -303,7 +307,7 @@ export class StoryStore { return { v: 2, - globals: this.globals.get(), + globals: this.userGlobals.get(), globalParameters: {}, kindParameters, stories, diff --git a/code/lib/preview-api/src/modules/store/args.ts b/code/lib/preview-api/src/modules/store/args.ts index 7ce46f94a512..717e71d7d1f8 100644 --- a/code/lib/preview-api/src/modules/store/args.ts +++ b/code/lib/preview-api/src/modules/store/args.ts @@ -144,6 +144,15 @@ export const deepDiff = (value: any, update: any): any => { return update; }; +// Do two objects have equal keys + values (by reference) +export const shallowEqual = (first: Record, second: Record) => { + const firstKeys = Object.keys(first); + + if (firstKeys.length !== Object.keys(second).length) return false; + + return !!firstKeys.find((key) => first[key] !== second[key]); +}; + export const UNTARGETED = 'UNTARGETED'; export function groupArgsByTarget({ args, From 289f8250d3075540d6f79b7950057717a67d4609 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 27 Mar 2024 14:28:20 +1100 Subject: [PATCH 003/105] Always emit `UPDATE_GLOBALS` when selecting story --- .../src/modules/preview-web/PreviewWithSelection.tsx | 8 +++----- code/lib/preview-api/src/modules/store/args.ts | 9 --------- 2 files changed, 3 insertions(+), 14 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index a20a1adc5368..e2352521f1f8 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -45,7 +45,6 @@ import { MdxDocsRender } from './render/MdxDocsRender'; import type { Selection, SelectionStore } from './SelectionStore'; import type { View } from './View'; import type { StorySpecifier } from '../store/StoryIndexStore'; -import { shallowEqual } from '../store'; const globalWindow = globalThis; @@ -410,10 +409,9 @@ export class PreviewWithSelection extends Preview { return update; }; -// Do two objects have equal keys + values (by reference) -export const shallowEqual = (first: Record, second: Record) => { - const firstKeys = Object.keys(first); - - if (firstKeys.length !== Object.keys(second).length) return false; - - return !!firstKeys.find((key) => first[key] !== second[key]); -}; - export const UNTARGETED = 'UNTARGETED'; export function groupArgsByTarget({ args, From 2e4ffd4bd6836cbb8972a942e35337be80450720 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 27 Mar 2024 14:31:29 +1100 Subject: [PATCH 004/105] Add `userGlobals` to manager globals code --- code/lib/manager-api/src/index.tsx | 5 +-- code/lib/manager-api/src/modules/globals.ts | 39 ++++++++++++++------- code/lib/manager-api/src/modules/url.ts | 2 +- 3 files changed, 31 insertions(+), 15 deletions(-) diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index 4e946fa5d618..b4e0e83a37ca 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -28,6 +28,7 @@ import type { API_StoryEntry, Parameters, StoryId, + Globals, } from '@storybook/types'; import { @@ -498,9 +499,9 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) return [args!, updateArgs, resetArgs, initialArgs!]; } -export function useGlobals(): [Args, (newGlobals: Args) => void] { +export function useGlobals(): [Globals, (newGlobals: Globals) => void, Globals] { const api = useStorybookApi(); - return [api.getGlobals(), api.updateGlobals]; + return [api.getGlobals(), api.updateGlobals, api.getUserGlobals()]; } export function useGlobalTypes(): ArgTypes { diff --git a/code/lib/manager-api/src/modules/globals.ts b/code/lib/manager-api/src/modules/globals.ts index fd0c45514548..1dcda6a20286 100644 --- a/code/lib/manager-api/src/modules/globals.ts +++ b/code/lib/manager-api/src/modules/globals.ts @@ -9,23 +9,28 @@ import { getEventMetadata } from '../lib/events'; export interface SubState { globals?: Globals; + userGlobals?: Globals; globalTypes?: GlobalTypes; } export interface SubAPI { /** - * Returns the current global data object. - * @returns {Globals} The current global data object. + * Returns the current globals, including overrides. + * @returns {Globals} The current globals. */ getGlobals: () => Globals; /** - * Returns the current global types object. - * @returns {GlobalTypes} The current global types object. + * Returns the current globals, as set by the user (a story may have override values) + * @returns {Globals} The current user globals. */ + getUserGlobals: () => Globals /** + * Returns the globalTypes, as defined at the project level. + * @returns {GlobalTypes} The globalTypes. + */; getGlobalTypes: () => GlobalTypes; /** - * Updates the current global data object with the provided new global data object. - * @param {Globals} newGlobals - The new global data object to update with. + * Updates the current globals with the provided new globals. + * @param {Globals} newGlobals - The new globals to update with. * @returns {void} */ updateGlobals: (newGlobals: Globals) => void; @@ -36,6 +41,9 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) = getGlobals() { return store.getState().globals as Globals; }, + getUserGlobals() { + return store.getState().userGlobals as Globals; + }, getGlobalTypes() { return store.getState().globalTypes as GlobalTypes; }, @@ -52,22 +60,29 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) = const state: SubState = { globals: {}, + userGlobals: {}, globalTypes: {}, }; - const updateGlobals = (globals: Globals) => { - const currentGlobals = store.getState()?.globals; + const updateGlobals = ({ globals, userGlobals }: { globals: Globals; userGlobals: Globals }) => { + const { globals: currentGlobals, userGlobals: currentUserGlobals } = store.getState(); if (!deepEqual(globals, currentGlobals)) { store.setState({ globals }); } + if (!deepEqual(userGlobals, currentUserGlobals)) { + store.setState({ userGlobals }); + } }; provider.channel?.on( GLOBALS_UPDATED, - function handleGlobalsUpdated(this: any, { globals }: { globals: Globals }) { + function handleGlobalsUpdated( + this: any, + { globals, userGlobals }: { globals: Globals; userGlobals: Globals } + ) { const { ref } = getEventMetadata(this, fullAPI)!; if (!ref) { - updateGlobals(globals); + updateGlobals({ globals, userGlobals }); } else { logger.warn( 'received a GLOBALS_UPDATED from a non-local ref. This is not currently supported.' @@ -79,12 +94,12 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) = // Emitted by the preview on initialization provider.channel?.on( SET_GLOBALS, - function handleSetStories(this: any, { globals, globalTypes }: SetGlobalsPayload) { + function handleSetGlobals(this: any, { globals, globalTypes }: SetGlobalsPayload) { const { ref } = getEventMetadata(this, fullAPI)!; const currentGlobals = store.getState()?.globals; if (!ref) { - store.setState({ globals, globalTypes }); + store.setState({ globals, userGlobals: globals, globalTypes }); } else if (Object.keys(globals).length > 0) { logger.warn('received globals from a non-local ref. This is not currently supported.'); } diff --git a/code/lib/manager-api/src/modules/url.ts b/code/lib/manager-api/src/modules/url.ts index 8896ab272899..e78d06e8983d 100644 --- a/code/lib/manager-api/src/modules/url.ts +++ b/code/lib/manager-api/src/modules/url.ts @@ -234,7 +234,7 @@ export const init: ModuleFn = (moduleArgs) => { } }); - provider.channel?.on(GLOBALS_UPDATED, ({ globals, initialGlobals }: any) => { + provider.channel?.on(GLOBALS_UPDATED, ({ userGlobals: globals, initialGlobals }: any) => { const { path, queryParams } = api.getUrlState(); const globalsString = buildArgsParam(initialGlobals, globals); navigateTo(path, { ...queryParams, globals: globalsString }, { replace: true }); From bd5e5d66d8d538c675f5c76f4041b7dbe4f49571 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 27 Mar 2024 14:31:47 +1100 Subject: [PATCH 005/105] Disable toolbars when global is overridden --- code/addons/toolbars/package.json | 1 + .../addons/toolbars/src/components/ToolbarMenuButton.tsx | 9 ++++++++- code/addons/toolbars/src/components/ToolbarMenuList.tsx | 8 ++++++-- code/addons/toolbars/template/stories/globals.stories.ts | 6 ++++++ code/yarn.lock | 1 + 5 files changed, 22 insertions(+), 3 deletions(-) diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 125d600303bf..95f3c731c100 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -56,6 +56,7 @@ "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", + "dequal": "^2.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.3.2" diff --git a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx index b095b0fb3e24..db89c6b90444 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuButton.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuButton.tsx @@ -4,6 +4,7 @@ import { Icons, IconButton, type IconsProps } from '@storybook/components'; interface ToolbarMenuButtonProps { active: boolean; + disabled?: boolean; title: string; icon?: IconsProps['icon']; description: string; @@ -16,13 +17,19 @@ interface ToolbarMenuButtonProps { export const ToolbarMenuButton: FC = ({ active, + disabled, title, icon, description, onClick, }) => { return ( - + {} : onClick} + > {icon && } {title ? `\xa0${title}` : null} diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx index d6c9aa5ff642..64ec7e4a5ece 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx @@ -2,6 +2,7 @@ import type { FC } from 'react'; import React, { useState, useCallback } from 'react'; import { useGlobals } from '@storybook/manager-api'; import { WithTooltip, TooltipLinkList } from '@storybook/components'; +import { dequal as deepEqual } from 'dequal'; import { ToolbarMenuButton } from './ToolbarMenuButton'; import type { WithKeyboardCycleProps } from '../hoc/withKeyboardCycle'; import { withKeyboardCycle } from '../hoc/withKeyboardCycle'; @@ -18,11 +19,13 @@ export const ToolbarMenuList: FC = withKeyboardCycle( description, toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle }, }) => { - const [globals, updateGlobals] = useGlobals(); + const [globals, updateGlobals, userGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); const currentValue = globals[id]; const hasGlobalValue = !!currentValue; + const isOverridden = !deepEqual(currentValue, userGlobals[id]); + console.log({ currentValue, raw: userGlobals[id], isOverridden }); let icon = _icon; let title = _title; @@ -42,7 +45,7 @@ export const ToolbarMenuList: FC = withKeyboardCycle( (value: string | undefined) => { updateGlobals({ [id]: value }); }, - [currentValue, updateGlobals] + [id, updateGlobals] ); return ( @@ -79,6 +82,7 @@ export const ToolbarMenuList: FC = withKeyboardCycle( > Date: Wed, 27 Mar 2024 14:11:02 +0800 Subject: [PATCH 006/105] Improve the test case to include autodocs with multiple overrides --- .../template/stories/globals.stories.ts | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/code/lib/preview-api/template/stories/globals.stories.ts b/code/lib/preview-api/template/stories/globals.stories.ts index 8515ec66f8c9..d46c719b531b 100644 --- a/code/lib/preview-api/template/stories/globals.stories.ts +++ b/code/lib/preview-api/template/stories/globals.stories.ts @@ -4,6 +4,7 @@ import { within, expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, + tags: ['autodocs'], }; export const Inheritance = { @@ -41,20 +42,38 @@ export const Events = { }, }; -export const Overrides = { +export const Overrides1 = { // Compose all the globals into `object`, so the pre component only needs a single prop decorators: [ (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.globals } }), ], globalOverrides: { - foo: 'fooOverridden', - bar: 'barOverridden', + foo: 'fooOverridden1', + bar: 'barOverridden1', }, play: async ({ canvasElement }: PlayFunctionContext) => { await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ - foo: 'fooOverridden', - bar: 'barOverridden', + foo: 'fooOverridden1', + bar: 'barOverridden1', + }); + }, +}; + +export const Overrides2 = { + // Compose all the globals into `object`, so the pre component only needs a single prop + decorators: [ + (storyFn: PartialStoryFn, context: StoryContext) => + storyFn({ args: { object: context.globals } }), + ], + globalOverrides: { + foo: 'fooOverridden2', + bar: 'barOverridden2', + }, + play: async ({ canvasElement }: PlayFunctionContext) => { + await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ + foo: 'fooOverridden2', + bar: 'barOverridden2', }); }, }; From ef80953e5f0260778f09103442223148694f55a1 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 27 Mar 2024 21:00:58 +1100 Subject: [PATCH 007/105] Update code/addons/toolbars/src/components/ToolbarMenuList.tsx Co-authored-by: Michael Shilman --- code/addons/toolbars/src/components/ToolbarMenuList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx index 64ec7e4a5ece..713b6aaff663 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx @@ -25,7 +25,6 @@ export const ToolbarMenuList: FC = withKeyboardCycle( const currentValue = globals[id]; const hasGlobalValue = !!currentValue; const isOverridden = !deepEqual(currentValue, userGlobals[id]); - console.log({ currentValue, raw: userGlobals[id], isOverridden }); let icon = _icon; let title = _title; From 2786bc81c3273e1fb2a70dcc105732c6e902be1c Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 29 Mar 2024 12:50:42 +1100 Subject: [PATCH 008/105] Update code/lib/manager-api/src/index.tsx Co-authored-by: Valentin Palkovic --- code/lib/manager-api/src/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index b4e0e83a37ca..d58b28bfb87f 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -499,7 +499,11 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) return [args!, updateArgs, resetArgs, initialArgs!]; } -export function useGlobals(): [Globals, (newGlobals: Globals) => void, Globals] { +export function useGlobals(): [ + globals: Globals, + updateGlobals: (newGlobals: Globals) => void, + userGlobals: Globals, +] { const api = useStorybookApi(); return [api.getGlobals(), api.updateGlobals, api.getUserGlobals()]; } From 5356849b59377e9a6d2de89c48551eaddffff023 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 25 Jun 2024 15:28:15 +1000 Subject: [PATCH 009/105] Upgrade CSF to version w/ globals on context From https://github.com/ComponentDriven/csf/pull/95 --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-events/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 44 ++++++++++++++--------------- 14 files changed, 35 insertions(+), 35 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 3052208e2246..c8cfa8090a3f 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 97bc4d24046c..9186cfdae783 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.24.4", "@babel/preset-env": "^7.24.4", "@babel/types": "^7.24.0", - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 24fefcf9b258..70c2bcc86a3f 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -78,7 +78,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 0b4738c6e908..1ae90c0a30b3 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -63,7 +63,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.1.0-next.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 026383952aeb..04ce1cdcb790 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.24.4", "@babel/traverse": "^7.24.1", "@babel/types": "^7.24.0", - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 49270d11882d..9b5179e22ca8 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 75415839d0d2..7c91e049c5ac 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 94eb630d9aab..57e73946e694 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 226acaedbbb1..e03c46e7ad15 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index 69553500b02d..abb3e8ee520a 100644 --- a/code/package.json +++ b/code/package.json @@ -126,7 +126,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index cdf3421a8b86..dcf66a627607 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 39f5d36c9149..5872c65e0b8e 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index be82bb3941a0..e24ab77d4733 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -62,7 +62,7 @@ "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "^0.1.8", + "@storybook/csf": "0.1.9--canary.fee46c1.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 7e94e206c53a..b92a83cc2c21 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5307,7 +5307,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5805,7 +5805,7 @@ __metadata: "@babel/core": "npm:^7.24.4" "@babel/preset-env": "npm:^7.24.4" "@babel/types": "npm:^7.24.0" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5842,7 +5842,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5925,7 +5925,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" chalk: "npm:^4.1.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" @@ -5945,7 +5945,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.1.0-next.0" "@storybook/global": "npm:^5.0.0" @@ -6027,7 +6027,7 @@ __metadata: "@babel/parser": "npm:^7.24.4" "@babel/traverse": "npm:^7.24.1" "@babel/types": "npm:^7.24.0" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -6039,6 +6039,15 @@ __metadata: languageName: unknown linkType: soft +"@storybook/csf@npm:0.1.9--canary.fee46c1.0": + version: 0.1.9--canary.fee46c1.0 + resolution: "@storybook/csf@npm:0.1.9--canary.fee46c1.0" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10c0/a5ab79c38b83f71e72b9154106bdac2cab6f6ed1f5823dafeedbff64a324ae26d63562f29b6fe270f8fbfe574f9de569d52fad5c2300695ada42a67604598f55 + languageName: node + linkType: hard + "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -6048,15 +6057,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.8": - version: 0.1.8 - resolution: "@storybook/csf@npm:0.1.8" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10c0/4fd08bd65205395aba693f053706d5c880db5102543744c4e13768902a615df9a479ac03f80fe33297bd5457a0d0ef655cd33d41a0e379764dd6f0c6b9a7d88c - languageName: node - linkType: hard - "@storybook/docs-mdx@npm:3.1.0-next.0": version: 3.1.0-next.0 resolution: "@storybook/docs-mdx@npm:3.1.0-next.0" @@ -6226,7 +6226,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6566,7 +6566,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6753,7 +6753,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6905,7 +6905,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6922,7 +6922,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -7092,7 +7092,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:^0.1.8" + "@storybook/csf": "npm:0.1.9--canary.fee46c1.0" "@types/express": "npm:^4.17.21" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From d94b58c97a02e788b31ec0ed4869f11eedfe86b3 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 25 Jun 2024 15:32:11 +1000 Subject: [PATCH 010/105] Update API to include `storyGlobals` This means we don't need to do any complex checks in addon toolbars to tell if it should be disabled --- code/addons/toolbars/package.json | 1 - .../src/components/ToolbarMenuList.tsx | 5 +-- code/lib/manager-api/src/index.tsx | 3 +- code/lib/manager-api/src/modules/globals.ts | 39 ++++++++++++++++--- .../preview-web/PreviewWithSelection.tsx | 3 +- .../src/modules/store/StoryStore.ts | 2 +- code/lib/types/src/modules/story.ts | 3 -- code/yarn.lock | 1 - 8 files changed, 41 insertions(+), 16 deletions(-) diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 95f3c731c100..125d600303bf 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -56,7 +56,6 @@ "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", - "dequal": "^2.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.3.2" diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx index 713b6aaff663..c90d303a0824 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx @@ -2,7 +2,6 @@ import type { FC } from 'react'; import React, { useState, useCallback } from 'react'; import { useGlobals } from '@storybook/manager-api'; import { WithTooltip, TooltipLinkList } from '@storybook/components'; -import { dequal as deepEqual } from 'dequal'; import { ToolbarMenuButton } from './ToolbarMenuButton'; import type { WithKeyboardCycleProps } from '../hoc/withKeyboardCycle'; import { withKeyboardCycle } from '../hoc/withKeyboardCycle'; @@ -19,12 +18,12 @@ export const ToolbarMenuList: FC = withKeyboardCycle( description, toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle }, }) => { - const [globals, updateGlobals, userGlobals] = useGlobals(); + const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); const currentValue = globals[id]; const hasGlobalValue = !!currentValue; - const isOverridden = !deepEqual(currentValue, userGlobals[id]); + const isOverridden = id in storyGlobals; let icon = _icon; let title = _title; diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index d58b28bfb87f..9ea805fabb69 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -502,10 +502,11 @@ export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) export function useGlobals(): [ globals: Globals, updateGlobals: (newGlobals: Globals) => void, + storyGlobals: Globals, userGlobals: Globals, ] { const api = useStorybookApi(); - return [api.getGlobals(), api.updateGlobals, api.getUserGlobals()]; + return [api.getGlobals(), api.updateGlobals, api.getStoryGlobals, api.getUserGlobals()]; } export function useGlobalTypes(): ArgTypes { diff --git a/code/lib/manager-api/src/modules/globals.ts b/code/lib/manager-api/src/modules/globals.ts index 1dcda6a20286..b76c4d3e6200 100644 --- a/code/lib/manager-api/src/modules/globals.ts +++ b/code/lib/manager-api/src/modules/globals.ts @@ -10,12 +10,13 @@ import { getEventMetadata } from '../lib/events'; export interface SubState { globals?: Globals; userGlobals?: Globals; + storyGlobals?: Globals; globalTypes?: GlobalTypes; } export interface SubAPI { /** - * Returns the current globals, including overrides. + * Returns the current globals, which is the user globals overlaid with the story globals * @returns {Globals} The current globals. */ getGlobals: () => Globals; @@ -24,6 +25,11 @@ export interface SubAPI { * @returns {Globals} The current user globals. */ getUserGlobals: () => Globals /** + /** + * Returns the current globals, as set by the story + * @returns {Globals} The current story globals. + */; + getStoryGlobals: () => Globals /** * Returns the globalTypes, as defined at the project level. * @returns {GlobalTypes} The globalTypes. */; @@ -44,6 +50,9 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) = getUserGlobals() { return store.getState().userGlobals as Globals; }, + getStoryGlobals() { + return store.getState().storyGlobals as Globals; + }, getGlobalTypes() { return store.getState().globalTypes as GlobalTypes; }, @@ -61,28 +70,48 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) = const state: SubState = { globals: {}, userGlobals: {}, + storyGlobals: {}, globalTypes: {}, }; - const updateGlobals = ({ globals, userGlobals }: { globals: Globals; userGlobals: Globals }) => { - const { globals: currentGlobals, userGlobals: currentUserGlobals } = store.getState(); + const updateGlobals = ({ + globals, + storyGlobals, + userGlobals, + }: { + globals: Globals; + storyGlobals: Globals; + userGlobals: Globals; + }) => { + const { + globals: currentGlobals, + userGlobals: currentUserGlobals, + storyGlobals: currentStoryGlobals, + } = store.getState(); if (!deepEqual(globals, currentGlobals)) { store.setState({ globals }); } if (!deepEqual(userGlobals, currentUserGlobals)) { store.setState({ userGlobals }); } + if (!deepEqual(storyGlobals, currentStoryGlobals)) { + store.setState({ storyGlobals }); + } }; provider.channel?.on( GLOBALS_UPDATED, function handleGlobalsUpdated( this: any, - { globals, userGlobals }: { globals: Globals; userGlobals: Globals } + { + globals, + storyGlobals, + userGlobals, + }: { globals: Globals; storyGlobals: Globals; userGlobals: Globals } ) { const { ref } = getEventMetadata(this, fullAPI)!; if (!ref) { - updateGlobals({ globals, userGlobals }); + updateGlobals({ globals, storyGlobals, userGlobals }); } else { logger.warn( 'received a GLOBALS_UPDATED from a non-local ref. This is not currently supported.' diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index e2352521f1f8..d61e027f2a24 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -399,6 +399,7 @@ export class PreviewWithSelection extends Preview extends Preview { userGlobals, globals: { ...userGlobals, - ...story.globalOverrides, + ...story.storyGlobals, }, hooks: this.hooks[story.id] as unknown, }); diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts index ca5fa540bb51..5dab3fb2696e 100644 --- a/code/lib/types/src/modules/story.ts +++ b/code/lib/types/src/modules/story.ts @@ -110,9 +110,6 @@ export type PreparedStory = ) => Promise & { loaded: StoryContext['loaded'] }>; applyBeforeEach: (context: StoryContext) => Promise; playFunction?: (context: StoryContext) => Promise | void; - - // Proof of concept - globalOverrides?: NormalizedStoryAnnotations['globalOverrides']; }; export type PreparedMeta = Omit< diff --git a/code/yarn.lock b/code/yarn.lock index b92a83cc2c21..f4f3ddab50f0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5446,7 +5446,6 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" - dequal: "npm:^2.0.2" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" typescript: "npm:^5.3.2" From fcc3c02f8ffe57497106dfbaa4b6dbef5bb5d6b2 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 25 Jun 2024 15:34:53 +1000 Subject: [PATCH 011/105] Also emit storyGlobals on update --- code/lib/preview-api/src/modules/preview-web/Preview.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index e340b7ee7529..f6485c149977 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -288,10 +288,11 @@ export class Preview { this.storyStoreValue.userGlobals.update(updatedGlobals); if (currentStory) { - const { initialGlobals, userGlobals, globals } = + const { initialGlobals, storyGlobals, userGlobals, globals } = this.storyStoreValue.getStoryContext(currentStory); this.channel.emit(GLOBALS_UPDATED, { globals, + storyGlobals, userGlobals, initialGlobals, }); @@ -301,6 +302,7 @@ export class Preview { const { initialGlobals, globals } = this.storyStoreValue.userGlobals; this.channel.emit(GLOBALS_UPDATED, { globals, + storyGlobals: {}, userGlobals: globals, initialGlobals, }); From 3338701a58d470e5858e710c4f9d7485dbcf76df Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 25 Jun 2024 21:59:32 +1000 Subject: [PATCH 012/105] Updated existing tests --- .../template/stories/globals.stories.ts | 2 +- code/lib/manager-api/src/modules/globals.ts | 13 ++++---- .../src/modules/preview-web/Preview.tsx | 18 ++++++----- .../modules/preview-web/PreviewWeb.test.ts | 13 +++++++- .../src/modules/store/csf/normalizeStory.ts | 9 ++---- .../modules/store/csf/prepareStory.test.ts | 31 +++++++++++++++++++ .../src/modules/store/csf/prepareStory.ts | 10 ++++-- .../template/stories/globals.stories.ts | 18 +++++++---- .../preview-api/template/stories/preview.ts | 1 + code/lib/types/src/modules/channelApi.ts | 7 +++++ code/lib/types/src/modules/story.ts | 4 --- 11 files changed, 92 insertions(+), 34 deletions(-) diff --git a/code/addons/toolbars/template/stories/globals.stories.ts b/code/addons/toolbars/template/stories/globals.stories.ts index 00d10735f6ed..067cbfb71657 100644 --- a/code/addons/toolbars/template/stories/globals.stories.ts +++ b/code/addons/toolbars/template/stories/globals.stories.ts @@ -33,7 +33,7 @@ export default { export const Basic = {}; export const Override = { - globalOverrides: { + globals: { locale: 'kr', }, }; diff --git a/code/lib/manager-api/src/modules/globals.ts b/code/lib/manager-api/src/modules/globals.ts index b76c4d3e6200..820f7390b582 100644 --- a/code/lib/manager-api/src/modules/globals.ts +++ b/code/lib/manager-api/src/modules/globals.ts @@ -1,7 +1,12 @@ import { SET_GLOBALS, UPDATE_GLOBALS, GLOBALS_UPDATED } from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; import { dequal as deepEqual } from 'dequal'; -import type { SetGlobalsPayload, Globals, GlobalTypes } from '@storybook/types'; +import type { + SetGlobalsPayload, + Globals, + GlobalTypes, + GlobalsUpdatedPayload, +} from '@storybook/types'; import type { ModuleFn } from '../lib/types'; @@ -102,11 +107,7 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) = GLOBALS_UPDATED, function handleGlobalsUpdated( this: any, - { - globals, - storyGlobals, - userGlobals, - }: { globals: Globals; storyGlobals: Globals; userGlobals: Globals } + { globals, storyGlobals, userGlobals }: GlobalsUpdatedPayload ) { const { ref } = getEventMetadata(this, fullAPI)!; diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index f6485c149977..3b6f04b31796 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -34,6 +34,7 @@ import type { StoryId, StoryRenderOptions, SetGlobalsPayload, + GlobalsUpdatedPayload, } from '@storybook/types'; import { CalledPreviewMethodBeforeInitializationError, @@ -47,6 +48,7 @@ import { StoryStore } from '../../store'; import { StoryRender } from './render/StoryRender'; import type { CsfDocsRender } from './render/CsfDocsRender'; import type { MdxDocsRender } from './render/MdxDocsRender'; +import { satisfies } from '@storybook/core-common'; const { fetch } = global; @@ -291,21 +293,21 @@ export class Preview { const { initialGlobals, storyGlobals, userGlobals, globals } = this.storyStoreValue.getStoryContext(currentStory); this.channel.emit(GLOBALS_UPDATED, { - globals, - storyGlobals, - userGlobals, initialGlobals, - }); + userGlobals, + storyGlobals, + globals, + } satisfies GlobalsUpdatedPayload); } else { // If there is no known selected story (e.g. if we are in docs mode), the userGlobals // are not overridden. const { initialGlobals, globals } = this.storyStoreValue.userGlobals; this.channel.emit(GLOBALS_UPDATED, { - globals, - storyGlobals: {}, - userGlobals: globals, initialGlobals, - }); + userGlobals: globals, + storyGlobals: {}, + globals, + } satisfies GlobalsUpdatedPayload); } await Promise.all(this.storyRenders.map((r) => r.rerender())); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 5c7a85682d84..2343574a16a8 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -168,6 +168,11 @@ describe('PreviewWeb', () => { it('emits the SET_GLOBALS event', async () => { await createAndRenderPreview(); + expect(mockChannel.emit.mock.calls[0][1]).toMatchObject({ + globals: { a: 'b' }, + globalTypes: {}, + }); + expect(mockChannel.emit).toHaveBeenCalledWith(SET_GLOBALS, { globals: { a: 'b' }, globalTypes: {}, @@ -772,8 +777,10 @@ describe('PreviewWeb', () => { await waitForEvents([GLOBALS_UPDATED]); expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, { - globals: { a: 'c' }, initialGlobals: { a: 'b' }, + userGlobals: { a: 'c' }, + storyGlobals: {}, + globals: { a: 'c' }, }); }); @@ -3623,6 +3630,7 @@ describe('PreviewWeb', () => { "fileName": "./src/ComponentOne.stories.js", }, "story": "A", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -3671,6 +3679,7 @@ describe('PreviewWeb', () => { "fileName": "./src/ComponentOne.stories.js", }, "story": "B", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -3697,6 +3706,7 @@ describe('PreviewWeb', () => { }, "playFunction": undefined, "story": "E", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -3733,6 +3743,7 @@ describe('PreviewWeb', () => { }, "playFunction": undefined, "story": "C", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts index ba1993395742..3a6773b56987 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts @@ -7,7 +7,6 @@ import type { StoryAnnotations, StoryFn, StoryId, - PreparedStory, } from '@storybook/types'; import { storyNameFromExport, toId } from '@storybook/csf'; import { dedent } from 'ts-dedent'; @@ -30,9 +29,7 @@ export function normalizeStory( storyAnnotations: LegacyStoryAnnotationsOrFn, meta: NormalizedComponentAnnotations ): NormalizedStoryAnnotations { - const storyObject: StoryAnnotations & { - globalOverrides?: PreparedStory['globalOverrides']; - } = storyAnnotations; + const storyObject: StoryAnnotations = storyAnnotations; const userStoryFn: StoryFn | null = typeof storyAnnotations === 'function' ? storyAnnotations : null; @@ -61,7 +58,7 @@ export function normalizeStory( ...normalizeArrays(storyObject.beforeEach), ...normalizeArrays(story?.beforeEach), ]; - const { render, play, tags = [], globalOverrides } = storyObject; + const { render, play, tags = [], globals } = storyObject; // eslint-disable-next-line no-underscore-dangle const id = parameters.__id || toId(meta.id, exportName); @@ -79,6 +76,6 @@ export function normalizeStory( ...(render && { render }), ...(userStoryFn && { userStoryFn }), ...(play && { play }), - globalOverrides, + globals, }; } diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts index a574080558c5..45376353d3ad 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts @@ -321,6 +321,37 @@ describe('prepareStory', () => { }); }); + describe('globals => storyGlobals', () => { + it('are combined in the right order', () => { + const { storyGlobals } = prepareStory( + { + id, + name, + globals: { + a: 'a-story', + b: 'b-story', + }, + moduleExport, + }, + { + id, + title, + globals: { + a: 'a-component', + c: 'c-component', + }, + }, + { render } + ); + + expect(storyGlobals).toEqual({ + a: 'a-story', + b: 'b-story', + c: 'c-component', + }); + }); + }); + describe('applyLoaders', () => { it('awaits the result of a loader', async () => { const loader = vi.fn(async () => new Promise((r) => setTimeout(() => r({ foo: 7 }), 100))); diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 9c4da06a1653..b5be1805ee17 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -3,6 +3,7 @@ import { global } from '@storybook/global'; import type { Args, ArgsStoryFn, + Globals, ModuleExport, NormalizedComponentAnnotations, NormalizedProjectAnnotations, @@ -41,7 +42,7 @@ export function prepareStory( // NOTE: in the current implementation we are doing everything once, up front, rather than doing // anything at render time. The assumption is that as we don't load all the stories at once, this // will have a limited cost. If this proves misguided, we can refactor it. - const { moduleExport, id, name, globalOverrides } = storyAnnotations || {}; + const { moduleExport, id, name } = storyAnnotations || {}; const partialAnnotations = preparePartialAnnotations( storyAnnotations, @@ -133,7 +134,6 @@ export function prepareStory( applyLoaders, applyBeforeEach, playFunction, - globalOverrides, }; } export function prepareMeta( @@ -201,6 +201,11 @@ function preparePartialAnnotations( ...storyAnnotations?.args, } as Args; + const storyGlobals: Globals = { + ...componentAnnotations.globals, + ...storyAnnotations?.globals, + }; + const contextForEnhancers: StoryContextForEnhancers = { componentId: componentAnnotations.id, title: componentAnnotations.title, @@ -215,6 +220,7 @@ function preparePartialAnnotations( parameters, initialArgs: passedArgs, argTypes: passedArgTypes, + storyGlobals, }; contextForEnhancers.argTypes = argTypesEnhancers.reduce( diff --git a/code/lib/preview-api/template/stories/globals.stories.ts b/code/lib/preview-api/template/stories/globals.stories.ts index d46c719b531b..64883739a104 100644 --- a/code/lib/preview-api/template/stories/globals.stories.ts +++ b/code/lib/preview-api/template/stories/globals.stories.ts @@ -5,6 +5,9 @@ import { within, expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, tags: ['autodocs'], + globals: { + baz: 'bazComponentValue', + }, }; export const Inheritance = { @@ -17,6 +20,7 @@ export const Inheritance = { await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ foo: 'fooValue', bar: 'barDefaultValue', + baz: 'bazComponentValue', }); }, }; @@ -48,14 +52,15 @@ export const Overrides1 = { (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.globals } }), ], - globalOverrides: { + globals: { foo: 'fooOverridden1', - bar: 'barOverridden1', + baz: 'bazOverridden1', }, play: async ({ canvasElement }: PlayFunctionContext) => { await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ foo: 'fooOverridden1', - bar: 'barOverridden1', + bar: 'barDefaultValue', + baz: 'bazOverridden1', }); }, }; @@ -66,14 +71,15 @@ export const Overrides2 = { (storyFn: PartialStoryFn, context: StoryContext) => storyFn({ args: { object: context.globals } }), ], - globalOverrides: { + globals: { foo: 'fooOverridden2', - bar: 'barOverridden2', + baz: 'bazOverridden2', }, play: async ({ canvasElement }: PlayFunctionContext) => { await expect(JSON.parse(within(canvasElement).getByTestId('pre').innerText)).toMatchObject({ foo: 'fooOverridden2', - bar: 'barOverridden2', + bar: 'barDefaultValue', + baz: 'bazOverridden2', }); }, }; diff --git a/code/lib/preview-api/template/stories/preview.ts b/code/lib/preview-api/template/stories/preview.ts index 9286c5998952..695a3a9844ca 100644 --- a/code/lib/preview-api/template/stories/preview.ts +++ b/code/lib/preview-api/template/stories/preview.ts @@ -21,6 +21,7 @@ export const decorators = [ export const initialGlobals = { foo: 'fooValue', + baz: 'bazValue', }; export const globalTypes = { diff --git a/code/lib/types/src/modules/channelApi.ts b/code/lib/types/src/modules/channelApi.ts index b58129999e21..3181498b1dee 100644 --- a/code/lib/types/src/modules/channelApi.ts +++ b/code/lib/types/src/modules/channelApi.ts @@ -56,6 +56,13 @@ export interface SetGlobalsPayload { globalTypes: GlobalTypes; } +export interface GlobalsUpdatedPayload { + initialGlobals: Globals; + userGlobals: Globals; + storyGlobals: Globals; + globals: Globals; +} + export interface StoryPreparedPayload { id: StoryId; parameters: Parameters; diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts index 5dab3fb2696e..041aaed2e709 100644 --- a/code/lib/types/src/modules/story.ts +++ b/code/lib/types/src/modules/story.ts @@ -87,10 +87,6 @@ export type NormalizedStoryAnnotations = userStoryFn?: StoryFn; decorators?: DecoratorFunction[]; loaders?: LoaderFunction[]; - // Proof of concept - globalOverrides?: { - [name: string]: any; - }; }; export type CSFFile = { From 84def45e8a4b3cf06e431f0b644c052f03d4f2e5 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 26 Jun 2024 12:14:22 +1000 Subject: [PATCH 013/105] Update integration tests to account for various storyGlobals scenarios --- .../modules/preview-web/PreviewWeb.test.ts | 142 ++++++++++++++++++ 1 file changed, 142 insertions(+) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 2343574a16a8..c4d5d437804f 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -433,6 +433,43 @@ describe('PreviewWeb', () => { }); }); + it('emits GLOBALS_UPDATED with initial global values', async () => { + document.location.search = '?id=component-one--a'; + await createAndRenderPreview(); + + await waitForEvents([GLOBALS_UPDATED]); + expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, { + initialGlobals: { a: 'b' }, + userGlobals: { a: 'b' }, + storyGlobals: {}, + globals: { a: 'b' }, + }); + }); + + describe('if the story sets globals', () => { + it('emits GLOBALS_UPDATED with overridden storyGlobals', async () => { + document.location.search = '?id=component-one--a'; + const newImportFn = vi.fn(async (path) => { + if (path === './src/ComponentOne.stories.js') { + return { + ...componentOneExports, + a: { ...componentOneExports.a, globals: { a: 'c' } }, + }; + } + return importFn(path); + }); + await createAndRenderPreview({ importFn: newImportFn }); + + await waitForEvents([GLOBALS_UPDATED]); + expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, { + initialGlobals: { a: 'b' }, + userGlobals: { a: 'b' }, + storyGlobals: { a: 'c' }, + globals: { a: 'c' }, + }); + }); + }); + it('applies loaders with story context', async () => { document.location.search = '?id=component-one--a'; await createAndRenderPreview(); @@ -784,6 +821,60 @@ describe('PreviewWeb', () => { }); }); + describe('if the story sets globals', () => { + const newImportFn = vi.fn(async (path) => { + if (path === './src/ComponentOne.stories.js') { + return { + ...componentOneExports, + a: { ...componentOneExports.a, globals: { a: 'c' } }, + }; + } + return importFn(path); + }); + + const newGetProjectAnnotations = vi.fn( + () => ({ ...projectAnnotations, initialGlobals: { a: 'b', c: 'd' } }) as any + ); + + it('allows changes to globals the story did not set', async () => { + document.location.search = '?id=component-one--a'; + await createAndRenderPreview({ + importFn: newImportFn, + getProjectAnnotations: newGetProjectAnnotations, + }); + + mockChannel.emit.mockClear(); + emitter.emit(UPDATE_GLOBALS, { globals: { c: 'e' } }); + + await waitForEvents([GLOBALS_UPDATED]); + expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, { + initialGlobals: { a: 'b', c: 'd' }, + userGlobals: { a: 'b', c: 'e' }, + storyGlobals: { a: 'c' }, + globals: { a: 'c', c: 'e' }, + }); + }); + + it('does not allow changes to globals the story sets', async () => { + document.location.search = '?id=component-one--a'; + await createAndRenderPreview({ + importFn: newImportFn, + getProjectAnnotations: newGetProjectAnnotations, + }); + + mockChannel.emit.mockClear(); + emitter.emit(UPDATE_GLOBALS, { globals: { a: 'e' } }); + + await waitForEvents([GLOBALS_UPDATED]); + expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, { + initialGlobals: { a: 'b', c: 'd' }, + userGlobals: { a: 'e', c: 'd' }, + storyGlobals: { a: 'c' }, + globals: { a: 'c', c: 'd' }, + }); + }); + }); + it('doet not allow new globals on the store', async () => { document.location.search = '?id=component-one--a'; const preview = await createAndRenderPreview(); @@ -1923,6 +2014,57 @@ describe('PreviewWeb', () => { }); }); + it('emits GLOBALS_UPDATED with initial global values', async () => { + document.location.search = '?id=component-one--a'; + await createAndRenderPreview(); + + mockChannel.emit.mockClear(); + emitter.emit(SET_CURRENT_STORY, { + storyId: 'component-one--b', + viewMode: 'story', + }); + await waitForSetCurrentStory(); + + await waitForEvents([GLOBALS_UPDATED]); + expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, { + initialGlobals: { a: 'b' }, + userGlobals: { a: 'b' }, + storyGlobals: {}, + globals: { a: 'b' }, + }); + }); + + describe('if the story sets globals', () => { + it('emits GLOBALS_UPDATED with overridden storyGlobals', async () => { + document.location.search = '?id=component-one--a'; + const newImportFn = vi.fn(async (path) => { + if (path === './src/ComponentOne.stories.js') { + return { + ...componentOneExports, + b: { ...componentOneExports.b, globals: { a: 'c' } }, + }; + } + return importFn(path); + }); + + await createAndRenderPreview({ importFn: newImportFn }); + mockChannel.emit.mockClear(); + emitter.emit(SET_CURRENT_STORY, { + storyId: 'component-one--b', + viewMode: 'story', + }); + await waitForSetCurrentStory(); + + await waitForEvents([GLOBALS_UPDATED]); + expect(mockChannel.emit).toHaveBeenCalledWith(GLOBALS_UPDATED, { + initialGlobals: { a: 'b' }, + userGlobals: { a: 'b' }, + storyGlobals: { a: 'c' }, + globals: { a: 'c' }, + }); + }); + }); + it('applies loaders with story context', async () => { document.location.search = '?id=component-one--a'; await createAndRenderPreview(); From 57ac8f666123495f2f670f2e348cc2d80ea73f32 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 26 Jun 2024 12:21:54 +1000 Subject: [PATCH 014/105] Add end-to-end tests of toolbars/overrides --- code/e2e-tests/addon-toolbars.spec.ts | 38 +++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 code/e2e-tests/addon-toolbars.spec.ts diff --git a/code/e2e-tests/addon-toolbars.spec.ts b/code/e2e-tests/addon-toolbars.spec.ts new file mode 100644 index 000000000000..bbd0e35f1dd3 --- /dev/null +++ b/code/e2e-tests/addon-toolbars.spec.ts @@ -0,0 +1,38 @@ +import { test, expect } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; + +test.describe('addon-toolbars', () => { + test.beforeEach(async ({ page }) => { + await page.goto(storybookUrl); + await new SbPage(page).waitUntilLoaded(); + }); + + test('should have locale button in the toolbar', async ({ page }) => { + const sbPage = new SbPage(page); + + // Click on viewport button and select spanish + await sbPage.navigateToStory('addons/toolbars/globals', 'basic'); + await sbPage.selectToolbar('[title="Internationalization locale"]', '#list-item-es'); + + // Check that spanish is selected + await expect(sbPage.previewRoot()).toContainText('Hola'); + }); + + test('locale button should have no effect for story that overrides locale global', async ({ + page, + }) => { + const sbPage = new SbPage(page); + + // Click on viewport button and select spanish + await sbPage.navigateToStory('addons/toolbars/globals', 'override'); + await expect(sbPage.previewRoot()).toContainText('안녕하세요'); + await sbPage.selectToolbar('[title="Internationalization locale"]', '#list-item-es'); + + // Check that korean is still chosen + await expect(sbPage.previewRoot()).not.toContainText('Hola'); + await expect(sbPage.previewRoot()).toContainText('안녕하세요'); + }); +}); From 8bb129890fd02e74a5c4a5c5df9296fdcb74a2da Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 26 Jun 2024 12:24:00 +1000 Subject: [PATCH 015/105] Fix unused random import --- code/lib/preview-api/src/modules/preview-web/Preview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 3b6f04b31796..4dcb7547cffb 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -48,7 +48,6 @@ import { StoryStore } from '../../store'; import { StoryRender } from './render/StoryRender'; import type { CsfDocsRender } from './render/CsfDocsRender'; import type { MdxDocsRender } from './render/MdxDocsRender'; -import { satisfies } from '@storybook/core-common'; const { fetch } = global; From f96f93406ef6928cf560bebb7d15df3f83ea161e Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 27 Jun 2024 12:09:14 +1000 Subject: [PATCH 016/105] Update `globals` test --- code/lib/manager-api/src/modules/globals.ts | 2 + .../lib/manager-api/src/tests/globals.test.ts | 109 ++++++++++++++++-- 2 files changed, 100 insertions(+), 11 deletions(-) diff --git a/code/lib/manager-api/src/modules/globals.ts b/code/lib/manager-api/src/modules/globals.ts index 820f7390b582..cf510e1a3353 100644 --- a/code/lib/manager-api/src/modules/globals.ts +++ b/code/lib/manager-api/src/modules/globals.ts @@ -134,6 +134,8 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) = logger.warn('received globals from a non-local ref. This is not currently supported.'); } + // If we have stored globals different to what the preview just inited with, + // we should update it to those values if ( currentGlobals && Object.keys(currentGlobals).length !== 0 && diff --git a/code/lib/manager-api/src/tests/globals.test.ts b/code/lib/manager-api/src/tests/globals.test.ts index 26574fed38c1..7423a7e84ee4 100644 --- a/code/lib/manager-api/src/tests/globals.test.ts +++ b/code/lib/manager-api/src/tests/globals.test.ts @@ -9,6 +9,7 @@ import { init as initModule } from '../modules/globals'; import type { ModuleArgs } from '../lib/types'; import { getEventMetadata as _getEventData } from '../lib/events'; +import type { GlobalsUpdatedPayload, SetGlobalsPayload } from '@storybook/types'; const getEventMetadata = vi.mocked(_getEventData, true); const logger = vi.mocked(_logger, true); @@ -36,6 +37,8 @@ describe('globals API', () => { const { state } = initModule({ store, provider: { channel } } as unknown as ModuleArgs); expect(state).toEqual({ + userGlobals: {}, + storyGlobals: {}, globals: {}, globalTypes: {}, }); @@ -53,11 +56,45 @@ describe('globals API', () => { channel.emit(SET_GLOBALS, { globals: { a: 'b' }, globalTypes: { a: { type: { name: 'string' } } }, + } satisfies SetGlobalsPayload); + expect(store.getState()).toEqual({ + userGlobals: { a: 'b' }, + storyGlobals: {}, + globals: { a: 'b' }, + globalTypes: { a: { type: { name: 'string' } } }, }); + }); + + it('emits UPDATE_GLOBALS if retains a globals value different to what recieves on SET_GLOBALS', () => { + const channel = new EventEmitter(); + const listener = vi.fn(); + channel.on(UPDATE_GLOBALS, listener); + + const store = createMockStore(); + const { state } = initModule({ + store, + provider: { channel }, + } as unknown as ModuleArgs); + store.setState({ + ...state, + globals: { a: 'c' }, + }); + + channel.emit(SET_GLOBALS, { + globals: { a: 'b' }, + globalTypes: { a: { type: { name: 'string' } } }, + } satisfies SetGlobalsPayload); expect(store.getState()).toEqual({ + userGlobals: { a: 'b' }, + storyGlobals: {}, globals: { a: 'b' }, globalTypes: { a: { type: { name: 'string' } } }, }); + + expect(listener).toHaveBeenCalledWith({ + globals: { a: 'c' }, + options: { target: 'storybook-preview-iframe' }, + }); }); it('ignores SET_STORIES from other refs', () => { @@ -73,7 +110,12 @@ describe('globals API', () => { getEventMetadata.mockReturnValueOnce({ sourceType: 'external', ref: { id: 'ref' } } as any); channel.emit(SET_STORIES, { globals: { a: 'b' } }); - expect(store.getState()).toEqual({ globals: {}, globalTypes: {} }); + expect(store.getState()).toEqual({ + userGlobals: {}, + storyGlobals: {}, + globals: {}, + globalTypes: {}, + }); }); it('ignores SET_GLOBALS from other refs', () => { @@ -91,8 +133,13 @@ describe('globals API', () => { channel.emit(SET_GLOBALS, { globals: { a: 'b' }, globalTypes: { a: { type: { name: 'string' } } }, + } satisfies SetGlobalsPayload); + expect(store.getState()).toEqual({ + userGlobals: {}, + storyGlobals: {}, + globals: {}, + globalTypes: {}, }); - expect(store.getState()).toEqual({ globals: {}, globalTypes: {} }); }); it('updates the state when the preview emits GLOBALS_UPDATED', () => { @@ -106,15 +153,45 @@ describe('globals API', () => { } as unknown as ModuleArgs); store.setState(state); - channel.emit(GLOBALS_UPDATED, { globals: { a: 'b' } }); - expect(store.getState()).toEqual({ globals: { a: 'b' }, globalTypes: {} }); + channel.emit(GLOBALS_UPDATED, { + initialGlobals: { a: 'b' }, + userGlobals: { a: 'b' }, + storyGlobals: {}, + globals: { a: 'b' }, + } satisfies GlobalsUpdatedPayload); + expect(store.getState()).toEqual({ + userGlobals: { a: 'b' }, + storyGlobals: {}, + globals: { a: 'b' }, + globalTypes: {}, + }); - channel.emit(GLOBALS_UPDATED, { globals: { a: 'c' } }); - expect(store.getState()).toEqual({ globals: { a: 'c' }, globalTypes: {} }); + channel.emit(GLOBALS_UPDATED, { + initialGlobals: { a: 'b' }, + userGlobals: { a: 'c' }, + storyGlobals: {}, + globals: { a: 'c' }, + } satisfies GlobalsUpdatedPayload); + expect(store.getState()).toEqual({ + userGlobals: { a: 'c' }, + storyGlobals: {}, + globals: { a: 'c' }, + globalTypes: {}, + }); - // SHOULD NOT merge global args - channel.emit(GLOBALS_UPDATED, { globals: { d: 'e' } }); - expect(store.getState()).toEqual({ globals: { d: 'e' }, globalTypes: {} }); + // SHOULD NOT merge globals + channel.emit(GLOBALS_UPDATED, { + initialGlobals: { a: 'b' }, + userGlobals: { d: 'e' }, + storyGlobals: {}, + globals: { d: 'e' }, + } satisfies GlobalsUpdatedPayload); + expect(store.getState()).toEqual({ + userGlobals: { d: 'e' }, + storyGlobals: {}, + globals: { d: 'e' }, + globalTypes: {}, + }); }); it('ignores GLOBALS_UPDATED from other refs', () => { @@ -130,8 +207,18 @@ describe('globals API', () => { getEventMetadata.mockReturnValueOnce({ sourceType: 'external', ref: { id: 'ref' } } as any); logger.warn.mockClear(); - channel.emit(GLOBALS_UPDATED, { globals: { a: 'b' } }); - expect(store.getState()).toEqual({ globals: {}, globalTypes: {} }); + channel.emit(GLOBALS_UPDATED, { + initialGlobals: { a: 'b' }, + userGlobals: { a: 'b' }, + storyGlobals: {}, + globals: { a: 'b' }, + } satisfies GlobalsUpdatedPayload); + expect(store.getState()).toEqual({ + userGlobals: {}, + storyGlobals: {}, + globals: {}, + globalTypes: {}, + }); expect(logger.warn).toHaveBeenCalled(); }); From 866dfd3620ab8f89cf8ca004208608d7e733d1fc Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 27 Jun 2024 12:11:43 +1000 Subject: [PATCH 017/105] Fix url test --- code/lib/manager-api/src/tests/url.test.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/code/lib/manager-api/src/tests/url.test.js b/code/lib/manager-api/src/tests/url.test.js index 817cb118ff41..a5686fe1f8fb 100644 --- a/code/lib/manager-api/src/tests/url.test.js +++ b/code/lib/manager-api/src/tests/url.test.js @@ -174,7 +174,12 @@ describe('initModule', () => { const channel = new EventEmitter(); initURL({ store, provider: { channel }, state: { location: {} }, navigate, fullAPI }); - channel.emit(GLOBALS_UPDATED, { globals: { a: 2 }, initialGlobals: { a: 1, b: 1 } }); + channel.emit(GLOBALS_UPDATED, { + userGlobals: { a: 2 }, + storyGlobals: {}, + globals: { a: 2 }, + initialGlobals: { a: 1, b: 1 }, + }); expect(navigate).toHaveBeenCalledWith( '/story/test--story&globals=a:2;b:!undefined', expect.objectContaining({ replace: true }) @@ -196,7 +201,7 @@ describe('initModule', () => { }), }); - channel.emit(GLOBALS_UPDATED, { globals: { g: 2 } }); + channel.emit(GLOBALS_UPDATED, { userGlobals: { g: 2 }, storyGlobals: {}, globals: { g: 2 } }); expect(navigate).toHaveBeenCalledWith( '/story/test--story&full=1&globals=g:2', expect.objectContaining({ replace: true }) From 425e8700e3eee80758d170dce8e98af6dc083d83 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 27 Jun 2024 12:12:08 +1000 Subject: [PATCH 018/105] Update snapshots in StoryStore tes --- .../preview-api/src/modules/store/StoryStore.test.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/code/lib/preview-api/src/modules/store/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts index d5c4e18faf09..17690ea09c75 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -309,6 +309,7 @@ describe('StoryStore', () => { }, "playFunction": undefined, "story": "A", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -475,6 +476,7 @@ describe('StoryStore', () => { }, "playFunction": undefined, "story": "A", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -514,6 +516,7 @@ describe('StoryStore', () => { }, "playFunction": undefined, "story": "B", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -553,6 +556,7 @@ describe('StoryStore', () => { }, "playFunction": undefined, "story": "C", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -662,6 +666,7 @@ describe('StoryStore', () => { "playFunction": undefined, "story": "A", "storyFn": [Function], + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -709,6 +714,7 @@ describe('StoryStore', () => { "playFunction": undefined, "story": "B", "storyFn": [Function], + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -756,6 +762,7 @@ describe('StoryStore', () => { "playFunction": undefined, "story": "C", "storyFn": [Function], + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -818,6 +825,7 @@ describe('StoryStore', () => { }, "playFunction": undefined, "story": "A", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -857,6 +865,7 @@ describe('StoryStore', () => { }, "playFunction": undefined, "story": "B", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", @@ -896,6 +905,7 @@ describe('StoryStore', () => { }, "playFunction": undefined, "story": "C", + "storyGlobals": {}, "subcomponents": undefined, "tags": [ "dev", From c11a299905f3fd3e77f63552e2bcde2b2180e4fe Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 27 Jun 2024 12:12:43 +1000 Subject: [PATCH 019/105] Update snapshots in normalize story test --- .../preview-api/src/modules/store/csf/normalizeStory.test.ts | 4 ++++ code/lib/preview-api/src/modules/store/csf/normalizeStory.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts index f9e4b9cdca92..576902f6562e 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.test.ts @@ -53,6 +53,7 @@ describe('normalizeStory', () => { "args": {}, "beforeEach": [], "decorators": [], + "globals": {}, "id": "title--story-export", "loaders": [], "moduleExport": [Function], @@ -123,6 +124,7 @@ describe('normalizeStory', () => { "args": {}, "beforeEach": [], "decorators": [], + "globals": {}, "id": "title--story-export", "loaders": [], "moduleExport": {}, @@ -162,6 +164,7 @@ describe('normalizeStory', () => { "decorators": [ [Function], ], + "globals": {}, "id": "title--story-export", "loaders": [ [Function], @@ -219,6 +222,7 @@ describe('normalizeStory', () => { [Function], [Function], ], + "globals": {}, "id": "title--story-export", "loaders": [ [Function], diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts index 3a6773b56987..a3cdb5b55487 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts @@ -58,7 +58,7 @@ export function normalizeStory( ...normalizeArrays(storyObject.beforeEach), ...normalizeArrays(story?.beforeEach), ]; - const { render, play, tags = [], globals } = storyObject; + const { render, play, tags = [], globals = {} } = storyObject; // eslint-disable-next-line no-underscore-dangle const id = parameters.__id || toId(meta.id, exportName); From 73cb16b1304229fead167a588fc3de51042863c3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 16 Jul 2024 16:44:41 +0200 Subject: [PATCH 020/105] use canary of csf --- code/addons/links/package.json | 2 +- code/core/package.json | 2 +- code/lib/blocks/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/yarn.lock | 1053 +++------------------------ 9 files changed, 93 insertions(+), 976 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 6f93d4ee197c..b5a1b0378b22 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.11", + "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/core/package.json b/code/core/package.json index 5fd58d2a95fc..f10e1e82ca15 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -245,7 +245,7 @@ "prep": "bun ./scripts/prep.ts" }, "dependencies": { - "@storybook/csf": "0.1.11", + "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", "@types/express": "^4.17.21", "@types/node": "^18.0.0", "browser-assert": "^1.2.1", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index ebc7b9ca88aa..4790c82c575f 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -44,7 +44,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.11", + "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@types/lodash": "^4.14.167", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 33f47d4d70e8..54fcfa6c1bce 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -58,7 +58,7 @@ "@babel/preset-env": "^7.24.4", "@babel/types": "^7.24.0", "@storybook/core": "workspace:*", - "@storybook/csf": "0.1.11", + "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", "@types/cross-spawn": "^6.0.2", "cross-spawn": "^7.0.3", "globby": "^14.0.1", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index cdd281fc63a6..6546c16b497c 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.11", + "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", "estraverse": "^5.2.0", "lodash": "^4.17.21", "prettier": "^3.1.1" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index e8a45299549d..1c61e54ea0e2 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -44,7 +44,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.11", + "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", "@storybook/instrumenter": "workspace:*", "@testing-library/dom": "10.1.0", "@testing-library/jest-dom": "6.4.5", diff --git a/code/package.json b/code/package.json index 8b3f199748e1..738913106752 100644 --- a/code/package.json +++ b/code/package.json @@ -118,7 +118,7 @@ "@storybook/codemod": "workspace:*", "@storybook/core": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.11", + "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", "@storybook/csf-plugin": "workspace:*", "@storybook/ember": "workspace:*", "@storybook/eslint-config-storybook": "^4.0.0", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 704655e2cc58..8d7aaf6412ae 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -47,7 +47,7 @@ }, "dependencies": { "@storybook/components": "workspace:^", - "@storybook/csf": "0.1.11", + "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:^", "@storybook/preview-api": "workspace:^", diff --git a/code/yarn.lock b/code/yarn.lock index 862837d44f1d..6a47006ab78f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -360,7 +360,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.7": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2, @babel/code-frame@npm:^7.24.7": version: 7.24.7 resolution: "@babel/code-frame@npm:7.24.7" dependencies: @@ -370,30 +370,13 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": - version: 7.24.2 - resolution: "@babel/code-frame@npm:7.24.2" - dependencies: - "@babel/highlight": "npm:^7.24.2" - picocolors: "npm:^1.0.0" - checksum: 10c0/d1d4cba89475ab6aab7a88242e1fd73b15ecb9f30c109b69752956434d10a26a52cbd37727c4eca104b6d45227bd1dfce39a6a6f4a14c9b2f07f871e968cf406 - languageName: node - linkType: hard - -"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.7": +"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4, @babel/compat-data@npm:^7.24.7": version: 7.24.7 resolution: "@babel/compat-data@npm:7.24.7" checksum: 10c0/dcd93a5632b04536498fbe2be5af1057f635fd7f7090483d8e797878559037e5130b26862ceb359acbae93ed27e076d395ddb4663db6b28a665756ffd02d324f languageName: node linkType: hard -"@babel/compat-data@npm:^7.24.4": - version: 7.24.4 - resolution: "@babel/compat-data@npm:7.24.4" - checksum: 10c0/9cd8a9cd28a5ca6db5d0e27417d609f95a8762b655e8c9c97fd2de08997043ae99f0139007083c5e607601c6122e8432c85fe391731b19bf26ad458fa0c60dd3 - languageName: node - linkType: hard - "@babel/core@npm:7.23.9": version: 7.23.9 resolution: "@babel/core@npm:7.23.9" @@ -487,19 +470,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.24.1": - version: 7.24.4 - resolution: "@babel/generator@npm:7.24.4" - dependencies: - "@babel/types": "npm:^7.24.0" - "@jridgewell/gen-mapping": "npm:^0.3.5" - "@jridgewell/trace-mapping": "npm:^0.3.25" - jsesc: "npm:^2.5.1" - checksum: 10c0/67a1b2f7cc985aaaa11b01e8ddd4fffa4f285837bc7a209738eb8203aa34bdafeb8507ed75fd883ddbabd641a036ca0a8d984e760f28ad4a9d60bff29d0a60bb - languageName: node - linkType: hard - -"@babel/helper-annotate-as-pure@npm:7.22.5, @babel/helper-annotate-as-pure@npm:^7.22.5": +"@babel/helper-annotate-as-pure@npm:7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" dependencies: @@ -508,7 +479,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.24.7": +"@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5, @babel/helper-annotate-as-pure@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-annotate-as-pure@npm:7.24.7" dependencies: @@ -517,15 +488,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.22.15" - dependencies: - "@babel/types": "npm:^7.22.15" - checksum: 10c0/2535e3824ca6337f65786bbac98e562f71699f25532cecd196f027d7698b4967a96953d64e36567956658ad1a05ccbdc62d1ba79ee751c79f4f1d2d3ecc2e01c - languageName: node - linkType: hard - "@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.24.7" @@ -568,25 +530,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4": - version: 7.24.4 - resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4" - dependencies: - "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-member-expression-to-functions": "npm:^7.23.0" - "@babel/helper-optimise-call-expression": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.24.1" - "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - semver: "npm:^6.3.1" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 10c0/6ebb38375dcd44c79f40008c2de4d023376cf436c135439f15c9c54603c2d6a8ada39b2e07be545da684d9e40b602a0cb0d1670f3877d056deb5f0d786c4bf86 - languageName: node - linkType: hard - "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-create-regexp-features-plugin@npm:7.24.7" @@ -600,19 +543,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-regexp-features-plugin@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15" - dependencies: - "@babel/helper-annotate-as-pure": "npm:^7.22.5" - regexpu-core: "npm:^5.3.1" - semver: "npm:^6.3.1" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 10c0/8eba4c1b7b94a83e7a82df5c3e504584ff0ba6ab8710a67ecc2c434a7fb841a29c2f5c94d2de51f25446119a1df538fa90b37bd570db22ddd5e7147fe98277c6 - languageName: node - linkType: hard - "@babel/helper-define-polyfill-provider@npm:^0.5.0": version: 0.5.0 resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0" @@ -652,16 +582,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-function-name@npm:^7.23.0": - version: 7.23.0 - resolution: "@babel/helper-function-name@npm:7.23.0" - dependencies: - "@babel/template": "npm:^7.22.15" - "@babel/types": "npm:^7.23.0" - checksum: 10c0/d771dd1f3222b120518176733c52b7cadac1c256ff49b1889dbbe5e3fed81db855b8cc4e40d949c9d3eae0e795e8229c1c8c24c0e83f27cfa6ee3766696c6428 - languageName: node - linkType: hard - "@babel/helper-function-name@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-function-name@npm:7.24.7" @@ -672,15 +592,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-hoist-variables@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-hoist-variables@npm:7.22.5" - dependencies: - "@babel/types": "npm:^7.22.5" - checksum: 10c0/60a3077f756a1cd9f14eb89f0037f487d81ede2b7cfe652ea6869cd4ec4c782b0fb1de01b8494b9a2d2050e3d154d7d5ad3be24806790acfb8cbe2073bf1e208 - languageName: node - linkType: hard - "@babel/helper-hoist-variables@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-hoist-variables@npm:7.24.7" @@ -690,15 +601,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-member-expression-to-functions@npm:^7.23.0": - version: 7.23.0 - resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0" - dependencies: - "@babel/types": "npm:^7.23.0" - checksum: 10c0/b810daddf093ffd0802f1429052349ed9ea08ef7d0c56da34ffbcdecbdafac86f95bdea2fe30e0e0e629febc7dd41b56cb5eacc10d1a44336d37b755dac31fa4 - languageName: node - linkType: hard - "@babel/helper-member-expression-to-functions@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-member-expression-to-functions@npm:7.24.7" @@ -709,7 +611,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.7, @babel/helper-module-imports@npm:^7.8.3": +"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.3, @babel/helper-module-imports@npm:^7.24.7, @babel/helper-module-imports@npm:^7.8.3": version: 7.24.7 resolution: "@babel/helper-module-imports@npm:7.24.7" dependencies: @@ -719,15 +621,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.24.1, @babel/helper-module-imports@npm:^7.24.3": - version: 7.24.3 - resolution: "@babel/helper-module-imports@npm:7.24.3" - dependencies: - "@babel/types": "npm:^7.24.0" - checksum: 10c0/052c188adcd100f5e8b6ff0c9643ddaabc58b6700d3bbbc26804141ad68375a9f97d9d173658d373d31853019e65f62610239e3295cdd58e573bdcb2fded188d - languageName: node - linkType: hard - "@babel/helper-module-transforms@npm:^7.23.3, @babel/helper-module-transforms@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-module-transforms@npm:7.24.7" @@ -743,15 +636,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-optimise-call-expression@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-optimise-call-expression@npm:7.22.5" - dependencies: - "@babel/types": "npm:^7.22.5" - checksum: 10c0/31b41a764fc3c585196cf5b776b70cf4705c132e4ce9723f39871f215f2ddbfb2e28a62f9917610f67c8216c1080482b9b05f65dd195dae2a52cef461f2ac7b8 - languageName: node - linkType: hard - "@babel/helper-optimise-call-expression@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-optimise-call-expression@npm:7.24.7" @@ -761,14 +645,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": - version: 7.24.0 - resolution: "@babel/helper-plugin-utils@npm:7.24.0" - checksum: 10c0/90f41bd1b4dfe7226b1d33a4bb745844c5c63e400f9e4e8bf9103a7ceddd7d425d65333b564d9daba3cebd105985764d51b4bd4c95822b97c2e3ac1201a8a5da - languageName: node - linkType: hard - -"@babel/helper-plugin-utils@npm:^7.24.7": +"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.24.7, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": version: 7.24.7 resolution: "@babel/helper-plugin-utils@npm:7.24.7" checksum: 10c0/c3d38cd9b3520757bb4a279255cc3f956fc0ac1c193964bd0816ebd5c86e30710be8e35252227e0c9d9e0f4f56d9b5f916537f2bc588084b0988b4787a967d31 @@ -788,19 +665,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-replace-supers@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/helper-replace-supers@npm:7.24.1" - dependencies: - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-member-expression-to-functions": "npm:^7.23.0" - "@babel/helper-optimise-call-expression": "npm:^7.22.5" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 10c0/d39a3df7892b7c3c0e307fb229646168a9bd35e26a72080c2530729322600e8cff5f738f44a14860a2358faffa741b6a6a0d6749f113387b03ddbfa0ec10e1a0 - languageName: node - linkType: hard - "@babel/helper-replace-supers@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-replace-supers@npm:7.24.7" @@ -814,15 +678,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-simple-access@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-simple-access@npm:7.22.5" - dependencies: - "@babel/types": "npm:^7.22.5" - checksum: 10c0/f0cf81a30ba3d09a625fd50e5a9069e575c5b6719234e04ee74247057f8104beca89ed03e9217b6e9b0493434cedc18c5ecca4cea6244990836f1f893e140369 - languageName: node - linkType: hard - "@babel/helper-simple-access@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-simple-access@npm:7.24.7" @@ -843,16 +698,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-skip-transparent-expression-wrappers@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.22.5" - dependencies: - "@babel/types": "npm:^7.22.5" - checksum: 10c0/ab7fa2aa709ab49bb8cd86515a1e715a3108c4bb9a616965ba76b43dc346dee66d1004ccf4d222b596b6224e43e04cbc5c3a34459501b388451f8c589fbc3691 - languageName: node - linkType: hard - -"@babel/helper-split-export-declaration@npm:7.22.6, @babel/helper-split-export-declaration@npm:^7.22.6": +"@babel/helper-split-export-declaration@npm:7.22.6": version: 7.22.6 resolution: "@babel/helper-split-export-declaration@npm:7.22.6" dependencies: @@ -870,13 +716,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-string-parser@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/helper-string-parser@npm:7.23.4" - checksum: 10c0/f348d5637ad70b6b54b026d6544bd9040f78d24e7ec245a0fc42293968181f6ae9879c22d89744730d246ce8ec53588f716f102addd4df8bbc79b73ea10004ac - languageName: node - linkType: hard - "@babel/helper-string-parser@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-string-parser@npm:7.24.7" @@ -884,13 +723,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-validator-identifier@npm:^7.22.20": - version: 7.22.20 - resolution: "@babel/helper-validator-identifier@npm:7.22.20" - checksum: 10c0/dcad63db345fb110e032de46c3688384b0008a42a4845180ce7cd62b1a9c0507a1bed727c4d1060ed1a03ae57b4d918570259f81724aaac1a5b776056f37504e - languageName: node - linkType: hard - "@babel/helper-validator-identifier@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-validator-identifier@npm:7.24.7" @@ -898,14 +730,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-validator-option@npm:^7.22.15": - version: 7.23.5 - resolution: "@babel/helper-validator-option@npm:7.23.5" - checksum: 10c0/af45d5c0defb292ba6fd38979e8f13d7da63f9623d8ab9ededc394f67eb45857d2601278d151ae9affb6e03d5d608485806cd45af08b4468a0515cf506510e94 - languageName: node - linkType: hard - -"@babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.24.7": +"@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-validator-option@npm:7.24.7" checksum: 10c0/21aea2b7bc5cc8ddfb828741d5c8116a84cbc35b4a3184ec53124f08e09746f1f67a6f9217850188995ca86059a7942e36d8965a6730784901def777b7e8a436 @@ -924,7 +749,7 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0": +"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0, @babel/helpers@npm:^7.24.4": version: 7.24.7 resolution: "@babel/helpers@npm:7.24.7" dependencies: @@ -934,29 +759,6 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.24.4": - version: 7.24.4 - resolution: "@babel/helpers@npm:7.24.4" - dependencies: - "@babel/template": "npm:^7.24.0" - "@babel/traverse": "npm:^7.24.1" - "@babel/types": "npm:^7.24.0" - checksum: 10c0/747ef62b7fe87de31a2f3c19ff337a86cbb79be2f6c18af63133b614ab5a8f6da5b06ae4b06fb0e71271cb6a27efec6f8b6c9f44c60b8a18777832dc7929e6c5 - languageName: node - linkType: hard - -"@babel/highlight@npm:^7.24.2": - version: 7.24.2 - resolution: "@babel/highlight@npm:7.24.2" - dependencies: - "@babel/helper-validator-identifier": "npm:^7.22.20" - chalk: "npm:^2.4.2" - js-tokens: "npm:^4.0.0" - picocolors: "npm:^1.0.0" - checksum: 10c0/98ce00321daedeed33a4ed9362dc089a70375ff1b3b91228b9f05e6591d387a81a8cba68886e207861b8871efa0bc997ceabdd9c90f6cce3ee1b2f7f941b42db - languageName: node - linkType: hard - "@babel/highlight@npm:^7.24.7": version: 7.24.7 resolution: "@babel/highlight@npm:7.24.7" @@ -978,15 +780,6 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.24.1": - version: 7.24.4 - resolution: "@babel/parser@npm:7.24.4" - bin: - parser: ./bin/babel-parser.js - checksum: 10c0/8381e1efead5069cb7ed2abc3a583f4a86289b2f376c75cecc69f59a8eb36df18274b1886cecf2f97a6a0dff5334b27330f58535be9b3e4e26102cc50e12eac8 - languageName: node - linkType: hard - "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4": version: 7.24.4 resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4" @@ -999,7 +792,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3, @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.7" dependencies: @@ -1010,18 +803,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 10c0/d4e592e6fc4878654243d2e7b51ea86471b868a8cb09de29e73b65d2b64159990c6c198fd7c9c2af2e38b1cddf70206243792853c47384a84f829dada152f605 - languageName: node - linkType: hard - -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3": +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3, @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.7" dependencies: @@ -1034,20 +816,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" - peerDependencies: - "@babel/core": ^7.13.0 - checksum: 10c0/351c36e45795a7890d610ab9041a52f4078a59429f6e74c281984aa44149a10d43e82b3a8172c703c0d5679471e165d1c02b6d2e45a677958ee301b89403f202 - languageName: node - linkType: hard - -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7, @babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.7" dependencies: @@ -1059,18 +828,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1" - dependencies: - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 10c0/d7dd5a59a54635a3152895dcaa68f3370bb09d1f9906c1e72232ff759159e6be48de4a598a993c986997280a2dc29922a48aaa98020f16439f3f57ad72788354 - languageName: node - linkType: hard - "@babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.16.5": version: 7.18.6 resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6" @@ -1255,7 +1012,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-attributes@npm:^7.23.3": +"@babel/plugin-syntax-import-attributes@npm:^7.23.3, @babel/plugin-syntax-import-attributes@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.7" dependencies: @@ -1266,17 +1023,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-attributes@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/309634e3335777aee902552b2cf244c4a8050213cc878b3fb9d70ad8cbbff325dc46ac5e5791836ff477ea373b27832238205f6ceaff81f7ea7c4c7e8fbb13bb - languageName: node - linkType: hard - "@babel/plugin-syntax-import-meta@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4" @@ -1398,17 +1144,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-typescript@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-syntax-typescript@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/7a81e277dcfe3138847e8e5944e02a42ff3c2e864aea6f33fd9b70d1556d12b0e70f0d56cc1985d353c91bcbf8fe163e6cc17418da21129b7f7f1d8b9ac00c93 - languageName: node - linkType: hard - "@babel/plugin-syntax-typescript@npm:^7.24.7, @babel/plugin-syntax-typescript@npm:^7.3.3": version: 7.24.7 resolution: "@babel/plugin-syntax-typescript@npm:7.24.7" @@ -1432,7 +1167,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.23.3": +"@babel/plugin-transform-arrow-functions@npm:^7.23.3, @babel/plugin-transform-arrow-functions@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.7" dependencies: @@ -1443,17 +1178,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/f44bfacf087dc21b422bab99f4e9344ee7b695b05c947dacae66de05c723ab9d91800be7edc1fa016185e8c819f3aca2b4a5f66d8a4d1e47d9bad80b8fa55b8e - languageName: node - linkType: hard - "@babel/plugin-transform-async-generator-functions@npm:7.23.9": version: 7.23.9 resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9" @@ -1468,7 +1192,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.23.9": +"@babel/plugin-transform-async-generator-functions@npm:^7.23.9, @babel/plugin-transform-async-generator-functions@npm:^7.24.3": version: 7.24.7 resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.7" dependencies: @@ -1482,20 +1206,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.24.3": - version: 7.24.3 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3" - dependencies: - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-remap-async-to-generator": "npm:^7.22.20" - "@babel/plugin-syntax-async-generators": "npm:^7.8.4" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/55ceed059f819dcccbfe69600bfa1c055ada466bd54eda117cfdd2cf773dd85799e2f6556e4a559b076e93b9704abcca2aef9d72aad7dc8a5d3d17886052f1d3 - languageName: node - linkType: hard - "@babel/plugin-transform-async-to-generator@npm:7.23.3": version: 7.23.3 resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3" @@ -1509,7 +1219,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-to-generator@npm:^7.23.3": +"@babel/plugin-transform-async-to-generator@npm:^7.23.3, @babel/plugin-transform-async-to-generator@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.7" dependencies: @@ -1522,20 +1232,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-to-generator@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1" - dependencies: - "@babel/helper-module-imports": "npm:^7.24.1" - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-remap-async-to-generator": "npm:^7.22.20" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/3731ba8e83cbea1ab22905031f25b3aeb0b97c6467360a2cc685352f16e7c786417d8883bc747f5a0beff32266bdb12a05b6292e7b8b75967087200a7bc012c4 - languageName: node - linkType: hard - -"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3": +"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3, @babel/plugin-transform-block-scoped-functions@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.7" dependencies: @@ -1546,18 +1243,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/6fbaa85f5204f34845dfc0bebf62fdd3ac5a286241c85651e59d426001e7a1785ac501f154e093e0b8ee49e1f51e3f8b06575a5ae8d4a9406d43e4816bf18c37 - languageName: node - linkType: hard - -"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.8.3": +"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.24.4, @babel/plugin-transform-block-scoping@npm:^7.8.3": version: 7.24.7 resolution: "@babel/plugin-transform-block-scoping@npm:7.24.7" dependencies: @@ -1568,17 +1254,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-block-scoping@npm:^7.24.4": - version: 7.24.4 - resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/62f55fd1b60a115506e9553c3bf925179b1ab8a42dc31471c4e3ada20573a488b5c5e3317145da352493ef07f1d9750ce1f8a49cb3f39489ac1ab42e5ddc883d - languageName: node - linkType: hard - "@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3, @babel/plugin-transform-class-properties@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-class-properties@npm:7.24.7" @@ -1591,7 +1266,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-static-block@npm:^7.23.4": +"@babel/plugin-transform-class-static-block@npm:^7.23.4, @babel/plugin-transform-class-static-block@npm:^7.24.4": version: 7.24.7 resolution: "@babel/plugin-transform-class-static-block@npm:7.24.7" dependencies: @@ -1604,20 +1279,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-static-block@npm:^7.24.4": - version: 7.24.4 - resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4" - dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.24.4" - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" - peerDependencies: - "@babel/core": ^7.12.0 - checksum: 10c0/19dfeaf4a2ac03695034f7211a8b5ad89103b224608ac3e91791055107c5fe4d7ebe5d9fbb31b4a91265694af78762260642eb270f4b239c175984ee4b253f80 - languageName: node - linkType: hard - -"@babel/plugin-transform-classes@npm:^7.23.8": +"@babel/plugin-transform-classes@npm:^7.23.8, @babel/plugin-transform-classes@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-classes@npm:7.24.7" dependencies: @@ -1635,25 +1297,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-classes@npm:7.24.1" - dependencies: - "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-compilation-targets": "npm:^7.23.6" - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-replace-supers": "npm:^7.24.1" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - globals: "npm:^11.1.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/586a95826be4d68056fa23d8e6c34353ce2ea59bf3ca8cf62bc784e60964d492d76e1b48760c43fd486ffb65a79d3fed9a4f91289e4f526f88c3b6acc0dfb00e - languageName: node - linkType: hard - -"@babel/plugin-transform-computed-properties@npm:^7.23.3": +"@babel/plugin-transform-computed-properties@npm:^7.23.3, @babel/plugin-transform-computed-properties@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-computed-properties@npm:7.24.7" dependencies: @@ -1665,19 +1309,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-computed-properties@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/template": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/8292c508b656b7722e2c2ca0f6f31339852e3ed2b9b80f6e068a4010e961b431ca109ecd467fc906283f4b1574c1e7b1cb68d35a4dea12079d386c15ff7e0eac - languageName: node - linkType: hard - -"@babel/plugin-transform-destructuring@npm:^7.23.3": +"@babel/plugin-transform-destructuring@npm:^7.23.3, @babel/plugin-transform-destructuring@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-destructuring@npm:7.24.7" dependencies: @@ -1688,18 +1320,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-destructuring@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-destructuring@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/a08e706a9274a699abc3093f38c72d4a5354eac11c44572cc9ea049915b6e03255744297069fd94fcce82380725c5d6b1b11b9a84c0081aa3aa6fc2fdab98ef6 - languageName: node - linkType: hard - -"@babel/plugin-transform-dotall-regex@npm:^7.23.3": +"@babel/plugin-transform-dotall-regex@npm:^7.23.3, @babel/plugin-transform-dotall-regex@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.7" dependencies: @@ -1711,19 +1332,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-dotall-regex@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1" - dependencies: - "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/758def705ec5a87ef910280dc2df5d2fda59dc5d4771c1725c7aed0988ae5b79e29aeb48109120301a3e1c6c03dfac84700469de06f38ca92c96834e09eadf5d - languageName: node - linkType: hard - -"@babel/plugin-transform-duplicate-keys@npm:^7.23.3": +"@babel/plugin-transform-duplicate-keys@npm:^7.23.3, @babel/plugin-transform-duplicate-keys@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.7" dependencies: @@ -1734,18 +1343,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-duplicate-keys@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/41072f57f83a6c2b15f3ee0b6779cdca105ff3d98061efe92ac02d6c7b90fdb6e7e293b8a4d5b9c690d9ae5d3ae73e6bde4596dc4d8c66526a0e5e1abc73c88c - languageName: node - linkType: hard - -"@babel/plugin-transform-dynamic-import@npm:^7.23.4": +"@babel/plugin-transform-dynamic-import@npm:^7.23.4, @babel/plugin-transform-dynamic-import@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.7" dependencies: @@ -1757,19 +1355,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-dynamic-import@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/7e2834780e9b5251ef341854043a89c91473b83c335358620ca721554877e64e416aeb3288a35f03e825c4958e07d5d00ead08c4490fadc276a21fe151d812f1 - languageName: node - linkType: hard - -"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3": +"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3, @babel/plugin-transform-exponentiation-operator@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.7" dependencies: @@ -1781,18 +1367,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1" - dependencies: - "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/f0fc4c5a9add25fd6bf23dabe6752e9b7c0a2b2554933dddfd16601245a2ba332b647951079c782bf3b94c6330e3638b9b4e0227f469a7c1c707446ba0eba6c7 - languageName: node - linkType: hard - "@babel/plugin-transform-export-namespace-from@npm:^7.23.4, @babel/plugin-transform-export-namespace-from@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.7" @@ -1817,7 +1391,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-for-of@npm:^7.23.6": +"@babel/plugin-transform-for-of@npm:^7.23.6, @babel/plugin-transform-for-of@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-for-of@npm:7.24.7" dependencies: @@ -1829,19 +1403,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-for-of@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-for-of@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/e4bc92b1f334246e62d4bde079938df940794db564742034f6597f2e38bd426e11ae8c5670448e15dd6e45c462f2a9ab3fa87259bddf7c08553ffd9457fc2b2c - languageName: node - linkType: hard - -"@babel/plugin-transform-function-name@npm:^7.23.3": +"@babel/plugin-transform-function-name@npm:^7.23.3, @babel/plugin-transform-function-name@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-function-name@npm:7.24.7" dependencies: @@ -1854,20 +1416,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-function-name@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-function-name@npm:7.24.1" - dependencies: - "@babel/helper-compilation-targets": "npm:^7.23.6" - "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/65c1735ec3b5e43db9b5aebf3c16171c04b3050c92396b9e22dda0d2aaf51f43fdcf147f70a40678fd9a4ee2272a5acec4826e9c21bcf968762f4c184897ad75 - languageName: node - linkType: hard - -"@babel/plugin-transform-json-strings@npm:^7.23.4": +"@babel/plugin-transform-json-strings@npm:^7.23.4, @babel/plugin-transform-json-strings@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-json-strings@npm:7.24.7" dependencies: @@ -1879,19 +1428,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-json-strings@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-json-strings@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-json-strings": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/13d9b6a3c31ab4be853b3d49d8d1171f9bd8198562fd75da8f31e7de31398e1cfa6eb1d073bed93c9746e4f9c47a53b20f8f4c255ece3f88c90852ad3181dc2d - languageName: node - linkType: hard - -"@babel/plugin-transform-literals@npm:^7.23.3": +"@babel/plugin-transform-literals@npm:^7.23.3, @babel/plugin-transform-literals@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-literals@npm:7.24.7" dependencies: @@ -1902,18 +1439,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-literals@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-literals@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/a27cc7d565ee57b5a2bf136fa889c5c2f5988545ae7b3b2c83a7afe5dd37dfac80dca88b1c633c65851ce6af7d2095c04c01228657ce0198f918e64b5ccd01fa - languageName: node - linkType: hard - -"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4": +"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4, @babel/plugin-transform-logical-assignment-operators@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.7" dependencies: @@ -1925,19 +1451,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/98a2e0843ddfe51443c1bfcf08ba40ad8856fd4f8e397b392a5390a54f257c8c1b9a99d8ffc0fc7e8c55cce45e2cd9c2795a4450303f48f501bcbd662de44554 - languageName: node - linkType: hard - -"@babel/plugin-transform-member-expression-literals@npm:^7.23.3": +"@babel/plugin-transform-member-expression-literals@npm:^7.23.3, @babel/plugin-transform-member-expression-literals@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.7" dependencies: @@ -1948,68 +1462,32 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-member-expression-literals@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/2af731d02aa4c757ef80c46df42264128cbe45bfd15e1812d1a595265b690a44ad036041c406a73411733540e1c4256d8174705ae6b8cfaf757fc175613993fd - languageName: node - linkType: hard - -"@babel/plugin-transform-modules-amd@npm:^7.13.0, @babel/plugin-transform-modules-amd@npm:^7.23.3": - version: 7.24.7 - resolution: "@babel/plugin-transform-modules-amd@npm:7.24.7" - dependencies: - "@babel/helper-module-transforms": "npm:^7.24.7" - "@babel/helper-plugin-utils": "npm:^7.24.7" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/6df7de7fce34117ca4b2fa07949b12274c03668cbfe21481c4037b6300796d50ae40f4f170527b61b70a67f26db906747797e30dbd0d9809a441b6e220b5728f - languageName: node - linkType: hard - -"@babel/plugin-transform-modules-amd@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1" - dependencies: - "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/71fd04e5e7026e6e52701214b1e9f7508ba371b757e5075fbb938a79235ed66a54ce65f89bb92b59159e9f03f01b392e6c4de6d255b948bec975a90cfd6809ef - languageName: node - linkType: hard - -"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3": +"@babel/plugin-transform-modules-amd@npm:^7.13.0, @babel/plugin-transform-modules-amd@npm:^7.23.3, @babel/plugin-transform-modules-amd@npm:^7.24.1": version: 7.24.7 - resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.7" + resolution: "@babel/plugin-transform-modules-amd@npm:7.24.7" dependencies: "@babel/helper-module-transforms": "npm:^7.24.7" "@babel/helper-plugin-utils": "npm:^7.24.7" - "@babel/helper-simple-access": "npm:^7.24.7" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/9442292b3daf6a5076cdc3c4c32bf423bda824ccaeb0dd0dc8b3effaa1fecfcb0130ae6e647fef12a5d5ff25bcc99a0d6bfc6d24a7525345e1bcf46fcdf81752 + checksum: 10c0/6df7de7fce34117ca4b2fa07949b12274c03668cbfe21481c4037b6300796d50ae40f4f170527b61b70a67f26db906747797e30dbd0d9809a441b6e220b5728f languageName: node linkType: hard -"@babel/plugin-transform-modules-commonjs@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1" +"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3, @babel/plugin-transform-modules-commonjs@npm:^7.24.1": + version: 7.24.7 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.7" dependencies: - "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-simple-access": "npm:^7.22.5" + "@babel/helper-module-transforms": "npm:^7.24.7" + "@babel/helper-plugin-utils": "npm:^7.24.7" + "@babel/helper-simple-access": "npm:^7.24.7" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/efb3ea2047604a7eb44a9289311ebb29842fe6510ff8b66a77a60440448c65e1312a60dc48191ed98246bdbd163b5b6f3348a0669bcc0e3809e69c7c776b20fa + checksum: 10c0/9442292b3daf6a5076cdc3c4c32bf423bda824ccaeb0dd0dc8b3effaa1fecfcb0130ae6e647fef12a5d5ff25bcc99a0d6bfc6d24a7525345e1bcf46fcdf81752 languageName: node linkType: hard -"@babel/plugin-transform-modules-systemjs@npm:^7.23.9": +"@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.7" dependencies: @@ -2023,21 +1501,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-modules-systemjs@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1" - dependencies: - "@babel/helper-hoist-variables": "npm:^7.22.5" - "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-validator-identifier": "npm:^7.22.20" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/38145f8abe8a4ce2b41adabe5d65eb7bd54a139dc58e2885fec975eb5cf247bd938c1dd9f09145c46dbe57d25dd0ef7f00a020e5eb0cbe8195b2065d51e2d93d - languageName: node - linkType: hard - -"@babel/plugin-transform-modules-umd@npm:^7.23.3": +"@babel/plugin-transform-modules-umd@npm:^7.23.3, @babel/plugin-transform-modules-umd@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-modules-umd@npm:7.24.7" dependencies: @@ -2049,18 +1513,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-modules-umd@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1" - dependencies: - "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/14c90c58562b54e17fe4a8ded3f627f9a993648f8378ef00cb2f6c34532032b83290d2ad54c7fff4f0c2cd49091bda780f8cc28926ec4b77a6c2141105a2e699 - languageName: node - linkType: hard - "@babel/plugin-transform-named-capturing-groups-regex@npm:^7.22.5": version: 7.24.7 resolution: "@babel/plugin-transform-named-capturing-groups-regex@npm:7.24.7" @@ -2073,7 +1525,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-new-target@npm:^7.23.3": +"@babel/plugin-transform-new-target@npm:^7.23.3, @babel/plugin-transform-new-target@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-new-target@npm:7.24.7" dependencies: @@ -2084,18 +1536,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-new-target@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-new-target@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/c4cabe628163855f175a8799eb73d692b6f1dc347aae5022af0c253f80c92edb962e48ddccc98b691eff3d5d8e53c9a8f10894c33ba4cebc2e2f8f8fe554fb7a - languageName: node - linkType: hard - -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4": +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.7" dependencies: @@ -2107,18 +1548,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/c8532951506fb031287280cebeef10aa714f8a7cea2b62a13c805f0e0af945ba77a7c87e4bbbe4c37fe973e0e5d5e649cfac7f0374f57efc54cdf9656362a392 - languageName: node - linkType: hard - "@babel/plugin-transform-numeric-separator@npm:^7.23.4, @babel/plugin-transform-numeric-separator@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.7" @@ -2156,7 +1585,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-object-super@npm:^7.23.3": +"@babel/plugin-transform-object-super@npm:^7.23.3, @babel/plugin-transform-object-super@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-object-super@npm:7.24.7" dependencies: @@ -2168,19 +1597,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-object-super@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-object-super@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-replace-supers": "npm:^7.24.1" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/d30e6b9e59a707efd7ed524fc0a8deeea046011a6990250f2e9280516683138e2d13d9c52daf41d78407bdab0378aef7478326f2a15305b773d851cb6e106157 - languageName: node - linkType: hard - -"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4": +"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4, @babel/plugin-transform-optional-catch-binding@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.7" dependencies: @@ -2192,19 +1609,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/68408b9ef772d9aa5dccf166c86dc4d2505990ce93e03dcfc65c73fb95c2511248e009ba9ccf5b96405fb85de1c16ad8291016b1cc5689ee4becb1e3050e0ae7 - languageName: node - linkType: hard - -"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.4, @babel/plugin-transform-optional-chaining@npm:^7.24.7": +"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.4, @babel/plugin-transform-optional-chaining@npm:^7.24.1, @babel/plugin-transform-optional-chaining@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.7" dependencies: @@ -2217,20 +1622,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/b4688795229c9e9ce978eccf979fe515eb4e8d864d2dcd696baa937c8db13e3d46cff664a3cd6119dfe60e261f5d359b10c6783effab7cc91d75d03ad7f43d05 - languageName: node - linkType: hard - -"@babel/plugin-transform-parameters@npm:^7.23.3, @babel/plugin-transform-parameters@npm:^7.24.7": +"@babel/plugin-transform-parameters@npm:^7.23.3, @babel/plugin-transform-parameters@npm:^7.24.1, @babel/plugin-transform-parameters@npm:^7.24.7": version: 7.24.7 resolution: "@babel/plugin-transform-parameters@npm:7.24.7" dependencies: @@ -2241,18 +1633,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-parameters@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-parameters@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/eee8d2f72d3ee0876dc8d85f949f4adf34685cfe36c814ebc20c96315f3891a53d43c764d636b939e34d55e6a6a4af9aa57ed0d7f9439eb5771a07277c669e55 - languageName: node - linkType: hard - -"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3": +"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3, @babel/plugin-transform-private-methods@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-private-methods@npm:7.24.7" dependencies: @@ -2264,19 +1645,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-private-methods@npm:7.24.1" - dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.24.1" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/d8e18587d2a8b71a795da5e8841b0e64f1525a99ad73ea8b9caa331bc271d69646e2e1e749fd634321f3df9d126070208ddac22a27ccf070566b2efb74fecd99 - languageName: node - linkType: hard - -"@babel/plugin-transform-private-property-in-object@npm:^7.23.4": +"@babel/plugin-transform-private-property-in-object@npm:^7.23.4, @babel/plugin-transform-private-property-in-object@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.7" dependencies: @@ -2290,21 +1659,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-private-property-in-object@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1" - dependencies: - "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.24.1" - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/33d2b9737de7667d7a1b704eef99bfecc6736157d9ea28c2e09010d5f25e33ff841c41d89a4430c5d47f4eb3384e24770fa0ec79600e1e38d6d16e2f9333b4b5 - languageName: node - linkType: hard - -"@babel/plugin-transform-property-literals@npm:^7.23.3": +"@babel/plugin-transform-property-literals@npm:^7.23.3, @babel/plugin-transform-property-literals@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-property-literals@npm:7.24.7" dependencies: @@ -2315,17 +1670,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-property-literals@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-property-literals@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/3bf3e01f7bb8215a8b6d0081b6f86fea23e3a4543b619e059a264ede028bc58cdfb0acb2c43271271915a74917effa547bc280ac636a9901fa9f2fb45623f87e - languageName: node - linkType: hard - "@babel/plugin-transform-react-display-name@npm:^7.24.1": version: 7.24.1 resolution: "@babel/plugin-transform-react-display-name@npm:7.24.1" @@ -2397,7 +1741,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-regenerator@npm:^7.23.3": +"@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-regenerator@npm:7.24.7" dependencies: @@ -2409,19 +1753,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-regenerator@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-regenerator@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - regenerator-transform: "npm:^0.15.2" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/0a333585d7c0b38d31cc549d0f3cf7c396d1d50b6588a307dc58325505ddd4f5446188bc536c4779431b396251801b3f32d6d8e87db8274bc84e8c41950737f7 - languageName: node - linkType: hard - -"@babel/plugin-transform-reserved-words@npm:^7.23.3": +"@babel/plugin-transform-reserved-words@npm:^7.23.3, @babel/plugin-transform-reserved-words@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-reserved-words@npm:7.24.7" dependencies: @@ -2432,17 +1764,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-reserved-words@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/936d6e73cafb2cbb495f6817c6f8463288dbc9ab3c44684b931ebc1ece24f0d55dfabc1a75ba1de5b48843d0fef448dcfdbecb8485e4014f8f41d0d1440c536f - languageName: node - linkType: hard - "@babel/plugin-transform-runtime@npm:7.24.0": version: 7.24.0 resolution: "@babel/plugin-transform-runtime@npm:7.24.0" @@ -2475,7 +1796,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.23.3": +"@babel/plugin-transform-shorthand-properties@npm:^7.23.3, @babel/plugin-transform-shorthand-properties@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.7" dependencies: @@ -2486,18 +1807,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/8273347621183aada3cf1f3019d8d5f29467ba13a75b72cb405bc7f23b7e05fd85f4edb1e4d9f0103153dddb61826a42dc24d466480d707f8932c1923a4c25fa - languageName: node - linkType: hard - -"@babel/plugin-transform-spread@npm:^7.23.3": +"@babel/plugin-transform-spread@npm:^7.23.3, @babel/plugin-transform-spread@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-spread@npm:7.24.7" dependencies: @@ -2509,19 +1819,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-spread@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-spread@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/50a0302e344546d57e5c9f4dea575f88e084352eeac4e9a3e238c41739eef2df1daf4a7ebbb3ccb7acd3447f6a5ce9938405f98bf5f5583deceb8257f5a673c9 - languageName: node - linkType: hard - -"@babel/plugin-transform-sticky-regex@npm:^7.23.3": +"@babel/plugin-transform-sticky-regex@npm:^7.23.3, @babel/plugin-transform-sticky-regex@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.7" dependencies: @@ -2532,18 +1830,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-sticky-regex@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/786fe2ae11ef9046b9fa95677935abe495031eebf1274ad03f2054a20adea7b9dbd00336ac0b143f7924bc562e5e09793f6e8613607674b97e067d4838ccc4a0 - languageName: node - linkType: hard - -"@babel/plugin-transform-template-literals@npm:^7.23.3": +"@babel/plugin-transform-template-literals@npm:^7.23.3, @babel/plugin-transform-template-literals@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-template-literals@npm:7.24.7" dependencies: @@ -2554,18 +1841,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-template-literals@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/f73bcda5488eb81c6e7a876498d9e6b72be32fca5a4d9db9053491a2d1300cd27b889b463fd2558f3cd5826a85ed00f61d81b234aa55cb5a0abf1b6fa1bd5026 - languageName: node - linkType: hard - -"@babel/plugin-transform-typeof-symbol@npm:^7.23.3": +"@babel/plugin-transform-typeof-symbol@npm:^7.23.3, @babel/plugin-transform-typeof-symbol@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.7" dependencies: @@ -2576,18 +1852,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-typeof-symbol@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/d392f549bfd13414f59feecdf3fb286f266a3eb9107a9de818e57907bda56eed08d1f6f8e314d09bf99252df026a7fd4d5df839acd45078a777abcebaa9a8593 - languageName: node - linkType: hard - -"@babel/plugin-transform-typescript@npm:^7.13.0": +"@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-typescript@npm:7.24.7" dependencies: @@ -2601,21 +1866,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-typescript@npm:^7.24.1": - version: 7.24.4 - resolution: "@babel/plugin-transform-typescript@npm:7.24.4" - dependencies: - "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.24.4" - "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-typescript": "npm:^7.24.1" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/fa6625046f219cdc75061025c8031ada75ef631b137f1442e3d0054ba4e63548eb12cf55e2e1f442c889aa5fdd76d0d0b7904fdf812ce4c38748446227acc798 - languageName: node - linkType: hard - -"@babel/plugin-transform-unicode-escapes@npm:^7.23.3": +"@babel/plugin-transform-unicode-escapes@npm:^7.23.3, @babel/plugin-transform-unicode-escapes@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.7" dependencies: @@ -2626,18 +1877,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-escapes@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/67a72a1ed99639de6a93aead35b1993cb3f0eb178a8991fcef48732c38c9f0279c85bbe1e2e2477b85afea873e738ff0955a35057635ce67bc149038e2d8a28e - languageName: node - linkType: hard - -"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3": +"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3, @babel/plugin-transform-unicode-property-regex@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.7" dependencies: @@ -2649,19 +1889,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1" - dependencies: - "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/d9d9752df7d51bf9357c0bf3762fe16b8c841fca9ecf4409a16f15ccc34be06e8e71abfaee1251b7d451227e70e6b873b36f86b090efdb20f6f7de5fdb6c7a05 - languageName: node - linkType: hard - -"@babel/plugin-transform-unicode-regex@npm:^7.23.3": +"@babel/plugin-transform-unicode-regex@npm:^7.23.3, @babel/plugin-transform-unicode-regex@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.7" dependencies: @@ -2673,19 +1901,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1" - dependencies: - "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/6046ab38e5d14ed97dbb921bd79ac1d7ad9d3286da44a48930e980b16896db2df21e093563ec3c916a630dc346639bf47c5924a33902a06fe3bbb5cdc7ef5f2f - languageName: node - linkType: hard - -"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3": +"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3, @babel/plugin-transform-unicode-sets-regex@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.7" dependencies: @@ -2697,18 +1913,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1": - version: 7.24.1 - resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1" - dependencies: - "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.24.0" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 10c0/b6c1f6b90afeeddf97e5713f72575787fcb7179be7b4c961869bfbc66915f66540dc49da93e4369da15596bd44b896d1eb8a50f5e1fd907abd7a1a625901006b - languageName: node - linkType: hard - "@babel/polyfill@npm:^7.11.5": version: 7.12.1 resolution: "@babel/polyfill@npm:7.12.1" @@ -3034,17 +2238,6 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.15": - version: 7.24.0 - resolution: "@babel/template@npm:7.24.0" - dependencies: - "@babel/code-frame": "npm:^7.23.5" - "@babel/parser": "npm:^7.24.0" - "@babel/types": "npm:^7.24.0" - checksum: 10c0/9d3dd8d22fe1c36bc3bdef6118af1f4b030aaf6d7d2619f5da203efa818a2185d717523486c111de8d99a8649ddf4bbf6b2a7a64962d8411cf6a8fa89f010e54 - languageName: node - linkType: hard - "@babel/template@npm:^7.23.9, @babel/template@npm:^7.24.0, @babel/template@npm:^7.24.7": version: 7.24.7 resolution: "@babel/template@npm:7.24.7" @@ -3056,25 +2249,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.4.5": - version: 7.24.1 - resolution: "@babel/traverse@npm:7.24.1" - dependencies: - "@babel/code-frame": "npm:^7.24.1" - "@babel/generator": "npm:^7.24.1" - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-hoist-variables": "npm:^7.22.5" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.24.1" - "@babel/types": "npm:^7.24.0" - debug: "npm:^4.3.1" - globals: "npm:^11.1.0" - checksum: 10c0/c087b918f6823776537ba246136c70e7ce0719fc05361ebcbfd16f4e6f2f6f1f8f4f9167f1d9b675f27d12074839605189cc9d689de20b89a85e7c140f23daab - languageName: node - linkType: hard - -"@babel/traverse@npm:^7.24.7": +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.4.5": version: 7.24.7 resolution: "@babel/traverse@npm:7.24.7" dependencies: @@ -3092,7 +2267,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.24.7 resolution: "@babel/types@npm:7.24.7" dependencies: @@ -3103,17 +2278,6 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.22.15, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4": - version: 7.24.0 - resolution: "@babel/types@npm:7.24.0" - dependencies: - "@babel/helper-string-parser": "npm:^7.23.4" - "@babel/helper-validator-identifier": "npm:^7.22.20" - to-fast-properties: "npm:^2.0.0" - checksum: 10c0/777a0bb5dbe038ca4c905fdafb1cdb6bdd10fe9d63ce13eca0bd91909363cbad554a53dc1f902004b78c1dcbc742056f877f2c99eeedff647333b1fadf51235d - languageName: node - linkType: hard - "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -6125,7 +5289,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-links@workspace:addons/links" dependencies: - "@storybook/csf": "npm:0.1.11" + "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" "@storybook/global": "npm:^5.0.0" fs-extra: "npm:^11.1.0" ts-dedent: "npm:^2.0.0" @@ -6352,7 +5516,7 @@ __metadata: resolution: "@storybook/blocks@workspace:lib/blocks" dependencies: "@storybook/addon-actions": "workspace:*" - "@storybook/csf": "npm:0.1.11" + "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/react": "workspace:*" @@ -6505,7 +5669,7 @@ __metadata: "@babel/preset-env": "npm:^7.24.4" "@babel/types": "npm:^7.24.0" "@storybook/core": "workspace:*" - "@storybook/csf": "npm:0.1.11" + "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" "@types/cross-spawn": "npm:^6.0.2" "@types/jscodeshift": "npm:^0.11.10" ansi-regex: "npm:^6.0.1" @@ -6599,7 +5763,7 @@ __metadata: "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" - "@storybook/csf": "npm:0.1.11" + "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" "@storybook/docs-mdx": "npm:4.0.0-next.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -6735,12 +5899,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.11": - version: 0.1.11 - resolution: "@storybook/csf@npm:0.1.11" +"@storybook/csf@npm:0.1.12--canary.95.1b1fb52.0": + version: 0.1.12--canary.95.1b1fb52.0 + resolution: "@storybook/csf@npm:0.1.12--canary.95.1b1fb52.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/c5329fc13e7d762049b5c91df1bc1c0e510a1a898c401b72b68f1ff64139a85ab64a92f8e681d2fcb226c0a4a55d0f23b569b2bdb517e0f067bd05ea46228356 + checksum: 10c0/4a1547ebe656f6ba6e2f9fda07202f6d8eb662651170d286b4d5036b8588afcbed5a026a6b71d975190619e3521db3fdec5eb7ee8b0b1bd08bbc9e12041af2aa languageName: node linkType: hard @@ -7345,7 +6509,7 @@ __metadata: "@storybook/codemod": "workspace:*" "@storybook/core": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.11" + "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" "@storybook/csf-plugin": "workspace:*" "@storybook/ember": "workspace:*" "@storybook/eslint-config-storybook": "npm:^4.0.0" @@ -7481,7 +6645,7 @@ __metadata: resolution: "@storybook/server@workspace:renderers/server" dependencies: "@storybook/components": "workspace:^" - "@storybook/csf": "npm:0.1.11" + "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:^" "@storybook/preview-api": "workspace:^" @@ -7500,7 +6664,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.11" + "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" prettier: "npm:^3.1.1" @@ -7606,7 +6770,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/test@workspace:lib/test" dependencies: - "@storybook/csf": "npm:0.1.11" + "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" "@storybook/instrumenter": "workspace:*" "@testing-library/dom": "npm:10.1.0" "@testing-library/jest-dom": "npm:6.4.5" @@ -10113,16 +9277,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": - version: 8.11.3 - resolution: "acorn@npm:8.11.3" - bin: - acorn: bin/acorn - checksum: 10c0/3ff155f8812e4a746fee8ecff1f227d527c4c45655bb1fad6347c3cb58e46190598217551b1500f18542d2bbe5c87120cb6927f5a074a59166fbdd9468f0a299 - languageName: node - linkType: hard - -"acorn@npm:^8.12.1": +"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": version: 8.12.1 resolution: "acorn@npm:8.12.1" bin: @@ -10813,7 +9968,7 @@ __metadata: languageName: node linkType: hard -"available-typed-arrays@npm:^1.0.6, available-typed-arrays@npm:^1.0.7": +"available-typed-arrays@npm:^1.0.7": version: 1.0.7 resolution: "available-typed-arrays@npm:1.0.7" dependencies: @@ -11340,16 +10495,7 @@ __metadata: languageName: node linkType: hard -"braces@npm:^3.0.2, braces@npm:~3.0.2": - version: 3.0.2 - resolution: "braces@npm:3.0.2" - dependencies: - fill-range: "npm:^7.0.1" - checksum: 10c0/321b4d675791479293264019156ca322163f02dc06e3c4cab33bb15cd43d80b51efef69b0930cfde3acd63d126ebca24cd0544fa6f261e093a0fb41ab9dda381 - languageName: node - linkType: hard - -"braces@npm:^3.0.3": +"braces@npm:^3.0.2, braces@npm:^3.0.3, braces@npm:~3.0.2": version: 3.0.3 resolution: "braces@npm:3.0.3" dependencies: @@ -11947,20 +11093,13 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001591": +"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001591": version: 1.0.30001641 resolution: "caniuse-lite@npm:1.0.30001641" checksum: 10c0/a065b641cfcc84b36955ee909bfd7313ad103d6a299f0fd261e0e4160e8f1cec79d685c5a9f11097a77687cf47154eddb8133163f2a34bcb8d73c45033a014d2 languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001587": - version: 1.0.30001598 - resolution: "caniuse-lite@npm:1.0.30001598" - checksum: 10c0/7d4a1eecfe9e26a4ee5414dbcbf46dd02910d93dd6458ffe1ae146b7c2159af9bf159d7d75d897a1b72a62c1b7f5cef46b4c1f315574a11b0529c7d06bc55849 - languageName: node - linkType: hard - "case-sensitive-paths-webpack-plugin@npm:^2.4.0": version: 2.4.0 resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0" @@ -15676,15 +14815,6 @@ __metadata: languageName: node linkType: hard -"fill-range@npm:^7.0.1": - version: 7.0.1 - resolution: "fill-range@npm:7.0.1" - dependencies: - to-regex-range: "npm:^5.0.1" - checksum: 10c0/7cdad7d426ffbaadf45aeb5d15ec675bbd77f7597ad5399e3d2766987ed20bda24d5fac64b3ee79d93276f5865608bb22344a26b9b1ae6c4d00bd94bf611623f - languageName: node - linkType: hard - "fill-range@npm:^7.1.1": version: 7.1.1 resolution: "fill-range@npm:7.1.1" @@ -16918,7 +16048,7 @@ __metadata: languageName: node linkType: hard -"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.1, has-tostringtag@npm:^1.0.2": +"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.2": version: 1.0.2 resolution: "has-tostringtag@npm:1.0.2" dependencies: @@ -29394,20 +28524,7 @@ __metadata: languageName: node linkType: hard -"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9": - version: 1.1.14 - resolution: "which-typed-array@npm:1.1.14" - dependencies: - available-typed-arrays: "npm:^1.0.6" - call-bind: "npm:^1.0.5" - for-each: "npm:^0.3.3" - gopd: "npm:^1.0.1" - has-tostringtag: "npm:^1.0.1" - checksum: 10c0/0960f1e77807058819451b98c51d4cd72031593e8de990b24bd3fc22e176f5eee22921d68d852297c786aec117689f0423ed20aa4fde7ce2704d680677891f56 - languageName: node - linkType: hard - -"which-typed-array@npm:^1.1.15": +"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9": version: 1.1.15 resolution: "which-typed-array@npm:1.1.15" dependencies: From cc72801b9ba99a4243841a5144588db927b751af Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 16 Jul 2024 16:53:46 +0200 Subject: [PATCH 021/105] add missing `storyGlobals` to test object --- code/frameworks/angular/src/client/decorators.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/frameworks/angular/src/client/decorators.test.ts b/code/frameworks/angular/src/client/decorators.test.ts index 2a1559456e1b..16feb942417e 100644 --- a/code/frameworks/angular/src/client/decorators.test.ts +++ b/code/frameworks/angular/src/client/decorators.test.ts @@ -18,6 +18,7 @@ const defaultContext: Addon_StoryContext = { args: {}, argTypes: {}, globals: {}, + storyGlobals: {}, hooks: {}, loaded: {}, originalStoryFn: vi.fn(), From ce5b6816b00e701d736c5e65872ff100030557bc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 11:36:12 +0200 Subject: [PATCH 022/105] add core templates to ui storybook --- code/.storybook/main.ts | 4 ++++ code/.storybook/preview.tsx | 2 ++ 2 files changed, 6 insertions(+) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 962bef2124da..b66b33f3850d 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -8,6 +8,10 @@ const managerApiPath = path.join(__dirname, '../core/src/manager-api'); const config: StorybookConfig = { stories: [ + { + directory: '../core/template', + titlePrefix: '@core', + }, { directory: '../core/src/manager', titlePrefix: '@manager', diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index e1c81fe960e7..afc09eb2863c 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -15,6 +15,8 @@ import type { PreviewWeb } from 'storybook/internal/preview-api'; import type { ReactRenderer } from '@storybook/react'; import type { Channel } from 'storybook/internal/channels'; +import '../renderers/react/template/components'; + import { DocsContext } from '@storybook/blocks'; import { DocsPageWrapper } from '../lib/blocks/src/components'; From add0674dbd1b3d7dff11c67c0c5f8815649ed653 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 12:13:25 +0200 Subject: [PATCH 023/105] remap core template stories a little --- code/.storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index b66b33f3850d..4f7844744083 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -9,7 +9,7 @@ const managerApiPath = path.join(__dirname, '../core/src/manager-api'); const config: StorybookConfig = { stories: [ { - directory: '../core/template', + directory: '../core/template/stories', titlePrefix: '@core', }, { From ef8c846f49844a4f2e996cc7eaa3fa80111ff117 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 12:34:10 +0200 Subject: [PATCH 024/105] add extra initialGlobals & globalTypes --- code/.storybook/preview.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index afc09eb2863c..8c78893e5c72 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -314,4 +314,11 @@ export const globalTypes = { ], }, }, + foo: { defaultValue: 'fooDefaultValue' }, + bar: { defaultValue: 'barDefaultValue' }, +}; + +export const initialGlobals = { + foo: 'fooValue', + baz: 'bazValue', }; From 20220e8c87517ca25ef8bbf059861b7cf5e47af3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 12:41:56 +0200 Subject: [PATCH 025/105] fix mapping --- code/.storybook/main.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 4f7844744083..decba7a66196 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -10,35 +10,35 @@ const config: StorybookConfig = { stories: [ { directory: '../core/template/stories', - titlePrefix: '@core', + titlePrefix: 'core', }, { directory: '../core/src/manager', - titlePrefix: '@manager', + titlePrefix: 'manager', }, { directory: '../core/src/preview-api', - titlePrefix: '@preview', + titlePrefix: 'preview', }, { directory: '../core/src/components', - titlePrefix: '@components', + titlePrefix: 'components', }, { directory: '../lib/blocks/src', - titlePrefix: '@blocks', + titlePrefix: 'blocks', }, { directory: '../addons/controls/src', - titlePrefix: '@addons/controls', + titlePrefix: 'addons/controls', }, { directory: '../addons/onboarding/src', - titlePrefix: '@addons/onboarding', + titlePrefix: 'addons/onboarding', }, { directory: '../addons/interactions/src', - titlePrefix: '@addons/interactions', + titlePrefix: 'addons/interactions', }, ], addons: [ From 20a82fa657aee26f26f512dc149cad3958a1bdd2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 13:20:22 +0200 Subject: [PATCH 026/105] fix --- code/.storybook/preview.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 8c78893e5c72..0fffe7acdb8e 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -20,6 +20,7 @@ import '../renderers/react/template/components'; import { DocsContext } from '@storybook/blocks'; import { DocsPageWrapper } from '../lib/blocks/src/components'; +import type { PartialStoryFn, StoryContext } from 'storybook/internal/types'; const { document } = global; @@ -135,6 +136,7 @@ export const loaders = [ } return { docsContext }; }, + async () => ({ projectValue: 2 }), ]; export const decorators = [ @@ -259,9 +261,20 @@ export const decorators = [ ); }, + (storyFn: PartialStoryFn, context: StoryContext) => { + if (context.parameters.useProjectDecorator) + return storyFn({ args: { ...context.args, text: `project ${context.args.text}` } }); + return storyFn(); + }, ]; export const parameters = { + projectParameter: 'projectParameter', + storyObject: { + a: 'project', + b: 'project', + c: 'project', + }, options: { storySort: (a, b) => a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }), From b2c4b40c8dfa6af699b57d45936be8f87a0e6c27 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 14:42:58 +0200 Subject: [PATCH 027/105] use the feature ourselves for theme --- code/.storybook/main.ts | 2 +- code/.storybook/preview.tsx | 17 ++++++++++++++--- .../src/components/Interaction.stories.tsx | 5 +---- .../components/InteractionsPanel.stories.tsx | 6 ++---- .../components/components/tabs/tabs.stories.tsx | 2 +- .../components/layout/Layout.stories.tsx | 13 ++++--------- .../mobile/about/MobileAbout.stories.tsx | 4 ++-- .../navigation/MobileNavigation.stories.tsx | 3 +-- .../components/preview/Iframe.stories.tsx | 2 +- .../components/sidebar/Explorer.stories.tsx | 3 ++- .../manager/components/sidebar/Tree.stories.tsx | 4 ++-- code/core/src/preview-api/Errors.stories.tsx | 2 +- code/lib/blocks/src/examples/Button.stories.tsx | 4 ++-- .../ButtonWithMetaDescriptionAsBoth.stories.tsx | 4 ++-- ...ttonWithMetaDescriptionAsComment.stories.tsx | 6 ++---- ...onWithMetaDescriptionAsParameter.stories.tsx | 4 ++-- .../ButtonWithMetaSubtitleAsBoth.stories.tsx | 4 ++-- ...hMetaSubtitleAsComponentSubtitle.stories.tsx | 4 ++-- ...onWithMetaSubtitleAsDocsSubtitle.stories.tsx | 4 ++-- .../src/examples/StoryParameters.stories.tsx | 2 +- 20 files changed, 47 insertions(+), 48 deletions(-) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index decba7a66196..1adc341cd27a 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -85,7 +85,7 @@ const config: StorybookConfig = { sourcemap: process.env.CI !== 'true', }, }), - logLevel: 'debug', + // logLevel: 'debug', }; export default config; diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 0fffe7acdb8e..8174c4cd85f1 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -10,7 +10,11 @@ import { styled, useTheme, } from 'storybook/internal/theming'; -import { useArgs, DocsContext as DocsContextProps } from 'storybook/internal/preview-api'; +import { + useArgs, + DocsContext as DocsContextProps, + useGlobals, +} from 'storybook/internal/preview-api'; import type { PreviewWeb } from 'storybook/internal/preview-api'; import type { ReactRenderer } from '@storybook/react'; import type { Channel } from 'storybook/internal/channels'; @@ -163,10 +167,16 @@ 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 }) => { + (StoryFn, { globals, parameters, playFunction, args, userGlobals, storyGlobals, ...rest }) => { + console.log({ rest, userGlobals, globals }); const defaultTheme = isChromatic() && !playFunction && args.autoplay !== true ? 'stacked' : 'light'; - const theme = globals.theme || parameters.theme || defaultTheme; + const theme = + storyGlobals.theme || userGlobals.theme || globals.theme || parameters.theme || defaultTheme; + + const [x, y] = useGlobals(); + + console.log({ x, y }); switch (theme) { case 'side-by-side': { @@ -326,6 +336,7 @@ export const globalTypes = { { value: 'stacked', icon: 'bottombar', title: 'stacked' }, ], }, + // defaultValue: 'light', }, foo: { defaultValue: 'fooDefaultValue' }, bar: { defaultValue: 'barDefaultValue' }, diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx index 4486c83ff664..731d5dca8f0b 100644 --- a/code/addons/interactions/src/components/Interaction.stories.tsx +++ b/code/addons/interactions/src/components/Interaction.stories.tsx @@ -54,10 +54,7 @@ export const Disabled: Story = { export const Hovered: Story = { ...Done, - parameters: { - // Set light theme to avoid stacked theme in chromatic - theme: 'light', - }, + globals: { theme: 'light' }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.hover(canvas.getByRole('button')); diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index 8f0e48faab58..3d673e2605b0 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -33,10 +33,8 @@ const meta = { ), ], - parameters: { - layout: 'fullscreen', - theme: 'light', // stacked will break interactions - }, + parameters: { layout: 'fullscreen' }, + globals: { theme: 'light' }, args: { calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])), controls: SubnavStories.args.controls, diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx index f19922a91ef8..303011c7cb3d 100644 --- a/code/core/src/components/components/tabs/tabs.stories.tsx +++ b/code/core/src/components/components/tabs/tabs.stories.tsx @@ -181,9 +181,9 @@ export const StatefulDynamicWithOpenTooltip = { defaultViewport: 'sized', viewports: customViewports, }, - theme: 'light', chromatic: { viewports: [380] }, }, + globals: { theme: 'light' }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/code/core/src/manager/components/layout/Layout.stories.tsx b/code/core/src/manager/components/layout/Layout.stories.tsx index 53f8e54b0d15..7240c364b50b 100644 --- a/code/core/src/manager/components/layout/Layout.stories.tsx +++ b/code/core/src/manager/components/layout/Layout.stories.tsx @@ -63,10 +63,8 @@ const meta = { setManagerLayoutState: fn(), hasTab: false, }, - parameters: { - theme: 'light', - layout: 'fullscreen', - }, + globals: { theme: 'light' }, + parameters: { layout: 'fullscreen' }, decorators: [ MobileNavigationStoriesMeta.decorators[0] as any, (storyFn) => ( @@ -97,7 +95,7 @@ type Story = StoryObj; export const Desktop: Story = {}; export const Dark: Story = { - parameters: { theme: 'dark' }, + globals: { theme: 'dark' }, }; export const DesktopHorizontal: Story = { args: { @@ -127,10 +125,7 @@ export const Mobile = { }; export const MobileDark = { ...Mobile, - parameters: { - ...Mobile.parameters, - theme: 'dark', - }, + globals: { theme: 'dark' }, }; export const MobileDocs = { diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx index 465db469cde9..27a8c1197d43 100644 --- a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx +++ b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx @@ -19,9 +19,9 @@ const OpenAboutHelper = ({ children }: { children: any }) => { const meta = { component: MobileAbout, title: 'Mobile/About', + globals: { theme: 'light' }, parameters: { layout: 'fullscreen', - theme: 'light', viewport: { defaultViewport: 'mobile1', }, @@ -56,7 +56,7 @@ type Story = StoryObj; export const Default: Story = {}; export const Dark: Story = { - parameters: { theme: 'dark' }, + globals: { theme: 'dark' }, }; export const Closed: Story = { diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx index b67bf15a3e62..990e7748ed31 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx @@ -69,7 +69,6 @@ const meta = { ], parameters: { layout: 'fullscreen', - theme: 'light', viewport: { defaultViewport: 'mobile1', }, @@ -88,7 +87,7 @@ type Story = StoryObj; export const Default: Story = {}; export const Dark: Story = { - parameters: { theme: 'dark' }, + globals: { theme: 'dark' }, }; export const LongStoryName: Story = { diff --git a/code/core/src/manager/components/preview/Iframe.stories.tsx b/code/core/src/manager/components/preview/Iframe.stories.tsx index 8f542b029270..23a6b75de8d6 100644 --- a/code/core/src/manager/components/preview/Iframe.stories.tsx +++ b/code/core/src/manager/components/preview/Iframe.stories.tsx @@ -20,9 +20,9 @@ export default { }, }, }, - theme: 'light', chromatic: { viewports: [700] }, }, + globals: { theme: 'light' }, }; const style: CSSProperties = { diff --git a/code/core/src/manager/components/sidebar/Explorer.stories.tsx b/code/core/src/manager/components/sidebar/Explorer.stories.tsx index a430bb2bb4f0..813163595329 100644 --- a/code/core/src/manager/components/sidebar/Explorer.stories.tsx +++ b/code/core/src/manager/components/sidebar/Explorer.stories.tsx @@ -9,7 +9,8 @@ import { IconSymbols } from './IconSymbols'; export default { component: Explorer, title: 'Sidebar/Explorer', - parameters: { layout: 'fullscreen', theme: 'side-by-side' }, + globals: { theme: 'side-by-side' }, + parameters: { layout: 'fullscreen' }, decorators: [ RefStories.default.decorators[0], (storyFn: any) => ( diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx index b25e9878cc8a..7c5b4bc35785 100644 --- a/code/core/src/manager/components/sidebar/Tree.stories.tsx +++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx @@ -23,9 +23,9 @@ const meta = { component: Tree, title: 'Sidebar/Tree', excludeStories: /.*Data$/, + globals: { theme: 'light' }, parameters: { layout: 'fullscreen', - theme: 'light', viewport: { defaultViewport: 'sized', viewports: customViewports, @@ -64,7 +64,7 @@ export const Full: Story = { }; export const Dark: Story = { ...Full, - parameters: { theme: 'dark' }, + globals: { theme: 'dark' }, }; export const SingleStoryComponents: Story = { diff --git a/code/core/src/preview-api/Errors.stories.tsx b/code/core/src/preview-api/Errors.stories.tsx index c358c9eca1a2..53147f848611 100644 --- a/code/core/src/preview-api/Errors.stories.tsx +++ b/code/core/src/preview-api/Errors.stories.tsx @@ -39,8 +39,8 @@ export default { component: Component, parameters: { layout: 'fullscreen', - theme: 'light', }, + globals: { theme: 'light' }, title: 'Errors', args: { id: 'sb-errordisplay', diff --git a/code/lib/blocks/src/examples/Button.stories.tsx b/code/lib/blocks/src/examples/Button.stories.tsx index 597f5240ebfc..a7fac335a7c2 100644 --- a/code/lib/blocks/src/examples/Button.stories.tsx +++ b/code/lib/blocks/src/examples/Button.stories.tsx @@ -11,9 +11,9 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Stop *this* story from being stacked in Chromatic + globals: { theme: 'default' }, parameters: { - // Stop *this* story from being stacked in Chromatic - theme: 'default', // these are to test the deprecated features of the Description block notes: 'These are notes for the Button stories', info: 'This is info for the Button stories', diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx index d7da0af416c1..84596bac72e9 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx @@ -13,9 +13,9 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Stop *this* story from being stacked in Chromatic + globals: { theme: 'default' }, parameters: { - // Stop *this* story from being stacked in Chromatic - theme: 'default', docs: { description: { component: ` diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx index 152e5a886077..4fb7a5ad5d3a 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx @@ -12,10 +12,8 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, - parameters: { - // Stop *this* story from being stacked in Chromatic - theme: 'default', - }, + // Stop *this* story from being stacked in Chromatic + globals: { theme: 'default' }, } satisfies Meta; export default meta; diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx index 68fe7b3ecc2c..ce59432f86dd 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx @@ -7,9 +7,9 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Stop *this* story from being stacked in Chromatic + globals: { theme: 'default' }, parameters: { - // Stop *this* story from being stacked in Chromatic - theme: 'default', docs: { description: { component: ` diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx index 5b4235c07c57..ebae54acd1dd 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx @@ -7,9 +7,9 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Stop *this* story from being stacked in Chromatic + globals: { theme: 'default' }, parameters: { - // Stop *this* story from being stacked in Chromatic - theme: 'default', // this is to test the deprecated features of the Subtitle block componentSubtitle: 'This subtitle is set in parameters.componentSubtitle', docs: { diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx index 57a106340421..f4df18d010e6 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx @@ -7,9 +7,9 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Stop *this* story from being stacked in Chromatic + globals: { theme: 'default' }, parameters: { - // Stop *this* story from being stacked in Chromatic - theme: 'default', // this is to test the deprecated features of the Subtitle block componentSubtitle: 'This subtitle is set in parameters.componentSubtitle', }, diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx index 3df3110baf6c..971bd1d123db 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx @@ -7,9 +7,9 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, + // Stop *this* story from being stacked in Chromatic + globals: { theme: 'default' }, parameters: { - // Stop *this* story from being stacked in Chromatic - theme: 'default', docs: { subtitle: 'This subtitle is set in parameters.docs.subtitle', }, diff --git a/code/lib/blocks/src/examples/StoryParameters.stories.tsx b/code/lib/blocks/src/examples/StoryParameters.stories.tsx index 6bf3d81592a4..a8bc66c9e04b 100644 --- a/code/lib/blocks/src/examples/StoryParameters.stories.tsx +++ b/code/lib/blocks/src/examples/StoryParameters.stories.tsx @@ -5,7 +5,7 @@ const meta = { title: 'examples/Stories for the Story Block', component: SimpleSizeTest, // Stop *this* story from being stacked in Chromatic (we want the caller to stack though) - parameters: { theme: 'default' }, + globals: { theme: 'default' }, } satisfies Meta; export default meta; From f7b3464dbebcc780726e7821e6a2471b8a896495 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 14:43:28 +0200 Subject: [PATCH 028/105] remove defaultValue --- code/.storybook/preview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 8174c4cd85f1..9016b77f212f 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -336,7 +336,6 @@ export const globalTypes = { { value: 'stacked', icon: 'bottombar', title: 'stacked' }, ], }, - // defaultValue: 'light', }, foo: { defaultValue: 'fooDefaultValue' }, bar: { defaultValue: 'barDefaultValue' }, From c05dcb202e1da645b986edb88ab19be711bbde81 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 14:43:49 +0200 Subject: [PATCH 029/105] cleanup --- code/.storybook/preview.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 9016b77f212f..43ed72a1672d 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -167,17 +167,12 @@ 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, userGlobals, storyGlobals, ...rest }) => { - console.log({ rest, userGlobals, globals }); + (StoryFn, { globals, parameters, playFunction, args, userGlobals, storyGlobals }) => { const defaultTheme = isChromatic() && !playFunction && args.autoplay !== true ? 'stacked' : 'light'; const theme = storyGlobals.theme || userGlobals.theme || globals.theme || parameters.theme || defaultTheme; - const [x, y] = useGlobals(); - - console.log({ x, y }); - switch (theme) { case 'side-by-side': { return ( From 21cfe8b983a4930ed51688f95bcba78e51b7d3e4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 15:44:41 +0200 Subject: [PATCH 030/105] enhancements fro background & viewports --- code/.storybook/main.ts | 8 ++++ code/.storybook/preview.tsx | 1 + code/addons/backgrounds/src/helpers/index.ts | 4 ++ .../template/stories/globals.stories.ts | 36 ++++++++++++++ .../template/stories/grid.stories.ts | 6 +++ .../backgrounds/template/stories/img.ts | 2 + .../template/stories/parameters.stories.ts | 10 +--- .../template/stories/globals.stories.ts | 47 +++++++++++++++++++ .../template/stories/parameters.stories.ts | 6 ++- .../components/tabs/tabs.stories.tsx | 3 +- 10 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 code/addons/backgrounds/template/stories/globals.stories.ts create mode 100644 code/addons/backgrounds/template/stories/img.ts create mode 100644 code/addons/viewport/template/stories/globals.stories.ts diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 1adc341cd27a..9268ca9f9fd9 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -32,6 +32,14 @@ const config: StorybookConfig = { directory: '../addons/controls/src', titlePrefix: 'addons/controls', }, + { + directory: '../addons/viewport/template/stories', + titlePrefix: 'addons/viewport', + }, + { + directory: '../addons/backgrounds/template/stories', + titlePrefix: 'addons/backgrounds', + }, { directory: '../addons/onboarding/src', titlePrefix: 'addons/onboarding', diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 43ed72a1672d..07f0f0b27e6b 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -173,6 +173,7 @@ export const decorators = [ const theme = storyGlobals.theme || userGlobals.theme || globals.theme || parameters.theme || defaultTheme; + console.log({ storyGlobals, userGlobals, globals }); switch (theme) { case 'side-by-side': { return ( diff --git a/code/addons/backgrounds/src/helpers/index.ts b/code/addons/backgrounds/src/helpers/index.ts index 7670784449cd..d1d1d19956a1 100644 --- a/code/addons/backgrounds/src/helpers/index.ts +++ b/code/addons/backgrounds/src/helpers/index.ts @@ -25,6 +25,10 @@ export const getBackgroundColorByName = ( return currentSelectedValue; } + if (currentSelectedValue) { + return currentSelectedValue; + } + const defaultBackground = backgrounds.find((background) => background.name === defaultName); if (defaultBackground) { return defaultBackground.value; diff --git a/code/addons/backgrounds/template/stories/globals.stories.ts b/code/addons/backgrounds/template/stories/globals.stories.ts new file mode 100644 index 000000000000..95379977ea97 --- /dev/null +++ b/code/addons/backgrounds/template/stories/globals.stories.ts @@ -0,0 +1,36 @@ +import { global as globalThis } from '@storybook/global'; +import { img } from './img'; + +export default { + component: globalThis.Components.Button, + args: { + label: 'Click Me!', + }, + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Name = { + globals: { + backgrounds: { value: 'red' }, + }, +}; + +export const Hex = { + globals: { + backgrounds: { value: '#F99CB4' }, + }, +}; + +export const Gradient = { + globals: { + backgrounds: { value: 'linear-gradient(90deg, #CA005E 0%, #863783 50%, #112396)' }, + }, +}; + +export const Image = { + globals: { + backgrounds: { value: `#000 center / cover no-repeat url(data:image/svg+xml;base64,${img})` }, + }, +}; diff --git a/code/addons/backgrounds/template/stories/grid.stories.ts b/code/addons/backgrounds/template/stories/grid.stories.ts index 361c18752ebb..53e0f4235f28 100644 --- a/code/addons/backgrounds/template/stories/grid.stories.ts +++ b/code/addons/backgrounds/template/stories/grid.stories.ts @@ -1,10 +1,16 @@ import { global as globalThis } from '@storybook/global'; export default { + title: 'Grid', component: globalThis.Components.Button, args: { label: 'Click Me!', }, + globals: { + backgrounds: { + grid: true, + }, + }, parameters: { backgrounds: { grid: { diff --git a/code/addons/backgrounds/template/stories/img.ts b/code/addons/backgrounds/template/stories/img.ts new file mode 100644 index 000000000000..3c1d1b124343 --- /dev/null +++ b/code/addons/backgrounds/template/stories/img.ts @@ -0,0 +1,2 @@ +export const img = + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; diff --git a/code/addons/backgrounds/template/stories/parameters.stories.ts b/code/addons/backgrounds/template/stories/parameters.stories.ts index e6085424b99e..edcdea5a195f 100644 --- a/code/addons/backgrounds/template/stories/parameters.stories.ts +++ b/code/addons/backgrounds/template/stories/parameters.stories.ts @@ -1,4 +1,5 @@ import { global as globalThis } from '@storybook/global'; +import { img } from './img'; const COLORS = [ { name: 'red', value: '#FB001D' }, @@ -22,10 +23,6 @@ export default { }, }; -export const Basic = { - parameters: {}, -}; - export const Default = { parameters: { backgrounds: { @@ -37,7 +34,7 @@ export const Default = { export const StorySpecific = { parameters: { backgrounds: { - default: 'white', + default: 'pink', values: [ { name: 'white', value: '#F9F5F1' }, { name: 'pink', value: '#F99CB4' }, @@ -63,9 +60,6 @@ export const Gradient = { }, }; -const img = - 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; - export const Image = { parameters: { backgrounds: { diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts new file mode 100644 index 000000000000..63ac89f1ac35 --- /dev/null +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -0,0 +1,47 @@ +import { global as globalThis } from '@storybook/global'; +import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; + +const first = Object.keys(MINIMAL_VIEWPORTS)[0]; + +export default { + component: globalThis.Components.Button, + args: { + label: 'Click Me!', + }, + globals: {}, + parameters: { + viewport: { + viewports: MINIMAL_VIEWPORTS, + }, + chromatic: { disable: true }, + }, +}; + +export const Selected = { + globals: { viewport: first }, +}; + +export const Orientation = { + globals: { + viewport: first, + viewportRotated: true, + }, +}; + +export const Custom = { + globals: { viewport: 'phone' }, + parameters: { + viewport: { + viewports: { + phone: { + name: 'Phone Width', + styles: { + height: '600px', + width: '100vh', + }, + type: 'mobile', + }, + }, + }, + }, +}; diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts index 4aba0bd2970a..4ad8d6c0292b 100644 --- a/code/addons/viewport/template/stories/parameters.stories.ts +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -1,6 +1,8 @@ import { global as globalThis } from '@storybook/global'; import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; +const first = Object.keys(MINIMAL_VIEWPORTS)[0]; + export default { component: globalThis.Components.Button, args: { @@ -21,7 +23,7 @@ export const Basic = { export const Selected = { parameters: { viewport: { - defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0], + defaultViewport: first, }, }, }; @@ -29,7 +31,7 @@ export const Selected = { export const Orientation = { parameters: { viewport: { - defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0], + defaultViewport: first, defaultOrientation: 'landscape', }, }, diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx index 303011c7cb3d..e412fdea4b44 100644 --- a/code/core/src/components/components/tabs/tabs.stories.tsx +++ b/code/core/src/components/components/tabs/tabs.stories.tsx @@ -178,12 +178,11 @@ const customViewports = { export const StatefulDynamicWithOpenTooltip = { parameters: { viewport: { - defaultViewport: 'sized', viewports: customViewports, }, chromatic: { viewports: [380] }, }, - globals: { theme: 'light' }, + globals: { theme: 'light', viewport: 'sized' }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); From 04919f75f90e92129a21a8096682841cb88cfaa8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 16:56:40 +0200 Subject: [PATCH 031/105] fixes for viewports & backgrounds --- code/.storybook/preview.tsx | 7 +- .../src/containers/BackgroundSelector.tsx | 61 ++--- .../src/containers/GridSelector.tsx | 4 +- .../src/components/ToolbarMenuList.tsx | 17 +- .../src/components/ToolbarMenuListItem.tsx | 3 + code/addons/viewport/src/Tool.tsx | 252 +++++++++--------- .../template/stories/globals.stories.ts | 10 +- code/core/src/manager-api/root.tsx | 2 +- .../components/sidebar/Tree.stories.tsx | 4 +- 9 files changed, 188 insertions(+), 172 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 07f0f0b27e6b..2686f6cb8f31 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -10,11 +10,7 @@ import { styled, useTheme, } from 'storybook/internal/theming'; -import { - useArgs, - DocsContext as DocsContextProps, - useGlobals, -} from 'storybook/internal/preview-api'; +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 { Channel } from 'storybook/internal/channels'; @@ -173,7 +169,6 @@ export const decorators = [ const theme = storyGlobals.theme || userGlobals.theme || globals.theme || parameters.theme || defaultTheme; - console.log({ storyGlobals, userGlobals, globals }); switch (theme) { case 'side-by-side': { return ( diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx index 640b3856557a..2cbe2df583a6 100644 --- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx +++ b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx @@ -68,7 +68,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() { DEFAULT_BACKGROUNDS_CONFIG ); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const [globals, updateGlobals] = useGlobals(); + const [globals, updateGlobals, storyGlobals] = useGlobals(); const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value; @@ -97,37 +97,38 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() { return null; } + const isDisabled = BACKGROUNDS_PARAM_KEY in storyGlobals; + return ( - - { - return ( - { - if (selectedBackgroundColor !== selected) { - onBackgroundChange(selected); - } - onHide(); + { + return ( + { + if (selectedBackgroundColor !== selected) { + onBackgroundChange(selected); } - )} - /> - ); - }} - onVisibleChange={setIsTooltipVisible} + onHide(); + } + )} + /> + ); + }} + onVisibleChange={setIsTooltipVisible} + > + - - - - - + + + ); }); diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/code/addons/backgrounds/src/containers/GridSelector.tsx index 796c281c0f43..ead3e78b3bfd 100644 --- a/code/addons/backgrounds/src/containers/GridSelector.tsx +++ b/code/addons/backgrounds/src/containers/GridSelector.tsx @@ -8,7 +8,7 @@ import { GridIcon } from '@storybook/icons'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; export const GridSelector: FC = memo(function GridSelector() { - const [globals, updateGlobals] = useGlobals(); + const [globals, updateGlobals, storyGlobals] = useGlobals(); const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, { grid: { disable: false }, @@ -18,12 +18,14 @@ export const GridSelector: FC = memo(function GridSelector() { return null; } + const isDisabled = BACKGROUNDS_PARAM_KEY in storyGlobals; const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid || false; return ( updateGlobals({ diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx index dd092f809f40..b54f0df44e59 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx @@ -65,6 +65,7 @@ export const ToolbarMenuList: FC = withKeyboardCycle( const listItem = ToolbarMenuListItem({ ...item, currentValue, + disabled: isOverridden, onClick: () => { handleItemClick(item.value); onHide(); @@ -78,13 +79,15 @@ export const ToolbarMenuList: FC = withKeyboardCycle( closeOnOutsideClick onVisibleChange={setIsTooltipVisible} > - + { + + } ); } diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx index a56f415b2d6d..49bccdbc48b6 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx @@ -6,6 +6,7 @@ import type { ToolbarItem } from '../types'; export type ToolbarMenuListItemProps = { currentValue: string; onClick: () => void; + disabled?: boolean; } & ToolbarItem; export const ToolbarMenuListItem = ({ @@ -15,6 +16,7 @@ export const ToolbarMenuListItem = ({ icon, hideIcon, onClick, + disabled, currentValue, }: ToolbarMenuListItemProps) => { const Icon = icon && ; @@ -25,6 +27,7 @@ export const ToolbarMenuListItem = ({ right, title, icon, + disabled, onClick, }; diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index ff2bfd3d155c..900b2f78cee8 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -1,8 +1,8 @@ import type { ReactNode, FC } from 'react'; -import React, { useState, Fragment, useEffect, useRef, memo } from 'react'; +import React, { useState, Fragment, useEffect, useRef } from 'react'; import memoize from 'memoizerific'; -import { styled, Global, type Theme, withTheme } from 'storybook/internal/theming'; +import { styled, Global } from 'storybook/internal/theming'; import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components'; @@ -114,131 +114,137 @@ const getStyles = ( return isRotated ? flip(result) : result; }; -export const ViewportTool: FC = memo( - withTheme(({ theme }: { theme: Theme }) => { - const [globals, updateGlobals] = useGlobals(); - - const { - viewports = MINIMAL_VIEWPORTS, - defaultOrientation, - defaultViewport, - disable, - } = useParameter(PARAM_KEY, {}); - - const list = toList(viewports); - const api = useStorybookApi(); - const [isTooltipVisible, setIsTooltipVisible] = useState(false); - - if (defaultViewport && !list.find((i) => i.id === defaultViewport)) { - console.warn( - `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.` - ); +export const ViewportTool: FC = () => { + const [globals, updateGlobals, storyGlobals] = useGlobals(); + const isDisabled = PARAM_KEY in storyGlobals; + + const { + viewports = MINIMAL_VIEWPORTS, + defaultOrientation, + defaultViewport, + disable, + } = useParameter(PARAM_KEY, {}); + + const list = toList(viewports); + const api = useStorybookApi(); + const [isTooltipVisible, setIsTooltipVisible] = useState(false); + + if (defaultViewport && !list.find((i) => i.id === defaultViewport)) { + console.warn( + `Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.` + ); + } + + useEffect(() => { + registerShortcuts(api, globals, updateGlobals, Object.keys(viewports)); + }, [viewports, globals, globals.viewport, updateGlobals, api]); + + useEffect(() => { + if (isDisabled) { + return; } - useEffect(() => { - registerShortcuts(api, globals, updateGlobals, Object.keys(viewports)); - }, [viewports, globals, globals.viewport, updateGlobals, api]); - - useEffect(() => { - const defaultRotated = defaultOrientation === 'landscape'; - - if ( - (defaultViewport && globals.viewport !== defaultViewport) || - (defaultOrientation && globals.viewportRotated !== defaultRotated) - ) { - updateGlobals({ - viewport: defaultViewport, - viewportRotated: defaultRotated, - }); - } - // NOTE: we don't want to re-run this effect when `globals` changes - // due to https://github.com/storybookjs/storybook/issues/26334 - // - // Also, this *will* rerun every time you change story as the parameter is briefly `undefined`. - // This behaviour is intentional, if a bit of a happy accident in implementation. - // - // Ultimately this process of "locking in" a parameter value should be - // replaced by https://github.com/storybookjs/storybook/discussions/23347 - // or something similar. - // - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [defaultOrientation, defaultViewport, updateGlobals]); - - const item = - list.find((i) => i.id === globals.viewport) || - list.find((i) => i.id === defaultViewport) || - list.find((i) => i.default) || - responsiveViewport; - - const ref = useRef(); - - const styles = getStyles(ref.current, item.styles, globals.viewportRotated); - - useEffect(() => { - ref.current = styles; - }, [item]); - - if (disable || Object.entries(viewports).length === 0) { - return null; + const defaultRotated = defaultOrientation === 'landscape'; + + if ( + (defaultViewport && globals.viewport !== defaultViewport) || + (defaultOrientation && globals.viewportRotated !== defaultRotated) + ) { + updateGlobals({ + viewport: defaultViewport, + viewportRotated: defaultRotated, + }); } + // NOTE: we don't want to re-run this effect when `globals` changes + // due to https://github.com/storybookjs/storybook/issues/26334 + // + // Also, this *will* rerun every time you change story as the parameter is briefly `undefined`. + // This behavior is intentional, if a bit of a happy accident in implementation. + // + // Ultimately this process of "locking in" a parameter value should be + // replaced by https://github.com/storybookjs/storybook/discussions/23347 + // or something similar. + // + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [defaultOrientation, defaultViewport, updateGlobals]); + + const item = + list.find((i) => i.id === globals.viewport) || + list.find((i) => i.id === defaultViewport) || + list.find((i) => i.default) || + responsiveViewport; + + const ref = useRef(); + + const styles = getStyles(ref.current, item.styles, globals.viewportRotated); + + useEffect(() => { + ref.current = styles; + }, [item]); + + if (disable || Object.entries(viewports).length === 0) { + return null; + } - return ( - - ( - - )} - closeOnOutsideClick - onVisibleChange={setIsTooltipVisible} + return ( + + ( + + )} + closeOnOutsideClick + onVisibleChange={setIsTooltipVisible} + > + { + updateGlobals({ viewport: responsiveViewport.id }); + }} > - { - updateGlobals({ viewport: responsiveViewport.id }); + + {styles ? ( + + {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`} + + ) : null} + + + + {styles && ( + + )} + {styles && !isDisabled ? ( + + + {styles.width.replace('px', '')} + + { + updateGlobals({ viewportRotated: !globals.viewportRotated }); }} > - - {styles ? ( - - {globals.viewportRotated ? `${item.title} (L)` : `${item.title} (P)`} - - ) : null} - - - - {styles ? ( - - - - {styles.width.replace('px', '')} - - { - updateGlobals({ viewportRotated: !globals.viewportRotated }); - }} - > - - - - {styles.height.replace('px', '')} - - - ) : null} - - ); - }) -); + + + + {styles.height.replace('px', '')} + + + ) : null} + + ); +}; diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts index 63ac89f1ac35..413e2d819588 100644 --- a/code/addons/viewport/template/stories/globals.stories.ts +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -18,7 +18,10 @@ export default { }; export const Selected = { - globals: { viewport: first }, + globals: { + viewport: first, + viewportRotated: false, + }, }; export const Orientation = { @@ -29,7 +32,10 @@ export const Orientation = { }; export const Custom = { - globals: { viewport: 'phone' }, + globals: { + viewport: 'phone', + viewportRotated: false, + }, parameters: { viewport: { viewports: { diff --git a/code/core/src/manager-api/root.tsx b/code/core/src/manager-api/root.tsx index 2d0fd5e5f468..8d23d1d8fcd2 100644 --- a/code/core/src/manager-api/root.tsx +++ b/code/core/src/manager-api/root.tsx @@ -506,7 +506,7 @@ export function useGlobals(): [ userGlobals: Globals, ] { const api = useStorybookApi(); - return [api.getGlobals(), api.updateGlobals, api.getStoryGlobals, api.getUserGlobals()]; + return [api.getGlobals(), api.updateGlobals, api.getStoryGlobals(), api.getUserGlobals()]; } export function useGlobalTypes(): ArgTypes { diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx index 7c5b4bc35785..7b8ba3ae817c 100644 --- a/code/core/src/manager/components/sidebar/Tree.stories.tsx +++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx @@ -8,6 +8,7 @@ import { within, expect } from '@storybook/test'; import { Tree } from './Tree'; import { index } from './mockdata.large'; import { DEFAULT_REF_ID } from './Sidebar'; +import { viewport } from '@popperjs/core'; const customViewports = { sized: { @@ -23,11 +24,10 @@ const meta = { component: Tree, title: 'Sidebar/Tree', excludeStories: /.*Data$/, - globals: { theme: 'light' }, + globals: { theme: 'light', viewport: 'sized', viewportRotated: false }, parameters: { layout: 'fullscreen', viewport: { - defaultViewport: 'sized', viewports: customViewports, }, chromatic: { viewports: [380] }, From 20efb2af27a8916e361476032cf5910b30ecb679 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Jul 2024 17:56:58 +0200 Subject: [PATCH 032/105] duplicate rather than complicate --- code/addons/backgrounds/template/stories/globals.stories.ts | 4 +++- code/addons/backgrounds/template/stories/img.ts | 2 -- .../addons/backgrounds/template/stories/parameters.stories.ts | 4 +++- 3 files changed, 6 insertions(+), 4 deletions(-) delete mode 100644 code/addons/backgrounds/template/stories/img.ts diff --git a/code/addons/backgrounds/template/stories/globals.stories.ts b/code/addons/backgrounds/template/stories/globals.stories.ts index 95379977ea97..b1b14b705de1 100644 --- a/code/addons/backgrounds/template/stories/globals.stories.ts +++ b/code/addons/backgrounds/template/stories/globals.stories.ts @@ -1,5 +1,7 @@ import { global as globalThis } from '@storybook/global'; -import { img } from './img'; + +const img = + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; export default { component: globalThis.Components.Button, diff --git a/code/addons/backgrounds/template/stories/img.ts b/code/addons/backgrounds/template/stories/img.ts deleted file mode 100644 index 3c1d1b124343..000000000000 --- a/code/addons/backgrounds/template/stories/img.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const img = - 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; diff --git a/code/addons/backgrounds/template/stories/parameters.stories.ts b/code/addons/backgrounds/template/stories/parameters.stories.ts index edcdea5a195f..b23ad67000c3 100644 --- a/code/addons/backgrounds/template/stories/parameters.stories.ts +++ b/code/addons/backgrounds/template/stories/parameters.stories.ts @@ -1,5 +1,7 @@ import { global as globalThis } from '@storybook/global'; -import { img } from './img'; + +const img = + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; const COLORS = [ { name: 'red', value: '#FB001D' }, From 1036b0e1ce953979e25356db3412ae39998c65a6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 13:45:33 +0200 Subject: [PATCH 033/105] re-use the previewAnnotation files --- code/.storybook/main.ts | 37 ++++++++++++++++++- code/.storybook/preview.tsx | 21 ----------- .../stories/unhandled-errors.stories.ts | 3 +- .../modules/preview-web/Preview.tsx | 4 +- 4 files changed, 39 insertions(+), 26 deletions(-) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 9268ca9f9fd9..95e505c8ac71 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -28,17 +28,41 @@ const config: StorybookConfig = { directory: '../lib/blocks/src', titlePrefix: 'blocks', }, + { + directory: '../addons/a11y/template/stories', + titlePrefix: 'addons/a11y', + }, + { + directory: '../addons/actions/template/stories', + titlePrefix: 'addons/actions', + }, + { + directory: '../addons/backgrounds/template/stories', + titlePrefix: 'addons/backgrounds', + }, { directory: '../addons/controls/src', titlePrefix: 'addons/controls', }, + { + directory: '../addons/controls/template/stories', + titlePrefix: 'addons/controls', + }, + { + directory: '../addons/docs/template/stories', + titlePrefix: 'addons/docs', + }, + { + directory: '../addons/links/template/stories', + titlePrefix: 'addons/links', + }, { directory: '../addons/viewport/template/stories', titlePrefix: 'addons/viewport', }, { - directory: '../addons/backgrounds/template/stories', - titlePrefix: 'addons/backgrounds', + directory: '../addons/toolbars/template/stories', + titlePrefix: 'addons/toolbars', }, { directory: '../addons/onboarding/src', @@ -48,6 +72,10 @@ const config: StorybookConfig = { directory: '../addons/interactions/src', titlePrefix: 'addons/interactions', }, + { + directory: '../addons/interactions/template/stories', + titlePrefix: 'addons/interactions', + }, ], addons: [ '@storybook/addon-links', @@ -58,6 +86,11 @@ const config: StorybookConfig = { '@storybook/addon-a11y', '@chromatic-com/storybook', ], + previewAnnotations: [ + './core/template/stories/preview.ts', + './addons/toolbars/template/stories/preview.ts', + './renderers/react/template/components/index.js', + ], build: { test: { // we have stories for the blocks here, we can't exclude them diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 2686f6cb8f31..cda035f7e28a 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -15,8 +15,6 @@ import type { PreviewWeb } from 'storybook/internal/preview-api'; import type { ReactRenderer } from '@storybook/react'; import type { Channel } from 'storybook/internal/channels'; -import '../renderers/react/template/components'; - import { DocsContext } from '@storybook/blocks'; import { DocsPageWrapper } from '../lib/blocks/src/components'; @@ -136,7 +134,6 @@ export const loaders = [ } return { docsContext }; }, - async () => ({ projectValue: 2 }), ]; export const decorators = [ @@ -262,20 +259,9 @@ export const decorators = [ ); }, - (storyFn: PartialStoryFn, context: StoryContext) => { - if (context.parameters.useProjectDecorator) - return storyFn({ args: { ...context.args, text: `project ${context.args.text}` } }); - return storyFn(); - }, ]; export const parameters = { - projectParameter: 'projectParameter', - storyObject: { - a: 'project', - b: 'project', - c: 'project', - }, options: { storySort: (a, b) => a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }), @@ -328,11 +314,4 @@ export const globalTypes = { ], }, }, - foo: { defaultValue: 'fooDefaultValue' }, - bar: { defaultValue: 'barDefaultValue' }, -}; - -export const initialGlobals = { - foo: 'fooValue', - baz: 'bazValue', }; diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index 336c44b72f3a..9372592ecef6 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -1,10 +1,11 @@ import { global as globalThis } from '@storybook/global'; -import { userEvent, within } from '@storybook/test'; +import { fn, userEvent, within } from '@storybook/test'; export default { component: globalThis.Components.Button, args: { label: 'Button', + onClick: fn(), }, argTypes: { onClick: { type: 'function' }, diff --git a/code/core/src/preview-api/modules/preview-web/Preview.tsx b/code/core/src/preview-api/modules/preview-web/Preview.tsx index 52e295b273a3..62eff7bdd5c9 100644 --- a/code/core/src/preview-api/modules/preview-web/Preview.tsx +++ b/code/core/src/preview-api/modules/preview-web/Preview.tsx @@ -103,7 +103,7 @@ export class Preview { // Create a proxy object for `__STORYBOOK_STORY_STORE__` and `__STORYBOOK_PREVIEW__.storyStore` // That proxies through to the store once ready, and errors beforehand. This means we can set // `__STORYBOOK_STORY_STORE__ = __STORYBOOK_PREVIEW__.storyStore` without having to wait, and - // simiarly integrators can access the `storyStore` on the preview at any time, although + // similarly integrators can access the `storyStore` on the preview at any time, although // it is considered deprecated and we will no longer allow access in 9.0 get storyStore() { return new Proxy( @@ -118,7 +118,7 @@ export class Preview { throw new StoryStoreAccessedBeforeInitializationError(); }, } - ); + ) as StoryStore; } // INITIALIZATION From a1a6a7da11006353022fd41c88b1fe5424c4a5f1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 13:53:30 +0200 Subject: [PATCH 034/105] fix e2e test --- code/e2e-tests/addon-toolbars.spec.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/code/e2e-tests/addon-toolbars.spec.ts b/code/e2e-tests/addon-toolbars.spec.ts index bbd0e35f1dd3..38014d9b613a 100644 --- a/code/e2e-tests/addon-toolbars.spec.ts +++ b/code/e2e-tests/addon-toolbars.spec.ts @@ -21,7 +21,7 @@ test.describe('addon-toolbars', () => { await expect(sbPage.previewRoot()).toContainText('Hola'); }); - test('locale button should have no effect for story that overrides locale global', async ({ + test('locale button should be disabled for story that overrides locale global', async ({ page, }) => { const sbPage = new SbPage(page); @@ -29,10 +29,8 @@ test.describe('addon-toolbars', () => { // Click on viewport button and select spanish await sbPage.navigateToStory('addons/toolbars/globals', 'override'); await expect(sbPage.previewRoot()).toContainText('안녕하세요'); - await sbPage.selectToolbar('[title="Internationalization locale"]', '#list-item-es'); + const button = await sbPage.page.locator('[title="Internationalization locale"]'); - // Check that korean is still chosen - await expect(sbPage.previewRoot()).not.toContainText('Hola'); - await expect(sbPage.previewRoot()).toContainText('안녕하세요'); + await expect(await button.getAttribute('disabled')).toBe('true'); }); }); From c1b7e87e3e5303c8f43c42a040218cba862abad7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 15:59:31 +0200 Subject: [PATCH 035/105] fixes --- code/addons/interactions/template/stories/basics.stories.ts | 3 +++ code/e2e-tests/addon-toolbars.spec.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index cf6e34eddf2c..76112af830c1 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -14,6 +14,9 @@ export default { args: { onSuccess: fn(), }, + globals: { + theme: 'light', + }, }; export const Validation = { diff --git a/code/e2e-tests/addon-toolbars.spec.ts b/code/e2e-tests/addon-toolbars.spec.ts index 38014d9b613a..cb9a5375894a 100644 --- a/code/e2e-tests/addon-toolbars.spec.ts +++ b/code/e2e-tests/addon-toolbars.spec.ts @@ -31,6 +31,6 @@ test.describe('addon-toolbars', () => { await expect(sbPage.previewRoot()).toContainText('안녕하세요'); const button = await sbPage.page.locator('[title="Internationalization locale"]'); - await expect(await button.getAttribute('disabled')).toBe('true'); + await expect(await button.getAttribute('disabled')).toBe(''); }); }); From c95544d8d890f027e062861454729c357fbb1ae3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 16:54:38 +0200 Subject: [PATCH 036/105] cleanup --- code/.storybook/preview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index cda035f7e28a..cd1074d78988 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -18,7 +18,6 @@ import type { Channel } from 'storybook/internal/channels'; import { DocsContext } from '@storybook/blocks'; import { DocsPageWrapper } from '../lib/blocks/src/components'; -import type { PartialStoryFn, StoryContext } from 'storybook/internal/types'; const { document } = global; From fd9d26fbc318baefed6e59c520f728fd63105278 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 17:06:36 +0200 Subject: [PATCH 037/105] disable the problematic stories for now --- code/.storybook/main.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 95e505c8ac71..e553aea62c58 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -72,10 +72,10 @@ const config: StorybookConfig = { directory: '../addons/interactions/src', titlePrefix: 'addons/interactions', }, - { - directory: '../addons/interactions/template/stories', - titlePrefix: 'addons/interactions', - }, + // { + // directory: '../addons/interactions/template/stories', + // titlePrefix: 'addons/interactions', + // }, ], addons: [ '@storybook/addon-links', From 6df5b903763f0b519a80c9464e763c8b7cd2b62b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 17:28:10 +0200 Subject: [PATCH 038/105] fix https://www.chromatic.com/test?appId=635781f3500dd2c49e189caf&id=66993117d68df8aba39b0aed --- code/.storybook/preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index cd1074d78988..461e4aab865c 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -210,7 +210,7 @@ export const decorators = [ - {!parameters.theme && isChromatic() && playFunction && ( + {!storyGlobals.theme && isChromatic() && playFunction && ( <> From 45c88ce0c27e548fdb88a26f563006e97de1d74c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 17:34:51 +0200 Subject: [PATCH 039/105] oops --- .../interactions/template/stories/unhandled-errors.stories.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index 9372592ecef6..c6aec0c60b35 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -5,7 +5,6 @@ export default { component: globalThis.Components.Button, args: { label: 'Button', - onClick: fn(), }, argTypes: { onClick: { type: 'function' }, From 80e7002c22aae61c4654d7ef79714d6bcf4aed69 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 17:37:37 +0200 Subject: [PATCH 040/105] add comment for future me --- .../interactions/template/stories/unhandled-errors.stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index c6aec0c60b35..4690e5bc8bec 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -5,6 +5,7 @@ export default { component: globalThis.Components.Button, args: { label: 'Button', + // onClick: fn(), <-- this is intentionally missing to trigger an unhandled error }, argTypes: { onClick: { type: 'function' }, From 8920bb62d775f2d0f98b228326ef482d67920f17 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 17:38:30 +0200 Subject: [PATCH 041/105] cleanup --- .../interactions/template/stories/unhandled-errors.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index 4690e5bc8bec..0097a836438d 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { fn, userEvent, within } from '@storybook/test'; +import { userEvent, within } from '@storybook/test'; export default { component: globalThis.Components.Button, From 3aecb76196e906b01480c00c1ff011f139367b09 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 17:41:03 +0200 Subject: [PATCH 042/105] add test exclusion tag --- .../interactions/template/stories/unhandled-errors.stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index 0097a836438d..0f8409ad792a 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -14,6 +14,7 @@ export default { actions: { argTypesRegex: '^on[A-Z].*' }, chromatic: { disable: true }, }, + tags: ['!test'], }; export const Default = { From f7d02ae71174f7facf09a4acf19c08fa97af6712 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Jul 2024 18:52:57 +0200 Subject: [PATCH 043/105] cleanup --- code/.storybook/preview.tsx | 5 ++--- .../mobile/navigation/MobileNavigation.stories.tsx | 1 + 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 461e4aab865c..d5c77266688c 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -159,11 +159,10 @@ 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, userGlobals, storyGlobals }) => { + (StoryFn, { globals, playFunction, args, userGlobals, storyGlobals }) => { const defaultTheme = isChromatic() && !playFunction && args.autoplay !== true ? 'stacked' : 'light'; - const theme = - storyGlobals.theme || userGlobals.theme || globals.theme || parameters.theme || defaultTheme; + const theme = storyGlobals.theme || userGlobals.theme || globals.theme || defaultTheme; switch (theme) { case 'side-by-side': { diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx index 990e7748ed31..69d17c16ba67 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx @@ -88,6 +88,7 @@ type Story = StoryObj; export const Default: Story = {}; export const Dark: Story = { globals: { theme: 'dark' }, + parameters: { chromatic: { disable: true } }, }; export const LongStoryName: Story = { From 035609595cabb6a863ee6ba73c7bb546fe4bd387 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 09:40:25 +0200 Subject: [PATCH 044/105] move `storyGlobals` type to types as discussed here: https://github.com/ComponentDriven/csf/pull/95#issuecomment-2234809100 --- code/addons/links/package.json | 2 +- code/core/package.json | 2 +- code/core/src/types/modules/story.ts | 2 ++ code/lib/blocks/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/yarn.lock | 34 ++++++++++++++-------------- 10 files changed, 27 insertions(+), 25 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index b5a1b0378b22..5ad730d8d1d7 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", + "@storybook/csf": "^0.1.11", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/core/package.json b/code/core/package.json index 2ad6d19e181c..7d420a0fdfea 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -253,7 +253,7 @@ "prep": "bun ./scripts/prep.ts" }, "dependencies": { - "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", + "@storybook/csf": "^0.1.11", "@types/express": "^4.17.21", "@types/node": "^18.0.0", "browser-assert": "^1.2.1", diff --git a/code/core/src/types/modules/story.ts b/code/core/src/types/modules/story.ts index 69d10027bbe9..341802ebaa04 100644 --- a/code/core/src/types/modules/story.ts +++ b/code/core/src/types/modules/story.ts @@ -6,6 +6,7 @@ import type { CleanupCallback, StepRunner, Canvas, + Globals, } from '@storybook/csf'; import type { @@ -112,6 +113,7 @@ export type PreparedStory = testingLibraryRender?: (...args: never[]) => unknown; renderToCanvas?: ProjectAnnotations['renderToCanvas']; usesMount: boolean; + storyGlobals: Globals; }; export type PreparedMeta = Omit< diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 4790c82c575f..f02bcc555287 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -44,7 +44,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", + "@storybook/csf": "^0.1.11", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@types/lodash": "^4.14.167", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 54fcfa6c1bce..351064e9fdae 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -58,7 +58,7 @@ "@babel/preset-env": "^7.24.4", "@babel/types": "^7.24.0", "@storybook/core": "workspace:*", - "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", + "@storybook/csf": "^0.1.11", "@types/cross-spawn": "^6.0.2", "cross-spawn": "^7.0.3", "globby": "^14.0.1", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 6546c16b497c..3d1350076ef1 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", + "@storybook/csf": "^0.1.11", "estraverse": "^5.2.0", "lodash": "^4.17.21", "prettier": "^3.1.1" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 1c61e54ea0e2..110563d71aa4 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -44,7 +44,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", + "@storybook/csf": "^0.1.11", "@storybook/instrumenter": "workspace:*", "@testing-library/dom": "10.1.0", "@testing-library/jest-dom": "6.4.5", diff --git a/code/package.json b/code/package.json index 738913106752..6b48ede80666 100644 --- a/code/package.json +++ b/code/package.json @@ -118,7 +118,7 @@ "@storybook/codemod": "workspace:*", "@storybook/core": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", + "@storybook/csf": "^0.1.11", "@storybook/csf-plugin": "workspace:*", "@storybook/ember": "workspace:*", "@storybook/eslint-config-storybook": "^4.0.0", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 8d7aaf6412ae..24f266fb7b01 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -47,7 +47,7 @@ }, "dependencies": { "@storybook/components": "workspace:^", - "@storybook/csf": "0.1.12--canary.95.1b1fb52.0", + "@storybook/csf": "^0.1.11", "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:^", "@storybook/preview-api": "workspace:^", diff --git a/code/yarn.lock b/code/yarn.lock index 6a47006ab78f..42ce040fbfd6 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5289,7 +5289,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-links@workspace:addons/links" dependencies: - "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" + "@storybook/csf": "npm:^0.1.11" "@storybook/global": "npm:^5.0.0" fs-extra: "npm:^11.1.0" ts-dedent: "npm:^2.0.0" @@ -5516,7 +5516,7 @@ __metadata: resolution: "@storybook/blocks@workspace:lib/blocks" dependencies: "@storybook/addon-actions": "workspace:*" - "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" + "@storybook/csf": "npm:^0.1.11" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/react": "workspace:*" @@ -5669,7 +5669,7 @@ __metadata: "@babel/preset-env": "npm:^7.24.4" "@babel/types": "npm:^7.24.0" "@storybook/core": "workspace:*" - "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" + "@storybook/csf": "npm:^0.1.11" "@types/cross-spawn": "npm:^6.0.2" "@types/jscodeshift": "npm:^0.11.10" ansi-regex: "npm:^6.0.1" @@ -5763,7 +5763,7 @@ __metadata: "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" - "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" + "@storybook/csf": "npm:^0.1.11" "@storybook/docs-mdx": "npm:4.0.0-next.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5899,15 +5899,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.12--canary.95.1b1fb52.0": - version: 0.1.12--canary.95.1b1fb52.0 - resolution: "@storybook/csf@npm:0.1.12--canary.95.1b1fb52.0" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10c0/4a1547ebe656f6ba6e2f9fda07202f6d8eb662651170d286b4d5036b8588afcbed5a026a6b71d975190619e3521db3fdec5eb7ee8b0b1bd08bbc9e12041af2aa - languageName: node - linkType: hard - "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -5917,6 +5908,15 @@ __metadata: languageName: node linkType: hard +"@storybook/csf@npm:^0.1.11": + version: 0.1.11 + resolution: "@storybook/csf@npm:0.1.11" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10c0/c5329fc13e7d762049b5c91df1bc1c0e510a1a898c401b72b68f1ff64139a85ab64a92f8e681d2fcb226c0a4a55d0f23b569b2bdb517e0f067bd05ea46228356 + languageName: node + linkType: hard + "@storybook/docs-mdx@npm:4.0.0-next.0": version: 4.0.0-next.0 resolution: "@storybook/docs-mdx@npm:4.0.0-next.0" @@ -6509,7 +6509,7 @@ __metadata: "@storybook/codemod": "workspace:*" "@storybook/core": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" + "@storybook/csf": "npm:^0.1.11" "@storybook/csf-plugin": "workspace:*" "@storybook/ember": "workspace:*" "@storybook/eslint-config-storybook": "npm:^4.0.0" @@ -6645,7 +6645,7 @@ __metadata: resolution: "@storybook/server@workspace:renderers/server" dependencies: "@storybook/components": "workspace:^" - "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" + "@storybook/csf": "npm:^0.1.11" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:^" "@storybook/preview-api": "workspace:^" @@ -6664,7 +6664,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" + "@storybook/csf": "npm:^0.1.11" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" prettier: "npm:^3.1.1" @@ -6770,7 +6770,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/test@workspace:lib/test" dependencies: - "@storybook/csf": "npm:0.1.12--canary.95.1b1fb52.0" + "@storybook/csf": "npm:^0.1.11" "@storybook/instrumenter": "workspace:*" "@testing-library/dom": "npm:10.1.0" "@testing-library/jest-dom": "npm:6.4.5" From f122c3b10483b3bb75bb932e859d85330a3fd850 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 09:49:52 +0200 Subject: [PATCH 045/105] remove duplicate --- code/.storybook/preview.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index d5c77266688c..b87fe89353f9 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -296,20 +296,3 @@ export const parameters = { ], }, }; - -export const globalTypes = { - theme: { - name: 'Theme', - description: 'Global theme for components', - toolbar: { - icon: 'circlehollow', - title: 'Theme', - items: [ - { value: 'light', icon: 'circlehollow', title: 'light' }, - { value: 'dark', icon: 'circle', title: 'dark' }, - { value: 'side-by-side', icon: 'sidebar', title: 'side by side' }, - { value: 'stacked', icon: 'bottombar', title: 'stacked' }, - ], - }, - }, -}; From 2a43164816af20e3e8788db45b42d77d3271157a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 10:05:38 +0200 Subject: [PATCH 046/105] fix the `globe` text showing in the reset of a toolbar --- code/addons/toolbars/src/components/ToolbarMenuListItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx index 49bccdbc48b6..39fa7df5dace 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx @@ -26,7 +26,6 @@ export const ToolbarMenuListItem = ({ active: currentValue === value, right, title, - icon, disabled, onClick, }; From 0cd87ad454c0a47329cdce82815b17e3b416c62d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 10:07:25 +0200 Subject: [PATCH 047/105] add icons ref --- code/.storybook/main.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index e553aea62c58..137f1cb24b7d 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -103,6 +103,13 @@ const config: StorybookConfig = { name: '@storybook/react-vite', options: {}, }, + refs: { + icons: { + title: 'Icons', + url: 'https://main--64b56e737c0aeefed9d5e675.chromatic.com', + expanded: false, + }, + }, core: { disableTelemetry: true, }, From 861dd65740682f8b9689def31f2103bcc7951621 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 10:13:38 +0200 Subject: [PATCH 048/105] restructure the components --- code/.storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 137f1cb24b7d..884d12a6ee50 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -21,7 +21,7 @@ const config: StorybookConfig = { titlePrefix: 'preview', }, { - directory: '../core/src/components', + directory: '../core/src/components/components', titlePrefix: 'components', }, { From 971abc41f4d3040cc25f76ed37b2442347f5e330 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 10:21:26 +0200 Subject: [PATCH 049/105] restructure the main storybook a bit --- code/.storybook/main.ts | 4 ++++ .../components/{components/Colors => brand}/SideBySide.tsx | 0 .../{components => }/brand/StorybookIcon.stories.tsx | 0 .../src/components/{components => }/brand/StorybookIcon.tsx | 0 .../{components => }/brand/StorybookLogo.stories.tsx | 0 .../src/components/{components => }/brand/StorybookLogo.tsx | 0 .../components/{components/Colors => brand}/colorpalette.mdx | 0 .../{components/typography => brand}/typography.mdx | 0 .../components/Button/Button.deprecated.stories.tsx | 2 +- .../components/components/tabs/EmptyTabContent.stories.tsx | 1 + code/core/src/components/components/tabs/tabs.stories.tsx | 1 - code/core/src/components/index.ts | 4 ++-- 12 files changed, 8 insertions(+), 4 deletions(-) rename code/core/src/components/{components/Colors => brand}/SideBySide.tsx (100%) rename code/core/src/components/{components => }/brand/StorybookIcon.stories.tsx (100%) rename code/core/src/components/{components => }/brand/StorybookIcon.tsx (100%) rename code/core/src/components/{components => }/brand/StorybookLogo.stories.tsx (100%) rename code/core/src/components/{components => }/brand/StorybookLogo.tsx (100%) rename code/core/src/components/{components/Colors => brand}/colorpalette.mdx (100%) rename code/core/src/components/{components/typography => brand}/typography.mdx (100%) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 884d12a6ee50..38e278863f8d 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -20,6 +20,10 @@ const config: StorybookConfig = { directory: '../core/src/preview-api', titlePrefix: 'preview', }, + { + directory: '../core/src/components/brand', + titlePrefix: 'brand', + }, { directory: '../core/src/components/components', titlePrefix: 'components', diff --git a/code/core/src/components/components/Colors/SideBySide.tsx b/code/core/src/components/brand/SideBySide.tsx similarity index 100% rename from code/core/src/components/components/Colors/SideBySide.tsx rename to code/core/src/components/brand/SideBySide.tsx diff --git a/code/core/src/components/components/brand/StorybookIcon.stories.tsx b/code/core/src/components/brand/StorybookIcon.stories.tsx similarity index 100% rename from code/core/src/components/components/brand/StorybookIcon.stories.tsx rename to code/core/src/components/brand/StorybookIcon.stories.tsx diff --git a/code/core/src/components/components/brand/StorybookIcon.tsx b/code/core/src/components/brand/StorybookIcon.tsx similarity index 100% rename from code/core/src/components/components/brand/StorybookIcon.tsx rename to code/core/src/components/brand/StorybookIcon.tsx diff --git a/code/core/src/components/components/brand/StorybookLogo.stories.tsx b/code/core/src/components/brand/StorybookLogo.stories.tsx similarity index 100% rename from code/core/src/components/components/brand/StorybookLogo.stories.tsx rename to code/core/src/components/brand/StorybookLogo.stories.tsx diff --git a/code/core/src/components/components/brand/StorybookLogo.tsx b/code/core/src/components/brand/StorybookLogo.tsx similarity index 100% rename from code/core/src/components/components/brand/StorybookLogo.tsx rename to code/core/src/components/brand/StorybookLogo.tsx diff --git a/code/core/src/components/components/Colors/colorpalette.mdx b/code/core/src/components/brand/colorpalette.mdx similarity index 100% rename from code/core/src/components/components/Colors/colorpalette.mdx rename to code/core/src/components/brand/colorpalette.mdx diff --git a/code/core/src/components/components/typography/typography.mdx b/code/core/src/components/brand/typography.mdx similarity index 100% rename from code/core/src/components/components/typography/typography.mdx rename to code/core/src/components/brand/typography.mdx diff --git a/code/core/src/components/components/Button/Button.deprecated.stories.tsx b/code/core/src/components/components/Button/Button.deprecated.stories.tsx index 10362221ce2a..009ea9627ab5 100644 --- a/code/core/src/components/components/Button/Button.deprecated.stories.tsx +++ b/code/core/src/components/components/Button/Button.deprecated.stories.tsx @@ -5,7 +5,7 @@ import { Button } from './Button'; import { Form } from '../form'; const meta: Meta = { - title: 'Button/Deprecated', + title: 'Button (Deprecated)', component: Button, tags: ['autodocs'], }; diff --git a/code/core/src/components/components/tabs/EmptyTabContent.stories.tsx b/code/core/src/components/components/tabs/EmptyTabContent.stories.tsx index 2501eb5f7c0b..e03fa329532b 100644 --- a/code/core/src/components/components/tabs/EmptyTabContent.stories.tsx +++ b/code/core/src/components/components/tabs/EmptyTabContent.stories.tsx @@ -5,6 +5,7 @@ import { Link } from '@storybook/core/components'; import type { Meta, StoryObj } from '@storybook/react'; export default { + title: 'TabContentEmpty', component: EmptyTabContent, parameters: { layout: 'centered', diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx index e412fdea4b44..1e8994ca0503 100644 --- a/code/core/src/components/components/tabs/tabs.stories.tsx +++ b/code/core/src/components/components/tabs/tabs.stories.tsx @@ -101,7 +101,6 @@ const content = Object.entries(panels).map(([k, v]) => ( )); export default { - title: 'Tabs', args: { menuName: 'Addons', }, diff --git a/code/core/src/components/index.ts b/code/core/src/components/index.ts index febbe94778e8..ad14eb46e728 100644 --- a/code/core/src/components/index.ts +++ b/code/core/src/components/index.ts @@ -76,8 +76,8 @@ export { AddonPanel } from './components/addon-panel/addon-panel'; export type { IconsProps } from './components/icon/icon'; export { Icons, Symbols } from './components/icon/icon'; export { icons } from './components/icon/icon'; -export { StorybookLogo } from './components/brand/StorybookLogo'; -export { StorybookIcon } from './components/brand/StorybookIcon'; +export { StorybookLogo } from './brand/StorybookLogo'; +export { StorybookIcon } from './brand/StorybookIcon'; // Loader export { Loader } from './components/Loader/Loader'; From 9d1525a567aa01c4c22103e563881404c370ec93 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 10:26:36 +0200 Subject: [PATCH 050/105] fix --- code/core/src/preview-api/modules/store/csf/prepareStory.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts index 746b199f2643..379e7e240e91 100644 --- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts +++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts @@ -147,6 +147,7 @@ export function prepareStory( testingLibraryRender, renderToCanvas: projectAnnotations.renderToCanvas, usesMount, + storyGlobals: {}, }; } export function prepareMeta( @@ -219,7 +220,7 @@ function preparePartialAnnotations( ...storyAnnotations?.globals, }; - const contextForEnhancers: StoryContextForEnhancers = { + const contextForEnhancers: StoryContextForEnhancers & { storyGlobals: Globals } = { componentId: componentAnnotations.id, title: componentAnnotations.title, kind: componentAnnotations.title, // Back compat From 9b3ceb25b0cc4b47fba63ac1011ca6ef83c7edc1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 10:33:16 +0200 Subject: [PATCH 051/105] add clear deprecation status to deprecated icons --- code/core/src/components/components/icon/icon.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/core/src/components/components/icon/icon.stories.tsx b/code/core/src/components/components/icon/icon.stories.tsx index 64ecbd21be18..929319b346a7 100644 --- a/code/core/src/components/components/icon/icon.stories.tsx +++ b/code/core/src/components/components/icon/icon.stories.tsx @@ -55,6 +55,7 @@ const Header = styled.h2` `; export default { + title: 'Icons (deprecated)', component: Icons, argTypes: { color: { control: 'color' }, From 612a98a214fb79056371c80419e3951d22250fa8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Jul 2024 11:33:01 +0200 Subject: [PATCH 052/105] fix --- code/core/src/preview-api/modules/store/csf/prepareStory.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts index 379e7e240e91..c740dc624f82 100644 --- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts +++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts @@ -131,6 +131,7 @@ export function prepareStory( const testingLibraryRender = projectAnnotations.testingLibraryRender; return { + storyGlobals: {}, ...partialAnnotations, moduleExport, id, @@ -147,7 +148,6 @@ export function prepareStory( testingLibraryRender, renderToCanvas: projectAnnotations.renderToCanvas, usesMount, - storyGlobals: {}, }; } export function prepareMeta( From 6daacfa48839b03c1cc3fbd3192135c310cc99f2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 22 Jul 2024 13:06:02 +0200 Subject: [PATCH 053/105] fix the switching to docs not resetting storyGlobals --- .../preview-api/modules/preview-web/PreviewWithSelection.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx b/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx index 09dc4400a36d..2768cbe3ba13 100644 --- a/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx +++ b/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx @@ -405,6 +405,10 @@ export class PreviewWithSelection extends Preview Date: Mon, 22 Jul 2024 18:11:56 +0200 Subject: [PATCH 054/105] add a version of viewport tool that uses globals exclusively --- code/.storybook/preview.tsx | 7 + code/addons/viewport/src/Tool.tsx | 4 +- code/addons/viewport/src/ToolUsingGlobals.tsx | 202 ++++++++++++++++++ code/addons/viewport/src/ToolUtils.tsx | 31 +++ code/addons/viewport/src/manager.tsx | 7 +- .../viewport/src/responsiveViewport.tsx | 10 + code/addons/viewport/src/shortcuts.ts | 6 +- .../template/stories/globals.stories.ts | 22 +- 8 files changed, 263 insertions(+), 26 deletions(-) create mode 100644 code/addons/viewport/src/ToolUsingGlobals.tsx create mode 100644 code/addons/viewport/src/ToolUtils.tsx create mode 100644 code/addons/viewport/src/responsiveViewport.tsx diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index b87fe89353f9..3a2afc5ab1de 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -16,6 +16,7 @@ import type { ReactRenderer } 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'; @@ -296,3 +297,9 @@ export const parameters = { ], }, }; + +export const globalTypes = { + viewport: { + viewports: MINIMAL_VIEWPORTS, + }, +}; diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index 900b2f78cee8..a3acf3eb6453 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -136,8 +136,8 @@ export const ViewportTool: FC = () => { } useEffect(() => { - registerShortcuts(api, globals, updateGlobals, Object.keys(viewports)); - }, [viewports, globals, globals.viewport, updateGlobals, api]); + registerShortcuts(api, globals.viewport, updateGlobals, Object.keys(viewports)); + }, [viewports, globals.viewport, updateGlobals, api]); useEffect(() => { if (isDisabled) { diff --git a/code/addons/viewport/src/ToolUsingGlobals.tsx b/code/addons/viewport/src/ToolUsingGlobals.tsx new file mode 100644 index 000000000000..d7b4b6e9d4d0 --- /dev/null +++ b/code/addons/viewport/src/ToolUsingGlobals.tsx @@ -0,0 +1,202 @@ +import type { FC } from 'react'; +import React, { useState, Fragment, useEffect } from 'react'; + +import { Global } from 'storybook/internal/theming'; +import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components'; +import { useGlobals, type API, useGlobalTypes } from 'storybook/internal/manager-api'; + +import { BrowserIcon, GrowIcon, MobileIcon, TabletIcon, TransferIcon } from '@storybook/icons'; +import { PARAM_KEY } from './constants'; +import type { ViewportMap, Viewport } from './models'; +import type { Globals } from 'storybook/internal/types'; +import { registerShortcuts } from './shortcuts'; +import { + IconButtonWithLabel, + IconButtonLabel, + ActiveViewportSize, + ActiveViewportLabel, +} from './ToolUtils'; +import { responsiveViewport } from './responsiveViewport'; + +const iconsMap: Record = { + desktop: , + mobile: , + tablet: , + other: , +}; + +interface PureArgs { + length: number; + item: Viewport; + updateGlobals: (newGlobals: Globals) => void; + viewportMap: ViewportMap; + viewportName: any; + setIsTooltipVisible: React.Dispatch>; + isLocked: boolean; + isActive: boolean; + viewportRotated: any; + width: string; + height: string; +} + +type Link = Parameters['0']['links'][0]; + +const emptyViewportMap: ViewportMap = {}; + +export const ViewportTool: FC<{ api: API }> = ({ api }) => { + const [isTooltipVisible, setIsTooltipVisible] = useState(false); + const globalTypes = useGlobalTypes(); + const [globals, updateGlobals, storyGlobals] = useGlobals(); + + const isLocked = PARAM_KEY in storyGlobals; + const viewportMap: ViewportMap = globalTypes?.viewport?.viewports || emptyViewportMap; + const viewportName = globals?.viewport; + const viewportRotated = globals?.viewportRotated; + + const item = viewportMap?.[viewportName] || responsiveViewport; + const length = Object.keys(viewportMap).length; + const isActive = isTooltipVisible || item !== responsiveViewport; + + useEffect(() => { + registerShortcuts(api, globals.viewport, updateGlobals, Object.keys(viewportMap)); + }, [viewportMap, globals.viewport, updateGlobals, api]); + + if (!viewportMap || length < 1) { + return null; + } + + if (item.styles === null || typeof item.styles === 'function') { + return null; + } + + const width = viewportRotated ? item.styles.height : item.styles.width; + const height = viewportRotated ? item.styles.width : item.styles.height; + + return ( + + ); +}; + +const PureTool: FC = ({ + length, + item, + updateGlobals, + viewportMap, + viewportName, + setIsTooltipVisible, + isLocked, + isActive, + viewportRotated, + width, + height, +}) => { + return ( + + ( + 0 && item !== responsiveViewport + ? [ + { + id: 'reset', + title: 'Reset viewport', + onClick: () => { + updateGlobals({ + viewport: undefined, + viewportRotated: false, + }); + onHide(); + }, + }, + ] + : []), + ...Object.entries(viewportMap).map(([k, value]) => ({ + id: k, + title: value.name, + icon: iconsMap[value.type], + active: k === viewportName, + onClick: () => { + updateGlobals({ + viewport: k, + viewportRotated: false, + }); + onHide(); + }, + })), + ]} + /> + )} + closeOnOutsideClick + onVisibleChange={setIsTooltipVisible} + > + { + updateGlobals({ + viewport: undefined, + viewportRotated: false, + }); + }} + > + + {item !== responsiveViewport ? ( + + {item.name} {viewportRotated ? `(L)` : `(P)`} + + ) : null} + + + + + + {item !== responsiveViewport ? ( + + + {width.replace('px', '')} + + {!isLocked ? ( + { + updateGlobals({ viewportRotated: !viewportRotated }); + }} + > + + + ) : ( + / + )} + + {height.replace('px', '')} + + + ) : null} + + ); +}; + +const Pure = React.memo(PureTool); diff --git a/code/addons/viewport/src/ToolUtils.tsx b/code/addons/viewport/src/ToolUtils.tsx new file mode 100644 index 000000000000..3eddb0ab631e --- /dev/null +++ b/code/addons/viewport/src/ToolUtils.tsx @@ -0,0 +1,31 @@ +import { styled } from 'storybook/internal/theming'; +import { IconButton } from 'storybook/internal/components'; + +export const ActiveViewportSize = styled.div(() => ({ + display: 'inline-flex', + alignItems: 'center', +})); + +export const ActiveViewportLabel = styled.div(({ theme }) => ({ + display: 'inline-block', + textDecoration: 'none', + padding: 10, + fontWeight: theme.typography.weight.bold, + fontSize: theme.typography.size.s2 - 1, + lineHeight: '1', + height: 40, + border: 'none', + borderTop: '3px solid transparent', + borderBottom: '3px solid transparent', + background: 'transparent', +})); + +export const IconButtonWithLabel = styled(IconButton)(() => ({ + display: 'inline-flex', + alignItems: 'center', +})); + +export const IconButtonLabel = styled.div(({ theme }) => ({ + fontSize: theme.typography.size.s2 - 1, + marginLeft: 10, +})); diff --git a/code/addons/viewport/src/manager.tsx b/code/addons/viewport/src/manager.tsx index ee597958c1e6..00fb4904690b 100644 --- a/code/addons/viewport/src/manager.tsx +++ b/code/addons/viewport/src/manager.tsx @@ -3,13 +3,14 @@ import { addons, types } from 'storybook/internal/manager-api'; import { ADDON_ID } from './constants'; -import { ViewportTool } from './Tool'; +// import { ViewportTool } from './Tool'; +import { ViewportTool } from './ToolUsingGlobals'; -addons.register(ADDON_ID, () => { +addons.register(ADDON_ID, (api) => { addons.add(ADDON_ID, { title: 'viewport / media-queries', type: types.TOOL, match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId, - render: () => , + render: () => , }); }); diff --git a/code/addons/viewport/src/responsiveViewport.tsx b/code/addons/viewport/src/responsiveViewport.tsx new file mode 100644 index 000000000000..921f9cdce69d --- /dev/null +++ b/code/addons/viewport/src/responsiveViewport.tsx @@ -0,0 +1,10 @@ +import type { Viewport } from './models'; + +export const responsiveViewport: Viewport = { + name: 'Reset viewport', + styles: { + height: '100%', + width: '100%', + }, + type: 'desktop', +}; diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts index b8869f48327c..f53d460b81bd 100644 --- a/code/addons/viewport/src/shortcuts.ts +++ b/code/addons/viewport/src/shortcuts.ts @@ -21,7 +21,7 @@ const getPreviousViewport = (viewportsKeys: string[], current: string): string = export const registerShortcuts = async ( api: API, - globals: any, + viewport: any, updateGlobals: any, viewportsKeys: string[] ) => { @@ -31,7 +31,7 @@ export const registerShortcuts = async ( actionName: 'previous', action: () => { updateGlobals({ - viewport: getPreviousViewport(viewportsKeys, globals.viewport), + viewport: getPreviousViewport(viewportsKeys, viewport), }); }, }); @@ -42,7 +42,7 @@ export const registerShortcuts = async ( actionName: 'next', action: () => { updateGlobals({ - viewport: getNextViewport(viewportsKeys, globals.viewport), + viewport: getNextViewport(viewportsKeys, viewport), }); }, }); diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts index 413e2d819588..4e8ba9fd8319 100644 --- a/code/addons/viewport/template/stories/globals.stories.ts +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -10,13 +10,13 @@ export default { }, globals: {}, parameters: { - viewport: { - viewports: MINIMAL_VIEWPORTS, - }, chromatic: { disable: true }, }, }; +export const Unset = { + globals: {}, +}; export const Selected = { globals: { viewport: first, @@ -31,23 +31,9 @@ export const Orientation = { }, }; -export const Custom = { +export const Missing = { globals: { viewport: 'phone', viewportRotated: false, }, - parameters: { - viewport: { - viewports: { - phone: { - name: 'Phone Width', - styles: { - height: '600px', - width: '100vh', - }, - type: 'mobile', - }, - }, - }, - }, }; From 9c5fc9f651f268c5abc47ceecf79a43e1a3956fe Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 23 Jul 2024 10:07:59 +0200 Subject: [PATCH 055/105] improve the viewports addon --- code/.storybook/main.ts | 5 +++ .../viewport/src/{Tool.tsx => ToolLegacy.tsx} | 0 .../{ToolUsingGlobals.tsx => ToolModern.tsx} | 44 +++++++++---------- code/addons/viewport/src/manager.tsx | 7 +-- code/core/src/types/modules/core-common.ts | 13 ++++++ 5 files changed, 44 insertions(+), 25 deletions(-) rename code/addons/viewport/src/{Tool.tsx => ToolLegacy.tsx} (100%) rename code/addons/viewport/src/{ToolUsingGlobals.tsx => ToolModern.tsx} (89%) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 38e278863f8d..7c4f74c8c2ef 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -117,6 +117,11 @@ const config: StorybookConfig = { core: { disableTelemetry: true, }, + features: { + viewportStoryGlobals: true, + themesStoryGlobals: true, + backgroundsStoryGlobals: true, + }, viteFinal: (viteConfig, { configType }) => mergeConfig(viteConfig, { resolve: { diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/ToolLegacy.tsx similarity index 100% rename from code/addons/viewport/src/Tool.tsx rename to code/addons/viewport/src/ToolLegacy.tsx diff --git a/code/addons/viewport/src/ToolUsingGlobals.tsx b/code/addons/viewport/src/ToolModern.tsx similarity index 89% rename from code/addons/viewport/src/ToolUsingGlobals.tsx rename to code/addons/viewport/src/ToolModern.tsx index d7b4b6e9d4d0..82481e4085a1 100644 --- a/code/addons/viewport/src/ToolUsingGlobals.tsx +++ b/code/addons/viewport/src/ToolModern.tsx @@ -1,5 +1,4 @@ -import type { FC } from 'react'; -import React, { useState, Fragment, useEffect } from 'react'; +import React, { useState, Fragment, useEffect, type FC } from 'react'; import { Global } from 'storybook/internal/theming'; import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components'; @@ -8,7 +7,6 @@ import { useGlobals, type API, useGlobalTypes } from 'storybook/internal/manager import { BrowserIcon, GrowIcon, MobileIcon, TabletIcon, TransferIcon } from '@storybook/icons'; import { PARAM_KEY } from './constants'; import type { ViewportMap, Viewport } from './models'; -import type { Globals } from 'storybook/internal/types'; import { registerShortcuts } from './shortcuts'; import { IconButtonWithLabel, @@ -28,7 +26,7 @@ const iconsMap: Record = { interface PureArgs { length: number; item: Viewport; - updateGlobals: (newGlobals: Globals) => void; + updateGlobals: ReturnType['1']; viewportMap: ViewportMap; viewportName: any; setIsTooltipVisible: React.Dispatch>; @@ -61,11 +59,14 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => { registerShortcuts(api, globals.viewport, updateGlobals, Object.keys(viewportMap)); }, [viewportMap, globals.viewport, updateGlobals, api]); - if (!viewportMap || length < 1) { + if (item.styles === null || !viewportMap || length < 1) { return null; } - if (item.styles === null || typeof item.styles === 'function') { + if (typeof item.styles === 'function') { + console.warn( + 'addon viewport no longer supports dynamic styles using a function, use css calc() instead' + ); return null; } @@ -91,19 +92,20 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => { ); }; -const PureTool: FC = ({ - length, - item, - updateGlobals, - viewportMap, - viewportName, - setIsTooltipVisible, - isLocked, - isActive, - viewportRotated, - width, - height, -}) => { +const Pure = React.memo(function PureTool(props: PureArgs) { + const { + item, + length, + viewportMap, + viewportName, + viewportRotated, + updateGlobals, + setIsTooltipVisible, + isLocked, + isActive, + width, + height, + } = props; return ( = ({ ) : null} ); -}; - -const Pure = React.memo(PureTool); +}); diff --git a/code/addons/viewport/src/manager.tsx b/code/addons/viewport/src/manager.tsx index 00fb4904690b..c7b30fd52cf6 100644 --- a/code/addons/viewport/src/manager.tsx +++ b/code/addons/viewport/src/manager.tsx @@ -3,14 +3,15 @@ import { addons, types } from 'storybook/internal/manager-api'; import { ADDON_ID } from './constants'; -// import { ViewportTool } from './Tool'; -import { ViewportTool } from './ToolUsingGlobals'; +import { ViewportTool as LegacyViewportTool } from './ToolLegacy'; +import { ViewportTool as ModernViewportTool } from './ToolModern'; addons.register(ADDON_ID, (api) => { addons.add(ADDON_ID, { title: 'viewport / media-queries', type: types.TOOL, match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId, - render: () => , + render: () => + FEATURES?.viewportStoryGlobals ? : , }); }); diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts index d994449a2e72..d1c161692a30 100644 --- a/code/core/src/types/modules/core-common.ts +++ b/code/core/src/types/modules/core-common.ts @@ -375,6 +375,19 @@ export interface StorybookConfigRaw { * Enable asynchronous component rendering in React renderer */ experimentalRSC?: boolean; + + /** + * use globals & globalTypes for configuring the viewport addon + */ + viewportStoryGlobals?: boolean; + /** + * use globals & globalTypes for configuring the backgrounds addon + */ + backgroundsStoryGlobals?: boolean; + /** + * use globals & globalTypes for configuring the themes addon + */ + themesStoryGlobals?: boolean; }; build?: TestBuildConfig; From 997efa323068804456da450cc8c459c6771bd6f9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 23 Jul 2024 16:24:21 +0200 Subject: [PATCH 056/105] wip --- code/.storybook/preview.tsx | 12 +- .../BackgroundSelectorLegacy.tsx} | 0 .../GridSelectorLegacy.tsx} | 0 .../withBackgroundLegacy.ts} | 0 .../withGrid.ts => legacy/withGridLegacy.ts} | 0 code/addons/backgrounds/src/manager.tsx | 19 ++- .../src/modern/BackgroundSelectorModern.tsx | 140 ++++++++++++++++++ .../backgrounds/src/modern/decorator.ts | 113 ++++++++++++++ code/addons/backgrounds/src/preview.tsx | 44 ++++-- .../template/stories/grid.stories.ts | 5 - code/addons/viewport/src/ToolModern.tsx | 70 +++++---- .../template/stories/globals.stories.ts | 16 +- code/addons/viewport/typings.d.ts | 7 + .../modules/preview-web/render/StoryRender.ts | 2 +- .../preview-api/modules/store/StoryStore.ts | 1 + .../modules/store/csf/normalizeInputTypes.ts | 2 +- .../modules/store/csf/portable-stories.ts | 1 + .../modules/store/csf/prepareStory.ts | 2 +- 18 files changed, 360 insertions(+), 74 deletions(-) rename code/addons/backgrounds/src/{containers/BackgroundSelector.tsx => legacy/BackgroundSelectorLegacy.tsx} (100%) rename code/addons/backgrounds/src/{containers/GridSelector.tsx => legacy/GridSelectorLegacy.tsx} (100%) rename code/addons/backgrounds/src/{decorators/withBackground.ts => legacy/withBackgroundLegacy.ts} (100%) rename code/addons/backgrounds/src/{decorators/withGrid.ts => legacy/withGridLegacy.ts} (100%) create mode 100644 code/addons/backgrounds/src/modern/BackgroundSelectorModern.tsx create mode 100644 code/addons/backgrounds/src/modern/decorator.ts create mode 100644 code/addons/viewport/typings.d.ts diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 3a2afc5ab1de..fad002bf587e 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -19,6 +19,7 @@ import { DocsContext } from '@storybook/blocks'; import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; import { DocsPageWrapper } from '../lib/blocks/src/components'; +import type { GlobalTypes } from '@storybook/csf'; const { document } = global; @@ -300,6 +301,13 @@ export const parameters = { export const globalTypes = { viewport: { - viewports: MINIMAL_VIEWPORTS, + options: MINIMAL_VIEWPORTS, }, -}; + + backgrounds: { + options: { + light: { name: 'light', value: '#f7f7f7' }, + dark: { name: 'dark', value: '#333' }, + }, + }, +} satisfies GlobalTypes; diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx similarity index 100% rename from code/addons/backgrounds/src/containers/BackgroundSelector.tsx rename to code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx similarity index 100% rename from code/addons/backgrounds/src/containers/GridSelector.tsx rename to code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx diff --git a/code/addons/backgrounds/src/decorators/withBackground.ts b/code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts similarity index 100% rename from code/addons/backgrounds/src/decorators/withBackground.ts rename to code/addons/backgrounds/src/legacy/withBackgroundLegacy.ts diff --git a/code/addons/backgrounds/src/decorators/withGrid.ts b/code/addons/backgrounds/src/legacy/withGridLegacy.ts similarity index 100% rename from code/addons/backgrounds/src/decorators/withGrid.ts rename to code/addons/backgrounds/src/legacy/withGridLegacy.ts diff --git a/code/addons/backgrounds/src/manager.tsx b/code/addons/backgrounds/src/manager.tsx index d6f3b855506d..91a481f64de1 100644 --- a/code/addons/backgrounds/src/manager.tsx +++ b/code/addons/backgrounds/src/manager.tsx @@ -2,19 +2,24 @@ import React, { Fragment } from 'react'; import { addons, types } from 'storybook/internal/manager-api'; import { ADDON_ID } from './constants'; -import { BackgroundSelector } from './containers/BackgroundSelector'; -import { GridSelector } from './containers/GridSelector'; +import { BackgroundSelector as BackgroundSelectorLegacy } from './legacy/BackgroundSelectorLegacy'; +import { GridSelector as GridSelectorLegacy } from './legacy/GridSelectorLegacy'; +import { BackgroundSelector } from './modern/BackgroundSelectorModern'; +import { GridSelector } from './modern/GridSelectorModern'; addons.register(ADDON_ID, () => { addons.add(ADDON_ID, { title: 'Backgrounds', type: types.TOOL, match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId, - render: () => ( - + render: () => + FEATURES?.backgroundsStoryGlobals ? ( - - - ), + ) : ( + + + + + ), }); }); diff --git a/code/addons/backgrounds/src/modern/BackgroundSelectorModern.tsx b/code/addons/backgrounds/src/modern/BackgroundSelectorModern.tsx new file mode 100644 index 000000000000..a406c1c1c0b0 --- /dev/null +++ b/code/addons/backgrounds/src/modern/BackgroundSelectorModern.tsx @@ -0,0 +1,140 @@ +import React, { useState, memo, Fragment } from 'react'; + +import { useGlobals, useGlobalTypes } 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 } from '../types'; + +type Link = Parameters['0']['links'][0]; +type BackgroundMap = Record; + +const emptyBackgroundMap: BackgroundMap = {}; + +export const BackgroundSelector = memo(function BackgroundSelector() { + const globalTypes = useGlobalTypes(); + const [globals, updateGlobals, storyGlobals] = useGlobals(); + const [isTooltipVisible, setIsTooltipVisible] = useState(false); + + const data = globals[KEY] || {}; + const backgroundMap = (globalTypes[KEY]?.options as any as BackgroundMap) || emptyBackgroundMap; + const backgroundName: string = data.value; + const isGrid = data.grid || false; + + const item = backgroundMap[backgroundName]; + const isLocked = !!storyGlobals?.[KEY]; + const length = Object.keys(backgroundMap).length; + + return ( + + ); +}); + +interface PureProps { + length: number; + backgroundMap: BackgroundMap; + item: Background | undefined; + updateGlobals: ReturnType['1']; + backgroundName: string | undefined; + setIsTooltipVisible: React.Dispatch>; + isLocked: boolean; + isGrid: boolean; + isTooltipVisible: boolean; +} + +const Pure = memo(function PureTool(props: PureProps) { + const { + // + item, + length, + updateGlobals, + setIsTooltipVisible, + backgroundMap, + backgroundName, + isLocked, + isGrid, + isTooltipVisible, + } = props; + return ( + + + updateGlobals({ + [KEY]: { value: backgroundName, grid: !isGrid }, + }) + } + > + + + + {length > 0 ? ( + { + return ( + , + onClick: () => { + updateGlobals({ + [KEY]: { value: undefined, grid: isGrid }, + }); + onHide(); + }, + }, + ] + : []), + ...Object.entries(backgroundMap).map(([k, value]) => ({ + id: k, + title: value.name, + icon: , + active: k === backgroundName, + onClick: () => { + updateGlobals({ + [KEY]: { value: k, grid: isGrid }, + }); + onHide(); + }, + })), + ]} + /> + ); + }} + onVisibleChange={setIsTooltipVisible} + > + + + + + ) : null} + + ); +}); diff --git a/code/addons/backgrounds/src/modern/decorator.ts b/code/addons/backgrounds/src/modern/decorator.ts new file mode 100644 index 000000000000..dab008e0ec50 --- /dev/null +++ b/code/addons/backgrounds/src/modern/decorator.ts @@ -0,0 +1,113 @@ +import { useEffect } from 'storybook/internal/preview-api'; +import type { + Renderer, + PartialStoryFn as StoryFunction, + StoryContext, +} from 'storybook/internal/types'; + +import { PARAM_KEY as KEY } from '../constants'; +import { clearStyles, addBackgroundStyle, isReduceMotionEnabled, addGridStyle } from '../helpers'; +import type { Background } from '../types'; + +const defaultGrid = { + cellSize: 100, + cellAmount: 10, + opacity: 0.8, +}; + +type BackgroundMap = Record; + +const BG_SELECTOR_BASE = `addon-backgrounds`; +const GRID_SELECTOR_BASE = 'addon-backgrounds-grid'; + +export const withBackgroundAndGrid = ( + StoryFn: StoryFunction, + context: StoryContext +) => { + const { globals, globalTypes, parameters } = context; + const data = globals[KEY] || {}; + const backgroundMap = (globalTypes[KEY]?.options as any as BackgroundMap) || {}; + const backgroundName: string = data.value; + const item = backgroundMap[backgroundName]; + const value = item?.value || 'transparent'; + const gridConfig = globalTypes[KEY]?.grid || defaultGrid; + 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'; + + const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded'; + const defaultOffset = viewMode === 'docs' ? 20 : isLayoutPadded ? 16 : 0; + const { + cellAmount, + cellSize, + opacity, + offsetX = defaultOffset, + 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; + + useEffect(() => { + const backgroundStyles = ` + ${backgroundSelector} { + background: ${value} !important; + ${transitionStyle} + }`; + + if (!shownBackground) { + clearStyles(backgroundSelectorId); + return; + } + + addBackgroundStyle(backgroundSelectorId, backgroundStyles, backgroundTarget); + }, [ + backgroundSelector, + backgroundSelectorId, + backgroundTarget, + shownBackground, + transitionStyle, + value, + ]); + + const gridSelectorId = + viewMode === 'docs' ? `${GRID_SELECTOR_BASE}-docs-${id}` : `${GRID_SELECTOR_BASE}`; + useEffect(() => { + if (!isGrid) { + clearStyles(gridSelectorId); + return; + } + const gridSize = [ + `${cellSize * cellAmount}px ${cellSize * cellAmount}px`, + `${cellSize * cellAmount}px ${cellSize * cellAmount}px`, + `${cellSize}px ${cellSize}px`, + `${cellSize}px ${cellSize}px`, + ].join(', '); + + const gridStyles = ` + ${gridSelector} { + background-size: ${gridSize} !important; + background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important; + background-blend-mode: difference !important; + background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px), + linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px), + linear-gradient(rgba(130, 130, 130, ${opacity / 2}) 1px, transparent 1px), + linear-gradient(90deg, rgba(130, 130, 130, ${ + opacity / 2 + }) 1px, transparent 1px) !important; + } + `; + + addGridStyle(gridSelectorId, gridStyles); + }, [cellAmount, cellSize, gridSelector, gridSelectorId, isGrid, offsetX, offsetY, opacity]); + + return StoryFn(); +}; diff --git a/code/addons/backgrounds/src/preview.tsx b/code/addons/backgrounds/src/preview.tsx index b28c5539ecff..9bf3d5c77bb8 100644 --- a/code/addons/backgrounds/src/preview.tsx +++ b/code/addons/backgrounds/src/preview.tsx @@ -1,22 +1,34 @@ import type { Addon_DecoratorFunction } from 'storybook/internal/types'; -import { withBackground } from './decorators/withBackground'; -import { withGrid } from './decorators/withGrid'; +import { withBackground } from './legacy/withBackgroundLegacy'; +import { withGrid } from './legacy/withGridLegacy'; import { PARAM_KEY } from './constants'; +import { withBackgroundAndGrid } from './modern/decorator'; -export const decorators: Addon_DecoratorFunction[] = [withGrid, withBackground]; -export const parameters = { - [PARAM_KEY]: { - grid: { - cellSize: 20, - opacity: 0.5, - cellAmount: 5, - }, - values: [ - { name: 'light', value: '#F8F8F8' }, - { name: 'dark', value: '#333333' }, - ], - }, -}; +export const decorators: Addon_DecoratorFunction[] = FEATURES?.backgroundsStoryGlobals + ? [withBackgroundAndGrid] + : [withGrid, withBackground]; +export const parameters = FEATURES?.backgroundsStoryGlobals + ? {} + : { + [PARAM_KEY]: { + grid: { + cellSize: 20, + opacity: 0.5, + cellAmount: 5, + }, + values: [ + { name: 'light', value: '#F8F8F8' }, + { name: 'dark', value: '#333333' }, + ], + }, + }; + +export const globalTypes = FEATURES?.backgroundsStoryGlobals + ? { + grid: { defaultValue: 0 }, + backgrounds: {}, + } + : {}; export const initialGlobals = { [PARAM_KEY]: null as any, diff --git a/code/addons/backgrounds/template/stories/grid.stories.ts b/code/addons/backgrounds/template/stories/grid.stories.ts index 53e0f4235f28..9a4219618ad4 100644 --- a/code/addons/backgrounds/template/stories/grid.stories.ts +++ b/code/addons/backgrounds/template/stories/grid.stories.ts @@ -6,11 +6,6 @@ export default { args: { label: 'Click Me!', }, - globals: { - backgrounds: { - grid: true, - }, - }, parameters: { backgrounds: { grid: { diff --git a/code/addons/viewport/src/ToolModern.tsx b/code/addons/viewport/src/ToolModern.tsx index 82481e4085a1..ec22869cd6c9 100644 --- a/code/addons/viewport/src/ToolModern.tsx +++ b/code/addons/viewport/src/ToolModern.tsx @@ -1,12 +1,19 @@ import React, { useState, Fragment, useEffect, type FC } from 'react'; import { Global } from 'storybook/internal/theming'; -import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components'; +import { IconButton, WithTooltip, TooltipLinkList, P } from 'storybook/internal/components'; import { useGlobals, type API, useGlobalTypes } from 'storybook/internal/manager-api'; -import { BrowserIcon, GrowIcon, MobileIcon, TabletIcon, TransferIcon } from '@storybook/icons'; +import { + BrowserIcon, + GrowIcon, + MobileIcon, + RefreshIcon, + TabletIcon, + TransferIcon, +} from '@storybook/icons'; import { PARAM_KEY } from './constants'; -import type { ViewportMap, Viewport } from './models'; +import type { Viewport, ViewportMap } from './models'; import { registerShortcuts } from './shortcuts'; import { IconButtonWithLabel, @@ -23,16 +30,15 @@ const iconsMap: Record = { other: , }; -interface PureArgs { - length: number; +interface PureProps { item: Viewport; updateGlobals: ReturnType['1']; + setIsTooltipVisible: React.Dispatch>; viewportMap: ViewportMap; viewportName: any; - setIsTooltipVisible: React.Dispatch>; isLocked: boolean; isActive: boolean; - viewportRotated: any; + isRotated: any; width: string; height: string; } @@ -42,22 +48,24 @@ type Link = Parameters['0']['links'][0]; const emptyViewportMap: ViewportMap = {}; export const ViewportTool: FC<{ api: API }> = ({ api }) => { - const [isTooltipVisible, setIsTooltipVisible] = useState(false); const globalTypes = useGlobalTypes(); const [globals, updateGlobals, storyGlobals] = useGlobals(); + const [isTooltipVisible, setIsTooltipVisible] = useState(false); + + const viewportMap = (globalTypes[PARAM_KEY]?.options as any as ViewportMap) || emptyViewportMap; + const data = globals?.[PARAM_KEY] || {}; + const viewportName: string = data.value; + const isRotated: boolean = data.isRotated; + const item = viewportMap[viewportName] || responsiveViewport; + const isActive = isTooltipVisible || item !== responsiveViewport; const isLocked = PARAM_KEY in storyGlobals; - const viewportMap: ViewportMap = globalTypes?.viewport?.viewports || emptyViewportMap; - const viewportName = globals?.viewport; - const viewportRotated = globals?.viewportRotated; - const item = viewportMap?.[viewportName] || responsiveViewport; const length = Object.keys(viewportMap).length; - const isActive = isTooltipVisible || item !== responsiveViewport; useEffect(() => { - registerShortcuts(api, globals.viewport, updateGlobals, Object.keys(viewportMap)); - }, [viewportMap, globals.viewport, updateGlobals, api]); + registerShortcuts(api, viewportName, updateGlobals, Object.keys(viewportMap)); + }, [viewportMap, viewportName, updateGlobals, api]); if (item.styles === null || !viewportMap || length < 1) { return null; @@ -70,21 +78,20 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => { return null; } - const width = viewportRotated ? item.styles.height : item.styles.width; - const height = viewportRotated ? item.styles.width : item.styles.height; + const width = isRotated ? item.styles.height : item.styles.width; + const height = isRotated ? item.styles.width : item.styles.height; return ( = ({ api }) => { ); }; -const Pure = React.memo(function PureTool(props: PureArgs) { +const Pure = React.memo(function PureTool(props: PureProps) { const { item, - length, viewportMap, viewportName, - viewportRotated, + isRotated, updateGlobals, setIsTooltipVisible, isLocked, @@ -118,11 +124,9 @@ const Pure = React.memo(function PureTool(props: PureArgs) { { id: 'reset', title: 'Reset viewport', + icon: , onClick: () => { - updateGlobals({ - viewport: undefined, - viewportRotated: false, - }); + updateGlobals({ [PARAM_KEY]: { value: undefined, isRotated: false } }); onHide(); }, }, @@ -134,10 +138,7 @@ const Pure = React.memo(function PureTool(props: PureArgs) { icon: iconsMap[value.type], active: k === viewportName, onClick: () => { - updateGlobals({ - viewport: k, - viewportRotated: false, - }); + updateGlobals({ [PARAM_KEY]: { value: k, isRotated: false } }); onHide(); }, })), @@ -153,16 +154,13 @@ const Pure = React.memo(function PureTool(props: PureArgs) { title="Change the size of the preview" active={isActive} onDoubleClick={() => { - updateGlobals({ - viewport: undefined, - viewportRotated: false, - }); + updateGlobals({ [PARAM_KEY]: { value: undefined, isRotated: false } }); }} > {item !== responsiveViewport ? ( - {item.name} {viewportRotated ? `(L)` : `(P)`} + {item.name} {isRotated ? `(L)` : `(P)`} ) : null} @@ -184,7 +182,7 @@ const Pure = React.memo(function PureTool(props: PureArgs) { key="viewport-rotate" title="Rotate viewport" onClick={() => { - updateGlobals({ viewportRotated: !viewportRotated }); + updateGlobals({ [PARAM_KEY]: { value: viewportName, isRotated: !isRotated } }); }} > diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts index 4e8ba9fd8319..b1743f30eebf 100644 --- a/code/addons/viewport/template/stories/globals.stories.ts +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -19,21 +19,27 @@ export const Unset = { }; export const Selected = { globals: { - viewport: first, + viewport: { + value: first, + }, viewportRotated: false, }, }; export const Orientation = { globals: { - viewport: first, - viewportRotated: true, + viewport: { + value: first, + isRotated: true, + }, }, }; export const Missing = { globals: { - viewport: 'phone', - viewportRotated: false, + viewport: { + value: 'phone', + isRotated: false, + }, }, }; diff --git a/code/addons/viewport/typings.d.ts b/code/addons/viewport/typings.d.ts new file mode 100644 index 000000000000..fd2745705bb4 --- /dev/null +++ b/code/addons/viewport/typings.d.ts @@ -0,0 +1,7 @@ +declare module '@storybook/csf' { + interface GlobalTypes { + viewport: { + options: Array<{ id: string }>; + }; + } +} diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts index 874c52b11ad7..5f4503877fc2 100644 --- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts +++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts @@ -72,7 +72,7 @@ export class StoryRender implements Render, private callbacks: RenderContextCallbacks & { showStoryDuringRender?: () => void }, public id: StoryId, - public viewMode: StoryContext['viewMode'], + public viewMode: StoryContext['viewMode'], public renderOptions: StoryRenderOptions = { autoplay: true, forceInitialArgs: false }, story?: PreparedStory ) { diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts index 9278477e27e8..45137207636d 100644 --- a/code/core/src/preview-api/modules/store/StoryStore.ts +++ b/code/core/src/preview-api/modules/store/StoryStore.ts @@ -236,6 +236,7 @@ export class StoryStore { ...story, args: forceInitialArgs ? story.initialArgs : this.args.get(story.id), initialGlobals, + globalTypes: this.projectAnnotations.globalTypes, userGlobals, globals: { ...userGlobals, diff --git a/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts b/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts index a34c0aaaaaaa..69216ae049d0 100644 --- a/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts +++ b/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts @@ -32,4 +32,4 @@ export const normalizeInputType = (inputType: InputType, key: string): StrictInp export const normalizeInputTypes = ( inputTypes: ArgTypes | GlobalTypes -): StrictArgTypes | StrictGlobalTypes => mapValues(inputTypes, normalizeInputType); +): StrictArgTypes | StrictGlobalTypes => mapValues(inputTypes, normalizeInputType) as any; diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts index 37893aa4c035..70747b4a6c87 100644 --- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts +++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts @@ -132,6 +132,7 @@ export function composeStory story.runStep(label, play, context), canvasElement: globalThis?.document?.body, canvas: {} as Canvas, + globalTypes: normalizedProjectAnnotations.globalTypes, ...story, context: null!, mount: null!, diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts index c740dc624f82..77bbb4f26759 100644 --- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts +++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts @@ -115,7 +115,7 @@ export function prepareStory( throw new NoRenderFunctionError({ id }); } - const defaultMount = (context: StoryContext) => { + const defaultMount = (context: StoryContext) => { return async () => { await context.renderToCanvas(); return context.canvas; From 32a2d3dcb1ed0aa2f091d056b9275e4b09948316 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 23 Jul 2024 19:27:59 +0200 Subject: [PATCH 057/105] cleanup --- .../viewport/src/{ToolModern.tsx => Tool.tsx} | 28 ++++--------------- .../viewport/src/{ => legacy}/ToolLegacy.tsx | 9 +++--- code/addons/viewport/src/manager.tsx | 4 +-- code/addons/viewport/src/models/Viewport.ts | 1 + .../src/models/ViewportAddonParameter.ts | 1 + code/addons/viewport/src/models/index.ts | 2 -- code/addons/viewport/src/preview.ts | 4 ++- .../viewport/src/{ToolUtils.tsx => utils.tsx} | 14 ++++++++++ .../template/stories/globals.stories.ts | 3 +- 9 files changed, 33 insertions(+), 33 deletions(-) rename code/addons/viewport/src/{ToolModern.tsx => Tool.tsx} (91%) rename code/addons/viewport/src/{ => legacy}/ToolLegacy.tsx (95%) delete mode 100644 code/addons/viewport/src/models/index.ts rename code/addons/viewport/src/{ToolUtils.tsx => utils.tsx} (67%) diff --git a/code/addons/viewport/src/ToolModern.tsx b/code/addons/viewport/src/Tool.tsx similarity index 91% rename from code/addons/viewport/src/ToolModern.tsx rename to code/addons/viewport/src/Tool.tsx index ec22869cd6c9..47e1b31288f5 100644 --- a/code/addons/viewport/src/ToolModern.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -4,31 +4,19 @@ import { Global } from 'storybook/internal/theming'; import { IconButton, WithTooltip, TooltipLinkList, P } from 'storybook/internal/components'; import { useGlobals, type API, useGlobalTypes } from 'storybook/internal/manager-api'; -import { - BrowserIcon, - GrowIcon, - MobileIcon, - RefreshIcon, - TabletIcon, - TransferIcon, -} from '@storybook/icons'; +import { GrowIcon, RefreshIcon, TransferIcon } from '@storybook/icons'; import { PARAM_KEY } from './constants'; -import type { Viewport, ViewportMap } from './models'; import { registerShortcuts } from './shortcuts'; import { IconButtonWithLabel, IconButtonLabel, ActiveViewportSize, ActiveViewportLabel, -} from './ToolUtils'; + iconsMap, + emptyViewportMap, +} from './utils'; import { responsiveViewport } from './responsiveViewport'; - -const iconsMap: Record = { - desktop: , - mobile: , - tablet: , - other: , -}; +import type { Viewport, ViewportMap } from './models/Viewport'; interface PureProps { item: Viewport; @@ -45,8 +33,6 @@ interface PureProps { type Link = Parameters['0']['links'][0]; -const emptyViewportMap: ViewportMap = {}; - export const ViewportTool: FC<{ api: API }> = ({ api }) => { const globalTypes = useGlobalTypes(); const [globals, updateGlobals, storyGlobals] = useGlobals(); @@ -187,9 +173,7 @@ const Pure = React.memo(function PureTool(props: PureProps) { > - ) : ( - / - )} + ) : null} {height.replace('px', '')} diff --git a/code/addons/viewport/src/ToolLegacy.tsx b/code/addons/viewport/src/legacy/ToolLegacy.tsx similarity index 95% rename from code/addons/viewport/src/ToolLegacy.tsx rename to code/addons/viewport/src/legacy/ToolLegacy.tsx index a3acf3eb6453..d75545bf0dda 100644 --- a/code/addons/viewport/src/ToolLegacy.tsx +++ b/code/addons/viewport/src/legacy/ToolLegacy.tsx @@ -8,10 +8,11 @@ import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/com import { useStorybookApi, useParameter, useGlobals } from 'storybook/internal/manager-api'; import { GrowIcon, TransferIcon } from '@storybook/icons'; -import { registerShortcuts } from './shortcuts'; -import { PARAM_KEY } from './constants'; -import { MINIMAL_VIEWPORTS } from './defaults'; -import type { ViewportAddonParameter, ViewportMap, ViewportStyles, Styles } from './models'; +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'; interface ViewportItem { id: string; diff --git a/code/addons/viewport/src/manager.tsx b/code/addons/viewport/src/manager.tsx index c7b30fd52cf6..db8ae13f670d 100644 --- a/code/addons/viewport/src/manager.tsx +++ b/code/addons/viewport/src/manager.tsx @@ -3,8 +3,8 @@ import { addons, types } from 'storybook/internal/manager-api'; import { ADDON_ID } from './constants'; -import { ViewportTool as LegacyViewportTool } from './ToolLegacy'; -import { ViewportTool as ModernViewportTool } from './ToolModern'; +import { ViewportTool as LegacyViewportTool } from './legacy/ToolLegacy'; +import { ViewportTool as ModernViewportTool } from './Tool'; addons.register(ADDON_ID, (api) => { addons.add(ADDON_ID, { diff --git a/code/addons/viewport/src/models/Viewport.ts b/code/addons/viewport/src/models/Viewport.ts index 7b3c98e069c9..28f507832437 100644 --- a/code/addons/viewport/src/models/Viewport.ts +++ b/code/addons/viewport/src/models/Viewport.ts @@ -1,3 +1,4 @@ +// TODO: remove the function type from styles in 9.0 export type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null; export interface Viewport { diff --git a/code/addons/viewport/src/models/ViewportAddonParameter.ts b/code/addons/viewport/src/models/ViewportAddonParameter.ts index 875ca46fbc7d..8d52dde2cc6d 100644 --- a/code/addons/viewport/src/models/ViewportAddonParameter.ts +++ b/code/addons/viewport/src/models/ViewportAddonParameter.ts @@ -1,5 +1,6 @@ import type { ViewportMap } from './Viewport'; +// TODO: remove at 9.0 export interface ViewportAddonParameter { disable?: boolean; defaultOrientation?: 'portrait' | 'landscape'; diff --git a/code/addons/viewport/src/models/index.ts b/code/addons/viewport/src/models/index.ts deleted file mode 100644 index 7eb7ed1a6942..000000000000 --- a/code/addons/viewport/src/models/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type * from './Viewport'; -export type * from './ViewportAddonParameter'; diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts index a429414748df..b6174aac890c 100644 --- a/code/addons/viewport/src/preview.ts +++ b/code/addons/viewport/src/preview.ts @@ -1 +1,3 @@ -export const initialGlobals = { viewport: 'reset', viewportRotated: false }; +export const initialGlobals = { + viewport: { value: 'reset', isRotated: false }, +}; diff --git a/code/addons/viewport/src/ToolUtils.tsx b/code/addons/viewport/src/utils.tsx similarity index 67% rename from code/addons/viewport/src/ToolUtils.tsx rename to code/addons/viewport/src/utils.tsx index 3eddb0ab631e..b6f47ad62b05 100644 --- a/code/addons/viewport/src/ToolUtils.tsx +++ b/code/addons/viewport/src/utils.tsx @@ -1,6 +1,11 @@ +import React, { Fragment } from 'react'; + 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'; + export const ActiveViewportSize = styled.div(() => ({ display: 'inline-flex', alignItems: 'center', @@ -29,3 +34,12 @@ export const IconButtonLabel = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s2 - 1, marginLeft: 10, })); + +export const iconsMap: Record = { + desktop: , + mobile: , + tablet: , + other: , +}; + +export const emptyViewportMap: ViewportMap = {}; diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts index b1743f30eebf..69a21ac600a8 100644 --- a/code/addons/viewport/template/stories/globals.stories.ts +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -8,7 +8,6 @@ export default { args: { label: 'Click Me!', }, - globals: {}, parameters: { chromatic: { disable: true }, }, @@ -21,8 +20,8 @@ export const Selected = { globals: { viewport: { value: first, + isRotated: false, }, - viewportRotated: false, }, }; From 999b61925ed183338b8fa85a7f7a2d51822b39d9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 23 Jul 2024 19:30:32 +0200 Subject: [PATCH 058/105] cleanup --- code/addons/viewport/src/legacy/ToolLegacy.tsx | 2 +- code/addons/viewport/src/manager.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/addons/viewport/src/legacy/ToolLegacy.tsx b/code/addons/viewport/src/legacy/ToolLegacy.tsx index d75545bf0dda..db35ddb1a9d9 100644 --- a/code/addons/viewport/src/legacy/ToolLegacy.tsx +++ b/code/addons/viewport/src/legacy/ToolLegacy.tsx @@ -115,7 +115,7 @@ const getStyles = ( return isRotated ? flip(result) : result; }; -export const ViewportTool: FC = () => { +export const ViewportToolLegacy: FC = () => { const [globals, updateGlobals, storyGlobals] = useGlobals(); const isDisabled = PARAM_KEY in storyGlobals; diff --git a/code/addons/viewport/src/manager.tsx b/code/addons/viewport/src/manager.tsx index db8ae13f670d..96cb4c1600a3 100644 --- a/code/addons/viewport/src/manager.tsx +++ b/code/addons/viewport/src/manager.tsx @@ -3,8 +3,8 @@ import { addons, types } from 'storybook/internal/manager-api'; import { ADDON_ID } from './constants'; -import { ViewportTool as LegacyViewportTool } from './legacy/ToolLegacy'; -import { ViewportTool as ModernViewportTool } from './Tool'; +import { ViewportToolLegacy } from './legacy/ToolLegacy'; +import { ViewportTool } from './Tool'; addons.register(ADDON_ID, (api) => { addons.add(ADDON_ID, { @@ -12,6 +12,6 @@ addons.register(ADDON_ID, (api) => { type: types.TOOL, match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId, render: () => - FEATURES?.viewportStoryGlobals ? : , + FEATURES?.viewportStoryGlobals ? : , }); }); From 4f9967d8d5eaddb33f4956c6d23704c5e1f89130 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 23 Jul 2024 20:22:48 +0200 Subject: [PATCH 059/105] 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', From 6eaeb7461a553e56d066e804b91442be2dfc1766 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 24 Jul 2024 11:03:04 +0200 Subject: [PATCH 060/105] add --- code/.storybook/preview.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index fad002bf587e..850835488f32 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -303,11 +303,21 @@ export const globalTypes = { viewport: { options: MINIMAL_VIEWPORTS, }, - backgrounds: { options: { light: { name: 'light', value: '#f7f7f7' }, dark: { name: 'dark', value: '#333' }, }, + grid: { + cellSize: 15, + cellAmount: 10, + opacity: 0.8, + }, }, } satisfies GlobalTypes; + +export const initialGlobals = { + // theme: 'light', + // viewport: { value: 'mobile1', isRotated: false }, + // backgrounds: { value: 'dark', grid: false }, +} as const; From eba71834417fc89e5109e4b0591607b64eb4eca2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 24 Jul 2024 16:18:13 +0200 Subject: [PATCH 061/105] change back to use parameters for addon config --- code/.storybook/preview.tsx | 22 ++++- .../backgrounds/src/components/Tool.tsx | 20 +++-- code/addons/backgrounds/src/decorator.ts | 38 +++------ code/addons/backgrounds/src/preview.ts | 64 +++++++------- code/addons/backgrounds/src/types.ts | 16 ++++ .../template/stories/globals.stories.ts | 84 ++++++++++++++++--- .../template/stories/grid.stories.ts | 52 ------------ .../template/stories/parameters.stories.ts | 7 +- code/addons/viewport/src/components/Tool.tsx | 44 +++++----- code/addons/viewport/src/defaults.ts | 2 +- code/addons/viewport/src/index.ts | 2 +- code/addons/viewport/src/preview.ts | 4 +- code/addons/viewport/src/types.ts | 12 ++- .../template/stories/globals.stories.ts | 14 +++- .../template/stories/parameters.stories.ts | 3 + 15 files changed, 223 insertions(+), 161 deletions(-) delete mode 100644 code/addons/backgrounds/template/stories/grid.stories.ts diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 850835488f32..479d493b0a44 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -297,9 +297,6 @@ export const parameters = { 'slategray', ], }, -}; - -export const globalTypes = { viewport: { options: MINIMAL_VIEWPORTS, }, @@ -314,7 +311,24 @@ export const globalTypes = { opacity: 0.8, }, }, -} satisfies GlobalTypes; +}; + +// export const globalTypes = { +// viewport: { +// options: MINIMAL_VIEWPORTS, +// }, +// backgrounds: { +// options: { +// light: { name: 'light', value: '#f7f7f7' }, +// dark: { name: 'dark', value: '#333' }, +// }, +// grid: { +// cellSize: 15, +// cellAmount: 10, +// opacity: 0.8, +// }, +// }, +// } satisfies GlobalTypes; export const initialGlobals = { // theme: 'light', diff --git a/code/addons/backgrounds/src/components/Tool.tsx b/code/addons/backgrounds/src/components/Tool.tsx index ef9a6f632057..83e6118817e7 100644 --- a/code/addons/backgrounds/src/components/Tool.tsx +++ b/code/addons/backgrounds/src/components/Tool.tsx @@ -1,36 +1,40 @@ import React, { useState, memo, Fragment } from 'react'; -import { useGlobals, useGlobalTypes } from 'storybook/internal/manager-api'; +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 } from '../types'; +import type { Background, BackgroundMap, Config } from '../types'; type Link = Parameters['0']['links'][0]; -type BackgroundMap = Record; const emptyBackgroundMap: BackgroundMap = {}; export const BackgroundTool = memo(function BackgroundSelector() { - const globalTypes = useGlobalTypes(); + const config = useParameter(KEY); const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); + const { options = emptyBackgroundMap, disabled } = config || {}; + + if (disabled) { + return null; + } + const data = globals[KEY] || {}; - const backgroundMap = (globalTypes[KEY]?.options as any as BackgroundMap) || emptyBackgroundMap; const backgroundName: string = data.value; const isGrid = data.grid || false; - const item = backgroundMap[backgroundName]; + const item = options[backgroundName]; const isLocked = !!storyGlobals?.[KEY]; - const length = Object.keys(backgroundMap).length; + const length = Object.keys(options).length; return ( , context: StoryContext ) => { - const { globals, globalTypes, parameters, viewMode, id } = context; + const { globals, parameters, viewMode, id } = context; + const { options = {}, disable, grid = defaultGrid } = (parameters[KEY] || {}) as Config; const data = globals[KEY] || {}; - const backgroundMap = (globalTypes[KEY]?.options as any as BackgroundMap) || {}; const backgroundName: string = data.value; - const item = backgroundMap[backgroundName]; + + const item = options[backgroundName]; const value = item?.value || 'transparent'; - const gridConfig = globalTypes[KEY]?.grid || defaultGrid; - const isGrid = data.grid || false; - const shownBackground = !!item; + + const showGrid = data.grid || false; + const shownBackground = !!item && !disable; const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main'; const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main'; const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded'; const defaultOffset = viewMode === 'docs' ? 20 : isLayoutPadded ? 16 : 0; - const { - cellAmount, - cellSize, - opacity, - offsetX = defaultOffset, - offsetY = defaultOffset, - } = gridConfig; + const { cellAmount, cellSize, opacity, offsetX = defaultOffset, offsetY = defaultOffset } = grid; const backgroundSelectorId = viewMode === 'docs' ? `${BG_SELECTOR_BASE}-docs-${id}` : `${BG_SELECTOR_BASE}-color`; @@ -66,19 +61,12 @@ export const withBackgroundAndGrid = ( } addBackgroundStyle(backgroundSelectorId, backgroundStyles, backgroundTarget); - }, [ - backgroundSelector, - backgroundSelectorId, - backgroundTarget, - shownBackground, - transitionStyle, - value, - ]); + }, [backgroundSelector, backgroundSelectorId, backgroundTarget, shownBackground, value]); const gridSelectorId = viewMode === 'docs' ? `${GRID_SELECTOR_BASE}-docs-${id}` : `${GRID_SELECTOR_BASE}`; useEffect(() => { - if (!isGrid) { + if (!showGrid) { clearStyles(gridSelectorId); return; } @@ -104,7 +92,7 @@ export const withBackgroundAndGrid = ( `; addGridStyle(gridSelectorId, gridStyles); - }, [cellAmount, cellSize, gridSelector, gridSelectorId, isGrid, offsetX, offsetY, opacity]); + }, [cellAmount, cellSize, gridSelector, gridSelectorId, showGrid, offsetX, offsetY, opacity]); return StoryFn(); }; diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts index 2a842f4f0963..ee7a314b2f90 100644 --- a/code/addons/backgrounds/src/preview.ts +++ b/code/addons/backgrounds/src/preview.ts @@ -9,38 +9,40 @@ export const decorators: Addon_DecoratorFunction[] = FEATURES?.backgroundsStoryG : [withGrid, withBackground]; // TODO: remove in 9.0 -export const parameters = FEATURES?.backgroundsStoryGlobals - ? {} - : { - [PARAM_KEY]: { - grid: { - cellSize: 20, - opacity: 0.5, - cellAmount: 5, - }, - values: [ - { name: 'light', value: '#F8F8F8' }, - { name: 'dark', value: '#333333' }, - ], - }, - }; +export const parameters = { + [PARAM_KEY]: { + grid: { + cellSize: 20, + opacity: 0.5, + cellAmount: 5, + }, + values: [ + { name: 'light', value: '#F8F8F8' }, + { name: 'dark', value: '#333333' }, + ], + }, +}; + +// // TODO: remove feature flag in 9.0 +// export const globalTypes = FEATURES?.backgroundsStoryGlobals +// ? { +// [PARAM_KEY]: { +// grid: { +// cellSize: 20, +// opacity: 0.5, +// cellAmount: 5, +// }, +// values: [ +// { name: 'light', value: '#F8F8F8' }, +// { name: 'dark', value: '#333333' }, +// ], +// }, +// } +// : {}; -// TODO: remove feature flag in 9.0 -export const globalTypes = FEATURES?.backgroundsStoryGlobals - ? { - [PARAM_KEY]: { - grid: { - cellSize: 20, - opacity: 0.5, - cellAmount: 5, - }, - values: [ - { name: 'light', value: '#F8F8F8' }, - { name: 'dark', value: '#333333' }, - ], - }, - } - : {}; +export const globalTypes = { + [PARAM_KEY]: {}, +}; export const initialGlobals = { [PARAM_KEY]: null as any, diff --git a/code/addons/backgrounds/src/types.ts b/code/addons/backgrounds/src/types.ts index 08e1119b0948..6ca7bb99a50d 100644 --- a/code/addons/backgrounds/src/types.ts +++ b/code/addons/backgrounds/src/types.ts @@ -35,3 +35,19 @@ export interface BackgroundsConfig { defaultBackgroundName: string | null; disable: boolean; } + +export type BackgroundMap = Record; + +export interface GridConfig { + cellAmount: number; + cellSize: number; + opacity: number; + offsetX?: number; + offsetY?: number; +} + +export interface Config { + options: BackgroundMap; + disabled: boolean; + grid: GridConfig; +} diff --git a/code/addons/backgrounds/template/stories/globals.stories.ts b/code/addons/backgrounds/template/stories/globals.stories.ts index b1b14b705de1..1e9711ce7619 100644 --- a/code/addons/backgrounds/template/stories/globals.stories.ts +++ b/code/addons/backgrounds/template/stories/globals.stories.ts @@ -1,38 +1,98 @@ import { global as globalThis } from '@storybook/global'; -const img = - 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; - export default { - component: globalThis.Components.Button, + component: globalThis.Components.Pre, args: { - label: 'Click Me!', + text: 'Testing the background', }, parameters: { chromatic: { disable: true }, + backgrounds: { + options: { + red: { name: 'light', value: 'red' }, + darker: { name: 'darker', value: '#000' }, + }, + }, }, }; -export const Name = { +export const Set = { globals: { backgrounds: { value: 'red' }, }, }; -export const Hex = { +export const SetAndCustom = { + parameters: { + backgrounds: { + options: { + pink: { value: '#F99CB4', name: 'pink' }, + }, + }, + }, globals: { - backgrounds: { value: '#F99CB4' }, + backgrounds: { value: 'pink' }, + }, +}; + +export const UnsetCustom = { + parameters: { + backgrounds: { + options: { + pink: { value: '#d45a00', name: 'hot' }, + }, + }, + }, +}; + +export const Disabled = { + parameters: { + backgrounds: { + disabled: true, + }, }, }; -export const Gradient = { +export const Grid = { globals: { - backgrounds: { value: 'linear-gradient(90deg, #CA005E 0%, #863783 50%, #112396)' }, + backgrounds: { grid: true }, }, }; -export const Image = { +export const GridAndBackground = { + globals: { + backgrounds: { grid: true, value: 'darker' }, + }, +}; + +export const GridConfig = { + parameters: { + backgrounds: { + grid: { + cellSize: 100, + cellAmount: 10, + opacity: 0.8, + }, + }, + }, + globals: { + backgrounds: { grid: true, value: 'light' }, + }, +}; + +export const GridOffset = { + parameters: { + backgrounds: { + grid: { + cellSize: 100, + cellAmount: 10, + opacity: 0.8, + offsetX: 50, + offsetY: 50, + }, + }, + }, globals: { - backgrounds: { value: `#000 center / cover no-repeat url(data:image/svg+xml;base64,${img})` }, + backgrounds: { grid: true, value: 'light' }, }, }; diff --git a/code/addons/backgrounds/template/stories/grid.stories.ts b/code/addons/backgrounds/template/stories/grid.stories.ts deleted file mode 100644 index 9a4219618ad4..000000000000 --- a/code/addons/backgrounds/template/stories/grid.stories.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { global as globalThis } from '@storybook/global'; - -export default { - title: 'Grid', - component: globalThis.Components.Button, - args: { - label: 'Click Me!', - }, - parameters: { - backgrounds: { - grid: { - cellSize: 10, - cellAmount: 4, - opacity: 0.2, - }, - }, - chromatic: { disable: true }, - }, -}; - -export const Basic = { - parameters: {}, -}; - -export const Custom = { - parameters: { - backgrounds: { - grid: { - cellSize: 100, - cellAmount: 10, - opacity: 0.8, - }, - }, - }, -}; - -// Grid should have an offset of 0 when in fullscreen -export const Fullscreen = { - parameters: { - layout: 'fullscreen', - }, -}; - -export const Disabled = { - parameters: { - backgrounds: { - grid: { - disable: true, - }, - }, - }, -}; diff --git a/code/addons/backgrounds/template/stories/parameters.stories.ts b/code/addons/backgrounds/template/stories/parameters.stories.ts index b23ad67000c3..16f8b13d66c5 100644 --- a/code/addons/backgrounds/template/stories/parameters.stories.ts +++ b/code/addons/backgrounds/template/stories/parameters.stories.ts @@ -1,5 +1,8 @@ import { global as globalThis } from '@storybook/global'; +// these stories only work with `backgroundsStoryGlobals` set to false +// because the `default` prop is dropped and because, `values` changed to `options` and is now an object + const img = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTkwIDQ3NSIgZmlsbD0ibm9uZSI+CiAgPGcgaWQ9ImNvbXBvbmVudC1jb21wb3NpdGlvbiI+CiAgICA8bWFzayBpZD0iY29tcG9uZW50cyIgd2lkdGg9IjcxMSIgaGVpZ2h0PSI2NjciIHg9Ii01MiIgeT0iLTg2IiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY1OC4wMiAxODEuNDAzbC00NC4zMTItLjAwMS0uMDAxIDEzMi4xODVoNDQuMzEzdjQ1LjA2NmgtNDQuMzEybC0uMDAxIDEzMi45MzktODguNjI1LS4wMDEtLjAwMSA4OC42MjZoLTQ1LjA2NnYtNDQuMzEybC00NC4zMTItLjAwMXYtNDQuMzEzaC04Ny44NzJsLS4wMDEgNDQuMzEzLTQ0LjMxMi4wMDF2NDQuMzEyaC00NS4wNjZ2LTQ0LjMxM2gtNDQuMzEzdi00NC4zMTJsLTQzLjU1OC0uMDAxLS4wMDIgNDQuMzEzaC00NS4wNjZsLjAwMS00NC4zMTMtNDMuNTYuMDAxdjQ0LjMxMkgzNi44ODh2LTQ0LjMxM2wtNDMuNTYuMDAxdjg4LjYyNWgtNDUuMDY2VjM1Ny45aDQ0LjMxNHYtNDMuNTU5aC00NC4zMTN2LTQ1LjA2Nmg0NC4zMTNWMTM3LjA5aC00NC4zMTNWOTIuMDI0bDQ0LjMxMy0uMDAxVjQuMTUyaC00NC4zMTN2LTQ1LjA2NkgzNy42NFYzLjM5OEgyMTQuMTRsLS4wMDEtNDQuMzEyaDQ1LjA2NlYzLjM5OGgyMjAuODExbC0uMDAxLTg4LjYyNWg0NS4wNjZsLjAwMSA0NC4zMTNoNDQuMzEybC4wMDEgNDQuMzEyaDQ0LjMxMmwuMDAxIDg4LjYyNWg0NC4zMTJ2ODkuMzh6TTM2Ljg4OCAzNTcuOVYyMjUuNzE2aC00My41NnY0NC4zMTJoLTQ0LjMxMnY0My41Nmw0NC4zMTMtLjAwMVYzNTcuOWg0My41NnptMCA4OC42MjV2LTg3Ljg3MmgtODcuODcydjg3Ljg3Mmg4Ny44NzJ6bTAtMjIxLjU2M1Y5Mi43NzdoLTg3Ljg3MnY0My41Nmw0NC4zMTMtLjAwMXY4OC42MjZoNDMuNTU5ek04MS4yIDQ3LjcxMVY0LjE1SDM2Ljg4OFYtNDAuMTZoLTg3Ljg3MnY0My41Nmg0NC4zMTNWNDcuNzFIODEuMnpNMzYuODg4IDQ5MC44Mzl2LTQzLjU2aC04Ny44NzJ2MTMyLjE4NWg0My41NnYtODguNjI2bDQ0LjMxMi4wMDF6bTg4LjYyNi0zOTguMDYySDgxLjIwMVY0OC40NjRILTYuNjcxdjQzLjU2SDM3LjY0djQ0LjMxMmg4Ny44NzN2LTQzLjU2em0tLjAwMSAxMzIuMTg1di00My41NmwtNDQuMzEyLjAwMVYxMzcuMDlIMzcuNjR2MTMyLjE4NGg0My41NnYtNDQuMzEyaDQ0LjMxMnptMCAyNjUuODc2di00My41NTlIODEuMjAxdi00NC4zMTNIMzcuNjR2MTMyLjE4NWg0My41NnYtNDQuMzEzaDQ0LjMxMnptLjAwMS0xNzcuMjUxdi00My41NTlIMzcuNjQydjEzMi4xODVIODEuMnYtODguNjI2aDQ0LjMxM3ptODguNjI1LTEzMi45MzhsLjAwMS00My41NTlIODEuOTU1bC0uMDAxIDQzLjU1OWg0NC4zMTN2NDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04OC42MjVWNC4xNTJIODEuOTU0djQzLjU2bDg4LjYyNS0uMDAxLjAwMSA0NC4zMTJoNDMuNTU5em0wIDE3Ny4yNXYtNDMuNTU5SDgxLjk1NHY0My41NTlIMjE0LjE0em0wLTEzMi45Mzh2LTQzLjU2bC00NC4zMTMuMDAxVjQ4LjQ2NEg4MS45NTR2NDMuNTZoNDQuMzEzdjQ0LjMxMmg4Ny44NzJ6bS00NC4zMTMgMjY1Ljg3N3YtNDMuNTZoLTQ0LjMxM2wuMDAxLTQ0LjMxMmgtNDMuNTZ2MTMyLjE4NGw0My41NTkuMDAxdi00NC4zMTNoNDQuMzEzem00NC4zMTMtNDQuMzEzdi04Ny44NzJoLTg3Ljg3MlYzNTcuOWg4Ny44NzJ6bTAgODguNjI2di00My41NmgtODcuODcydjEzMi4xODVoNDMuNTU5di04OC42MjVoNDQuMzEzem04OC42MjYtMjY1Ljg3N2wtLjAwMS00My41NTloLTg3Ljg3MnY0NC4zMTNIMTcwLjU4djQzLjU1OWg4Ny44NzJ2LTQ0LjMxM2g0NC4zMTN6bTAgMzEwLjE4OXYtNDMuNTU5SDE3MC41OHY0My41NTloNDQuMzEybC4wMDEgNDQuMzEzaDQzLjU1OXYtNDQuMzEzaDQ0LjMxM3ptMC04Ny44NzJoLTQ0LjMxM3YtNDQuMzEzSDE3MC41OHY0My41Nmg0NC4zMTJsLjAwMSA0NC4zMTJoODcuODcydi00My41NTl6bTQ0LjMxMi0yMjIuMzE3bC4wMDEtODcuODcySDIxNC44OTJ2NDMuNTZsODguNjI2LS4wMDEuMDAxIDQ0LjMxM2g0My41NTh6TTMwMi43NjQgNDcuNzExVjQuMTVoLTQ0LjMxMmwtLjAwMS00NC4zMTJoLTQzLjU1OVY5Mi4wMjRsNDMuNTYtLjAwMVY0Ny43MWg0NC4zMTJ6bS00NC4zMTMgMjIxLjU2NGwuMDAxLTQzLjU2aC00My41NTl2NDMuNTU5bDQzLjU1OC4wMDF6bTg4LjYyNyA4OC42MjVsLS4wMDEtNDMuNTU5SDIxNC44OTNWMzU3LjloMTMyLjE4NXptLTg3Ljg3My04Ny44NzJoLTQ0LjMxM3Y0My41NTloODcuODcyVjE4MS40MDJsLTQzLjU1OS4wMDF2ODguNjI1ek0zOTEuMzkgNDcuNzExVjQuMTUxaC04Ny44NzJ2NDQuMzEzaC00NC4zMTN2NDMuNTZoODcuODcyVjQ3LjcxaDQ0LjMxM3ptLTg4LjYyNSAzNTQuNTAydi00My41NmgtNDMuNTZ2NDMuNTZoNDMuNTZ6bTQ0LjMxMiAxMzIuOTM4di04Ny44NzJoLTQzLjU1OXY0NC4zMTNoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZsLS4wMDEtNDQuMzEzaDQ0LjMxM3ptNDQuMzEyLTEzMi45MzhsLjAwMS00My41NmgtODcuODcydjg3Ljg3Mmg0My41NTl2LTQ0LjMxMmg0NC4zMTJ6bTAtNDQuMzEzdi04Ny44NzJoLTQ0LjMxMnYtNDQuMzEzaC00My41NTh2ODcuODcyaDQ0LjMxMVYzNTcuOWg0My41NTl6bTQ0LjMxNC0xMzIuOTM4di00My41NkgzMDMuNTE4djQzLjU2aDQ0LjMxMmwuMDAxIDQ0LjMxMmg0My41NTl2LTQ0LjMxMmg0NC4zMTN6bTAgMjIxLjU2M1YzMTQuMzQxaC00My41NTlsLS4wMDEgODguNjI1aC00NC4zMTJsLS4wMDEgNDMuNTU5aDg3Ljg3M3ptNDQuMzEyIDQ0LjMxM3YtODcuODcyaC00My41NTl2NDQuMzEzSDM0Ny44M3Y0My41NTloMTMyLjE4NXptMC0zMTAuMTg5VjEzNy4wOUgzOTEuMzlWOTIuNzc3aC00My41NTl2ODcuODcyaDEzMi4xODR6bTAtODguNjI2VjQ4LjQ2NEgzNDcuODMxdjQzLjU2aDQ0LjMxMnY0NC4zMTJoNDMuNTZWOTIuMDI0aDQ0LjMxMnptLjAwMSAxNzcuMjUxbC0uMDAxLTg3Ljg3MWgtNDMuNTU5djQ0LjMxMmgtNDQuMzEydjg3Ljg3M2w0My41NTktLjAwMXYtNDQuMzEybDQ0LjMxMy0uMDAxem00NC4zMTItMTc3LjI1VjQuMTUySDM5Mi4xNDN2NDMuNTZsODguNjI2LS4wMDF2NDQuMzEzaDQzLjU1OXptNDQuMzEzIDg4LjYyNWwuMDAxLTQzLjU1OWgtNDQuMzE0VjkyLjc3N2gtODcuODcydjQzLjU1OWg0NC4zMTN2NDQuMzEzaDg3Ljg3MnpNNTI0LjMyOCAzNTcuOWwuMDAxLTQzLjU1OWgtNDQuMzE0bC4wMDEtNDQuMzEzaC00My41NmwuMDAxIDEzMi4xODQgNDMuNTU4LjAwMVYzNTcuOWg0NC4zMTN6bTAgMjIxLjU2NFY0NDcuMjc5aC00My41NTl2NDQuMzEzaC00NC4zMTN2NDMuNTU5aDQ0LjMxM3Y0NC4zMTNoNDMuNTU5em00NC4zMTMtODguNjI2di04Ny44NzJoLTQ0LjMxM3YtNDQuMzEybC00My41Ni0uMDAxLjAwMiA4Ny44NzIgNDQuMzExLjAwMXY0NC4zMTJoNDMuNTZ6bTAtNDQzLjEyN3YtODcuODcyaC00NC4zMTN2LTQ0LjMxM2gtNDMuNTU5VjMuMzk4aDQ0LjMxMmwuMDAxIDQ0LjMxM2g0My41NTl6bTAgMTc3LjI1MXYtNDMuNTU5aC04Ny44NzJ2MTMyLjE4NGg0My41NTl2LTg4LjYyNWg0NC4zMTN6bTQ0LjMxMy0xMzIuOTM4VjQuMTUyaC00My41NnY0NC4zMTJoLTQ0LjMxM3Y4Ny44NzJoNDMuNTZWOTIuMDI0aDQ0LjMxM3ptLS4wMDEgMzk4LjgxNFYzNTguNjU0aC04Ny44NzJ2NDMuNTU5aDQ0LjMxM3Y4OC42MjVoNDMuNTU5em0wLTIyMS41NjN2LTg3Ljg3MmgtNDMuNTU5djQ0LjMxMmwtNDQuMzEyLjAwMXY4Ny44NzFoNDMuNTU5di00NC4zMTJoNDQuMzEyem00NC4zMTMgODguNjI1di00My41NTloLTQ0LjMxM3YtNDQuMzEzaC00My41NTl2NDQuMzEzaC00NC4zMTJWMzU3LjloMTMyLjE4NHptMC0xNzcuMjUxVjkyLjc3N2gtODcuODcydjg3Ljg3Mmg4Ny44NzJ6Ij4KICAgICAgPC9wYXRoPgogICAgPC9tYXNrPgogICAgPGcgbWFzaz0idXJsKCNjb21wb25lbnRzKSI+CiAgICAgIDxyZWN0IHdpZHRoPSI1OTAiIGhlaWdodD0iNDc1IiBmaWxsPSJ1cmwoI2dyYWRpZW50LWZpbGwpIiBvcGFjaXR5PSIwLjc1Ij4KICAgICAgPC9yZWN0PgogICAgPC9nPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0id2luZG93LWNsaXAiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwSDU4OFY0NTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMjEpIj4KICAgICAgPC9wYXRoPgogICAgPC9jbGlwUGF0aD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtZmlsbCIgeDE9Ijc2IiB4Mj0iNTUzLjUiIHkxPSIyNjkiIHkyPSI0MTUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0EyNEZCRCI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjQ3NyIgc3RvcC1jb2xvcj0iIzM2N0VENiI+CiAgICAgIDwvc3RvcD4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjk4MiIgc3RvcC1jb2xvcj0iI0UxMjY0RCI+CiAgICAgIDwvc3RvcD4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4K'; @@ -13,9 +16,9 @@ const COLORS = [ ]; export default { - component: globalThis.Components.Button, + component: globalThis.Components.Pre, args: { - label: 'Click Me!', + text: 'Testing the background', }, parameters: { backgrounds: { diff --git a/code/addons/viewport/src/components/Tool.tsx b/code/addons/viewport/src/components/Tool.tsx index 994e87b48107..22bd5cec5b35 100644 --- a/code/addons/viewport/src/components/Tool.tsx +++ b/code/addons/viewport/src/components/Tool.tsx @@ -1,11 +1,11 @@ import React, { useState, Fragment, useEffect, type FC } from 'react'; import { Global } from 'storybook/internal/theming'; -import { IconButton, WithTooltip, TooltipLinkList, P } from 'storybook/internal/components'; -import { useGlobals, type API, useGlobalTypes } from 'storybook/internal/manager-api'; +import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components'; +import { useGlobals, type API, useParameter } from 'storybook/internal/manager-api'; import { GrowIcon, RefreshIcon, TransferIcon } from '@storybook/icons'; -import { PARAM_KEY } from '../constants'; +import { PARAM_KEY as KEY } from '../constants'; import { registerShortcuts } from '../shortcuts'; import { IconButtonWithLabel, @@ -16,7 +16,7 @@ import { emptyViewportMap, } from '../utils'; import { responsiveViewport } from '../responsiveViewport'; -import type { Viewport, ViewportMap } from '../types'; +import type { Config, Viewport, ViewportMap } from '../types'; interface PureProps { item: Viewport; @@ -34,26 +34,26 @@ interface PureProps { type Link = Parameters['0']['links'][0]; export const ViewportTool: FC<{ api: API }> = ({ api }) => { - const globalTypes = useGlobalTypes(); + const config = useParameter(KEY); const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const viewportMap = (globalTypes[PARAM_KEY]?.options as any as ViewportMap) || emptyViewportMap; - const data = globals?.[PARAM_KEY] || {}; + const { options = emptyViewportMap, disabled } = config || {}; + const data = globals?.[KEY] || {}; const viewportName: string = data.value; const isRotated: boolean = data.isRotated; - const item = viewportMap[viewportName] || responsiveViewport; + const item = options[viewportName] || responsiveViewport; const isActive = isTooltipVisible || item !== responsiveViewport; - const isLocked = PARAM_KEY in storyGlobals; + const isLocked = KEY in storyGlobals; - const length = Object.keys(viewportMap).length; + const length = Object.keys(options).length; useEffect(() => { - registerShortcuts(api, viewportName, updateGlobals, Object.keys(viewportMap)); - }, [viewportMap, viewportName, updateGlobals, api]); + registerShortcuts(api, viewportName, updateGlobals, Object.keys(options)); + }, [options, viewportName, updateGlobals, api]); - if (item.styles === null || !viewportMap || length < 1) { + if (item.styles === null || !options || length < 1) { return null; } @@ -67,12 +67,16 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => { const width = isRotated ? item.styles.height : item.styles.width; const height = isRotated ? item.styles.width : item.styles.height; + if (disabled) { + return null; + } + return ( , onClick: () => { - updateGlobals({ [PARAM_KEY]: { value: undefined, isRotated: false } }); + updateGlobals({ [KEY]: { value: undefined, isRotated: false } }); onHide(); }, }, @@ -124,7 +128,7 @@ const Pure = React.memo(function PureTool(props: PureProps) { icon: iconsMap[value.type], active: k === viewportName, onClick: () => { - updateGlobals({ [PARAM_KEY]: { value: k, isRotated: false } }); + updateGlobals({ [KEY]: { value: k, isRotated: false } }); onHide(); }, })), @@ -140,7 +144,7 @@ const Pure = React.memo(function PureTool(props: PureProps) { title="Change the size of the preview" active={isActive} onDoubleClick={() => { - updateGlobals({ [PARAM_KEY]: { value: undefined, isRotated: false } }); + updateGlobals({ [KEY]: { value: undefined, isRotated: false } }); }} > @@ -168,12 +172,14 @@ const Pure = React.memo(function PureTool(props: PureProps) { key="viewport-rotate" title="Rotate viewport" onClick={() => { - updateGlobals({ [PARAM_KEY]: { value: viewportName, isRotated: !isRotated } }); + updateGlobals({ [KEY]: { value: viewportName, isRotated: !isRotated } }); }} > - ) : null} + ) : ( + '/' + )} {height.replace('px', '')} diff --git a/code/addons/viewport/src/defaults.ts b/code/addons/viewport/src/defaults.ts index fdc6246eb897..4190ccb7f3cc 100644 --- a/code/addons/viewport/src/defaults.ts +++ b/code/addons/viewport/src/defaults.ts @@ -1,4 +1,4 @@ -import type { ViewportMap } from './models'; +import type { ViewportMap } from './types'; export const INITIAL_VIEWPORTS: ViewportMap = { iphone5: { diff --git a/code/addons/viewport/src/index.ts b/code/addons/viewport/src/index.ts index 79e0216d7923..fac593a2f2dd 100644 --- a/code/addons/viewport/src/index.ts +++ b/code/addons/viewport/src/index.ts @@ -1,2 +1,2 @@ export * from './defaults'; -export type * from './models'; +export type * from './types'; diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts index b6174aac890c..a22081500159 100644 --- a/code/addons/viewport/src/preview.ts +++ b/code/addons/viewport/src/preview.ts @@ -1,3 +1,5 @@ +import { PARAM_KEY as KEY } from './constants'; + export const initialGlobals = { - viewport: { value: 'reset', isRotated: false }, + [KEY]: { value: 'reset', isRotated: false }, }; diff --git a/code/addons/viewport/src/types.ts b/code/addons/viewport/src/types.ts index 28f507832437..c4fdb7f2ab43 100644 --- a/code/addons/viewport/src/types.ts +++ b/code/addons/viewport/src/types.ts @@ -6,12 +6,20 @@ export interface Viewport { styles: Styles; type: 'desktop' | 'mobile' | 'tablet' | 'other'; } +export interface ModernViewport { + name: string; + styles: ViewportStyles; + type: 'desktop' | 'mobile' | 'tablet' | 'other'; +} export interface ViewportStyles { height: string; width: string; } -export interface ViewportMap { - [key: string]: Viewport; +export type ViewportMap = Record; + +export interface Config { + options: Record; + disabled: boolean; } diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts index 69a21ac600a8..95b96512b06b 100644 --- a/code/addons/viewport/template/stories/globals.stories.ts +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -4,9 +4,9 @@ import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; const first = Object.keys(MINIMAL_VIEWPORTS)[0]; export default { - component: globalThis.Components.Button, + component: globalThis.Components.Pre, args: { - label: 'Click Me!', + text: 'Testing the viewport', }, parameters: { chromatic: { disable: true }, @@ -34,7 +34,7 @@ export const Orientation = { }, }; -export const Missing = { +export const Invalid = { globals: { viewport: { value: 'phone', @@ -42,3 +42,11 @@ export const Missing = { }, }, }; + +export const NoRationDefined = { + globals: { + viewport: { + value: first, + }, + }, +}; diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts index 4ad8d6c0292b..f98de1eda0c4 100644 --- a/code/addons/viewport/template/stories/parameters.stories.ts +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -1,6 +1,9 @@ import { global as globalThis } from '@storybook/global'; import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; +// these stories only work with `viewportStoryGlobals` set to false +// because the `default` prop is dropped and because, `values` changed to `options` and is now an object + const first = Object.keys(MINIMAL_VIEWPORTS)[0]; export default { From 88ab1a2381d2bfeca5064769925c0559b5ca2bd7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 24 Jul 2024 17:33:07 +0200 Subject: [PATCH 062/105] fixes --- code/.storybook/preview.tsx | 28 +++------------ code/addons/backgrounds/src/preview.ts | 44 ++++++++++-------------- code/addons/backgrounds/src/typings.d.ts | 1 + code/addons/viewport/package.json | 1 - 4 files changed, 24 insertions(+), 50 deletions(-) create mode 100644 code/addons/backgrounds/src/typings.d.ts diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 479d493b0a44..2c54258c6346 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -19,7 +19,6 @@ import { DocsContext } from '@storybook/blocks'; import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; import { DocsPageWrapper } from '../lib/blocks/src/components'; -import type { GlobalTypes } from '@storybook/csf'; const { document } = global; @@ -313,25 +312,8 @@ export const parameters = { }, }; -// export const globalTypes = { -// viewport: { -// options: MINIMAL_VIEWPORTS, -// }, -// backgrounds: { -// options: { -// light: { name: 'light', value: '#f7f7f7' }, -// dark: { name: 'dark', value: '#333' }, -// }, -// grid: { -// cellSize: 15, -// cellAmount: 10, -// opacity: 0.8, -// }, -// }, -// } satisfies GlobalTypes; - -export const initialGlobals = { - // theme: 'light', - // viewport: { value: 'mobile1', isRotated: false }, - // backgrounds: { value: 'dark', grid: false }, -} as const; +// export const initialGlobals = { +// theme: 'light', +// viewport: { value: 'mobile1', isRotated: false }, +// backgrounds: { value: 'dark', grid: false }, +// } as const; diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts index ee7a314b2f90..c71845d2aa9a 100644 --- a/code/addons/backgrounds/src/preview.ts +++ b/code/addons/backgrounds/src/preview.ts @@ -1,49 +1,41 @@ import type { Addon_DecoratorFunction } from 'storybook/internal/types'; import { withBackground } from './legacy/withBackgroundLegacy'; import { withGrid } from './legacy/withGridLegacy'; -import { PARAM_KEY } from './constants'; +import { PARAM_KEY as KEY } from './constants'; import { withBackgroundAndGrid } from './decorator'; export const decorators: Addon_DecoratorFunction[] = FEATURES?.backgroundsStoryGlobals ? [withBackgroundAndGrid] : [withGrid, withBackground]; -// TODO: remove in 9.0 export const parameters = { - [PARAM_KEY]: { + [KEY]: { grid: { cellSize: 20, opacity: 0.5, cellAmount: 5, }, - values: [ - { name: 'light', value: '#F8F8F8' }, - { name: 'dark', value: '#333333' }, - ], + ...(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 feature flag in 9.0 -// export const globalTypes = FEATURES?.backgroundsStoryGlobals -// ? { -// [PARAM_KEY]: { -// grid: { -// cellSize: 20, -// opacity: 0.5, -// cellAmount: 5, -// }, -// values: [ -// { name: 'light', value: '#F8F8F8' }, -// { name: 'dark', value: '#333333' }, -// ], -// }, -// } -// : {}; - export const globalTypes = { - [PARAM_KEY]: {}, + [KEY]: {}, }; export const initialGlobals = { - [PARAM_KEY]: null as any, + [KEY]: null as any, }; diff --git a/code/addons/backgrounds/src/typings.d.ts b/code/addons/backgrounds/src/typings.d.ts new file mode 100644 index 000000000000..22eb9c03a481 --- /dev/null +++ b/code/addons/backgrounds/src/typings.d.ts @@ -0,0 +1 @@ +declare var FEATURES: import('storybook/internal/types').StorybookConfigRaw['features']; diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index d108727bce1f..9b440edf46f6 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -69,7 +69,6 @@ }, "bundler": { "exportEntries": [ - "./src/models/index.ts", "./src/index.ts" ], "managerEntries": [ From c22499b496aa665ad026a317e78786de1b3ba307 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 24 Jul 2024 17:35:26 +0200 Subject: [PATCH 063/105] add more --- code/.storybook/preview.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 2c54258c6346..19852863c680 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -301,13 +301,14 @@ export const parameters = { }, backgrounds: { options: { - light: { name: 'light', value: '#f7f7f7' }, - dark: { name: 'dark', value: '#333' }, + light: { name: 'light', value: '#edecec' }, + dark: { name: 'dark', value: '#262424' }, + blue: { name: 'blue', value: '#1b1a2c' }, }, grid: { cellSize: 15, cellAmount: 10, - opacity: 0.8, + opacity: 0.4, }, }, }; From 3d312d54bf183a668ebbaa3e3dd7bb8047e86c78 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 08:49:19 +0200 Subject: [PATCH 064/105] fix --- code/addons/backgrounds/src/decorator.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/addons/backgrounds/src/decorator.ts b/code/addons/backgrounds/src/decorator.ts index 52c3bd15bdc2..a39dc24ec9ba 100644 --- a/code/addons/backgrounds/src/decorator.ts +++ b/code/addons/backgrounds/src/decorator.ts @@ -27,7 +27,7 @@ export const withBackgroundAndGrid = ( context: StoryContext ) => { const { globals, parameters, viewMode, id } = context; - const { options = {}, disable, grid = defaultGrid } = (parameters[KEY] || {}) as Config; + const { options = {}, disabled, grid = defaultGrid } = (parameters[KEY] || {}) as Config; const data = globals[KEY] || {}; const backgroundName: string = data.value; @@ -35,7 +35,7 @@ export const withBackgroundAndGrid = ( const value = item?.value || 'transparent'; const showGrid = data.grid || false; - const shownBackground = !!item && !disable; + const shownBackground = !!item && !disabled; const backgroundSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main'; const gridSelector = viewMode === 'docs' ? `#anchor--${id} .docs-story` : '.sb-show-main'; From 248893d45ff8a76048417a6a3b51adb038dffdfb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 09:03:30 +0200 Subject: [PATCH 065/105] fixing typings --- code/addons/backgrounds/src/decorator.ts | 4 +--- code/addons/viewport/src/typings.d.ts | 1 + code/addons/viewport/template/stories/globals.stories.ts | 1 + .../src/preview-api/modules/store/csf/prepareStory.test.ts | 1 + code/frameworks/angular/src/client/decorators.test.ts | 1 + 5 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 code/addons/viewport/src/typings.d.ts diff --git a/code/addons/backgrounds/src/decorator.ts b/code/addons/backgrounds/src/decorator.ts index a39dc24ec9ba..69f3e47d95f1 100644 --- a/code/addons/backgrounds/src/decorator.ts +++ b/code/addons/backgrounds/src/decorator.ts @@ -7,7 +7,7 @@ import type { import { PARAM_KEY as KEY } from './constants'; import { clearStyles, addBackgroundStyle, isReduceMotionEnabled, addGridStyle } from './utils'; -import type { Background, Config, GridConfig } from './types'; +import type { Config, GridConfig } from './types'; const defaultGrid: GridConfig = { cellSize: 100, @@ -15,8 +15,6 @@ const defaultGrid: GridConfig = { opacity: 0.8, }; -type BackgroundMap = Record; - const BG_SELECTOR_BASE = `addon-backgrounds`; const GRID_SELECTOR_BASE = 'addon-backgrounds-grid'; diff --git a/code/addons/viewport/src/typings.d.ts b/code/addons/viewport/src/typings.d.ts new file mode 100644 index 000000000000..22eb9c03a481 --- /dev/null +++ b/code/addons/viewport/src/typings.d.ts @@ -0,0 +1 @@ +declare var FEATURES: import('storybook/internal/types').StorybookConfigRaw['features']; diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts index 95b96512b06b..d8307ff32be5 100644 --- a/code/addons/viewport/template/stories/globals.stories.ts +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -16,6 +16,7 @@ export default { export const Unset = { globals: {}, }; + export const Selected = { globals: { viewport: { diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts index ef56a6a24386..e9fd7f3228be 100644 --- a/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts +++ b/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts @@ -60,6 +60,7 @@ const addExtraContext = ( step: vi.fn(), context: null! as StoryContext, canvas: null!, + globalTypes: {}, }; extraContext.context = extraContext; return extraContext; diff --git a/code/frameworks/angular/src/client/decorators.test.ts b/code/frameworks/angular/src/client/decorators.test.ts index 16feb942417e..f7133806e3df 100644 --- a/code/frameworks/angular/src/client/decorators.test.ts +++ b/code/frameworks/angular/src/client/decorators.test.ts @@ -18,6 +18,7 @@ const defaultContext: Addon_StoryContext = { args: {}, argTypes: {}, globals: {}, + globalTypes: {}, storyGlobals: {}, hooks: {}, loaded: {}, From 44163f57512ff799ed6248b0b9fbdd232d74b300 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 12:20:08 +0200 Subject: [PATCH 066/105] always ensure the storyStore is ready to updateGlobals before proceeding to update globals --- code/core/src/preview-api/modules/preview-web/Preview.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/core/src/preview-api/modules/preview-web/Preview.tsx b/code/core/src/preview-api/modules/preview-web/Preview.tsx index 62eff7bdd5c9..681d0c47c935 100644 --- a/code/core/src/preview-api/modules/preview-web/Preview.tsx +++ b/code/core/src/preview-api/modules/preview-web/Preview.tsx @@ -298,6 +298,9 @@ export class Preview { globals: Globals; currentStory?: PreparedStory; }) { + if (!this.storyStoreValue) { + await this.storeInitializationPromise; + } if (!this.storyStoreValue) { throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'onUpdateGlobals' }); } From 3254d1b9154a2964ea32ff40fa773ba62418101d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 12:20:34 +0200 Subject: [PATCH 067/105] cleanup --- code/addons/backgrounds/src/components/Tool.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/code/addons/backgrounds/src/components/Tool.tsx b/code/addons/backgrounds/src/components/Tool.tsx index 83e6118817e7..c84385de6b5c 100644 --- a/code/addons/backgrounds/src/components/Tool.tsx +++ b/code/addons/backgrounds/src/components/Tool.tsx @@ -16,7 +16,7 @@ export const BackgroundTool = memo(function BackgroundSelector() { const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const { options = emptyBackgroundMap, disabled } = config || {}; + const { options = emptyBackgroundMap, disabled = true } = config || {}; if (disabled) { return null; @@ -24,7 +24,7 @@ export const BackgroundTool = memo(function BackgroundSelector() { const data = globals[KEY] || {}; const backgroundName: string = data.value; - const isGrid = data.grid || false; + const isGridActive = data.grid || false; const item = options[backgroundName]; const isLocked = !!storyGlobals?.[KEY]; @@ -40,7 +40,7 @@ export const BackgroundTool = memo(function BackgroundSelector() { backgroundName, setIsTooltipVisible, isLocked, - isGrid, + isGridActive, isTooltipVisible, }} /> @@ -55,13 +55,12 @@ interface PureProps { backgroundName: string | undefined; setIsTooltipVisible: React.Dispatch>; isLocked: boolean; - isGrid: boolean; + isGridActive: boolean; isTooltipVisible: boolean; } const Pure = memo(function PureTool(props: PureProps) { const { - // item, length, updateGlobals, @@ -69,13 +68,13 @@ const Pure = memo(function PureTool(props: PureProps) { backgroundMap, backgroundName, isLocked, - isGrid, + isGridActive: isGrid, isTooltipVisible, } = props; return ( 0 ? ( { From df42f657317d3bf23709a9383171af63ba546847 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 12:21:03 +0200 Subject: [PATCH 068/105] add disabled: false to default parameters of backgrounds --- code/addons/backgrounds/src/preview.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts index c71845d2aa9a..af7d5a2e8c59 100644 --- a/code/addons/backgrounds/src/preview.ts +++ b/code/addons/backgrounds/src/preview.ts @@ -3,6 +3,7 @@ import { withBackground } from './legacy/withBackgroundLegacy'; import { withGrid } from './legacy/withGridLegacy'; import { PARAM_KEY as KEY } from './constants'; import { withBackgroundAndGrid } from './decorator'; +import type { Config } from './types'; export const decorators: Addon_DecoratorFunction[] = FEATURES?.backgroundsStoryGlobals ? [withBackgroundAndGrid] @@ -15,6 +16,7 @@ export const parameters = { opacity: 0.5, cellAmount: 5, }, + disabled: false, ...(FEATURES?.backgroundsStoryGlobals ? { options: { @@ -29,7 +31,7 @@ export const parameters = { { name: 'dark', value: '#333333' }, ], }), - }, + } satisfies Partial, }; export const globalTypes = { From 453dfd68370bd08a4c52b8c273ef0d47d1ad82b7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 13:02:20 +0200 Subject: [PATCH 069/105] fix link to moved story --- code/core/src/manager/components/preview/Iframe.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/src/manager/components/preview/Iframe.stories.tsx b/code/core/src/manager/components/preview/Iframe.stories.tsx index 23a6b75de8d6..7d95583f3b54 100644 --- a/code/core/src/manager/components/preview/Iframe.stories.tsx +++ b/code/core/src/manager/components/preview/Iframe.stories.tsx @@ -50,7 +50,7 @@ export const WorkingDocs = () => ( active id="iframe" title="Missing" - src="/iframe.html?id=components-colorpalette--docs" + src="/iframe.html?id=brand-colorpalette--docs" allowFullScreen style={style} scale={1.0} From 7e53f9e7ba5a6986a16f280cb5319099c36d5d29 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 15:14:19 +0200 Subject: [PATCH 070/105] add work-around hopefully reducing e2e test flake --- code/e2e-tests/util.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts index fae5d359a6a7..02ecc753b5f5 100644 --- a/code/e2e-tests/util.ts +++ b/code/e2e-tests/util.ts @@ -95,6 +95,17 @@ export class SbPage { }; window.sessionStorage.setItem('@storybook/manager/store', JSON.stringify(storeState)); }, {}); + + // disable all transitions to avoid flakiness + await this.page.addStyleTag({ + content: ` + *, + *::before, + *::after { + transition: none !important; + } + `, + }); const root = this.previewRoot(); const docsLoadingPage = root.locator('.sb-preparing-docs'); const storyLoadingPage = root.locator('.sb-preparing-story'); From ee3f55cb2f158c8936e7faf23b58167d23156805 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 15:50:22 +0200 Subject: [PATCH 071/105] testing a fix with yann Co-authored-by: Yann Braga --- code/e2e-tests/manager.spec.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/code/e2e-tests/manager.spec.ts b/code/e2e-tests/manager.spec.ts index 5ef2a975b4ea..190356469cc6 100644 --- a/code/e2e-tests/manager.spec.ts +++ b/code/e2e-tests/manager.spec.ts @@ -200,8 +200,17 @@ test.describe('Manager UI', () => { test('Navigate to story', async ({ page }) => { const sbPage = new SbPage(page); + const closeNavigationButton = await sbPage.page.locator('[title="Close navigation menu"]'); + // navigation menu is closed + await expect(closeNavigationButton).not.toBeVisible(); + const mobileNavigationHeading = await sbPage.page.locator('[title="Open navigation menu"]'); + await sbPage.page.waitForFunction((selector) => { + const content = document.querySelector(selector)?.textContent; + return content?.includes('Configure your project/Docs'); + }, '[title="Open navigation menu"]'); + // navigation menu is closed await expect(mobileNavigationHeading).toHaveText('Configure your project/Docs'); await expect(sbPage.page.locator('#storybook-explorer-menu')).not.toBeVisible(); From 3aafff72ee58fb3d917e3e99570f3c92f7e655ed Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 Jul 2024 17:18:18 +0200 Subject: [PATCH 072/105] add retry for playwright test that is failing simplify test Co-authored-by: Yann Braga --- code/e2e-tests/manager.spec.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/code/e2e-tests/manager.spec.ts b/code/e2e-tests/manager.spec.ts index 190356469cc6..7131e764e635 100644 --- a/code/e2e-tests/manager.spec.ts +++ b/code/e2e-tests/manager.spec.ts @@ -189,6 +189,7 @@ test.describe('Manager UI', () => { }); test.describe('Mobile', () => { + test.describe.configure({ retries: 3 }); // TODO: remove this when SSV6 templates have been removed // Some assertions in these tests are not compatible with SSV6 // GIven that SSV6 will be removed before the new mobile UI released, it doesn't make sense to fix them @@ -201,18 +202,10 @@ test.describe('Manager UI', () => { const sbPage = new SbPage(page); const closeNavigationButton = await sbPage.page.locator('[title="Close navigation menu"]'); - // navigation menu is closed - await expect(closeNavigationButton).not.toBeVisible(); - const mobileNavigationHeading = await sbPage.page.locator('[title="Open navigation menu"]'); - await sbPage.page.waitForFunction((selector) => { - const content = document.querySelector(selector)?.textContent; - return content?.includes('Configure your project/Docs'); - }, '[title="Open navigation menu"]'); - // navigation menu is closed - await expect(mobileNavigationHeading).toHaveText('Configure your project/Docs'); + await expect(closeNavigationButton).not.toBeVisible(); await expect(sbPage.page.locator('#storybook-explorer-menu')).not.toBeVisible(); // open navigation menu From 1adbd1cb8d96c2617f145766cb85ce2e9144481c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Jul 2024 08:50:13 +0200 Subject: [PATCH 073/105] disable webkit in e2e tests for now,due to flake: https://app.circleci.com/pipelines/github/storybookjs/storybook/81120/workflows/16a6a303-ed49-45c8-be74-769ff0cf1253/jobs/686641/artifacts --- code/playwright.config.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/code/playwright.config.ts b/code/playwright.config.ts index 129c1aac537d..bc0ba12a8eaa 100644 --- a/code/playwright.config.ts +++ b/code/playwright.config.ts @@ -67,12 +67,12 @@ export default defineConfig({ }, }, - { - name: 'webkit', - use: { - ...devices['Desktop Safari'], - }, - }, + // { + // name: 'webkit', + // use: { + // ...devices['Desktop Safari'], + // }, + // }, /* Test against mobile viewports. */ // { From 214d423647fc98327b7ac6424a4d908ec10483d5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 Jul 2024 13:28:00 +0200 Subject: [PATCH 074/105] ignore CPC moving code in blame history --- .git-blame-ignore-revs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs index 3317e750e0c5..a57524a04ebb 100644 --- a/.git-blame-ignore-revs +++ b/.git-blame-ignore-revs @@ -1,4 +1,5 @@ 34e364a0ca1d93555d36a7367d78e8e229493de8 c0896915fb7fb9a8dd416b9aebca17abd909d1c1 a41c227037e7e7249b8b376f838f4f8bcc3e3e59 -13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54 \ No newline at end of file +13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54 +0a4522a3f84773f39daec4820c49b8a92e9f9d11 \ No newline at end of file From 86db1e6252a5dd747dbd498126ad80e57a175e9e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 29 Jul 2024 15:52:44 +0200 Subject: [PATCH 075/105] simplify addon-toolbars, enable configuring via parameters, add feature-flag --- code/.storybook/main.ts | 1 + code/addons/toolbars/src/Tool.tsx | 22 +++ .../src/components/ToolbarMenuList.tsx | 8 +- .../toolbars/src/hoc/withKeyboardCycle.tsx | 5 +- .../ToolbarManagerLegacy.tsx} | 10 +- .../src/legacy/normalize-toolbar-arg-type.ts | 28 ++++ code/addons/toolbars/src/manager.tsx | 8 +- code/addons/toolbars/src/types.ts | 4 +- code/addons/toolbars/src/typings.d.ts | 1 + .../src/utils/normalize-toolbar-arg-type.ts | 30 ---- .../toolbars/template/stories/preview.ts | 130 ++++++++++++------ code/core/src/types/modules/core-common.ts | 4 + 12 files changed, 164 insertions(+), 87 deletions(-) create mode 100644 code/addons/toolbars/src/Tool.tsx rename code/addons/toolbars/src/{components/ToolbarManager.tsx => legacy/ToolbarManagerLegacy.tsx} (62%) create mode 100644 code/addons/toolbars/src/legacy/normalize-toolbar-arg-type.ts delete mode 100644 code/addons/toolbars/src/utils/normalize-toolbar-arg-type.ts diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 7c4f74c8c2ef..4bdf6c91c934 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -121,6 +121,7 @@ const config: StorybookConfig = { viewportStoryGlobals: true, themesStoryGlobals: true, backgroundsStoryGlobals: true, + addonToolbarParameters: true, }, viteFinal: (viteConfig, { configType }) => mergeConfig(viteConfig, { diff --git a/code/addons/toolbars/src/Tool.tsx b/code/addons/toolbars/src/Tool.tsx new file mode 100644 index 000000000000..a9ec834d9428 --- /dev/null +++ b/code/addons/toolbars/src/Tool.tsx @@ -0,0 +1,22 @@ +import type { FC } from 'react'; +import React from 'react'; +import { useParameter, type API } from 'storybook/internal/manager-api'; +import { Separator } from 'storybook/internal/components'; +import { ToolbarMenuList, type ToolbarMenuListProps } from './components/ToolbarMenuList'; + +export const Tool: FC<{ api: API }> = () => { + const toolbarConfig = useParameter>('toolbars', {}); + + if (Object.keys(toolbarConfig).length < 1) { + return null; + } + + return ( + <> + + {Object.entries(toolbarConfig).map(([id, value]) => { + return ; + })} + + ); +}; diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx index b54f0df44e59..497c829480c2 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx @@ -9,14 +9,18 @@ import { getSelectedIcon, getSelectedTitle } from '../utils/get-selected'; import type { ToolbarMenuProps } from '../types'; import { ToolbarMenuListItem } from './ToolbarMenuListItem'; -type ToolbarMenuListProps = ToolbarMenuProps & WithKeyboardCycleProps; +export type ToolbarMenuListProps = ToolbarMenuProps & WithKeyboardCycleProps; export const ToolbarMenuList: FC = withKeyboardCycle( ({ id, name, description, - toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle }, + icon: _icon, + items, + title: _title, + preventDynamicIcon, + dynamicTitle, }) => { const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); diff --git a/code/addons/toolbars/src/hoc/withKeyboardCycle.tsx b/code/addons/toolbars/src/hoc/withKeyboardCycle.tsx index 9bdcc8e8b6a5..18d7354c5691 100644 --- a/code/addons/toolbars/src/hoc/withKeyboardCycle.tsx +++ b/code/addons/toolbars/src/hoc/withKeyboardCycle.tsx @@ -10,10 +10,7 @@ export type WithKeyboardCycleProps = { export const withKeyboardCycle = (Component: React.ComponentType) => { const WithKeyboardCycle = (props: ToolbarMenuProps) => { - const { - id, - toolbar: { items, shortcuts }, - } = props; + const { id, items, shortcuts } = props; const api = useStorybookApi(); const [globals, updateGlobals] = useGlobals(); diff --git a/code/addons/toolbars/src/components/ToolbarManager.tsx b/code/addons/toolbars/src/legacy/ToolbarManagerLegacy.tsx similarity index 62% rename from code/addons/toolbars/src/components/ToolbarManager.tsx rename to code/addons/toolbars/src/legacy/ToolbarManagerLegacy.tsx index 1570b72883f6..e6b7a82331b2 100644 --- a/code/addons/toolbars/src/components/ToolbarManager.tsx +++ b/code/addons/toolbars/src/legacy/ToolbarManagerLegacy.tsx @@ -2,14 +2,14 @@ import type { FC } from 'react'; import React from 'react'; import { useGlobalTypes } from 'storybook/internal/manager-api'; import { Separator } from 'storybook/internal/components'; -import { ToolbarMenuList } from './ToolbarMenuList'; -import { normalizeArgType } from '../utils/normalize-toolbar-arg-type'; +import { ToolbarMenuList } from '../components/ToolbarMenuList'; +import { normalizeArgType } from './normalize-toolbar-arg-type'; import type { ToolbarArgType } from '../types'; /** * A smart component for handling manager-preview interactions. */ -export const ToolbarManager: FC = () => { +export const ToolbarManagerLegacy: FC = () => { const globalTypes = useGlobalTypes(); const globalIds = Object.keys(globalTypes).filter((id) => !!globalTypes[id].toolbar); @@ -21,9 +21,9 @@ export const ToolbarManager: FC = () => { <> {globalIds.map((id) => { - const normalizedArgType = normalizeArgType(id, globalTypes[id] as ToolbarArgType); + const { toolbar, ...rest } = normalizeArgType(id, globalTypes[id] as ToolbarArgType); - return ; + return ; })} ); diff --git a/code/addons/toolbars/src/legacy/normalize-toolbar-arg-type.ts b/code/addons/toolbars/src/legacy/normalize-toolbar-arg-type.ts new file mode 100644 index 000000000000..97c57dfed8cd --- /dev/null +++ b/code/addons/toolbars/src/legacy/normalize-toolbar-arg-type.ts @@ -0,0 +1,28 @@ +import type { NormalizedToolbarArgType, ToolbarArgType, ToolbarItem } from '../types'; + +const defaultItemValues: ToolbarItem = { + type: 'item', + value: '', +}; + +export const normalizeArgType = ( + key: string, + argType: ToolbarArgType +): NormalizedToolbarArgType => ({ + ...argType, + name: argType.name || key, + description: argType.description || key, + ...argType.toolbar, + items: argType.toolbar.items.map((_item) => { + const item = typeof _item === 'string' ? { value: _item, title: _item } : _item; + + // Cater for the special type "reset" which will reset value and also icon + // of toolbar button if any icon was present on toolbar to begin with + if (item.type === 'reset' && argType.toolbar.icon) { + item.icon = argType.toolbar.icon; + item.hideIcon = true; + } + + return { ...defaultItemValues, ...item }; + }), +}); diff --git a/code/addons/toolbars/src/manager.tsx b/code/addons/toolbars/src/manager.tsx index 306e857544b0..51469b1030bc 100644 --- a/code/addons/toolbars/src/manager.tsx +++ b/code/addons/toolbars/src/manager.tsx @@ -1,13 +1,15 @@ import React from 'react'; import { addons, types } from 'storybook/internal/manager-api'; -import { ToolbarManager } from './components/ToolbarManager'; +import { ToolbarManagerLegacy } from './legacy/ToolbarManagerLegacy'; import { ADDON_ID } from './constants'; +import { Tool } from './Tool'; -addons.register(ADDON_ID, () => +addons.register(ADDON_ID, (api) => addons.add(ADDON_ID, { title: ADDON_ID, type: types.TOOL, match: ({ tabId }) => !tabId, - render: () => , + render: () => + FEATURES?.addonToolbarParameters ? : , }) ); diff --git a/code/addons/toolbars/src/types.ts b/code/addons/toolbars/src/types.ts index fb88149e2075..4138a90eede6 100644 --- a/code/addons/toolbars/src/types.ts +++ b/code/addons/toolbars/src/types.ts @@ -34,9 +34,7 @@ export interface NormalizedToolbarConfig { dynamicTitle?: boolean; } -export type NormalizedToolbarArgType = InputType & { - toolbar: NormalizedToolbarConfig; -}; +export type NormalizedToolbarArgType = InputType & NormalizedToolbarConfig; export type ToolbarConfig = NormalizedToolbarConfig & { items: string[] | ToolbarItem[]; diff --git a/code/addons/toolbars/src/typings.d.ts b/code/addons/toolbars/src/typings.d.ts index bfd9e55123ff..76c5a5dd2700 100644 --- a/code/addons/toolbars/src/typings.d.ts +++ b/code/addons/toolbars/src/typings.d.ts @@ -1 +1,2 @@ declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; +declare var FEATURES: import('storybook/internal/types').StorybookConfigRaw['features']; diff --git a/code/addons/toolbars/src/utils/normalize-toolbar-arg-type.ts b/code/addons/toolbars/src/utils/normalize-toolbar-arg-type.ts deleted file mode 100644 index effc80b3e450..000000000000 --- a/code/addons/toolbars/src/utils/normalize-toolbar-arg-type.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { NormalizedToolbarArgType, ToolbarArgType, ToolbarItem } from '../types'; - -const defaultItemValues: ToolbarItem = { - type: 'item', - value: '', -}; - -export const normalizeArgType = ( - key: string, - argType: ToolbarArgType -): NormalizedToolbarArgType => ({ - ...argType, - name: argType.name || key, - description: argType.description || key, - toolbar: { - ...argType.toolbar, - items: argType.toolbar.items.map((_item) => { - const item = typeof _item === 'string' ? { value: _item, title: _item } : _item; - - // Cater for the special type "reset" which will reset value and also icon - // of toolbar button if any icon was present on toolbar to begin with - if (item.type === 'reset' && argType.toolbar.icon) { - item.icon = argType.toolbar.icon; - item.hideIcon = true; - } - - return { ...defaultItemValues, ...item }; - }), - }, -}); diff --git a/code/addons/toolbars/template/stories/preview.ts b/code/addons/toolbars/template/stories/preview.ts index c37009553346..f33080bd49a3 100644 --- a/code/addons/toolbars/template/stories/preview.ts +++ b/code/addons/toolbars/template/stories/preview.ts @@ -1,44 +1,94 @@ -export const globalTypes = { - theme: { - name: 'Theme', - description: 'Global theme for components', - toolbar: { - icon: 'circlehollow', - title: 'Theme', - items: [ - { value: 'light', icon: 'sun', title: 'light' }, - { value: 'dark', icon: 'moon', title: 'dark' }, - { value: 'side-by-side', icon: 'sidebyside', title: 'side by side' }, - { value: 'stacked', icon: 'stacked', title: 'stacked' }, - ], - }, - }, - locale: { - name: 'Locale', - description: 'Internationalization locale', - toolbar: { - icon: 'globe', - shortcuts: { - next: { - label: 'Go to next language', - keys: ['L'], +export const globalTypes = globalThis.FEATURES?.addonToolbarParameters + ? {} + : { + theme: { + name: 'Theme', + description: 'Global theme for components', + toolbar: { + icon: 'circlehollow', + title: 'Theme', + items: [ + { value: 'light', icon: 'sun', title: 'light' }, + { value: 'dark', icon: 'moon', title: 'dark' }, + { value: 'side-by-side', icon: 'sidebyside', title: 'side by side' }, + { value: 'stacked', icon: 'stacked', title: 'stacked' }, + ], }, - previous: { - label: 'Go to previous language', - keys: ['K'], - }, - reset: { - label: 'Reset language', - keys: ['meta', 'shift', 'L'], + }, + locale: { + name: 'Locale', + description: 'Internationalization locale', + toolbar: { + icon: 'globe', + shortcuts: { + next: { + label: 'Go to next language', + keys: ['L'], + }, + previous: { + label: 'Go to previous language', + keys: ['K'], + }, + reset: { + label: 'Reset language', + keys: ['meta', 'shift', 'L'], + }, + }, + items: [ + { title: 'Reset locale', type: 'reset' }, + { value: 'en', right: '🇺🇸', title: 'English' }, + { value: 'es', right: '🇪🇸', title: 'Español' }, + { value: 'zh', right: '🇨🇳', title: '中文' }, + { value: 'kr', right: '🇰🇷', title: '한국어' }, + ], }, }, - items: [ - { title: 'Reset locale', type: 'reset' }, - { value: 'en', right: '🇺🇸', title: 'English' }, - { value: 'es', right: '🇪🇸', title: 'Español' }, - { value: 'zh', right: '🇨🇳', title: '中文' }, - { value: 'kr', right: '🇰🇷', title: '한국어' }, - ], - }, - }, + }; + +export const initialGlobals = { + theme: undefined, + locale: undefined, }; + +export const parameters = globalThis.FEATURES?.addonToolbarParameters + ? { + toolbars: { + theme: { + title: 'Theme', + description: 'Global theme for components', + icon: 'circlehollow', + items: [ + { value: 'light', icon: 'sun', title: 'light' }, + { value: 'dark', icon: 'moon', title: 'dark' }, + { value: 'side-by-side', icon: 'sidebyside', title: 'side by side' }, + { value: 'stacked', icon: 'stacked', title: 'stacked' }, + ], + }, + locale: { + description: 'Internationalization locale', + icon: 'globe', + shortcuts: { + next: { + label: 'Go to next language', + keys: ['L'], + }, + previous: { + label: 'Go to previous language', + keys: ['K'], + }, + reset: { + label: 'Reset language', + keys: ['meta', 'shift', 'L'], + }, + }, + items: [ + { title: 'Reset locale', type: 'reset' }, + { value: 'en', right: '🇺🇸', title: 'English' }, + { value: 'es', right: '🇪🇸', title: 'Español' }, + { value: 'zh', right: '🇨🇳', title: '中文' }, + { value: 'kr', right: '🇰🇷', title: '한국어' }, + ], + }, + }, + } + : {}; diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts index d1c161692a30..ef5cdc524871 100644 --- a/code/core/src/types/modules/core-common.ts +++ b/code/core/src/types/modules/core-common.ts @@ -384,6 +384,10 @@ export interface StorybookConfigRaw { * use globals & globalTypes for configuring the backgrounds addon */ backgroundsStoryGlobals?: boolean; + /** + * use parameters configure the toolbar addon + */ + addonToolbarParameters?: boolean; /** * use globals & globalTypes for configuring the themes addon */ From e92e313f257653e9cf49210e99bde1cf60555e1c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 10:23:15 +0200 Subject: [PATCH 076/105] fix URL state for globals --- code/addons/backgrounds/src/preview.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts index af7d5a2e8c59..0c0c439b5425 100644 --- a/code/addons/backgrounds/src/preview.ts +++ b/code/addons/backgrounds/src/preview.ts @@ -34,10 +34,6 @@ export const parameters = { } satisfies Partial, }; -export const globalTypes = { - [KEY]: {}, -}; - export const initialGlobals = { - [KEY]: null as any, + [KEY]: { background: undefined, grid: false }, }; From 1b34ca2e6a93502985f84e210536af8fbd9ec524 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 10:31:30 +0200 Subject: [PATCH 077/105] Revert "simplify addon-toolbars, enable configuring via parameters, add feature-flag" This reverts commit 86db1e6252a5dd747dbd498126ad80e57a175e9e. --- code/.storybook/main.ts | 1 - code/addons/toolbars/src/Tool.tsx | 22 --- .../ToolbarManager.tsx} | 10 +- .../src/components/ToolbarMenuList.tsx | 8 +- .../toolbars/src/hoc/withKeyboardCycle.tsx | 5 +- .../src/legacy/normalize-toolbar-arg-type.ts | 28 ---- code/addons/toolbars/src/manager.tsx | 8 +- code/addons/toolbars/src/types.ts | 4 +- code/addons/toolbars/src/typings.d.ts | 1 - .../src/utils/normalize-toolbar-arg-type.ts | 30 ++++ .../toolbars/template/stories/preview.ts | 130 ++++++------------ code/core/src/types/modules/core-common.ts | 4 - 12 files changed, 87 insertions(+), 164 deletions(-) delete mode 100644 code/addons/toolbars/src/Tool.tsx rename code/addons/toolbars/src/{legacy/ToolbarManagerLegacy.tsx => components/ToolbarManager.tsx} (62%) delete mode 100644 code/addons/toolbars/src/legacy/normalize-toolbar-arg-type.ts create mode 100644 code/addons/toolbars/src/utils/normalize-toolbar-arg-type.ts diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 4bdf6c91c934..7c4f74c8c2ef 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -121,7 +121,6 @@ const config: StorybookConfig = { viewportStoryGlobals: true, themesStoryGlobals: true, backgroundsStoryGlobals: true, - addonToolbarParameters: true, }, viteFinal: (viteConfig, { configType }) => mergeConfig(viteConfig, { diff --git a/code/addons/toolbars/src/Tool.tsx b/code/addons/toolbars/src/Tool.tsx deleted file mode 100644 index a9ec834d9428..000000000000 --- a/code/addons/toolbars/src/Tool.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { FC } from 'react'; -import React from 'react'; -import { useParameter, type API } from 'storybook/internal/manager-api'; -import { Separator } from 'storybook/internal/components'; -import { ToolbarMenuList, type ToolbarMenuListProps } from './components/ToolbarMenuList'; - -export const Tool: FC<{ api: API }> = () => { - const toolbarConfig = useParameter>('toolbars', {}); - - if (Object.keys(toolbarConfig).length < 1) { - return null; - } - - return ( - <> - - {Object.entries(toolbarConfig).map(([id, value]) => { - return ; - })} - - ); -}; diff --git a/code/addons/toolbars/src/legacy/ToolbarManagerLegacy.tsx b/code/addons/toolbars/src/components/ToolbarManager.tsx similarity index 62% rename from code/addons/toolbars/src/legacy/ToolbarManagerLegacy.tsx rename to code/addons/toolbars/src/components/ToolbarManager.tsx index e6b7a82331b2..1570b72883f6 100644 --- a/code/addons/toolbars/src/legacy/ToolbarManagerLegacy.tsx +++ b/code/addons/toolbars/src/components/ToolbarManager.tsx @@ -2,14 +2,14 @@ import type { FC } from 'react'; import React from 'react'; import { useGlobalTypes } from 'storybook/internal/manager-api'; import { Separator } from 'storybook/internal/components'; -import { ToolbarMenuList } from '../components/ToolbarMenuList'; -import { normalizeArgType } from './normalize-toolbar-arg-type'; +import { ToolbarMenuList } from './ToolbarMenuList'; +import { normalizeArgType } from '../utils/normalize-toolbar-arg-type'; import type { ToolbarArgType } from '../types'; /** * A smart component for handling manager-preview interactions. */ -export const ToolbarManagerLegacy: FC = () => { +export const ToolbarManager: FC = () => { const globalTypes = useGlobalTypes(); const globalIds = Object.keys(globalTypes).filter((id) => !!globalTypes[id].toolbar); @@ -21,9 +21,9 @@ export const ToolbarManagerLegacy: FC = () => { <> {globalIds.map((id) => { - const { toolbar, ...rest } = normalizeArgType(id, globalTypes[id] as ToolbarArgType); + const normalizedArgType = normalizeArgType(id, globalTypes[id] as ToolbarArgType); - return ; + return ; })} ); diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx index 497c829480c2..b54f0df44e59 100644 --- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx +++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx @@ -9,18 +9,14 @@ import { getSelectedIcon, getSelectedTitle } from '../utils/get-selected'; import type { ToolbarMenuProps } from '../types'; import { ToolbarMenuListItem } from './ToolbarMenuListItem'; -export type ToolbarMenuListProps = ToolbarMenuProps & WithKeyboardCycleProps; +type ToolbarMenuListProps = ToolbarMenuProps & WithKeyboardCycleProps; export const ToolbarMenuList: FC = withKeyboardCycle( ({ id, name, description, - icon: _icon, - items, - title: _title, - preventDynamicIcon, - dynamicTitle, + toolbar: { icon: _icon, items, title: _title, preventDynamicIcon, dynamicTitle }, }) => { const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); diff --git a/code/addons/toolbars/src/hoc/withKeyboardCycle.tsx b/code/addons/toolbars/src/hoc/withKeyboardCycle.tsx index 18d7354c5691..9bdcc8e8b6a5 100644 --- a/code/addons/toolbars/src/hoc/withKeyboardCycle.tsx +++ b/code/addons/toolbars/src/hoc/withKeyboardCycle.tsx @@ -10,7 +10,10 @@ export type WithKeyboardCycleProps = { export const withKeyboardCycle = (Component: React.ComponentType) => { const WithKeyboardCycle = (props: ToolbarMenuProps) => { - const { id, items, shortcuts } = props; + const { + id, + toolbar: { items, shortcuts }, + } = props; const api = useStorybookApi(); const [globals, updateGlobals] = useGlobals(); diff --git a/code/addons/toolbars/src/legacy/normalize-toolbar-arg-type.ts b/code/addons/toolbars/src/legacy/normalize-toolbar-arg-type.ts deleted file mode 100644 index 97c57dfed8cd..000000000000 --- a/code/addons/toolbars/src/legacy/normalize-toolbar-arg-type.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { NormalizedToolbarArgType, ToolbarArgType, ToolbarItem } from '../types'; - -const defaultItemValues: ToolbarItem = { - type: 'item', - value: '', -}; - -export const normalizeArgType = ( - key: string, - argType: ToolbarArgType -): NormalizedToolbarArgType => ({ - ...argType, - name: argType.name || key, - description: argType.description || key, - ...argType.toolbar, - items: argType.toolbar.items.map((_item) => { - const item = typeof _item === 'string' ? { value: _item, title: _item } : _item; - - // Cater for the special type "reset" which will reset value and also icon - // of toolbar button if any icon was present on toolbar to begin with - if (item.type === 'reset' && argType.toolbar.icon) { - item.icon = argType.toolbar.icon; - item.hideIcon = true; - } - - return { ...defaultItemValues, ...item }; - }), -}); diff --git a/code/addons/toolbars/src/manager.tsx b/code/addons/toolbars/src/manager.tsx index 51469b1030bc..306e857544b0 100644 --- a/code/addons/toolbars/src/manager.tsx +++ b/code/addons/toolbars/src/manager.tsx @@ -1,15 +1,13 @@ import React from 'react'; import { addons, types } from 'storybook/internal/manager-api'; -import { ToolbarManagerLegacy } from './legacy/ToolbarManagerLegacy'; +import { ToolbarManager } from './components/ToolbarManager'; import { ADDON_ID } from './constants'; -import { Tool } from './Tool'; -addons.register(ADDON_ID, (api) => +addons.register(ADDON_ID, () => addons.add(ADDON_ID, { title: ADDON_ID, type: types.TOOL, match: ({ tabId }) => !tabId, - render: () => - FEATURES?.addonToolbarParameters ? : , + render: () => , }) ); diff --git a/code/addons/toolbars/src/types.ts b/code/addons/toolbars/src/types.ts index 4138a90eede6..fb88149e2075 100644 --- a/code/addons/toolbars/src/types.ts +++ b/code/addons/toolbars/src/types.ts @@ -34,7 +34,9 @@ export interface NormalizedToolbarConfig { dynamicTitle?: boolean; } -export type NormalizedToolbarArgType = InputType & NormalizedToolbarConfig; +export type NormalizedToolbarArgType = InputType & { + toolbar: NormalizedToolbarConfig; +}; export type ToolbarConfig = NormalizedToolbarConfig & { items: string[] | ToolbarItem[]; diff --git a/code/addons/toolbars/src/typings.d.ts b/code/addons/toolbars/src/typings.d.ts index 76c5a5dd2700..bfd9e55123ff 100644 --- a/code/addons/toolbars/src/typings.d.ts +++ b/code/addons/toolbars/src/typings.d.ts @@ -1,2 +1 @@ declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; -declare var FEATURES: import('storybook/internal/types').StorybookConfigRaw['features']; diff --git a/code/addons/toolbars/src/utils/normalize-toolbar-arg-type.ts b/code/addons/toolbars/src/utils/normalize-toolbar-arg-type.ts new file mode 100644 index 000000000000..effc80b3e450 --- /dev/null +++ b/code/addons/toolbars/src/utils/normalize-toolbar-arg-type.ts @@ -0,0 +1,30 @@ +import type { NormalizedToolbarArgType, ToolbarArgType, ToolbarItem } from '../types'; + +const defaultItemValues: ToolbarItem = { + type: 'item', + value: '', +}; + +export const normalizeArgType = ( + key: string, + argType: ToolbarArgType +): NormalizedToolbarArgType => ({ + ...argType, + name: argType.name || key, + description: argType.description || key, + toolbar: { + ...argType.toolbar, + items: argType.toolbar.items.map((_item) => { + const item = typeof _item === 'string' ? { value: _item, title: _item } : _item; + + // Cater for the special type "reset" which will reset value and also icon + // of toolbar button if any icon was present on toolbar to begin with + if (item.type === 'reset' && argType.toolbar.icon) { + item.icon = argType.toolbar.icon; + item.hideIcon = true; + } + + return { ...defaultItemValues, ...item }; + }), + }, +}); diff --git a/code/addons/toolbars/template/stories/preview.ts b/code/addons/toolbars/template/stories/preview.ts index f33080bd49a3..c37009553346 100644 --- a/code/addons/toolbars/template/stories/preview.ts +++ b/code/addons/toolbars/template/stories/preview.ts @@ -1,94 +1,44 @@ -export const globalTypes = globalThis.FEATURES?.addonToolbarParameters - ? {} - : { - theme: { - name: 'Theme', - description: 'Global theme for components', - toolbar: { - icon: 'circlehollow', - title: 'Theme', - items: [ - { value: 'light', icon: 'sun', title: 'light' }, - { value: 'dark', icon: 'moon', title: 'dark' }, - { value: 'side-by-side', icon: 'sidebyside', title: 'side by side' }, - { value: 'stacked', icon: 'stacked', title: 'stacked' }, - ], +export const globalTypes = { + theme: { + name: 'Theme', + description: 'Global theme for components', + toolbar: { + icon: 'circlehollow', + title: 'Theme', + items: [ + { value: 'light', icon: 'sun', title: 'light' }, + { value: 'dark', icon: 'moon', title: 'dark' }, + { value: 'side-by-side', icon: 'sidebyside', title: 'side by side' }, + { value: 'stacked', icon: 'stacked', title: 'stacked' }, + ], + }, + }, + locale: { + name: 'Locale', + description: 'Internationalization locale', + toolbar: { + icon: 'globe', + shortcuts: { + next: { + label: 'Go to next language', + keys: ['L'], }, - }, - locale: { - name: 'Locale', - description: 'Internationalization locale', - toolbar: { - icon: 'globe', - shortcuts: { - next: { - label: 'Go to next language', - keys: ['L'], - }, - previous: { - label: 'Go to previous language', - keys: ['K'], - }, - reset: { - label: 'Reset language', - keys: ['meta', 'shift', 'L'], - }, - }, - items: [ - { title: 'Reset locale', type: 'reset' }, - { value: 'en', right: '🇺🇸', title: 'English' }, - { value: 'es', right: '🇪🇸', title: 'Español' }, - { value: 'zh', right: '🇨🇳', title: '中文' }, - { value: 'kr', right: '🇰🇷', title: '한국어' }, - ], + previous: { + label: 'Go to previous language', + keys: ['K'], }, - }, - }; - -export const initialGlobals = { - theme: undefined, - locale: undefined, -}; - -export const parameters = globalThis.FEATURES?.addonToolbarParameters - ? { - toolbars: { - theme: { - title: 'Theme', - description: 'Global theme for components', - icon: 'circlehollow', - items: [ - { value: 'light', icon: 'sun', title: 'light' }, - { value: 'dark', icon: 'moon', title: 'dark' }, - { value: 'side-by-side', icon: 'sidebyside', title: 'side by side' }, - { value: 'stacked', icon: 'stacked', title: 'stacked' }, - ], - }, - locale: { - description: 'Internationalization locale', - icon: 'globe', - shortcuts: { - next: { - label: 'Go to next language', - keys: ['L'], - }, - previous: { - label: 'Go to previous language', - keys: ['K'], - }, - reset: { - label: 'Reset language', - keys: ['meta', 'shift', 'L'], - }, - }, - items: [ - { title: 'Reset locale', type: 'reset' }, - { value: 'en', right: '🇺🇸', title: 'English' }, - { value: 'es', right: '🇪🇸', title: 'Español' }, - { value: 'zh', right: '🇨🇳', title: '中文' }, - { value: 'kr', right: '🇰🇷', title: '한국어' }, - ], + reset: { + label: 'Reset language', + keys: ['meta', 'shift', 'L'], }, }, - } - : {}; + items: [ + { title: 'Reset locale', type: 'reset' }, + { value: 'en', right: '🇺🇸', title: 'English' }, + { value: 'es', right: '🇪🇸', title: 'Español' }, + { value: 'zh', right: '🇨🇳', title: '中文' }, + { value: 'kr', right: '🇰🇷', title: '한국어' }, + ], + }, + }, +}; diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts index ef5cdc524871..d1c161692a30 100644 --- a/code/core/src/types/modules/core-common.ts +++ b/code/core/src/types/modules/core-common.ts @@ -384,10 +384,6 @@ export interface StorybookConfigRaw { * use globals & globalTypes for configuring the backgrounds addon */ backgroundsStoryGlobals?: boolean; - /** - * use parameters configure the toolbar addon - */ - addonToolbarParameters?: boolean; /** * use globals & globalTypes for configuring the themes addon */ From d502f2233ae30f34fcd437c1d72e6c98cba788f6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 11:58:14 +0200 Subject: [PATCH 078/105] make the API change to viewport's globals/parameters addon opt-in via feature flag --- .../addons/viewport/src/legacy/ToolLegacy.tsx | 44 ++++++++----------- code/addons/viewport/src/preview.ts | 8 ++-- 2 files changed, 23 insertions(+), 29 deletions(-) diff --git a/code/addons/viewport/src/legacy/ToolLegacy.tsx b/code/addons/viewport/src/legacy/ToolLegacy.tsx index a1e8b497b36e..4539d44556e4 100644 --- a/code/addons/viewport/src/legacy/ToolLegacy.tsx +++ b/code/addons/viewport/src/legacy/ToolLegacy.tsx @@ -1,5 +1,5 @@ import type { ReactNode, FC } from 'react'; -import React, { useState, Fragment, useEffect, useRef } from 'react'; +import React, { useState, Fragment, useEffect, useRef, memo } from 'react'; import memoize from 'memoizerific'; import { styled, Global } from 'storybook/internal/theming'; @@ -11,7 +11,7 @@ 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 '../types'; +import type { ViewportMap, ViewportStyles, Styles } from '../types'; import type { ViewportAddonParameter } from './ViewportAddonParameter'; interface ViewportItem { @@ -115,9 +115,8 @@ const getStyles = ( return isRotated ? flip(result) : result; }; -export const ViewportToolLegacy: FC = () => { - const [globals, updateGlobals, storyGlobals] = useGlobals(); - const isDisabled = PARAM_KEY in storyGlobals; +export const ViewportTool: FC = memo(function Tool() { + const [globals, updateGlobals] = useGlobals(); const { viewports = MINIMAL_VIEWPORTS, @@ -137,14 +136,10 @@ export const ViewportToolLegacy: FC = () => { } useEffect(() => { - registerShortcuts(api, globals.viewport, updateGlobals, Object.keys(viewports)); - }, [viewports, globals.viewport, updateGlobals, api]); + registerShortcuts(api, globals, updateGlobals, Object.keys(viewports)); + }, [viewports, globals, globals.viewport, updateGlobals, api]); useEffect(() => { - if (isDisabled) { - return; - } - const defaultRotated = defaultOrientation === 'landscape'; if ( @@ -198,7 +193,6 @@ export const ViewportToolLegacy: FC = () => { onVisibleChange={setIsTooltipVisible} > { - {styles && ( - - )} - {styles && !isDisabled ? ( + {styles ? ( + {styles.width.replace('px', '')} @@ -248,4 +240,4 @@ export const ViewportToolLegacy: FC = () => { ) : null} ); -}; +}); diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts index a22081500159..e0080d2f269b 100644 --- a/code/addons/viewport/src/preview.ts +++ b/code/addons/viewport/src/preview.ts @@ -1,5 +1,7 @@ import { PARAM_KEY as KEY } from './constants'; -export const initialGlobals = { - [KEY]: { value: 'reset', isRotated: false }, -}; +export const initialGlobals = FEATURES?.viewportStoryGlobals + ? { + [KEY]: { value: 'reset', isRotated: false }, + } + : { viewport: 'reset', viewportRotated: false }; From 9fb86c52c3bbae739f46f7b575df21a3c87f9ef5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 12:01:10 +0200 Subject: [PATCH 079/105] add extra story testing disabled in new pattern --- code/addons/viewport/template/stories/globals.stories.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts index d8307ff32be5..f65706846a5a 100644 --- a/code/addons/viewport/template/stories/globals.stories.ts +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -51,3 +51,11 @@ export const NoRationDefined = { }, }, }; + +export const Disabled = { + parameters: { + viewport: { + disabled: true, + }, + }, +}; From 3e8fc2cd8b98c1779b9cba93b4704f48e006741e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 13:31:19 +0200 Subject: [PATCH 080/105] clarify the naming/color --- code/addons/backgrounds/template/stories/globals.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/backgrounds/template/stories/globals.stories.ts b/code/addons/backgrounds/template/stories/globals.stories.ts index 1e9711ce7619..a85f9fe7d64c 100644 --- a/code/addons/backgrounds/template/stories/globals.stories.ts +++ b/code/addons/backgrounds/template/stories/globals.stories.ts @@ -39,7 +39,7 @@ export const UnsetCustom = { parameters: { backgrounds: { options: { - pink: { value: '#d45a00', name: 'hot' }, + pink: { value: '#Ff5CB7', name: 'hot pink' }, }, }, }, From 9eedc1ba0038c40f3039f4f0caa8020c92173cee Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 13:32:05 +0200 Subject: [PATCH 081/105] add initialGlobals for toolbars, simplify decorator in main storybook --- code/.storybook/preview.tsx | 13 ++++++++++--- code/addons/toolbars/template/stories/preview.ts | 5 +++++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 19852863c680..fb55e8a3506c 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -161,9 +161,16 @@ export const decorators = [ * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar */ (StoryFn, { globals, playFunction, args, userGlobals, storyGlobals }) => { - const defaultTheme = - isChromatic() && !playFunction && args.autoplay !== true ? 'stacked' : 'light'; - const theme = storyGlobals.theme || userGlobals.theme || globals.theme || defaultTheme; + let theme = globals.theme; + + if ( + isChromatic() && + !playFunction && + args.autoplay !== true && + (theme === 'side-by-side' || theme === 'stacked') + ) { + theme = 'light'; + } switch (theme) { case 'side-by-side': { diff --git a/code/addons/toolbars/template/stories/preview.ts b/code/addons/toolbars/template/stories/preview.ts index c37009553346..0df95d7080d1 100644 --- a/code/addons/toolbars/template/stories/preview.ts +++ b/code/addons/toolbars/template/stories/preview.ts @@ -42,3 +42,8 @@ export const globalTypes = { }, }, }; + +export const initialGlobals = { + theme: 'light', + locale: 'en', +}; From a8f9779272b38df0b1a4821ba546fd9e37f029b7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 14:06:48 +0200 Subject: [PATCH 082/105] override theme in chromatic or when playFunction, fixing some padding issues --- code/.storybook/preview.tsx | 51 ++++++++++--------- .../navigation/MobileNavigation.stories.tsx | 4 +- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index fb55e8a3506c..f075ba49bacf 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -12,7 +12,7 @@ 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'; @@ -22,7 +22,7 @@ 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, @@ -32,8 +32,10 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right' }>( height: '100vh', bottom: 0, overflow: 'auto', - padding: 10, }, + ({ layout }) => ({ + padding: layout === 'fullscreen' ? 0 : 10, + }), ({ theme }) => ({ background: theme.background.content, color: theme.color.defaultText, @@ -50,7 +52,7 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right' }>( } ); -const ThemeStack = styled.div( +const ThemeStack = styled.div<{ layout: string }>( { position: 'relative', minHeight: 'calc(50vh - 15px)', @@ -58,6 +60,9 @@ const ThemeStack = styled.div( ({ theme }) => ({ background: theme.background.content, color: theme.color.defaultText, + }), + ({ layout }) => ({ + padding: layout === 'fullscreen' ? 0 : 10, }) ); @@ -160,16 +165,19 @@ export const decorators = [ /** * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar */ - (StoryFn, { globals, playFunction, args, userGlobals, storyGlobals }) => { + (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => { let theme = globals.theme; + let showPlayFnNotice = false; - if ( - isChromatic() && - !playFunction && - args.autoplay !== true && - (theme === 'side-by-side' || theme === 'stacked') - ) { + // 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.theme) { + theme = 'side-by-side'; } switch (theme) { @@ -180,12 +188,12 @@ export const decorators = [ - + - + @@ -199,12 +207,12 @@ export const decorators = [ - + - + @@ -217,7 +225,7 @@ export const decorators = [ - {!storyGlobals.theme && isChromatic() && playFunction && ( + {showPlayFnNotice && ( <> @@ -241,7 +249,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 ; @@ -254,6 +262,7 @@ export const decorators = [ ...args, onChange: (newValue) => { updateArgs({ [parameters.withRawArg]: newValue }); + // @ts-expect-error onChange is not a valid arg args.onChange?.(newValue); }, }} @@ -265,7 +274,7 @@ export const decorators = [ ); }, -]; +] satisfies Decorator[]; export const parameters = { options: { @@ -319,9 +328,3 @@ export const parameters = { }, }, }; - -// export const initialGlobals = { -// theme: 'light', -// viewport: { value: 'mobile1', isRotated: false }, -// backgrounds: { value: 'dark', grid: false }, -// } as const; diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx index 69d17c16ba67..5d0b8fe8a4ab 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx @@ -85,7 +85,9 @@ export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + globals: { theme: 'light' }, +}; export const Dark: Story = { globals: { theme: 'dark' }, parameters: { chromatic: { disable: true } }, From 7e74650e811e16b092d8cdbe9303693a09648fa8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 14:10:02 +0200 Subject: [PATCH 083/105] add more stories to toolbars stories --- .../toolbars/template/stories/globals.stories.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/code/addons/toolbars/template/stories/globals.stories.ts b/code/addons/toolbars/template/stories/globals.stories.ts index a638587a2745..a425ddb3e6e2 100644 --- a/code/addons/toolbars/template/stories/globals.stories.ts +++ b/code/addons/toolbars/template/stories/globals.stories.ts @@ -32,8 +32,21 @@ export default { export const Basic = {}; -export const Override = { +export const OverrideLocale = { globals: { locale: 'kr', }, }; + +export const OverrideTheme = { + globals: { + theme: 'dark', + }, +}; + +export const OverrideBoth = { + globals: { + locale: 'kr', + theme: 'dark', + }, +}; From 04d25fcbad22aaaf694309a650a4b299ab6ee37e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 14:15:32 +0200 Subject: [PATCH 084/105] improve typing --- code/addons/toolbars/template/stories/globals.stories.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/toolbars/template/stories/globals.stories.ts b/code/addons/toolbars/template/stories/globals.stories.ts index a425ddb3e6e2..0dd6a353dd84 100644 --- a/code/addons/toolbars/template/stories/globals.stories.ts +++ b/code/addons/toolbars/template/stories/globals.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import type { PartialStoryFn, StoryContext } from 'storybook/internal/types'; +import type { DecoratorFunction } from 'storybook/internal/types'; const greetingForLocale = (locale: string) => { switch (locale) { @@ -20,14 +20,14 @@ const greetingForLocale = (locale: string) => { export default { component: globalThis.Components.Pre, decorators: [ - (storyFn: PartialStoryFn, { globals }: StoryContext) => { + (storyFn, { globals }) => { const object = { ...globals, caption: `Locale is '${globals.locale}', so I say: ${greetingForLocale(globals.locale)}`, }; return storyFn({ args: { object } }); }, - ], + ] satisfies DecoratorFunction[], }; export const Basic = {}; From df0f09d89f187be3377c94e970c9e27fc3d0ae18 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 14:37:29 +0200 Subject: [PATCH 085/105] consistent naming of disable, stronger typing on setting state --- .../backgrounds/src/components/Tool.tsx | 32 ++++++++-------- code/addons/backgrounds/src/decorator.ts | 4 +- .../src/legacy/BackgroundSelectorLegacy.tsx | 33 +++++++++++----- code/addons/backgrounds/src/types.ts | 38 ++----------------- .../template/stories/globals.stories.ts | 2 +- code/addons/viewport/src/components/Tool.tsx | 22 +++++++---- code/addons/viewport/src/types.ts | 5 ++- .../template/stories/globals.stories.ts | 2 +- 8 files changed, 67 insertions(+), 71 deletions(-) diff --git a/code/addons/backgrounds/src/components/Tool.tsx b/code/addons/backgrounds/src/components/Tool.tsx index c84385de6b5c..7069645160a8 100644 --- a/code/addons/backgrounds/src/components/Tool.tsx +++ b/code/addons/backgrounds/src/components/Tool.tsx @@ -1,11 +1,11 @@ -import React, { useState, memo, Fragment } from 'react'; +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 } from '../types'; +import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types'; type Link = Parameters['0']['links'][0]; @@ -16,9 +16,9 @@ export const BackgroundTool = memo(function BackgroundSelector() { const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const { options = emptyBackgroundMap, disabled = true } = config || {}; + const { options = emptyBackgroundMap, disable = true } = config || {}; - if (disabled) { + if (disable) { return null; } @@ -71,6 +71,16 @@ const Pure = memo(function PureTool(props: PureProps) { isGridActive: isGrid, isTooltipVisible, } = props; + + const update = useCallback( + (input: GlobalStateUpdate) => { + updateGlobals({ + [KEY]: input, + }); + }, + [updateGlobals] + ); + return ( - updateGlobals({ - [KEY]: { value: backgroundName, grid: !isGrid }, - }) - } + onClick={() => update({ value: backgroundName, grid: !isGrid })} > @@ -103,9 +109,7 @@ const Pure = memo(function PureTool(props: PureProps) { title: 'Reset background', icon: , onClick: () => { - updateGlobals({ - [KEY]: { value: undefined, grid: isGrid }, - }); + update({ value: undefined, grid: isGrid }); onHide(); }, }, @@ -117,9 +121,7 @@ const Pure = memo(function PureTool(props: PureProps) { icon: , active: k === backgroundName, onClick: () => { - updateGlobals({ - [KEY]: { value: k, grid: isGrid }, - }); + update({ value: k, grid: isGrid }); onHide(); }, })), diff --git a/code/addons/backgrounds/src/decorator.ts b/code/addons/backgrounds/src/decorator.ts index 69f3e47d95f1..d64af7004a48 100644 --- a/code/addons/backgrounds/src/decorator.ts +++ b/code/addons/backgrounds/src/decorator.ts @@ -25,7 +25,7 @@ export const withBackgroundAndGrid = ( context: StoryContext ) => { const { globals, parameters, viewMode, id } = context; - const { options = {}, disabled, grid = defaultGrid } = (parameters[KEY] || {}) as Config; + const { options = {}, disable, grid = defaultGrid } = (parameters[KEY] || {}) as Config; const data = globals[KEY] || {}; const backgroundName: string = data.value; @@ -33,7 +33,7 @@ export const withBackgroundAndGrid = ( const value = item?.value || 'transparent'; const showGrid = data.grid || false; - const shownBackground = !!item && !disabled; + const shownBackground = !!item && !disable; 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/legacy/BackgroundSelectorLegacy.tsx b/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx index 2504e7a4c6af..41048cd240a0 100644 --- a/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx +++ b/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx @@ -1,5 +1,5 @@ -import type { FC } from 'react'; -import React, { useState, Fragment, useCallback, useMemo, memo } from 'react'; +import type { FC, ReactElement } from 'react'; +import React, { useState, useCallback, useMemo, memo } from 'react'; import memoize from 'memoizerific'; import { useParameter, useGlobals } from 'storybook/internal/manager-api'; @@ -9,14 +9,29 @@ 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 './ColorIcon'; -import type { - BackgroundSelectorItem, - Background, - BackgroundsParameter, - GlobalState, -} from '../types'; +import type { Background } from '../types'; import { getBackgroundColorByName } from './getBackgroundColorByName'; +export interface DeprecatedGlobalState { + name: string | undefined; + selected: string | undefined; +} + +export interface BackgroundsParameter { + default?: string | null; + disable?: boolean; + values: Background[]; +} + +export interface BackgroundSelectorItem { + id: string; + title: string; + onClick: () => void; + value: string; + active: boolean; + right?: ReactElement; +} + const createBackgroundSelectorItem = memoize(1000)( ( id: string | null, @@ -109,7 +124,7 @@ export const BackgroundToolLegacy: FC = memo(function BackgroundSelector() { links={getDisplayedItems( backgroundsConfig.values, selectedBackgroundColor, - ({ selected }: GlobalState) => { + ({ selected }: DeprecatedGlobalState) => { if (selectedBackgroundColor !== selected) { onBackgroundChange(selected); } diff --git a/code/addons/backgrounds/src/types.ts b/code/addons/backgrounds/src/types.ts index 6ca7bb99a50d..8f6c66b20a85 100644 --- a/code/addons/backgrounds/src/types.ts +++ b/code/addons/backgrounds/src/types.ts @@ -1,41 +1,8 @@ -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; - onClick: () => void; - value: string; - active: boolean; - right?: ReactElement; -} - -// 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; - defaultBackgroundName: string | null; - disable: boolean; -} - export type BackgroundMap = Record; export interface GridConfig { @@ -48,6 +15,9 @@ export interface GridConfig { export interface Config { options: BackgroundMap; - disabled: boolean; + disable: boolean; grid: GridConfig; } + +export type GlobalState = { value: string | undefined; grid: boolean }; +export type GlobalStateUpdate = Partial; diff --git a/code/addons/backgrounds/template/stories/globals.stories.ts b/code/addons/backgrounds/template/stories/globals.stories.ts index a85f9fe7d64c..ff6d407a6bef 100644 --- a/code/addons/backgrounds/template/stories/globals.stories.ts +++ b/code/addons/backgrounds/template/stories/globals.stories.ts @@ -48,7 +48,7 @@ export const UnsetCustom = { export const Disabled = { parameters: { backgrounds: { - disabled: true, + disable: true, }, }, }; diff --git a/code/addons/viewport/src/components/Tool.tsx b/code/addons/viewport/src/components/Tool.tsx index 22bd5cec5b35..f447b37d8501 100644 --- a/code/addons/viewport/src/components/Tool.tsx +++ b/code/addons/viewport/src/components/Tool.tsx @@ -1,4 +1,4 @@ -import React, { useState, Fragment, useEffect, type FC } from 'react'; +import React, { useState, Fragment, useEffect, type FC, useCallback } from 'react'; import { Global } from 'storybook/internal/theming'; import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components'; @@ -16,7 +16,7 @@ import { emptyViewportMap, } from '../utils'; import { responsiveViewport } from '../responsiveViewport'; -import type { Config, Viewport, ViewportMap } from '../types'; +import type { Config, Viewport, ViewportMap, GlobalState, GlobalStateUpdate } from '../types'; interface PureProps { item: Viewport; @@ -38,7 +38,7 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => { const [globals, updateGlobals, storyGlobals] = useGlobals(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const { options = emptyViewportMap, disabled } = config || {}; + const { options = emptyViewportMap, disable } = config || {}; const data = globals?.[KEY] || {}; const viewportName: string = data.value; const isRotated: boolean = data.isRotated; @@ -67,7 +67,7 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => { const width = isRotated ? item.styles.height : item.styles.width; const height = isRotated ? item.styles.width : item.styles.height; - if (disabled) { + if (disable) { return null; } @@ -102,6 +102,12 @@ const Pure = React.memo(function PureTool(props: PureProps) { width, height, } = props; + + const update = useCallback( + (input: GlobalStateUpdate) => updateGlobals({ [KEY]: input }), + [updateGlobals] + ); + return ( , onClick: () => { - updateGlobals({ [KEY]: { value: undefined, isRotated: false } }); + update({ value: undefined, isRotated: false }); onHide(); }, }, @@ -128,7 +134,7 @@ const Pure = React.memo(function PureTool(props: PureProps) { icon: iconsMap[value.type], active: k === viewportName, onClick: () => { - updateGlobals({ [KEY]: { value: k, isRotated: false } }); + update({ value: k, isRotated: false }); onHide(); }, })), @@ -144,7 +150,7 @@ const Pure = React.memo(function PureTool(props: PureProps) { title="Change the size of the preview" active={isActive} onDoubleClick={() => { - updateGlobals({ [KEY]: { value: undefined, isRotated: false } }); + update({ value: undefined, isRotated: false }); }} > @@ -172,7 +178,7 @@ const Pure = React.memo(function PureTool(props: PureProps) { key="viewport-rotate" title="Rotate viewport" onClick={() => { - updateGlobals({ [KEY]: { value: viewportName, isRotated: !isRotated } }); + update({ value: viewportName, isRotated: !isRotated }); }} > diff --git a/code/addons/viewport/src/types.ts b/code/addons/viewport/src/types.ts index c4fdb7f2ab43..33f186c2c3c1 100644 --- a/code/addons/viewport/src/types.ts +++ b/code/addons/viewport/src/types.ts @@ -21,5 +21,8 @@ export type ViewportMap = Record; export interface Config { options: Record; - disabled: boolean; + disable: boolean; } + +export type GlobalState = { value: string | undefined; isRotated: boolean }; +export type GlobalStateUpdate = Partial; diff --git a/code/addons/viewport/template/stories/globals.stories.ts b/code/addons/viewport/template/stories/globals.stories.ts index f65706846a5a..621bf0b02c62 100644 --- a/code/addons/viewport/template/stories/globals.stories.ts +++ b/code/addons/viewport/template/stories/globals.stories.ts @@ -55,7 +55,7 @@ export const NoRationDefined = { export const Disabled = { parameters: { viewport: { - disabled: true, + disable: true, }, }, }; From 3184e9327cb44b0bed00c5021aa38af7478d8021 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 14:50:16 +0200 Subject: [PATCH 086/105] cleanup --- .../src/legacy/BackgroundSelectorLegacy.tsx | 5 +---- code/addons/backgrounds/src/preview.ts | 8 ++++---- code/addons/viewport/src/legacy/ToolLegacy.tsx | 2 +- code/addons/viewport/src/preview.ts | 14 +++++++++----- 4 files changed, 15 insertions(+), 14 deletions(-) diff --git a/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx b/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx index 41048cd240a0..dcc8ffb8e658 100644 --- a/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx +++ b/code/addons/backgrounds/src/legacy/BackgroundSelectorLegacy.tsx @@ -83,7 +83,7 @@ export const BackgroundToolLegacy: FC = memo(function BackgroundSelector() { DEFAULT_BACKGROUNDS_CONFIG ); const [isTooltipVisible, setIsTooltipVisible] = useState(false); - const [globals, updateGlobals, storyGlobals] = useGlobals(); + const [globals, updateGlobals] = useGlobals(); const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value; @@ -112,8 +112,6 @@ export const BackgroundToolLegacy: FC = memo(function BackgroundSelector() { return null; } - const isDisabled = BACKGROUNDS_PARAM_KEY in storyGlobals; - return ( , }; -export const initialGlobals = { - [KEY]: { background: undefined, grid: false }, +export const initialGlobals: Record = { + [KEY]: { value: undefined, grid: false }, }; diff --git a/code/addons/viewport/src/legacy/ToolLegacy.tsx b/code/addons/viewport/src/legacy/ToolLegacy.tsx index 4539d44556e4..c3eb3f59f7ae 100644 --- a/code/addons/viewport/src/legacy/ToolLegacy.tsx +++ b/code/addons/viewport/src/legacy/ToolLegacy.tsx @@ -115,7 +115,7 @@ const getStyles = ( return isRotated ? flip(result) : result; }; -export const ViewportTool: FC = memo(function Tool() { +export const ViewportToolLegacy: FC = memo(function Tool() { const [globals, updateGlobals] = useGlobals(); const { diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts index e0080d2f269b..eb1a10dae5ba 100644 --- a/code/addons/viewport/src/preview.ts +++ b/code/addons/viewport/src/preview.ts @@ -1,7 +1,11 @@ import { PARAM_KEY as KEY } from './constants'; +import type { GlobalState } from './types'; -export const initialGlobals = FEATURES?.viewportStoryGlobals - ? { - [KEY]: { value: 'reset', isRotated: false }, - } - : { viewport: 'reset', viewportRotated: false }; +const modern: Record = { + [KEY]: { value: 'reset', isRotated: false }, +}; + +// TODO: remove in 9.0 +const legacy = { viewport: 'reset', viewportRotated: false }; + +export const initialGlobals = FEATURES?.viewportStoryGlobals ? modern : legacy; From 72dbdf35fd43aa3f7d29948d644c0a0eda9aac51 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 14:52:55 +0200 Subject: [PATCH 087/105] cleanup --- code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx b/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx index 9a114b75ee8f..e061fd4f2311 100644 --- a/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx +++ b/code/addons/backgrounds/src/legacy/GridSelectorLegacy.tsx @@ -8,7 +8,7 @@ import { GridIcon } from '@storybook/icons'; import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants'; export const GridToolLegacy: FC = memo(function GridSelector() { - const [globals, updateGlobals, storyGlobals] = useGlobals(); + const [globals, updateGlobals] = useGlobals(); const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, { grid: { disable: false }, @@ -18,14 +18,12 @@ export const GridToolLegacy: FC = memo(function GridSelector() { return null; } - const isDisabled = BACKGROUNDS_PARAM_KEY in storyGlobals; const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid || false; return ( updateGlobals({ From fe3c81a29422bd06735e620879ac9a4b46ba4c91 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 16:20:51 +0200 Subject: [PATCH 088/105] fix test, after story rename/addition --- code/e2e-tests/addon-toolbars.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/e2e-tests/addon-toolbars.spec.ts b/code/e2e-tests/addon-toolbars.spec.ts index cb9a5375894a..b642ebca7967 100644 --- a/code/e2e-tests/addon-toolbars.spec.ts +++ b/code/e2e-tests/addon-toolbars.spec.ts @@ -27,7 +27,7 @@ test.describe('addon-toolbars', () => { const sbPage = new SbPage(page); // Click on viewport button and select spanish - await sbPage.navigateToStory('addons/toolbars/globals', 'override'); + await sbPage.navigateToStory('addons/toolbars/globals', 'override-locale'); await expect(sbPage.previewRoot()).toContainText('안녕하세요'); const button = await sbPage.page.locator('[title="Internationalization locale"]'); From 0c925d957ba52249ae77a7d14beac75e6db25a34 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 16:25:26 +0200 Subject: [PATCH 089/105] fix --- code/.storybook/preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index f075ba49bacf..4bb85eefb2c2 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -176,7 +176,7 @@ export const decorators = [ if (playFunction && args.autoplay !== false && !(theme === 'light' || theme === 'dark')) { theme = 'light'; showPlayFnNotice = true; - } else if (isChromatic() && !storyGlobals.theme) { + } else if (isChromatic() && !storyGlobals.theme && !playFunction) { theme = 'side-by-side'; } From 8ff2ebad49d09d4ff5331ba3d94df1517cad2920 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 16:49:59 +0200 Subject: [PATCH 090/105] set initialGlobals of background to null --- code/addons/backgrounds/src/preview.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts index f7418c2dde6c..441e9b28a67c 100644 --- a/code/addons/backgrounds/src/preview.ts +++ b/code/addons/backgrounds/src/preview.ts @@ -34,6 +34,7 @@ export const parameters = { } satisfies Partial, }; -export const initialGlobals: Record = { +const modern: Record = { [KEY]: { value: undefined, grid: false }, }; +export const initialGlobals = FEATURES?.backgroundsStoryGlobals ? modern : { [KEY]: null }; From c9a237679d88cbc89f73fe961088cc0881c5dfeb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 30 Jul 2024 19:47:34 +0200 Subject: [PATCH 091/105] chromatic preferred theme is stacked, not side-by-side --- code/.storybook/main.ts | 2 +- code/.storybook/preview.tsx | 2 +- code/addons/backgrounds/src/components/Tool.tsx | 1 - code/addons/backgrounds/src/preview.ts | 1 + code/addons/viewport/src/preview.ts | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 7c4f74c8c2ef..0f44dde28aa1 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -119,8 +119,8 @@ const config: StorybookConfig = { }, features: { viewportStoryGlobals: true, - themesStoryGlobals: true, backgroundsStoryGlobals: true, + // themesStoryGlobals: true, }, viteFinal: (viteConfig, { configType }) => mergeConfig(viteConfig, { diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 4bb85eefb2c2..1f66c2396d9d 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -177,7 +177,7 @@ export const decorators = [ theme = 'light'; showPlayFnNotice = true; } else if (isChromatic() && !storyGlobals.theme && !playFunction) { - theme = 'side-by-side'; + theme = 'stacked'; } switch (theme) { diff --git a/code/addons/backgrounds/src/components/Tool.tsx b/code/addons/backgrounds/src/components/Tool.tsx index 7069645160a8..e214780714e4 100644 --- a/code/addons/backgrounds/src/components/Tool.tsx +++ b/code/addons/backgrounds/src/components/Tool.tsx @@ -17,7 +17,6 @@ export const BackgroundTool = memo(function BackgroundSelector() { const [isTooltipVisible, setIsTooltipVisible] = useState(false); const { options = emptyBackgroundMap, disable = true } = config || {}; - if (disable) { return null; } diff --git a/code/addons/backgrounds/src/preview.ts b/code/addons/backgrounds/src/preview.ts index 441e9b28a67c..dad8dad077bb 100644 --- a/code/addons/backgrounds/src/preview.ts +++ b/code/addons/backgrounds/src/preview.ts @@ -37,4 +37,5 @@ export const parameters = { const modern: Record = { [KEY]: { value: undefined, grid: false }, }; + export const initialGlobals = FEATURES?.backgroundsStoryGlobals ? modern : { [KEY]: null }; diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts index eb1a10dae5ba..a59790415d2f 100644 --- a/code/addons/viewport/src/preview.ts +++ b/code/addons/viewport/src/preview.ts @@ -2,7 +2,7 @@ import { PARAM_KEY as KEY } from './constants'; import type { GlobalState } from './types'; const modern: Record = { - [KEY]: { value: 'reset', isRotated: false }, + [KEY]: { value: undefined, isRotated: false }, }; // TODO: remove in 9.0 From a63999c2a4c56a68b803c8e8624db913662e91b0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 31 Jul 2024 15:05:01 +0200 Subject: [PATCH 092/105] rename the theme global we use internally to `sb_theme`. add addon-themes to template stories, and to main storybook. --- code/.storybook/main.ts | 5 + code/.storybook/preview.tsx | 5 +- .../template/stories/conditional.stories.ts | 8 +- .../src/components/Interaction.stories.tsx | 2 +- .../components/InteractionsPanel.stories.tsx | 2 +- .../template/stories/basics.stories.ts | 2 +- code/addons/themes/src/constants.ts | 1 + .../src/decorators/class-name.decorator.tsx | 4 +- .../decorators/data-attribute.decorator.tsx | 2 +- .../src/decorators/provider.decorator.tsx | 2 +- code/addons/themes/src/preview.tsx | 7 +- code/addons/themes/src/theme-switcher.tsx | 85 +++++++++-------- .../template/stories/decorators.stories.ts | 93 +++++++++++++++++++ .../template/stories/globals.stories.ts | 64 +++++++++++++ .../template/stories/parameters.stories.ts | 81 ++++++++++++++++ .../template/stories/globals.stories.ts | 4 +- .../toolbars/template/stories/preview.ts | 4 +- .../components/tabs/tabs.stories.tsx | 2 +- .../components/layout/Layout.stories.tsx | 6 +- .../mobile/about/MobileAbout.stories.tsx | 4 +- .../navigation/MobileNavigation.stories.tsx | 4 +- .../components/preview/Iframe.stories.tsx | 2 +- .../components/sidebar/Explorer.stories.tsx | 2 +- .../sidebar/FileSearchModal.stories.tsx | 2 +- .../components/sidebar/Tree.stories.tsx | 28 +++--- code/core/src/preview-api/Errors.stories.tsx | 2 +- .../theme-decorator/decorators.stories.ts | 4 +- .../blocks/src/examples/Button.stories.tsx | 2 +- ...uttonWithMetaDescriptionAsBoth.stories.tsx | 2 +- ...onWithMetaDescriptionAsComment.stories.tsx | 2 +- ...WithMetaDescriptionAsParameter.stories.tsx | 3 +- .../ButtonWithMetaSubtitleAsBoth.stories.tsx | 3 +- ...etaSubtitleAsComponentSubtitle.stories.tsx | 3 +- ...WithMetaSubtitleAsDocsSubtitle.stories.tsx | 3 +- .../src/examples/StoryParameters.stories.tsx | 3 +- code/package.json | 1 + 36 files changed, 350 insertions(+), 99 deletions(-) create mode 100644 code/addons/themes/template/stories/decorators.stories.ts create mode 100644 code/addons/themes/template/stories/globals.stories.ts create mode 100644 code/addons/themes/template/stories/parameters.stories.ts diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 0f44dde28aa1..24c266d000de 100644 --- a/code/.storybook/main.ts +++ b/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', diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 1f66c2396d9d..9299f42052b3 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -166,7 +166,7 @@ export const decorators = [ * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar */ (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => { - let theme = globals.theme; + let theme = globals.sb_theme; let showPlayFnNotice = false; // this makes the decorator be out of 'phase' with the actually selected theme in the toolbar @@ -315,6 +315,9 @@ export const parameters = { viewport: { options: MINIMAL_VIEWPORTS, }, + themes: { + disable: true, + }, backgrounds: { options: { light: { name: 'light', value: '#edecec' }, diff --git a/code/addons/controls/template/stories/conditional.stories.ts b/code/addons/controls/template/stories/conditional.stories.ts index 32f795b63f16..ed3c51d8ba8e 100644 --- a/code/addons/controls/template/stories/conditional.stories.ts +++ b/code/addons/controls/template/stories/conditional.stories.ts @@ -54,9 +54,9 @@ export const ToggleExpandCollapse = { export const GlobalBased = { argTypes: { - ifThemeExists: { control: 'text', if: { global: 'theme' } }, - ifThemeNotExists: { control: 'text', if: { global: 'theme', exists: false } }, - ifLightTheme: { control: 'text', if: { global: 'theme', eq: 'light' } }, - ifNotLightTheme: { control: 'text', if: { global: 'theme', neq: 'light' } }, + ifThemeExists: { control: 'text', if: { global: 'sb_theme' } }, + ifThemeNotExists: { control: 'text', if: { global: 'sb_theme', exists: false } }, + ifLightTheme: { control: 'text', if: { global: 'sb_theme', eq: 'light' } }, + ifNotLightTheme: { control: 'text', if: { global: 'sb_theme', neq: 'light' } }, }, }; diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx index 731d5dca8f0b..98f579090986 100644 --- a/code/addons/interactions/src/components/Interaction.stories.tsx +++ b/code/addons/interactions/src/components/Interaction.stories.tsx @@ -54,7 +54,7 @@ export const Disabled: Story = { export const Hovered: Story = { ...Done, - globals: { theme: 'light' }, + globals: { sb_theme: 'light' }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.hover(canvas.getByRole('button')); diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index 3d673e2605b0..322c3a416001 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -34,7 +34,7 @@ const meta = { ), ], parameters: { layout: 'fullscreen' }, - globals: { theme: 'light' }, + globals: { sb_theme: 'light' }, args: { calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])), controls: SubnavStories.args.controls, diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index 76112af830c1..459471817711 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -15,7 +15,7 @@ export default { onSuccess: fn(), }, globals: { - theme: 'light', + sb_theme: 'light', }, }; diff --git a/code/addons/themes/src/constants.ts b/code/addons/themes/src/constants.ts index 677c9499a7b4..654cc57ea893 100644 --- a/code/addons/themes/src/constants.ts +++ b/code/addons/themes/src/constants.ts @@ -15,6 +15,7 @@ export const DEFAULT_ADDON_STATE: ThemeAddonState = { export interface ThemeParameters { themeOverride?: string; + disable?: boolean; } export const DEFAULT_THEME_PARAMETERS: ThemeParameters = {}; diff --git a/code/addons/themes/src/decorators/class-name.decorator.tsx b/code/addons/themes/src/decorators/class-name.decorator.tsx index b8ebe8c89810..4bc56202f038 100644 --- a/code/addons/themes/src/decorators/class-name.decorator.tsx +++ b/code/addons/themes/src/decorators/class-name.decorator.tsx @@ -14,7 +14,7 @@ const DEFAULT_ELEMENT_SELECTOR = 'html'; const classStringToArray = (classString: string) => classString.split(' ').filter(Boolean); // TODO check with @kasperpeulen: change the types so they can be correctly inferred from context e.g. any> -export const withThemeByClassName = ({ +export const withThemeByClassName = ({ themes, defaultTheme, parentSelector = DEFAULT_ELEMENT_SELECTOR, @@ -47,7 +47,7 @@ export const withThemeByClassName = ({ if (newThemeClasses.length > 0) { parentElement.classList.add(...newThemeClasses); } - }, [themeOverride, selected, parentSelector]); + }, [themeOverride, selected]); return storyFn(); }; diff --git a/code/addons/themes/src/decorators/data-attribute.decorator.tsx b/code/addons/themes/src/decorators/data-attribute.decorator.tsx index dee9988ec7d0..05ad62792e7c 100644 --- a/code/addons/themes/src/decorators/data-attribute.decorator.tsx +++ b/code/addons/themes/src/decorators/data-attribute.decorator.tsx @@ -31,7 +31,7 @@ export const withThemeByDataAttribute = ({ if (parentElement) { parentElement.setAttribute(attributeName, themes[themeKey]); } - }, [themeOverride, selected, parentSelector, attributeName]); + }, [themeOverride, selected]); return storyFn(); }; diff --git a/code/addons/themes/src/decorators/provider.decorator.tsx b/code/addons/themes/src/decorators/provider.decorator.tsx index 09eb5824c488..f8b477810035 100644 --- a/code/addons/themes/src/decorators/provider.decorator.tsx +++ b/code/addons/themes/src/decorators/provider.decorator.tsx @@ -38,7 +38,7 @@ export const withThemeFromJSXProvider = ({ const pairs = Object.entries(themes); return pairs.length === 1 ? pluckThemeFromKeyPairTuple(pairs[0]) : themes[selectedThemeName]; - }, [themes, selected, themeOverride]); + }, [selected, themeOverride]); if (!Provider) { return ( diff --git a/code/addons/themes/src/preview.tsx b/code/addons/themes/src/preview.tsx index 28c52bdbb57a..6f4a444e7f7c 100644 --- a/code/addons/themes/src/preview.tsx +++ b/code/addons/themes/src/preview.tsx @@ -1,7 +1,6 @@ import type { Renderer, ProjectAnnotations } from 'storybook/internal/types'; -import { GLOBAL_KEY } from './constants'; +import { GLOBAL_KEY as KEY } from './constants'; -export const globals: ProjectAnnotations['globals'] = { - // Required to make sure SB picks this up from URL params - [GLOBAL_KEY]: '', +export const initialGlobals: ProjectAnnotations['initialGlobals'] = { + [KEY]: '', }; diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx index bbc836177ea0..d57b9ce1e5e8 100644 --- a/code/addons/themes/src/theme-switcher.tsx +++ b/code/addons/themes/src/theme-switcher.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useMemo } from 'react'; +import React from 'react'; import { useAddonState, useChannel, @@ -17,6 +17,7 @@ import { THEMING_EVENTS, DEFAULT_ADDON_STATE, DEFAULT_THEME_PARAMETERS, + GLOBAL_KEY as KEY, } from './constants'; const IconButtonLabel = styled.div(({ theme }) => ({ @@ -27,11 +28,11 @@ const hasMultipleThemes = (themesList: ThemeAddonState['themesList']) => themesL const hasTwoThemes = (themesList: ThemeAddonState['themesList']) => themesList.length === 2; export const ThemeSwitcher = React.memo(function ThemeSwitcher() { - const { themeOverride } = useParameter( + const { themeOverride, disable } = useParameter( PARAM_KEY, DEFAULT_THEME_PARAMETERS ) as ThemeParameters; - const [{ theme: selected }, updateGlobals] = useGlobals(); + const [{ theme: selected }, updateGlobals, storyGlobals] = useGlobals(); const channel = addons.getChannel(); const fromLast = channel.last(THEMING_EVENTS.REGISTER_THEMES); @@ -45,6 +46,8 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() { initializeThemeState ); + const isLocked = KEY in storyGlobals || !!themeOverride; + useChannel({ [THEMING_EVENTS.REGISTER_THEMES]: ({ themes, defaultTheme }) => { updateState((state) => ({ @@ -55,21 +58,24 @@ export const ThemeSwitcher = React.memo(function ThemeSwitcher() { }, }); - const label = useMemo(() => { - if (themeOverride) { - return <>Story override; - } - - const themeName = selected || themeDefault; + const themeName = selected || themeDefault; + let label = ''; + if (isLocked) { + label = 'Story override'; + } else if (themeName) { + label = `${themeName} theme`; + } - return themeName && <>{`${themeName} theme`}; - }, [themeOverride, themeDefault, selected]); + if (disable) { + return null; + } if (hasTwoThemes(themesList)) { const currentTheme = selected || themeDefault; const alternateTheme = themesList.find((theme) => theme !== currentTheme); return ( - {label && {label}} + {label ? {label} : null} ); } if (hasMultipleThemes(themesList)) { return ( - - { - return ( - ({ - id: theme, - title: theme, - active: selected === theme, - onClick: () => { - updateGlobals({ theme }); - onHide(); - }, - }))} - /> - ); - }} + { + return ( + ({ + id: theme, + title: theme, + active: selected === theme, + onClick: () => { + updateGlobals({ theme }); + onHide(); + }, + }))} + /> + ); + }} + > + - - - {label && {label}} - - - + + {label && {label}} + + ); } diff --git a/code/addons/themes/template/stories/decorators.stories.ts b/code/addons/themes/template/stories/decorators.stories.ts new file mode 100644 index 000000000000..b5ac268e6956 --- /dev/null +++ b/code/addons/themes/template/stories/decorators.stories.ts @@ -0,0 +1,93 @@ +import { global as globalThis } from '@storybook/global'; +import { + withThemeByClassName, + withThemeByDataAttribute, + withThemeFromJSXProvider, +} from '@storybook/addon-themes'; +import { useEffect } from 'storybook/internal/preview-api'; + +const cleanup = () => { + const existing = globalThis.document.querySelector('style[data-theme-css]'); + if (existing) { + existing.remove(); + } +}; + +const addStyleSheetDecorator = (storyFn: any) => { + useEffect(() => { + cleanup(); + + const sheet = globalThis.document.createElement('style'); + sheet.setAttribute('data-theme-css', ''); + sheet.textContent = ` + [data-theme="theme-a"], .theme-a { + background-color: white; + color: black; + } + [data-theme="theme-b"], .theme-b { + background-color: black; + color: white; + } + `; + + globalThis.document.body.appendChild(sheet); + + return cleanup; + }); + + return storyFn(); +}; + +export default { + component: globalThis.Components.Pre, + args: { + text: 'Testing the themes', + }, + parameters: { + chromatic: { disable: true }, + themes: { disable: false }, + }, + decorators: [addStyleSheetDecorator], +}; + +export const WithThemeByClassName = { + globals: {}, + decorators: [ + withThemeByClassName({ + defaultTheme: 'a', + themes: { a: 'theme-a', b: 'theme-b' }, + parentSelector: '#storybook-root > *', + }), + ], +}; + +export const WithThemeByDataAttribute = { + globals: {}, + decorators: [ + withThemeByDataAttribute({ + defaultTheme: 'a', + themes: { a: 'theme-a', b: 'theme-b' }, + parentSelector: '#storybook-root > *', + }), + ], +}; + +export const WithThemeFromJSXProvider = { + globals: {}, + decorators: [ + withThemeFromJSXProvider({ + defaultTheme: 'a', + themes: { a: { custom: 'theme-a' }, b: { custom: 'theme-b' } }, + Provider: ({ theme, children }: any) => { + // this is not was a normal provider looks like obviously, but this needs to work in non-react as well + // the timeout is to wait for the render to complete, as it's not possible to use the useEffect hook here + setTimeout(() => { + const element = globalThis.document.querySelector('#storybook-root > *'); + element?.classList.remove('theme-a', 'theme-b'); + element?.classList.add(theme.custom); + }, 16); + return children; + }, + }), + ], +}; diff --git a/code/addons/themes/template/stories/globals.stories.ts b/code/addons/themes/template/stories/globals.stories.ts new file mode 100644 index 000000000000..d18025328edc --- /dev/null +++ b/code/addons/themes/template/stories/globals.stories.ts @@ -0,0 +1,64 @@ +import { global as globalThis } from '@storybook/global'; +import { + withThemeByClassName, + withThemeByDataAttribute, + withThemeFromJSXProvider, +} from '@storybook/addon-themes'; +import { useEffect } from 'storybook/internal/preview-api'; + +const cleanup = () => { + const existing = globalThis.document.querySelector('style[data-theme-css]'); + if (existing) { + existing.remove(); + } +}; + +const addStyleSheetDecorator = (storyFn: any) => { + useEffect(() => { + cleanup(); + + const sheet = globalThis.document.createElement('style'); + sheet.setAttribute('data-theme-css', ''); + sheet.textContent = ` + [data-theme="theme-a"], .theme-a { + background-color: white; + color: black; + } + [data-theme="theme-b"], .theme-b { + background-color: black; + color: white; + } + `; + + globalThis.document.body.appendChild(sheet); + + return cleanup; + }); + + return storyFn(); +}; + +export default { + component: globalThis.Components.Pre, + args: { + text: 'Testing the themes', + }, + parameters: { + chromatic: { disable: true }, + themes: { disable: false }, + }, + decorators: [addStyleSheetDecorator], +}; + +export const SetGlobal = { + globals: { + theme: 'b', + }, + decorators: [ + withThemeByClassName({ + defaultTheme: 'a', + themes: { a: 'theme-a', b: 'theme-b' }, + parentSelector: '#storybook-root > *', + }), + ], +}; diff --git a/code/addons/themes/template/stories/parameters.stories.ts b/code/addons/themes/template/stories/parameters.stories.ts new file mode 100644 index 000000000000..acf9171d5ac2 --- /dev/null +++ b/code/addons/themes/template/stories/parameters.stories.ts @@ -0,0 +1,81 @@ +import { global as globalThis } from '@storybook/global'; +import { + withThemeByClassName, + withThemeByDataAttribute, + withThemeFromJSXProvider, +} from '@storybook/addon-themes'; +import { useEffect } from 'storybook/internal/preview-api'; + +const cleanup = () => { + const existing = globalThis.document.querySelector('style[data-theme-css]'); + if (existing) { + existing.remove(); + } +}; + +const addStyleSheetDecorator = (storyFn: any) => { + useEffect(() => { + cleanup(); + + const sheet = globalThis.document.createElement('style'); + sheet.setAttribute('data-theme-css', ''); + sheet.textContent = ` + [data-theme="theme-a"], .theme-a { + background-color: white; + color: black; + } + [data-theme="theme-b"], .theme-b { + background-color: black; + color: white; + } + `; + + globalThis.document.body.appendChild(sheet); + + return cleanup; + }); + + return storyFn(); +}; + +export default { + component: globalThis.Components.Pre, + args: { + text: 'Testing the themes', + }, + parameters: { + chromatic: { disable: true }, + themes: { disable: false }, + }, + decorators: [addStyleSheetDecorator], +}; + +export const SetOverride = { + parameters: { + themes: { + themeOverride: 'b', + }, + }, + decorators: [ + withThemeByClassName({ + defaultTheme: 'a', + themes: { a: 'theme-a', b: 'theme-b' }, + parentSelector: '#storybook-root > *', + }), + ], +}; + +export const Disabled = { + parameters: { + themes: { + disable: true, + }, + }, + decorators: [ + withThemeByClassName({ + defaultTheme: 'a', + themes: { a: 'theme-a', b: 'theme-b' }, + parentSelector: '#storybook-root > *', + }), + ], +}; diff --git a/code/addons/toolbars/template/stories/globals.stories.ts b/code/addons/toolbars/template/stories/globals.stories.ts index 0dd6a353dd84..dd5b52ddece0 100644 --- a/code/addons/toolbars/template/stories/globals.stories.ts +++ b/code/addons/toolbars/template/stories/globals.stories.ts @@ -40,13 +40,13 @@ export const OverrideLocale = { export const OverrideTheme = { globals: { - theme: 'dark', + sb_theme: 'dark', }, }; export const OverrideBoth = { globals: { locale: 'kr', - theme: 'dark', + sb_theme: 'dark', }, }; diff --git a/code/addons/toolbars/template/stories/preview.ts b/code/addons/toolbars/template/stories/preview.ts index 0df95d7080d1..fe2f2531df93 100644 --- a/code/addons/toolbars/template/stories/preview.ts +++ b/code/addons/toolbars/template/stories/preview.ts @@ -1,5 +1,5 @@ export const globalTypes = { - theme: { + sb_theme: { name: 'Theme', description: 'Global theme for components', toolbar: { @@ -44,6 +44,6 @@ export const globalTypes = { }; export const initialGlobals = { - theme: 'light', + sb_theme: 'light', locale: 'en', }; diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx index 1e8994ca0503..1958c3e18555 100644 --- a/code/core/src/components/components/tabs/tabs.stories.tsx +++ b/code/core/src/components/components/tabs/tabs.stories.tsx @@ -181,7 +181,7 @@ export const StatefulDynamicWithOpenTooltip = { }, chromatic: { viewports: [380] }, }, - globals: { theme: 'light', viewport: 'sized' }, + globals: { sb_theme: 'light', viewport: 'sized' }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/code/core/src/manager/components/layout/Layout.stories.tsx b/code/core/src/manager/components/layout/Layout.stories.tsx index 7240c364b50b..8282d8434587 100644 --- a/code/core/src/manager/components/layout/Layout.stories.tsx +++ b/code/core/src/manager/components/layout/Layout.stories.tsx @@ -63,7 +63,7 @@ const meta = { setManagerLayoutState: fn(), hasTab: false, }, - globals: { theme: 'light' }, + globals: { sb_theme: 'light' }, parameters: { layout: 'fullscreen' }, decorators: [ MobileNavigationStoriesMeta.decorators[0] as any, @@ -95,7 +95,7 @@ type Story = StoryObj; export const Desktop: Story = {}; export const Dark: Story = { - globals: { theme: 'dark' }, + globals: { sb_theme: 'dark' }, }; export const DesktopHorizontal: Story = { args: { @@ -125,7 +125,7 @@ export const Mobile = { }; export const MobileDark = { ...Mobile, - globals: { theme: 'dark' }, + globals: { sb_theme: 'dark' }, }; export const MobileDocs = { diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx index 27a8c1197d43..e552171cca4b 100644 --- a/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx +++ b/code/core/src/manager/components/mobile/about/MobileAbout.stories.tsx @@ -19,7 +19,7 @@ const OpenAboutHelper = ({ children }: { children: any }) => { const meta = { component: MobileAbout, title: 'Mobile/About', - globals: { theme: 'light' }, + globals: { sb_theme: 'light' }, parameters: { layout: 'fullscreen', viewport: { @@ -56,7 +56,7 @@ type Story = StoryObj; export const Default: Story = {}; export const Dark: Story = { - globals: { theme: 'dark' }, + globals: { sb_theme: 'dark' }, }; export const Closed: Story = { diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx index 5d0b8fe8a4ab..552556add58c 100644 --- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx +++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx @@ -86,10 +86,10 @@ export default meta; type Story = StoryObj; export const Default: Story = { - globals: { theme: 'light' }, + globals: { sb_theme: 'light' }, }; export const Dark: Story = { - globals: { theme: 'dark' }, + globals: { sb_theme: 'dark' }, parameters: { chromatic: { disable: true } }, }; diff --git a/code/core/src/manager/components/preview/Iframe.stories.tsx b/code/core/src/manager/components/preview/Iframe.stories.tsx index 7d95583f3b54..ba63911b6f71 100644 --- a/code/core/src/manager/components/preview/Iframe.stories.tsx +++ b/code/core/src/manager/components/preview/Iframe.stories.tsx @@ -22,7 +22,7 @@ export default { }, chromatic: { viewports: [700] }, }, - globals: { theme: 'light' }, + globals: { sb_theme: 'light' }, }; const style: CSSProperties = { diff --git a/code/core/src/manager/components/sidebar/Explorer.stories.tsx b/code/core/src/manager/components/sidebar/Explorer.stories.tsx index 813163595329..9cf8c887397f 100644 --- a/code/core/src/manager/components/sidebar/Explorer.stories.tsx +++ b/code/core/src/manager/components/sidebar/Explorer.stories.tsx @@ -9,7 +9,7 @@ import { IconSymbols } from './IconSymbols'; export default { component: Explorer, title: 'Sidebar/Explorer', - globals: { theme: 'side-by-side' }, + globals: { sb_theme: 'side-by-side' }, parameters: { layout: 'fullscreen' }, decorators: [ RefStories.default.decorators[0], diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx index e419bd2b57ab..c86f3729f63c 100644 --- a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx +++ b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx @@ -19,7 +19,7 @@ const meta = { (Story, context) => { const [container, setContainer] = useState(null); - if (context.globals.theme === 'side-by-side') { + if (context.globals.sb_theme === 'side-by-side') { return (
{ diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx index 7b8ba3ae817c..dfc2a9e41910 100644 --- a/code/core/src/manager/components/sidebar/Tree.stories.tsx +++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx @@ -8,27 +8,27 @@ import { within, expect } from '@storybook/test'; import { Tree } from './Tree'; import { index } from './mockdata.large'; import { DEFAULT_REF_ID } from './Sidebar'; -import { viewport } from '@popperjs/core'; - -const customViewports = { - sized: { - name: 'Sized', - styles: { - width: '380px', - height: '90%', - }, - }, -}; const meta = { component: Tree, title: 'Sidebar/Tree', excludeStories: /.*Data$/, - globals: { theme: 'light', viewport: 'sized', viewportRotated: false }, + globals: { + sb_theme: 'light', + viewport: { value: 'sized' }, + }, parameters: { layout: 'fullscreen', viewport: { - viewports: customViewports, + viewports: { + sized: { + name: 'Sized', + styles: { + width: '380px', + height: '90%', + }, + }, + }, }, chromatic: { viewports: [380] }, }, @@ -64,7 +64,7 @@ export const Full: Story = { }; export const Dark: Story = { ...Full, - globals: { theme: 'dark' }, + globals: { sb_theme: 'dark' }, }; export const SingleStoryComponents: Story = { diff --git a/code/core/src/preview-api/Errors.stories.tsx b/code/core/src/preview-api/Errors.stories.tsx index 53147f848611..231905e9bca5 100644 --- a/code/core/src/preview-api/Errors.stories.tsx +++ b/code/core/src/preview-api/Errors.stories.tsx @@ -40,7 +40,7 @@ export default { parameters: { layout: 'fullscreen', }, - globals: { theme: 'light' }, + globals: { sb_theme: 'light' }, title: 'Errors', args: { id: 'sb-errordisplay', diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts index 11bba5843353..71bb347eac71 100644 --- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts +++ b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts @@ -1,7 +1,7 @@ import { Args, Meta, componentWrapperDecorator } from '@storybook/angular'; export const Base = (args: Args) => ({ - template: 'Change theme with the brush in toolbar', + template: 'Change sb_theme with the brush in toolbar', props: { ...args, }, @@ -14,7 +14,7 @@ export default { componentWrapperDecorator( (story) => `
${story}
`, - ({ globals }) => ({ myTheme: `${globals['theme']}-theme` }) + ({ globals }) => ({ myTheme: `${globals['sb_theme']}-theme` }) ), ], } as Meta; diff --git a/code/lib/blocks/src/examples/Button.stories.tsx b/code/lib/blocks/src/examples/Button.stories.tsx index a7fac335a7c2..71678472a9e7 100644 --- a/code/lib/blocks/src/examples/Button.stories.tsx +++ b/code/lib/blocks/src/examples/Button.stories.tsx @@ -12,7 +12,7 @@ const meta = { backgroundColor: { control: 'color' }, }, // Stop *this* story from being stacked in Chromatic - globals: { theme: 'default' }, + globals: { sb_theme: 'default' }, parameters: { // these are to test the deprecated features of the Description block notes: 'These are notes for the Button stories', diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx index 84596bac72e9..38c70ac80a86 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsBoth.stories.tsx @@ -14,7 +14,7 @@ const meta = { backgroundColor: { control: 'color' }, }, // Stop *this* story from being stacked in Chromatic - globals: { theme: 'default' }, + globals: { sb_theme: 'default' }, parameters: { docs: { description: { diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx index 4fb7a5ad5d3a..3060eb59cbfc 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsComment.stories.tsx @@ -13,7 +13,7 @@ const meta = { backgroundColor: { control: 'color' }, }, // Stop *this* story from being stacked in Chromatic - globals: { theme: 'default' }, + globals: { sb_theme: 'light' }, } satisfies Meta; export default meta; diff --git a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx index ce59432f86dd..e4de6047b668 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaDescriptionAsParameter.stories.tsx @@ -7,8 +7,7 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, - // Stop *this* story from being stacked in Chromatic - globals: { theme: 'default' }, + globals: { sb_theme: 'light' }, parameters: { docs: { description: { diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx index ebae54acd1dd..04a6cec92d54 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx @@ -7,8 +7,7 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, - // Stop *this* story from being stacked in Chromatic - globals: { theme: 'default' }, + globals: { sb_theme: 'light' }, parameters: { // this is to test the deprecated features of the Subtitle block componentSubtitle: 'This subtitle is set in parameters.componentSubtitle', diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx index f4df18d010e6..11ee4d719169 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx @@ -7,8 +7,7 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, - // Stop *this* story from being stacked in Chromatic - globals: { theme: 'default' }, + globals: { sb_theme: 'light' }, parameters: { // this is to test the deprecated features of the Subtitle block componentSubtitle: 'This subtitle is set in parameters.componentSubtitle', diff --git a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx index 971bd1d123db..a36e8ce3bbcb 100644 --- a/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx +++ b/code/lib/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx @@ -7,8 +7,7 @@ const meta = { argTypes: { backgroundColor: { control: 'color' }, }, - // Stop *this* story from being stacked in Chromatic - globals: { theme: 'default' }, + globals: { sb_theme: 'light' }, parameters: { docs: { subtitle: 'This subtitle is set in parameters.docs.subtitle', diff --git a/code/lib/blocks/src/examples/StoryParameters.stories.tsx b/code/lib/blocks/src/examples/StoryParameters.stories.tsx index a8bc66c9e04b..62f5c545df9e 100644 --- a/code/lib/blocks/src/examples/StoryParameters.stories.tsx +++ b/code/lib/blocks/src/examples/StoryParameters.stories.tsx @@ -4,8 +4,7 @@ import { SimpleSizeTest } from './SimpleSizeTest'; const meta = { title: 'examples/Stories for the Story Block', component: SimpleSizeTest, - // Stop *this* story from being stacked in Chromatic (we want the caller to stack though) - globals: { theme: 'default' }, + globals: { sb_theme: 'light' }, } satisfies Meta; export default meta; diff --git a/code/package.json b/code/package.json index 34e857d4681e..fc4a1c93c6ab 100644 --- a/code/package.json +++ b/code/package.json @@ -108,6 +108,7 @@ "@storybook/addon-onboarding": "workspace:*", "@storybook/addon-outline": "workspace:*", "@storybook/addon-storysource": "workspace:*", + "@storybook/addon-themes": "workspace:*", "@storybook/addon-toolbars": "workspace:*", "@storybook/addon-viewport": "workspace:*", "@storybook/angular": "workspace:*", From 6a273c172ba30a959bb6fddcde2d1897470be101 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 31 Jul 2024 16:02:25 +0200 Subject: [PATCH 093/105] fix lockfile --- code/yarn.lock | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/yarn.lock b/code/yarn.lock index 8eea5e0814e1..4b2b7b5fc5b9 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5382,7 +5382,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/addon-themes@workspace:addons/themes": +"@storybook/addon-themes@workspace:*, @storybook/addon-themes@workspace:addons/themes": version: 0.0.0-use.local resolution: "@storybook/addon-themes@workspace:addons/themes" dependencies: @@ -6499,6 +6499,7 @@ __metadata: "@storybook/addon-onboarding": "workspace:*" "@storybook/addon-outline": "workspace:*" "@storybook/addon-storysource": "workspace:*" + "@storybook/addon-themes": "workspace:*" "@storybook/addon-toolbars": "workspace:*" "@storybook/addon-viewport": "workspace:*" "@storybook/angular": "workspace:*" From f621766c44b3545ec3d5756a05308c8180a1f6d1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 31 Jul 2024 16:58:25 +0200 Subject: [PATCH 094/105] fix --- code/core/src/manager/components/sidebar/Tree.stories.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx index dfc2a9e41910..ab965dfb7d51 100644 --- a/code/core/src/manager/components/sidebar/Tree.stories.tsx +++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx @@ -20,7 +20,7 @@ const meta = { parameters: { layout: 'fullscreen', viewport: { - viewports: { + options: { sized: { name: 'Sized', styles: { @@ -206,11 +206,6 @@ export const SkipToCanvasLinkFocused: Story = { ...DocsOnlySingleStoryComponents, parameters: { chromatic: { disable: true }, - viewport: { - defaultViewport: 'sized', - viewports: customViewports, - defaultOrientation: 'landscape', - }, }, play: async ({ canvasElement }) => { const screen = await within(canvasElement); From 690368d8f4570288bb153630c287ca5bd983e0c7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 31 Jul 2024 18:22:45 +0200 Subject: [PATCH 095/105] improvements --- code/.storybook/preview.tsx | 50 +++++++++++++------ .../template/stories/decorators.stories.ts | 3 ++ .../template/stories/globals.stories.ts | 9 ++-- .../template/stories/parameters.stories.ts | 9 ++-- code/lib/blocks/src/blocks/Anchor.stories.tsx | 1 + .../blocks/src/blocks/ArgTypes.stories.tsx | 1 + code/lib/blocks/src/blocks/Canvas.stories.tsx | 1 + .../blocks/src/blocks/Controls.stories.tsx | 1 + .../blocks/src/blocks/Description.stories.tsx | 1 + .../blocks/src/blocks/DocsPage.stories.tsx | 1 + .../blocks/src/blocks/Markdown.stories.tsx | 5 +- .../lib/blocks/src/blocks/Primary.stories.tsx | 1 + code/lib/blocks/src/blocks/Source.stories.tsx | 1 + .../lib/blocks/src/blocks/Stories.stories.tsx | 5 +- code/lib/blocks/src/blocks/Story.stories.tsx | 1 + .../blocks/src/blocks/Subtitle.stories.tsx | 1 + code/lib/blocks/src/blocks/Title.stories.tsx | 1 + .../components/ArgsTable/ArgRow.stories.tsx | 1 + 18 files changed, 67 insertions(+), 26 deletions(-) diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx index 9299f42052b3..846a858ed75f 100644 --- a/code/.storybook/preview.tsx +++ b/code/.storybook/preview.tsx @@ -34,7 +34,7 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>( overflow: 'auto', }, ({ layout }) => ({ - padding: layout === 'fullscreen' ? 0 : 10, + padding: layout === 'fullscreen' ? 0 : '1rem', }), ({ theme }) => ({ background: theme.background.content, @@ -55,14 +55,15 @@ const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>( const ThemeStack = styled.div<{ layout: string }>( { position: 'relative', - minHeight: 'calc(50vh - 15px)', + // minHeight: 'calc(50vh - 15px)', + flex: 1, }, ({ theme }) => ({ background: theme.background.content, color: theme.color.defaultText, }), ({ layout }) => ({ - padding: layout === 'fullscreen' ? 0 : 10, + padding: layout === 'fullscreen' ? 0 : '1rem', }) ); @@ -86,6 +87,25 @@ const PlayFnNotice = styled.div( }) ); +const StackContainer = ({ children, layout }) => ( +
+