feat(gatsby-recipes): add recipes gui

docs/blog/2019-04-25-plugin-authoring-study/index.md

@@ -49,8 +49,7 @@ ANSWER: make time-consuming things take less time, and make frustrating things l
 
 People who use plugin authoring docs say they are super helpful; however, most people don’t know about them and solve challenges through looking at the source code of other plugins. While this works for many people, we think making this even easier is a positive change.
 
-<!--lint disable no-duplicate-headings-->
-## Solution
+## Solution to make things less time consuming
 
 - [Gatsby CLI to add scaffolding for source plugin creation #13376](https://github.com/gatsbyjs/gatsby/issues/13376)
 - [Invite new Gatsby users to learn more about plugin authoring via CLI #13377](https://github.com/gatsbyjs/gatsby/issues/13377)
@@ -67,8 +66,7 @@ Examples of things that are confusing:
 - Most people don’t know how to write automated tests for plugins and mentioned building a site just to test the plugin, which they felt wasn't the most ideal way to test
 - Rebuilding for every change often “feels wrong” to people
 
-<!--lint disable no-duplicate-headings-->
-## Solution
+## Solution to reduce frustration
 
 [Redesigned the plugin docs](https://github.com/gatsbyjs/gatsby/pull/13261/files) to include a category called "Creating Plugins" where we can document answers to people's concerns; for example, ideas for how to test plugins and advice to use yarn workspaces to avoid yarn link inconsistencies.
 

packages/gatsby-cli/src/create-cli.ts

@@ -354,9 +354,29 @@ function buildLocalCommands(cli: yargs.Argv, isLocalSite: boolean): void {
   cli.command({
     command: `recipes [recipe]`,
     describe: `[EXPERIMENTAL] Run a recipe`,
+    builder: _ =>
+      _.option(`D`, {
+        alias: `develop`,
+        type: `boolean`,
+        default: false,
+        describe: `Start recipe in develop mode to live-develop your recipe (defaults to false)`,
+      }).option(`I`, {
+        alias: `install`,
+        type: `boolean`,
+        default: false,
+        describe: `Install recipe (defaults to plan mode)`,
+      }),
     handler: handlerP(
-      async ({ recipe }: yargs.Arguments<{ recipe: string | undefined }>) => {
-        await recipesHandler(siteInfo.directory, recipe)
+      async ({
+        recipe,
+        develop,
+        install,
+      }: yargs.Arguments<{
+        recipe: string | undefined
+        develop: boolean
+        install: boolean
+      }>) => {
+        await recipesHandler(siteInfo.directory, recipe, develop, install)
       }
     ),
   })

packages/gatsby-cli/src/recipes.ts

@@ -1,16 +1,20 @@
 import { trackCli } from "gatsby-telemetry"
-import runRecipe, { startGraphQLServer } from "gatsby-recipes"
+import { startGraphQLServer, recipesHandler as runRecipe } from "gatsby-recipes"
 
 export async function recipesHandler(
   projectRoot: string,
-  recipe: string | undefined
+  recipe: string | undefined,
+  develop: boolean,
+  install: boolean
 ): Promise<void> {
   trackCli(`RECIPE_RUN`, { name: recipe })
 
   const graphql = await startGraphQLServer(projectRoot)
 
   return runRecipe({
     recipe,
+    isDevelopMode: develop,
+    isInstallMode: install,
     graphqlPort: graphql.port,
     projectRoot,
   })

packages/gatsby-recipes/.babelrc.json

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/env", { "modules": false, "targets": { "node": "current" } }],
+    "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

packages/gatsby-recipes/README.md

@@ -241,6 +241,8 @@ DEBUG=true node --inspect-brk ./node_modules/.bin/gatsby recipes ./test.mdx
 
 Then, open up Chrome and click the node icon in dev tools.
 
+To see log output from the Recipes graphql server, run in a terminal `node node_modules/gatsby-recipes/dist/graphql-server/start-dev-cli-server.js`
+
 ### Official recipes
 
 MDX source for the official recipes lives at [https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes/recipes](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-recipes/recipes).

packages/gatsby-recipes/package.json

@@ -3,35 +3,46 @@
   "description": "Core functionality for Gatsby Recipes",
   "version": "0.1.58",
   "author": "Kyle Mathews <[email protected]>",
-  "main": "dist/index.js",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/core": "^7.10.3",
-    "@babel/generator": "^7.10.3",
-    "@babel/helper-plugin-utils": "^7.10.3",
-    "@babel/plugin-transform-react-jsx": "^7.10.3",
-    "@babel/standalone": "^7.10.3",
-    "@babel/template": "^7.10.3",
-    "@babel/types": "^7.10.3",
-    "@graphql-tools/schema": "^6.0.11",
-    "@graphql-tools/utils": "^6.0.11",
-    "@hapi/hoek": "8.x",
+    "@babel/core": "^7.9.6",
+    "@babel/generator": "^7.9.6",
+    "@babel/helper-plugin-utils": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.4",
+    "@babel/plugin-transform-react-jsx": "^7.9.4",
+    "@babel/standalone": "^7.10.2",
+    "@babel/template": "^7.8.6",
+    "@babel/types": "^7.9.6",
+    "@emotion/core": "^10.0.14",
+    "@emotion/styled": "^10.0.14",
+    "@graphql-tools/schema": "^6.0.14",
+    "@graphql-tools/utils": "^6.0.14",
+    "@hapi/hoek": "8.x.x",
     "@hapi/joi": "^15.1.1",
-    "@mdx-js/mdx": "^1.6.6",
-    "@mdx-js/react": "^1.6.6",
-    "@mdx-js/runtime": "^1.6.6",
-    "acorn": "^7.3.1",
+    "@mdx-js/mdx": "^2.0.0-next.4",
+    "@mdx-js/react": "^2.0.0-next.4",
+    "@mdx-js/runtime": "^2.0.0-next.4",
+    "acorn": "^7.2.0",
     "acorn-jsx": "^5.2.0",
+    "ansi-html": "^0.0.7",
+    "babel-plugin-remove-export-keywords": "^1.6.5",
+    "chokidar": "3.4.0",
+    "concurrently": "^5.0.0",
+    "contentful-management": "^5.26.3",
     "cors": "^2.8.5",
     "debug": "^4.1.1",
     "detect-port": "^1.3.0",
+    "dotenv": "^8.2.0",
     "execa": "^4.0.2",
     "express": "^4.17.1",
     "express-graphql": "^0.9.0",
+    "flatted": "^3.0.0",
+    "formik": "^2.0.8",
     "fs-extra": "^8.1.0",
     "gatsby-core-utils": "^1.3.14",
+    "gatsby-interface": "^0.0.166",
     "gatsby-telemetry": "^1.3.24",
     "glob": "^7.1.6",
     "graphql": "^14.6.0",
@@ -40,21 +51,23 @@
     "graphql-type-json": "^0.3.2",
     "hicat": "^0.7.0",
     "html-tag-names": "^1.1.5",
-    "ink": "^2.7.1",
-    "ink-box": "^1.0.0",
-    "ink-link": "^1.1.0",
-    "ink-select-input": "^3.1.2",
-    "ink-spinner": "^3.1.0",
     "is-binary-path": "^2.1.0",
     "is-url": "^1.2.4",
+    "isomorphic-fetch": "^2.1.0",
     "jest-diff": "^25.5.0",
     "lodash": "^4.17.15",
     "mkdirp": "^0.5.1",
-    "node-fetch": "^2.6.0",
+    "node-fetch": "^2.5.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.6",
+    "remark-mdx": "^2.0.0-next.4",
+    "remark-mdxjs": "^2.0.0-next.4",
     "remark-parse": "^6.0.3",
     "remark-stringify": "^8.1.0",
     "resolve-cwd": "^3.0.0",
@@ -65,50 +78,73 @@
     "subscriptions-transport-ws": "^0.9.16",
     "svg-tag-names": "^2.0.1",
     "unified": "^8.4.2",
+    "unist-util-remove": "^2.0.0",
     "unist-util-visit": "^2.0.2",
-    "urql": "^1.9.8",
+    "urql": "^1.9.7",
+    "uuid": "^8.2.0",
     "ws": "^7.3.0",
-    "xstate": "^4.11.0"
-  },
-  "peerDependencies": {
-    "react": "^16.12.0"
+    "xstate": "^4.9.1",
+    "yoga-layout-prebuilt": "^1.9.6",
+    "yup": "^0.27.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.3",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@rollup/plugin-babel": "^5.1.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
+    "ink": "next",
+    "ink-select-input": "^4.0.0",
+    "ink-spinner": "^4.0.0-0",
     "react": "^16.12.0",
     "rimraf": "^3.0.2",
+    "rollup": "^2.23.0",
+    "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-internal": "^1.0.0",
+    "terminal-link": "^2.0.0",
     "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.4",
+    "@mdx-js/react": "^2.0.0-next.4",
+    "@mdx-js/runtime": "^2.0.0-next.4",
+    "graphql": "^14.6.0",
+    "property-information": "5.5.0",
+    "remark-mdx": "^2.0.0-next.4",
+    "remark-mdxjs": "^2.0.0-next.4"
   },
   "scripts": {
-    "build": "babel src --out-dir dist --ignore \"**/__tests__\"  --extensions \".ts,.js,.tsx\"",
-    "build:watch": "npm run build -- --watch",
+    "build": "concurrently \"npm run build:babel\" \"npm run build:rollup\"",
+    "build:babel": "babel --config-file ./non-rollup-babel.config.js src --out-dir dist --ignore \"**/__tests__\"  --extensions \".ts,.js,.tsx\"",
+    "build:rollup": "rollup -c",
+    "build:watch": "npm run build:babel -- --watch",
     "prebuild": "rimraf dist",
     "prepare": "npm run build",
     "prewatch": "rimraf dist",
-    "watch": "npm run build:watch",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "watch": "concurrently \"npm run build:watch\" \"npm run watch:rollup\"",
+    "watch:rollup": "rollup -c -w"
   }
 }

packages/gatsby-recipes/recipes/animated-page-transitions.mdx

@@ -2,22 +2,24 @@
 
 This recipe helps you create transitions for animating between entering and exiting Gatsby pages.
 
+This recipe:
+
 ---
 
-The first step is installing the NPM packages you need:
+Installs these NPM packages:
 
 <NPMPackage name="gatsby-plugin-transition-link" />
 <NPMPackage name="gsap" />
 
 ---
 
-Add the plugin to your Gatsby config.
+Adds the following plugin to your Gatsby config:
 
 <GatsbyPlugin name="gatsby-plugin-transition-link" />
 
 ---
 
-Now let's create a few example pages to animate between:
+Creates a few example pages to animate between:
 
 <File path="./src/pages/transition-fade.js" content="https://gist.githubusercontent.com/gillkyle/50949d56409c338b427984c8e223034b/raw/4674121deb826f2c17a7acde4f20e9cfe8a268d5/transition-fade.js" />
 
@@ -28,5 +30,3 @@ Now let's create a few example pages to animate between:
 When you run your site you can navigate to http://localhost:8000/transition-paint-drip to try it out.
 
 See more examples about usage in the docs for the transition link plugin: https://transitionlink.tylerbarnes.ca/docs/
-
-And your recipe is served!

packages/gatsby-recipes/recipes/ava.mdx

@@ -1,16 +1,18 @@
 # Add AVA
 
-This recipe helps you setup AVA in your Gatsby site to test components and utilities
+This recipe helps you setup AVA in your Gatsby site to test components and utilities.
+
+This recipe:
 
 ---
 
-Install the `ava` package
+Installs the `ava` package.
 
 <NPMPackage name="ava" />
 
 ---
 
-Adding some AVA test files for you to play with
+Adds some AVA test files for you to play with.
 
 <File
   path="src/ava-example/sum.js"
@@ -24,9 +26,9 @@ Adding some AVA test files for you to play with
 
 ---
 
-Add a `test` & `test:watch` scripts to your package.json.
+Adds a `test` & `test:watch` scripts to your package.json.
 
-Now try running `npm run test` — AVA will run your test!
+Then you can run `npm run test` — AVA will run your test!
 
 While writing tests you can run `npm run test:watch` and tests will re-run
 as you edit them.