chore(recipes): fix stuff (#23154)

* Use dist * chore(recipes): fixes
gatsbyjs · Apr 15, 2020 · 348d326 · 348d326
1 parent d7bf2b5
commit 348d326
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 38 deletions.
diff --git a/packages/gatsby-recipes/package.json b/packages/gatsby-recipes/package.json
@@ -62,6 +62,7 @@
     "xstate": "^4.8.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.8.4",
     "babel-preset-gatsby-package": "^0.3.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

diff --git a/packages/gatsby-recipes/src/cli.js b/packages/gatsby-recipes/src/cli.js
@@ -20,7 +20,7 @@ const fetch = require(`node-fetch`)
 const ws = require(`ws`)
 const SelectInput = require(`ink-select-input`).default
 
-const MAX_UI_WIDTH = 100
+const MAX_UI_WIDTH = 67
 
 // TODO try this and write out success stuff & last message?
 // const enterAltScreenCommand = "\x1b[?1049h"
@@ -160,27 +160,40 @@ const components = {
       <Text bold underline {...props} />
     </Div>
   ),
-  h2: props => <Text bold {...props} />,
-  h3: props => <Text bold italic {...props} />,
-  h4: props => <Text bold {...props} />,
-  h5: props => <Text bold {...props} />,
-  h6: props => <Text bold {...props} />,
+  h2: props => (
+    <Div>
+      <Text bold {...props} />
+    </Div>
+  ),
+  h3: props => (
+    <Div>
+      <Text bold italic {...props} />
+    </Div>
+  ),
+  h4: props => (
+    <Div>
+      <Text bold {...props} />
+    </Div>
+  ),
+  h5: props => (
+    <Div>
+      <Text bold {...props} />
+    </Div>
+  ),
+  h6: props => (
+    <Div>
+      <Text bold {...props} />
+    </Div>
+  ),
   a: ({ href, children }) => <Link url={href}>{children}</Link>,
-  br: () => null,
   strong: props => <Text bold {...props} />,
   em: props => <Text italic {...props} />,
   p: props => {
     const children = elimiateNewLines(props.children)
     return (
-      <Box
-        width="100%"
-        marginBottom={2}
-        flexDirection="row"
-        textWrap="wrap"
-        {...props}
-      >
-        {children}
-      </Box>
+      <Div marginBottom={1}>
+        <Text>{children}</Text>
+      </Div>
     )
   },
   ul: props => <Div marginBottom={1}>{props.children}</Div>,
@@ -310,7 +323,6 @@ module.exports = ({ recipe, graphqlPort, projectRoot }) => {
             </Text>
             <RecipesList
               setRecipe={async recipeItem => {
-                log(`yo`, { recipeItem, projectRoot })
                 showRecipesList = false
                 try {
                   await createOperation({
@@ -501,29 +513,24 @@ module.exports = ({ recipe, graphqlPort, projectRoot }) => {
             </Div>
           )}
           <PlanContext.Provider value={{ planForNextStep: state.plan }}>
-            <Div>
-              <MDX components={components}>
-                {state.context.stepsAsMdx[state.context.currentStep]}
-              </MDX>
-            </Div>
+            <MDX components={components}>
+              {state.context.stepsAsMdx[state.context.currentStep]}
+            </MDX>
             <PresentStep state={state} />
             <RunningStep state={state} />
           </PlanContext.Provider>
         </>
       )
     }
 
-    const Wrapper = () => {
-      console.log(`rendering wrapper`)
-      return (
-        <>
-          <Provider value={client}>
-            <Text>{` `}</Text>
-            <RecipeInterpreter />
-          </Provider>
-        </>
-      )
-    }
+    const Wrapper = () => (
+      <>
+        <Provider value={client}>
+          <Text>{` `}</Text>
+          <RecipeInterpreter />
+        </Provider>
+      </>
+    )
 
     const Recipe = () => <Wrapper />
 

diff --git a/packages/gatsby-recipes/src/joi-to-graphql/helpers/joi-to-graphql.js b/packages/gatsby-recipes/src/joi-to-graphql/helpers/joi-to-graphql.js
@@ -6,7 +6,7 @@ const {
   GraphQLList,
 } = require(`graphql`)
 const TypeDictionary = require(`./type-dictionary`)
-const Hoek = require(`hoek`)
+const Hoek = require(`@hapi/hoek`)
 const internals = {}
 let cache = {}
 const lazyLoadQueue = []

diff --git a/packages/gatsby-recipes/src/joi-to-graphql/methods/compose-schema.js b/packages/gatsby-recipes/src/joi-to-graphql/methods/compose-schema.js
@@ -1,7 +1,7 @@
 "use strict"
 
 const { GraphQLObjectType, GraphQLSchema } = require(`graphql`)
-const Hoek = require(`hoek`)
+const Hoek = require(`@hapi/hoek`)
 const Joi = require(`@hapi/joi`)
 const { typeDictionary } = require(`../helpers`)
 const internals = {}

diff --git a/packages/gatsby-recipes/src/joi-to-graphql/methods/compose-type.js b/packages/gatsby-recipes/src/joi-to-graphql/methods/compose-type.js
@@ -1,6 +1,6 @@
 "use strict"
 
-const Hoek = require(`hoek`)
+const Hoek = require(`@hapi/hoek`)
 const Joi = require(`@hapi/joi`)
 const { joiToGraphql } = require(`../helpers`)
 

diff --git a/packages/gatsby/src/commands/recipes.ts b/packages/gatsby/src/commands/recipes.ts
@@ -13,7 +13,7 @@ module.exports = async (program: IProgram): Promise<void> => {
 
   // Start GraphQL serve
   const scriptPath = require.resolve(
-    `gatsby-recipes/src/graphql.js`
+    `gatsby-recipes/dist/graphql.js`
   )
 
   const subprocess = execa(`node`, [scriptPath, graphqlPort], {
@@ -45,7 +45,7 @@ module.exports = async (program: IProgram): Promise<void> => {
   let started = false
   subprocess.stdout.on(`data`, data => {
     if (!started) {
-      const runRecipe = require(`gatsby-recipes/src/index.js`)
+      const runRecipe = require(`gatsby-recipes/dist/index.js`)
       runRecipe({ recipe, graphqlPort, projectRoot: program.directory })
       started = true
     }