Skip to content

Commit 703678e

Browse files
LBLaurie Barthjxnblk
authoredAug 28, 2020
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>
·
v0.0.0-6babel-plugin-remove-graphql-queries@2.9.18
1 parent 04c75bb commit 703678e

24 files changed

+882
-1184
lines changed
 

‎packages/gatsby-admin/gatsby-node.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
exports.onCreateWebpackConfig = ({ actions }) => {
2+
actions.setWebpackConfig({
3+
node: {
4+
fs: 'empty'
5+
}
6+
})
7+
}

‎packages/gatsby-admin/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@typescript-eslint/parser": "^2.28.0",
1919
"csstype": "^2.6.10",
2020
"feedback-fish": "^0.1.12",
21+
"query-string": "^6.13.1",
2122
"formik": "^2.1.4",
2223
"gatsby": "^2.24.51",
2324
"gatsby-interface": "0.0.183",

‎packages/gatsby-admin/src/components/providers.tsx

+74-6
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,87 @@ import React from "react"
22
import { Provider, Client } from "urql"
33
import { ThemeProvider, getTheme } from "gatsby-interface"
44
import { ThemeProvider as StrictUIProvider } from "strict-ui"
5-
import { Spinner } from "theme-ui"
5+
import { Spinner, merge } from "theme-ui"
66
import { createUrqlClient } from "../urql-client"
7+
import "normalize.css"
78

89
const baseTheme = getTheme()
910

10-
const theme = {
11-
...baseTheme,
11+
const recipesTheme = merge(baseTheme, {
12+
colors: {
13+
background: `white`,
14+
},
15+
styles: {
16+
h1: {
17+
fontSize: 6,
18+
fontFamily: `heading`,
19+
fontWeight: `heading`,
20+
mt: 0,
21+
mb: 4,
22+
},
23+
h2: {
24+
fontSize: 5,
25+
fontFamily: `heading`,
26+
fontWeight: `heading`,
27+
mt: 0,
28+
mb: 4,
29+
},
30+
p: {
31+
color: baseTheme.tones.NEUTRAL.dark,
32+
fontSize: 2,
33+
fontFamily: `body`,
34+
fontWeight: `body`,
35+
mt: 0,
36+
mb: 4,
37+
lineHeight: 1.45,
38+
},
39+
pre: {
40+
fontFamily: baseTheme.fonts.monospace,
41+
fontSize: 0,
42+
lineHeight: 1.45,
43+
mt: 0,
44+
mb: 6,
45+
whiteSpace: `pre-wrap`,
46+
},
47+
inlineCode: {
48+
backgroundColor: `hsla(0,0%,0%,0.06)`,
49+
color: baseTheme.tones.NEUTRAL.darker,
50+
borderRadius: `3px`,
51+
py: `0.2em`,
52+
px: `0.2em`,
53+
fontSize: `90%`,
54+
},
55+
ol: {
56+
color: baseTheme.tones.NEUTRAL.dark,
57+
paddingLeft: 8,
58+
mt: 0,
59+
mb: 6,
60+
fontFamily: `body`,
61+
fontWeight: `body`,
62+
},
63+
ul: {
64+
color: baseTheme.tones.NEUTRAL.dark,
65+
paddingLeft: 8,
66+
mt: 0,
67+
mb: 6,
68+
fontFamily: `body`,
69+
fontWeight: `body`,
70+
},
71+
li: {
72+
color: baseTheme.tones.NEUTRAL.dark,
73+
mb: 2,
74+
fontFamily: `body`,
75+
fontWeight: `body`,
76+
lineHeight: 1.6,
77+
},
78+
},
79+
})
80+
81+
const theme = merge(recipesTheme, {
1282
colors: {
13-
...baseTheme.colors,
1483
background: baseTheme.colors.primaryBackground,
1584
},
1685
fonts: {
17-
...baseTheme.fonts,
1886
// We want to use inter for all text on the page, no more futura!
1987
brand: baseTheme.fonts.sans,
2088
heading: baseTheme.fonts.sans,
@@ -61,7 +129,7 @@ const theme = {
61129
backgroundColor: `grey.5`,
62130
},
63131
},
64-
}
132+
})
65133

66134
const GraphQLProvider: React.FC<{}> = ({ children }) => {
67135
const [status, setStatus] = React.useState(`loading`)

‎packages/gatsby-admin/src/components/recipes-gui/code-diff.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/** @jsx jsx */
2+
import ansi2HTML from "ansi-html"
3+
import { getTheme, Heading } from "gatsby-interface"
4+
import { jsx, Styled } from "theme-ui"
5+
6+
const theme = getTheme()
7+
8+
ansi2HTML.setColors({
9+
red: theme.tones.DANGER.medium.slice(1),
10+
green: theme.tones.SUCCESS.medium.slice(1),
11+
yellow: theme.tones.WARNING.medium.slice(1),
12+
})
13+
14+
const escapeTags = str => str.replace(/</g, `&lt;`)
15+
16+
const DiffPre = ({ resourcePlan, ...props }) => (
17+
<Styled.pre
18+
{...props}
19+
sx={{
20+
background: theme => theme.tones.BRAND.superLight,
21+
borderRadius: 2,
22+
padding: 4,
23+
}}
24+
dangerouslySetInnerHTML={{
25+
__html: ansi2HTML(escapeTags(resourcePlan.diff)),
26+
}}
27+
/>
28+
)
29+
30+
const CodeDiff = ({ resourcePlan, ...props }) => {
31+
if (!resourcePlan.diff) {
32+
return null
33+
}
34+
35+
if (resourcePlan.resourceName === `File`) {
36+
return (
37+
<div
38+
sx={{
39+
background: theme => theme.tones.BRAND.superLight,
40+
border: theme => `1px solid ${theme.tones.BRAND.lighter}`,
41+
borderRadius: 2,
42+
}}
43+
>
44+
<Heading
45+
as="h6"
46+
sx={{
47+
px: 4,
48+
py: 3,
49+
fontWeight: `normal`,
50+
borderBottom: theme => `1px solid ${theme.tones.BRAND.lighter}`,
51+
}}
52+
>
53+
{resourcePlan.resourceDefinitions.path}
54+
</Heading>
55+
<DiffPre
56+
resourcePlan={resourcePlan}
57+
sx={{
58+
borderTopLeftRadius: 0,
59+
borderTopRightRadius: 0,
60+
}}
61+
/>
62+
</div>
63+
)
64+
}
65+
66+
return (
67+
<DiffPre
68+
{...props}
69+
resourcePlan={resourcePlan}
70+
sx={{
71+
border: theme => `1px solid ${theme.tones.BRAND.lighter}`,
72+
}}
73+
/>
74+
)
75+
}
76+
77+
export default CodeDiff

0 commit comments

Comments
 (0)
Please sign in to comment.