feat(gatsby-recipes): add recipes gui

package.json

@@ -90,6 +90,9 @@
     "yarn": "^1.17.3",
     "node": ">=10.13.0"
   },
+  "resolutions": {
+    "property-information": "5.5.0"
+  },
   "eslintIgnore": [
     "interfaces",
     "**/__tests__/fixtures/"

packages/gatsby-recipes/package.json

@@ -3,7 +3,6 @@
   "description": "Core functionality for Gatsby Recipes",
   "version": "0.1.31",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
-  "main": "dist/index.js",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
@@ -15,21 +14,27 @@
     "@babel/standalone": "^7.9.6",
     "@babel/template": "^7.8.6",
     "@babel/types": "^7.9.6",
+    "@emotion/core": "^10.0.14",
+    "@emotion/styled": "^10.0.14",
     "@hapi/hoek": "8.x.x",
     "@hapi/joi": "^15.1.1",
-    "@mdx-js/mdx": "^1.6.1",
-    "@mdx-js/react": "^1.6.1",
-    "@mdx-js/runtime": "^1.6.1",
+    "@mdx-js/mdx": "^2.0.0-next.1",
+    "@mdx-js/react": "^2.0.0-next.1",
+    "@mdx-js/runtime": "^2.0.0-next.1",
     "acorn": "^7.2.0",
     "acorn-jsx": "^5.2.0",
+    "ansi-html": "^0.0.7",
+    "contentful-management": "^5.26.3",
     "cors": "^2.8.5",
     "debug": "^4.1.1",
     "detect-port": "^1.3.0",
     "execa": "^4.0.1",
     "express": "^4.17.1",
     "express-graphql": "^0.9.0",
+    "formik": "^2.0.8",
     "fs-extra": "^8.1.0",
     "gatsby-core-utils": "^1.3.3",
+    "gatsby-interface": "^0.0.166",
     "gatsby-telemetry": "^1.3.9",
     "glob": "^7.1.6",
     "graphql": "^14.6.0",
@@ -52,10 +57,15 @@
     "lodash": "^4.17.15",
     "mkdirp": "^0.5.1",
     "node-fetch": "^2.6.0",
+    "p-queue": "^6.4.0",
     "pkg-dir": "^4.2.0",
     "prettier": "^2.0.5",
+    "prop-types": "^15.6.1",
+    "property-information": "5.5.0",
+    "react-circular-progressbar": "^2.0.0",
+    "react-icons": "^3.0.1",
     "react-reconciler": "^0.25.1",
-    "remark-mdx": "^1.6.1",
+    "remark-mdx": "^2.0.0-next.1",
     "remark-parse": "^6.0.3",
     "remark-stringify": "^8.0.0",
     "semver": "^7.3.2",
@@ -67,7 +77,8 @@
     "unist-util-visit": "^2.0.2",
     "urql": "^1.9.7",
     "ws": "^7.3.0",
-    "xstate": "^4.9.1"
+    "xstate": "^4.9.1",
+    "yup": "^0.27.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -77,33 +88,39 @@
     "tmp-promise": "^2.1.0"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes#readme",
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/.cache/",
+      "dist"
+    ],
+    "testEnvironment": "node"
+  },
   "keywords": [
     "gatsby",
     "gatsby-recipes",
     "mdx"
   ],
   "license": "MIT",
+  "main": "dist/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/gatsbyjs/gatsby.git",
     "directory": "packages/gatsby-recipes"
   },
   "resolutions": {
-    "graphql": "^14.6.0"
-  },
-  "jest": {
-    "testPathIgnorePatterns": [
-      "/.cache/",
-      "dist"
-    ],
-    "testEnvironment": "node"
+    "@mdx-js/mdx": "^2.0.0-next.1",
+    "@mdx-js/react": "^2.0.0-next.1",
+    "@mdx-js/runtime": "^2.0.0-next.1",
+    "graphql": "^14.6.0",
+    "property-information": "5.5.0",
+    "remark-mdx": "^2.0.0-next.1"
   },
   "scripts": {
     "build": "babel src --out-dir dist --ignore \"**/__tests__\"  --extensions \".ts,.js,.tsx\"",
     "build:watch": "npm run build -- --watch",
     "prepare": "npm run build",
-    "watch": "npm run build:watch",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "watch": "npm run build:watch"
   }
 }

packages/gatsby-recipes/recipes/cypress.mdx

@@ -4,15 +4,15 @@ First, we'll want to install Cypress and additional dependencies.
 
 ---
 
+Add dependencies to your package.json and we also installed a useful package `gatsby-cypress`. `gatsby-cypress` exposes additional Cypress functionality which makes Gatsby and Cypress work together just a bit more nicely. We'll show that later with our first test, but hold tight for just a bit because first we need to scaffold out some boilerplate files for Cypress.
+
 <NPMPackage name="cypress" dependencyType="development" />
 <NPMPackage name="gatsby-cypress" dependencyType="development" />
 <NPMPackage name="start-server-and-test" dependencyType="development" />
 
 ---
 
-Well look at that — we've added dependencies to your package.json and we also installed a useful package `gatsby-cypress`. `gatsby-cypress` exposes additional Cypress functionality which makes Gatsby and Cypress work together just a bit more nicely. We'll show that later with our first test, but hold tight for just a bit because first we need to scaffold out some boilerplate files for Cypress.
-
----
+Cool cool! So we created a local `cypress` folder with two sub-folders, `support` and `plugins`. We've also automatically included all the nice `gatsby-cypress` utilities, which we can now use in our first test.
 
 <File
  path="cypress/plugins/index.js"
