Bump Doctocat to v4 (#322)

* Bump Doctocat to v4 * Fix build error Co-authored-by: Cole Bemis <[email protected]>
primer · Aug 24, 2022 · 7752e54 · 7752e54
1 parent dab0ea3
commit 7752e54
Show file tree

Hide file tree

Showing 34 changed files with 4,045 additions and 3,662 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,19 +1,9 @@
 import React from 'react'
-import {ThemeProvider, createGlobalStyle} from 'styled-components'
-import {BaseStyles, Link, theme} from '@primer/components'
+import {BaseStyles, Link, ThemeProvider} from '@primer/react'
 import {MDXProvider} from '@mdx-js/react'
 
-const GlobalStyle = createGlobalStyle`
-  a {
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-`
-
 const components = {
-  a: Link
+  a: Link,
   /*
   pre: props => props.children,
   code: Code,
@@ -38,16 +28,17 @@ const components = {
 export function wrapRootElement({element}) {
   return (
     <MDXProvider components={components}>
-      <ThemeProvider theme={theme}>{element}</ThemeProvider>
+      <ThemeProvider>{element}</ThemeProvider>
     </MDXProvider>
   )
 }
 
 export function wrapPageElement({element}) {
   return (
     <>
-      <GlobalStyle />
-      <BaseStyles fontSize={2}>{element}</BaseStyles>
+      <ThemeProvider>
+        <BaseStyles fontSize={2}>{element}</BaseStyles>
+      </ThemeProvider>
     </>
   )
 }
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -5,31 +5,31 @@ module.exports = {
     title: 'Primer Design System',
     shortName: '',
     description: 'The design system that powers GitHub',
-    imageUrl: 'https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png'
+    imageUrl: 'https://user-images.githubusercontent.com/10384315/53922681-2f6d3100-402a-11e9-9719-5d1811c8110a.png',
   },
   plugins: [
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
-        icon: require.resolve('./src/icons/favicon-192.png')
-      }
+        icon: require.resolve('./src/icons/favicon-192.png'),
+      },
     },
     {
       resolve: 'gatsby-plugin-mdx',
       options: {
         extensions: ['.md', '.mdx'],
         defaultLayouts: {
-          default: require.resolve('./src/components/Layout.js')
-        }
-      }
+          default: require.resolve('./src/components/Layout.js'),
+        },
+      },
     },
     'gatsby-plugin-sass',
     'gatsby-plugin-styled-components',
     {
       resolve: 'gatsby-plugin-svgr',
       options: {
-        svgo: false
-      }
+        svgo: false,
+      },
     },
     'gatsby-plugin-react-helmet',
     'gatsby-transformer-yaml',
@@ -38,10 +38,10 @@ module.exports = {
       options: {
         name: 'pages',
         path: path.resolve('./src/pages'),
-        layout: 'default'
-      }
+        layout: 'default',
+      },
     },
     // note: this must go last
-    'gatsby-plugin-meta-redirect'
-  ]
+    'gatsby-plugin-meta-redirect',
+  ],
 }
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -21,9 +21,27 @@ exports.sourceNodes = async ({actions: {createNode}, createContentDigest}) => {
         type: 'PrimerRelease',
         mediaType: 'application/json',
         content: JSON.stringify(release),
-        contentDigest: createContentDigest(release)
-      }
+        contentDigest: createContentDigest(release),
+      },
     }
     createNode(node)
   }
 }
+
+exports.onCreateWebpackConfig = ({stage, loaders, actions}) => {
+  if (stage === 'build-html' || stage === 'develop-html') {
+    actions.setWebpackConfig({
+      module: {
+        rules: [
+          {
+            // Ignore "@github\/markdown-toolbar-element" module during server-side rendering
+            // because it uses DOM APIs that aren't available on the server.
+            // Copied from https://www.gatsbyjs.com/docs/debugging-html-builds/#fixing-third-party-modules
+            test: /@github\/markdown-toolbar-element/,
+            use: loaders.null(),
+          },
+        ],
+      },
+    })
+  }
+}
diff --git a/package.json b/package.json
@@ -11,10 +11,10 @@
     "@mdx-js/mdx": "^1.1.0",
     "@mdx-js/react": "^1.0.27",
     "@primer/component-metadata": "^0.4.1",
-    "@primer/components": "^17.1.1",
-    "@primer/css": "^12.5.0",
-    "@primer/gatsby-theme-doctocat": "1.8.1",
-    "@primer/octicons-react": "^9.1.1",
+    "@primer/css": "^20.4.2",
+    "@primer/gatsby-theme-doctocat": "^4.0.0",
+    "@primer/octicons-react": "^17.4.1",
+    "@primer/react": "^35.2.2",
     "@primer/releases": "0.0.0-634eadc",
     "@svgr/webpack": "^4.3.2",
     "gatsby": "^2.13.39",
@@ -29,7 +29,6 @@
     "gatsby-transformer-yaml": "^2.2.4",
     "isomorphic-unfetch": "^3.0.0",
     "node-fetch": "^2.6.0",
-    "node-sass": "^4.12.0",
     "primer-primitives": "^1.0.2",
     "prop-types": "^15.6.2",
     "react": "^16.13.1",
@@ -42,6 +41,7 @@
   },
   "devDependencies": {
     "eslint": "^5.6.1",
-    "eslint-plugin-github": "^1.4.0"
+    "eslint-plugin-github": "^1.4.0",
+    "sass": "^1.54.5"
   }
 }
diff --git a/script/get-release-data b/script/get-release-data
@@ -4,7 +4,7 @@ packages=(
   primer
   @primer/css
   octicons
-  @primer/components
+  @primer/react
 )
 
 output=""

diff --git a/src/components/Article.js b/src/components/Article.js
@@ -1,32 +1,32 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Link, Text, Heading, StyledOcticon} from '@primer/components'
-import {Note, Tag, LinkExternal, Megaphone, Broadcast} from '@primer/octicons-react'
+import {Box, Link, Text, Heading, StyledOcticon} from '@primer/react'
+import {NoteIcon, TagIcon, MegaphoneIcon, BroadcastIcon} from '@primer/octicons-react'
 
 export const iconForType = {
-  article: Note,
-  release: Tag,
-  podcast: Broadcast,
-  talk: Megaphone
+  article: NoteIcon,
+  release: TagIcon,
+  podcast: BroadcastIcon,
+  talk: MegaphoneIcon,
 }
 
 const packageNames = {
   '@primer/css': 'Primer CSS',
   primer: 'Primer CSS',
-  '@primer/components': 'Primer React',
-  '@primer/octicons': 'Octicons'
+  '@primer/react': 'Primer React',
+  '@primer/octicons': 'Octicons',
 }
 
-const articleIcon = type => iconForType[type] || LinkExternal
+const articleIcon = (type) => iconForType[type] || LinkExternal
 
-const articleDomain = url => {
+const articleDomain = (url) => {
   return url.substring(url.indexOf('//') + 2, url.indexOf('/', 9))
 }
 
 const now = new Date()
 const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 
-const articleDate = date => {
+const articleDate = (date) => {
   const day = new Date(date)
   return `${monthNames[day.getMonth()]} ${day.getDate()}${
     now.getFullYear() > day.getFullYear() ? `, ${day.getFullYear()}` : ''
@@ -40,7 +40,7 @@ const getTitle = (title, name, version) => {
   return title
 }
 
-const getDescription = description => {
+const getDescription = (description) => {
   const maxWords = 30
   if (description) {
     const descriptionArray = description.split(' ')
@@ -54,22 +54,20 @@ const getDescription = description => {
 
 const Article = ({url, title, description, date, type, name, version}) => {
   return (
-    <Box mb={8} width={[1, 1, 1, 7 / 12]}>
+    <Box pb={8} width={[1, 1, 1, 7 / 12]}>
       <Link target="_blank" href={url}>
-        <Heading fontSize={4} pb={1} lineHeight={1.25} color="blue.4">
-          {getTitle(title, name, version)}
-        </Heading>
+        <Heading sx={{fontSize: 4, pb: 1, lineHeight: 1.25}}>{getTitle(title, name, version)}</Heading>
       </Link>
-      <Box mb={3}>
-        <Text fontSize={1} fontFamily="mono" color="blue.3">
-          <StyledOcticon icon={articleIcon(type)} size={16} mr={1} />
-          <Link color="blue.3" href={url}>
+      <Box>
+        <Text sx={{m: 0, fontSize: 1, fontFamily: 'mono'}}>
+          <Link href={url}>
+            <StyledOcticon icon={articleIcon(type)} size={16} sx={{mr: 1}} />
             {articleDomain(url)}
           </Link>
           &nbsp;&middot; {articleDate(date)}
         </Text>
       </Box>
-      <Text as="p" mt={0} mb={1} color="blue.2" fontSize={3}>
+      <Text sx={{m: 0, fontSize: 3}} as="p">
         {getDescription(description)}
       </Text>
     </Box>
@@ -82,7 +80,7 @@ Article.propTypes = {
   title: PropTypes.string,
   type: PropTypes.oneOf(Object.keys(iconForType)),
   url: PropTypes.string,
-  version: PropTypes.string
+  version: PropTypes.string,
 }
 
 export default Article
diff --git a/src/components/AvatarShape.js b/src/components/AvatarShape.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import {Box, Link, themeGet} from '@primer/components'
+import {Box, Link, themeGet} from '@primer/react'
 import {color} from 'styled-system'
 import {ReactComponent as Circle} from '../svg/circle.svg'
 import {ReactComponent as Hexagon} from '../svg/hexagon.svg'
@@ -15,7 +15,7 @@ const Shape = styled(({className, shape}) => {
     hexagon: Hexagon,
     circle: Circle,
     square: Square,
-    diamond: Diamond
+    diamond: Diamond,
   }
   const Tag = shapes[shape]
   return <Tag className={className} />
@@ -41,7 +41,7 @@ const Image = styled('img')`
 const A = styled(Box)`
   position: relative;
   display: inline-block;
-  clip-path: url("#clip-${props => props.shape}");
+  clip-path: url('#clip-${(props) => props.shape}');
   &:after {
     content: '';
     transition: opacity ${TRANSITION_STYLE};
@@ -51,9 +51,9 @@ const A = styled(Box)`
     right: 0;
     bottom: 0;
     background: radial-gradient(ellipse at top left, ${themeGet('colors.blue.4')}, transparent),
-    radial-gradient(ellipse at bottom right, ${themeGet('colors.orange.4')}, transparent),
-    linear-gradient(to right, ${themeGet('colors.orange.5')} 50%, transparent),
-    linear-gradient(to left, ${themeGet('colors.blue.6')} 50%, transparent);
+      radial-gradient(ellipse at bottom right, ${themeGet('colors.orange.4')}, transparent),
+      linear-gradient(to right, ${themeGet('colors.orange.5')} 50%, transparent),
+      linear-gradient(to left, ${themeGet('colors.blue.6')} 50%, transparent);
     mix-blend-mode: multiply;
     opacity: 0;
   }
@@ -69,7 +69,7 @@ const ShapeOutline = styled(Link)`
   display: block;
   &:before {
     content: '';
-    clip-path: url("#clip-${props => props.shape}");
+    clip-path: url('#clip-${(props) => props.shape}');
     ${color};
     position: absolute;
     top: 0;
@@ -79,7 +79,7 @@ const ShapeOutline = styled(Link)`
   }
 `
 
-const AvatarShape = props => (
+const AvatarShape = (props) => (
   <ShapeOutline shape={props.shape} bg={props.bg} {...props}>
     <A className={props.className} shape={props.shape}>
       <Image src={props.src} $hover={props.hover} />

diff --git a/src/components/BackgroundImage.js b/src/components/BackgroundImage.js
@@ -1,5 +1,5 @@
 import {backgroundImage} from 'styled-system'
-import {Box} from '@primer/components'
+import {Box} from '@primer/react'
 import styled from 'styled-components'
 
 const BackgroundImage = styled(Box)`

diff --git a/src/components/ButtonFill.js b/src/components/ButtonFill.js
@@ -1,6 +1,6 @@
 // Extends Link from primer/components to make color primitives available, as well as fontSize and space which should be added in primer/components. Ideally I'd use defaultProps here but because we use !important on utilities the theme colors won't override. We could probably add a function to handle this.
 
-import {Link, themeGet} from '@primer/components'
+import {Link, themeGet} from '@primer/react'
 import {space} from 'styled-system'
 import styled from 'styled-components'
 
@@ -11,7 +11,7 @@ const ButtonFill = styled(Link)`
   border-style: solid;
   background-color: ${themeGet('colors.blue.3')};
   padding: 0.75em 1.25em;
-  font-size: ${props => props.theme.fontSizes[2]};
+  font-size: ${(props) => props.theme.fontSizes[2]};
   border-radius: 6px;
   font-size: 16px;
   font-weight: 600;

diff --git a/src/components/ButtonFillDark.js b/src/components/ButtonFillDark.js
diff --git a/src/components/ButtonOutline.js b/src/components/ButtonOutline.js
@@ -1,6 +1,6 @@
 // Extends Link from primer/components to make color primitives available, as well as fontSize and space which should be added in primer/components. Ideally I'd use defaultProps here but because we use !important on utilities the theme colors won't override. We could probably add a function to handle this.
 
-import {Link, themeGet} from '@primer/components'
+import {Link, themeGet} from '@primer/react'
 import {space} from 'styled-system'
 import styled from 'styled-components'
 
@@ -10,7 +10,7 @@ const ButtonOutline = styled(Link)`
   border-width: 1px;
   border-style: solid;
   padding: 0.75em 1.25em;
-  font-size: ${props => props.theme.fontSizes[2]};
+  font-size: ${(props) => props.theme.fontSizes[2]};
   border-radius: 6px;
   font-size: 16px;
   font-weight: 600;