Docs: Adds conditional render write stories

docs/addons/addons-api.md

@@ -277,7 +277,7 @@ To help streamline addon development and reduce boilerplate code, the API expose
 
 ### useStorybookState
 
-It allows access to Storybook's internal state. Similar to the [`useglobals`](#useglobals) hook, we recommend optimizing your addon to rely on [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo), or the following hooks; [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo), [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) to prevent a high volume of re-render cycles.
+It allows access to Storybook's internal state. Similar to the [`useglobals`](#useglobals) hook, we recommend optimizing your addon to rely on [`React.memo`](https://react.dev/reference/react/memo), or the following hooks; [`useMemo`](https://react.dev/reference/react/useMemo), [`useCallback`](https://react.dev/reference/react/useCallback) to prevent a high volume of re-render cycles.
 
 <!-- prettier-ignore-start -->
 
@@ -349,7 +349,7 @@ The `useParameter` retrieves the current story's parameters. If the parameter's
 
 ### useGlobals
 
-Extremely useful hook for addons that rely on Storybook [Globals](../essentials/toolbars-and-globals.md). It allows you to obtain and update `global` values. We also recommend optimizing your addon to rely on [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo), or the following hooks; [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo), [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) to prevent a high volume of re-render cycles.
+Extremely useful hook for addons that rely on Storybook [Globals](../essentials/toolbars-and-globals.md). It allows you to obtain and update `global` values. We also recommend optimizing your addon to rely on [`React.memo`](https://react.dev/reference/react/memo), or the following hooks; [`useMemo`](https://react.dev/reference/react/useMemo), [`useCallback`](https://react.dev/reference/react/useCallback) to prevent a high volume of re-render cycles.
 
 <!-- prettier-ignore-start -->
 

docs/snippets/react/button-story.with-hooks.ts-4-9.mdx

@@ -2,15 +2,16 @@
 // Button.stories.ts|tsx
 
 import React, { useState } from 'react';
+
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 /*

docs/snippets/react/button-story.with-hooks.ts.mdx

@@ -1,16 +1,17 @@
-```js
+```tsx
 // Button.stories.ts|tsx
 
 import React, { useState } from 'react';
+
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 /*

docs/snippets/solid/button-story.with-hooks.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|ts|jsx|tsx
+// Button.stories.js|jsx
 
 import { createSignal } from 'solid-js';
 

docs/snippets/solid/button-story.with-hooks.ts-4-9.mdx

@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { createSignal } from 'solid-js';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ * Example Button story with Solid Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = createSignal('Secondary');
+  const [isPrimary, setIsPrimary] = createSignal(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;
+```

docs/snippets/solid/button-story.with-hooks.ts.mdx

@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { createSignal } from 'solid-js';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+/*
+ * Example Button story with Solid Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = createSignal('Secondary');
+  const [isPrimary, setIsPrimary] = createSignal(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 />,
+};
+```

docs/writing-stories/introduction.md

@@ -80,9 +80,11 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 
 <!-- prettier-ignore-end -->
 
+<IfRenderer renderer='react'>
+
 #### Working with React Hooks
 
-[React Hooks](https://reactjs.org/docs/hooks-intro.html) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state :
+[React Hooks](https://react.dev/reference/react) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses React Hooks to change the button's state:
 
 <!-- prettier-ignore-start -->
 
@@ -101,6 +103,33 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 💡 The recommendation mentioned above also applies to other frameworks, not only React.
 </div>
 
+</IfRenderer>
+
+<IfRenderer renderer='solid'>
+
+#### Working with Solid Signals
+
+[Solid Signals](https://www.solidjs.com/docs/latest/api#basic-reactivity) are convenient helper methods to create components using a more streamlined approach. You can use them while creating your component's stories if you need them, although you should treat them as an advanced use case. We **recommend** [args](./args.md) as much as possible when writing your own stories. As an example, here’s a story that uses Solid Signals to change the button's state:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'solid/button-story.with-hooks.js.mdx',
+    'solid/button-story.with-hooks.ts.mdx',
+  ]}
+  usesCsf3
+  csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+💡 The recommendation mentioned above also applies to other frameworks, not only Solid.
+</div>
+
+</IfRenderer>
+
 ### Rename stories
 
 You can rename any particular story you need. For instance, to give it a more accurate name. Here's how you can change the name of the `Primary` story: