fix: move all mdx components to one file

Author: lukekarrys

.eslintrc.js

@@ -12,28 +12,17 @@ module.exports = {
     'plugin:import/recommended',
     'prettier',
   ],
+  settings: {
+    import: {
+      ignore: ['^theme$'],
+    },
+  },
   rules: {
     'react/prop-types': 'off',
+    // our theme use exports which dont work with import/no-unresolved
+    'import/no-unresolved': ['error', {ignore: ['^theme$']}],
   },
   overrides: [
-    // {
-    //   files: ['**/src/**/*.js'],
-    //   // env: {
-    //   //   commonjs: false,
-    //   //   browser: true,
-    //   // },
-    //   // parserOptions: {
-    //   //   sourceType: 'module',
-    //   // },
-    // },
-    // {
-    //   files: ['**/gatsby-*.js'],
-    //   // env: {node: true},
-    // },
-    // {
-    //   files: ['**/test/*', '**/__tests__/*'],
-    //   env: {jest: true},
-    // },
     {
       files: ['src/shared.js'],
       rules: {

.gitignore

@@ -24,6 +24,7 @@
 !/CONTRIBUTING.md
 !/docs/
 !/gatsby-*.js
+!/jest*.js
 !/lib/
 !/LICENSE*
 !/map.js
@@ -33,7 +34,7 @@
 !/release-please-config.json
 !/scripts/
 !/SECURITY.md
-!/src/
+!/src
 !/static/
 !/tap-snapshots/
 !/test/

content/index.mdx

@@ -3,7 +3,7 @@ title: npm Documentation
 edit_on_github: false
 ---
 
-import HeroLayout from 'theme/src/layout-hero'
+import HeroLayout from 'theme/layout/hero.js'
 export default HeroLayout
 
 <Index depth='1' />

theme/jest-preprocess.js renamed to jest-preprocess.js

@@ -38,12 +38,13 @@ module.exports = {
     devDependencies: [],
   },
   allowPaths: [
+    '/src',
     '/.reuse/',
-    '/src/',
     '/static/',
     '/content/',
     '/LICENSE*',
     '/gatsby-*.js',
+    '/jest*.js',
     '/CODE_OF_CONDUCT.md',
     '/CONTRIBUTING.md',
     '/CONTENT-MODEL.md',

theme/jest-setup.js renamed to jest-setup.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import {Link} from '@primer/react'
-import Screenshot from 'theme/src/mdx/screenshot'
-import Note from 'theme/src/mdx/note'
+import {Link, Note, Screenshot} from 'theme'
 
 const shared = {
   /* User login */

theme/jest.config.js renamed to jest.config.js

@@ -12,7 +12,6 @@
 !/CHANGELOG*
 !/docs/
 !/gatsby-*.js
-!/jest*.js
 !/lib/
 !/LICENSE*
 !/map.js

scripts/template-oss/index.js

@@ -53,7 +53,7 @@ module.exports = ({icon}) => ({
       options: {
         extensions: ['.mdx', '.md'],
         defaultLayouts: {
-          default: require.resolve('./src/layout-default.js'),
+          default: require.resolve('./src/layout/default.js'),
         },
       },
     },

src/shared.js

@@ -7,7 +7,10 @@
     "type": "git"
   },
   "private": true,
-  "main": "index.js",
+  "exports": {
+    ".": "./src/mdx/index.js",
+    "./layout/*.js": "./src/layout/*.js"
+  },
   "license": "MIT",
   "scripts": {
     "test": "jest",

theme/.gitignore

@@ -1,4 +1,4 @@
 module.exports = {
   ...require('../../../scripts/template-oss'),
-  allowPaths: ['/src', '/gatsby-*.js', '/jest*.js'],
+  allowPaths: ['/src', '/gatsby-*.js'],
 }

theme/gatsby-config.js

@@ -1,6 +1,5 @@
-import {Avatar, Link, Text, Tooltip} from '@primer/react'
+import {Box, Avatar, Link, Text, Tooltip} from '@primer/react'
 import React from 'react'
-import Flex from '../components/flex'
 
 const pluralize = (word, count) => `${word}${count === 1 ? '' : 's'}`
 
@@ -23,7 +22,7 @@ const format = d => `${months[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`
 function Contributors({logins, latestCommit}) {
   return (
     <div>
-      <Flex alignItems="center">
+      <Box display="flex" alignItems="center">
         <Text mr={2}>
           {logins.length} {pluralize('contributor', logins.length)}
         </Text>
@@ -35,7 +34,7 @@ function Contributors({logins, latestCommit}) {
             </Tooltip>
           </Link>
         ))}
-      </Flex>
+      </Box>
       {latestCommit ? (
         <Text fontSize={1} color="gray.7" mt={1}>
           Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}

theme/package.json

@@ -6,7 +6,6 @@ import MobileSearch from './mobile-search'
 import NavDrawer from './nav-drawer'
 import Search from './search'
 import NpmLogo from './npm-logo'
-import Flex from './flex'
 import useSearch from '../hooks/use-search'
 import useSiteMetadata from '../hooks/use-site-metadata'
 import headerNavItems from '../header-nav.yml'
@@ -33,45 +32,46 @@ function Header({location, repositoryUrl}) {
   return (
     <Box position="sticky" role="banner">
       <NpmHeaderBar />
-      <Flex
+      <Box
+        display="flex"
         height={HEADER_HEIGHT}
         px={[3, null, null, 4]}
         alignItems="center"
         justifyContent="space-between"
         bg="#333333"
       >
-        <Flex alignItems="center">
+        <Box display="flex" alignItems="center">
           <Link as={GatsbyLink} to="/" style={titleStyle} sx={{mr: 4}}>
             <NpmLogo size="32" style={logoStyle} />
             {siteMetadata.title}
           </Link>
           <Box display={['none', null, null, 'block']} ml={4}>
             <Search {...search} />
           </Box>
-        </Flex>
-        <Flex>
+        </Box>
+        <Box display="flex">
           <Box display={['none', null, null, 'block']}>
             <HeaderNavItems items={headerNavItems} />
           </Box>
-          <Flex display={['flex', null, null, 'none']}>
+          <Box display={['flex', null, null, 'none']}>
             <MobileSearch {...search} />
             <NavDrawer location={location} repositoryUrl={repositoryUrl} />
-          </Flex>
-        </Flex>
-      </Flex>
+          </Box>
+        </Box>
+      </Box>
     </Box>
   )
 }
 
 function HeaderNavItems({items}) {
   return (
-    <Flex alignItems="center" color="gray.2">
+    <Box display="flex" alignItems="center" color="gray.2">
       {items.map((item, index) => (
         <Link key={index} href={item.url} sx={{display: 'block', color: 'inherit', ml: 4}}>
           {item.title}
         </Link>
       ))}
-    </Flex>
+    </Box>
   )
 }
 

theme/scripts/template-oss/index.js

@@ -3,7 +3,6 @@ import {Box} from '@primer/react'
 import {XIcon, SearchIcon} from '@primer/octicons-react'
 import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
-import Flex from './flex'
 import DarkButton from './dark-button'
 import DarkTextInput from './dark-text-input'
 import SearchResults from './search-results'
@@ -35,8 +34,8 @@ function MobileSearch({onDismiss, ...props}) {
           zIndex={-1}
           onClick={handleDismiss}
         />
-        <Flex flexDirection="column" height={isOpen ? '100%' : 'auto'}>
-          <Flex bg="gray.9" color="white" p={3} flex="0 0 auto">
+        <Box display="flex" flexDirection="column" height={isOpen ? '100%' : 'auto'}>
+          <Box display="flex" bg="gray.9" color="white" p={3} flex="0 0 auto">
             <motion.div
               initial={{scaleX: 0.1}}
               animate={{scaleX: 1}}
@@ -55,8 +54,9 @@ function MobileSearch({onDismiss, ...props}) {
             <DarkButton ml={3} aria-label="Cancel" onClick={handleDismiss}>
               <XIcon />
             </DarkButton>
-          </Flex>
-          <Flex
+          </Box>
+          <Box
+            display="flex"
             {...getMenuProps({
               bg: 'white',
               py: isOpen ? 1 : 0,
@@ -69,8 +69,8 @@ function MobileSearch({onDismiss, ...props}) {
             })}
           >
             {isOpen ? <SearchResults {...{results, getItemProps, highlightedIndex}} /> : null}
-          </Flex>
-        </Flex>
+          </Box>
+        </Box>
       </Box>
     </FocusOn>
   )

theme/src/components/contributors.js

@@ -1,12 +1,11 @@
 import React from 'react'
-import {Link} from '@primer/react'
+import {Box, Link} from '@primer/react'
 import BorderBox from './border-box'
 import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
 import {Link as GatsbyLink} from 'gatsby'
 import DarkButton from './dark-button'
 import Drawer from './drawer'
 import NavItems from './nav-items'
-import Flex from './flex'
 import navItems from '../nav.yml'
 import headerNavItems from '../header-nav.yml'
 import useSiteMetadata from '../hooks/use-site-metadata'
@@ -37,35 +36,45 @@ function NavDrawer({location, repositoryUrl}) {
         <ThreeBarsIcon />
       </DarkButton>
       <Drawer isOpen={isOpen} onDismiss={setClose}>
-        <Flex
+        <Box
+          display="flex"
           flexDirection="column"
           height="100%"
           bg="gray.0"
           style={{overflow: 'auto', WebkitOverflowScrolling: 'touch'}}
         >
-          <Flex flexDirection="column" flex="1 0 auto" color="gray.7" bg="gray.0">
+          <Box display="flex" flexDirection="column" flex="1 0 auto" color="gray.7" bg="gray.0">
             <BorderBox borderWidth={0} borderRadius={0} borderBottomWidth={1} borderColor="gray.7">
-              <Flex py={3} pl={4} pr={3} alignItems="center" justifyContent="space-between" color="gray.1" bg="gray.9">
+              <Box
+                display="flex"
+                py={3}
+                pl={4}
+                pr={3}
+                alignItems="center"
+                justifyContent="space-between"
+                color="gray.1"
+                bg="gray.9"
+              >
                 <Link as={GatsbyLink} to="/" sx={{display: 'inline-block', color: 'inherit'}}>
                   {siteMetadata.title}
                 </Link>
                 <DarkButton aria-label="Close" onClick={setClose}>
                   <XIcon />
                 </DarkButton>
-              </Flex>
+              </Box>
             </BorderBox>
             {navItems.length > 0 ? (
-              <Flex flexDirection="column">
+              <Box display="flex" flexDirection="column">
                 <NavItems location={location} items={navItems} repositoryUrl={repositoryUrl} />
-              </Flex>
+              </Box>
             ) : null}
-          </Flex>
+          </Box>
           {headerNavItems.length > 0 ? (
-            <Flex flexDirection="column" flex="1 0 auto" color="gray.1" bg="gray.9">
+            <Box display="flex" flexDirection="column" flex="1 0 auto" color="gray.1" bg="gray.9">
               <HeaderNavItems items={headerNavItems} />
-            </Flex>
+            </Box>
           ) : null}
-        </Flex>
+        </Box>
       </Drawer>
     </>
   )