Merge pull request storybookjs#15528 from storybookjs/chore_updates_b…

…uild_pages_docs

Chore: (Docs) Polish the Workflows-Build pages documentation

docs/snippets/angular/apollo-module.mock-apollo-module.ts.mdx

@@ -0,0 +1,39 @@
+```ts
+// mock-graphql.module.ts
+
+import { NgModule } from '@angular/core';
+import { APOLLO_OPTIONS } from 'apollo-angular';
+import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
+import { HttpLink } from 'apollo-angular/http';
+
+// See here for docs https://apollo-angular.com/docs/get-started
+
+const uri = 'https://your-graphql-endpoint';
+export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
+  return {
+    link: httpLink.create({ uri }),
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  };
+}
+
+@NgModule({
+  providers: [
+    {
+      provide: APOLLO_OPTIONS,
+      useFactory: createApollo,
+      deps: [HttpLink],
+    },
+  ],
+})
+export class MockGraphQLModule {}
+```

docs/snippets/angular/document-screen-fetch.ts.mdx

@@ -0,0 +1,48 @@
+```ts
+// YourPage.component.ts
+
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'document-screen',
+  template: `
+    <div>
+      <div *ngIf="error"><p>There was an error fetching the data!</p></div>
+      <div *ngIf="loading"><p>Loading...</p></div>
+      <div *ngIf="!loading && subdocuments.length > 0">
+        <page-layout [user]="user">
+          <document-header [document]="document"></document-header>
+          <document-list [documents]="subdocuments"></document-list>
+        </page-layout>
+      </div>
+    </div>
+  `,
+})
+export default class DocumentScreen implements OnInit {
+  user: any = { id: 0, name: 'Some User' };
+
+  document: any = { id: 0, title: 'Some Title' };
+
+  subdocuments: any = [];
+
+  error = false;
+  loading = true;
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit() {
+    this.http.get<any>('https://your-restful-endpoint').subscribe({
+      next: (data) => {
+        this.loading = false;
+        this.user = data.user;
+        this.document = data.document;
+        this.documents.data.subdocuments;
+      },
+      error: (error) => {
+        this.error = true;
+      },
+    });
+  }
+}
+```

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

@@ -0,0 +1,69 @@
+```ts
+// YourPage.component.ts
+
+import { Component, OnInit } from '@angular/core';
+import { Apollo } from 'apollo-angular';
+import gql from 'graphql-tag';
+
+@Component({
+  selector: 'document-screen',
+  template: `
+    <div *ngIf="loading">Loading...</div>
+    <div *ngIf="error">There was an error fetching the data!</div>
+    <div *ngIf="!loading && subdocuments.length > 0">
+      <page-layout [user]="user">
+        <document-header [document]="document"></document-header>
+        <document-list [documents]="subdocuments"></document-list>
+      </page-layout>
+    </div>
+  `,
+})
+export class SampleGraphqlComponent implements OnInit {
+  user: any = { id: 0, name: 'Some User' };
+
+  document: any = { id: 0, title: 'Some Title' };
+
+  subdocuments: any = [];
+
+  error = '';
+  loading = true;
+
+  constructor(private apollo: Apollo) {}
+  ngOnInit() {
+    this.apollo
+      .watchQuery({
+        query: gql`
+          query AllInfoQuery {
+            user {
+              userID
+              name
+            }
+            document {
+              id
+              userID
+              title
+              brief
+              status
+            }
+            subdocuments {
+              id
+              userID
+              title
+              content
+              status
+            }
+          }
+        `,
+      })
+      .valueChanges.subscribe((result: any) => {
+        this.user = result?.data?.user;
+        this.document = result?.data?.document;
+        this.subdocuments = result?.data?.subdocuments;
+        this.loading = result.loading;
+
+        // Errors is an array and we're getting the first item only
+        this.error = result.errors[0].message;
+      });
+  }
+}
+```

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

@@ -0,0 +1,106 @@
+```ts
+// YourPage.stories.ts
+
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+
+import { Story, Meta, moduleMetadata } from '@storybook/angular';
+
+import { graphql } from 'msw';
+
+import DocumentScreen from './YourPage.component';
+import DocumentList from './DocumentList.component';
+import DocumentHeader from './DocumentHeader.component';
+import PageLayout from './PageLayout.component';
+
+import { MockGraphQLModule } from './mock-graphql.module';
+
+export default {
+  component: DocumentScreen,
+  decorators: [
+    moduleMetadata({
+      declarations: [DocumentList, DocumentHeader, PageLayout],
+      imports: [CommonModule, HttpClientModule, MockGraphQLModule],
+    }),
+  ],
+  title: 'Mock GraphQL query with Storybook and MSW',
+} as Meta;
+
+//👇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 PageTemplate: Story<DocumentScreen> = (args) => ({
+  props: args,
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
+};
+```

docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx

@@ -0,0 +1,97 @@
+```ts
+// YourPage.stories.ts
+
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+
+import { Story, Meta, moduleMetadata } from '@storybook/angular';
+
+import { rest } from 'msw';
+
+import DocumentScreen from './YourPage.component';
+import DocumentList from './DocumentList.component';
+import DocumentHeader from './DocumentHeader.component';
+import PageLayout from './PageLayout.component';
+
+export default {
+  component: DocumentScreen,
+  decorators: [
+    moduleMetadata({
+      declarations: [DocumentList, DocumentHeader, PageLayout],
+      imports: [CommonModule, HttpClientModule],
+    }),
+  ],
+  title: 'Mock Rest request with Storybook and MSW',
+} as Meta;
+
+//👇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 PageTemplate: Story<DocumentScreen> = (args) => ({
+  props: args,
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
+};
+
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
+};
+```