Merge pull request #197 from reactjs/sync-6bd09fe6

Sync with reactjs.org @ 6bd09fe

Author: arshadkazmi42

beta/.eslintrc

@@ -1,10 +1,13 @@
 {
   "root": true,
-  "extends": "next",
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "no-unused-vars": "warn"
+  },
   "env": {
     "node": true,
     "commonjs": true,
     "browser": true,
     "es6": true
   }
-}
+}

beta/package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "0.13.16-experimental.0",
+    "@codesandbox/sandpack-react": "v0.14.3-experimental.1",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
@@ -53,7 +53,7 @@
     "@typescript-eslint/eslint-plugin": "2.x",
     "@typescript-eslint/parser": "2.x",
     "asyncro": "^3.0.0",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.4.2",
     "babel-eslint": "10.x",
     "eslint": "7.x",
     "eslint-config-next": "12.0.3",
@@ -72,7 +72,7 @@
     "mdast-util-to-string": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.2.2",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.5.1",
@@ -86,7 +86,7 @@
     "retext": "^7.0.1",
     "retext-smartypants": "^4.0.0",
     "rss": "^1.2.2",
-    "tailwindcss": "^2.2.7",
+    "tailwindcss": "^3.0.22",
     "typescript": "^4.0.2",
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"

beta/public/images/docs/diagrams/sharing_data_child.dark.svg

@@ -19,7 +19,7 @@ export const IconArrow = React.memo<
       fill="currentColor"
       {...rest}
       className={cn(className, {
-        'transform rotate-180': displayDirection === 'right',
+        'rotate-180': displayDirection === 'right',
       })}>
       <path fill="none" d="M0 0h24v24H0z" />
       <path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />

beta/public/images/docs/diagrams/sharing_data_child.svg

