Storybook: Automatically generate controls from TypeScript (#98237)

* Storybook: Automatically generate controls * JetpackUpsellCard: Fix stories * SearchableDropdown: Fix stories * Use Story as component in decorator
Automattic · Jan 15, 2025 · 651097f · 651097f
1 parent 16917c2
commit 651097f
Show file tree

Hide file tree

Showing 7 changed files with 331 additions and 25 deletions.
diff --git a/packages/calypso-storybook/package.json b/packages/calypso-storybook/package.json
@@ -28,6 +28,7 @@
 		"@automattic/calypso-babel-config": "workspace:^",
 		"@storybook/addon-actions": "^7.6.19",
 		"@storybook/addon-controls": "^7.6.19",
+		"@storybook/addon-docs": "^7.6.19",
 		"@storybook/preset-scss": "^1.0.3",
 		"@storybook/react-webpack5": "^7.6.19",
 		"css-loader": "^6.11.0",

diff --git a/packages/calypso-storybook/src/index.js b/packages/calypso-storybook/src/index.js
@@ -41,12 +41,13 @@ module.exports = function storybookDefaultConfig( {
 		addons: [
 			'@storybook/addon-actions',
 			'@storybook/addon-controls',
+			'@storybook/addon-docs',
 			'@storybook/addon-viewport',
 			'@storybook/preset-scss',
 		],
 		typescript: {
 			check: false,
-			reactDocgen: false,
+			reactDocgen: 'react-docgen-typescript',
 		},
 		webpackFinal: async ( config ) => {
 			config.resolve.alias = {

diff --git a/packages/components/src/jetpack-upsell-card/index.tsx b/packages/components/src/jetpack-upsell-card/index.tsx
@@ -24,7 +24,7 @@ type Product = {
 	title: string;
 };
 
-export default function JetpackUpsellCard( {
+export function JetpackUpsellCard( {
 	purchasedProducts,
 	siteSlug,
 	upgradeUrls = {},
@@ -153,3 +153,5 @@ export default function JetpackUpsellCard( {
 		</Card>
 	);
 }
+
+export default JetpackUpsellCard;
diff --git a/packages/components/src/jetpack-upsell-card/stories/index.stories.tsx b/packages/components/src/jetpack-upsell-card/stories/index.stories.tsx
@@ -1,6 +1,21 @@
 import JetpackUpsellCard from '..';
+import type { Meta, StoryObj } from '@storybook/react';
 
-export default { title: 'packages/components/Jetpack Upsell Card' };
+const meta: Meta< typeof JetpackUpsellCard > = {
+	title: 'packages/components/Jetpack Upsell Card',
+	component: JetpackUpsellCard,
+	decorators: [
+		( Story ) => (
+			<div
+				className="jetpack-upsell-section-story"
+				style={ { margin: 'auto', maxWidth: '1000px' } }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
 
 const upgradeUrls = {
 	backup: 'https://jetpack.com',
@@ -10,17 +25,29 @@ const upgradeUrls = {
 	social: 'https://jetpack.com',
 	video: 'https://jetpack.com',
 };
-const UpsellSection = ( props: any ) => (
-	<div className="jetpack-upsell-section-story" style={ { margin: 'auto', maxWidth: '1000px' } }>
-		<JetpackUpsellCard purchasedProducts={ [] } upgradeUrls={ upgradeUrls } { ...props } />
-	</div>
-);
 
-export const Default = () => <UpsellSection />;
-export const WithACustomSiteSlug = () => <UpsellSection siteSlug="YourCustomDomain.com" />;
-export const WithNoUpgradeUrls = () => (
-	<>
-		<UpsellSection upgradeUrls={ {} } />
-		<p>Nothing should be rendered for this story.</p>
-	</>
-);
+export const Default: StoryObj< typeof JetpackUpsellCard > = {
+	args: {
+		purchasedProducts: [],
+		upgradeUrls,
+	},
+};
+export const WithACustomSiteSlug: StoryObj< typeof JetpackUpsellCard > = {
+	args: {
+		...Default.args,
+		siteSlug: 'YourCustomDomain.com',
+	},
+};
+
+export const WithNoUpgradeUrls: StoryObj< typeof JetpackUpsellCard > = {
+	render: ( props ) => (
+		<>
+			<JetpackUpsellCard { ...props } />
+			<p>Nothing should be rendered for this story.</p>
+		</>
+	),
+	args: {
+		...Default.args,
+		upgradeUrls: {},
+	},
+};
diff --git a/packages/components/src/searchable-dropdown/index.stories.tsx b/packages/components/src/searchable-dropdown/index.stories.tsx
@@ -4,18 +4,22 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta< typeof SearchableDropdown > = {
 	title: 'packages/components/SearchableDropdown',
-	component: ( props ) => {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const [ value, onChange ] = useState( 'home' );
-
-		return <SearchableDropdown value={ value } onChange={ ( e ) => onChange( e! ) } { ...props } />;
+	component: SearchableDropdown,
+	parameters: {
+		controls: { expanded: true },
 	},
 };
 
 export default meta;
 type Story = StoryObj< typeof SearchableDropdown >;
 
 export const Default: Story = {
+	render: function Template( props ) {
+		const [ value, onChange ] =
+			useState< React.ComponentProps< typeof SearchableDropdown >[ 'value' ] >( 'home' );
+
+		return <SearchableDropdown value={ value } onChange={ onChange } { ...props } />;
+	},
 	args: {
 		options: [
 			{

diff --git a/packages/components/src/searchable-dropdown/index.tsx b/packages/components/src/searchable-dropdown/index.tsx
@@ -7,7 +7,7 @@ type Props = React.ComponentProps< typeof ComboboxControl > & {
 	disabled?: boolean;
 };
 
-export default function SearchableDropdown( props: Props ) {
+export function SearchableDropdown( props: Props ) {
 	const { disabled = false } = props;
 
 	return (
@@ -22,3 +22,5 @@ export default function SearchableDropdown( props: Props ) {
 		</div>
 	);
 }
+
+export default SearchableDropdown;