From db135726052608df691de88708e62a5c1b5040c3 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 17 Aug 2023 06:10:52 +0900 Subject: [PATCH 1/2] Storybook: Add back subcomponents to props table --- .../stories/index.story.tsx | 4 +++ .../src/card/stories/index.story.tsx | 2 ++ .../stories/index.story.tsx | 14 +++++++++- .../dropdown-menu-v2/stories/index.story.tsx | 20 ++++++++++++++ .../src/dropdown/stories/index.story.tsx | 2 ++ .../src/flex/stories/index.story.tsx | 2 ++ .../src/input-control/stories/index.story.tsx | 2 ++ .../src/item-group/stories/index.story.tsx | 2 ++ .../src/navigation/stories/index.story.tsx | 14 ++++++++++ .../src/navigator/stories/index.story.tsx | 2 ++ .../src/notice/stories/index.story.tsx | 2 ++ .../src/panel/stories/index.story.tsx | 2 ++ .../src/radio-group/stories/index.story.js | 1 + .../src/slot-fill/stories/index.story.js | 2 ++ .../stories/index.story.tsx | 2 ++ .../src/toolbar/stories/index.story.tsx | 10 +++++++ .../src/tools-panel/stories/index.story.tsx | 2 ++ .../src/tree-grid/stories/index.story.tsx | 2 ++ storybook/preview.js | 26 +++++++++++++++++++ 19 files changed, 112 insertions(+), 1 deletion(-) diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx index 45817cd61b53e..7e9cf84ac1ee0 100644 --- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx +++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx @@ -19,6 +19,10 @@ import type { AlignmentMatrixControlProps } from '../types'; const meta: ComponentMeta< typeof AlignmentMatrixControl > = { title: 'Components (Experimental)/AlignmentMatrixControl', component: AlignmentMatrixControl, + subcomponents: { + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + 'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon, + }, argTypes: { onChange: { action: 'onChange', control: { type: null } }, value: { control: { type: null } }, diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx index bb85c9b8b57ec..6f887d2180828 100644 --- a/packages/components/src/card/stories/index.story.tsx +++ b/packages/components/src/card/stories/index.story.tsx @@ -20,6 +20,8 @@ import Button from '../../button'; const meta: ComponentMeta< typeof Card > = { component: Card, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter }, title: 'Components/Card', argTypes: { as: { diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx index 4632ede2187c4..93a909b91e289 100644 --- a/packages/components/src/circular-option-picker/stories/index.story.tsx +++ b/packages/components/src/circular-option-picker/stories/index.story.tsx @@ -9,7 +9,11 @@ import { useState, createContext, useContext } from '@wordpress/element'; /** * Internal dependencies */ -import { default as CircularOptionPicker } from '..'; +import { + ButtonAction, + default as CircularOptionPicker, + DropdownLinkAction, +} from '..'; const CircularOptionPickerStoryContext = createContext< { currentColor?: string; @@ -19,6 +23,14 @@ const CircularOptionPickerStoryContext = createContext< { const meta: ComponentMeta< typeof CircularOptionPicker > = { title: 'Components/CircularOptionPicker', component: CircularOptionPicker, + subcomponents: { + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + 'CircularOptionPicker.Option': Option, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + 'CircularOptionPicker.ButtonAction': ButtonAction, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + 'CircularOptionPicker.DropdownLinkAction': DropdownLinkAction, + }, argTypes: { actions: { control: { type: null } }, options: { control: { type: null } }, diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx index 7260231c1d2d9..95a80f0758e11 100644 --- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx @@ -39,6 +39,26 @@ import { ContextSystemProvider } from '../../ui/context'; const meta: Meta< typeof DropdownMenu > = { title: 'Components (Experimental)/DropdownMenu v2', component: DropdownMenu, + subcomponents: { + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownMenuItem, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownSubMenu, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownSubMenuTrigger, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownMenuSeparator, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownMenuCheckboxItem, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownMenuGroup, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownMenuLabel, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownMenuRadioGroup, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + DropdownMenuRadioItem, + }, argTypes: { children: { control: { type: null } }, trigger: { control: { type: null } }, diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index 3ef9465d606bc..d9fd07c3bf2e4 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -13,6 +13,8 @@ import { DropdownContentWrapper } from '../dropdown-content-wrapper'; const meta: ComponentMeta< typeof Dropdown > = { title: 'Components/Dropdown', component: Dropdown, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { DropdownContentWrapper }, argTypes: { focusOnMount: { options: [ 'firstElement', true, false ], diff --git a/packages/components/src/flex/stories/index.story.tsx b/packages/components/src/flex/stories/index.story.tsx index 21a282965280d..134d7087663c8 100644 --- a/packages/components/src/flex/stories/index.story.tsx +++ b/packages/components/src/flex/stories/index.story.tsx @@ -12,6 +12,8 @@ import { View } from '../../view'; const meta: ComponentMeta< typeof Flex > = { component: Flex, title: 'Components/Flex', + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { FlexBlock, FlexItem }, argTypes: { align: { control: { type: 'text' } }, as: { control: { type: 'text' } }, diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx index c664cc2c4098a..0bec92e152551 100644 --- a/packages/components/src/input-control/stories/index.story.tsx +++ b/packages/components/src/input-control/stories/index.story.tsx @@ -13,6 +13,8 @@ import { InputControlSuffixWrapper } from '../input-suffix-wrapper'; const meta: ComponentMeta< typeof InputControl > = { title: 'Components (Experimental)/InputControl', component: InputControl, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper }, argTypes: { __unstableInputWidth: { control: { type: 'text' } }, __unstableStateReducer: { control: { type: null } }, diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx index 1b8c9ddaecd4e..518b782e678f1 100644 --- a/packages/components/src/item-group/stories/index.story.tsx +++ b/packages/components/src/item-group/stories/index.story.tsx @@ -13,6 +13,8 @@ type ItemProps = React.ComponentPropsWithoutRef< typeof Item >; const meta: ComponentMeta< typeof ItemGroup > = { component: ItemGroup, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { Item }, title: 'Components (Experimental)/ItemGroup', argTypes: { as: { control: { type: null } }, diff --git a/packages/components/src/navigation/stories/index.story.tsx b/packages/components/src/navigation/stories/index.story.tsx index c007038d129e6..ed8ecfbcbbfcb 100644 --- a/packages/components/src/navigation/stories/index.story.tsx +++ b/packages/components/src/navigation/stories/index.story.tsx @@ -7,6 +7,10 @@ import type { ComponentMeta } from '@storybook/react'; * Internal dependencies */ import { Navigation } from '..'; +import { NavigationBackButton } from '../back-button'; +import { NavigationGroup } from '../group'; +import { NavigationItem } from '../item'; +import { NavigationMenu } from '../menu'; import { DefaultStory } from './utils/default'; import { GroupStory } from './utils/group'; import { ControlledStateStory } from './utils/controlled-state'; @@ -18,6 +22,16 @@ import './style.css'; const meta: ComponentMeta< typeof Navigation > = { title: 'Components (Experimental)/Navigation', component: Navigation, + subcomponents: { + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + NavigationBackButton, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + NavigationGroup, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + NavigationItem, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + NavigationMenu, + }, argTypes: { activeItem: { control: { type: null } }, activeMenu: { control: { type: null } }, diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx index 75d8571f1e545..4f6d08de10a2b 100644 --- a/packages/components/src/navigator/stories/index.story.tsx +++ b/packages/components/src/navigator/stories/index.story.tsx @@ -21,6 +21,8 @@ import { const meta: ComponentMeta< typeof NavigatorProvider > = { component: NavigatorProvider, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton }, title: 'Components (Experimental)/Navigator', argTypes: { as: { control: { type: null } }, diff --git a/packages/components/src/notice/stories/index.story.tsx b/packages/components/src/notice/stories/index.story.tsx index 097a6f2dffd69..eadcf27727889 100644 --- a/packages/components/src/notice/stories/index.story.tsx +++ b/packages/components/src/notice/stories/index.story.tsx @@ -19,6 +19,8 @@ import type { NoticeListProps } from '../types'; const meta: ComponentMeta< typeof Notice > = { title: 'Components/Notice', component: Notice, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { NoticeList }, parameters: { actions: { argTypesRegex: '^on.*' }, controls: { expanded: true }, diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx index 520cf1ea5a447..b7a93b3247410 100644 --- a/packages/components/src/panel/stories/index.story.tsx +++ b/packages/components/src/panel/stories/index.story.tsx @@ -19,6 +19,8 @@ import { wordpress } from '@wordpress/icons'; const meta: ComponentMeta< typeof Panel > = { title: 'Components/Panel', component: Panel, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { PanelRow, PanelBody }, argTypes: { children: { control: { type: null } }, }, diff --git a/packages/components/src/radio-group/stories/index.story.js b/packages/components/src/radio-group/stories/index.story.js index 2099c88d866af..58125bf808be2 100644 --- a/packages/components/src/radio-group/stories/index.story.js +++ b/packages/components/src/radio-group/stories/index.story.js @@ -12,6 +12,7 @@ import RadioGroup from '../'; export default { title: 'Components (Deprecated)/RadioGroup', component: RadioGroup, + subcomponents: { Radio }, parameters: { docs: { description: { diff --git a/packages/components/src/slot-fill/stories/index.story.js b/packages/components/src/slot-fill/stories/index.story.js index 3e23493020ec7..3bcff0bdf7d3b 100644 --- a/packages/components/src/slot-fill/stories/index.story.js +++ b/packages/components/src/slot-fill/stories/index.story.js @@ -11,6 +11,8 @@ import { Slot, Fill, Provider as SlotFillProvider } from '../'; export default { title: 'Components/SlotFill', component: Slot, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { Fill, SlotFillProvider }, parameters: { controls: { expanded: true }, docs: { source: { state: 'open' } }, diff --git a/packages/components/src/toggle-group-control/stories/index.story.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx index 622bf4f66dd8b..896a57a35181c 100644 --- a/packages/components/src/toggle-group-control/stories/index.story.tsx +++ b/packages/components/src/toggle-group-control/stories/index.story.tsx @@ -25,6 +25,8 @@ import type { const meta: ComponentMeta< typeof ToggleGroupControl > = { component: ToggleGroupControl, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon }, title: 'Components (Experimental)/ToggleGroupControl', argTypes: { help: { control: { type: 'text' } }, diff --git a/packages/components/src/toolbar/stories/index.story.tsx b/packages/components/src/toolbar/stories/index.story.tsx index b5100b856d58d..3d5f44f41749f 100644 --- a/packages/components/src/toolbar/stories/index.story.tsx +++ b/packages/components/src/toolbar/stories/index.story.tsx @@ -40,6 +40,16 @@ import DropdownMenu from '../../dropdown-menu'; const meta: ComponentMeta< typeof Toolbar > = { title: 'Components/Toolbar', component: Toolbar, + subcomponents: { + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + ToolbarButton, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + ToolbarGroup, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + ToolbarItem, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + ToolbarDropdownMenu, + }, argTypes: { children: { control: { type: null } }, }, diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx index 025185dfd0800..996b0b9486eed 100644 --- a/packages/components/src/tools-panel/stories/index.story.tsx +++ b/packages/components/src/tools-panel/stories/index.story.tsx @@ -28,6 +28,8 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill'; const meta: ComponentMeta< typeof ToolsPanel > = { title: 'Components (Experimental)/ToolsPanel', component: ToolsPanel, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { ToolsPanelItem }, argTypes: { as: { control: { type: null } }, children: { control: { type: null } }, diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx index 1467ffe5660c8..2cbdb3a8a9c5a 100644 --- a/packages/components/src/tree-grid/stories/index.story.tsx +++ b/packages/components/src/tree-grid/stories/index.story.tsx @@ -18,6 +18,8 @@ import InputControl from '../../input-control'; const meta: ComponentMeta< typeof TreeGrid > = { title: 'Components (Experimental)/TreeGrid', component: TreeGrid, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + subcomponents: { TreeGridRow, TreeGridCell }, argTypes: { children: { control: { type: null } }, }, diff --git a/storybook/preview.js b/storybook/preview.js index ff73a95fa4131..ceaa0a80a18ba 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -1,3 +1,15 @@ +/** + * External dependencies + */ +import { + ArgsTable, + Description, + Primary, + Stories, + Subtitle, + Title, +} from '@storybook/blocks'; + /** * Internal dependencies */ @@ -90,6 +102,20 @@ export const parameters = { controls: { sort: 'requiredFirst', }, + docs: { + // Flips the order of the description and the primary component story + // so the component is always visible before the fold. + page: () => ( + <> + + <Subtitle /> + <Primary /> + <Description /> + <ArgsTable /> + <Stories includePrimary={ false } /> + </> + ), + }, options: { storySort: { order: [ From 16bf4003b8c7111bc55fa5b18e5e5be9ca2d5bf8 Mon Sep 17 00:00:00 2001 From: Lena Morita <lena@jaguchi.com> Date: Fri, 18 Aug 2023 09:42:51 +0900 Subject: [PATCH 2/2] Enable controls --- storybook/preview.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/storybook/preview.js b/storybook/preview.js index ceaa0a80a18ba..61bdef8aae5f3 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -111,7 +111,8 @@ export const parameters = { <Subtitle /> <Primary /> <Description /> - <ArgsTable /> + { /* `story="^"` enables Controls for the primary props table */ } + <ArgsTable story="^" /> <Stories includePrimary={ false } /> </> ),