clean up docs and examples

reach · Nov 18, 2020 · e998f4c · e998f4c
1 parent 4ac5ef7
commit e998f4c
Show file tree

Hide file tree

Showing 107 changed files with 292 additions and 310 deletions.
diff --git a/packages/listbox/README.md b/packages/listbox/README.md
@@ -7,12 +7,12 @@
 An accessible listbox for custom select inputs.
 
 ```jsx
-import React, { useState } from "react";
+import * as React from "react";
 import { Listbox, ListboxOption } from "@reach/listbox";
 import "@reach/listbox/styles.css";
 
 function Example(props) {
-  let [value, setValue] = useState("default");
+  let [value, setValue] = React.useState("default");
   return (
     <Listbox value={value} onChange={(value) => setValue(value)}>
       <ListboxOption value="default">🌮 Choose a taco</ListboxOption>

diff --git a/packages/listbox/examples/basic-strict-mode.example.tsx b/packages/listbox/examples/basic-strict-mode.example.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode } from "react";
+import * as React from "react";
 import { Listbox, ListboxOption } from "@reach/listbox";
 import VisuallyHidden from "@reach/visually-hidden";
 import { action } from "@storybook/addon-actions";
@@ -11,7 +11,7 @@ type Option = { value: string; label: string };
 
 function Example() {
   return (
-    <StrictMode>
+    <React.StrictMode>
       <VisuallyHidden id="taco-label">Choose a taco</VisuallyHidden>
       <Listbox
         aria-labelledby="taco-label"
@@ -37,7 +37,7 @@ function Example() {
           Lengua <Taco />
         </ListboxOption>
       </Listbox>
-    </StrictMode>
+    </React.StrictMode>
   );
 }
 

diff --git a/packages/listbox/examples/basic.example.js b/packages/listbox/examples/basic.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Listbox, ListboxOption } from "@reach/listbox";
 import VisuallyHidden from "@reach/visually-hidden";
 import { action } from "@storybook/addon-actions";

diff --git a/packages/listbox/examples/common.tsx b/packages/listbox/examples/common.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 export const Tag: React.FC<React.ComponentPropsWithoutRef<"span">> = (
   props

diff --git a/packages/listbox/examples/composed.example.tsx b/packages/listbox/examples/composed.example.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import * as React from "react";
 import VisuallyHidden from "@reach/visually-hidden";
 import {
   ListboxInput,
@@ -13,7 +13,7 @@ import "@reach/listbox/styles.css";
 let name = "Composed";
 
 function Example() {
-  let [value, setValue] = useState("pollo");
+  let [value, setValue] = React.useState("pollo");
   return (
     <div>
       <VisuallyHidden id="taco-label">Choose a taco</VisuallyHidden>

diff --git a/packages/listbox/examples/controlled.example.tsx b/packages/listbox/examples/controlled.example.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import * as React from "react";
 import VisuallyHidden from "@reach/visually-hidden";
 import { action } from "@storybook/addon-actions";
 import { Listbox, ListboxOption } from "@reach/listbox";
@@ -8,7 +8,7 @@ import "@reach/listbox/styles.css";
 let name = "Controlled";
 
 function Example() {
-  let [value, setValue] = useState("default");
+  let [value, setValue] = React.useState("default");
   return (
     <div>
       <VisuallyHidden id="taco-label">Choose a taco</VisuallyHidden>

diff --git a/packages/listbox/examples/focus-on-select.example.js b/packages/listbox/examples/focus-on-select.example.js
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import * as React from "react";
 import { Listbox, ListboxOption } from "@reach/listbox";
 import VisuallyHidden from "@reach/visually-hidden";
 import { action } from "@storybook/addon-actions";
@@ -13,7 +13,7 @@ let name = "Move Focus on Item Select";
 // in onChange as expected, since we're managing focus internally.
 
 function Example() {
-  let inputRef = useRef(null);
+  let inputRef = React.useRef(null);
   return (
     <div>
       <VisuallyHidden id="taco-label">Choose a taco</VisuallyHidden>

diff --git a/packages/listbox/examples/grouped-composed-label.example.js b/packages/listbox/examples/grouped-composed-label.example.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import * as React from "react";
 import VisuallyHidden from "@reach/visually-hidden";
 import {
   Listbox,
@@ -20,7 +20,7 @@ function GroupLabel({ icon, children, ...props }) {
 }
 
 function Example() {
-  let [value, setValue] = useState("default");
+  let [value, setValue] = React.useState("default");
   return (
     <div>
       <VisuallyHidden id="taco-label">Choose a taco</VisuallyHidden>

diff --git a/packages/listbox/examples/grouped.example.tsx b/packages/listbox/examples/grouped.example.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import * as React from "react";
 import VisuallyHidden from "@reach/visually-hidden";
 import { Listbox, ListboxGroup, ListboxOption } from "@reach/listbox";
 import { Taco } from "./common";
@@ -7,7 +7,7 @@ import "@reach/listbox/styles.css";
 let name = "Grouped";
 
 function Example() {
-  let [value, setValue] = useState("default");
+  let [value, setValue] = React.useState("default");
   return (
     <div>
       <VisuallyHidden id="taco-label">Choose a taco</VisuallyHidden>

diff --git a/packages/listbox/examples/position-over-active.example.tsx b/packages/listbox/examples/position-over-active.example.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import * as React from "react";
 import {
   ListboxInput,
   ListboxButton,
@@ -28,7 +28,7 @@ import "@reach/listbox/styles.css";
 let name = "Position popover over selection option";
 
 function Example() {
-  let buttonRef = useRef();
+  let buttonRef = React.useRef<any>();
   return (
     <div>
       <p>
@@ -72,13 +72,13 @@ function Example() {
 
 function PositionedPopover({ ...props }: ListboxPopoverProps) {
   let { selectedOptionRef, isExpanded } = useListboxContext();
-  let ref = useRef<HTMLElement>();
+  let ref = React.useRef<any>();
   let [top, setTop] = React.useState<null | number>(null);
 
   React.useEffect(() => {
     if (isExpanded) {
       // In our popover's position function, we get access to the observed
-      // popover rect. However, we also need to get the rect of the selected
+      // popover rect. Howev er, we also need to get the rect of the selected
       // option element and adjust the popover in response. Because the popover
       // rect is updating as it changes via useRect, this will create an endless
       // update loop. Since we only need these values when the popover is

diff --git a/packages/listbox/examples/styled.example.js b/packages/listbox/examples/styled.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import {
   ListboxInput,

diff --git a/packages/listbox/examples/with-form.example.tsx b/packages/listbox/examples/with-form.example.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import * as React from "react";
 import { Listbox, ListboxOption } from "@reach/listbox";
 import { action } from "@storybook/addon-actions";
 import { Taco } from "./common";
@@ -9,8 +9,8 @@ import { Taco } from "./common";
 let name = "With a Form (TS)";
 
 function Example() {
-  let [formData, setFormData] = useState({});
-  let formRef = useRef(null);
+  let [formData, setFormData] = React.useState({});
+  let formRef = React.useRef(null);
   return (
     <div>
       When focused on a form input or our custom listbox inside of a form, you

diff --git a/packages/listbox/examples/with-nested-tabbables.example.tsx b/packages/listbox/examples/with-nested-tabbables.example.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import * as React from "react";
 import VisuallyHidden from "@reach/visually-hidden";
 import { Listbox, ListboxOption } from "@reach/listbox";
 import { action } from "@storybook/addon-actions";
@@ -10,9 +10,9 @@ let name = "With nested tabbables";
 type Option = { value: string; label: string };
 
 function Example() {
-  let [value, setValue] = useState("default");
-  let [newOption, setNewOption] = useState("");
-  let [newOptions, setNewOptions] = useState<Option[]>([]);
+  let [value, setValue] = React.useState("default");
+  let [newOption, setNewOption] = React.useState("");
+  let [newOptions, setNewOptions] = React.useState<Option[]>([]);
 
   function handleSubmit(event: React.FormEvent) {
     event.preventDefault();

diff --git a/packages/listbox/examples/with-uselistboxcontext-hook.example.tsx b/packages/listbox/examples/with-uselistboxcontext-hook.example.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import * as React from "react";
 import {
   ListboxInput,
   ListboxButton,
@@ -30,7 +30,7 @@ function StyledListboxButton(props: ListboxButtonProps) {
 }
 
 function Example() {
-  let [value, setValue] = useState("pollo");
+  let [value, setValue] = React.useState("pollo");
 
   function handleChange(value: any) {
     setValue(value);

diff --git a/packages/menu-button/examples/animated.example.js b/packages/menu-button/examples/animated.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import { action } from "@storybook/addon-actions";
 import "@reach/menu-button/styles.css";

diff --git a/packages/menu-button/examples/basic-strict-mode.example.js b/packages/menu-button/examples/basic-strict-mode.example.js
@@ -1,4 +1,4 @@
-import React, { StrictMode } from "react";
+import * as React from "react";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import { action } from "@storybook/addon-actions";
 import "@reach/menu-button/styles.css";
@@ -7,7 +7,7 @@ let name = "Basic (strict mode)";
 
 function Example() {
   return (
-    <StrictMode>
+    <React.StrictMode>
       <Menu>
         <MenuButton id="example-button">
           Actions <span aria-hidden="true">▾</span>
@@ -19,7 +19,7 @@ function Example() {
           <MenuItem onSelect={action("Delete")}>Delete</MenuItem>
         </MenuList>
       </Menu>
-    </StrictMode>
+    </React.StrictMode>
   );
 }
 

diff --git a/packages/menu-button/examples/basic.example.js b/packages/menu-button/examples/basic.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import { action } from "@storybook/addon-actions";
 import "@reach/menu-button/styles.css";

diff --git a/packages/menu-button/examples/basic.example.tsx b/packages/menu-button/examples/basic.example.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import "@reach/menu-button/styles.css";

diff --git a/packages/menu-button/examples/conditional-items.example.js b/packages/menu-button/examples/conditional-items.example.js
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import "@reach/menu-button/styles.css";
 
 let name = "Conditional Items";
 
 function Example() {
-  const [activeItem, setActiveItem] = useState(false);
+  const [activeItem, setActiveItem] = React.useState(false);
 
   /*
    * Simulate the menu list changing while the user is navigating.
@@ -16,8 +16,8 @@ function Example() {
    * keyboard. Not much we can do to prevent mouse clicks from selecting a new
    * or wrong item here, hence why devs should avoid this behavior!
    */
-  const [disappearingItem, setDisappearingItem] = useState(false);
-  useEffect(() => {
+  const [disappearingItem, setDisappearingItem] = React.useState(false);
+  React.useEffect(() => {
     let interval = window.setInterval(() => {
       setDisappearingItem(!disappearingItem);
     }, 3000);

diff --git a/packages/menu-button/examples/corners.example.js b/packages/menu-button/examples/corners.example.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import "@reach/menu-button/styles.css";
@@ -7,7 +7,7 @@ let name = "At the Corners";
 
 function Example() {
   return (
-    <Fragment>
+    <React.Fragment>
       <div
         style={{
           position: "relative",
@@ -32,7 +32,7 @@ function Example() {
           id="button-4"
         />
       </div>
-    </Fragment>
+    </React.Fragment>
   );
 }
 

diff --git a/packages/menu-button/examples/custom-wrapper.example.js b/packages/menu-button/examples/custom-wrapper.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import {
   Menu,

diff --git a/packages/menu-button/examples/custom-wrapper.example.tsx b/packages/menu-button/examples/custom-wrapper.example.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import {
   Menu,

diff --git a/packages/menu-button/examples/focus-on-select.example.js b/packages/menu-button/examples/focus-on-select.example.js
@@ -1,14 +1,14 @@
-import React, { useRef, useState } from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import "@reach/menu-button/styles.css";
 
 let name = "Move Focus on Item Select";
 
 function Example() {
-  const [buttonText, setButtonText] = useState(null);
-  const [linkText, setLinkText] = useState(null);
-  const linkRef = useRef(null);
+  const [buttonText, setButtonText] = React.useState(null);
+  const [linkText, setLinkText] = React.useState(null);
+  const linkRef = React.useRef(null);
   return (
     <div>
       <p>

diff --git a/packages/menu-button/examples/long-text.example.js b/packages/menu-button/examples/long-text.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import {
   Menu,

diff --git a/packages/menu-button/examples/no-portal.example.js b/packages/menu-button/examples/no-portal.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import { action } from "@storybook/addon-actions";
 import "@reach/menu-button/styles.css";

diff --git a/packages/menu-button/examples/non-menu-children.example.js b/packages/menu-button/examples/non-menu-children.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import "@reach/menu-button/styles.css";
@@ -45,7 +45,7 @@ function ExampleLabel(props) {
         color: "orangered",
         textTransform: "uppercase",
         fontSize: "11px",
-        display: "block"
+        display: "block",
       }}
       {...props}
     />

diff --git a/packages/menu-button/examples/non-menu-children.example.tsx b/packages/menu-button/examples/non-menu-children.example.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import "@reach/menu-button/styles.css";
@@ -45,7 +45,7 @@ function ExampleLabel(props: any) {
         color: "orangered",
         textTransform: "uppercase",
         fontSize: "11px",
-        display: "block"
+        display: "block",
       }}
       {...props}
     />

diff --git a/packages/menu-button/examples/render-prop.example.js b/packages/menu-button/examples/render-prop.example.js
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { Menu, MenuList, MenuButton, MenuItem } from "@reach/menu-button";
 import "@reach/menu-button/styles.css";

diff --git a/packages/menu-button/examples/styled.example.js b/packages/menu-button/examples/styled.example.js
@@ -1,12 +1,12 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import {
   Menu,
   MenuLink,
   MenuButton,
   MenuPopover,
   MenuItems,
-  MenuItem
+  MenuItem,
 } from "@reach/menu-button";
 import styled from "styled-components";
 import "@reach/menu-button/styles.css";