`
* convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
*/
-export const WithMorePadding: ComponentStory< typeof Dropdown > = Template.bind(
- {}
-);
+export const WithMorePadding: Story< typeof Dropdown > = Template.bind( {} );
WithMorePadding.args = {
...Default.args,
renderContent: () => (
@@ -72,9 +69,7 @@ WithMorePadding.args = {
* with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
* paddings, for example when child components already have padding on their own.
*/
-export const WithNoPadding: ComponentStory< typeof Dropdown > = Template.bind(
- {}
-);
+export const WithNoPadding: Story< typeof Dropdown > = Template.bind( {} );
WithNoPadding.args = {
...Default.args,
renderContent: () => (
diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.tsx b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx
similarity index 100%
rename from packages/components/src/duotone-picker/stories/duotone-picker.tsx
rename to packages/components/src/duotone-picker/stories/duotone-picker.story.tsx
diff --git a/packages/components/src/duotone-picker/stories/duotone-swatch.tsx b/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx
similarity index 100%
rename from packages/components/src/duotone-picker/stories/duotone-swatch.tsx
rename to packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx
diff --git a/packages/components/src/elevation/stories/index.tsx b/packages/components/src/elevation/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/elevation/stories/index.tsx
rename to packages/components/src/elevation/stories/index.story.tsx
diff --git a/packages/components/src/external-link/stories/index.tsx b/packages/components/src/external-link/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/external-link/stories/index.tsx
rename to packages/components/src/external-link/stories/index.story.tsx
diff --git a/packages/components/src/flex/stories/index.tsx b/packages/components/src/flex/stories/index.story.tsx
similarity index 97%
rename from packages/components/src/flex/stories/index.tsx
rename to packages/components/src/flex/stories/index.story.tsx
index 0b74ac783a68e..21a282965280d 100644
--- a/packages/components/src/flex/stories/index.tsx
+++ b/packages/components/src/flex/stories/index.story.tsx
@@ -12,7 +12,6 @@ import { View } from '../../view';
const meta: ComponentMeta< typeof Flex > = {
component: Flex,
title: 'Components/Flex',
- subcomponents: { FlexBlock, FlexItem },
argTypes: {
align: { control: { type: 'text' } },
as: { control: { type: 'text' } },
diff --git a/packages/components/src/focal-point-picker/stories/index.tsx b/packages/components/src/focal-point-picker/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/focal-point-picker/stories/index.tsx
rename to packages/components/src/focal-point-picker/stories/index.story.tsx
diff --git a/packages/components/src/font-size-picker/stories/e2e/index.tsx b/packages/components/src/font-size-picker/stories/e2e/index.story.tsx
similarity index 100%
rename from packages/components/src/font-size-picker/stories/e2e/index.tsx
rename to packages/components/src/font-size-picker/stories/e2e/index.story.tsx
diff --git a/packages/components/src/font-size-picker/stories/index.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/font-size-picker/stories/index.tsx
rename to packages/components/src/font-size-picker/stories/index.story.tsx
diff --git a/packages/components/src/form-file-upload/stories/index.tsx b/packages/components/src/form-file-upload/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/form-file-upload/stories/index.tsx
rename to packages/components/src/form-file-upload/stories/index.story.tsx
diff --git a/packages/components/src/form-toggle/stories/index.tsx b/packages/components/src/form-toggle/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/form-toggle/stories/index.tsx
rename to packages/components/src/form-toggle/stories/index.story.tsx
diff --git a/packages/components/src/form-token-field/stories/index.tsx b/packages/components/src/form-token-field/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/form-token-field/stories/index.tsx
rename to packages/components/src/form-token-field/stories/index.story.tsx
diff --git a/packages/components/src/gradient-picker/stories/index.tsx b/packages/components/src/gradient-picker/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/gradient-picker/stories/index.tsx
rename to packages/components/src/gradient-picker/stories/index.story.tsx
diff --git a/packages/components/src/grid/stories/index.tsx b/packages/components/src/grid/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/grid/stories/index.tsx
rename to packages/components/src/grid/stories/index.story.tsx
diff --git a/packages/components/src/guide/stories/index.tsx b/packages/components/src/guide/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/guide/stories/index.tsx
rename to packages/components/src/guide/stories/index.story.tsx
diff --git a/packages/components/src/h-stack/stories/e2e/index.tsx b/packages/components/src/h-stack/stories/e2e/index.story.tsx
similarity index 100%
rename from packages/components/src/h-stack/stories/e2e/index.tsx
rename to packages/components/src/h-stack/stories/e2e/index.story.tsx
diff --git a/packages/components/src/h-stack/stories/index.tsx b/packages/components/src/h-stack/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/h-stack/stories/index.tsx
rename to packages/components/src/h-stack/stories/index.story.tsx
diff --git a/packages/components/src/heading/stories/index.tsx b/packages/components/src/heading/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/heading/stories/index.tsx
rename to packages/components/src/heading/stories/index.story.tsx
diff --git a/packages/components/src/icon/stories/index.tsx b/packages/components/src/icon/stories/index.story.tsx
similarity index 85%
rename from packages/components/src/icon/stories/index.tsx
rename to packages/components/src/icon/stories/index.story.tsx
index 8c26d2d2d5613..78c2a8dc5e371 100644
--- a/packages/components/src/icon/stories/index.tsx
+++ b/packages/components/src/icon/stories/index.story.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
/**
* WordPress dependencies
@@ -25,16 +25,14 @@ const meta: ComponentMeta< typeof Icon > = {
};
export default meta;
-const Template: ComponentStory< typeof Icon > = ( args ) => (
-
-);
+const Template: Story< typeof Icon > = ( args ) => ;
export const Default = Template.bind( {} );
Default.args = {
icon: wordpress,
};
-export const FillColor: ComponentStory< typeof Icon > = ( args ) => {
+export const FillColor: Story< typeof Icon > = ( args ) => {
return (
= ( args ) => {
+export const WithADashicon: Story< typeof Icon > = ( args ) => {
return (
diff --git a/packages/components/src/input-control/stories/index.tsx b/packages/components/src/input-control/stories/index.story.tsx
similarity index 96%
rename from packages/components/src/input-control/stories/index.tsx
rename to packages/components/src/input-control/stories/index.story.tsx
index 031711a173c18..c664cc2c4098a 100644
--- a/packages/components/src/input-control/stories/index.tsx
+++ b/packages/components/src/input-control/stories/index.story.tsx
@@ -13,7 +13,6 @@ import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
const meta: ComponentMeta< typeof InputControl > = {
title: 'Components (Experimental)/InputControl',
component: InputControl,
- subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
argTypes: {
__unstableInputWidth: { control: { type: 'text' } },
__unstableStateReducer: { control: { type: null } },
diff --git a/packages/components/src/item-group/stories/index.tsx b/packages/components/src/item-group/stories/index.story.tsx
similarity index 98%
rename from packages/components/src/item-group/stories/index.tsx
rename to packages/components/src/item-group/stories/index.story.tsx
index e520ff10c160f..1b8c9ddaecd4e 100644
--- a/packages/components/src/item-group/stories/index.tsx
+++ b/packages/components/src/item-group/stories/index.story.tsx
@@ -14,7 +14,6 @@ type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
const meta: ComponentMeta< typeof ItemGroup > = {
component: ItemGroup,
title: 'Components (Experimental)/ItemGroup',
- subcomponents: { Item },
argTypes: {
as: { control: { type: null } },
children: { control: { type: null } },
diff --git a/packages/components/src/keyboard-shortcuts/stories/index.tsx b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/keyboard-shortcuts/stories/index.tsx
rename to packages/components/src/keyboard-shortcuts/stories/index.story.tsx
diff --git a/packages/components/src/menu-group/stories/index.tsx b/packages/components/src/menu-group/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/menu-group/stories/index.tsx
rename to packages/components/src/menu-group/stories/index.story.tsx
diff --git a/packages/components/src/menu-items-choice/stories/index.tsx b/packages/components/src/menu-items-choice/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/menu-items-choice/stories/index.tsx
rename to packages/components/src/menu-items-choice/stories/index.story.tsx
diff --git a/packages/components/src/modal/stories/index.tsx b/packages/components/src/modal/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/modal/stories/index.tsx
rename to packages/components/src/modal/stories/index.story.tsx
diff --git a/packages/components/src/navigable-container/stories/navigable-menu.tsx b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
similarity index 100%
rename from packages/components/src/navigable-container/stories/navigable-menu.tsx
rename to packages/components/src/navigable-container/stories/navigable-menu.story.tsx
diff --git a/packages/components/src/navigable-container/stories/tabbable-container.tsx b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
similarity index 100%
rename from packages/components/src/navigable-container/stories/tabbable-container.tsx
rename to packages/components/src/navigable-container/stories/tabbable-container.story.tsx
diff --git a/packages/components/src/navigation/stories/index.tsx b/packages/components/src/navigation/stories/index.story.tsx
similarity index 81%
rename from packages/components/src/navigation/stories/index.tsx
rename to packages/components/src/navigation/stories/index.story.tsx
index 2605de6f29667..43beb4daae1e1 100644
--- a/packages/components/src/navigation/stories/index.tsx
+++ b/packages/components/src/navigation/stories/index.story.tsx
@@ -7,10 +7,6 @@ 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';
@@ -22,12 +18,6 @@ import './style.css';
const meta: ComponentMeta< typeof Navigation > = {
title: 'Components (Experimental)/Navigation',
component: Navigation,
- subcomponents: {
- NavigationBackButton,
- NavigationGroup,
- NavigationItem,
- NavigationMenu,
- },
argTypes: {
activeItem: { control: { type: null } },
activeMenu: { control: { type: null } },
diff --git a/packages/components/src/navigator/stories/index.tsx b/packages/components/src/navigator/stories/index.story.tsx
similarity index 99%
rename from packages/components/src/navigator/stories/index.tsx
rename to packages/components/src/navigator/stories/index.story.tsx
index fb353a354d544..75d8571f1e545 100644
--- a/packages/components/src/navigator/stories/index.tsx
+++ b/packages/components/src/navigator/stories/index.story.tsx
@@ -22,7 +22,6 @@ import {
const meta: ComponentMeta< typeof NavigatorProvider > = {
component: NavigatorProvider,
title: 'Components (Experimental)/Navigator',
- subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
argTypes: {
as: { control: { type: null } },
children: { control: { type: null } },
diff --git a/packages/components/src/notice/stories/index.tsx b/packages/components/src/notice/stories/index.story.tsx
similarity index 98%
rename from packages/components/src/notice/stories/index.tsx
rename to packages/components/src/notice/stories/index.story.tsx
index b0fa9b9baeee1..097a6f2dffd69 100644
--- a/packages/components/src/notice/stories/index.tsx
+++ b/packages/components/src/notice/stories/index.story.tsx
@@ -19,7 +19,6 @@ import type { NoticeListProps } from '../types';
const meta: ComponentMeta< typeof Notice > = {
title: 'Components/Notice',
component: Notice,
- subcomponents: { NoticeList },
parameters: {
actions: { argTypesRegex: '^on.*' },
controls: { expanded: true },
diff --git a/packages/components/src/number-control/stories/index.tsx b/packages/components/src/number-control/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/number-control/stories/index.tsx
rename to packages/components/src/number-control/stories/index.story.tsx
diff --git a/packages/components/src/palette-edit/stories/index.tsx b/packages/components/src/palette-edit/stories/index.story.tsx
similarity index 92%
rename from packages/components/src/palette-edit/stories/index.tsx
rename to packages/components/src/palette-edit/stories/index.story.tsx
index 5739964fbb276..39eb18bf49167 100644
--- a/packages/components/src/palette-edit/stories/index.tsx
+++ b/packages/components/src/palette-edit/stories/index.story.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
/**
* WordPress dependencies
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof PaletteEdit > = {
};
export default meta;
-const Template: ComponentStory< typeof PaletteEdit > = ( args ) => {
+const Template: Story< typeof PaletteEdit > = ( args ) => {
const { colors, gradients, onChange, ...props } = args;
const [ value, setValue ] = useState( gradients || colors );
diff --git a/packages/components/src/panel/stories/index.tsx b/packages/components/src/panel/stories/index.story.tsx
similarity index 98%
rename from packages/components/src/panel/stories/index.tsx
rename to packages/components/src/panel/stories/index.story.tsx
index b3c189d11cb88..520cf1ea5a447 100644
--- a/packages/components/src/panel/stories/index.tsx
+++ b/packages/components/src/panel/stories/index.story.tsx
@@ -19,7 +19,6 @@ import { wordpress } from '@wordpress/icons';
const meta: ComponentMeta< typeof Panel > = {
title: 'Components/Panel',
component: Panel,
- subcomponents: { PanelRow, PanelBody },
argTypes: {
children: { control: { type: null } },
},
diff --git a/packages/components/src/placeholder/stories/index.tsx b/packages/components/src/placeholder/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/placeholder/stories/index.tsx
rename to packages/components/src/placeholder/stories/index.story.tsx
diff --git a/packages/components/src/popover/stories/e2e/index.tsx b/packages/components/src/popover/stories/e2e/index.story.tsx
similarity index 100%
rename from packages/components/src/popover/stories/e2e/index.tsx
rename to packages/components/src/popover/stories/e2e/index.story.tsx
diff --git a/packages/components/src/popover/stories/index.tsx b/packages/components/src/popover/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/popover/stories/index.tsx
rename to packages/components/src/popover/stories/index.story.tsx
diff --git a/packages/components/src/progress-bar/stories/index.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/progress-bar/stories/index.tsx
rename to packages/components/src/progress-bar/stories/index.story.tsx
diff --git a/packages/components/src/query-controls/stories/index.tsx b/packages/components/src/query-controls/stories/index.story.tsx
similarity index 93%
rename from packages/components/src/query-controls/stories/index.tsx
rename to packages/components/src/query-controls/stories/index.story.tsx
index d7fa5e50a4531..086ff884f8fe7 100644
--- a/packages/components/src/query-controls/stories/index.tsx
+++ b/packages/components/src/query-controls/stories/index.story.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
/**
* WordPress dependencies
@@ -37,7 +37,7 @@ const meta: ComponentMeta< typeof QueryControls > = {
};
export default meta;
-export const Default: ComponentStory< typeof QueryControls > = ( args ) => {
+export const Default: Story< typeof QueryControls > = ( args ) => {
const {
onAuthorChange,
onCategoryChange,
@@ -146,9 +146,7 @@ Default.args = {
selectedAuthorId: 1,
};
-const SingleCategoryTemplate: ComponentStory< typeof QueryControls > = (
- args
-) => {
+const SingleCategoryTemplate: Story< typeof QueryControls > = ( args ) => {
const {
onAuthorChange,
onCategoryChange,
@@ -186,7 +184,7 @@ const SingleCategoryTemplate: ComponentStory< typeof QueryControls > = (
/>
);
};
-export const SelectSingleCategory: ComponentStory< typeof QueryControls > =
+export const SelectSingleCategory: Story< typeof QueryControls > =
SingleCategoryTemplate.bind( {} );
SelectSingleCategory.args = {
categoriesList: [
diff --git a/packages/components/src/radio-control/stories/index.tsx b/packages/components/src/radio-control/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/radio-control/stories/index.tsx
rename to packages/components/src/radio-control/stories/index.story.tsx
diff --git a/packages/components/src/radio-group/stories/index.js b/packages/components/src/radio-group/stories/index.story.js
similarity index 98%
rename from packages/components/src/radio-group/stories/index.js
rename to packages/components/src/radio-group/stories/index.story.js
index 10fb5dfd02800..4c6742017c420 100644
--- a/packages/components/src/radio-group/stories/index.js
+++ b/packages/components/src/radio-group/stories/index.story.js
@@ -11,7 +11,6 @@ import RadioGroup from '../';
export default {
title: 'Components (Deprecated)/RadioGroup',
- subcomponents: { Radio },
component: RadioGroup,
parameters: {
docs: {
diff --git a/packages/components/src/range-control/stories/index.tsx b/packages/components/src/range-control/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/range-control/stories/index.tsx
rename to packages/components/src/range-control/stories/index.story.tsx
diff --git a/packages/components/src/resizable-box/stories/index.tsx b/packages/components/src/resizable-box/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/resizable-box/stories/index.tsx
rename to packages/components/src/resizable-box/stories/index.story.tsx
diff --git a/packages/components/src/responsive-wrapper/stories/index.tsx b/packages/components/src/responsive-wrapper/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/responsive-wrapper/stories/index.tsx
rename to packages/components/src/responsive-wrapper/stories/index.story.tsx
diff --git a/packages/components/src/sandbox/stories/index.tsx b/packages/components/src/sandbox/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/sandbox/stories/index.tsx
rename to packages/components/src/sandbox/stories/index.story.tsx
diff --git a/packages/components/src/scroll-lock/stories/index.tsx b/packages/components/src/scroll-lock/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/scroll-lock/stories/index.tsx
rename to packages/components/src/scroll-lock/stories/index.story.tsx
diff --git a/packages/components/src/scrollable/stories/index.tsx b/packages/components/src/scrollable/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/scrollable/stories/index.tsx
rename to packages/components/src/scrollable/stories/index.story.tsx
diff --git a/packages/components/src/search-control/stories/index.tsx b/packages/components/src/search-control/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/search-control/stories/index.tsx
rename to packages/components/src/search-control/stories/index.story.tsx
diff --git a/packages/components/src/select-control/stories/index.tsx b/packages/components/src/select-control/stories/index.story.tsx
similarity index 87%
rename from packages/components/src/select-control/stories/index.tsx
rename to packages/components/src/select-control/stories/index.story.tsx
index 8560ffe49fbab..417ab17d15ddc 100644
--- a/packages/components/src/select-control/stories/index.tsx
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
/**
* WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
*/
import SelectControl from '../';
-const meta: ComponentMeta< typeof SelectControl > = {
+const meta: Meta< typeof SelectControl > = {
title: 'Components/SelectControl',
component: SelectControl,
argTypes: {
@@ -31,9 +31,7 @@ const meta: ComponentMeta< typeof SelectControl > = {
};
export default meta;
-const SelectControlWithState: ComponentStory< typeof SelectControl > = (
- props
-) => {
+const SelectControlWithState: Story< typeof SelectControl > = ( props ) => {
const [ selection, setSelection ] = useState< string[] >();
if ( props.multiple ) {
@@ -84,9 +82,7 @@ WithLabelAndHelpText.args = {
* As an alternative to the `options` prop, `optgroup`s and `options` can be
* passed in as `children` for more customizeability.
*/
-export const WithCustomChildren: ComponentStory< typeof SelectControl > = (
- args
-) => {
+export const WithCustomChildren: Story< typeof SelectControl > = ( args ) => {
return (
diff --git a/packages/components/src/slot-fill/stories/index.js b/packages/components/src/slot-fill/stories/index.story.js
similarity index 97%
rename from packages/components/src/slot-fill/stories/index.js
rename to packages/components/src/slot-fill/stories/index.story.js
index 1f8dbedeba3fa..4a5bb6b059f16 100644
--- a/packages/components/src/slot-fill/stories/index.js
+++ b/packages/components/src/slot-fill/stories/index.story.js
@@ -10,7 +10,6 @@ import { Slot, Fill, Provider as SlotFillProvider } from '../';
export default {
title: 'Components/SlotFill',
- subcomponents: { Fill, SlotFillProvider },
component: Slot,
parameters: {
controls: { expanded: true },
diff --git a/packages/components/src/snackbar/stories/index.tsx b/packages/components/src/snackbar/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/snackbar/stories/index.tsx
rename to packages/components/src/snackbar/stories/index.story.tsx
diff --git a/packages/components/src/snackbar/stories/list.tsx b/packages/components/src/snackbar/stories/list.story.tsx
similarity index 100%
rename from packages/components/src/snackbar/stories/list.tsx
rename to packages/components/src/snackbar/stories/list.story.tsx
diff --git a/packages/components/src/spacer/stories/index.tsx b/packages/components/src/spacer/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/spacer/stories/index.tsx
rename to packages/components/src/spacer/stories/index.story.tsx
diff --git a/packages/components/src/spinner/stories/index.tsx b/packages/components/src/spinner/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/spinner/stories/index.tsx
rename to packages/components/src/spinner/stories/index.story.tsx
diff --git a/packages/components/src/surface/stories/index.tsx b/packages/components/src/surface/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/surface/stories/index.tsx
rename to packages/components/src/surface/stories/index.story.tsx
diff --git a/packages/components/src/tab-panel/stories/index.tsx b/packages/components/src/tab-panel/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/tab-panel/stories/index.tsx
rename to packages/components/src/tab-panel/stories/index.story.tsx
diff --git a/packages/components/src/text-control/stories/index.tsx b/packages/components/src/text-control/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/text-control/stories/index.tsx
rename to packages/components/src/text-control/stories/index.story.tsx
diff --git a/packages/components/src/text-highlight/stories/index.tsx b/packages/components/src/text-highlight/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/text-highlight/stories/index.tsx
rename to packages/components/src/text-highlight/stories/index.story.tsx
diff --git a/packages/components/src/text/stories/index.js b/packages/components/src/text/stories/index.story.js
similarity index 100%
rename from packages/components/src/text/stories/index.js
rename to packages/components/src/text/stories/index.story.js
diff --git a/packages/components/src/textarea-control/stories/index.tsx b/packages/components/src/textarea-control/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/textarea-control/stories/index.tsx
rename to packages/components/src/textarea-control/stories/index.story.tsx
diff --git a/packages/components/src/theme/stories/index.tsx b/packages/components/src/theme/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/theme/stories/index.tsx
rename to packages/components/src/theme/stories/index.story.tsx
diff --git a/packages/components/src/tip/stories/index.tsx b/packages/components/src/tip/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/tip/stories/index.tsx
rename to packages/components/src/tip/stories/index.story.tsx
diff --git a/packages/components/src/toggle-control/stories/index.tsx b/packages/components/src/toggle-control/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/toggle-control/stories/index.tsx
rename to packages/components/src/toggle-control/stories/index.story.tsx
diff --git a/packages/components/src/toggle-group-control/stories/index.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx
similarity index 97%
rename from packages/components/src/toggle-group-control/stories/index.tsx
rename to packages/components/src/toggle-group-control/stories/index.story.tsx
index 3aee2f9f150d6..622bf4f66dd8b 100644
--- a/packages/components/src/toggle-group-control/stories/index.tsx
+++ b/packages/components/src/toggle-group-control/stories/index.story.tsx
@@ -26,7 +26,6 @@ import type {
const meta: ComponentMeta< typeof ToggleGroupControl > = {
component: ToggleGroupControl,
title: 'Components (Experimental)/ToggleGroupControl',
- subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
argTypes: {
help: { control: { type: 'text' } },
onChange: { action: 'onChange' },
diff --git a/packages/components/src/toolbar/stories/index.tsx b/packages/components/src/toolbar/stories/index.story.tsx
similarity index 97%
rename from packages/components/src/toolbar/stories/index.tsx
rename to packages/components/src/toolbar/stories/index.story.tsx
index 4d1df2d64bf7b..b5100b856d58d 100644
--- a/packages/components/src/toolbar/stories/index.tsx
+++ b/packages/components/src/toolbar/stories/index.story.tsx
@@ -40,12 +40,6 @@ import DropdownMenu from '../../dropdown-menu';
const meta: ComponentMeta< typeof Toolbar > = {
title: 'Components/Toolbar',
component: Toolbar,
- subcomponents: {
- ToolbarButton,
- ToolbarGroup,
- ToolbarItem,
- ToolbarDropdownMenu,
- },
argTypes: {
children: { control: { type: null } },
},
diff --git a/packages/components/src/tools-panel/stories/index.tsx b/packages/components/src/tools-panel/stories/index.story.tsx
similarity index 99%
rename from packages/components/src/tools-panel/stories/index.tsx
rename to packages/components/src/tools-panel/stories/index.story.tsx
index 52c89a6ece5d6..025185dfd0800 100644
--- a/packages/components/src/tools-panel/stories/index.tsx
+++ b/packages/components/src/tools-panel/stories/index.story.tsx
@@ -28,9 +28,6 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
const meta: ComponentMeta< typeof ToolsPanel > = {
title: 'Components (Experimental)/ToolsPanel',
component: ToolsPanel,
- subcomponents: {
- ToolsPanelItem,
- },
argTypes: {
as: { control: { type: null } },
children: { control: { type: null } },
diff --git a/packages/components/src/tooltip/stories/index.js b/packages/components/src/tooltip/stories/index.story.js
similarity index 100%
rename from packages/components/src/tooltip/stories/index.js
rename to packages/components/src/tooltip/stories/index.story.js
diff --git a/packages/components/src/tree-grid/stories/index.tsx b/packages/components/src/tree-grid/stories/index.story.tsx
similarity index 98%
rename from packages/components/src/tree-grid/stories/index.tsx
rename to packages/components/src/tree-grid/stories/index.story.tsx
index 6ae39be6e7caf..1467ffe5660c8 100644
--- a/packages/components/src/tree-grid/stories/index.tsx
+++ b/packages/components/src/tree-grid/stories/index.story.tsx
@@ -18,7 +18,6 @@ import InputControl from '../../input-control';
const meta: ComponentMeta< typeof TreeGrid > = {
title: 'Components (Experimental)/TreeGrid',
component: TreeGrid,
- subcomponents: { TreeGridRow, TreeGridCell },
argTypes: {
children: { control: { type: null } },
},
diff --git a/packages/components/src/tree-select/stories/index.tsx b/packages/components/src/tree-select/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/tree-select/stories/index.tsx
rename to packages/components/src/tree-select/stories/index.story.tsx
diff --git a/packages/components/src/truncate/stories/index.tsx b/packages/components/src/truncate/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/truncate/stories/index.tsx
rename to packages/components/src/truncate/stories/index.story.tsx
diff --git a/packages/components/src/ui/tooltip/stories/index.js b/packages/components/src/ui/tooltip/stories/index.story.js
similarity index 100%
rename from packages/components/src/ui/tooltip/stories/index.js
rename to packages/components/src/ui/tooltip/stories/index.story.js
diff --git a/packages/components/src/unit-control/stories/index.tsx b/packages/components/src/unit-control/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/unit-control/stories/index.tsx
rename to packages/components/src/unit-control/stories/index.story.tsx
diff --git a/packages/components/src/v-stack/stories/e2e/index.tsx b/packages/components/src/v-stack/stories/e2e/index.story.tsx
similarity index 100%
rename from packages/components/src/v-stack/stories/e2e/index.tsx
rename to packages/components/src/v-stack/stories/e2e/index.story.tsx
diff --git a/packages/components/src/v-stack/stories/index.tsx b/packages/components/src/v-stack/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/v-stack/stories/index.tsx
rename to packages/components/src/v-stack/stories/index.story.tsx
diff --git a/packages/components/src/view/stories/index.tsx b/packages/components/src/view/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/view/stories/index.tsx
rename to packages/components/src/view/stories/index.story.tsx
diff --git a/packages/components/src/visually-hidden/stories/index.tsx b/packages/components/src/visually-hidden/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/visually-hidden/stories/index.tsx
rename to packages/components/src/visually-hidden/stories/index.story.tsx
diff --git a/packages/components/src/z-stack/stories/index.tsx b/packages/components/src/z-stack/stories/index.story.tsx
similarity index 100%
rename from packages/components/src/z-stack/stories/index.tsx
rename to packages/components/src/z-stack/stories/index.story.tsx
diff --git a/packages/edit-site/src/components/global-styles/stories/index.js b/packages/edit-site/src/components/global-styles/stories/index.story.js
similarity index 100%
rename from packages/edit-site/src/components/global-styles/stories/index.js
rename to packages/edit-site/src/components/global-styles/stories/index.story.js
diff --git a/packages/icons/src/icon/stories/index.js b/packages/icons/src/icon/stories/index.story.js
similarity index 100%
rename from packages/icons/src/icon/stories/index.js
rename to packages/icons/src/icon/stories/index.story.js
diff --git a/storybook/main.js b/storybook/main.js
index d56fd9f48e987..ad4756fa2d472 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -1,21 +1,49 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
+/**
+ * WordPress dependencies
+ */
+const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
+
+const scssLoaders = ( { isLazy } ) => [
+ {
+ loader: 'style-loader',
+ options: { injectType: isLazy ? 'lazyStyleTag' : 'styleTag' },
+ },
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: {
+ ident: 'postcss',
+ plugins: postcssPlugins,
+ },
+ },
+ },
+ 'sass-loader',
+];
+
const stories = [
- process.env.NODE_ENV !== 'test' && './stories/**/*.@(js|tsx|mdx)',
- '../packages/block-editor/src/**/stories/*.@(js|tsx|mdx)',
- '../packages/components/src/**/stories/*.@(js|tsx|mdx)',
- '../packages/icons/src/**/stories/*.@(js|tsx|mdx)',
- '../packages/edit-site/src/**/stories/*.@(js|tsx|mdx)',
- '../packages/components/README.mdx',
+ process.env.NODE_ENV !== 'test' && './stories/**/*.story.@(js|tsx)',
+ process.env.NODE_ENV !== 'test' && './stories/**/*.mdx',
+ '../packages/block-editor/src/**/stories/*.story.@(js|tsx|mdx)',
+ '../packages/components/src/**/stories/*.story.@(js|tsx|mdx)',
+ '../packages/icons/src/**/stories/*.story.@(js|tsx|mdx)',
+ '../packages/edit-site/src/**/stories/*.story.@(js|tsx|mdx)',
].filter( Boolean );
module.exports = {
core: {
- builder: 'webpack5',
+ disableTelemetry: true,
},
stories,
addons: [
{
name: '@storybook/addon-docs',
- options: { configureJSX: true, transcludeMarkdown: true },
+ options: { configureJSX: true },
},
'@storybook/addon-controls',
'@storybook/addon-viewport',
@@ -24,17 +52,47 @@ module.exports = {
'@storybook/addon-actions',
'storybook-source-link',
],
- framework: '@storybook/react',
+ framework: {
+ name: '@storybook/react-webpack5',
+ options: {},
+ },
features: {
babelModeV7: true,
emotionAlias: false,
storyStoreV7: true,
},
- typescript: {
- // TODO: this can likely be removed after upgrading to Storybook 7, along
- // with the root-level dependency on react-docgen-typescript-plugin. Without
- // this, Storybook crashes when building with Typescript 5.x.
- // See https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/78#issuecomment-1409224863.
- reactDocgen: 'react-docgen-typescript-plugin',
+ docs: {
+ autodocs: true,
+ },
+ webpackFinal: async ( config ) => {
+ return {
+ ...config,
+ module: {
+ ...config.module,
+ rules: [
+ ...config.module.rules,
+ {
+ // Adds a `sourceLink` parameter to the story metadata, based on the file path
+ test: /\/stories\/.+\.(j|t)sx?$/,
+ loader: path.resolve(
+ __dirname,
+ './webpack/source-link-loader.js'
+ ),
+ enforce: 'post',
+ },
+ {
+ test: /\.scss$/,
+ exclude: /\.lazy\.scss$/,
+ use: scssLoaders( { isLazy: false } ),
+ include: path.resolve( __dirname ),
+ },
+ {
+ test: /\.lazy\.scss$/,
+ use: scssLoaders( { isLazy: true } ),
+ include: path.resolve( __dirname ),
+ },
+ ],
+ },
+ };
},
};
diff --git a/storybook/stories/docs/components/contributing.mdx b/storybook/stories/docs/components/contributing.mdx
new file mode 100644
index 0000000000000..7593cdd97a810
--- /dev/null
+++ b/storybook/stories/docs/components/contributing.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import Contributing from '@wordpress/components/CONTRIBUTING.md?raw';
+
+
+
+{Contributing}
diff --git a/storybook/stories/docs/components/contributing.story.mdx b/storybook/stories/docs/components/contributing.story.mdx
deleted file mode 100644
index 1ffd0c49d4020..0000000000000
--- a/storybook/stories/docs/components/contributing.story.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Contributing from '@wordpress/components/CONTRIBUTING.md';
-
-
-
-
diff --git a/storybook/stories/docs/components/readme.mdx b/storybook/stories/docs/components/readme.mdx
new file mode 100644
index 0000000000000..61f3c222e9f55
--- /dev/null
+++ b/storybook/stories/docs/components/readme.mdx
@@ -0,0 +1,6 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import Readme from '@wordpress/components/README.md?raw';
+
+
+
+{Readme}
diff --git a/storybook/stories/docs/components/readme.story.mdx b/storybook/stories/docs/components/readme.story.mdx
deleted file mode 100644
index 7996188ffb50b..0000000000000
--- a/storybook/stories/docs/components/readme.story.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Readme from '@wordpress/components/README.md';
-
-
-
-
diff --git a/storybook/stories/docs/introduction.story.mdx b/storybook/stories/docs/introduction.mdx
similarity index 97%
rename from storybook/stories/docs/introduction.story.mdx
rename to storybook/stories/docs/introduction.mdx
index 46079eafe47b4..dfccd276c6303 100644
--- a/storybook/stories/docs/introduction.story.mdx
+++ b/storybook/stories/docs/introduction.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
import { InlineIcon } from './inline-icon';
diff --git a/storybook/stories/playground/index.js b/storybook/stories/playground/index.story.js
similarity index 100%
rename from storybook/stories/playground/index.js
rename to storybook/stories/playground/index.story.js
diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
deleted file mode 100644
index 1747cc2f9caa0..0000000000000
--- a/storybook/webpack.config.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-const path = require( 'path' );
-
-/**
- * WordPress dependencies
- */
-const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
-
-const scssLoaders = ( { isLazy } ) => [
- {
- loader: 'style-loader',
- options: { injectType: isLazy ? 'lazyStyleTag' : 'styleTag' },
- },
- 'css-loader',
- {
- loader: 'postcss-loader',
- options: {
- postcssOptions: {
- ident: 'postcss',
- plugins: postcssPlugins,
- },
- },
- },
- 'sass-loader',
-];
-
-module.exports = ( { config } ) => {
- config.module.rules.push(
- {
- // Currently does not work with our tsx stories
- // See https://github.com/storybookjs/storybook/issues/17275
- test: /\/stories\/.+\.(j|t)sx?$/,
- loader: require.resolve( '@storybook/source-loader' ),
- enforce: 'pre',
- },
- {
- // Allows a story description to be written as a doc comment above the exported story
- test: /\/stories\/.+\.(j|t)sx?$/,
- loader: path.resolve(
- __dirname,
- './webpack/description-loader.js'
- ),
- enforce: 'post',
- },
- {
- // Adds a `sourceLink` parameter to the story metadata, based on the file path
- test: /\/stories\/.+\.(j|t)sx?$/,
- loader: path.resolve(
- __dirname,
- './webpack/source-link-loader.js'
- ),
- enforce: 'post',
- },
- {
- test: /\.scss$/,
- exclude: /\.lazy\.scss$/,
- use: scssLoaders( { isLazy: false } ),
- include: path.resolve( __dirname ),
- },
- {
- test: /\.lazy\.scss$/,
- use: scssLoaders( { isLazy: true } ),
- include: path.resolve( __dirname ),
- }
- );
-
- return config;
-};
diff --git a/storybook/webpack/description-loader.js b/storybook/webpack/description-loader.js
deleted file mode 100644
index 93d9fabfb09ff..0000000000000
--- a/storybook/webpack/description-loader.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * External dependencies
- */
-const babel = require( '@babel/core' );
-
-/**
- * Allows a story description to be written as a doc comment above the exported story.
- *
- * Based on https://github.com/izhan/storybook-description-loader
- *
- * @example
- * ```jsx
- * // This comment will become the description for the story in the generated docs.
- * export const MyStory = Template.bind({});
- * ```
- */
-function annotateDescriptionPlugin() {
- return {
- visitor: {
- ExportNamedDeclaration( path ) {
- if ( ! path.node.leadingComments ) {
- return;
- }
-
- const commentValues = path.node.leadingComments.map(
- ( node ) => {
- if ( node.type === 'CommentLine' ) {
- return node.value.trimLeft();
- }
- // else, node.type === 'CommentBlock'
- return node.value
- .split( '\n' )
- .map( ( line ) => {
- // stripping out the whitespace and * from comment blocks
- return line.replace(
- /^(\s+)?(\*+)?(\s+)?/,
- ''
- );
- } )
- .join( '\n' )
- .trim();
- }
- );
- const description = commentValues.join( '\n' );
- const storyId = path.node.declaration.declarations[ 0 ].id.name;
-
- path.container.push(
- ...babel.template.ast`
- ${ storyId }.parameters ??= {};
- ${ storyId }.parameters.docs ??= {};
- ${ storyId }.parameters.docs.description ??= {};
- ${ storyId }.parameters.docs.description.story ??= ${ JSON.stringify(
- description
- ) };
- `
- );
- },
- },
- };
-}
-
-module.exports = function ( source ) {
- const output = babel.transform( source, {
- plugins: [ annotateDescriptionPlugin ],
- filename: __filename,
- sourceType: 'module',
- } );
- return output.code;
-};
diff --git a/storybook/webpack/source-link-loader.js b/storybook/webpack/source-link-loader.js
index 702e2882916f2..f8702c1c36717 100644
--- a/storybook/webpack/source-link-loader.js
+++ b/storybook/webpack/source-link-loader.js
@@ -58,10 +58,10 @@ function alterParameters( properties, componentPath ) {
];
}
-module.exports = function ( source, { sources } ) {
+module.exports = function ( source ) {
const output = babel.transform( source, {
plugins: [ addSourceLinkPlugin ],
- filename: sources[ 0 ],
+ filename: this.resourcePath,
sourceType: 'module',
} );
return output.code;