eslint-config-smarthrのアップデートに対応

kufu · Oct 17, 2023 · e41e10f · e41e10f
1 parent d2519d8
commit e41e10f
Show file tree

Hide file tree

Showing 40 changed files with 130 additions and 282 deletions.
diff --git a/src/components/ColorPalette/ColorPalette.tsx b/src/components/ColorPalette/ColorPalette.tsx
@@ -23,8 +23,7 @@ type Props = {
   description: string
 }
 
-export const ColorPalette: FC<Props> = ({ colorName, colorValue, description }) => {
-  return (
+export const ColorPalette: FC<Props> = ({ colorName, colorValue, description }) => (
     <Wrapper>
       <Thumbnail $color={colorValue}></Thumbnail>
       <Informations>
@@ -42,7 +41,6 @@ export const ColorPalette: FC<Props> = ({ colorName, colorValue, description })
       </Informations>
     </Wrapper>
   )
-}
 
 const Wrapper = styled.div`
   width: calc(25% - 24px);
@@ -55,15 +53,13 @@ const Wrapper = styled.div`
 
 const Thumbnail = styled.div<{
   $color: string
-}>(({ $color }) => {
-  return css`
+}>(({ $color }) => css`
     width: 100%;
     height: 128px;
     margin-bottom: 12px;
     background-color: ${$color};
     box-shadow: rgb(235, 236, 240) 0 0 0 1.2px;
-  `
-})
+  `)
 
 const Informations = styled.div``
 const ColorName = styled.div`

diff --git a/src/components/ColorPalette/ColorPalettesWrapper.tsx b/src/components/ColorPalette/ColorPalettesWrapper.tsx
@@ -5,9 +5,7 @@ type Props = {
   children: React.ReactNode
 }
 
-export const ColorPalettesWrapper: FC<Props> = ({ children }) => {
-  return <Wrapper>{children}</Wrapper>
-}
+export const ColorPalettesWrapper: FC<Props> = ({ children }) => <Wrapper>{children}</Wrapper>
 
 const Wrapper = styled.div`
   display: flex;

diff --git a/src/components/ComponentCaptures/ComponentCaptures.tsx b/src/components/ComponentCaptures/ComponentCaptures.tsx
@@ -32,8 +32,7 @@ export const ComponentCaptures: FC = () => {
         <ComponentGroupSection key={node.groupName}>
           <h2 id={`component-${node.groupName}`}>{node.groupName}</h2>
           <ComponentList>
-            {node.storyKinds.map((storyKind) => {
-              return storyKind.iframeUrl ? (
+            {node.storyKinds.map((storyKind) => storyKind.iframeUrl ? (
                 <li key={storyKind.iframeUrl}>
                   <a href={`/products/components/${storyKind.componentPath}/`}>
                     <div>
@@ -44,8 +43,7 @@ export const ComponentCaptures: FC = () => {
                     <p>{storyKind.displayName}</p>
                   </a>
                 </li>
-              ) : null
-            })}
+              ) : null)}
           </ComponentList>
         </ComponentGroupSection>
       ))}

diff --git a/src/components/ComponentPropsTable/ComponentPropsTable.tsx b/src/components/ComponentPropsTable/ComponentPropsTable.tsx
@@ -59,9 +59,7 @@ const pickType = (typeValue: string): keyof typeof TYPE_COLOR => {
   return 'other'
 }
 
-const pickTypeColor = (value: string): string => {
-  return TYPE_COLOR[pickType(value)]
-}
+const pickTypeColor = (value: string): string => TYPE_COLOR[pickType(value)]
 
 marked.setOptions({ headerIds: false, mangle: false })
 
@@ -80,10 +78,10 @@ export const ComponentPropsTable: FC<Props> = ({ name, dirName, showTitle }) =>
   }, [location, displayVersion])
 
   const versionData =
-    allUiVersion.nodes.find((node) => {
+    allUiVersion.nodes.find((node) => 
       // 指定されたバージョンかつsmarthr-ui-props.jsonが取得できているデータを探す
-      return node.version === displayVersion && node.uiProps && node.uiProps.length > 0
-    }) ||
+       node.version === displayVersion && node.uiProps && node.uiProps.length > 0
+    ) ||
     // 該当のデータがなければ最新バージョンのデータを表示する
     allUiVersion.nodes[0] ||
     // それもなければnullを返す（通常はありえない）
