Move @automattic/components' Storybook to the root Storybook

.storybook/main.js

@@ -3,7 +3,11 @@ const devConfig = require( '../config/development.json' );
 const storybookDefaultConfig = require( '@automattic/calypso-storybook' );
 
 const storybookConfig = storybookDefaultConfig( {
-	stories: [ '../client/**/*.stories.{ts,tsx}', '../packages/design-picker/**/*.stories.{ts,tsx}' ],
+	stories: [
+		'../client/**/*.stories.{ts,tsx}',
+		'../packages/design-picker/**/*.stories.{ts,tsx}',
+		'../packages/components/**/*.stories.{ts,tsx}',
+	],
 } );
 
 const configData = { ...sharedConfig, ...devConfig };

.storybook/preview.js

@@ -3,22 +3,6 @@ import './index.scss';
 export const parameters = {
 	layout: 'fullscreen',
 	viewport: {
-		/**
-		 * These viewports are from Gutenberg.
-		 * We can use this to set `parameters.viewport` in a story.
-		 *
-		 * @example
-		 * export default {
-		 *   title: 'sample',
-		 *   component: Sample,
-		 *   parameters: {
-		 *     viewport: {
-		 *       defaultViewport: 'SMALL',
-		 *     },
-		 *   },
-		 * }
-		 * @see https://github.com/WordPress/gutenberg/blob/db2f753977d1b5c28f1ff80b3fc32aa1d7a6a773/packages/base-styles/_breakpoints.scss#L6-L13
-		 */
 		viewports: {
 			HUGE: {
 				name: 'HUGE',

package.json

@@ -87,7 +87,7 @@
 		"clean:packages": "yarn workspaces foreach --all --parallel --verbose --exclude 'wp-calypso' run clean",
 		"clean:public": "rm -rf public",
 		"clean:translations": "rm -rf build/strings calypso-strings.pot chunks-map.*.json || true",
-		"components:storybook:start": "echo 'Deprecated, run `yarn workspace @automattic/components run storybook` instead'",
+		"components:storybook:start": "echo 'Storybook in Calypso moved into the root directory. Run `yarn storybook:start` instead.'",
 		"composite-checkout:storybook:start": "echo 'Deprecated, run `yarn workspace @automattic/composite-checkout run storybook` instead'",
 		"distclean": "yarn run clean && rm -rf **/node_modules **/.cache .yarn/install-state.gz || true",
 		"docker": "docker run -it --name wp-calypso --rm -p 80:3000 wp-calypso",

packages/components/README.md

@@ -41,4 +41,4 @@ in the root of the repository to get the required `devDependencies`.
 
 ### Using [Storybook](https://storybook.js.org/)
 
-`yarn workspace @automattic/components run storybook`
+In the root of the repository, run `yarn storybook:start`.

packages/components/package.json

@@ -52,7 +52,6 @@
 	},
 	"devDependencies": {
 		"@automattic/calypso-color-schemes": "workspace:^",
-		"@automattic/calypso-storybook": "workspace:^",
 		"@automattic/calypso-typescript-config": "workspace:^",
 		"@storybook/addon-actions": "^6.4.19",
 		"@storybook/react": "^6.4.18",
@@ -67,7 +66,6 @@
 	"scripts": {
 		"clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
 		"build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
-		"prepack": "yarn run clean && yarn run build",
-		"storybook": "start-storybook"
+		"prepack": "yarn run clean && yarn run build"
 	}
 }

packages/components/src/chart-uplot/stories/index.stories.tsx

@@ -3,7 +3,7 @@
 import { useRef } from 'react';
 import UplotChart from '../';
 
-export default { title: 'Chart (uPlot)' };
+export default { title: 'packages/components/Chart (uPlot)' };
 
 const SAMPLE_DATA = [
 	[

packages/components/src/jetpack-upsell-card/stories/index.stories.tsx

@@ -1,6 +1,6 @@
 import JetpackUpsellCard from '..';
 
-export default { title: 'Jetpack Upsell Card' };
+export default { title: 'packages/components/Jetpack Upsell Card' };
 
 const upgradeUrls = {
 	backup: 'https://jetpack.com',

packages/components/src/loading-placeholder/loading-placeholder.stories.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { LoadingPlaceholder } from '.';
 
-export default { title: 'LoadingPlaceholder' };
+export default { title: 'packages/components/LoadingPlaceholder' };
 
 export const Normal = () => <LoadingPlaceholder />;
 export const Width = () => <LoadingPlaceholder className={ css( { maxWidth: 300 } ) } />;

packages/components/src/progress-bar/index.stories.tsx

@@ -1,6 +1,6 @@
 import ProgressBar from '.';
 
-export default { title: 'ProgressBar' };
+export default { title: 'packages/components/ProgressBar' };
 
 export const Normal = () => <ProgressBar value={ 33 } />;
 export const Colored = () => <ProgressBar color="red" value={ 33 } />;

packages/components/src/ribbon/index.stories.tsx

@@ -1,6 +1,6 @@
 import Ribbon from '.';
 
-export default { title: 'Ribbon' };
+export default { title: 'packages/components/Ribbon' };
 
 export const Default = () => {
 	return <Ribbon>Buy Now!</Ribbon>;

packages/components/src/submenu-popover/index.stories.tsx

@@ -3,7 +3,7 @@ import { DropdownMenu, Icon, MenuGroup, MenuItem } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
 import SubmenuPopover, { useSubmenuPopoverProps } from '.';
 
-export default { title: 'SubmenuPopover' };
+export default { title: 'packages/components/SubmenuPopover' };
 
 export const Default = () => {
 	const submenu = useSubmenuPopoverProps< HTMLDivElement >();

packages/design-picker/src/components/theme-card/index.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
 import ThemeCard from './index';
 
 export default {
-	title: 'packages/@automattic/design-picker/ThemeCard',
+	title: 'packages/design-picker/ThemeCard',
 	component: ThemeCard,
 	parameters: {
 		viewport: {

yarn.lock

@@ -418,7 +418,6 @@ __metadata:
   resolution: "@automattic/components@workspace:packages/components"
   dependencies:
     "@automattic/calypso-color-schemes": "workspace:^"
-    "@automattic/calypso-storybook": "workspace:^"
     "@automattic/calypso-typescript-config": "workspace:^"
     "@automattic/calypso-url": "workspace:^"
     "@automattic/data-stores": "workspace:^"