Admin/recipes gui (#26243)

* initial commit of gui * initial commit of gui * it renders * pass recipe name * add params * add params * use state for gatsby link * clean up errors * remove recipe test data * refactor gui and remove unused reference * remove welcome message * remove welcome message * clean up imports * use optional chaining * move diff components out * restructure components still in progress * restructure components still in progress * refactor theme ui styling * break out more components * resource message refactor * use optional chaining instead * remove currently unused input stuff * remove currently unused input stuff * work around typeerror * refactor main component and removed unused input stuff * align on gatsby interface version * repin version * needs to be this version of interface * recipes doesn't need interface anymore * clean up theme ui merges * use a fragment * remove fragment * see if removing use of header in recipes page fixes build error * prevent verdaccio from failing * Move the transform code out of the client * transform each step * remove transform from mdx component and not renderer * rendering JS instead of MDX * Move MDX transform to parser and resolve component clashes * remove testing comment * yarn lock * refactor name and run babel shortcode transform always * try and fix linter * fix linting * Revert "fix linting" This reverts commit b90e8d5. * revert commits so we can change on master * comment out test we're not using * Add back validate steps but only check for introduction steps * fix in progress, validate steps is throwing intro error always * add error case back again * use metadata * Grab project root from service lock * Use sitePath instead * remnove comments * don't hardcode API endpoint port * Update packages/gatsby-recipes/src/components/step-renderer.js Co-authored-by: Brent Jackson <jxnblk@gmail.com> * move normalize.css to provider component * Expose StepRenderer as top level component for admin * fixing CLI * Remove li.p component that was causing the bug. We don't need it anyway. Co-authored-by: Laurie Barth <laurie@LauriesrkLaptop.fios-router.home> Co-authored-by: Brent Jackson <jxnblk@gmail.com>
gatsbyjs · Aug 28, 2020 · 703678e · 703678e
1 parent 04c75bb
commit 703678e
Show file tree

Hide file tree

Showing 24 changed files with 882 additions and 1,184 deletions.
diff --git a/packages/gatsby-admin/gatsby-node.js b/packages/gatsby-admin/gatsby-node.js
@@ -0,0 +1,7 @@
+exports.onCreateWebpackConfig = ({ actions }) => {
+    actions.setWebpackConfig({
+      node: {
+        fs: 'empty'
+      }
+    })
+  }
diff --git a/packages/gatsby-admin/package.json b/packages/gatsby-admin/package.json
@@ -18,6 +18,7 @@
     "@typescript-eslint/parser": "^2.28.0",
     "csstype": "^2.6.10",
     "feedback-fish": "^0.1.12",
+    "query-string": "^6.13.1",
     "formik": "^2.1.4",
     "gatsby": "^2.24.51",
     "gatsby-interface": "0.0.183",

diff --git a/packages/gatsby-admin/src/components/providers.tsx b/packages/gatsby-admin/src/components/providers.tsx
@@ -2,19 +2,87 @@ import React from "react"
 import { Provider, Client } from "urql"
 import { ThemeProvider, getTheme } from "gatsby-interface"
 import { ThemeProvider as StrictUIProvider } from "strict-ui"
-import { Spinner } from "theme-ui"
+import { Spinner, merge } from "theme-ui"
 import { createUrqlClient } from "../urql-client"
+import "normalize.css"
 
 const baseTheme = getTheme()
 
-const theme = {
-  ...baseTheme,
+const recipesTheme = merge(baseTheme, {
+  colors: {
+    background: `white`,
+  },
+  styles: {
+    h1: {
+      fontSize: 6,
+      fontFamily: `heading`,
+      fontWeight: `heading`,
+      mt: 0,
+      mb: 4,
+    },
+    h2: {
+      fontSize: 5,
+      fontFamily: `heading`,
+      fontWeight: `heading`,
+      mt: 0,
+      mb: 4,
+    },
+    p: {
+      color: baseTheme.tones.NEUTRAL.dark,
+      fontSize: 2,
+      fontFamily: `body`,
+      fontWeight: `body`,
+      mt: 0,
+      mb: 4,
+      lineHeight: 1.45,
+    },
+    pre: {
+      fontFamily: baseTheme.fonts.monospace,
+      fontSize: 0,
+      lineHeight: 1.45,
+      mt: 0,
+      mb: 6,
+      whiteSpace: `pre-wrap`,
+    },
+    inlineCode: {
+      backgroundColor: `hsla(0,0%,0%,0.06)`,
+      color: baseTheme.tones.NEUTRAL.darker,
+      borderRadius: `3px`,
+      py: `0.2em`,
+      px: `0.2em`,
+      fontSize: `90%`,
+    },
+    ol: {
+      color: baseTheme.tones.NEUTRAL.dark,
+      paddingLeft: 8,
+      mt: 0,
+      mb: 6,
+      fontFamily: `body`,
+      fontWeight: `body`,
+    },
+    ul: {
+      color: baseTheme.tones.NEUTRAL.dark,
+      paddingLeft: 8,
+      mt: 0,
+      mb: 6,
+      fontFamily: `body`,
+      fontWeight: `body`,
+    },
+    li: {
+      color: baseTheme.tones.NEUTRAL.dark,
+      mb: 2,
+      fontFamily: `body`,
+      fontWeight: `body`,
+      lineHeight: 1.6,
+    },
+  },
+})
+
+const theme = merge(recipesTheme, {
   colors: {
-    ...baseTheme.colors,
     background: baseTheme.colors.primaryBackground,
   },
   fonts: {
-    ...baseTheme.fonts,
     // We want to use inter for all text on the page, no more futura!
     brand: baseTheme.fonts.sans,
     heading: baseTheme.fonts.sans,
@@ -61,7 +129,7 @@ const theme = {
       backgroundColor: `grey.5`,
     },
   },
-}
+})
 
 const GraphQLProvider: React.FC<{}> = ({ children }) => {
   const [status, setStatus] = React.useState(`loading`)

diff --git a/packages/gatsby-admin/src/components/recipes-gui/code-diff.js b/packages/gatsby-admin/src/components/recipes-gui/code-diff.js
@@ -0,0 +1,77 @@
+/** @jsx jsx */
+import ansi2HTML from "ansi-html"
+import { getTheme, Heading } from "gatsby-interface"
+import { jsx, Styled } from "theme-ui"
+
+const theme = getTheme()
+
+ansi2HTML.setColors({
+  red: theme.tones.DANGER.medium.slice(1),
+  green: theme.tones.SUCCESS.medium.slice(1),
+  yellow: theme.tones.WARNING.medium.slice(1),
+})
+
+const escapeTags = str => str.replace(/</g, `&lt;`)
+
+const DiffPre = ({ resourcePlan, ...props }) => (
+  <Styled.pre
+    {...props}
+    sx={{
+      background: theme => theme.tones.BRAND.superLight,
+      borderRadius: 2,
+      padding: 4,
+    }}
+    dangerouslySetInnerHTML={{
+      __html: ansi2HTML(escapeTags(resourcePlan.diff)),
+    }}
+  />
+)
+
+const CodeDiff = ({ resourcePlan, ...props }) => {
+  if (!resourcePlan.diff) {
+    return null
+  }
+
+  if (resourcePlan.resourceName === `File`) {
+    return (
+      <div
+        sx={{
+          background: theme => theme.tones.BRAND.superLight,
+          border: theme => `1px solid ${theme.tones.BRAND.lighter}`,
+          borderRadius: 2,
+        }}
+      >
+        <Heading
+          as="h6"
+          sx={{
+            px: 4,
+            py: 3,
+            fontWeight: `normal`,
+            borderBottom: theme => `1px solid ${theme.tones.BRAND.lighter}`,
+          }}
+        >
+          {resourcePlan.resourceDefinitions.path}
+        </Heading>
+        <DiffPre
+          resourcePlan={resourcePlan}
+          sx={{
+            borderTopLeftRadius: 0,
+            borderTopRightRadius: 0,
+          }}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <DiffPre
+      {...props}
+      resourcePlan={resourcePlan}
+      sx={{
+        border: theme => `1px solid ${theme.tones.BRAND.lighter}`,
+      }}
+    />
+  )
+}
+
+export default CodeDiff