chore(examples): refresh cms-prismic example (#40121)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

**Note**: `pnpm lint` fails on code unrelated to the changes in this PR.

This PR updates the [Prismic](https://prismic.io/) CMS example
(`examples/cms-prismic`) to use the latest Prismic libraries, tools, and
conventions.

- Uses `npx @slicemachine/init` to bootstrap new Prismic accounts and
content repositories.

- Uses [Slice
Machine](https://prismic.io/docs/technologies/slice-machine) to model
content.

- Uses [Slices](https://prismic.io/docs/technologies/slice) to write
post content.

- Uses the latest versions of the following packages:

  - `@prismicio/client`
  - `@prismicio/helpers`
  - `@prismicio/react`
  - `@prismicio/next`

- Adds generated TypeScript types for Prismic content. The example
remains as a JavaScript codebase (i.e. not TypeScript), but makes use of
the types via JSDoc.

Co-authored-by: Balázs Orbán <[email protected]>

examples/cms-prismic/.slicemachine/assets/customtypes/author/mocks.json

@@ -0,0 +1,31 @@
+{
+  "id": "mock-doc-id",
+  "url": null,
+  "type": "author",
+  "href": null,
+  "tags": [],
+  "first_publication_date": "1970-01-01T00:00:01+0000",
+  "last_publication_date": "1970-01-01T00:00:01+0000",
+  "slugs": [],
+  "linked_documents": [],
+  "lang": "en-us",
+  "alternate_languages": [],
+  "data": {
+    "name": [
+      {
+        "type": "heading1",
+        "text": "Border",
+        "spans": []
+      }
+    ],
+    "picture": {
+      "dimensions": {
+        "width": 900,
+        "height": 500
+      },
+      "alt": null,
+      "copyright": null,
+      "url": "https://images.unsplash.com/photo-1587614295999-6c1c13675117"
+    }
+  }
+}

examples/cms-prismic/.slicemachine/assets/customtypes/post/mocks.json

@@ -0,0 +1,44 @@
+{
+  "id": "mock-doc-id",
+  "url": null,
+  "type": "post",
+  "href": null,
+  "tags": [],
+  "first_publication_date": "1970-01-01T00:00:01+0000",
+  "last_publication_date": "1970-01-01T00:00:01+0000",
+  "slugs": [],
+  "linked_documents": [],
+  "lang": "en-us",
+  "alternate_languages": [],
+  "data": {
+    "title": [
+      {
+        "type": "heading1",
+        "text": "Shine",
+        "spans": []
+      }
+    ],
+    "date": "2014-07-30",
+    "author": {
+      "id": "mock_document_id",
+      "link_type": "Document",
+      "type": "author",
+      "tags": [],
+      "lang": "en-us",
+      "slug": null,
+      "first_publication_date": "1970-01-01T00:00:01+0000",
+      "last_publication_date": "1970-01-01T01:00:00+0000"
+    },
+    "excerpt": "knew",
+    "cover_image": {
+      "dimensions": {
+        "width": 900,
+        "height": 500
+      },
+      "alt": null,
+      "copyright": null,
+      "url": "https://images.unsplash.com/photo-1587614295999-6c1c13675117"
+    },
+    "slices": []
+  }
+}

examples/cms-prismic/.slicemachine/assets/slices/Image/index.stories.js

@@ -0,0 +1,26 @@
+import MyComponent from '../../../../slices/Image'
+
+export default {
+  title: 'slices/Image',
+}
+
+export const _Default = () => (
+  <MyComponent
+    slice={{
+      variation: 'default',
+      version: 'sktwi1xtmkfgx8626',
+      items: [{}],
+      primary: {
+        image: {
+          dimensions: { width: 900, height: 500 },
+          alt: null,
+          copyright: null,
+          url: 'https://images.unsplash.com/photo-1493397212122-2b85dda8106b',
+        },
+      },
+      slice_type: 'image',
+      id: '_Default',
+    }}
+  />
+)
+_Default.storyName = ''

examples/cms-prismic/.slicemachine/assets/slices/Image/mocks.json

@@ -0,0 +1,19 @@
+[
+  {
+    "variation": "default",
+    "version": "sktwi1xtmkfgx8626",
+    "items": [{}],
+    "primary": {
+      "image": {
+        "dimensions": {
+          "width": 900,
+          "height": 500
+        },
+        "alt": null,
+        "copyright": null,
+        "url": "https://images.unsplash.com/photo-1493397212122-2b85dda8106b"
+      }
+    },
+    "slice_type": "image"
+  }
+]

examples/cms-prismic/.slicemachine/assets/slices/Text/index.stories.js

@@ -0,0 +1,42 @@
+import MyComponent from '../../../../slices/Text'
+
+export default {
+  title: 'slices/Text',
+}
+
+export const _Default = () => (
+  <MyComponent
+    slice={{
+      variation: 'default',
+      version: 'sktwi1xtmkfgx8626',
+      items: [{}],
+      primary: {
+        text: [
+          {
+            type: 'paragraph',
+            text: 'Pariatur consequat eu eiusmod cillum velit excepteur ex sit sit dolore dolor labore ullamco.',
+            spans: [],
+          },
+          {
+            type: 'paragraph',
+            text: 'Et nisi elit dolor pariatur pariatur nisi non est cillum aute.',
+            spans: [],
+          },
+          {
+            type: 'paragraph',
+            text: 'Officia deserunt sunt ad ut anim quis.',
+            spans: [],
+          },
+          {
+            type: 'paragraph',
+            text: 'Est consequat enim id quis consectetur exercitation reprehenderit. Nulla ut ut consequat ipsum nulla duis consequat nostrud eiusmod eiusmod ex incididunt consequat consequat minim. Esse adipisicing ullamco officia incididunt excepteur dolor nisi magna incididunt adipisicing anim.',
+            spans: [],
+          },
+        ],
+      },
+      slice_type: 'text',
+      id: '_Default',
+    }}
+  />
+)
+_Default.storyName = ''

examples/cms-prismic/.slicemachine/assets/slices/Text/mocks.json

@@ -0,0 +1,32 @@
+[
+  {
+    "variation": "default",
+    "version": "sktwi1xtmkfgx8626",
+    "items": [{}],
+    "primary": {
+      "text": [
+        {
+          "type": "paragraph",
+          "text": "Pariatur consequat eu eiusmod cillum velit excepteur ex sit sit dolore dolor labore ullamco.",
+          "spans": []
+        },
+        {
+          "type": "paragraph",
+          "text": "Et nisi elit dolor pariatur pariatur nisi non est cillum aute.",
+          "spans": []
+        },
+        {
+          "type": "paragraph",
+          "text": "Officia deserunt sunt ad ut anim quis.",
+          "spans": []
+        },
+        {
+          "type": "paragraph",
+          "text": "Est consequat enim id quis consectetur exercitation reprehenderit. Nulla ut ut consequat ipsum nulla duis consequat nostrud eiusmod eiusmod ex incididunt consequat consequat minim. Esse adipisicing ullamco officia incididunt excepteur dolor nisi magna incididunt adipisicing anim.",
+          "spans": []
+        }
+      ]
+    },
+    "slice_type": "text"
+  }
+]

examples/cms-prismic/.slicemachine/libraries-state.json

@@ -0,0 +1,140 @@
+{
+  "slices": {
+    "components": {
+      "image": {
+        "library": "slices",
+        "id": "image",
+        "name": "Image",
+        "description": "Image",
+        "model": {
+          "id": "image",
+          "type": "SharedSlice",
+          "name": "Image",
+          "description": "Image",
+          "variations": [
+            {
+              "id": "default",
+              "name": "Default",
+              "docURL": "...",
+              "version": "sktwi1xtmkfgx8626",
+              "description": "Image",
+              "primary": {
+                "image": {
+                  "type": "Image",
+                  "config": {
+                    "label": "Image",
+                    "constraint": {},
+                    "thumbnails": []
+                  }
+                }
+              },
+              "items": {},
+              "imageUrl": "https://images.prismic.io/slice-machine/621a5ec4-0387-4bc5-9860-2dd46cbc07cd_default_ss.png?auto=compress,format"
+            }
+          ]
+        },
+        "mocks": {
+          "default": {
+            "variation": "default",
+            "version": "sktwi1xtmkfgx8626",
+            "items": [{}],
+            "primary": {
+              "image": {
+                "dimensions": {
+                  "width": 900,
+                  "height": 500
+                },
+                "alt": null,
+                "copyright": null,
+                "url": "https://images.unsplash.com/photo-1493397212122-2b85dda8106b"
+              }
+            },
+            "slice_type": "image"
+          }
+        },
+        "meta": {
+          "fileName": "index",
+          "extension": "tsx"
+        },
+        "screenshotPaths": {
+          "default": {
+            "path": "/Users/angeloashmore/projects/prismic/nextjs/examples/cms-prismic/.slicemachine/assets/slices/Image/default/preview.png",
+            "width": 800,
+            "height": 444
+          }
+        }
+      },
+      "text": {
+        "library": "slices",
+        "id": "text",
+        "name": "Text",
+        "description": "Text",
+        "model": {
+          "id": "text",
+          "type": "SharedSlice",
+          "name": "Text",
+          "description": "Text",
+          "variations": [
+            {
+              "id": "default",
+              "name": "Default",
+              "docURL": "...",
+              "version": "sktwi1xtmkfgx8626",
+              "description": "Text",
+              "primary": {
+                "text": {
+                  "type": "StructuredText",
+                  "config": {
+                    "label": "Text",
+                    "placeholder": "Rich text with formatting",
+                    "allowTargetBlank": true,
+                    "multi": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl"
+                  }
+                }
+              },
+              "items": {},
+              "imageUrl": "https://images.prismic.io/slice-machine/621a5ec4-0387-4bc5-9860-2dd46cbc07cd_default_ss.png?auto=compress,format"
+            }
+          ]
+        },
+        "mocks": {
+          "default": {
+            "variation": "default",
+            "version": "sktwi1xtmkfgx8626",
+            "items": [{}],
+            "primary": {
+              "text": [
+                {
+                  "type": "paragraph",
+                  "text": "Pariatur consequat eu eiusmod cillum velit excepteur ex sit sit dolore dolor labore ullamco.",
+                  "spans": []
+                },
+                {
+                  "type": "paragraph",
+                  "text": "Et nisi elit dolor pariatur pariatur nisi non est cillum aute.",
+                  "spans": []
+                },
+                {
+                  "type": "paragraph",
+                  "text": "Officia deserunt sunt ad ut anim quis.",
+                  "spans": []
+                },
+                {
+                  "type": "paragraph",
+                  "text": "Est consequat enim id quis consectetur exercitation reprehenderit. Nulla ut ut consequat ipsum nulla duis consequat nostrud eiusmod eiusmod ex incididunt consequat consequat minim. Esse adipisicing ullamco officia incididunt excepteur dolor nisi magna incididunt adipisicing anim.",
+                  "spans": []
+                }
+              ]
+            },
+            "slice_type": "text"
+          }
+        },
+        "meta": {
+          "fileName": "index",
+          "extension": "tsx"
+        },
+        "screenshotPaths": {}
+      }
+    }
+  }
+}

examples/cms-prismic/.slicemachine/mock-config.json

@@ -0,0 +1,43 @@
+{
+  "_cts": {
+    "author": {
+      "name": {
+        "config": {
+          "patternType": "HEADING",
+          "blocks": 1
+        }
+      }
+    },
+    "post": {
+      "title": {
+        "config": {
+          "patternType": "HEADING",
+          "blocks": 1
+        }
+      }
+    }
+  },
+  "slices": {
+    "Text": {
+      "default": {
+        "primary": {
+          "text": {
+            "config": {
+              "patternType": "PARAGRAPH",
+              "blocks": 4
+            }
+          }
+        }
+      }
+    },
+    "Image": {
+      "default": {
+        "primary": {
+          "image": {
+            "content": "https://images.unsplash.com/photo-1493397212122-2b85dda8106b"
+          }
+        }
+      }
+    }
+  }
+}