Merge pull request #17658 from fbredius/preact-code-snippet

Docs: Add remaining Preact code snippets for Get-Started section

docs/get-started/setup.md

@@ -25,6 +25,7 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'web-components/your-component.js.mdx',
     'html/your-component.js.mdx',
     'html/your-component.ts.mdx',
+    'preact/your-component.js.mdx',
   ]}
 />
 

docs/get-started/whats-a-story.md

@@ -58,6 +58,7 @@ The above story definition can be further improved to take advantage of [Storybo
     'svelte/button-story-with-args.mdx.mdx',
     'html/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',
+    'preact/button-story-with-args.js.mdx',
   ]}
 />
 

docs/snippets/preact/button-story-with-args.js.mdx

@@ -0,0 +1,26 @@
+```js
+// Button.stories.js|jsx
+
+/** @jsx h */
+import { h } from 'preact';
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+  component: Button,
+}
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <Button {...args} />;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+```

docs/snippets/preact/your-component.js.mdx

@@ -0,0 +1,26 @@
+```js
+// YourComponent.stories.js|jsx
+
+/** @jsx h */
+import { h } from 'preact';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'YourComponent',
+  component: YourComponent,
+}
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <YourComponent {...args} />;
+
+export const FirstStory = Template.bind({});
+FirstStory.args = {
+  //👇 The args you need here will depend on your component
+};
+```