@@ -95,9 +93,7 @@ export const ComponentPropsTable: FC<Props> = ({ name, dirName, showTitle }) =>
   })[0]
   const propsData = data ? data.props : []
 
-  const fragmentId = (propsName: string) => {
-    return `props-${propsName.replace(' ', '-')}`
-  }
+  const fragmentId = (propsName: string) => `props-${propsName.replace(' ', '-')}`
   if (propsData === null || propsData.length === 0) {
     return <Text as={'p'}>Propsは設定されていません。</Text>
   }
@@ -122,13 +118,11 @@ export const ComponentPropsTable: FC<Props> = ({ name, dirName, showTitle }) =>
               <PropTypes>
                 {prop?.type?.name === 'enum' ? (
                   prop?.type.value &&
-                  prop.type.value.map((item, y) => {
-                    return (
+                  prop.type.value.map((item, y) => (
                       <TypeTag key={y} color={pickTypeColor(item?.value ?? '')}>
                         {item?.value}
                       </TypeTag>
-                    )
-                  })
+                    ))
                 ) : (
                   <TypeTag color={pickTypeColor(prop?.type?.name ?? '')}>{prop?.type?.name}</TypeTag>
                 )}

diff --git a/src/components/ComponentStory/ComponentStory.tsx b/src/components/ComponentStory/ComponentStory.tsx
@@ -52,9 +52,7 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
   const { allUiVersion } = useStaticQuery<Queries.StoryDataQuery>(query)
 
   // package.jsonにあるsmarthr-uiのバージョンをデフォルトにする
-  const defaultVersion = allUiVersion.nodes.find((node) => {
-    return node.version === packageInfo.version
-  })
+  const defaultVersion = allUiVersion.nodes.find((node) => node.version === packageInfo.version)
   // 全Storyのデータからpropsで指定された名前のStoryを取得する
   const defaultData = defaultVersion?.uiStories?.find((story) => {
     if (dirName) return story?.dirName === dirName && story?.storyName === name
@@ -70,12 +68,10 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
 
   // プルダウンの選択肢を作成する
   const versionOptions =
-    allUiVersion.nodes?.map((version) => {
-      return {
+    allUiVersion.nodes?.map((version) => ({
         label: `v${version.version}`,
         value: version.version ?? '',
-      }
-    }) ?? []
+      })) ?? []
 
   const [isIFrameLoaded, setIsIFrameLoaded] = useState<boolean>(false)
   const [isStoryLoaded, setIsStoryLoaded] = useState<boolean>(false)
@@ -90,13 +86,9 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
       setIsIFrameLoaded(false)
 
       // GraphQLからで取得したデータから該当のバージョンを選ぶ
-      const versionData = allUiVersion.nodes.find((node) => {
-        return node.version === version
-      })
+      const versionData = allUiVersion.nodes.find((node) => node.version === version)
       // 該当のバージョンからページで表示したいStoryを選ぶ
-      const targetStoryData = versionData?.uiStories?.find((story) => {
-        return story?.storyName === name
-      })
+      const targetStoryData = versionData?.uiStories?.find((story) => story?.storyName === name)
       if (!versionData || !targetStoryData) {
         setShowError(true)
         return
@@ -122,13 +114,9 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
     [name, allUiVersion.nodes],
   )
 
-  const getCommitHash = useCallback(() => {
-    return (
-      allUiVersion.nodes?.find((version) => {
-        return version.version === displayVersion
-      })?.commitHash ?? ''
-    )
-  }, [allUiVersion.nodes, displayVersion])
+  const getCommitHash = useCallback(() => (
+      allUiVersion.nodes?.find((version) => version.version === displayVersion)?.commitHash ?? ''
+    ), [allUiVersion.nodes, displayVersion])
 
   // クエリ付きURLでアクセスされた場合
   const location = useLocation()
@@ -153,11 +141,7 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
     return
   }
 
-  const getStoryName = (currentName: string) => {
-    return storyData.storyItems?.find((item) => {
-      return item?.iframeName === currentName
-    })?.iframeName
-  }
+  const getStoryName = (currentName: string) => storyData.storyItems?.find((item) => item?.iframeName === currentName)?.iframeName
 
   const onIFrameLoaded = () => {
     setIsStoryLoaded(true)
@@ -183,9 +167,7 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
               blankLabel: () =>
                 showError ||
                 !isStoryLoaded ||
-                versionOptions.find((option) => {
-                  return option.value === displayVersion
-                })
+                versionOptions.find((option) => option.value === displayVersion)
                   ? '-'
                   : `v${displayVersion}`,
             }}
