Internal: update eslint-config-airbnb to 19.0.4, fix/suppress new err…

…ors (pinterest#1931)
mziemer21 · Feb 10, 2022 · 2a18ce5 · 2a18ce5
1 parent 8979e1b
commit 2a18ce5
Show file tree

Hide file tree

Showing 42 changed files with 378 additions and 324 deletions.
diff --git a/docs/components/ColorPalette.js b/docs/components/ColorPalette.js
@@ -10,7 +10,7 @@ type Props = {|
   tokenId: string,
 |};
 
-const ColorPalette = ({ name, tokenId }: Props): Node => {
+function ColorPalette({ name, tokenId }: Props): Node {
   const tokenNumbers = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
   const colorId = `${tokenId}-${name.toLowerCase()}`;
   return (
@@ -27,5 +27,5 @@ const ColorPalette = ({ name, tokenId }: Props): Node => {
       </Box>
     </Box>
   );
-};
+}
 export default ColorPalette;
diff --git a/docs/components/ColorTile.js b/docs/components/ColorTile.js
@@ -12,7 +12,7 @@ type Props = {|
   showName?: boolean,
 |};
 
-const ColorTile = ({ name, number, textColor, tokenId, showName = false }: Props): Node => {
+function ColorTile({ name, number, textColor, tokenId, showName = false }: Props): Node {
   const colorId = `${tokenId}-${name.toLowerCase()}`;
   const colorVariableName = `color-${colorId}-${number}`;
 
@@ -35,5 +35,5 @@ const ColorTile = ({ name, number, textColor, tokenId, showName = false }: Props
       <Text color={textColor}>{tokens[colorVariableName]?.toUpperCase()}</Text>
     </Box>
   );
-};
+}
 export default ColorTile;
diff --git a/docs/components/Example.js b/docs/components/Example.js
@@ -22,7 +22,7 @@ type Props = {|
 
 const { Box, Text } = gestalt;
 
-const Example = ({
+function Example({
   defaultCode,
   description,
   id,
@@ -31,7 +31,7 @@ const Example = ({
   showHeading,
   showCode = true,
   skipContrastCheck = false,
-}: Props): Node => {
+}: Props): Node {
   const code = defaultCode.trim();
   const scope = { ...gestalt, DatePicker };
 
@@ -67,6 +67,6 @@ const Example = ({
       </LiveProvider>
     </Card>
   );
-};
+}
 
 export default Example;
diff --git a/docs/components/MainSection.js b/docs/components/MainSection.js
@@ -11,11 +11,13 @@ type Props = {|
   showHeading?: boolean,
 |};
 
-const MainSection = ({ children, description, name, showHeading = true }: Props): Node => (
-  <Card name={name} showHeading={showHeading} description={description}>
-    {children}
-  </Card>
-);
+function MainSection({ children, description, name, showHeading = true }: Props): Node {
+  return (
+    <Card name={name} showHeading={showHeading} description={description}>
+      {children}
+    </Card>
+  );
+}
 
 MainSection.Card = MainSectionCard;
 

diff --git a/docs/components/MainSectionCard.js b/docs/components/MainSectionCard.js
@@ -1,8 +1,8 @@
 // @flow strict
+import { type Node, useCallback } from 'react';
 import { Box, Text } from 'gestalt';
 import * as gestalt from 'gestalt'; // eslint-disable-line import/no-namespace
 import DatePicker from 'gestalt-datepicker';
-import type { Node } from 'react';
 import { LiveProvider, LiveError, LivePreview } from 'react-live';
 import ExampleCode from './ExampleCode.js';
 import theme from './atomDark.js';
@@ -43,7 +43,7 @@ const COLOR_TO_HEX = {
   red: '#e60023',
 };
 
-const MainSectionCard = ({
+function MainSectionCard({
   cardSize = 'md',
   children,
   defaultCode,
@@ -53,7 +53,7 @@ const MainSectionCard = ({
   showCode = true,
   title,
   type = 'info',
-}: Props): Node => {
+}: Props): Node {
   const code = defaultCode?.trim();
   const scope = { ...gestalt, DatePicker };
   const borderStyle =
@@ -63,20 +63,23 @@ const MainSectionCard = ({
   const shouldShowCode = showCode && cardSize !== 'sm' && type === 'info';
   const showTitleAndDescriptionAboveExample = cardSize === 'lg' && type === 'info';
 
-  const PreviewCard = ({ children: cardChildren }: PreviewCardProps): Node => (
-    <Box
-      alignItems="center"
-      borderStyle="sm"
-      color={shaded ? 'lightGray' : 'white'}
-      display="flex"
-      height={CARD_SIZE_NAME_TO_PIXEL[cardSize]}
-      justifyContent="center"
-      padding={8}
-      position="relative"
-      rounding={2}
-    >
-      {cardChildren}
-    </Box>
+  const PreviewCard = useCallback(
+    ({ children: cardChildren }: PreviewCardProps) => (
+      <Box
+        alignItems="center"
+        borderStyle="sm"
+        color={shaded ? 'lightGray' : 'white'}
+        display="flex"
+        height={CARD_SIZE_NAME_TO_PIXEL[cardSize]}
+        justifyContent="center"
+        padding={8}
+        position="relative"
+        rounding={2}
+      >
+        {cardChildren}
+      </Box>
+    ),
+    [cardSize, shaded],
   );
 
   const TitleAndDescription = (
@@ -131,6 +134,6 @@ const MainSectionCard = ({
       {!showTitleAndDescriptionAboveExample && TitleAndDescription}
     </Box>
   );
-};
+}
 
 export default MainSectionCard;
diff --git a/docs/components/MainSectionSubsection.js b/docs/components/MainSectionSubsection.js
@@ -18,13 +18,7 @@ type Props = {|
   title?: string,
 |};
 
-const MainSectionSubsection = ({
-  badge,
-  children,
-  columns = 1,
-  description,
-  title,
-}: Props): Node => {
+function MainSectionSubsection({ badge, children, columns = 1, description, title }: Props): Node {
   const slugifiedId = slugify(title || '');
   const arrayChildren = Children.toArray(children);
 
@@ -96,6 +90,6 @@ const MainSectionSubsection = ({
         ))}
     </Box>
   );
-};
+}
 
 export default MainSectionSubsection;
diff --git a/docs/components/PropTable.js b/docs/components/PropTable.js
@@ -24,25 +24,29 @@ type Props = {|
 
 const unifyQuotes = (input) => input?.replace(/'/g, '"');
 
-const Description = (lines: Array<string>): Node => (
-  <Flex alignItems="start" direction="column" gap={2}>
-    {lines.map((line, idx) => (
-      <Markdown key={idx} text={line} textColor="gray" />
-    ))}
-  </Flex>
-);
+function Description(lines: Array<string>): Node {
+  return (
+    <Flex alignItems="start" direction="column" gap={2}>
+      {lines.map((line, idx) => (
+        <Markdown key={idx} text={line} textColor="gray" />
+      ))}
+    </Flex>
+  );
+}
 
-const Th = ({ children }: {| children?: Node |}) => (
-  <th style={{ borderBottom: '2px solid #ddd' }}>
-    <Box padding={2}>
-      <Text size="200" overflow="normal" weight="bold">
-        {children}
-      </Text>
-    </Box>
-  </th>
-);
+function Th({ children }: {| children?: Node |}) {
+  return (
+    <th style={{ borderBottom: '2px solid #ddd' }}>
+      <Box padding={2}>
+        <Text size="200" overflow="normal" weight="bold">
+          {children}
+        </Text>
+      </Box>
+    </th>
+  );
+}
 
-const Td = ({
+function Td({
   border = true,
   children,
   colspan = 1,
@@ -54,23 +58,25 @@ const Td = ({
   colspan?: number,
   shrink?: boolean,
   color?: 'darkGray' | 'gray',
-|}) => (
-  <td
-    style={{
-      verticalAlign: 'top',
-      borderBottom: border && '1px solid #ddd',
-      padding: 0,
-      width: shrink ? '1px' : '',
-    }}
-    colSpan={colspan}
-  >
-    <Box paddingX={2} marginTop={2} marginBottom={border ? 2 : 0}>
-      <Text overflow="normal" color={color}>
-        {children}
-      </Text>
-    </Box>
-  </td>
-);
+|}) {
+  return (
+    <td
+      style={{
+        verticalAlign: 'top',
+        borderBottom: border && '1px solid #ddd',
+        padding: 0,
+        width: shrink ? '1px' : '',
+      }}
+      colSpan={colspan}
+    >
+      <Box paddingX={2} marginTop={2} marginBottom={border ? 2 : 0}>
+        <Text overflow="normal" color={color}>
+          {children}
+        </Text>
+      </Box>
+    </td>
+  );
+}
 
 function isNumeric(value) {
   return /^-?\d+$/.test(value);

diff --git a/docs/components/SearchContent.js b/docs/components/SearchContent.js
@@ -5,8 +5,8 @@ type Props = {|
   children?: Node,
 |};
 
-const SearchContent = ({ children }: Props): Node => (
-  <div className="docSearch-content">{children}</div>
-);
+function SearchContent({ children }: Props): Node {
+  return <div className="docSearch-content">{children}</div>;
+}
 
 export default SearchContent;
diff --git a/docs/components/TokenExample.js b/docs/components/TokenExample.js
@@ -17,43 +17,47 @@ type ExampleProps = {|
   category: string,
 |};
 
-export const ColorBox = ({ token }: BaseProps): Node => (
-  <Box
-    dangerouslySetInlineStyle={{
-      __style: { backgroundColor: `var(--${token.name})` },
-    }}
-    height={50}
-    width={250}
-    display="flex"
-    alignItems="center"
-    justifyContent="between"
-    paddingX={2}
-    borderStyle={token.name.includes('inverse') ? 'sm' : 'none'}
-  />
-);
+export function ColorBox({ token }: BaseProps): Node {
+  return (
+    <Box
+      dangerouslySetInlineStyle={{
+        __style: { backgroundColor: `var(--${token.name})` },
+      }}
+      height={50}
+      width={250}
+      display="flex"
+      alignItems="center"
+      justifyContent="between"
+      paddingX={2}
+      borderStyle={token.name.includes('inverse') ? 'sm' : 'none'}
+    />
+  );
+}
 
-export const SpacingBox = ({ token }: BaseProps): Node => (
-  <Box color="eggplant" width={`${token.value}`} height={`${token.value}`} />
-);
+export function SpacingBox({ token }: BaseProps): Node {
+  return <Box color="eggplant" width={`${token.value}`} height={`${token.value}`} />;
+}
 
-export const TextColorBox = ({ token }: BaseProps): Node => (
-  <Box
-    dangerouslySetInlineStyle={{
-      __style: { color: `var(--${token.name})`, fontSize: '32px' },
-    }}
-    height={50}
-    width={150}
-    display="flex"
-    alignItems="center"
-    justifyContent="between"
-    paddingX={2}
-    color={token.name.includes('inverse') ? 'darkGray' : undefined}
-  >
-    Gestalt
-  </Box>
-);
+export function TextColorBox({ token }: BaseProps): Node {
+  return (
+    <Box
+      dangerouslySetInlineStyle={{
+        __style: { color: `var(--${token.name})`, fontSize: '32px' },
+      }}
+      height={50}
+      width={150}
+      display="flex"
+      alignItems="center"
+      justifyContent="between"
+      paddingX={2}
+      color={token.name.includes('inverse') ? 'darkGray' : undefined}
+    >
+      Gestalt
+    </Box>
+  );
+}
 
-export const FontBox = ({ token, type }: FontBoxProps): Node => {
+export function FontBox({ token, type }: FontBoxProps): Node {
   const fontWeightStyle = type === 'weight' ? `var(--${token.name})` : undefined;
   const fontFamilyStyle = type === 'family' ? `var(--${token.name})` : undefined;
   const fontSizeStyle = type === 'size' ? `var(--${token.name})` : `var(--font-size-600)`;
@@ -78,9 +82,9 @@ export const FontBox = ({ token, type }: FontBoxProps): Node => {
       {token.name.includes('japanese') ? 'ゲシュタルト' : 'Gestalt'}
     </Box>
   );
-};
+}
 
-export const TokenExample = ({ token, category }: ExampleProps): Node => {
+export function TokenExample({ token, category }: ExampleProps): Node {
   switch (category) {
     case 'background-color':
       return <ColorBox token={token} />;
@@ -97,4 +101,4 @@ export const TokenExample = ({ token, category }: ExampleProps): Node => {
     default:
       return <Box>{token.value}</Box>;
   }
-};
+}
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -44,7 +44,7 @@ gtag('config', 'UA-12967896-44');
 `,
             }}
           />
-          <link rel="shortcut icon" href="/pinterest_favicon.png" />
+          <link rel="icon" href="/pinterest_favicon.png" />
         </Head>
         <body>
           <Main />
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,7 @@ gtag('config', 'UA-12967896-44'); @@
     `,
                 }}
               />
-              <link rel="shortcut icon" href="/pinterest_favicon.png" />
+              <link rel="icon" href="/pinterest_favicon.png" />
             </Head>
             <body>
               <Main />
@@ Expand Down @@