lint

docs/pages/_app.js

@@ -2,8 +2,8 @@ import React from 'react'
 import App, {Container} from 'next/app'
 import {MDXProvider} from '@mdx-js/tag'
 import Head from 'next/head'
-import {BaseStyles, Box, Flex, Link, theme} from '@primer/components'
-import {Header, CodeExample, PackageHeader, SideNav, IndexHero} from '../src/components'
+import {BaseStyles, Box, Flex, theme} from '@primer/components'
+import {Header, PackageHeader, SideNav, IndexHero} from '../src/components'
 import getComponents from '../src/markdown'
 import {rootPage} from '../src/utils'
 import {CONTENT_MAX_WIDTH} from '../src/constants'

docs/src/CodeExample.js

@@ -35,9 +35,7 @@ export default function CodeExample(props) {
   const {unsafeInnerHTML, children, ...rest} = props
   const lang = getLanguage(props.className)
   rest.transformCode = getTransformForLanguage(lang)
-  const code = unsafeInnerHTML
-    ? unsafeInnerHTML.__html
-    : React.Children.toArray(children).join('\n')
+  const code = unsafeInnerHTML ? unsafeInnerHTML.__html : React.Children.toArray(children).join('\n')
   rest.children = code
   return (
     <BorderBox bg="gray.1" my={4}>
@@ -52,7 +50,5 @@ function getLanguage(className) {
 }
 
 function getTransformForLanguage(lang) {
-  return lang === 'jsx'
-    ? defaultTransform
-    : html => defaultTransform(converter.convert(html))
+  return lang === 'jsx' ? defaultTransform : html => defaultTransform(converter.convert(html))
 }

docs/src/Outline.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import {Box} from '@primer/components'
 
 export default function Outline({outline, ...rest}) {
@@ -5,7 +6,7 @@ export default function Outline({outline, ...rest}) {
     return (
       <Box is="details" mb={4}>
         <summary>Table of contents</summary>
-        <TOCList items={outline} {...rest} />
+        <OutlineList items={outline} {...rest} />
       </Box>
     )
   }

docs/src/landing/index.js

@@ -32,7 +32,7 @@ export function StylesOverview(props) {
   return (
     <Flex {...props}>
       {styleTypes.map(({name, desc, image}) => (
-        <Flex.Item is={Text} textAlign="center" mx={4}>
+        <Flex.Item is={Text} textAlign="center" mx={4} key={name}>
           <Image src={image} height={90} mb={2} />
           <OverviewTitle>{name}</OverviewTitle>
           <OverviewText>{desc}</OverviewText>
@@ -43,11 +43,13 @@ export function StylesOverview(props) {
 }
 
 StylesOverview.propTypes = {
-  types: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.node,
-    desc: PropTypes.node,
-    image: PropTypes.func
-  }))
+  types: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.node,
+      desc: PropTypes.node,
+      image: PropTypes.func
+    })
+  )
 }
 
 export function PrimitivesOverview(props) {
@@ -69,7 +71,7 @@ export function PrimitivesOverview(props) {
     }
   ]
   return (
-    <Box width={["auto", "auto", 10/12]} mx="auto" {...props}>
+    <Box width={['auto', 'auto', 10 / 12]} mx="auto" {...props}>
       {primitiveTypes.map(({name, desc, image}) => (
         <Flex key={name} my={6} alignItems="center">
           <Box width={300} mr={6} py={2}>
@@ -86,11 +88,13 @@ export function PrimitivesOverview(props) {
 }
 
 PrimitivesOverview.propTypes = {
-  types: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.node,
-    desc: PropTypes.node,
-    image: PropTypes.func
-  }))
+  types: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.node,
+      desc: PropTypes.node,
+      image: PropTypes.func
+    })
+  )
 }
 
 function Image(props) {
@@ -111,11 +115,10 @@ export function PrimerPackageBox({data, count, ...rest}) {
       <BorderBox bg="gray.1" width="auto" px={6} py={3} my={4}>
         <Flex alignItems="center" justifyContent="space-around">
           <Text fontSize={3} fontWeight="bold" mb={2} textAlign="center">
-            <Link href={packageSourceURL('primer')} color="inherit">Primer</Link>
-            {' '}
-            <Link href={packageURL('primer')}>
-              {data.version}
-            </Link>
+            <Link href={packageSourceURL('primer')} color="inherit">
+              Primer
+            </Link>{' '}
+            <Link href={packageURL('primer')}>{data.version}</Link>
           </Text>
           <Link href="https://travis-ci.org/primer/primer" mt={-1}>
             <img alt="Build Status" src="https://travis-ci.org/primer/primer.svg?branch=master" />
@@ -136,9 +139,10 @@ export function MetaPackageBox({children, data, title, ...rest}) {
   return (
     <Flex.Item is={BorderBox} bg="white" mx={4} flexShrink={0} {...rest}>
       <Heading fontSize={2} is={BorderBox} bg="gray.1" border={0} borderBottom={1} px={3} py={2}>
-        <Link href={packageSourceURL(data.name)}>{title}</Link>
-        {' '}
-        <Link href={packageURL(data.name)} ml={2}>{data.version}</Link>
+        <Link href={packageSourceURL(data.name)}>{title}</Link>{' '}
+        <Link href={packageURL(data.name)} ml={2}>
+          {data.version}
+        </Link>
       </Heading>
       <Text is="div" fontSize={1} p={3}>
         {children}
@@ -147,7 +151,9 @@ export function MetaPackageBox({children, data, title, ...rest}) {
         </Text>
         <ul className="list-style-none pl-0">
           {deps.map(dep => (
-            <li><Link href={packageURL(dep)}>{dep}</Link></li>
+            <li key={dep}>
+              <Link href={packageURL(dep)}>{dep}</Link>
+            </li>
           ))}
         </ul>
       </Text>

docs/src/markdown.js

@@ -1,3 +1,4 @@
+import React from 'react'
 import {Heading, Link} from '@primer/components'
 import CodeExample from './CodeExample'
 import Outline from './Outline'