From e6cbba7191fdbdae2b76c58dcd9756c9182a3782 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 3 Jul 2023 20:35:12 +0200 Subject: [PATCH 1/2] minor code improvements - a11y tests - no addPanel use (deprecated) - addons should always have a type - improve API for navigate - improve ergonomics of yarn task --- code/addons/a11y/src/manager.test.tsx | 8 ++++---- code/addons/actions/src/manager.tsx | 2 +- code/addons/controls/src/manager.tsx | 8 ++++---- code/addons/jest/src/manager.tsx | 5 +++-- code/addons/storysource/src/manager.tsx | 5 +++-- code/lib/manager-api/src/modules/url.ts | 2 +- scripts/utils/options.ts | 19 +++++++++++++++---- 7 files changed, 31 insertions(+), 18 deletions(-) diff --git a/code/addons/a11y/src/manager.test.tsx b/code/addons/a11y/src/manager.test.tsx index be9f2354128..0372c567f20 100644 --- a/code/addons/a11y/src/manager.test.tsx +++ b/code/addons/a11y/src/manager.test.tsx @@ -19,10 +19,10 @@ describe('A11yManager', () => { const panel = mockedAddons.add.mock.calls .map(([_, def]) => def) - .find(({ type }) => type === 'panel'); + .find(({ type }) => type === api.types.PANEL); const tool = mockedAddons.add.mock.calls .map(([_, def]) => def) - .find(({ type }) => type === 'tool'); + .find(({ type }) => type === api.types.TOOL); expect(panel).toBeDefined(); expect(tool).toBeDefined(); }); @@ -33,7 +33,7 @@ describe('A11yManager', () => { registrationImpl(api as unknown as api.API); const title = mockedAddons.add.mock.calls .map(([_, def]) => def) - .find(({ type }) => type === 'panel')?.title as Function; + .find(({ type }) => type === api.types.PANEL)?.title as Function; // when / then expect(title()).toBe('Accessibility'); @@ -45,7 +45,7 @@ describe('A11yManager', () => { registrationImpl(mockedApi); const title = mockedAddons.add.mock.calls .map(([_, def]) => def) - .find(({ type }) => type === 'panel')?.title as Function; + .find(({ type }) => type === api.types.PANEL)?.title as Function; // when / then expect(title()).toBe('Accessibility (3)'); diff --git a/code/addons/actions/src/manager.tsx b/code/addons/actions/src/manager.tsx index b17bdc1bbac..38e69e4b11a 100644 --- a/code/addons/actions/src/manager.tsx +++ b/code/addons/actions/src/manager.tsx @@ -40,7 +40,7 @@ addons.register(ADDON_ID, (api) => { countRef.current = 0; }); - addons.addPanel(PANEL_ID, { + addons.add(PANEL_ID, { title: , id: 'actions', type: types.PANEL, diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index eae78973b47..257d82e9499 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { addons, types, type API, useArgTypes } from '@storybook/manager-api'; +import { addons, types, useArgTypes } from '@storybook/manager-api'; import { AddonPanel } from '@storybook/components'; import { ControlsPanel } from './ControlsPanel'; import { ADDON_ID, PARAM_KEY } from './constants'; @@ -14,9 +14,9 @@ function Title() { return <>Controls{suffix}</>; } -addons.register(ADDON_ID, (api: API) => { - addons.addPanel(ADDON_ID, { - title: <Title />, +addons.register(ADDON_ID, (api) => { + addons.add(ADDON_ID, { + title: Title, id: 'controls', type: types.PANEL, paramKey: PARAM_KEY, diff --git a/code/addons/jest/src/manager.tsx b/code/addons/jest/src/manager.tsx index f4302002d6b..82bcee71dc4 100644 --- a/code/addons/jest/src/manager.tsx +++ b/code/addons/jest/src/manager.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; -import { addons } from '@storybook/manager-api'; +import { addons, types } from '@storybook/manager-api'; import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared'; import Panel from './components/Panel'; addons.register(ADDON_ID, (api) => { - addons.addPanel(PANEL_ID, { + addons.add(PANEL_ID, { title: 'Tests', + type: types.PANEL, id: 'tests', render: ({ active, key }) => <Panel key={key} api={api} active={active} />, paramKey: PARAM_KEY, diff --git a/code/addons/storysource/src/manager.tsx b/code/addons/storysource/src/manager.tsx index d4d63a704e3..8663612d68f 100644 --- a/code/addons/storysource/src/manager.tsx +++ b/code/addons/storysource/src/manager.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import { addons } from '@storybook/manager-api'; +import { addons, types } from '@storybook/manager-api'; import { StoryPanel } from './StoryPanel'; import { ADDON_ID, PANEL_ID } from './index'; addons.register(ADDON_ID, (api) => { - addons.addPanel(PANEL_ID, { + addons.add(PANEL_ID, { + type: types.PANEL, title: 'Code', id: 'code', render: ({ active, key }) => (active ? <StoryPanel key={key} api={api} /> : null), diff --git a/code/lib/manager-api/src/modules/url.ts b/code/lib/manager-api/src/modules/url.ts index 7e83f7a7699..e8e5f2c479f 100644 --- a/code/lib/manager-api/src/modules/url.ts +++ b/code/lib/manager-api/src/modules/url.ts @@ -157,7 +157,7 @@ export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...r } }, navigateUrl(url, options) { - navigate(url, { ...options, plain: true }); + navigate(url, { plain: true, ...options }); }, }; diff --git a/scripts/utils/options.ts b/scripts/utils/options.ts index 8d398bed878..230e697329f 100644 --- a/scripts/utils/options.ts +++ b/scripts/utils/options.ts @@ -134,7 +134,9 @@ export function getOptions<TOptions extends OptionSpecifier>( .reduce((acc, [key, option]) => { const flags = optionFlags(key, option); - if (option.type === 'boolean') return acc.option(flags, option.description, !!option.inverse); + if (option.type === 'boolean') { + return acc.option(flags, option.description, !!option.inverse); + } const checkStringValue = (raw: string) => { if (option.values && !option.values.includes(raw)) { @@ -148,8 +150,11 @@ export function getOptions<TOptions extends OptionSpecifier>( return raw; }; - if (option.type === 'string') - return acc.option(flags, option.description, (raw) => checkStringValue(raw)); + if (option.type === 'string') { + return acc.option(flags, option.description, (raw) => { + return checkStringValue(raw); + }); + } if (option.type === 'string[]') { return acc.option( @@ -164,9 +169,15 @@ export function getOptions<TOptions extends OptionSpecifier>( }, command) .parse(argv); + const intermediate = command.opts(); + if (intermediate.task === undefined && argv[2]) { + // eslint-disable-next-line prefer-destructuring + intermediate.task = argv[2]; + } + // Note the code above guarantees the types as they come in, so we cast here. // Not sure there is an easier way to do this - return command.opts() as MaybeOptionValues<TOptions>; + return intermediate as MaybeOptionValues<TOptions>; } // Boolean values will have a default, usually `false`, `true` if they are "inverse". From 11a3ca9880edb0f50092bcadbab6e1a67118608b Mon Sep 17 00:00:00 2001 From: Norbert de Langen <ndelangen@me.com> Date: Mon, 3 Jul 2023 20:51:22 +0200 Subject: [PATCH 2/2] fix (will improve later) --- code/addons/controls/src/manager.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 257d82e9499..6558aa6eda0 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -16,7 +16,7 @@ function Title() { addons.register(ADDON_ID, (api) => { addons.add(ADDON_ID, { - title: Title, + title: <Title />, id: 'controls', type: types.PANEL, paramKey: PARAM_KEY,