From 987d41e6b2a0d75ab9456934a94e455fa815edb9 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 18 Apr 2023 11:40:59 -0600
Subject: [PATCH 1/2] Add TS version of Button story with hooks snippet

---
 .../react/button-story.with-hooks.js.mdx      |  2 +-
 .../react/button-story.with-hooks.ts-4-9.mdx  | 43 +++++++++++++++++++
 .../react/button-story.with-hooks.ts.mdx      | 43 +++++++++++++++++++
 docs/writing-stories/introduction.md          |  2 +-
 4 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
 create mode 100644 docs/snippets/react/button-story.with-hooks.ts.mdx

diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx
index 6c1f41e95d99..06c4cfec6cc6 100644
--- a/docs/snippets/react/button-story.with-hooks.js.mdx
+++ b/docs/snippets/react/button-story.with-hooks.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|ts|jsx|tsx
+// Button.stories.js|jsx
 
 import React, { useState } from 'react';
 
diff --git a/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
new file mode 100644
index 000000000000..85bdd6e903e1
--- /dev/null
+++ b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
@@ -0,0 +1,43 @@
+```tsx
+// Button.stories.ts|tsx
+
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/*
+ * Example Button story with React Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
+};
+
+export const Primary = {
+  render: () => <ButtonWithHooks />,
+} satisfies Story;
+```
diff --git a/docs/snippets/react/button-story.with-hooks.ts.mdx b/docs/snippets/react/button-story.with-hooks.ts.mdx
new file mode 100644
index 000000000000..67636adf85a3
--- /dev/null
+++ b/docs/snippets/react/button-story.with-hooks.ts.mdx
@@ -0,0 +1,43 @@
+```js
+// Button.stories.ts|tsx
+
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+/*
+ * Example Button story with React Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
+};
+
+export const Primary: Story = {
+  render: () => <ButtonWithHooks />,
+};
+```
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index e48660c8e08f..53d474bfb74c 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -85,6 +85,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 <CodeSnippets
   paths={[
     'react/button-story.with-hooks.js.mdx',
+    'react/button-story.with-hooks.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
@@ -271,7 +272,6 @@ For instance, suppose you wanted to test your Button component against a differe
 
 <!-- prettier-ignore-end -->
 
-
 ![Parameters background color](./parameters-background-colors.png)
 
 This parameter would instruct the backgrounds addon to reconfigure itself whenever a Button story is selected. Most addons are configured via a parameter-based API and can be influenced at a [global](./parameters.md#global-parameters), [component](./parameters.md#component-parameters) and [story](./parameters.md#story-parameters) level.

From 7fb40be23a45b8c3398a925e0e9c138cedf7658b Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 18 Apr 2023 19:07:56 +0100
Subject: [PATCH 2/2] Ran pretty-docs

---
 docs/snippets/react/button-story.with-hooks.ts-4-9.mdx | 4 ++--
 docs/snippets/react/button-story.with-hooks.ts.mdx     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
index 85bdd6e903e1..486cc3b59644 100644
--- a/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
+++ b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -12,7 +12,7 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Button',
-  component: Button
+  component: Button,
 } satisfies Meta<typeof Button>;
 export default meta;
 
diff --git a/docs/snippets/react/button-story.with-hooks.ts.mdx b/docs/snippets/react/button-story.with-hooks.ts.mdx
index 67636adf85a3..cc5df8a2289d 100644
--- a/docs/snippets/react/button-story.with-hooks.ts.mdx
+++ b/docs/snippets/react/button-story.with-hooks.ts.mdx
@@ -2,7 +2,7 @@
 // Button.stories.ts|tsx
 
 import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';