Merge branch 'main' into tr/components-common

Author: smikitky

.eslintrc

@@ -5,7 +5,8 @@
   "plugins": ["@typescript-eslint"],
   "rules": {
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "warn"
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }],
+    "react-hooks/exhaustive-deps": "error"
   },
   "env": {
     "node": true,

src/components/Layout/HomeContent.js

@@ -8,12 +8,10 @@ import {
   useState,
   useContext,
   useId,
-  Fragment,
   Suspense,
   useEffect,
   useRef,
   useTransition,
-  useReducer,
 } from 'react';
 import cn from 'classnames';
 import NextLink from 'next/link';
@@ -26,7 +24,6 @@ import {IconSearch} from 'components/Icon/IconSearch';
 import {Logo} from 'components/Logo';
 import Link from 'components/MDX/Link';
 import CodeBlock from 'components/MDX/CodeBlock';
-import {IconNavArrow} from 'components/Icon/IconNavArrow';
 import {ExternalLink} from 'components/ExternalLink';
 import sidebarBlog from '../../sidebarBlog.json';
 
@@ -67,14 +64,6 @@ function Para({children}) {
   );
 }
 
-function Left({children}) {
-  return (
-    <div className="px-5 lg:px-0 max-w-4xl lg:text-left text-white text-opacity-80">
-      {children}
-    </div>
-  );
-}
-
 function Center({children}) {
   return (
     <div className="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center">
@@ -90,19 +79,23 @@ function FullBleed({children}) {
 }
 
 function CurrentTime() {
-  const msPerMinute = 60 * 1000;
-  const date = new Date();
-  let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
-
+  const [date, setDate] = useState(new Date());
   const currentTime = date.toLocaleTimeString([], {
     hour: 'numeric',
     minute: 'numeric',
   });
-  let [, forceUpdate] = useReducer((n) => n + 1, 0);
   useEffect(() => {
-    const timeout = setTimeout(forceUpdate, nextMinute - Date.now());
+    const msPerMinute = 60 * 1000;
+    let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
+
+    const timeout = setTimeout(() => {
+      if (Date.now() > nextMinute) {
+        setDate(new Date());
+      }
+    }, nextMinute - Date.now());
     return () => clearTimeout(timeout);
   }, [date]);
+
   return <span suppressHydrationWarning>{currentTime}</span>;
 }
 
@@ -872,7 +865,7 @@ function ExampleLayout({
         .filter((s) => s !== null);
       setOverlayStyles(nextOverlayStyles);
     }
-  }, [activeArea]);
+  }, [activeArea, hoverTopOffset]);
   return (
     <div className="lg:pl-10 lg:pr-5 w-full">
       <div className="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark">
@@ -1252,7 +1245,7 @@ function useNestedScrollLock(ref) {
       window.removeEventListener('scroll', handleScroll);
       clearInterval(interval);
     };
-  }, []);
+  }, [ref]);
 }
 
 function ExamplePanel({
@@ -1261,7 +1254,6 @@ function ExamplePanel({
   noShadow,
   height,
   contentMarginTop,
-  activeArea,
 }) {
   return (
     <div

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -54,6 +54,7 @@ export function SidebarLink({
       ref={ref}
       title={title}
       target={target}
+      passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(
         'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',

src/components/Layout/SidebarNav/SidebarNav.tsx

@@ -5,7 +5,6 @@
 import {Suspense} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
-import {Search} from 'components/Search';
 import {Feedback} from '../Feedback';
 import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
 import type {RouteItem} from '../getRouteMeta';

src/components/Layout/TopNav/TopNav.tsx

@@ -22,9 +22,8 @@ import {IconSearch} from 'components/Icon/IconSearch';
 import {Search} from 'components/Search';
 import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
-import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
+import {SidebarRouteTree} from '../Sidebar';
 import type {RouteItem} from '../getRouteMeta';
-import {SidebarLink} from '../Sidebar';
 
 declare global {
   interface Window {

src/components/Layout/getRouteMeta.tsx

@@ -68,7 +68,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
     currentIndex: 0,
   };
   buildRouteMeta(cleanedPath, routeTree, ctx);
-  const {currentIndex, ...meta} = ctx;
+  const {currentIndex: _, ...meta} = ctx;
   return {
     ...meta,
     breadcrumbs: breadcrumbs.length > 0 ? breadcrumbs : [routeTree],

src/components/MDX/BlogCard.tsx

@@ -18,6 +18,7 @@ function BlogCard({title, badge, date, icon, url, children}: BlogCardProps) {
   return (
     <Link
       href={url as string}
+      passHref
       className="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark">
       <div className="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10  hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed">
         <div className="flex flex-row gap-3 w-full">

src/components/MDX/MDXComponents.tsx

@@ -369,7 +369,8 @@ function YouTubeIframe(props: any) {
 }
 
 function Image(props: any) {
-  return <img className="max-w-[calc(min(700px,100%))]" {...props} />;
+  const {alt, ...rest} = props;
+  return <img alt={alt} className="max-w-[calc(min(700px,100%))]" {...rest} />;
 }
 
 export const MDXComponents = {

src/components/MDX/Sandpack/CustomPreset.tsx

@@ -54,7 +54,6 @@ export const CustomPreset = memo(function CustomPreset({
 
 const SandboxShell = memo(function SandboxShell({
   showDevTools,
-  onDevToolsLoad,
   devToolsLoaded,
   providedFiles,
   lintErrors,

src/components/MDX/Sandpack/NavigationBar.tsx

@@ -90,15 +90,17 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
     } else {
       return;
     }
-  }, [isMultiFile]);
+
+    // Note: in a real useEvent, onContainerResize would be omitted.
+  }, [isMultiFile, onContainerResize]);
 
   const handleReset = () => {
     /**
      * resetAllFiles must come first, otherwise
-     * the previous content will appears for a second
+     * the previous content will appear for a second
      * when the iframe loads.
      *
-     * Plus, it should only prompts if there's any file changes
+     * Plus, it should only prompt if there's any file changes
      */
     if (
       sandpack.editorState === 'dirty' &&

src/components/MDX/Sandpack/Preview.tsx

@@ -49,7 +49,6 @@ export function Preview({
     errorScreenRegisteredRef,
     openInCSBRegisteredRef,
     loadingScreenRegisteredRef,
-    status,
   } = sandpack;
 
   if (

src/components/MDX/TeamMember.tsx

@@ -7,7 +7,6 @@ import Image from 'next/image';
 import {IconTwitter} from '../Icon/IconTwitter';
 import {IconGitHub} from '../Icon/IconGitHub';
 import {ExternalLink} from '../ExternalLink';
-import {IconNewPage} from 'components/Icon/IconNewPage';
 import {H3} from './Heading';
 import {IconLink} from 'components/Icon/IconLink';
 

src/components/Search.tsx

@@ -5,11 +5,10 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import Router from 'next/router';
-import {lazy, useCallback, useEffect} from 'react';
+import {lazy, useEffect} from 'react';
 import * as React from 'react';
 import {createPortal} from 'react-dom';
 import {siteConfig} from 'siteConfig';
-import cn from 'classnames';
 
 export interface SearchProps {
   appId?: string;

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -20,7 +20,7 @@ June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](http
 
 ## サーバコンポーネント {/*server-components*/}
 
-2020 年 12 月に、[React サーバコンポーネント (RSC) に関する実験的なデモ](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components)を発表しました。それ以降、必要となる準備作業を React 18 で済ませ、実験のフィードバックから得られた改善に取り組んできました。
+2020 年 12 月に、[React サーバコンポーネント (RSC) に関する実験的なデモ](https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)を発表しました。それ以降、必要となる準備作業を React 18 で済ませ、実験のフィードバックから得られた改善に取り組んできました。
 
 特に、I/O ライブラリをフォークして例えば react-fetch のようなものを作成していく、というアイディアは捨て去ることにし、代わりに互換性のために async/await モデルを採用することにします。データフェッチングにはルータを使うこともできるのでこれにより RSC のリリースが遅れるということはありません。もうひとつの変更は、ファイルの拡張子でサーバコンポーネントかどうかを区別するというアプローチをやめ、[区別を注釈で行う](https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278)ことにする、というものです。
 

src/content/community/conferences.md

@@ -10,21 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Norway 2023 {/*react-norway-2023*/}
-June 16th, 2023. Larvik, Norway
-
-[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
-
-### ReactNext 2023 {/*reactnext-2023*/}
-June 27th, 2023. Tel Aviv, Israel
-
-[Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
-
-### React Nexus 2023 {/*react-nexus-2023*/}
-July 07 & 08, 2023. Bangalore, India (In-person event)
-
-[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
-
 ### React Rally 2023 🐙 {/*react-rally-2023*/}
 August 17 & 18, 2023. Salt Lake City, UT, USA
 
@@ -52,6 +37,21 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
 
 ## Past Conferences {/*past-conferences*/}
 
+### React Nexus 2023 {/*react-nexus-2023*/}
+July 07 & 08, 2023. Bangalore, India (In-person event)
+
+[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
+### ReactNext 2023 {/*reactnext-2023*/}
+June 27th, 2023. Tel Aviv, Israel
+
+[Website](https://www.react-next.com/) - [Facebook](https://www.facebook.com/ReactNextConf) - [Youtube](https://www.youtube.com/@ReactNext)
+
+### React Norway 2023 {/*react-norway-2023*/}
+June 16th, 2023. Larvik, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway/) - [Facebook](https://www.facebook.com/reactdaynorway/)
+
 ### React Summit 2023 {/*react-summit-2023*/}
 June 2 & 6, 2023. In-person in Amsterdam, Netherlands + remote first interactivity (hybrid event)
 
@@ -510,7 +510,7 @@ August 18 in Guangzhou, China
 
 [Website](https://react.w3ctech.com)
 
-### React Rally 2018{/*react-rally-2018*/}
+### React Rally 2018 {/*react-rally-2018*/}
 August 16-17 in Salt Lake City, Utah USA
 
 [Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)