refactor(imports): ♻️ organize imports on all components

src/accordion/AccordionPanel.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
+import { useForkRef } from "reakit-utils";
 import { createComponent, createHook } from "reakit-system";
 import {
   unstable_IdHTMLProps,
   unstable_IdOptions,
   unstable_useId,
 } from "reakit";
-import { useForkRef } from "reakit-utils";
 
 import { ACCORDION_PANEL_KEYS } from "./__keys";
 import { AccordionStateReturn } from "./AccordionState";

src/accordion/AccordionState.ts

@@ -33,14 +33,14 @@ export type AccordionInitialState = unstable_IdInitialState & {
   manual?: boolean;
 };
 
-export type Button = {
+type Button = {
   id: string;
   ref: React.RefObject<HTMLElement>;
 };
 
-export type Panel = Button;
+type Panel = Button;
 
-export type Item = {
+type Item = {
   id: string;
   ref: React.RefObject<HTMLElement>;
   button?: Button;

src/accordion/__tests__/AccordionState.test.ts

@@ -1,5 +1,6 @@
 import { renderHook } from "reakit-test-utils/hooks";
 import { jestSerializerStripFunctions } from "reakit-test-utils/jestSerializerStripFunctions";
+
 import { useAccordionState, AccordionInitialState } from "../AccordionState";
 
 expect.addSnapshotSerializer(jestSerializerStripFunctions);

src/button/AriaToggleButton.ts

@@ -3,11 +3,12 @@ import { useForkRef } from "reakit-utils";
 import { mergeProps } from "@react-aria/utils";
 import { ToggleState } from "@react-stately/toggle";
 import { useToggleButton } from "@react-aria/button";
-import { INTERACTION_KEYS } from "../interactions/__keys";
 import { createComponent, createHook } from "reakit-system";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 import { AriaToggleButtonProps as AriaToggleButtonOptionsTypes } from "@react-types/button";
 
+import { INTERACTION_KEYS } from "../interactions/__keys";
+
 export type AriaToggleButtonOptions = ButtonOptions &
   AriaToggleButtonOptionsTypes &
   ToggleState;

src/button/stories/AriaButton.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
+
 import { ReactAriaButton, ReactAriaButtonProps } from "./Buttons";
 
 export default {

src/button/stories/AriaToggleButton.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
+
 import { ReactAriaToggleButton, ReactAriaButtonProps } from "./Buttons";
 
 export default {

src/button/stories/Buttons.tsx

@@ -1,7 +1,8 @@
 import React, { JSXElementConstructor, useState } from "react";
-import { Button, AriaButton, AriaToggleButton } from "../index";
 import { useToggleState } from "@react-stately/toggle";
 
+import { Button, AriaButton, AriaToggleButton } from "../index";
+
 export interface ButtonProps {
   /**
    * Button contents

src/button/stories/ReakitButton.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
+
 import { ReakitButton, ButtonProps } from "./Buttons";
 
 export default {

src/drawer/Drawer.ts

@@ -1,5 +1,6 @@
 import { createHook, createComponent } from "reakit-system";
 import { useDialog, DialogOptions, DialogHTMLProps } from "reakit";
+
 import { DRAWER_KEYS } from "./__keys";
 
 const PLACEMENTS = {

src/drawer/DrawerCloseButton.ts

@@ -1,6 +1,7 @@
+import { callAllHandlers } from "@chakra-ui/utils";
 import { createHook, createComponent } from "reakit-system";
 import { useButton, DialogStateReturn, ButtonProps } from "reakit";
-import { callAllHandlers } from "@chakra-ui/utils";
+
 import { DRAWER_KEYS } from "./__keys";
 
 export const useDrawerCloseButton = createHook<

src/drawer/__keys.ts

@@ -15,6 +15,7 @@ const DRAWER_STATE_KEYS = [
   "unstable_disclosureRef",
   "setModal",
 ] as const;
+
 export const DRAWER_KEYS = [
   ...DRAWER_STATE_KEYS,
   "hideOnEsc",

src/drawer/stories/Drawer.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { css } from "emotion";
 import { Meta } from "@storybook/react";
+
 import {
   Drawer,
   TPlacement,

src/interactions/stories/Interactions.stories.tsx

@@ -2,11 +2,11 @@ import { Meta } from "@storybook/react";
 import React, { FocusEvent, KeyboardEvent } from "react";
 
 import { Press } from "../Press";
+import { Hover } from "../Hover";
 import { Focus } from "../Focus";
 import { Keyboard } from "../Keyboard";
 import { FocusWithin } from "../FocusWithin";
 import { FocusVisible } from "../FocusVisible";
-import { Hover } from "../Hover";
 
 export default {
   title: "Component/Interactions",

src/number-input/__utils.ts

@@ -1,9 +1,10 @@
 import { useInterval } from "@chakra-ui/hooks";
 import { ButtonHTMLProps, ButtonOptions } from "reakit";
-import { NumberInputStateReturn } from "./NumberInputState";
 import { ariaAttr, callAllHandlers } from "@chakra-ui/utils";
 import { useState, useRef, useEffect, useCallback, KeyboardEvent } from "react";
 
+import { NumberInputStateReturn } from "./NumberInputState";
+
 const FLOATING_POINT_REGEX = /^[Ee0-9\+\-\.]$/;
 
 /**

src/number-input/stories/NumberInput.stories.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 
-import { UseNumberInputProps, useNumberInputState } from "../NumberInputState";
 import { NumberInput } from "../NumberInput";
 import { NumberInputDecrementButton } from "../NumberInputDecrementButton";
 import { NumberInputIncrementButton } from "../NumberInputIncrementButton";
+import { UseNumberInputProps, useNumberInputState } from "../NumberInputState";
 
 const NumberInputComp = (props: UseNumberInputProps) => {
   const state = useNumberInputState(props);

src/pagination/Pagination.ts

@@ -1,8 +1,6 @@
 import { BoxHTMLProps, BoxOptions, useBox } from "reakit";
 import { createComponent, createHook } from "reakit-system";
 
-import { PAGINATION_KEYS } from "./__keys";
-
 export type PaginationOptions = BoxOptions;
 
 export type PaginationHTMLProps = BoxHTMLProps;
@@ -13,7 +11,6 @@ export const usePagination = createHook<PaginationOptions, PaginationHTMLProps>(
   {
     name: "Pagination",
     compose: useBox,
-    keys: PAGINATION_KEYS,
 
     useProps(_, htmlProps) {
       return { "aria-label": "pagination navigation", ...htmlProps };

src/pagination/PaginationButton.ts

@@ -3,7 +3,7 @@ import { createComponent, createHook } from "reakit-system";
 import { callAllHandlers, isNumber } from "@chakra-ui/utils";
 import { ButtonHTMLProps, ButtonOptions, useButton } from "reakit";
 
-import { PAGINATION_ITEM_KEYS } from "./__keys";
+import { PAGINATION_BUTTON_KEYS } from "./__keys";
 import { PaginationStateReturn } from "./PaginationState";
 
 export type TGoto = "next" | "prev" | "last" | "first" | number;
@@ -35,7 +35,7 @@ export const usePaginationButton = createHook<
 >({
   name: "PaginationButton",
   compose: useButton,
-  keys: PAGINATION_ITEM_KEYS,
+  keys: PAGINATION_BUTTON_KEYS,
 
   useOptions(options, { disabled: htmlDisabled }) {
     const { goto, isAtMax, isAtMin } = options;

src/pagination/PaginationState.ts

@@ -60,7 +60,7 @@ export const usePaginationState = (props: UsePaginationProps = {}) => {
   );
 
   // Page to render
-  // e.g. pages = [1, 'ellipsis', 4, 5, 6, 'ellipsis', 10]
+  // e.g. pages = [1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]
   const pages = [
     ...startPages,
 
@@ -108,6 +108,7 @@ export const usePaginationState = (props: UsePaginationProps = {}) => {
   );
 
   return {
+    pages,
     currentPage: page,
     isAtMax: page >= count,
     isAtMin: page <= 1,
@@ -116,7 +117,6 @@ export const usePaginationState = (props: UsePaginationProps = {}) => {
     move,
     first,
     last,
-    pages,
   };
 };
 

src/pagination/__keys.ts

@@ -10,8 +10,7 @@ const PAGINATION_STATE_KEYS = [
   "isAtMax",
 ] as const;
 
-export const PAGINATION_KEYS = PAGINATION_STATE_KEYS;
-export const PAGINATION_ITEM_KEYS = [
+export const PAGINATION_BUTTON_KEYS = [
   ...PAGINATION_STATE_KEYS,
   "goto",
   "getAriaLabel",

src/pagination/stories/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-
 import { Meta } from "@storybook/react";
+
 import { Pagination } from "../Pagination";
 import { PaginationButton, TGoto } from "../PaginationButton";
 import { UsePaginationProps, usePaginationState } from "../PaginationState";

src/progress/__tests__/Progress.test.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { axe } from "jest-axe";
 import { render } from "reakit-test-utils";
 
-import { Progress, ProgressProps, useProgressState } from "..";
+import { Progress, ProgressProps, useProgressState } from "../index";
 
 const ProgressComp = (props: Partial<ProgressProps>) => {
   const progress = useProgressState(props);

src/select/Select.ts

@@ -3,6 +3,7 @@ import React from "react";
 import { BoxHTMLProps, useBox } from "reakit/Box";
 import { SelectStateReturn } from "./SelectState";
 import { createHook, createComponent } from "reakit-system";
+
 import { SELECT_KEYS } from "./__keys";
 
 export type SelectOptions = Pick<SelectStateReturn, "selected"> & {

src/select/SelectInput.ts

@@ -1,16 +1,17 @@
 import React from "react";
-import { BoxHTMLProps } from "reakit/ts/Box/Box";
-import { SelectStateReturn } from "./SelectState";
+import { BoxHTMLProps } from "reakit/Box";
+import { useLiveRef } from "reakit-utils";
 import { createHook, createComponent } from "reakit-system";
-import { SELECT_KEYS } from "./__keys";
+import { getNextItemFromSearch } from "@chakra-ui/utils";
 import {
   useComposite,
   CompositeOptions,
   usePopoverDisclosure,
   PopoverDisclosureOptions,
 } from "reakit";
-import { useLiveRef } from "reakit-utils";
-import { getNextItemFromSearch } from "@chakra-ui/utils";
+
+import { SELECT_KEYS } from "./__keys";
+import { SelectStateReturn } from "./SelectState";
 
 export type SelectInputOptions = CompositeOptions &
   PopoverDisclosureOptions &

src/select/SelectMenu.ts

@@ -1,16 +1,17 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React from "react";
-import { usePopover, PopoverHTMLProps, PopoverProps } from "reakit";
-import { SelectStateReturn } from "./SelectState";
-import { SELECT_KEYS } from "./__keys";
+import { useForkRef } from "reakit-utils";
 import { createComponent, createHook } from "reakit-system";
+import { usePopover, PopoverHTMLProps, PopoverProps } from "reakit";
 import {
   useComposite,
   CompositeProps,
   CompositeHTMLProps,
 } from "reakit/Composite";
+
+import { SELECT_KEYS } from "./__keys";
 import { usePortalShortcut } from "./__utils";
-import { useForkRef } from "reakit-utils";
+import { SelectStateReturn } from "./SelectState";
 
 export type SelectMenuOptions = CompositeProps &
   PopoverProps &

src/select/SelectOption.ts

@@ -1,13 +1,14 @@
 import React from "react";
+import { createHook, createComponent } from "reakit-system";
+import { useLiveRef, hasFocusWithin } from "reakit-utils";
 import {
   useCompositeItem,
   CompositeItemHTMLProps,
   CompositeItemOptions,
 } from "reakit/Composite";
+
 import { SELECT_KEYS } from "./__keys";
 import { SelectStateReturn } from "./SelectState";
-import { createHook, createComponent } from "reakit-system";
-import { useLiveRef, hasFocusWithin } from "reakit-utils";
 
 export type SelectItemOptions = CompositeItemOptions &
   Pick<SelectStateReturn, "setSelected" | "selected"> & {

src/select/SelectState.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { useSealedState, SealedInitialState } from "reakit-utils";
 import {
   useCompositeState,
   CompositeActions,
@@ -13,7 +14,6 @@ import {
   PopoverActions,
   PopoverInitialState,
 } from "reakit/Popover";
-import { useSealedState, SealedInitialState } from "reakit-utils";
 
 type Value = {
   value: string;

src/select/SelectTrigger.ts

@@ -1,15 +1,16 @@
 import React from "react";
-import { SelectStateReturn } from "./SelectState";
+import { useShortcut } from "@chakra-ui/hooks";
 import { createHook, createComponent } from "reakit-system";
-import { SELECT_KEYS } from "./__keys";
+import { createOnKeyDown, useLiveRef, useForkRef } from "reakit-utils";
+import { callAllHandlers, getNextItemFromSearch } from "@chakra-ui/utils";
 import {
   usePopoverDisclosure,
   PopoverDisclosureHTMLProps,
   PopoverDisclosureOptions,
 } from "reakit/Popover";
-import { useShortcut } from "@chakra-ui/hooks";
-import { createOnKeyDown, useLiveRef, useForkRef } from "reakit-utils";
-import { callAllHandlers, getNextItemFromSearch } from "@chakra-ui/utils";
+
+import { SelectStateReturn } from "./SelectState";
+import { SELECT_KEYS } from "./__keys";
 
 export type SelectTriggerOptions = PopoverDisclosureOptions &
   Pick<

src/select/__utils.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { closest } from "reakit-utils";
 import { useShortcut } from "@chakra-ui/hooks";
 import { getNextItemFromSearch } from "@chakra-ui/utils";
+
 import { SelectStateReturn } from "./SelectState";
 
 interface usePortalShortcutProps {

src/toast/ToastProvider.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
-
-import useToastState, { IToast } from "./ToastState";
-import { ToastController } from "./ToastController";
-import { ToastStateReturn } from "./ToastState";
 import { canUseDOM } from "reakit-utils";
 import { createContext } from "@chakra-ui/utils";
 
+import { ToastStateReturn } from "./ToastState";
+import { ToastController } from "./ToastController";
+import useToastState, { IToast } from "./ToastState";
+
 const DEFAULT_TIMEOUT = 5000;
 const PLACEMENTS = {
   "top-left": { top: 0, left: 0 },

src/toast/ToastState.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { v4 as uuidv4 } from "uuid";
+
 import { Placements } from "./ToastProvider";
 
 type JSXFunction = (props: any) => JSX.Element;

src/toast/stories/BasicToast.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 
-import { ToastProvider } from "../index";
-import Demo from "./Demo";
 import "./style.css";
+import Demo from "./Demo";
+import { ToastProvider } from "../index";
 
 export default {
   title: "Component/Toast/Base",