Merge pull request #32231 from storybookjs/docs_snippets_fix_incorrect_csf_constructs

Docs: Fix incorrect CSF constructs

Author: jonniebigodes

docs/_snippets/my-component-exclude-tags.md

@@ -1,9 +1,30 @@
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="story"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MyComponent } from './MyComponent.component';
+
+const meta: Meta<MyComponent> = {
+  component: MyComponent,
+  //👇 Provides the `no-tests` tag to all stories in this file
+  tags: ['no-tests'],
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const ExcludeStory: Story = {
+  //👇 Adds the `no-tests` tag to this story to exclude it from the tests when enabled in the test-runner configuration
+  tags: ['no-tests'],
+};
+```
+
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
 export default {
   component: MyComponent,
-  tags: ['no-tests'], // 👈 Provides the `no-tests` tag to all stories in this file
+  //👇 Provides the `no-tests` tag to all stories in this file
+  tags: ['no-tests'],
 };
 
 export const ExcludeStory = {
@@ -12,19 +33,20 @@ export const ExcludeStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="story"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { MyComponent } from './MyComponent';
 
-const meta: Meta<typeof MyComponent> = {
+const meta = {
   component: MyComponent,
-  tags: ['no-tests'], // 👈 Provides the `no-tests` tag to all stories in this file
-};
+  //👇 Provides the `no-tests` tag to all stories in this file
+  tags: ['no-tests'],
+} satisfies Meta<typeof MyComponent>;
 
 export default meta;
-type Story = StoryObj<typeof MyComponent>;
+type Story = StoryObj<typeof meta>;
 
 export const ExcludeStory: Story = {
   //👇 Adds the `no-tests` tag to this story to exclude it from the tests when enabled in the test-runner configuration

docs/_snippets/my-component-include-tags.md

@@ -1,9 +1,30 @@
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="story"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MyComponent } from './MyComponent.component';
+
+const meta: Meta<MyComponent> = {
+  component: MyComponent,
+  //👇 Provides the `test-only` tag to all stories in this file
+  tags: ['test-only'],
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const IncludeStory: Story = {
+  //👇 Adds the `test-only` tag to this story to be included in the tests when enabled in the test-runner configuration
+  tags: ['test-only'],
+};
+```
+
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
 export default {
   component: MyComponent,
-  tags: ['test-only'], // 👈 Provides the `test-only` tag to all stories in this file
+  //👇 Provides the `test-only` tag to all stories in this file
+  tags: ['test-only'],
 };
 
 export const IncludeStory = {
@@ -12,19 +33,20 @@ export const IncludeStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="story"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { MyComponent } from './MyComponent';
 
-const meta: Meta<typeof MyComponent> = {
+const meta = {
   component: MyComponent,
-  tags: ['test-only'], // 👈 Provides the `test-only` tag to all stories in this file
-};
+  //👇 Provides the `test-only` tag to all stories in this file
+  tags: ['test-only'],
+} satisfies Meta<typeof MyComponent>;
 
 export default meta;
-type Story = StoryObj<typeof MyComponent>;
+type Story = StoryObj<typeof meta>;
 
 export const IncludeStory: Story = {
   //👇 Adds the `test-only` tag to this story to be included in the tests when enabled in the test-runner configuration

docs/_snippets/my-component-skip-tags.md

@@ -1,9 +1,30 @@
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js" tabTitle="story"
+```ts filename="MyComponent.stories.ts" renderer="angular" language="ts"
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MyComponent } from './MyComponent.component';
+
+const meta: Meta<MyComponent> = {
+  component: MyComponent,
+  //👇 Provides the `skip-test` tag to all stories in this file
+  tags: ['skip-test'],
+};
+
+export default meta;
+type Story = StoryObj<MyComponent>;
+
+export const SkipStory: Story = {
+  //👇 Adds the `skip-test` tag to this story to allow it to be skipped in the tests when enabled in the test-runner configuration
+  tags: ['skip-test'],
+};
+```
+
+```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
 export default {
   component: MyComponent,
-  tags: ['skip-test'], // 👈 Provides the `skip-test` tag to all stories in this file
+  //👇 Provides the `skip-test` tag to all stories in this file
+  tags: ['skip-test'],
 };
 
 export const SkipStory = {
@@ -12,19 +33,20 @@ export const SkipStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts" tabTitle="story"
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { MyComponent } from './MyComponent';
 
-const meta: Meta<typeof MyComponent> = {
+const meta = {
   component: MyComponent,
-  tags: ['skip-test'], // 👈 Provides the `skip-test` tag to all stories in this file
-};
+  //👇 Provides the `skip-test` tag to all stories in this file
+  tags: ['skip-test'],
+} satisfies Meta<typeof MyComponent>;
 
 export default meta;
-type Story = StoryObj<typeof MyComponent>;
+type Story = StoryObj<typeof meta>;
 
 export const SkipStory: Story = {
   //👇 Adds the `skip-test` tag to this story to allow it to be skipped in the tests when enabled in the test-runner configuration

docs/_snippets/play-function.md

@@ -6,8 +6,8 @@ import { RegistrationForm } from './RegistrationForm.component';
 const meta: Meta<RegistrationForm> = {
   component: RegistrationForm,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<RegistrationForm>;
 
 /*
@@ -197,8 +197,8 @@ import RegistrationForm from './RegistrationForm.svelte';
 const meta = {
   component: RegistrationForm,
 } satisfies Meta<typeof RegistrationForm>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 /*
@@ -235,12 +235,12 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { RegistrationForm } from './RegistrationForm';
 
-const meta: Meta<typeof RegistrationForm> = {
+const meta = {
   component: RegistrationForm,
-};
-export default meta;
+} satisfies Meta<typeof RegistrationForm>;
 
-type Story = StoryObj<typeof RegistrationForm>;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 /*
  * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
@@ -309,8 +309,8 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 const meta: Meta = {
   component: 'demo-registration-form',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 /*