@primer/gatsby-theme-doctocat 3.1.0 → 3.2.1

package/.eslintrc.json

@@ -20,6 +20,7 @@
     "react/prop-types": "off",
     "react/display-name": "off",
     "eslint-comments/no-use": "off",
-    "no-shadow": "off"
+    "no-shadow": "off",
+    "primer-react/no-system-props": ["warn", {"includeUtilityComponents": true}]
   }
 }

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @primer/gatsby-theme-doctocat
 
+## 3.2.1
+
+### Patch Changes
+
+- [`1c0ca36`](https://github.com/primer/doctocat/commit/1c0ca368ed9a61ac79eb6e47ff7208c0d5b038d2) [#361](https://github.com/primer/doctocat/pull/361) Thanks [@colebemis](https://github.com/colebemis)! - Refactor internals to not use deprecated Primer React components
+
+* [`ac6de57`](https://github.com/primer/doctocat/commit/ac6de57fdf7629eb74b9246f6ac62f97bca0d4a4) [#334](https://github.com/primer/doctocat/pull/334) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Upgrade from `@primer/components@30.0.0` to `@primer/react@34.5.0`
+
+## 3.2.0
+
+### Minor Changes
+
+- [`438eadb`](https://github.com/primer/doctocat/commit/438eadbae21b14c246ca7f6c9f405a1c4a00728a) [#332](https://github.com/primer/doctocat/pull/332) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Support function for `live-code-scope`
+
+## 3.1.1
+
+### Patch Changes
+
+- [`45e8748`](https://github.com/primer/doctocat/commit/45e8748a547903b8f7091fafb5b13e5c197b0dae) [#324](https://github.com/primer/doctocat/pull/324) Thanks [@rezrah](https://github.com/rezrah)! - Only add pages that have `componentId` and `status` to `components.json`
+
 ## 3.1.0
 
 ### Minor Changes

package/babel.config.js

@@ -1,3 +1,13 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react']
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ],
+    '@babel/preset-react'
+  ]
 }

package/gatsby-node.js

@@ -79,7 +79,7 @@ exports.onPostBuild = async ({graphql}) => {
   try {
     const {data} = await graphql(`
       query {
-        allSitePage(filter: {context: {frontmatter: {componentId: {ne: null}}}}) {
+        allSitePage(filter: {context: {frontmatter: {componentId: {ne: null}, status: {ne: null}}}}) {
           nodes {
             path
             context {

package/jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.js'],
-  setupFilesAfterEnv: ['<rootDir>/setup-tests.js']
+  setupFilesAfterEnv: ['<rootDir>/setup-tests.js'],
+  transformIgnorePatterns: ['/node_modules/(?!@primer/behaviors)']
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -15,7 +15,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-primer-react": "0.5",
+    "eslint-plugin-primer-react": "0.7.3",
     "eslint-plugin-react": "^7.26.1",
     "gatsby": "^2.24.52",
     "prettier": "^2.4.1",
@@ -33,7 +33,7 @@
     "@mdx-js/mdx": "^1.0.21",
     "@mdx-js/react": "^1.0.21",
     "@primer/component-metadata": "^0.4.0",
-    "@primer/components": "^30.0.0",
+    "@primer/react": "^34.5.0",
     "@primer/octicons-react": "^16.0.0",
     "@styled-system/theme-get": "^5.0.12",
     "@testing-library/jest-dom": "^4.1.0",

package/src/components/caption.js

@@ -1,8 +1,8 @@
-import {Text} from '@primer/components'
+import {Text} from '@primer/react'
 import React from 'react'
 
 function Caption(props) {
-  return <Text as="p" mt={2} mb={3} fontSize={1} color="gray.5" {...props} />
+  return <Text as="p" {...props} sx={{mt: 2, mb: 3, fontSize: 1, color: 'gray.5'}} />
 }
 
 export default Caption

package/src/components/clipboard-copy.js

@@ -1,4 +1,4 @@
-import {Button, StyledOcticon} from '@primer/components'
+import {Button, StyledOcticon} from '@primer/react'
 import {CheckIcon, CopyIcon} from '@primer/octicons-react'
 import copy from 'copy-to-clipboard'
 import React from 'react'

package/src/components/code.js

@@ -1,55 +1,52 @@
-import {Absolute, Box, Relative, Text} from '@primer/components'
+import {Box, Text} from '@primer/react'
 import Highlight, {defaultProps} from 'prism-react-renderer'
-import Prism from '../prism'
-import githubTheme from '../github'
 import React from 'react'
+import githubTheme from '../github'
+import Prism from '../prism'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'
 
-function Code({className, children, live, noinline}) {
+function Code({className, children, live, noinline, metastring}) {
   const language = className ? className.replace(/language-/, '') : ''
   const code = children.trim()
 
   if (live) {
-    return <LiveCode code={code} language={language} noinline={noinline} />
+    return <LiveCode code={code} language={language} noinline={noinline} metastring={metastring} />
   }
 
   return (
-    <Relative
+    <Box
       sx={{
         // Make <pre> adjust to the width of the container
         // https://stackoverflow.com/a/14406386
         display: 'table',
         tableLayout: 'fixed',
-        width: '100%'
+        width: '100%',
+        position: 'relative'
       }}
     >
-      <Absolute sx={{top: 0, right: 0, p: 2}}>
+      <Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>
         <ClipboardCopy value={code} />
-      </Absolute>
+      </Box>
       <Highlight {...defaultProps} Prism={Prism} code={code} language={language} theme={githubTheme}>
         {({className, style, tokens, getLineProps, getTokenProps}) => (
           <Box
             as="pre"
             className={className}
-            mt={0}
-            mb={3}
-            p={3}
-            border={0}
             style={{...style, overflow: 'auto'}}
-            sx={{borderRadius: 2}}
+            sx={{borderRadius: 2, mt: 0, mb: 3, p: 3, border: 0}}
           >
             {tokens.map((line, i) => (
               <div key={i} {...getLineProps({line, key: i})}>
                 {line.map((token, key) => (
-                  <Text key={key} fontFamily="mono" fontSize={1} {...getTokenProps({token, key})} />
+                  <Text key={key} {...getTokenProps({token, key})} sx={{fontFamily: 'mono', fontSize: 1}} />
                 ))}
               </div>
             ))}
           </Box>
         )}
       </Highlight>
-    </Relative>
+    </Box>
   )
 }
 

package/src/components/container.js

@@ -1,9 +1,9 @@
-import {Box} from '@primer/components'
+import {Box} from '@primer/react'
 import React from 'react'
 
 function Container({children}) {
   return (
-    <Box id="skip-nav" width="100%" maxWidth={960} p={5} mx="auto">
+    <Box id="skip-nav" sx={{width: '100%', maxWidth: 960, p: 5, mx: 'auto'}}>
       {children}
     </Box>
   )

package/src/components/contributors.js

@@ -1,4 +1,4 @@
-import {Avatar, Box, Link, Text, Tooltip} from '@primer/components'
+import {Avatar, Box, Link, Text, Tooltip} from '@primer/react'
 import {format} from 'date-fns'
 import uniqBy from 'lodash.uniqby'
 import pluralize from 'pluralize'
@@ -12,8 +12,8 @@ function Contributors({contributors}) {
 
   return (
     <div>
-      <Box display="flex" alignItems="center">
-        <Text mr={2}>
+      <Box sx={{display: 'flex', alignItems: 'center'}}>
+        <Text sx={{mr: 2}}>
           {uniqueContributors.length} {pluralize('contributor', uniqueContributors.length)}
         </Text>
         {uniqueContributors.map(contributor => (
@@ -30,7 +30,7 @@ function Contributors({contributors}) {
       </Box>
 
       {latestContributor.latestCommit ? (
-        <Text fontSize={1} color="fg.muted" mt={1}>
+        <Text sx={{fontSize: 1, color: 'fg.muted', mt: 1}}>
           Last edited by <Link href={`https://github.com/${latestContributor.login}`}>{latestContributor.login}</Link>{' '}
           on{' '}
           <Link href={latestContributor.latestCommit.url}>

package/src/components/details.js

@@ -9,7 +9,7 @@ if (typeof window !== 'undefined') {
   import('details-element-polyfill')
 }
 
-// TODO: Replace this Details component with the one from @primer/components when 14.0.0 is released.
+// TODO: Replace this Details component with the one from @primer/react when 14.0.0 is released.
 // Reference: https://github.com/primer/components/pull/499
 
 const DetailsReset = styled.details`

package/src/components/do-dont.js

@@ -1,10 +1,10 @@
-import {Box, StyledOcticon, Text} from '@primer/components'
+import {Box, StyledOcticon, Text} from '@primer/react'
 import {CheckCircleFillIcon, XCircleFillIcon} from '@primer/octicons-react'
 import React from 'react'
 
 export function DoDontContainer({stacked, children}) {
   return (
-    <Box display="grid" gridTemplateColumns={['1fr', null, stacked ? '1fr' : '1fr 1fr']} gridGap={4} mb={4}>
+    <Box sx={{display: 'grid', gridTemplateColumns: ['1fr', null, stacked ? '1fr' : '1fr 1fr'], gridGap: 4, mb: 4}}>
       {children}
     </Box>
   )
@@ -24,14 +24,12 @@ export function Dont(props) {
 
 function DoDontBase({children, title, icon: Icon, iconBg}) {
   return (
-    <Box display="flex" flexDirection="column">
-      <Box display="flex" alignSelf="start" flexDirection="row" alignItems="center" mb="2">
+    <Box sx={{display: 'flex', flexDirection: 'column'}}>
+      <Box sx={{display: 'flex', alignSelf: 'start', flexDirection: 'row', alignItems: 'center', mb: '2'}}>
         <StyledOcticon icon={Icon} sx={{color: iconBg}} />
-        <Text fontWeight="bold" color="fg.default" ml={2}>
-          {title}
-        </Text>
+        <Text sx={{fontWeight: 'bold', color: 'fg.default', ml: 2}}>{title}</Text>
       </Box>
-      <Box display="flex" flexDirection="column" sx={{'& *:last-child': {mb: 0}, img: {maxWidth: '100%'}}}>
+      <Box sx={{'& *:last-child': {mb: 0}, img: {maxWidth: '100%'}, display: 'flex', flexDirection: 'column'}}>
         {children}
       </Box>
     </Box>

package/src/components/drawer.js

@@ -1,4 +1,4 @@
-import {Fixed} from '@primer/components'
+import {Box} from '@primer/react'
 import {AnimatePresence, motion} from 'framer-motion'
 import React from 'react'
 import {FocusOn} from 'react-focus-on'
@@ -16,7 +16,7 @@ function Drawer({isOpen, onDismiss, children}) {
           onClick={event => event.target.focus()}
         >
           <FocusOn returnFocus={true} onEscapeKey={() => onDismiss()}>
-            <Fixed
+            <Box
               key="overlay"
               as={motion.div}
               initial={{opacity: 0}}
@@ -24,10 +24,10 @@ function Drawer({isOpen, onDismiss, children}) {
               exit={{opacity: 0}}
               transition={{type: 'tween'}}
               onClick={() => onDismiss()}
-              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)'}}
+              sx={{top: 0, right: 0, bottom: 0, left: 0, bg: 'rgba(0, 0, 0, 0.5)', position: 'fixed'}}
             />
 
-            <Fixed
+            <Box
               key="drawer"
               as={motion.div}
               initial={{x: '100%'}}
@@ -35,10 +35,10 @@ function Drawer({isOpen, onDismiss, children}) {
               exit={{x: '100%'}}
               transition={{type: 'tween', duration: 0.2}}
               style={{zIndex: 1}}
-              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0'}}
+              sx={{width: 300, top: 0, right: 0, bottom: 0, bg: 'gray.0', position: 'fixed'}}
             >
               {children}
-            </Fixed>
+            </Box>
           </FocusOn>
         </div>
       ) : null}

package/src/components/header.js

@@ -1,5 +1,5 @@
-import {Box, Button, Link, Sticky, StyledOcticon, Text, ThemeProvider, useTheme} from '@primer/components'
 import {MarkGithubIcon, SearchIcon, ThreeBarsIcon} from '@primer/octicons-react'
+import {Box, Button, Link, StyledOcticon, Text, ThemeProvider, useTheme} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 import React from 'react'
 import primerNavItems from '../primer-nav.yml'
@@ -18,16 +18,18 @@ function Header({isSearchEnabled}) {
   const siteMetadata = useSiteMetadata()
   return (
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
-      <Sticky>
+      <Box sx={{position: 'sticky', top: 0, zIndex: 1}}>
         <Box
-          display="flex"
-          height={HEADER_HEIGHT}
-          px={[3, null, null, 4]}
-          alignItems="center"
-          justifyContent="space-between"
-          bg="canvas.default"
+          sx={{
+            display: 'flex',
+            height: HEADER_HEIGHT,
+            px: [3, null, null, 4],
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            bg: 'canvas.default'
+          }}
         >
-          <Box display="flex" alignItems="center">
+          <Box sx={{display: 'flex', alignItems: 'center'}}>
             <Link
               href="https://primer.style"
               sx={{
@@ -57,7 +59,9 @@ function Header({isSearchEnabled}) {
 
             {siteMetadata.shortName ? (
               <>
-                <Text display={['none', null, null, 'inline-block']} color="accent.fg" fontFamily="mono" mx={2}>
+                <Text
+                  sx={{display: ['none', null, null, 'inline-block'], color: 'accent.fg', fontFamily: 'mono', mx: 2}}
+                >
                   /
                 </Text>
                 <Link
@@ -74,16 +78,16 @@ function Header({isSearchEnabled}) {
             ) : null}
 
             {isSearchEnabled ? (
-              <Box display={['none', null, null, 'block']} ml={4}>
+              <Box sx={{display: ['none', null, null, 'block'], ml: 4}}>
                 <Search />
               </Box>
             ) : null}
           </Box>
           <Box>
-            <Box display={['none', null, null, 'block']}>
+            <Box sx={{display: ['none', null, null, 'block']}}>
               <PrimerNavItems items={primerNavItems} />
             </Box>
-            <Box display={['flex', null, null, 'none']}>
+            <Box sx={{display: ['flex', null, null, 'none']}}>
               {isSearchEnabled ? (
                 <>
                   <Button
@@ -113,7 +117,7 @@ function Header({isSearchEnabled}) {
             </Box>
           </Box>
         </Box>
-      </Sticky>
+      </Box>
     </ThemeProvider>
   )
 }
@@ -124,11 +128,11 @@ Header.defaultProps = {
 
 function PrimerNavItems({items}) {
   return (
-    <Box display="flex" alignItems="center" color="fg.default">
+    <Box sx={{display: 'flex', alignItems: 'center', color: 'fg.default'}}>
       {items.map((item, index) => {
         if (item.children) {
           return (
-            <Box ml={4} key={index}>
+            <Box key={index} sx={{ml: 4}}>
               <NavDropdown title={item.title}>
                 {item.children.map(child => (
                   <NavDropdownItem key={child.title} href={child.url}>

package/src/components/heading.js

@@ -1,4 +1,4 @@
-import {Heading, Link} from '@primer/components'
+import {Heading, Link} from '@primer/react'
 import {LinkIcon} from '@primer/octicons-react'
 import themeGet from '@styled-system/theme-get'
 import GithubSlugger from 'github-slugger'

package/src/components/hero-layout.js

@@ -1,10 +1,10 @@
-import {Box, Flex} from '@primer/components'
+import {Box} from '@primer/react'
 import React from 'react'
 import Container from './container'
-import PageFooter from './page-footer'
 import Head from './head'
 import Header from './header'
 import Hero from './hero'
+import PageFooter from './page-footer'
 import Sidebar from './sidebar'
 
 function HeroLayout({children, pageContext}) {
@@ -15,14 +15,14 @@ function HeroLayout({children, pageContext}) {
   }
 
   return (
-    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
+    <Box sx={{flexDirection: 'column', minHeight: '100vh', display: 'flex'}}>
       <Head />
       <Header />
-      <Flex sx={{flex: '1 1 auto', flexDirection: 'row'}}>
-        <Box display={['none', null, null, 'block']}>
+      <Box sx={{flex: '1 1 auto', flexDirection: 'row', display: 'flex'}}>
+        <Box sx={{display: ['none', null, null, 'block']}}>
           <Sidebar />
         </Box>
-        <Box width="100%">
+        <Box sx={{width: '100%'}}>
           <Hero />
           <Container>
             {children}
@@ -32,8 +32,8 @@ function HeroLayout({children, pageContext}) {
             />
           </Container>
         </Box>
-      </Flex>
-    </Flex>
+      </Box>
+    </Box>
   )
 }
 

package/src/components/hero.js

@@ -1,4 +1,4 @@
-import {Box, Heading, Text, ThemeProvider} from '@primer/components'
+import {Box, Heading, Text, ThemeProvider} from '@primer/react'
 import React from 'react'
 import useSiteMetadata from '../use-site-metadata'
 import Container from './container'
@@ -8,12 +8,12 @@ function Hero() {
 
   return (
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
-      <Box bg="canvas.default" py={6}>
+      <Box sx={{bg: 'canvas.default', py: 6}}>
         <Container>
           <Heading as="h1" sx={{color: 'accent.fg', fontSize: 7, m: 0}}>
             {title}
           </Heading>
-          <Text as="p" m={0} color="fg.default" fontSize={4}>
+          <Text as="p" sx={{m: 0, color: 'fg.default', fontSize: 4}}>
             {description}
           </Text>
         </Container>

package/src/components/image-container.js

@@ -1,11 +1,20 @@
-import {BorderBox, Flex} from '@primer/components'
+import {Box} from '@primer/react'
 import React from 'react'
 
 function ImageContainer({children}) {
   return (
-    <BorderBox sx={{p: 6, bg: 'gray.1'}}>
-      <Flex sx={{img: {maxWidth: '100%'}, justifyContent: 'center'}}>{children}</Flex>
-    </BorderBox>
+    <Box
+      sx={{
+        p: 6,
+        bg: 'gray.1',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'border.default',
+        borderRadius: 2
+      }}
+    >
+      <Box sx={{img: {maxWidth: '100%'}, justifyContent: 'center', display: 'flex'}}>{children}</Box>
+    </Box>
   )
 }
 

package/src/components/layout.js

@@ -1,5 +1,5 @@
 import componentMetadata from '@primer/component-metadata'
-import {BorderBox, Box, Flex, Grid, Heading, Position, Text} from '@primer/components'
+import {Box, Heading, Text} from '@primer/react'
 import React from 'react'
 import Head from './head'
 import Header, {HEADER_HEIGHT} from './header'
@@ -26,25 +26,25 @@ function Layout({children, pageContext}) {
   }
 
   return (
-    <Flex sx={{flexDirection: 'column', minHeight: '100vh'}}>
+    <Box sx={{flexDirection: 'column', minHeight: '100vh', display: 'flex'}}>
       <Head title={title} description={description} />
       <Header />
-      <Flex css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row'}}>
-        <Box display={['none', null, null, 'block']}>
+      <Box css={{zIndex: 0}} sx={{flex: '1 1 auto', flexDirection: 'row', display: 'flex'}}>
+        <Box sx={{display: ['none', null, null, 'block']}}>
           <Sidebar />
         </Box>
         <Box
           id="skip-nav"
-          display="flex"
-          width="100%"
-          p={[4, 5, 6, 7]}
           sx={{
             justifyContent: 'center',
-            flexDirection: 'row-reverse'
+            flexDirection: 'row-reverse',
+            display: 'flex',
+            width: '100%',
+            p: [4, 5, 6, 7]
           }}
         >
           {pageContext.tableOfContents.items ? (
-            <Position
+            <Box
               sx={{
                 width: 220,
                 flex: '0 0 auto',
@@ -56,53 +56,58 @@ function Layout({children, pageContext}) {
               }}
               css={{gridArea: 'table-of-contents', overflow: 'auto'}}
             >
-              <Text display="inline-block" fontWeight="bold" mb={1}>
-                On this page
-              </Text>
+              <Text sx={{display: 'inline-block', fontWeight: 'bold', mb: 1}}>On this page</Text>
               <TableOfContents items={pageContext.tableOfContents.items} />
-            </Position>
+            </Box>
           ) : null}
-          <Box width="100%" maxWidth="960px">
-            <Box mb={4}>
-              <Flex sx={{alignItems: 'center'}}>
+          <Box sx={{width: '100%', maxWidth: '960px'}}>
+            <Box sx={{mb: 4}}>
+              <Box sx={{alignItems: 'center', display: 'flex'}}>
                 <Heading as="h1" sx={{mr: 2}}>
                   {title}
                 </Heading>{' '}
                 {status ? <StatusLabel status={status} /> : null}
-              </Flex>
-              {description ? (
-                <Box pb={2} sx={{fontSize: 3}}>
-                  {description}
-                </Box>
-              ) : null}
+              </Box>
+              {description ? <Box sx={{fontSize: 3, pb: 2}}>{description}</Box> : null}
               {source || storybook ? (
-                <Grid
+                <Box
                   sx={{
                     py: 2,
                     gridGap: [1, null, 3],
                     gridAutoFlow: ['row', null, 'column'],
                     gridAutoColumns: 'max-content',
-                    gridAutoRows: 'max-content'
+                    gridAutoRows: 'max-content',
+                    display: 'grid'
                   }}
                 >
                   {source ? <SourceLink href={source} /> : null}
                   {storybook ? <StorybookLink href={storybook} /> : null}
-                </Grid>
+                </Box>
               ) : null}
             </Box>
             {pageContext.tableOfContents.items ? (
-              <BorderBox
-                sx={{display: ['block', null, 'none'], mb: 5, borderColor: 'border.muted', bg: 'canvas.subtle'}}
+              <Box
+                sx={{
+                  display: ['block', null, 'none'],
+                  mb: 5,
+                  borderColor: 'border.muted',
+                  bg: 'canvas.subtle',
+                  borderWidth: '1px',
+                  borderStyle: 'solid',
+                  borderRadius: 2
+                }}
               >
-                <Box p={3}>
-                  <Flex sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
-                    <Text fontWeight="bold">On this page</Text>
-                  </Flex>
+                <Box sx={{p: 3}}>
+                  <Box
+                    sx={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', display: 'flex'}}
+                  >
+                    <Text sx={{fontWeight: 'bold'}}>On this page</Text>
+                  </Box>
                 </Box>
-                <Box p={3} borderTop="1px solid" borderColor="border.muted">
+                <Box sx={{p: 3, borderTop: '1px solid', borderColor: 'border.muted'}}>
                   <TableOfContents items={pageContext.tableOfContents.items} />
                 </Box>
-              </BorderBox>
+              </Box>
             ) : null}
             {children}
             <PageFooter
@@ -111,8 +116,8 @@ function Layout({children, pageContext}) {
             />
           </Box>
         </Box>
-      </Flex>
-    </Flex>
+      </Box>
+    </Box>
   )
 }