Chore: (Docs) Updates to code snippets and docs

docs/contribute/new-snippets.md

@@ -10,13 +10,9 @@ Storybook maintains code snippets for a [variety of frameworks](./../api/framewo
 
 We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework.
 
-| React                                                                        | Vue                                                                        | Angular                                                                        | Web Components                                                                                    | Svelte                                                                        | Ember | HTML | Preact |
-| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----- | ---- | ------ |
-| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) (See below) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | ❌    | ❌   | ❌     |
-
-<div class="aside">
-💡 The <code>Web Components</code> snippets are present but not fully documented. If you're willing to help, submit a pull request.
-</div>
+| React                                                                        | Vue                                                                        | Angular                                                                        | Web Components                                                                        | Svelte                                                                        | Ember | HTML | Preact |
+| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----- | ---- | ------ |
+| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | ❌    | ❌   | ❌     |
 
 ## Setup
 

docs/essentials/controls.md

@@ -123,6 +123,7 @@ Until now, we only used auto-generated controls based on the component we're wri
 <CodeSnippets
   paths={[
     'react/table-story-fully-customize-controls.js.mdx',
+    'react/table-story-fully-customize-controls.ts.mdx',
     'vue/table-story-fully-customize-controls.2.js.mdx',
     'vue/table-story-fully-customize-controls.ts-2.ts.mdx',
     'vue/table-story-fully-customize-controls.3.js.mdx',

docs/snippets/react/document-screen-with-graphql.js.mdx

@@ -1,7 +1,5 @@
 ```js
-// YourPage.js|jsx|ts|tsx
-
-import React from 'react';
+// YourPage.js|jsx
 
 import { useQuery, gql } from '@apollo/client';
 

docs/snippets/react/document-screen-with-graphql.ts.mdx

@@ -0,0 +1,81 @@
+```ts
+// YourPage.ts|tsx
+
+import { useQuery, gql } from '@apollo/client';
+
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
+
+const AllInfoQuery = gql`
+  query AllInfo {
+    user {
+      userID
+      name
+    }
+    document {
+      id
+      userID
+      title
+      brief
+      status
+    }
+    subdocuments {
+      id
+      userID
+      title
+      content
+      status
+    }
+  }
+`;
+
+interface Data {
+  AllInfo: {
+    user: {
+      userID: number;
+      name: string;
+      opening_crawl: boolean;
+    };
+    document: {
+      id: number;
+      userID: number;
+      title: string;
+      brief: string;
+      status: string;
+    };
+    subdocuments: {
+      id: number;
+      userID: number;
+      title: string;
+      content: string;
+      status: string;
+    };
+  };
+}
+
+function useFetchInfo() {
+  const { loading, error, data } = useQueryuseQuery<Data>(AllInfoQuery);
+
+  return { loading, error, data };
+}
+
+export function DocumentScreen() {
+  const { loading, error, data } = useFetchInfo();
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p>There was an error fetching the data!</p>;
+  }
+
+  return (
+    <PageLayout user={data.user}>
+      <DocumentHeader document={data.document} />
+      <DocumentList documents={data.subdocuments} />
+    </PageLayout>
+  );
+}
+```

docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx

@@ -1,7 +1,5 @@
 ```js
-// YourPage.stories.js|jsx|ts|tsx
-
-import React from 'react';
+// YourPage.stories.js|jsx
 
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 

docs/snippets/react/documentscreen-story-msw-graphql-query.ts.mdx

@@ -0,0 +1,126 @@
+```js
+// YourPage.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+
+import { graphql } from 'msw';
+
+import { DocumentScreen } from './YourPage';
+
+const mockedClient = new ApolloClient({
+  uri: 'https://your-graphql-endpoint',
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+});
+
+//👇The mocked data that will be used in the story
+const TestData = {
+  user: {
+    userID: 1,
+    name: 'Someone',
+  },
+  document: {
+    id: 1,
+    userID: 1,
+    title: 'Something',
+    brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    status: 'approved',
+  },
+  subdocuments: [
+    {
+      id: 1,
+      userID: 1,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 2,
+      userID: 1,
+      title: 'Something else',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'awaiting review',
+    },
+    {
+      id: 3,
+      userID: 2,
+      title: 'Another document',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+    {
+      id: 4,
+      userID: 2,
+      title: 'Something',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      status: 'approved',
+    },
+  ],
+};
+const meta: Meta<typeof DocumentScreen> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
+  component: DocumentScreen,
+  decorators: [
+    (Story) => (
+      <ApolloProvider client={mockedClient}>
+        <Story />
+      </ApolloProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof SampleComponent>;
+
+export const MockedSuccess: Story = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.data({
+            allFilms: {
+              films,
+            },
+          })
+        );
+      }),
+    ],
+  },
+};
+
+export const MockedError: Story = {
+  parameters: {
+    msw: [
+      graphql.query('AllInfoQuery', (req, res, ctx) => {
+        return res(
+          ctx.delay(800),
+          ctx.errors([
+            {
+              message: 'Access denied',
+            },
+          ])
+        );
+      }),
+    ],
+  },
+};
+```

docs/snippets/react/loader-story.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// TodoItem.stories.js|jsx|ts|tsx
+// TodoItem.stories.js|jsx
 
 import React from 'react';
 

docs/snippets/react/loader-story.ts.mdx

@@ -0,0 +1,32 @@
+```tsx
+// MyComponent.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import fetch from 'node-fetch';
+
+import { TodoItem } from './TodoItem';
+
+const meta: Meta<typeof TodoItem> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Examples/Loader'
+  component: TodoItem,
+  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
+};
+
+export default meta;
+type Story = StoryObj<typeof TodoItem>;
+
+export const Primary: Story = {
+  loaders: [
+    async () => ({
+      todo: await (
+        await fetch('https://jsonplaceholder.typicode.com/todos/1')
+      ).json(),
+    }),
+  ],
+};
+```

docs/snippets/react/table-story-fully-customize-controls.js.mdx

@@ -1,5 +1,5 @@
 ```js
-// Table.stories.js|jsx!ts!tsx
+// Table.stories.js|jsx
 
 import React from 'react';
 

docs/snippets/react/table-story-fully-customize-controls.ts.mdx

@@ -0,0 +1,44 @@
+```ts
+// Table.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table } from './Table';
+import { TD } from './TableDataCell';
+import { TR } from './TableRow';
+
+const meta: Meta<typeof Table> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Custom Table',
+  component: Table,
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const TableStory: Story = {
+  render: ({ data, ...args }) => (
+    <Table {...args}>
+      {data.map((row) => (
+        <TR>
+          {row.map((item) => (
+            <TD>{item}</TD>
+          ))}
+        </TR>
+      ))}
+    </Table>
+  ),
+  args: {
+    //👇 This arg is for the story component
+    data: [
+      [1, 2, 3],
+      [4, 5, 6],
+    ],
+    //👇 The remaining args get passed to the `Table` component
+    size: 'large',
+  },
+};
+```

docs/snippets/vue/button-component-with-proptypes.ts-2.ts.mdx

@@ -0,0 +1,30 @@
+```html
+<!-- Button.vue -->
+
+<template>
+  <button type="button" :disabled="isDisabled">{{ label }}</button>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  export default Vue.extend({
+    name: 'button',
+    props: {
+      /**
+       * Checks if the button should be disabled
+       */
+      label: {
+        type: String,
+        default: 'One',
+      },
+      /**
+       * The display label of the button
+       */
+      isDisabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  });
+</script>
+```