minor updates to the addons docs for 6.4

docs/addons/writing-addons.md

@@ -187,6 +187,7 @@ When Storybook was initialized, it provided a small set of example stories. Chan
 <CodeSnippets
   paths={[
     'react/button-story-with-addon-example.js.mdx',
+    'react/button-story-with-addon-example.ts.mdx',
     'vue/button-story-with-addon-example.js.mdx',
     'angular/button-story-with-addon-example.ts.mdx',
     'svelte/button-story-with-addon-example.js.mdx',

docs/addons/writing-presets.md

@@ -68,17 +68,16 @@ For example, here is how Storybook automatically adopts `create-react-app`'s con
 
 As of Storybook 6.3, Storybook can run with either `webpack4` or `webpack5` builder. If your addon needs to know which version of Webpack it's running inside, the version and the actual webpack instance itself are both available inside your preset:
 
-```js
-// .storybook/main.js
+<!-- prettier-ignore-start -->
 
-export function webpackFinal(config, { presets }) {
-  const version = await presets.apply('webpackVersion');
-  const instance = (await presets.apply('webpackInstance'))?.default;
+<CodeSnippets
+  paths={[
+    'common/storybook-main-versioned-webpack.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
-  logger.info(`=> Running in webpack ${version}: ${instance}`);
-  return config;
-}
-```
 
 ### Manager entries
 
@@ -110,30 +109,32 @@ This is equivalent to [registering the addon manually](../get-started/browse-sto
 
 ### Preview entries
 
-The addon config `config` allows you to add extra preview configuration from within a preset, for example to add parameters or decorators from an addon.
+The addon `config` function allows you to add extra preview configuration from within a preset, for example to add parameters or decorators from an addon.
 
 For example, the Backgrounds preset contains the following code:
 
-```js
-// preset.js
-export function config(entry = []) {
-  return [...entry, require.resolve('./defaultParameters')];
-}
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-backgrounds-preset-config.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 
 Which in turn invokes:
 
-```js
-// defaultParameters.js
-export const parameters = {
-  backgrounds: {
-    values: [
-      { name: 'light', value: '#F8F8F8' },
-      { name: 'dark', value: '#333333' },
-    ],
-  },
-};
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-backgrounds-addon-default-params.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 This is equivalent to exporting the `backgrounds` parameter manually in `main.js`.
 

docs/snippets/angular/button-story-with-addon-example.ts.mdx

@@ -1,9 +1,16 @@
 ```ts
 // Button.stories.ts
 
+import { Meta, Story } from '@storybook/angular';
+
 import { Button } from './button.component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   component: Button,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -11,11 +18,9 @@ export default {
       data: 'this data is passed to the addon',
     },
   },
-};
+} as Meta;
 
-export const Basic = {
-  render: () => ({
-    template: `<app-button>hello</<app-button>`,
-  }),
-};
-```
+export const Basic: Story = () => ({
+   template: `<app-button>hello</<app-button>`,
+});
+```

docs/snippets/common/storybook-backgrounds-addon-default-params.js.mdx

@@ -0,0 +1,12 @@
+```js
+// addons/backgrounds/src/preset/addParameter.tsx
+
+export const parameters = {
+  backgrounds: {
+    values: [
+      { name: 'light', value: '#F8F8F8' },
+      { name: 'dark', value: '#333333' },
+    ],
+  },
+};
+```

docs/snippets/common/storybook-backgrounds-preset-config.js.mdx

@@ -0,0 +1,7 @@
+```js
+// preset.js
+
+export function config(entry = []) {
+  return [...entry, require.resolve('./defaultParameters')];
+}
+```

docs/snippets/common/storybook-main-versioned-webpack.js.mdx

@@ -0,0 +1,11 @@
+```js
+// .storybook/main.js
+
+export function webpackFinal(config, { presets }) {
+  const version = await presets.apply('webpackVersion');
+  const instance = (await presets.apply('webpackInstance'))?.default;
+
+  logger.info(`=> Running in webpack ${version}: ${instance}`);
+  return config;
+}
+```

docs/snippets/react/button-story-with-addon-example.js.mdx

@@ -1,11 +1,16 @@
 ```js
-// Button.stories.js | Button.stories.jsx
+// Button.stories.js|jsx
 
 import React from 'react';
 
 import { Button } from './Button';
 
 export default {
+  /* 👇 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,
   //👇 Creates specific parameters for the story
   parameters: {
@@ -15,7 +20,5 @@ export default {
   },
 };
 
-export const Basic = {
-  render: () => <Button>hello</Button>,
-};
+export const Basic = () => <Button>hello</Button>;
 ```

docs/snippets/react/button-story-with-addon-example.ts.mdx

@@ -0,0 +1,26 @@
+```ts
+// Button.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 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,
+  //👇 Creates specific parameters for the story
+  parameters: {
+    myAddon: {
+      data: 'this data is passed to the addon',
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const Basic: ComponentStory<typeof Button> = () => <Button>hello</Button>;
+```

docs/snippets/svelte/button-story-with-addon-example.js.mdx

@@ -4,6 +4,11 @@
 import Button from './Button.svelte';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   //👇 Creates specific parameters for the story
   parameters: {
     myAddon: {
@@ -12,10 +17,7 @@ export default {
   },
 };
 
-export const Basic = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
-};
-```
+export const Basic = () => ({
+  Component: Button,
+});
+```

docs/snippets/vue/button-story-with-addon-example.js.mdx

@@ -4,6 +4,11 @@
 import Button from './Button.vue';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
   //👇 Creates specific parameters for the story
   parameters: {
     myAddon: {
@@ -12,10 +17,8 @@ export default {
   },
 };
 
-export const Basic = {
-  render: () => ({
-    components: { Button },
+export const Basic = () => ({
+  components: { Button },
     template: '<Button label="Hello" />',
-  }),
-};
-```
+});
+```