@@ -11,8 +11,8 @@ export const IconArrowSmall = React.memo<
   }
 >(function IconArrowSmall({displayDirection, className, ...rest}) {
   const classes = cn(className, {
-    'transform rotate-180': displayDirection === 'left',
-    'transform rotate-90': displayDirection === 'down',
+    'rotate-180': displayDirection === 'left',
+    'rotate-90': displayDirection === 'down',
   });
   return (
     <svg

beta/public/images/docs/diagrams/sharing_data_child_clicked.dark.svg

@@ -12,10 +12,10 @@ export const IconChevron = React.memo<
 >(function IconChevron({className, displayDirection, ...rest}) {
   const classes = cn(
     {
-      'transform rotate-0': displayDirection === 'down',
-      'transform rotate-90': displayDirection === 'left',
-      'transform rotate-180': displayDirection === 'up',
-      'transform -rotate-90': displayDirection === 'right',
+      'rotate-0': displayDirection === 'down',
+      'rotate-90': displayDirection === 'left',
+      'rotate-180': displayDirection === 'up',
+      '-rotate-90': displayDirection === 'right',
     },
     className
   );

beta/public/images/docs/diagrams/sharing_data_child_clicked.svg

@@ -13,9 +13,9 @@ export const IconNavArrow = React.memo<
   const classes = cn(
     'duration-100 ease-in transition',
     {
-      'transform rotate-0': displayDirection === 'down',
-      'transform -rotate-90': displayDirection === 'right',
-      'transform rotate-90': displayDirection === 'left',
+      'rotate-0': displayDirection === 'down',
+      '-rotate-90': displayDirection === 'right',
+      'rotate-90': displayDirection === 'left',
     },
     className
   );

beta/public/images/docs/diagrams/sharing_data_parent.dark.svg

@@ -28,7 +28,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
   return (
     <aside
       className={cn(
-        `lg:flex-grow lg:flex flex-col w-full pt-4 pb-8 lg:pb-0 lg:max-w-xs fixed lg:sticky bg-wash dark:bg-wash-dark z-10 top-0`,
+        `lg:grow lg:flex flex-col w-full pt-4 pb-8 lg:pb-0 lg:max-w-xs fixed lg:sticky bg-wash dark:bg-wash-dark z-10 top-0`,
         isOpen ? 'block z-40' : 'hidden lg:block'
       )}
       aria-hidden={isHidden}>
@@ -39,7 +39,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
         role="navigation"
         ref={menuRef}
         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)
-        className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
+        className="w-full h-screen lg:h-auto grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
         {isMobileSidebar ? (
           <MobileNav />
         ) : (

beta/public/images/docs/diagrams/sharing_data_parent.svg

@@ -89,7 +89,7 @@ export function Navigation({
           {challenges.map(({name, id, order}, index) => (
             <button
               className={cn(
-                'py-2 mr-4 text-base border-b-4 duration-100 ease-in transition whitespace-nowrap overflow-ellipsis',
+                'py-2 mr-4 text-base border-b-4 duration-100 ease-in transition whitespace-nowrap text-ellipsis',
                 isRecipes &&
                   currentChallenge.id === id &&
                   'text-purple-50 border-purple-50 hover:text-purple-50 dark:text-purple-30 dark:border-purple-30 dark:hover:text-purple-30',
@@ -108,6 +108,7 @@ export function Navigation({
       <div className="flex z-10 pb-2 pl-2">
         <button
           onClick={handleScrollLeft}
+          aria-label="Scroll left"
           className={cn(
             'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-l border-gray-20 border-r',
             {
@@ -119,6 +120,7 @@ export function Navigation({
         </button>
         <button
           onClick={handleScrollRight}
+          aria-label="Scroll right"
           className={cn(
             'bg-secondary-button dark:bg-secondary-button-dark h-8 px-2 rounded-r-lg',
             {

beta/public/images/docs/diagrams/sharing_data_parent_clicked.dark.svg

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import Image from 'next/image';
+
+interface DiagramProps {
+  name: string;
+  alt: string;
+  height: number;
+  width: number;
+  children: string;
+}
+
+export function Diagram({name, alt, height, width, children}: DiagramProps) {
+  return (
+    <figure className="flex flex-col px-0 py-5 sm:p-10">
+      <div className="dark-image">
+        <Image
+          src={`/images/docs/diagrams/${name}.dark.svg`}
+          alt={alt}
+          height={height}
+          width={width}
+        />
+      </div>
+      <div className="light-image">
+        <Image
+          src={`/images/docs/diagrams/${name}.svg`}
+          alt={alt}
+          height={height}
+          width={width}
+        />
+      </div>
+      <figcaption className="p-1 sm:p-4 mt-4 sm:mt-0 text-gray-40 text-base lg:text-lg text-center leading-6">
+        {children}
+      </figcaption>
+    </figure>
+  );
+}
+
+export default Diagram;

beta/public/images/docs/diagrams/sharing_data_parent_clicked.svg

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import * as React from 'react';
+import {ReactNode} from 'react';
+
+interface DiagramGroupProps {
+  children: ReactNode;
+}
+
+export function DiagramGroup({children}: DiagramGroupProps) {
+  return (
+    <div className="flex flex-col sm:flex-row px-6 py-2 sm:p-0 space-y-10 sm:space-y-0">
+      {children}
+    </div>
+  );
+}
+
+export default DiagramGroup;

beta/src/components/Icon/IconArrow.tsx

@@ -9,7 +9,7 @@ import YouWillLearnCard from 'components/MDX/YouWillLearnCard';
 function HomepageHero() {
   return (
     <>
-      <div className="mt-8 lg:mt-10 mb-0 sm:mt-8 sm:mb-8 lg:mb-6 flex-col sm:flex-row flex flex-grow items-start sm:items-center justify-start mx-auto max-w-4xl">
+      <div className="mt-8 lg:mt-10 mb-0 sm:mt-8 sm:mb-8 lg:mb-6 flex-col sm:flex-row flex grow items-start sm:items-center justify-start mx-auto max-w-4xl">
         <Logo className="text-link dark:text-link-dark w-20 sm:w-28 mr-4 mb-4 sm:mb-0 h-auto" />
         <div className="flex flex-wrap">
           <h1 className="text-5xl mr-4 -mt-1 flex wrap font-bold leading-tight text-primary dark:text-primary-dark">

beta/src/components/Icon/IconArrowSmall.tsx

@@ -19,6 +19,8 @@ import Link from './Link';
 import {PackageImport} from './PackageImport';
 import Recap from './Recap';
 import Sandpack from './Sandpack';
+import Diagram from './Diagram';
+import DiagramGroup from './DiagramGroup';
 import SimpleCallout from './SimpleCallout';
 import TerminalBlock from './TerminalBlock';
 import YouWillLearnCard from './YouWillLearnCard';
@@ -369,6 +371,8 @@ export const MDXComponents = {
     title: string;
     excerpt: string;
   }) => <ExpandableExample {...props} type="DeepDive" />,
+  Diagram,
+  DiagramGroup,
   Gotcha,
   HomepageHero,
   Illustration,

beta/src/components/Icon/IconChevron.tsx

@@ -52,7 +52,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) {
         {dropdownActive ? <FilesDropdown /> : <FileTabs />}
       </div>
       <div
-        className="px-3 flex items-center justify-end flex-grow text-right"
+        className="px-3 flex items-center justify-end grow text-right"
         translate="yes">
         {showDownload && <DownloadButton />}
         <ResetButton onReset={handleReset} />

beta/src/components/Icon/IconNavArrow.tsx

@@ -15,7 +15,7 @@ const SandpackGlimmer = ({code}: {code: string}) => (
         <div className="px-4 lg:px-6">
           <div className="sp-tabs"></div>
         </div>
-        <div className="px-3 flex items-center justify-end flex-grow text-right"></div>
+        <div className="px-3 flex items-center justify-end grow text-right"></div>
       </div>
       <div className="sp-wrapper">
         <div className="sp-layout sp-custom-layout min-h-[216px]">

beta/src/components/Layout/Sidebar/Sidebar.tsx

@@ -106,7 +106,7 @@ export const Search: React.FC<SearchProps> = ({
         type="button"
         className="hidden md:flex relative pl-4 pr-0.5 py-1 h-10 bg-secondary-button dark:bg-gray-80 outline-none focus:ring focus:outline-none betterhover:hover:bg-opacity-80 pointer items-center shadow-inner text-left w-full text-gray-30 rounded-lg align-middle text-sm"
         onClick={onOpen}>
-        <IconSearch className="mr-3 align-middle text-gray-30 flex-shrink-0 group-betterhover:hover:text-gray-70" />
+        <IconSearch className="mr-3 align-middle text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
         Search
         <span className="ml-auto hidden sm:flex item-center">
           <Kbd>⌘</Kbd>

beta/src/components/MDX/Challenges/Navigation.tsx

@@ -34,10 +34,29 @@ If you use React on the web, you'll also need the same version of [ReactDOM](/ap
 
 ## Exports {/*exports*/}
 
-<YouWillLearnCard title="useState" path="/reference/usestate">
+<YouWillLearnCard title="useState" path="/apis/usestate">
 
-A React Hook that lets a component "remember" some information (called state).
+Declares a state variable.
+
+```js
+function MyComponent() {
+  const [age, setAge] = useState(42);
+  // ...
+```
 
 </YouWillLearnCard>
 
+<YouWillLearnCard title="useRef" path="/apis/useref">
+
+Declares a ref.
+
+```js
+function MyComponent() {
+  const inputRef = useRef(null);
+  // ...
+```
+
+</YouWillLearnCard>
+
+
 This section is incomplete and is still being written!

beta/src/components/MDX/Diagram.tsx

@@ -38,9 +38,13 @@ ReactDOM supports all popular browsers, including Internet Explorer 9 and above.
 
 ## Exports {/*exports*/}
 
-<YouWillLearnCard title="render" path="/reference/render">
+<YouWillLearnCard title="render" path="/apis/render">
 
-Renders a piece of JSX ("React element") into a browser DOM container node.
+Displays a React component inside a browser DOM node.
+
+```js
+render(<App />, document.getElementById('root'));
+```
 
 </YouWillLearnCard>