@@ -227,8 +209,7 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
       {!showError && (
         <>
           <Tab>
-            {storyData.storyItems.map((item, index: number) => {
-              return (
+            {storyData.storyItems.map((item, index: number) => (
                 <TabItem
                   id={item?.iframeName ?? ''}
                   key={index}
@@ -237,8 +218,7 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
                 >
                   {item?.label}
                 </TabItem>
-              )
-            })}
+              ))}
           </Tab>
           {currentIFrame !== '' && (
             <>
@@ -257,9 +237,7 @@ export const ComponentStory: FC<Props> = ({ name, dirName }) => {
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
                 <StoryIframe
                   title={
-                    storyData.storyItems.find((item) => {
-                      return item?.name === currentIFrame
-                    })?.label || ''
+                    storyData.storyItems.find((item) => item?.name === currentIFrame)?.label || ''
                   }
                   src={`https://${getCommitHash()}--${SHRUI_CHROMATIC_ID}.chromatic.com/iframe.html?id=${getStoryName(
                     currentIFrame,

diff --git a/src/components/DoAndDont/DoAndDont.tsx b/src/components/DoAndDont/DoAndDont.tsx
@@ -8,8 +8,7 @@ type Props = {
   label: React.ReactNode
 }
 
-export const DoAndDont: FC<Props> = ({ type, img, label }) => {
-  return (
+export const DoAndDont: FC<Props> = ({ type, img, label }) => (
     <Wrapper>
       <ImageArea>{img}</ImageArea>
       <LabelArea $type={type}>
@@ -30,7 +29,6 @@ export const DoAndDont: FC<Props> = ({ type, img, label }) => {
       </LabelArea>
     </Wrapper>
   )
-}
 
 const Wrapper = styled.div`
   margin-block: 16px 0;
@@ -43,8 +41,7 @@ const ImageArea = styled.div`
 `
 
 const Status = styled.div<{ $type: 'do' | 'dont' }>`
-  ${({ $type }) => {
-    return css`
+  ${({ $type }) => css`
       display: flex;
       align-items: center;
       font-weight: bold;
@@ -53,16 +50,13 @@ const Status = styled.div<{ $type: 'do' | 'dont' }>`
         color: ${$type === 'do' ? defaultColor.MAIN : defaultColor.DANGER};
         margin-right: ${defaultSpacing.XXS};
       }
-    `
-  }}
+    `}
 `
 
 const LabelArea = styled.div<{ $type: 'do' | 'dont' }>`
-  ${({ $type }) => {
-    return css`
+  ${({ $type }) => css`
       background-color: ${defaultColor.BACKGROUND};
       padding: ${defaultSpacing.XS};
       border-top: ${defaultSpacing.XXS} solid ${$type === 'do' ? defaultColor.MAIN : defaultColor.DANGER};
-    `
-  }}
+    `}
 `
diff --git a/src/components/Head/Head.tsx b/src/components/Head/Head.tsx
@@ -59,9 +59,7 @@ export const Head: FC<Props> = ({ title, ogTitle, description, meta = [] }) => {
       <meta name="twitter:site" content={siteMetadata?.author ?? ''} />
       <meta name="twitter:title" content={pageTitle ?? ''} />
       <meta name="twitter:description" content={metaDescription ?? ''} />
-      {meta.map((item, index) => {
-        return <meta key={index} name={item.name} content={item.content} />
-      })}
+      {meta.map((item, index) => <meta key={index} name={item.name} content={item.content} />)}
       <link rel="icon" href="/favicon.ico" />
       <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
       <link rel="manifest" href="/manifest.webmanifest" />

diff --git a/src/components/StaticImage/StaticImage.tsx b/src/components/StaticImage/StaticImage.tsx
@@ -2,7 +2,7 @@ import React, { FC, HTMLAttributes } from 'react'
 
 type Props = HTMLAttributes<HTMLImageElement>
 
-export const StaticImage: FC<Props> = (props) => {
+export const StaticImage: FC<Props> = (props) => 
   // eslint-disable-next-line smarthr/a11y-image-has-alt-attribute, jsx-a11y/alt-text
-  return <img {...props} />
-}
+   <img {...props} />
+
diff --git a/src/components/article/AirtableEmbed/AirtableEmbed.tsx b/src/components/article/AirtableEmbed/AirtableEmbed.tsx
@@ -7,8 +7,7 @@ type Props = {
   tableName: string
 }
 
-export const AirtableEmbed: FC<Props> = ({ children, tableName }) => {
-  return (
+export const AirtableEmbed: FC<Props> = ({ children, tableName }) => (
     <>
       {children}
       <ButtonWrapper>
@@ -18,7 +17,6 @@ export const AirtableEmbed: FC<Props> = ({ children, tableName }) => {
       </ButtonWrapper>
     </>
   )
-}
 
 const ButtonWrapper = styled.div`
   text-align: right;

diff --git a/src/components/article/CodeBlock/CodeBlock.tsx b/src/components/article/CodeBlock/CodeBlock.tsx
@@ -70,9 +70,7 @@ export const CodeBlock: FC<Props> = ({
   // Storybookとのコード共通化のため、childrenで渡ってくるコードには`render()`が含まれていない。LivePreviewでコンポーネントのレンダリングが必要な場合には、末尾に追加する。
 
   const renderingPropsText = Object.keys(componentProps)
-    .map((key) => {
-      return `${key}="${componentProps[key as keyof typeof componentProps]}"`
-    })
+    .map((key) => `${key}="${componentProps[key as keyof typeof componentProps]}"`)
     .join(' ')
 
   const code = renderingComponent

diff --git a/src/components/article/CodeBlock/DesignPatternCodeBlock.tsx b/src/components/article/CodeBlock/DesignPatternCodeBlock.tsx
@@ -25,9 +25,7 @@ const query = graphql`
 export const DesignPatternCodeBlock: FC<Props> = ({ componentName, componentTitle, ...componentProps }) => {
   const { allMdx } = useStaticQuery<Queries.PatternCodeQuery>(query)
   const patternCode =
-    allMdx.nodes.find((node) => {
-      return node.frontmatter?.patternName === componentName
-    })?.fields?.patternCode || ''
+    allMdx.nodes.find((node) => node.frontmatter?.patternName === componentName)?.fields?.patternCode || ''
 
   return (
     <CodeBlock

diff --git a/src/components/article/FragmentTitle/FragmentTitle.tsx b/src/components/article/FragmentTitle/FragmentTitle.tsx
@@ -11,16 +11,14 @@ type Props = {
 
 type HeadingTagTypes = 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'
 
-export const FragmentTitle: FC<Props> = ({ tag = 'h2', id, children }) => {
-  return (
+export const FragmentTitle: FC<Props> = ({ tag = 'h2', id, children }) => (
     <Wrapper as={tag} id={id}>
       <a href={`#${id}`}>
         <FaLinkIcon className="icon" />
         {children}
       </a>
     </Wrapper>
   )
-}
 
 const Wrapper = styled.div`
   position: relative;

diff --git a/src/components/article/ImgWithDesc/ImgWithDesc.tsx b/src/components/article/ImgWithDesc/ImgWithDesc.tsx
@@ -6,14 +6,12 @@ type Props = {
   children: React.ReactNode
 }
 
-export const ImgWithDesc: FC<Props> = ({ description, children }) => {
-  return (
+export const ImgWithDesc: FC<Props> = ({ description, children }) => (
     <Figure>
       {children}
       <figcaption>{description}</figcaption>
     </Figure>
   )
-}
 
 const Figure = styled.figure`
   display: block;

diff --git a/src/components/article/IndexNav/IndexNav.tsx b/src/components/article/IndexNav/IndexNav.tsx
@@ -60,9 +60,7 @@ export const IndexNav: FC<Props> = ({ target, ignoreH3Nav = false }) => {
     const handleScroll = throttle(() => {
       const currentRef = target.current
       if (!currentRef) return
-      const headingList = Array.from(currentRef.querySelectorAll('h2, h3')).filter((element) => {
-        return !(element.tagName === 'H3' && ignoreH3Nav)
-      })
+      const headingList = Array.from(currentRef.querySelectorAll('h2, h3')).filter((element) => !(element.tagName === 'H3' && ignoreH3Nav))
       const _currentHeading = headingList.find((element, index) => {
         const elementTop = element.getBoundingClientRect().top
         const nextItemTop = headingList[index + 1]?.getBoundingClientRect().top