Merge branch 'main' into pr/Nicolas-alt/593

README.md

@@ -67,4 +67,4 @@ If your language does not have a translation and you would like to create one, p
 - `yarn reset` to clear the local cache
 
 ## License
-Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file.
+Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](LICENSE-DOCS.md) file.

TRANSLATION.md

@@ -126,25 +126,27 @@ El uso de la segunda persona del singular varía en las diferentes variantes del
 
 ## El gerundio
 
-En inglés es común el uso del gerundio con función sustantiva en los títulos. Al traducirlo al español deberíamos evitar el calco, en este caso generalmente se puede usar el infinitivo:
+El gerundio al inicio de los títulos es común en inglés. En la mayoría de los casos el calco debería evitarse y usar en su lugar formas más comunes en español como un sustantivo o el infinitivo:
 
-Ejemplo:
+Ejemplos:
 
 ```md
 ## Thinking in React
 ```
 
-✅ CORRECTO:
+✅ CORRECTO: Pensar en React
+
+❌ DESACONSEJADO: Pensando en React
 
 ```md
-## Pensar en React
+## Rendering Lists
 ```
 
-❌ INCORRECTO:
+✅ CORRECTO: Renderizado de listas
 
-```md
-## Pensando en React
-```
+✅ TAMBIÉN CORRECTO: Renderizar listas
+
+❌ DESACONSEJADO: Renderizando listas
 
 # Traducciones comunes
 
@@ -168,18 +170,20 @@ Aquí hay algunas sugerencias para la traducción de términos de uso común en
 | framework | *framework* |
 | function component | componente de función |
 | hook | *hook* |
-| key | *key* |
+| key | *key* (f) |
 | indentation | sangrado o tabulación |
 | lazy initialization | inicialización diferida |
 | library | biblioteca |
 | lowercase | minúscula(s) |
 | prop / props | prop / props (f) |
 | React element | Elemento de React |
 | render | renderizar (verb), renderizado (noun)
+| ref / refs | ref / refs (f) |
 | shallow rendering | renderizado superficial |
 | set the state | asignar el estado |
 | state | estado |
 | string | *string* |
+| Suspense barrier | barrera de Suspense |
 | template literals | *template literals* |
 | uncontrolled component | componente no controlado |
 | update the state | actualizar el estado

beta/package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.14.1",
+    "@codesandbox/sandpack-react": "1.15.5",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
@@ -67,7 +67,7 @@
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "experimental",
+    "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215",
     "fs-extra": "^9.0.1",
     "globby": "^11.0.1",
     "gray-matter": "^4.0.2",

beta/patches/@codemirror+lang-javascript+0.19.6.patch

@@ -0,0 +1,30 @@
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.cjs b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+index 4475e4f..e1255c9 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.cjs
++++ b/node_modules/@codemirror/lang-javascript/dist/index.cjs
+@@ -135,7 +135,9 @@ const javascriptLanguage = language.LRLanguage.define({
+                 JSXText: highlight.tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": highlight.tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": highlight.tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": highlight.tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": highlight.tags.standard(highlight.tags.tagName)
+             })
+         ]
+     }),
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.js b/node_modules/@codemirror/lang-javascript/dist/index.js
+index d089f6b..db09ea6 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.js
++++ b/node_modules/@codemirror/lang-javascript/dist/index.js
+@@ -131,7 +131,9 @@ const javascriptLanguage = /*@__PURE__*/LRLanguage.define({
+                 JSXText: tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": tags.standard(tags.tagName),
+             })
+         ]
+     }),

beta/src/components/Breadcrumbs.tsx

