Updates to lint infra and DX to make things a bit smoother (#1229)

segmentio · Jun 9, 2021 · 607458a · 607458a
1 parent 95e9bfd
commit 607458a
Show file tree

Hide file tree

Showing 21 changed files with 497 additions and 227 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -31,11 +31,17 @@ jobs:
             ${{ runner.os }}-yarn-
       - name: Install dependencies
         run: yarn install --frozen-lockfile
+      - name: Install docs dependencies
+        working-directory: './docs'
+        run: 'yarn install --frozen-lockfile'
       - name: Run build
         run: yarn run build
       - name: Run prettier
         run: yarn run prettier 'src/**/*.js' --check
       - name: Run test
         run: yarn run test
+      - name: Run docs lint
+        working-directory: './docs'
+        run: yarn run lint
       - name: Run size-limit
         run: yarn run size-limit
diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
@@ -17,10 +17,12 @@ module.exports = {
         node: true,
         es6: true,
       },
+      plugins: ['prettier'],
       extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:react/recommended',
+        'prettier',
         'plugin:react-hooks/recommended',
         'plugin:jsx-a11y/recommended',
       ],
@@ -30,6 +32,7 @@ module.exports = {
         'react/no-unescaped-entities': 'off',
         'react/react-in-jsx-scope': 'off',
         'jsx-a11y/anchor-is-valid': 'off',
+        'no-console': ['error', { allow: ['warn', 'error'] }],
         '@typescript-eslint/no-unused-vars': ['error'],
         '@typescript-eslint/no-empty-interface': 'off',
         '@typescript-eslint/explicit-function-return-type': 'off',

diff --git a/docs/components/ColorSwatch.tsx b/docs/components/ColorSwatch.tsx
@@ -2,21 +2,12 @@ import React, { useState } from 'react'
 import SearchBar from './SearchBar'
 import { useTheme, majorScale, minorScale, Text, Pane } from 'evergreen-ui'
 
-const Sample: React.FC<{ hex: string; name: string; description?: string }> = ({
-  hex,
-  name,
-  description,
-}) => {
+const Sample: React.FC<{ hex: string; name: string; description?: string }> = ({ hex, name, description }) => {
   const { colors } = useTheme() as any
   return (
     <Pane display="flex" alignItems="center">
       <Pane width={majorScale(10)} height={majorScale(10)} backgroundColor={hex} borderRadius={5} />
-      <Pane
-        marginLeft={majorScale(2)}
-        display="flex"
-        alignItems="flex-start"
-        flexDirection="column"
-      >
+      <Pane marginLeft={majorScale(2)} display="flex" alignItems="flex-start" flexDirection="column">
         <Text fontWeight="bold" size={500} marginBottom={majorScale(1)}>
           {name}
         </Text>

diff --git a/docs/components/IconSearch.tsx b/docs/components/IconSearch.tsx
@@ -15,6 +15,7 @@ const Item: React.FC<{ name: string }> = ({ name }) => {
     toaster.success('Successfully copied icon name to clipboard!')
   }, [])
 
+  // eslint-disable-next-line
   // @ts-ignore
   if (evergreen[name]) {
     return (
@@ -36,6 +37,7 @@ const Item: React.FC<{ name: string }> = ({ name }) => {
             },
           })}
         >
+          {/* eslint-disable-next-line */}
           {/*  @ts-ignore */}
           {React.createElement(evergreen[name] as any, {
             size: majorScale(3),
@@ -71,7 +73,6 @@ const IconSearch: React.FC<Props> = () => {
           gridTemplateColumns="repeat(auto-fill, 168px)"
         >
           {iconComponentNames.map((componentName) => {
-            console.log(componentName.slice(0, componentName.indexOf('Icon')))
             return <Item key={componentName} name={componentName} />
           })}
         </Pane>

diff --git a/docs/components/MDX/renderers/InlineCode.tsx b/docs/components/MDX/renderers/InlineCode.tsx
@@ -19,7 +19,7 @@ const InlineCode: React.FC<Props> = ({ children }) => {
       borderColor={colors.blue200}
       // eslint-disable-next-line
       // @ts-ignore Types in ui-box need to be updated
-      style={{"WebkitFontSmoothing":"antialiased"}}
+      style={{ WebkitFontSmoothing: 'antialiased' }}
     >
       {children}
     </Code>

diff --git a/docs/components/PropsTable.tsx b/docs/components/PropsTable.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Table, Code, Pane, majorScale, Paragraph, Badge, Text, Heading } from 'evergreen-ui'
+import { Table, Pane, majorScale, Paragraph, Badge, Text, Heading } from 'evergreen-ui'
 import InlineCode from './MDX/renderers/InlineCode'
 
 interface Props {
   data: any
 }
 
-const resolveReadableType: (type: any) => string = type => {
+const resolveReadableType: (type: any) => string = (type) => {
   switch (type.name) {
     case 'enum':
       return type.value.map(({ value }: { value: string }) => value).join(' | ')
@@ -26,29 +26,30 @@ const PropsTable: React.FC<Props> = ({ data }) => {
 
   return (
     <Pane width="100%" maxWidth={1152}>
-      <Heading marginY={majorScale(2)} size={800}>{displayName}</Heading>
+      <Heading marginY={majorScale(2)} size={800}>
+        {displayName}
+      </Heading>
       {props ? (
         <Table width="100%">
           <Table.Head>
-            {COLUMNS.map(column => {
+            {COLUMNS.map((column) => {
               return <Table.TextHeaderCell key={column}>{column}</Table.TextHeaderCell>
             })}
           </Table.Head>
           <Table.Body>
-            {Object.keys(props).map(prop => {
+            {Object.keys(props).map((prop) => {
               const { type, required, description } = props[prop]
               return (
                 <Table.Row key={prop} minHeight={64} height="unset" paddingY={majorScale(2)}>
                   <Table.Cell>
                     <Pane display="flex" alignItems="center">
-                      <InlineCode display="block">{prop}</InlineCode>
+                      <InlineCode>{prop}</InlineCode>
                       {/* <Heading size={400}>{prop}</Heading> */}
                       {required && <Badge marginLeft={majorScale(2)}>Required</Badge>}
                     </Pane>
                   </Table.Cell>
                   <Table.Cell>
                     <Text>{resolveReadableType(type)}</Text>
-                    {/* <InlineCode display="block">{resolveReadableType(type)}</InlineCode> */}
                   </Table.Cell>
                   <Table.Cell>
                     <Paragraph>{description}</Paragraph>

diff --git a/docs/components/SideNav.tsx b/docs/components/SideNav.tsx
@@ -41,9 +41,8 @@ const SideNav: React.FC<Props> = ({ title, items, selectedItem, routePrefix }) =
       <Tablist>
         {items.map((item) => {
           return (
-            <Link href={`/${routePrefix}/${item.id}`} passHref>
+            <Link key={item.id} href={`/${routePrefix}/${item.id}`} passHref>
               <Tab
-                key={item.id}
                 is="a"
                 alignItems="flex-start"
                 direction="vertical"

diff --git a/docs/components/TopNav.tsx b/docs/components/TopNav.tsx
@@ -35,42 +35,27 @@ const TopNav: React.FC<Props> = () => {
       </Pane>
       <Pane flex={1}>
         <Link href="/introduction/getting-started" passHref>
-          <EvergreenLink
-            color={parentPath !== 'introduction' ? 'neutral' : undefined}
-            marginRight={majorScale(3)}
-          >
+          <EvergreenLink color={parentPath !== 'introduction' ? 'neutral' : undefined} marginRight={majorScale(3)}>
             Introduction
           </EvergreenLink>
         </Link>
         <Link href="/foundations" passHref>
-          <EvergreenLink
-            color={parentPath !== 'foundations' ? 'neutral' : undefined}
-            marginRight={majorScale(3)}
-          >
+          <EvergreenLink color={parentPath !== 'foundations' ? 'neutral' : undefined} marginRight={majorScale(3)}>
             Foundations
           </EvergreenLink>
         </Link>
         <Link href="/components" passHref>
-          <EvergreenLink
-            color={parentPath !== 'components' ? 'neutral' : undefined}
-            marginRight={majorScale(3)}
-          >
+          <EvergreenLink color={parentPath !== 'components' ? 'neutral' : undefined} marginRight={majorScale(3)}>
             Components
           </EvergreenLink>
         </Link>
         <Link href="/patterns" passHref>
-          <EvergreenLink
-            color={parentPath !== 'patterns' ? 'neutral' : undefined}
-            marginRight={majorScale(3)}
-          >
+          <EvergreenLink color={parentPath !== 'patterns' ? 'neutral' : undefined} marginRight={majorScale(3)}>
             Patterns
           </EvergreenLink>
         </Link>
         <Link href="/resources" passHref>
-          <EvergreenLink
-            color={parentPath !== 'resources' ? 'neutral' : undefined}
-            marginRight={majorScale(3)}
-          >
+          <EvergreenLink color={parentPath !== 'resources' ? 'neutral' : undefined} marginRight={majorScale(3)}>
             Resources
           </EvergreenLink>
         </Link>

diff --git a/docs/components/homepage/HomeHero.tsx b/docs/components/homepage/HomeHero.tsx
@@ -22,7 +22,9 @@ const HomeHero = () => {
           <Paragraph size={500} marginTop={majorScale(2)} marginBottom={majorScale(3)}>
             Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment.
           </Paragraph>
-          <Link href="/introduction/getting-started"><Button appearance="primary">Get Started</Button></Link>
+          <Link href="/introduction/getting-started">
+            <Button appearance="primary">Get Started</Button>
+          </Link>
         </Pane>
         <Pane flex={3}>
           <lottie-player