From d412ede8be17050be0d87030b4d6b166fe2f69fb Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 17 Jan 2025 00:28:28 +0900
Subject: [PATCH] Storybook: Improve startup instructions (#41115)

* Remove unnecessary Introduction page

* Improve command docs

* changelog

* Improve How to guide
---
 .../storybook/changelog/howto-command-docs    |  4 ++++
 .../storybook/stories/docs/howto.mdx          | 22 ++++++++++++-------
 .../storybook/stories/docs/introduction.mdx   |  7 ------
 3 files changed, 18 insertions(+), 15 deletions(-)
 create mode 100644 projects/js-packages/storybook/changelog/howto-command-docs
 delete mode 100644 projects/js-packages/storybook/storybook/stories/docs/introduction.mdx

diff --git a/projects/js-packages/storybook/changelog/howto-command-docs b/projects/js-packages/storybook/changelog/howto-command-docs
new file mode 100644
index 0000000000000..10a10412ad7c7
--- /dev/null
+++ b/projects/js-packages/storybook/changelog/howto-command-docs
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Storybook: Improve launch instructions
diff --git a/projects/js-packages/storybook/storybook/stories/docs/howto.mdx b/projects/js-packages/storybook/storybook/stories/docs/howto.mdx
index e46a39e7c788b..08b3c7b2b76e0 100644
--- a/projects/js-packages/storybook/storybook/stories/docs/howto.mdx
+++ b/projects/js-packages/storybook/storybook/stories/docs/howto.mdx
@@ -5,13 +5,13 @@ import dedent from 'ts-dedent';
 
 # How to use this tool
 
-The Jetpack Components Library allows you to discover, test and live-edit Jetpack visual component.
+The Jetpack Components Library allows you to discover, test, and live-edit Jetpack UI components.
 
 ## Publish component stories
 
-Anywhere in a supported package, create one or more directories called `stories` (e.g. src/components/my-component/stories).
+Anywhere in a supported package, create one or more directories called `stories` (e.g. `src/components/my-component/stories`).
 
-In that directory, create an index.stories.js or index.stories.jsx file, like this:
+In that directory, create an `index.stories.jsx` or `index.stories.tsx` file, like this:
 
 <Source
 	language='jsx'
@@ -23,23 +23,29 @@ In that directory, create an index.stories.js or index.stories.jsx file, like th
 		// the default export is metadata about the component
 		export default {
 			title: 'Components/My Component',
+			component: MyComponent,
 		};
 		// the export called __default is the default state of the component
-		export const _default = () => {
-			return <MyComponent foo="bar"/>;
-		};
+		export const _default = {};
 	`}
 />
 
-You can read more about writing stories in the [Storybook JS docs](https://storybook.js.org/docs/react/writing-stories/introduction)
+You can read more about writing stories in the [Storybook JS docs](https://storybook.js.org/docs/react/writing-stories/introduction).
 
 ## Edit components live
 
 To run this locally, just run:
 
-```
+```bash
+# From projects/js-packages/storybook/
 pnpm run storybook:dev
+
+# Or from Jetpack repo root
+pnpm -F @automattic/jetpack-storybook storybook:dev
 ```
 
 Any edits to SCSS, HTML, JSX or other files should be hot-loaded so you can see changes to styles or components.
 
+## Contributing
+
+Ready to contribute? Check out the Jetpack [contributing guide](https://github.com/Automattic/jetpack/blob/trunk/docs/CONTRIBUTING.md).
diff --git a/projects/js-packages/storybook/storybook/stories/docs/introduction.mdx b/projects/js-packages/storybook/storybook/stories/docs/introduction.mdx
deleted file mode 100644
index 358398ec0c6f5..0000000000000
--- a/projects/js-packages/storybook/storybook/stories/docs/introduction.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Docs/Introduction" />
-
-# Introduction
-
-Hello World