@@ -10,7 +10,7 @@ function Breadcrumbs() {
   const {breadcrumbs} = useRouteMeta();
   if (!breadcrumbs) return null;
   return (
-    <div className="flex">
+    <div className="flex flex-wrap">
       {breadcrumbs.map(
         (crumb, i) =>
           crumb.path && (

beta/src/components/Icon/IconGitHub.tsx

@@ -8,10 +8,11 @@ export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
   function IconGitHub(props) {
     return (
       <svg
-        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1.33em"
+        height="1.33em"
+        viewBox="0 -2 24 24"
         fill="currentColor"
-        height="1em"
-        viewBox="0 0 20 20"
         {...props}>
         <path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
       </svg>

beta/src/components/Icon/IconLink.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconLink = memo<JSX.IntrinsicElements['svg']>(function IconLink(
+  props
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.33em"
+      height="1.33em"
+      viewBox="0 -2 24 24"
+      fill="currentColor"
+      {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+      />
+    </svg>
+  );
+});

beta/src/components/Layout/Footer.tsx

@@ -9,6 +9,7 @@ import ButtonLink from 'components/ButtonLink';
 import {ExternalLink} from 'components/ExternalLink';
 import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';
 import {IconTwitter} from 'components/Icon/IconTwitter';
+import {IconGitHub} from 'components/Icon/IconGitHub';
 import {IconNavArrow} from 'components/Icon/IconNavArrow';
 
 export function Footer() {
@@ -111,11 +112,13 @@ export function Footer() {
               </FooterLink>
             </div>
             <div className="flex flex-col">
-              <FooterLink href="/apis/react" isHeader={true}>
+              <FooterLink href="/reference/react" isHeader={true}>
                 API Reference
               </FooterLink>
-              <FooterLink href="/apis/react">React APIs</FooterLink>
-              <FooterLink href="/apis/react-dom">React DOM APIs</FooterLink>
+              <FooterLink href="/reference/react">React APIs</FooterLink>
+              <FooterLink href="/reference/react-dom">
+                React DOM APIs
+              </FooterLink>
             </div>
             <div className="flex flex-col sm:col-start-2 xl:col-start-4">
               <FooterLink href="/" isHeader={true}>
@@ -124,12 +127,13 @@ export function Footer() {
               <FooterLink href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md">
                 Code of Conduct
               </FooterLink>
-              <FooterLink href="/community/acknowledgements">
+              <FooterLink href="/learn/acknowledgements">
                 Acknowledgements
               </FooterLink>
-              <FooterLink href="/community/meet-the-team">
-                Meet the Team
+              <FooterLink href="/learn/docs-contributors">
+                Docs Contributors
               </FooterLink>
+              <FooterLink href="/learn/meet-the-team">Meet the Team</FooterLink>
               <FooterLink href="https://reactjs.org/blog">Blog</FooterLink>
               {/* <FooterLink href="/">Community Resources</FooterLink> */}
             </div>
@@ -160,6 +164,12 @@ export function Footer() {
                   className={socialLinkClasses}>
                   <IconTwitter />
                 </ExternalLink>
+                <ExternalLink
+                  aria-label="React on Github"
+                  href="https://github.com/facebook/react"
+                  className={socialLinkClasses}>
+                  <IconGitHub />
+                </ExternalLink>
               </div>
             </div>
           </div>

beta/src/components/Layout/MarkdownPage.tsx

@@ -3,10 +3,12 @@
  */
 
 import * as React from 'react';
+import {useRouter} from 'next/router';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
 import PageHeading from 'components/PageHeading';
 import {useRouteMeta} from './useRouteMeta';
+import {useActiveSection} from '../../hooks/useActiveSection';
 import {TocContext} from '../MDX/TocContext';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
@@ -25,13 +27,10 @@ export function MarkdownPage<
   T extends {title: string; status?: string} = {title: string; status?: string}
 >({children, meta, toc}: MarkdownProps<T>) {
   const {route, nextRoute, prevRoute} = useRouteMeta();
+  const section = useActiveSection();
   const title = meta.title || route?.title || '';
   const description = meta.description || route?.description || '';
-
-  if (!route) {
-    console.error('This page was not added to one of the sidebar JSON files.');
-  }
-  const isHomePage = route?.path === '/';
+  const isHomePage = section === 'home';
   return (
     <>
       <div className="pl-0">

beta/src/components/Layout/Nav/Nav.tsx

@@ -19,7 +19,6 @@ import NavLink from './NavLink';
 import {SidebarContext} from 'components/Layout/useRouteMeta';
 import {SidebarRouteTree} from '../Sidebar/SidebarRouteTree';
 import type {RouteItem} from '../useRouteMeta';
-import sidebarHome from '../../../sidebarHome.json';
 import sidebarLearn from '../../../sidebarLearn.json';
 import sidebarReference from '../../../sidebarReference.json';
 
@@ -115,12 +114,10 @@ export default function Nav() {
   if (isOpen) {
     switch (tab) {
       case 'home':
-        routeTree = sidebarHome as RouteItem;
-        break;
       case 'learn':
         routeTree = sidebarLearn as RouteItem;
         break;
-      case 'apis':
+      case 'reference':
         routeTree = sidebarReference as RouteItem;
         break;
     }
@@ -188,7 +185,7 @@ export default function Nav() {
       });
   }, [showFeedback]);
 
-  function selectTab(nextTab: 'learn' | 'apis' | 'home') {
+  function selectTab(nextTab: 'learn' | 'reference') {
     setTab(nextTab);
     scrollParentRef.current!.scrollTop = 0;
   }
@@ -217,7 +214,7 @@ export default function Nav() {
             </a>
           </NextLink>
           <div className="lg:w-full leading-loose hidden sm:flex flex-initial items-center h-auto pr-5 lg:pr-5 pt-0.5">
-            <div className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded text-link dark:text-link-dark uppercase font-bold tracking-wide text-xs whitespace-nowrap">
+            <div className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded uppercase text-link dark:text-link-dark font-bold tracking-wide text-xs whitespace-nowrap">
               Beta
             </div>
           </div>
@@ -244,15 +241,19 @@ export default function Nav() {
             </button>
           </div>
         </div>
+        {!isOpen && (
+          <div className="hidden lg:block sm:pt-10 lg:pt-4">
+            <Search />
+          </div>
+        )}
         <div className="px-0 pt-2 w-full 2xl:max-w-xs hidden lg:flex items-center self-center border-b-0 lg:border-b border-border dark:border-border-dark">
-          <NavLink href="/" isActive={section === 'home'}>
-            Inicio
-          </NavLink>
-          <NavLink href="/learn" isActive={section === 'learn'}>
+          <NavLink
+            href="/learn"
+            isActive={section === 'learn' || section === 'home'}>
             Aprende
           </NavLink>
-          <NavLink href="/apis/react" isActive={section === 'apis'}>
-            API
+          <NavLink href="/reference/react" isActive={section === 'reference'}>
+            Referencia
           </NavLink>
         </div>
         <div className="flex my-4 h-10 mx-0 w-full lg:hidden justify-end lg:max-w-sm">
@@ -312,19 +313,14 @@ export default function Nav() {
       {isOpen && (
         <div className="bg-wash dark:bg-wash-dark px-5 flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10">
           <TabButton
-            isActive={tab === 'home'}
-            onClick={() => selectTab('home')}>
-            Inicio
-          </TabButton>
-          <TabButton
-            isActive={tab === 'learn'}
+            isActive={tab === 'learn' || tab === 'home'}
             onClick={() => selectTab('learn')}>
             Aprende
           </TabButton>
           <TabButton
-            isActive={tab === 'apis'}
-            onClick={() => selectTab('apis')}>
-            API
+            isActive={tab === 'reference'}
+            onClick={() => selectTab('reference')}>
+            Referencia
           </TabButton>
         </div>
       )}
@@ -337,11 +333,6 @@ export default function Nav() {
             `lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10`,
             isOpen ? 'block z-40' : 'hidden lg:block'
           )}>
-          {!isOpen && (
-            <div className="px-5 sm:pt-10 lg:pt-4">
-              <Search />
-            </div>
-          )}
           <nav
             role="navigation"
             style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)

beta/src/components/Layout/Page.tsx

@@ -11,7 +11,6 @@ import {useActiveSection} from 'hooks/useActiveSection';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
 import SocialBanner from '../SocialBanner';
-import sidebarHome from '../../sidebarHome.json';
 import sidebarLearn from '../../sidebarLearn.json';
 import sidebarReference from '../../sidebarReference.json';
 import type {TocItem} from 'components/MDX/TocContext';
@@ -24,14 +23,11 @@ interface PageProps {
 export function Page({children, toc}: PageProps) {
   const {asPath} = useRouter();
   const section = useActiveSection();
-  let routeTree = sidebarHome as RouteItem;
+  let routeTree = sidebarLearn as RouteItem;
   switch (section) {
-    case 'apis':
+    case 'reference':
       routeTree = sidebarReference as RouteItem;
       break;
-    case 'learn':
-      routeTree = sidebarLearn as RouteItem;
-      break;
   }
   return (
     <>