Storybook: Opt in to story store v7 (#42486)

* Opt in to code-split stories * Revert glob * Move story utility files to subfolders Co-authored-by: Lena Morita <[email protected]>
WordPress · Nov 21, 2022 · 1b69ba2 · 1b69ba2
1 parent 35f25ab
commit 1b69ba2
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 43 deletions.
diff --git a/packages/block-editor/src/components/inserter/stories/index.js b/packages/block-editor/src/components/inserter/stories/index.js
@@ -3,7 +3,7 @@
  */
 import BlockLibrary from '../library';
 import BlockEditorProvider from '../../provider';
-import { patternCategories, patterns, reusableBlocks } from './fixtures';
+import { patternCategories, patterns, reusableBlocks } from './utils/fixtures';
 import Inserter from '../';
 
 export default { title: 'BlockEditor/Inserter' };

diff --git a/...c/components/inserter/stories/fixtures.js → ...onents/inserter/stories/utils/fixtures.js b/...c/components/inserter/stories/fixtures.js → ...onents/inserter/stories/utils/fixtures.js
diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js
@@ -6,12 +6,12 @@ import NavigationBackButton from '../back-button';
 import NavigationGroup from '../group';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
-import { DefaultStory } from './default';
-import { GroupStory } from './group';
-import { ControlledStateStory } from './controlled-state';
-import { SearchStory } from './search';
-import { MoreExamplesStory } from './more-examples';
-import { HideIfEmptyStory } from './hide-if-empty';
+import { DefaultStory } from './utils/default';
+import { GroupStory } from './utils/group';
+import { ControlledStateStory } from './utils/controlled-state';
+import { SearchStory } from './utils/search';
+import { MoreExamplesStory } from './utils/more-examples';
+import { HideIfEmptyStory } from './utils/hide-if-empty';
 import './style.css';
 
 export default {

diff --git a/...rc/navigation/stories/controlled-state.js → ...igation/stories/utils/controlled-state.js b/...rc/navigation/stories/controlled-state.js → ...igation/stories/utils/controlled-state.js
@@ -7,9 +7,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
+import Navigation from '../..';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
 
 export function ControlledStateStory() {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );

diff --git a/...ponents/src/navigation/stories/default.js → ...s/src/navigation/stories/utils/default.js b/...ponents/src/navigation/stories/default.js → ...s/src/navigation/stories/utils/default.js
@@ -6,9 +6,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
+import Navigation from '../..';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
 
 export function DefaultStory() {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );

diff --git a/...omponents/src/navigation/stories/group.js → ...nts/src/navigation/stories/utils/group.js b/...omponents/src/navigation/stories/group.js → ...nts/src/navigation/stories/utils/group.js
@@ -6,10 +6,10 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
-import NavigationGroup from '../group';
+import Navigation from '../..';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
+import NavigationGroup from '../../group';
 
 export function GroupStory() {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );

diff --git a/...s/src/navigation/stories/hide-if-empty.js → ...navigation/stories/utils/hide-if-empty.js b/...s/src/navigation/stories/hide-if-empty.js → ...navigation/stories/utils/hide-if-empty.js
@@ -1,9 +1,9 @@
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
+import Navigation from '../..';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
 
 export function HideIfEmptyStory() {
 	return (

diff --git a/...s/src/navigation/stories/more-examples.js → ...navigation/stories/utils/more-examples.js b/...s/src/navigation/stories/more-examples.js → ...navigation/stories/utils/more-examples.js
@@ -7,10 +7,10 @@ import { Icon, wordpress, home } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationGroup from '../group';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
+import Navigation from '../..';
+import NavigationGroup from '../../group';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
 
 export function MoreExamplesStory() {
 	const [ activeItem, setActiveItem ] = useState( 'child-1' );

diff --git a/...mponents/src/navigation/stories/search.js → ...ts/src/navigation/stories/utils/search.js b/...mponents/src/navigation/stories/search.js → ...ts/src/navigation/stories/utils/search.js
@@ -6,11 +6,11 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationGroup from '../group';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
-import { normalizedSearch } from '../utils';
+import Navigation from '../..';
+import NavigationGroup from '../../group';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
+import { normalizedSearch } from '../../utils';
 
 const searchItems = [
 	{ item: 'foo', title: 'Foo' },

diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js
@@ -494,7 +494,7 @@ export const WithConditionallyRenderedControl = () => {
 	);
 };
 
-export { ToolsPanelWithItemGroupSlot } from './tools-panel-with-item-group-slot';
+export { ToolsPanelWithItemGroupSlot } from './utils/tools-panel-with-item-group-slot';
 
 const PanelWrapperView = styled.div`
 	font-size: 13px;

diff --git a/...ories/tools-panel-with-item-group-slot.js → ...utils/tools-panel-with-item-group-slot.js b/...ories/tools-panel-with-item-group-slot.js → ...utils/tools-panel-with-item-group-slot.js
@@ -12,17 +12,20 @@ import { useContext, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../../button';
-import ColorIndicator from '../../color-indicator';
-import ColorPalette from '../../color-palette';
-import Dropdown from '../../dropdown';
-import Panel from '../../panel';
-import { FlexItem } from '../../flex';
-import { HStack } from '../../h-stack';
-import { Item, ItemGroup } from '../../item-group';
-import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from '..';
-import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
-import { useCx } from '../../utils';
+import Button from '../../../button';
+import ColorIndicator from '../../../color-indicator';
+import ColorPalette from '../../../color-palette';
+import Dropdown from '../../../dropdown';
+import Panel from '../../../panel';
+import { FlexItem } from '../../../flex';
+import { HStack } from '../../../h-stack';
+import { Item, ItemGroup } from '../../../item-group';
+import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from '../..';
+import {
+	createSlotFill,
+	Provider as SlotFillProvider,
+} from '../../../slot-fill';
+import { useCx } from '../../../utils';
 
 // Available border colors.
 const colors = [

diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -37,8 +37,8 @@
 		"src/**/*.ios.js",
 		"src/**/*.native.js",
 		"src/**/react-native-*",
-		"src/**/stories/**.js", // only exclude js files, tsx files should be checked
-		"src/**/test/**.js", // only exclude js files, ts{x} files should be checked
+		"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
+		"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
 		"src/index.js",
 		"src/alignment-matrix-control",
 		"src/angle-picker-control",

diff --git a/storybook/main.js b/storybook/main.js
@@ -25,9 +25,11 @@ module.exports = {
 		'@storybook/addon-actions',
 		'storybook-source-link',
 	],
+	framework: '@storybook/react',
 	features: {
 		babelModeV7: true,
 		emotionAlias: false,
+		storyStoreV7: true,
 	},
 	// Workaround:
 	// https://github.com/storybookjs/storybook/issues/12270