From 9ad2eeb3aa04608a125cd14cea4e675a57ae2c7a Mon Sep 17 00:00:00 2001 From: Julien Date: Fri, 30 Sep 2022 11:40:04 +0200 Subject: [PATCH] refactor: upgrade config to remove unnecessary react imports --- packages/eslint-config-custom/.eslintrc.js | 2 + src/useBoolean/useBoolean.demo.tsx | 2 - .../useClickAnyWhere.demo.tsx | 2 +- .../useCopyToClipboard.demo.tsx | 2 - src/useCountdown/useCountdown.demo.tsx | 2 +- src/useCounter/useCounter.demo.tsx | 2 - src/useDarkMode/useDarkMode.demo.tsx | 2 - src/useDebounce/useDebounce.demo.tsx | 2 +- .../useDocumentTitle.demo.tsx | 2 - src/useDocumentTitle/useDocumentTitle.test.ts | 2 +- src/useEffectOnce/useEffectOnce.demo.tsx | 2 +- src/useElementSize/useElementSize.demo.tsx | 2 +- .../useEventListener.demo.tsx | 2 +- src/useFetch/useFetch.demo.tsx | 2 - src/useHover/useHover.demo.tsx | 2 +- src/useImageOnLoad/useImageOnLoad.demo.tsx | 2 +- .../useIntersectionObserver.demo.tsx | 2 +- src/useInterval/useInterval.demo.tsx | 2 +- src/useIsClient/useIsClient.demo.tsx | 2 - .../useIsFirstRender.demo.tsx | 2 +- src/useIsMounted/useIsMounted.demo.tsx | 2 +- .../useIsomorphicLayoutEffect.demo.tsx | 2 - src/useLocalStorage/useLocalStorage.demo.tsx | 2 - src/useLockedBody/useLockedBody.demo.tsx | 2 +- src/useMap/useMap.demo.tsx | 2 +- src/useMediaQuery/useMediaQuery.demo.tsx | 2 - .../useOnClickOutside.demo.tsx | 2 +- .../useReadLocalStorage.demo.tsx | 2 - src/useScreen/useScreen.demo.tsx | 2 - src/useScript/useScript.demo.tsx | 2 +- .../useSessionStorage.demo.tsx | 2 - src/useSsr/useSsr.demo.tsx | 2 - src/useStep/useStep.demo.tsx | 2 - .../useTernaryDarkMode.demo.tsx | 2 - src/useTimeout/useTimeout.demo.tsx | 2 +- src/useUpdateEffect/useUpdateEffect.demo.tsx | 2 +- src/useWindowSize/useWindowSize.demo.tsx | 2 - templates/codesandbox/tsconfig.json | 2 +- tsconfig.json | 2 +- website/gatsby-node.ts | 15 +++++++ website/src/components/CopyButton.tsx | 2 +- website/src/components/backToTop.tsx | 2 +- website/src/components/code.tsx | 2 - website/src/components/hero.tsx | 2 +- website/src/components/layout/footer.tsx | 2 - website/src/components/layout/header.tsx | 2 - website/src/components/layout/layout.tsx | 2 +- website/src/components/layout/sidebar.tsx | 2 +- website/src/components/mdxRenderer.tsx | 5 +-- website/src/components/search/SearchModal.tsx | 2 +- website/src/components/search/hitComps.tsx | 2 +- website/src/components/search/input.tsx | 2 +- website/src/components/seo.tsx | 2 +- website/src/libs/filterHooks.ts | 15 +++---- website/src/libs/wrapPageElement.tsx | 8 ++-- website/src/pages/404.tsx | 2 - website/src/pages/index.tsx | 2 - website/src/templates/post.tsx | 43 ++++++++----------- website/tsconfig.json | 2 +- 59 files changed, 79 insertions(+), 115 deletions(-) diff --git a/packages/eslint-config-custom/.eslintrc.js b/packages/eslint-config-custom/.eslintrc.js index ef67050a..60ddaf1e 100644 --- a/packages/eslint-config-custom/.eslintrc.js +++ b/packages/eslint-config-custom/.eslintrc.js @@ -26,6 +26,8 @@ module.exports = { rules: { 'prettier/prettier': 'warn', 'react/prop-types': 'off', + 'react/jsx-uses-react': 'off', + 'react/react-in-jsx-scope': 'off', 'sort-imports': 'off', 'import/order': 'off', 'simple-import-sort/exports': 'warn', diff --git a/src/useBoolean/useBoolean.demo.tsx b/src/useBoolean/useBoolean.demo.tsx index 800ecd9d..6d0aeab5 100644 --- a/src/useBoolean/useBoolean.demo.tsx +++ b/src/useBoolean/useBoolean.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useBoolean } from '..' export default function Component() { diff --git a/src/useClickAnyWhere/useClickAnyWhere.demo.tsx b/src/useClickAnyWhere/useClickAnyWhere.demo.tsx index 657eb4ab..b5323e60 100644 --- a/src/useClickAnyWhere/useClickAnyWhere.demo.tsx +++ b/src/useClickAnyWhere/useClickAnyWhere.demo.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import { useClickAnyWhere } from '..' diff --git a/src/useCopyToClipboard/useCopyToClipboard.demo.tsx b/src/useCopyToClipboard/useCopyToClipboard.demo.tsx index 38fae298..8ea8628c 100644 --- a/src/useCopyToClipboard/useCopyToClipboard.demo.tsx +++ b/src/useCopyToClipboard/useCopyToClipboard.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useCopyToClipboard } from '..' export default function Component() { diff --git a/src/useCountdown/useCountdown.demo.tsx b/src/useCountdown/useCountdown.demo.tsx index b63fa467..55e29892 100644 --- a/src/useCountdown/useCountdown.demo.tsx +++ b/src/useCountdown/useCountdown.demo.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, useState } from 'react' +import { ChangeEvent, useState } from 'react' import { useCountdown } from '..' diff --git a/src/useCounter/useCounter.demo.tsx b/src/useCounter/useCounter.demo.tsx index 0d259330..cfdc1d35 100644 --- a/src/useCounter/useCounter.demo.tsx +++ b/src/useCounter/useCounter.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useCounter } from '..' export default function Component() { diff --git a/src/useDarkMode/useDarkMode.demo.tsx b/src/useDarkMode/useDarkMode.demo.tsx index 04df08c8..35d958d8 100644 --- a/src/useDarkMode/useDarkMode.demo.tsx +++ b/src/useDarkMode/useDarkMode.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useDarkMode } from '..' export default function Component() { diff --git a/src/useDebounce/useDebounce.demo.tsx b/src/useDebounce/useDebounce.demo.tsx index bb286d52..f251c9e0 100644 --- a/src/useDebounce/useDebounce.demo.tsx +++ b/src/useDebounce/useDebounce.demo.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, useEffect, useState } from 'react' +import { ChangeEvent, useEffect, useState } from 'react' import { useDebounce } from '..' diff --git a/src/useDocumentTitle/useDocumentTitle.demo.tsx b/src/useDocumentTitle/useDocumentTitle.demo.tsx index d6238a84..a706c56a 100644 --- a/src/useDocumentTitle/useDocumentTitle.demo.tsx +++ b/src/useDocumentTitle/useDocumentTitle.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useDocumentTitle } from '..' export default function Component() { diff --git a/src/useDocumentTitle/useDocumentTitle.test.ts b/src/useDocumentTitle/useDocumentTitle.test.ts index a38167fc..806feea6 100644 --- a/src/useDocumentTitle/useDocumentTitle.test.ts +++ b/src/useDocumentTitle/useDocumentTitle.test.ts @@ -1,4 +1,4 @@ -import { act, renderHook } from '@testing-library/react-hooks/dom' +import { renderHook } from '@testing-library/react-hooks/dom' import useDocumentTitle from './useDocumentTitle' diff --git a/src/useEffectOnce/useEffectOnce.demo.tsx b/src/useEffectOnce/useEffectOnce.demo.tsx index 8c61dade..976b0ea1 100644 --- a/src/useEffectOnce/useEffectOnce.demo.tsx +++ b/src/useEffectOnce/useEffectOnce.demo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { useEffectOnce } from '..' diff --git a/src/useElementSize/useElementSize.demo.tsx b/src/useElementSize/useElementSize.demo.tsx index 419f4922..3103193b 100644 --- a/src/useElementSize/useElementSize.demo.tsx +++ b/src/useElementSize/useElementSize.demo.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import { useElementSize } from '..' diff --git a/src/useEventListener/useEventListener.demo.tsx b/src/useEventListener/useEventListener.demo.tsx index cf8c7e80..025a629a 100644 --- a/src/useEventListener/useEventListener.demo.tsx +++ b/src/useEventListener/useEventListener.demo.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react' +import { useRef } from 'react' import { useEventListener } from '..' diff --git a/src/useFetch/useFetch.demo.tsx b/src/useFetch/useFetch.demo.tsx index 62806d1f..67e7fbf8 100644 --- a/src/useFetch/useFetch.demo.tsx +++ b/src/useFetch/useFetch.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useFetch } from '..' const url = `http://jsonplaceholder.typicode.com/posts` diff --git a/src/useHover/useHover.demo.tsx b/src/useHover/useHover.demo.tsx index fb6536ae..830597d2 100644 --- a/src/useHover/useHover.demo.tsx +++ b/src/useHover/useHover.demo.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react' +import { useRef } from 'react' import { useHover } from '..' diff --git a/src/useImageOnLoad/useImageOnLoad.demo.tsx b/src/useImageOnLoad/useImageOnLoad.demo.tsx index 0daabbf9..9bc82d74 100644 --- a/src/useImageOnLoad/useImageOnLoad.demo.tsx +++ b/src/useImageOnLoad/useImageOnLoad.demo.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties } from 'react' +import { CSSProperties } from 'react' import { useImageOnLoad } from '..' diff --git a/src/useIntersectionObserver/useIntersectionObserver.demo.tsx b/src/useIntersectionObserver/useIntersectionObserver.demo.tsx index a393875d..0fc25823 100644 --- a/src/useIntersectionObserver/useIntersectionObserver.demo.tsx +++ b/src/useIntersectionObserver/useIntersectionObserver.demo.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react' +import { useRef } from 'react' import { useIntersectionObserver } from '..' diff --git a/src/useInterval/useInterval.demo.tsx b/src/useInterval/useInterval.demo.tsx index 9b0cb2bd..56d9b32a 100644 --- a/src/useInterval/useInterval.demo.tsx +++ b/src/useInterval/useInterval.demo.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, useState } from 'react' +import { ChangeEvent, useState } from 'react' import { useInterval } from '..' diff --git a/src/useIsClient/useIsClient.demo.tsx b/src/useIsClient/useIsClient.demo.tsx index 45527e67..8b73b5f9 100644 --- a/src/useIsClient/useIsClient.demo.tsx +++ b/src/useIsClient/useIsClient.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useIsClient } from '..' export default function Component() { diff --git a/src/useIsFirstRender/useIsFirstRender.demo.tsx b/src/useIsFirstRender/useIsFirstRender.demo.tsx index 864f0f7e..1de8bc63 100644 --- a/src/useIsFirstRender/useIsFirstRender.demo.tsx +++ b/src/useIsFirstRender/useIsFirstRender.demo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { useIsFirstRender } from '..' diff --git a/src/useIsMounted/useIsMounted.demo.tsx b/src/useIsMounted/useIsMounted.demo.tsx index 0a7b8065..66a77545 100644 --- a/src/useIsMounted/useIsMounted.demo.tsx +++ b/src/useIsMounted/useIsMounted.demo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { useIsMounted } from '..' diff --git a/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx b/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx index 40717357..948699e9 100644 --- a/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx +++ b/src/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useIsomorphicLayoutEffect } from '..' export default function Component() { diff --git a/src/useLocalStorage/useLocalStorage.demo.tsx b/src/useLocalStorage/useLocalStorage.demo.tsx index 7843d101..d9e31239 100644 --- a/src/useLocalStorage/useLocalStorage.demo.tsx +++ b/src/useLocalStorage/useLocalStorage.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useLocalStorage } from '..' // Usage diff --git a/src/useLockedBody/useLockedBody.demo.tsx b/src/useLockedBody/useLockedBody.demo.tsx index e1100110..dc7b1035 100644 --- a/src/useLockedBody/useLockedBody.demo.tsx +++ b/src/useLockedBody/useLockedBody.demo.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties, useState } from 'react' +import { CSSProperties, useState } from 'react' import { useLockedBody } from '..' diff --git a/src/useMap/useMap.demo.tsx b/src/useMap/useMap.demo.tsx index b53354bb..43918e96 100644 --- a/src/useMap/useMap.demo.tsx +++ b/src/useMap/useMap.demo.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react' +import { Fragment } from 'react' import { MapOrEntries, useMap } from '..' diff --git a/src/useMediaQuery/useMediaQuery.demo.tsx b/src/useMediaQuery/useMediaQuery.demo.tsx index e35d42ee..12c7ec16 100644 --- a/src/useMediaQuery/useMediaQuery.demo.tsx +++ b/src/useMediaQuery/useMediaQuery.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useMediaQuery } from '..' export default function Component() { diff --git a/src/useOnClickOutside/useOnClickOutside.demo.tsx b/src/useOnClickOutside/useOnClickOutside.demo.tsx index 6282d407..77bf3fd4 100644 --- a/src/useOnClickOutside/useOnClickOutside.demo.tsx +++ b/src/useOnClickOutside/useOnClickOutside.demo.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react' +import { useRef } from 'react' import { useOnClickOutside } from '..' diff --git a/src/useReadLocalStorage/useReadLocalStorage.demo.tsx b/src/useReadLocalStorage/useReadLocalStorage.demo.tsx index f23e6453..53475d4f 100644 --- a/src/useReadLocalStorage/useReadLocalStorage.demo.tsx +++ b/src/useReadLocalStorage/useReadLocalStorage.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useReadLocalStorage } from '..' export default function Component() { diff --git a/src/useScreen/useScreen.demo.tsx b/src/useScreen/useScreen.demo.tsx index af0a7a58..8279e13b 100644 --- a/src/useScreen/useScreen.demo.tsx +++ b/src/useScreen/useScreen.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useScreen } from '..' export default function Component() { diff --git a/src/useScript/useScript.demo.tsx b/src/useScript/useScript.demo.tsx index fe1fd6d6..f9382f9e 100644 --- a/src/useScript/useScript.demo.tsx +++ b/src/useScript/useScript.demo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import { useEffect } from 'react' import { useScript } from '..' diff --git a/src/useSessionStorage/useSessionStorage.demo.tsx b/src/useSessionStorage/useSessionStorage.demo.tsx index 3af33f28..6e650b0a 100644 --- a/src/useSessionStorage/useSessionStorage.demo.tsx +++ b/src/useSessionStorage/useSessionStorage.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useSessionStorage } from '..' export default function Component() { diff --git a/src/useSsr/useSsr.demo.tsx b/src/useSsr/useSsr.demo.tsx index 26fa3f12..8908e8dc 100644 --- a/src/useSsr/useSsr.demo.tsx +++ b/src/useSsr/useSsr.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useSsr } from '..' export default function Component() { diff --git a/src/useStep/useStep.demo.tsx b/src/useStep/useStep.demo.tsx index 501b0d88..e632cd1d 100644 --- a/src/useStep/useStep.demo.tsx +++ b/src/useStep/useStep.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useStep } from '..' export default function Component() { diff --git a/src/useTernaryDarkMode/useTernaryDarkMode.demo.tsx b/src/useTernaryDarkMode/useTernaryDarkMode.demo.tsx index bf592db7..90dc27ec 100644 --- a/src/useTernaryDarkMode/useTernaryDarkMode.demo.tsx +++ b/src/useTernaryDarkMode/useTernaryDarkMode.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useTernaryDarkMode } from '..' export default function Component() { diff --git a/src/useTimeout/useTimeout.demo.tsx b/src/useTimeout/useTimeout.demo.tsx index 97da638e..55d098ed 100644 --- a/src/useTimeout/useTimeout.demo.tsx +++ b/src/useTimeout/useTimeout.demo.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import { useTimeout } from '..' diff --git a/src/useUpdateEffect/useUpdateEffect.demo.tsx b/src/useUpdateEffect/useUpdateEffect.demo.tsx index 794aff81..147143cf 100644 --- a/src/useUpdateEffect/useUpdateEffect.demo.tsx +++ b/src/useUpdateEffect/useUpdateEffect.demo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { useUpdateEffect } from '..' diff --git a/src/useWindowSize/useWindowSize.demo.tsx b/src/useWindowSize/useWindowSize.demo.tsx index 33a6f64f..f911e9c3 100644 --- a/src/useWindowSize/useWindowSize.demo.tsx +++ b/src/useWindowSize/useWindowSize.demo.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { useWindowSize } from '..' export default function Component() { diff --git a/templates/codesandbox/tsconfig.json b/templates/codesandbox/tsconfig.json index 5e1fb566..dc07a68c 100644 --- a/templates/codesandbox/tsconfig.json +++ b/templates/codesandbox/tsconfig.json @@ -4,7 +4,7 @@ "module": "commonjs", "strict": true, "lib": ["ESNEXT", "DOM"], - "jsx": "react", + "jsx": "react-jsx", "esModuleInterop": true, "isolatedModules": true } diff --git a/tsconfig.json b/tsconfig.json index c26fead4..abde615d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,7 @@ "skipLibCheck": true, "removeComments": true, "esModuleInterop": true, - "jsx": "react", + "jsx": "react-jsx", "strict": true, "lib": ["ESNEXT", "DOM"] }, diff --git a/website/gatsby-node.ts b/website/gatsby-node.ts index a5ee6803..e99032ad 100644 --- a/website/gatsby-node.ts +++ b/website/gatsby-node.ts @@ -4,5 +4,20 @@ * See: https://www.gatsbyjs.org/docs/node-apis/ */ +import { GatsbyNode } from 'gatsby' + export { createPages } from './src/gatsby/createPages' export { onCreateNode } from './src/gatsby/onCreateNode' + +// importing React in now not required since React 17 and Gatsby 2.28.1, +// but the ecosystem of plugins doesn't support it all yet +export const onCreateBabelConfig: GatsbyNode['onCreateBabelConfig'] = ({ + actions, +}) => { + actions.setBabelPlugin({ + name: '@babel/plugin-transform-react-jsx', + options: { + runtime: 'automatic', + }, + }) +} diff --git a/website/src/components/CopyButton.tsx b/website/src/components/CopyButton.tsx index ffb8cb12..cb9b4c5a 100644 --- a/website/src/components/CopyButton.tsx +++ b/website/src/components/CopyButton.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import FileCopyIcon from '@mui/icons-material/FileCopy' import { IconButton } from '@mui/material' diff --git a/website/src/components/backToTop.tsx b/website/src/components/backToTop.tsx index 1125442c..94ca6036 100644 --- a/website/src/components/backToTop.tsx +++ b/website/src/components/backToTop.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState } from 'react' +import { FC, useState } from 'react' import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp' import { styled } from '@mui/material' diff --git a/website/src/components/code.tsx b/website/src/components/code.tsx index 15ca1984..533fa3ac 100644 --- a/website/src/components/code.tsx +++ b/website/src/components/code.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { styled } from '@mui/material' import Typography from '@mui/material/Typography' import Highlight, { defaultProps, Language } from 'prism-react-renderer' diff --git a/website/src/components/hero.tsx b/website/src/components/hero.tsx index a94506ca..1a89d2ed 100644 --- a/website/src/components/hero.tsx +++ b/website/src/components/hero.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react' +import { FC } from 'react' import { styled } from '@mui/material' import Container from '@mui/material/Container' diff --git a/website/src/components/layout/footer.tsx b/website/src/components/layout/footer.tsx index b36f281b..e515269b 100644 --- a/website/src/components/layout/footer.tsx +++ b/website/src/components/layout/footer.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import { styled } from '@mui/material' import Container from '@mui/material/Container' import Hidden from '@mui/material/Hidden' diff --git a/website/src/components/layout/header.tsx b/website/src/components/layout/header.tsx index c8342935..22831ef6 100644 --- a/website/src/components/layout/header.tsx +++ b/website/src/components/layout/header.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import GitHubIcon from '@mui/icons-material/GitHub' import MenuIcon from '@mui/icons-material/Menu' import RssFeedIcon from '@mui/icons-material/RssFeed' diff --git a/website/src/components/layout/layout.tsx b/website/src/components/layout/layout.tsx index 8ed7c39a..78b0ed59 100644 --- a/website/src/components/layout/layout.tsx +++ b/website/src/components/layout/layout.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react' +import { FC } from 'react' import { styled, useMediaQuery, useTheme } from '@mui/material' import CssBaseline from '@mui/material/CssBaseline' diff --git a/website/src/components/layout/sidebar.tsx b/website/src/components/layout/sidebar.tsx index 37753421..13b060b0 100644 --- a/website/src/components/layout/sidebar.tsx +++ b/website/src/components/layout/sidebar.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react' +import { useRef } from 'react' import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' import { styled } from '@mui/material' diff --git a/website/src/components/mdxRenderer.tsx b/website/src/components/mdxRenderer.tsx index 28c0584b..d7874e01 100644 --- a/website/src/components/mdxRenderer.tsx +++ b/website/src/components/mdxRenderer.tsx @@ -1,5 +1,4 @@ -/* eslint-disable react/display-name */ -import React, { Fragment, HTMLProps } from 'react' +import { Children, Fragment, HTMLProps } from 'react' import { MDXProvider } from '@mdx-js/react' import MuiDivider from '@mui/material/Divider' @@ -146,7 +145,7 @@ const childrenToString = ( ): string => { let label = '' - React.Children.map(children, child => { + Children.map(children, child => { if (typeof child === 'string') { label += child } diff --git a/website/src/components/search/SearchModal.tsx b/website/src/components/search/SearchModal.tsx index e2a9563a..9a301acc 100644 --- a/website/src/components/search/SearchModal.tsx +++ b/website/src/components/search/SearchModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import Box from '@mui/material/Box' import Divider from '@mui/material/Divider' diff --git a/website/src/components/search/hitComps.tsx b/website/src/components/search/hitComps.tsx index f08b637b..c768f81c 100644 --- a/website/src/components/search/hitComps.tsx +++ b/website/src/components/search/hitComps.tsx @@ -1,4 +1,4 @@ -import React, { ComponentType } from 'react' +import { ComponentType } from 'react' import { Divider } from '@mui/material' import Link from '@mui/material/Link' diff --git a/website/src/components/search/input.tsx b/website/src/components/search/input.tsx index d79a6cac..c63c0c86 100644 --- a/website/src/components/search/input.tsx +++ b/website/src/components/search/input.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react' +import { FC } from 'react' import SearchIcon from '@mui/icons-material/Search' import MuiInputBase, { InputBaseProps } from '@mui/material/InputBase' diff --git a/website/src/components/seo.tsx b/website/src/components/seo.tsx index d4de0566..16cd4268 100644 --- a/website/src/components/seo.tsx +++ b/website/src/components/seo.tsx @@ -5,7 +5,7 @@ * See: https://www.gatsbyjs.org/docs/use-static-query/ */ -import React, { FC } from 'react' +import { FC } from 'react' import { useLocation } from '@reach/router' diff --git a/website/src/libs/filterHooks.ts b/website/src/libs/filterHooks.ts index 537ca98c..b3aa0bc2 100644 --- a/website/src/libs/filterHooks.ts +++ b/website/src/libs/filterHooks.ts @@ -1,4 +1,5 @@ import { HookNode } from '../models' + export interface ExtendedPost { post: T hookId: string @@ -12,17 +13,15 @@ export function filterHook( demos: HookNode[], ): ExtendedPost[] { const matchesPosts: ExtendedPost[] = [] - posts.forEach(post => { - const { fields } = post - // Check if have the corresponding hook - const hook = hooks.find(({ fields: { name } }) => name === fields.name) - - // Check if have the corresponding hook demo - const demo = demos.find(({ fields: { name } }) => name === fields.name) + posts.forEach(post => { + // Check if have the corresponding hook and demo + const hook = hooks.find(({ fields }) => fields.name === post.fields.name) + const demo = demos.find(({ fields }) => fields.name === post.fields.name) if (hook && demo) { - matchesPosts.push({ post, hookId: hook.id, demoId: demo.id }) + const extendedPost = { post, hookId: hook.id, demoId: demo.id } + matchesPosts.push(extendedPost) } }) diff --git a/website/src/libs/wrapPageElement.tsx b/website/src/libs/wrapPageElement.tsx index c76d9745..4a77e3c8 100644 --- a/website/src/libs/wrapPageElement.tsx +++ b/website/src/libs/wrapPageElement.tsx @@ -1,9 +1,9 @@ -import React, { ReactNode } from 'react' +import { ReactNode } from 'react' import TopLayout from '~/components/layout/layout' -const wrapPageElement = ({ element }: { element: ReactNode }) => { - return {element} -} +const wrapPageElement = ({ element }: { element: ReactNode }) => ( + {element} +) export default wrapPageElement diff --git a/website/src/pages/404.tsx b/website/src/pages/404.tsx index c3848095..71ed81bd 100644 --- a/website/src/pages/404.tsx +++ b/website/src/pages/404.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import SEO from '../components/seo' import Hero from '~/components/hero' diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index fc2dd5b1..10da8f7c 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,5 +1,3 @@ -import React from 'react' - import Hero from '~/components/hero' import SEO from '~/components/seo' import useSiteMetadata from '~/hooks/useSiteMetadata' diff --git a/website/src/templates/post.tsx b/website/src/templates/post.tsx index 0f5b52e8..9f80aff2 100644 --- a/website/src/templates/post.tsx +++ b/website/src/templates/post.tsx @@ -1,5 +1,3 @@ -import React, { FC } from 'react' - import Box from '@mui/material/Box' import Container from '@mui/material/Container' import Link from '@mui/material/Link' @@ -56,16 +54,22 @@ export const Head = ({ data }: PostTemplateProps) => ( /> ) -const Subtitle: FC = ({ children }) => ( - - {children} - -) +const SubSection = ({ title, body }: { title: string; body?: string }) => { + if (!body) return null + return ( + <> + + {title} + + + + ) +} function PostTemplate(props: PostTemplateProps) { const { post, hook, demo } = props.data @@ -84,19 +88,8 @@ function PostTemplate(props: PostTemplateProps) { - {hook && ( - <> - The Hook - - - )} - - {demo && ( - <> - Usage - - - )} + + diff --git a/website/tsconfig.json b/website/tsconfig.json index e7a7db06..7156ac60 100644 --- a/website/tsconfig.json +++ b/website/tsconfig.json @@ -3,7 +3,7 @@ "baseUrl": ".", "target": "ESNext", "module": "ESNext", - "jsx": "react", + "jsx": "react-jsx", "lib": ["dom", "esnext"], "moduleResolution": "node", "esModuleInterop": true,