Moving aria hook imports into first doc example (#2677)

Author: LFDanLu

packages/@react-aria/breadcrumbs/docs/useBreadcrumbs.mdx

@@ -16,10 +16,6 @@ import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/breadcrumbs/package.json';
 import Anatomy from './anatomy.svg';
 
-```jsx import
-import {useBreadcrumbs, useBreadcrumbItem} from '@react-aria/breadcrumbs';
-```
-
 ---
 category: Navigation
 keywords: [breadcrumbs, aria]
@@ -92,6 +88,8 @@ passed to the last breadcrumb item by cloning the element and adding the `isCurr
 prop.
 
 ```tsx example
+import {useBreadcrumbs, useBreadcrumbItem} from '@react-aria/breadcrumbs';
+
 function Breadcrumbs(props) {
   let {navProps} = useBreadcrumbs(props);
   let children = React.Children.toArray(props.children);

packages/@react-aria/button/docs/useButton.mdx

@@ -15,11 +15,6 @@ import {HeaderInfo, FunctionAPI, PageDescription} from '@react-spectrum/docs';
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/button/package.json';
 
-```jsx import
-import {useButton} from '@react-aria/button';
-import {useRef} from 'react';
-```
-
 ---
 category: Buttons
 keywords: [button, aria, form]
@@ -66,6 +61,9 @@ If a visual label is not provided (e.g. an icon only button), then an `aria-labe
 By default, `useButton` assumes that you are using it with a native `<button>` element.
 
 ```tsx example
+import {useButton} from '@react-aria/button';
+import {useRef} from 'react';
+
 function Button(props) {
   let ref = useRef();
   let {buttonProps} = useButton(props, ref);

packages/@react-aria/button/docs/useToggleButton.mdx

@@ -16,11 +16,6 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/button/package.json';
 
-```jsx import
-import {useToggleButton} from '@react-aria/button';
-import {useRef} from 'react';
-```
-
 ---
 category: Buttons
 keywords: [button, toggle button, aria, form]
@@ -83,6 +78,8 @@ The toggle state is used to switch between a green and blue background when unse
 In addition, the `isPressed` state is used to adjust the background to be darker when the user presses down on the button.
 
 ```tsx example
+import {useRef} from 'react';
+import {useToggleButton} from '@react-aria/button';
 import {useToggleState} from '@react-stately/toggle';
 
 function ToggleButton(props) {

packages/@react-aria/checkbox/docs/useCheckbox.mdx

@@ -19,10 +19,6 @@ import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/checkbox/package.json';
 import Anatomy from './checkbox-anatomy.svg';
 
-```jsx import
-import {useCheckbox} from '@react-aria/checkbox';
-```
-
 ---
 category: Forms
 keywords: [checkbox, input, aria]
@@ -80,6 +76,7 @@ technology.
 ## Example
 
 ```tsx example
+import {useCheckbox} from '@react-aria/checkbox';
 import {useToggleState} from '@react-stately/toggle';
 
 function Checkbox(props) {

packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx

@@ -19,10 +19,6 @@ import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/checkbox/package.json';
 import Anatomy from './checkboxgroup-anatomy.svg';
 
-```jsx import
-import {useCheckboxGroup, useCheckboxGroupItem} from '@react-aria/checkbox';
-```
-
 ---
 category: Forms
 keywords: [checkbox, input, aria]
@@ -101,6 +97,7 @@ to each checkbox. An HTML `<label>` element wraps the native input and the text
 for the radio.
 
 ```tsx example
+import {useCheckboxGroup, useCheckboxGroupItem} from '@react-aria/checkbox';
 import {useCheckboxGroupState} from '@react-stately/checkbox';
 
 let CheckboxGroupContext = React.createContext(null);

packages/@react-aria/color/docs/useColorField.mdx

@@ -16,10 +16,6 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import packageData from '@react-aria/color/package.json';
 import Anatomy from './ColorFieldAnatomy.svg';
 
-```jsx import
-import {useColorField} from '@react-aria/color';
-```
-
 ---
 category: Color
 keywords: [color, input, color picker, aria]
@@ -80,6 +76,7 @@ to identify the element to screen readers.
 ## Example
 
 ```tsx example export=true
+import {useColorField} from '@react-aria/color';
 import {useColorFieldState} from '@react-stately/color';
 
 function ColorField(props) {

packages/@react-aria/color/docs/useColorSlider.mdx

@@ -17,10 +17,6 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import packageData from '@react-aria/color/package.json';
 import Anatomy from './ColorSliderAnatomy.svg';
 
-```jsx import
-import {useColorSlider} from '@react-aria/color';
-```
-
 ---
 category: Color
 keywords: [color slider, color picker, aria]
@@ -100,6 +96,7 @@ using the [VisuallyHidden](VisuallyHidden.html) component. The thumb also uses t
 grow in size when it is keyboard focused (try tabbing to it).
 
 ```tsx example export=true
+import {useColorSlider} from '@react-aria/color';
 import {useColorSliderState} from '@react-stately/color';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
 import {useLocale} from '@react-aria/i18n';

packages/@react-aria/color/docs/useColorWheel.mdx

@@ -16,10 +16,6 @@ import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink, PageDescr
 import packageData from '@react-aria/color/package.json';
 import Anatomy from './ColorWheelAnatomy.svg';
 
-```jsx import
-import {useColorWheel} from '@react-aria/color';
-```
-
 ---
 category: Color
 keywords: [color wheel, color picker, aria]
@@ -88,6 +84,7 @@ using the [VisuallyHidden](VisuallyHidden.html) component. The thumb also uses t
 grow in size when it is keyboard focused (try tabbing to it).
 
 ```tsx example export=true
+import {useColorWheel} from '@react-aria/color';
 import {useColorWheelState} from '@react-stately/color';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
 import {useFocusRing} from '@react-aria/focus';

packages/@react-aria/focus/docs/FocusRing.mdx

@@ -14,10 +14,6 @@ import docs from 'docs:@react-aria/focus';
 import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
 import packageData from '@react-aria/focus/package.json';
 
-```tsx import
-import {FocusRing} from '@react-aria/focus';
-```
-
 ---
 category: Focus
 keywords: [focus, keyboard focus, focus management, aria]
@@ -67,6 +63,8 @@ This example shows how to use `<FocusRing>` to apply a CSS class when keyboard f
 ```
 
 ```tsx example
+import {FocusRing} from '@react-aria/focus';
+
 <FocusRing focusRingClass="focus-ring">
   <button className="button">Test</button>
 </FocusRing>

packages/@react-aria/focus/docs/FocusScope.mdx

@@ -15,10 +15,6 @@ import {HeaderInfo, PropTable, FunctionAPI, TypeLink, ClassAPI, PageDescription}
 import {Keyboard} from '@react-spectrum/text';
 import packageData from '@react-aria/focus/package.json';
 
-```tsx import
-import {FocusScope, useFocusManager} from '@react-aria/focus';
-```
-
 ---
 category: Focus
 keywords: [focus scope, keyboard focus, focus management, aria]
@@ -68,6 +64,8 @@ button unmounts the focus scope, which restores focus back to the button.
 For a full example of building a modal dialog, see [useDialog](useDialog.html).
 
 ```tsx example
+import {FocusScope} from '@react-aria/focus';
+
 function Example() {
   let [isOpen, setOpen] = React.useState(false);
   return (
@@ -93,6 +91,8 @@ right arrow keys to move focus to the previous and next buttons. The `wrap` opti
 used to make focus wrap around when it reaches the first or last button.
 
 ```tsx example
+import {useFocusManager} from '@react-aria/focus';
+
 function Toolbar(props) {
   return (
     <div role="toolbar">