feat(collections): Source collections from category tree (#871)

]

packages/gatsby-plugin-cms/README.md

@@ -200,3 +200,48 @@ which would return the follwing json:
   }
 }
 ```
+
+## Native Types
+CMS plugin has pre-built blocks that speed up your content types creation. Think of this like a component library that you can import and stitch together to create the content type you desire. 
+These types include Carousel, Seo, and much more. To use it on your project, just:
+```ts
+import { Carousel } from '@vtex/gatsby-plugin-cms'
+
+...
+
+export default {
+  ...
+  blocks: {
+    myBlock: {
+      Carousel,
+      ...
+    }
+  }
+  ...
+}
+```
+
+Check all available blocks, and their definition, at [`gatsby-plugin-cms/native-types`](https://github.com/vtex/faststore/tree/master/packages/gatsby-plugin-cms/src/native-types)
+
+### VTEX modules and Native Types
+Some VTEX modules have first-class support in our CMS. To enable this support, you need to create your contentTypes with our native types for that specific module. 
+Below you can find the doc and how these integrations work for each module.
+
+#### Catalog
+Sourcing Brands/Categories can be achieved by using `@vtex/gatsby-source-vtex` plugin. This plugin sources a `StoreCollection` node into the Gatsby's data layer containing basic info about a category and brand. Although being handy for creating pages using the [File System Route API](https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/), `StoreCollection` does not have enough data to create a rich PLP, with banners and much more. For this, you need to extend `StoreCollection` with more data. 
+To help you extend `StoreCollection` for your business users, we created a native type called `PLP` for the Product List Page.
+
+Whenever the CMS finds a node with the `PLP` signature, it will create a customization on the corresponding `StoreCollection` node adding this `PLP` as a foreign key on the `StoreCollection` node. This way, you can easily fetch all sections of the `PLP` when rendering the `StoreCollection` page, thus allowing you to add any information you want to the `PLP`.
+
+To use it, just add this to your cms config:
+```ts
+import { PLP } from '@vtex/gatsby-plugin-cms'
+
+export default {
+  ...
+  contentTypes: {
+    ...PLP()
+  },
+  ...
+}
+```

packages/gatsby-plugin-cms/package.json

@@ -34,10 +34,13 @@
   "dependencies": {
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.1",
+    "@vtex/gatsby-source-vtex": "^0.372.18",
     "camelcase": "^6.2.0",
     "chokidar": "^3.5.0",
+    "fetch-retry": "^4.1.1",
     "fs-extra": "^9.0.1",
-    "gatsby-graphql-source-toolkit": "^2.0.1",
+    "globby": "^11.0.0",
+    "isomorphic-unfetch": "^3.1.0",
     "p-map": "^4.0.0"
   }
 }

packages/gatsby-plugin-cms/src/gatsby-node.ts

@@ -1,18 +1,34 @@
 import { join } from 'path'
 
 import { outputJSON, pathExists } from 'fs-extra'
+import { sourceStoreCollectionNode } from '@vtex/gatsby-source-vtex'
 import type { JSONSchema6 } from 'json-schema'
 import type {
   CreatePagesArgs,
   SourceNodesArgs,
   PluginOptionsSchemaArgs,
+  CreateNodeArgs,
 } from 'gatsby'
+import type { StoreCollection } from '@vtex/gatsby-source-vtex'
 
-import { PLUGIN } from './constants'
-import { fetchAllNodes } from './node-api/fetchNodes'
-import { createSchemaCustomization, sourceNode } from './node-api/sourceNode'
-import { sourceAllLocalNodes } from './node-api/sourceLocalNodes'
+import { Barrier } from './utils/barrier'
+import { fetchAllNodes as fetchAllRemoteNodes } from './node-api/cms/fetchNodes'
+import {
+  createSchemaCustomization as createCmsSchemaCustomization,
+  sourceNode as sourceCmsNode,
+} from './node-api/cms/sourceNode'
+import { fetchAllNodes as fetchAllLocalNodes } from './node-api/cms/sourceLocalNodes'
+import {
+  getCollectionsFromPageContent,
+  splitCollections,
+} from './node-api/catalog'
+import type { WithPLP } from './node-api/catalog/index'
 import type { BuilderConfig } from './index'
+import type {
+  ICategoryCollection,
+  IClusterCollection,
+  IBrandCollection,
+} from './native-types/blocks/collection'
 
 interface CMSContentType {
   id: string
@@ -47,28 +63,123 @@ const SHADOWED_INDEX_PATH = join(root, 'src', name, 'index.ts')
 
 export interface Options {
   tenant: string
-  workspace?: string
+  workspace: string
+  environment: 'vtexcommercestable' | 'vtexcommercebeta'
 }
 
 export const pluginOptionsSchema = ({ Joi }: PluginOptionsSchemaArgs) =>
   Joi.object({
     tenant: Joi.string().required(),
-    workspace: Joi.string(),
+    workspace: Joi.string().required(),
+    environment: Joi.string()
+      .required()
+      .valid('vtexcommercestable', 'vtexcommercebeta'),
   })
 
+interface CollectionsByType {
+  Category: Record<string, WithPLP<ICategoryCollection>>
+  Department: Record<string, WithPLP<ICategoryCollection>>
+  Cluster: Record<string, WithPLP<IClusterCollection>>
+  Brand: Record<string, WithPLP<IBrandCollection>>
+}
+
+const overridesBarrier = new Barrier<CollectionsByType>()
+
 export const sourceNodes = async (
   gatsbyApi: SourceNodesArgs,
   options: Options
 ) => {
-  const nodes = await fetchAllNodes(gatsbyApi, options)
+  // Warning: Do not source remote and local nodes in a different order since this
+  // is important for the local nodes not to overrider remote ones
+  const nodes = await Promise.all([
+    fetchAllRemoteNodes(gatsbyApi, options),
+    fetchAllLocalNodes(gatsbyApi),
+  ]).then(([x, y]) => [...x, ...y])
 
-  createSchemaCustomization(gatsbyApi, nodes)
+  createCmsSchemaCustomization(gatsbyApi, nodes)
 
   for (const node of nodes) {
-    sourceNode(gatsbyApi, node)
+    sourceCmsNode(gatsbyApi, node)
+  }
+
+  /**
+   * Add CMS overrides to StoreCollection Nodes
+   */
+  const collections = getCollectionsFromPageContent(gatsbyApi, nodes)
+  const splitted = splitCollections(collections)
+
+  overridesBarrier.set({
+    Category: splitted.categories,
+    Department: splitted.categories,
+    Brand: splitted.brands,
+    Cluster: splitted.clusters,
+  })
+
+  /**
+   * Source StoreCollection from clusters. This part isn't done in
+   * gatsby-source-vtex because collections do not have a defined
+   * path on the store
+   */
+  for (const cluster of Object.values(splitted.clusters)) {
+    const node: StoreCollection = {
+      id: `${cluster.clusterId}:${cluster.seo.slug}`,
+      remoteId: cluster.clusterId,
+      slug: cluster.seo.slug,
+      seo: {
+        title: cluster.seo.title,
+        description: cluster.seo.description,
+      },
+      type: 'Cluster',
+    }
+
+    sourceStoreCollectionNode(gatsbyApi, node)
+  }
+}
+
+const TypeKeyMap = {
+  Cluster: 'productClusterIds',
+  Brand: 'b',
+  Category: 'c',
+  Department: 'c',
+}
+
+/**
+ * @description
+ * Create custom fields on StoreCollection when this collection is defined on the CMS
+ */
+export const onCreateNode = async (gatsbyApi: CreateNodeArgs) => {
+  const { node } = gatsbyApi
+
+  if (node.internal.type !== 'StoreCollection') {
+    return
   }
 
-  await sourceAllLocalNodes(gatsbyApi, process.cwd(), PLUGIN)
+  const collection = (node as unknown) as StoreCollection
+  const overrides = await overridesBarrier.get()
+
+  const override = overrides[collection.type][collection.remoteId]
+
+  gatsbyApi.actions.createNodeField({
+    node,
+    name: 'searchParams',
+    value: {
+      sort: override?.sort ?? '""',
+      itemsPerPage: 12,
+      selectedFacets:
+        collection.type === 'Cluster'
+          ? [{ key: TypeKeyMap.Cluster, value: collection.remoteId }]
+          : collection.slug.split('/').map((segment) => ({
+              key: TypeKeyMap[collection.type],
+              value: segment,
+            })),
+    },
+  })
+
+  gatsbyApi.actions.createNodeField({
+    node,
+    name: `plp___NODE`,
+    value: override?.plp ?? null,
+  })
 }
 
 export const createPages = async ({ graphql, reporter }: CreatePagesArgs) => {

packages/gatsby-plugin-cms/src/index.ts

@@ -1,13 +1,21 @@
 import type { JSONSchema6 } from 'json-schema'
 
+export { PLP } from './native-types/contentTypes/plp'
+
+export { Seo } from './native-types/blocks/seo'
+export type { ISeo } from './native-types/blocks/seo'
+
+export { Sort } from './native-types/blocks/sort'
+export type { ISort } from './native-types/blocks/sort'
+
 export interface Schema extends JSONSchema6 {
   title: string
   description?: string
 }
 
 export type Schemas = Record<string, Schema>
 
-interface ContentType {
+export interface ContentType {
   name: string
   extraBlocks: Record<string, Schemas>
   beforeBlocks: Schemas

packages/gatsby-plugin-cms/src/native-types/blocks/collection.ts

@@ -0,0 +1,86 @@
+import { Seo } from './seo'
+import { Sort } from './sort'
+import type { ISeo } from './seo'
+import type { ISort } from './sort'
+import type { Schema } from '../../index'
+
+export interface ICategoryCollection {
+  sort: keyof ISort
+  categoryId: string
+}
+
+export interface IBrandCollection {
+  sort: keyof ISort
+  brandId: string
+}
+
+export interface IClusterCollection {
+  seo: ISeo
+  sort: keyof ISort
+  clusterId: string
+}
+
+export const isCategoryCollection = (
+  x: ICollection
+): x is ICategoryCollection => typeof (x as any).categoryId === 'string'
+
+export const isBrandCollection = (x: ICollection): x is IBrandCollection =>
+  typeof (x as any).brandId === 'string'
+
+export const isClusterCollection = (x: ICollection): x is IClusterCollection =>
+  typeof (x as any).clusterId === 'string'
+
+/**
+ * Definition of a Collection in the CMS
+ */
+export type ICollection =
+  | ICategoryCollection
+  | IBrandCollection
+  | IClusterCollection
+
+export const Collection = {
+  title: 'Collection',
+  description: 'Definition of a Collection for the CMS',
+  oneOf: [
+    {
+      title: 'Category',
+      description: 'Configure a Category',
+      type: 'object',
+      required: ['categoryId', 'sort'],
+      properties: {
+        categoryId: {
+          title: 'Category ID',
+          type: 'string',
+        },
+        sort: Sort,
+      },
+    },
+    {
+      title: 'Brand',
+      description: 'Configure a Brand',
+      type: 'object',
+      required: ['brandId', 'sort'],
+      properties: {
+        brandId: {
+          title: 'Brand ID',
+          type: 'string',
+        },
+        sort: Sort,
+      },
+    },
+    {
+      title: 'Collection',
+      description: 'Configure a Collection',
+      type: 'object',
+      required: ['clusterId', 'sort', 'seo'],
+      properties: {
+        clusterId: {
+          title: 'Collection ID',
+          type: 'string',
+        },
+        sort: Sort,
+        seo: Seo,
+      },
+    },
+  ],
+} as Schema

packages/gatsby-plugin-cms/src/native-types/blocks/seo.ts

@@ -0,0 +1,38 @@
+import type { Schema } from '../..'
+
+export interface ISeo {
+  title: string
+  slug: string
+  description: string
+}
+
+export const Seo = {
+  type: 'object',
+  title: 'Seo',
+  widget: {
+    'ui:ObjectFieldTemplate': 'GoogleSeoPreview',
+  },
+  required: ['title', 'description', 'slug'],
+  properties: {
+    title: {
+      type: 'string',
+      title: 'Title',
+      description:
+        'Appears in the browser tab and is suggested for search engines',
+      default: 'Page title',
+    },
+    slug: {
+      type: 'string',
+      title: 'URL slug',
+      description: "Final part of the page's address. No spaces allowed.",
+      default: '/path/to/page',
+      pattern: '^/([a-zA-Z0-9]|-|/|_)*',
+    },
+    description: {
+      type: 'string',
+      title: 'Description (Meta description)',
+      description: 'Suggested for search engines',
+      default: 'Page description',
+    },
+  },
+} as Schema