[#343] remove import "React"

.eslintrc.js

@@ -4,5 +4,6 @@ module.exports = {
   extends: ['eslint-config-yceffort/typescript'],
   rules: {
     '@typescript-eslint/naming-convention': extendedRules,
+    'react/react-in-jsx-scope': 'off',
   },
 }

pages/404.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import CustomLink from '#components/Link'
 
 export default function FourZeroFour() {

pages/[year]/[...slugs].tsx

@@ -1,5 +1,4 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
-import React from 'react'
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
 
 import { Post } from '#commons/types'

pages/_app.tsx

@@ -1,6 +1,5 @@
 import 'src/tailwind.css'
 
-import React from 'react'
 import App from 'next/app'
 import Head from 'next/head'
 import Router from 'next/router'

pages/_document.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {

pages/_offline.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import CustomLink from '#components/Link'
 
 export default function Offline() {

pages/about.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import Image from 'next/image'
 
 import SiteConfig from '#src/config'
 import { PageSeo } from '#components/SEO'

pages/generate-screenshot.tsx

@@ -1,5 +1,4 @@
 import { GetServerSideProps } from 'next'
-import React from 'react'
 
 import Screenshot from '#components/screenshot'
 

pages/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { GetStaticProps } from 'next'
 import { format } from 'date-fns'
 

pages/pages/[id].tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { GetStaticPaths, GetStaticProps } from 'next'
 
 import { Post } from '#commons/types'

pages/tags.tsx

@@ -1,5 +1,4 @@
 import { GetStaticProps } from 'next'
-import React from 'react'
 
 import { getAllTagsFromPosts } from '#utils/Post'
 import { PageSeo } from '#components/SEO'

pages/tags/[tag]/pages/[id].tsx

@@ -1,5 +1,4 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
-import React from 'react'
 
 import { SiteConfig } from '#src/config'
 import { DEFAULT_NUMBER_OF_POSTS } from '#commons/const'

src/components/Footer.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Link from './Link'
 
 import SocialIcon from '#components/icons'

src/components/LayoutWrapper.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import Image from 'next/image'
+import { ReactNode } from 'react'
 
 import Link from './Link'
 import SectionContainer from './SectionContainer'
@@ -9,7 +9,7 @@ import ThemeSwitch from './ThemeSwitch'
 
 import SiteConfig from '#src/config'
 
-const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
+const LayoutWrapper = ({ children }: { children: ReactNode }) => {
   return (
     <SectionContainer>
       <div className="flex flex-col justify-between h-screen">

src/components/Link.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import Link from 'next/link'
+import { HTMLProps } from 'react'
 
 const CustomLink = ({
   href,
   ...rest
-}: { href: string } & React.HTMLProps<HTMLAnchorElement>) => {
+}: { href: string } & HTMLProps<HTMLAnchorElement>) => {
   const isInternalLink = href && href.startsWith('/')
   const isAnchorLink = href && href.startsWith('#')
 

src/components/PageTitle.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
-export default function PageTitle({ children }: { children: React.ReactNode }) {
+export default function PageTitle({ children }: { children: ReactNode }) {
   return (
     <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
       {children}

src/components/SEO.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { NextSeo, ArticleJsonLd } from 'next-seo'
 
 import SiteConfig from '#src/config'

src/components/SectionContainer.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
 export default function SectionContainer({
   children,
 }: {
-  children: React.ReactNode
+  children: ReactNode
 }) {
   return (
     <div className="max-w-3xl px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0">

src/components/Tag.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 const Tag = ({ text }: { text: string }) => {

src/components/icons/facebook.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function FacebookIcon({ className }: { className: string }) {
   return (
     <svg

src/components/icons/github.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function GithubIcon({ className }: { className: string }) {
   return (
     <svg

src/components/icons/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { FC } from 'react'
 
 import MailIcon from '#components/icons/mail'
 import GithubIcon from '#components/icons/github'
@@ -15,7 +15,7 @@ type IconType =
   | 'linkedin'
   | 'twitter'
 
-const Components: Record<IconType, React.FC<{ className: string }>> = {
+const Components: Record<IconType, FC<{ className: string }>> = {
   mail: MailIcon,
   github: GithubIcon,
   facebook: FacebookIcon,

src/components/icons/linkedin.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function LinkedinIcon({ className }: { className: string }) {
   return (
     <svg

src/components/icons/mail.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function MailIcon({ className }: { className: string }) {
   return (
     <svg

src/components/icons/profile.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function ProfileIcon({ className }: { className: string }) {
   return (
     <svg

src/components/icons/twitter.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function TwitterIcon({ className }: { className: string }) {
   return (
     <svg

src/components/icons/youtube.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function YoutubeIcon({ className }: { className: string }) {
   return (
     <svg

src/components/layouts/List.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { format } from 'date-fns'
 
 import { Post } from '#commons/types'

src/components/layouts/Post.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { format } from 'date-fns'
+import Image from 'next/image'
+import { PropsWithChildren } from 'react'
 
 import { FrontMatter } from '#commons/types'
 import SectionContainer from '#components/SectionContainer'
@@ -15,11 +16,10 @@ export default function PostLayout({
   children,
   frontMatter,
   slug,
-}: {
+}: PropsWithChildren<{
   slug: string
-  children: React.ReactNode
   frontMatter: FrontMatter
-}) {
+}>) {
   const { date, title, tags, description } = frontMatter
   const updatedAt = format(new Date(date), 'yyyy-MM-dd')
 

src/components/layouts/Post/math.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function MathLoader() {
   return (
     <>

src/components/screenshot/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styles from './index.module.css'
 
 import SiteConfig from '#src/config'