@@ -26,9 +26,7 @@ Well look at that — we've added dependencies to your package.json and we also
 
 ---
 
-Cool cool! So we created a local `cypress` folder with two sub-folders, `support` and `plugins`. We've also automatically included all the nice `gatsby-cypress` utilities, which we can now use in our first test.
-
----
+Our first test! You'll notice it's failing. This is intentional -- we'd like you to run the test and fix it. 
 
 <File
  path="cypress/integration/home-page/home-page.js"
@@ -37,9 +35,7 @@ Cool cool! So we created a local `cypress` folder with two sub-folders, `support
 
 ---
 
-Our first test! You'll notice it's failing. This is intentional -- we'd like you to run the test and fix it. This raises a question -- how do you run a Cypress test? Easy peasy.
-
----
+This raises a question -- how do you run a Cypress test? Easy peasy.
 
 <NPMScript
   name="develop"

packages/gatsby-recipes/src/apply-plan.js

@@ -1,35 +1,15 @@
-const resources = require(`./resources`)
-const SITE_ROOT = process.cwd()
-const ctx = { root: SITE_ROOT }
-
-const asyncForEach = async (array, callback) => {
-  for (let index = 0; index < array.length; index++) {
-    await callback(array[index], index, array)
+const render = require(`./renderer`)
+
+module.exports = async (context, cb) => {
+  const stepAsMdx = context.steps.join(`\n`)
+
+  try {
+    // XXX: Too many arguments to the render function
+    const result = await render(stepAsMdx, cb, context.inputs, true)
+    console.log({ result })
+    return result
+  } catch (e) {
+    console.log(e)
+    throw e
   }
 }
-
-const applyPlan = async stepPlan => {
-  let appliedResources = []
-  // We apply each resource serially for now — we can parallelize in the
-  // future for SPEED
-  await asyncForEach(stepPlan, async resourcePlan => {
-    const resource = resources[resourcePlan.resourceName]
-
-    try {
-      const changedResources = await resource.create(
-        ctx,
-        resourcePlan.resourceDefinitions
-      )
-
-      appliedResources = appliedResources.concat(changedResources)
-
-      return
-    } catch (e) {
-      throw e
-    }
-  })
-
-  return appliedResources
-}
-
-module.exports = applyPlan

packages/gatsby-recipes/src/cli.js

@@ -280,6 +280,8 @@ const components = {
   Directory: () => null,
   GatsbyShadowFile: () => null,
   NPMScript: () => null,
+  RecipeIntroduction: () => null,
+  RecipeStep: () => null,
 }
 
 let logStream
@@ -354,12 +356,25 @@ module.exports = async ({ recipe, graphqlPort, projectRoot }) => {
         }
       `)
       // eslint-disable-next-line
-      const [__, sendEvent] = useMutation(`
-        mutation($event: String!) {
-          sendEvent(event: $event)
+      const [__, _sendEvent] = useMutation(`
+        mutation($event: String!, $input: String) {
+          sendEvent(event: $event, input: $input)
         }
       `)
 
+      const sendEvent = ({ event, input }) => {
+        log(`sending event`, { event, input })
+        if (input) {
+          log(`sending event`, input)
+          _sendEvent({
+            event,
+            input: JSON.stringify(input),
+          })
+        } else {
+          _sendEvent({ event })
+        }
+      }
+
       subscriptionClient.connectionCallback = async () => {
         if (!showRecipesList) {
           log(`createOperation`)
@@ -419,6 +434,11 @@ module.exports = async ({ recipe, graphqlPort, projectRoot }) => {
           </Text>
         )
       }
+
+      if (state.value === `waitingForInput`) {
+        return <Text>Input some stuff!</Text>
+      }
+
       /*
        * TODOs
        * Listen to "y" to continue (in addition to enter)

packages/gatsby-recipes/src/create-plan.js

@@ -1,14 +1,10 @@
 const render = require(`./renderer`)
 
-// TODO: Properly handle context in the renderer
-// const SITE_ROOT = process.cwd()
-// const ctx = { root: SITE_ROOT }
-
-module.exports = async context => {
-  const stepAsMdx = context.steps[context.currentStep]
+module.exports = async (context, cb) => {
+  const stepAsMdx = context.steps.join(`\n`)
 
   try {
-    const result = await render(stepAsMdx)
+    const result = await render(stepAsMdx, cb, context.inputs)
     return result
   } catch (e) {
     throw e

packages/gatsby-recipes/src/graphql-server/server.js

@@ -1,3 +1,5 @@
+require(`dotenv`).config()
+
 const express = require(`express`)
 const graphqlHTTP = require(`express-graphql`)
 const {
@@ -23,6 +25,7 @@ const pubsub = new PubSub()
 const PORT = process.argv[2] || 4000
 
 const emitOperation = state => {
+  console.log(`!!! emitting operation`)
   console.log(state)
   pubsub.publish(`operation`, {
     state: JSON.stringify(state),
@@ -107,10 +110,14 @@ const rootMutationType = new GraphQLObjectType({
         type: GraphQLString,
         args: {
           event: { type: GraphQLString },
+          input: { type: GraphQLString },
         },
         resolve: (_, args) => {
-          console.log(`event received`, args)
-          service.send(args.event)
+          console.log(`!!! event received`, args)
+          service.send({
+            type: args.event,
+            data: args.input && JSON.parse(args.input),
+          })
         },
       },
     }