Checkin

packages/gatsby-recipes/src/gui.js

@@ -8,7 +8,7 @@ const ansi2HTML = require(`ansi-html`)
 const {
   CircularProgressbarWithChildren,
 } = require(`react-circular-progressbar`)
-require("react-circular-progressbar/dist/styles.css")
+require(`react-circular-progressbar/dist/styles.css`)
 const {
   createClient,
   useMutation,
@@ -20,7 +20,7 @@ const {
 const { SubscriptionClient } = require(`subscriptions-transport-ws`)
 const semver = require(`semver`)
 
-const SelectInput = "select"
+const SelectInput = `select`
 
 // Check for what version of React is loaded & warn if it's too low.
 if (semver.lt(React.version, `16.8.0`)) {
@@ -29,12 +29,13 @@ if (semver.lt(React.version, `16.8.0`)) {
   )
 }
 
-const PROJECT_ROOT = "/Users/kylemathews/projects/gatsby/starters/blog"
+const PROJECT_ROOT =
+  process.cwd() || `/Users/kylemathews/projects/gatsby/starters/blog`
 
-const Boxen = "div"
-const Text = "p"
-const Static = "div"
-const Color = "span"
+const Boxen = `div`
+const Text = `p`
+const Static = `div`
+const Color = `span`
 const Spinner = () => <span>Loading...</span>
 
 const WelcomeMessage = () => (
@@ -149,6 +150,12 @@ const components = {
   File: () => null,
   GatsbyShadowFile: () => null,
   NPMScript: () => null,
+  RecipeIntroduction: props => (
+    <div style={{ background: `tomato` }} {...props} />
+  ),
+  RecipeStep: props => (
+    <div style={{ border: `4px solid tomato` }} {...props} />
+  ),
 }
 
 const log = (label, textOrObj) => {
@@ -270,7 +277,7 @@ const RecipeGui = ({
       }
 
       if (!state) {
-        console.log("Loading recipe!")
+        console.log(`Loading recipe!`)
         return (
           <Wrapper>
             <Spinner /> Loading recipe
@@ -279,7 +286,7 @@ const RecipeGui = ({
       }
 
       console.log(state)
-      console.log("!!!!!!")
+      console.log(`!!!!!!`)
 
       const isDone = state.value === `done`
 
@@ -513,7 +520,7 @@ const RecipeGui = ({
       if (isDone) {
         process.nextTick(() => {
           subscriptionClient.close()
-          log("The recipe finished successfully")
+          log(`The recipe finished successfully`)
           lodash.flattenDeep(state.context.stepResources).forEach((res, i) => {
             log(`✅ ${res._message}\n`)
           })
@@ -541,9 +548,9 @@ const RecipeGui = ({
             ))}
           </div>
 
-          {state.context.steps.slice(1).map((step, i) => {
-            return <Step state={state} step={step} i={i} />
-          })}
+          {state.context.steps.slice(1).map((step, i) => (
+            <Step state={state} step={step} i={i} />
+          ))}
         </Wrapper>
       )
     }

packages/gatsby-recipes/src/parser/index.js

@@ -71,6 +71,8 @@ const parse = async src => {
 
     const steps = [wrappedIntroStep, ...wrappedResourceSteps]
 
+    console.log(steps)
+
     return {
       ast,
       steps,

packages/gatsby-recipes/src/recipe-machine/index.js

@@ -38,6 +38,8 @@ const recipeMachine = Machine(
               )
             }
 
+            console.log({ parsed })
+
             return parsed
           },
           onError: {
@@ -69,6 +71,8 @@ const recipeMachine = Machine(
         invoke: {
           id: `validateSteps`,
           src: async (context, event) => {
+            console.log({ context })
+            console.log(`hiiiiiiiiiiiiii`)
             const result = await validateSteps(context.steps)
             if (result.length > 0) {
               throw new Error(JSON.stringify(result))

starters/blog/package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "gatsby": "^2.21.37",
+    "gatsby": "2.22.12-dev-1590696437802",
     "gatsby-image": "^2.4.4",
     "gatsby-plugin-feed": "^2.5.1",
     "gatsby-plugin-google-analytics": "^2.3.1",

starters/blog/src/pages/admin.js

@@ -0,0 +1,4 @@
+import RecipesGUI from 'gatsby-recipes/dist/gui'
+
+export default RecipesGUI
+

yarn.lock

@@ -20308,6 +20308,11 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-circular-progressbar@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-circular-progressbar/-/react-circular-progressbar-2.0.3.tgz#fa8eb59f8db168d2904bae4590641792c80f5991"
+  integrity sha512-YKN+xAShXA3gYihevbQZbavfiJxo83Dt1cUxqg/cltj4VVsRQpDr7Fg1mvjDG3x1KHGtd9NmYKvJ2mMrPwbKyw==
+
 react-dev-utils@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.3.tgz#5b42d9ea58d5e9e017a2f57a40a8af408a3a46fb"