From 251bb1b936cf2d4ff36c8191c98fda7118da451e Mon Sep 17 00:00:00 2001 From: Navin Date: Fri, 11 Sep 2020 12:40:00 +0530 Subject: [PATCH] =?UTF-8?q?refactor(imports):=20=E2=99=BB=EF=B8=8F=20=20or?= =?UTF-8?q?ganize=20imports=20on=20all=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/accordion/AccordionPanel.ts | 2 +- src/accordion/AccordionState.ts | 6 +++--- src/accordion/__tests__/AccordionState.test.ts | 1 + src/button/AriaToggleButton.ts | 3 ++- src/button/stories/AriaButton.stories.tsx | 1 + src/button/stories/AriaToggleButton.stories.tsx | 1 + src/button/stories/Buttons.tsx | 3 ++- src/button/stories/ReakitButton.stories.tsx | 1 + src/drawer/Drawer.ts | 1 + src/drawer/DrawerCloseButton.ts | 3 ++- src/drawer/__keys.ts | 1 + src/drawer/stories/Drawer.stories.tsx | 1 + src/{index.js => index.ts} | 0 src/interactions/stories/Interactions.stories.tsx | 2 +- src/number-input/__utils.ts | 3 ++- src/number-input/stories/NumberInput.stories.tsx | 2 +- src/pagination/Pagination.ts | 3 --- src/pagination/PaginationButton.ts | 4 ++-- src/pagination/PaginationState.ts | 4 ++-- src/pagination/__keys.ts | 3 +-- src/pagination/stories/Pagination.stories.tsx | 2 +- src/progress/__tests__/Progress.test.tsx | 2 +- src/select/Select.ts | 1 + src/select/SelectInput.ts | 11 ++++++----- src/select/SelectMenu.ts | 9 +++++---- src/select/SelectOption.ts | 5 +++-- src/select/SelectState.ts | 2 +- src/select/SelectTrigger.ts | 11 ++++++----- src/select/__utils.ts | 1 + src/toast/ToastProvider.tsx | 8 ++++---- src/toast/ToastState.ts | 1 + src/toast/stories/BasicToast.stories.tsx | 4 ++-- 32 files changed, 58 insertions(+), 44 deletions(-) rename src/{index.js => index.ts} (100%) diff --git a/src/accordion/AccordionPanel.ts b/src/accordion/AccordionPanel.ts index e853f777a..896dd4246 100644 --- a/src/accordion/AccordionPanel.ts +++ b/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"; diff --git a/src/accordion/AccordionState.ts b/src/accordion/AccordionState.ts index 95b5dc406..1844e3771 100644 --- a/src/accordion/AccordionState.ts +++ b/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; }; -export type Panel = Button; +type Panel = Button; -export type Item = { +type Item = { id: string; ref: React.RefObject; button?: Button; diff --git a/src/accordion/__tests__/AccordionState.test.ts b/src/accordion/__tests__/AccordionState.test.ts index 337c93094..d3ca8283b 100644 --- a/src/accordion/__tests__/AccordionState.test.ts +++ b/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); diff --git a/src/button/AriaToggleButton.ts b/src/button/AriaToggleButton.ts index 212c3b463..48552a4ba 100644 --- a/src/button/AriaToggleButton.ts +++ b/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; diff --git a/src/button/stories/AriaButton.stories.tsx b/src/button/stories/AriaButton.stories.tsx index 8ff830cb8..b0cf168d3 100644 --- a/src/button/stories/AriaButton.stories.tsx +++ b/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 { diff --git a/src/button/stories/AriaToggleButton.stories.tsx b/src/button/stories/AriaToggleButton.stories.tsx index 4057883b5..4c7546e16 100644 --- a/src/button/stories/AriaToggleButton.stories.tsx +++ b/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 { diff --git a/src/button/stories/Buttons.tsx b/src/button/stories/Buttons.tsx index 5fc20e946..1c20a5318 100644 --- a/src/button/stories/Buttons.tsx +++ b/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 diff --git a/src/button/stories/ReakitButton.stories.tsx b/src/button/stories/ReakitButton.stories.tsx index 1fd28b849..923961387 100644 --- a/src/button/stories/ReakitButton.stories.tsx +++ b/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 { diff --git a/src/drawer/Drawer.ts b/src/drawer/Drawer.ts index d03d0b529..e4772bb97 100644 --- a/src/drawer/Drawer.ts +++ b/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 = { diff --git a/src/drawer/DrawerCloseButton.ts b/src/drawer/DrawerCloseButton.ts index 6ff655991..4972668c4 100644 --- a/src/drawer/DrawerCloseButton.ts +++ b/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< diff --git a/src/drawer/__keys.ts b/src/drawer/__keys.ts index 500e13088..0daef35f2 100644 --- a/src/drawer/__keys.ts +++ b/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", diff --git a/src/drawer/stories/Drawer.stories.tsx b/src/drawer/stories/Drawer.stories.tsx index 619db0d78..cf913783a 100644 --- a/src/drawer/stories/Drawer.stories.tsx +++ b/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, diff --git a/src/index.js b/src/index.ts similarity index 100% rename from src/index.js rename to src/index.ts diff --git a/src/interactions/stories/Interactions.stories.tsx b/src/interactions/stories/Interactions.stories.tsx index c47b4670f..618bd541f 100644 --- a/src/interactions/stories/Interactions.stories.tsx +++ b/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", diff --git a/src/number-input/__utils.ts b/src/number-input/__utils.ts index 7076efa18..9dd941dc9 100644 --- a/src/number-input/__utils.ts +++ b/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\+\-\.]$/; /** diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx index 2d329a059..8b763e0b8 100644 --- a/src/number-input/stories/NumberInput.stories.tsx +++ b/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); diff --git a/src/pagination/Pagination.ts b/src/pagination/Pagination.ts index d85b36df5..60e260de3 100644 --- a/src/pagination/Pagination.ts +++ b/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( { name: "Pagination", compose: useBox, - keys: PAGINATION_KEYS, useProps(_, htmlProps) { return { "aria-label": "pagination navigation", ...htmlProps }; diff --git a/src/pagination/PaginationButton.ts b/src/pagination/PaginationButton.ts index b0aea61f5..9f3232571 100644 --- a/src/pagination/PaginationButton.ts +++ b/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; diff --git a/src/pagination/PaginationState.ts b/src/pagination/PaginationState.ts index 6a177b612..aec6ce41f 100644 --- a/src/pagination/PaginationState.ts +++ b/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, }; }; diff --git a/src/pagination/__keys.ts b/src/pagination/__keys.ts index 67c77476f..274dd4a31 100644 --- a/src/pagination/__keys.ts +++ b/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", diff --git a/src/pagination/stories/Pagination.stories.tsx b/src/pagination/stories/Pagination.stories.tsx index 7e5eb001c..97a715042 100644 --- a/src/pagination/stories/Pagination.stories.tsx +++ b/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"; diff --git a/src/progress/__tests__/Progress.test.tsx b/src/progress/__tests__/Progress.test.tsx index 04d1c512e..f90e8b08f 100644 --- a/src/progress/__tests__/Progress.test.tsx +++ b/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) => { const progress = useProgressState(props); diff --git a/src/select/Select.ts b/src/select/Select.ts index d27cf6199..9db29d3a7 100644 --- a/src/select/Select.ts +++ b/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 & { diff --git a/src/select/SelectInput.ts b/src/select/SelectInput.ts index 1c18cafbc..0eb85b3f7 100644 --- a/src/select/SelectInput.ts +++ b/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 & diff --git a/src/select/SelectMenu.ts b/src/select/SelectMenu.ts index 4a65df41b..ca0babbef 100644 --- a/src/select/SelectMenu.ts +++ b/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 & diff --git a/src/select/SelectOption.ts b/src/select/SelectOption.ts index 4980b0ede..5d3b02104 100644 --- a/src/select/SelectOption.ts +++ b/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 & { diff --git a/src/select/SelectState.ts b/src/select/SelectState.ts index 26be4a701..7b3d7de37 100644 --- a/src/select/SelectState.ts +++ b/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; diff --git a/src/select/SelectTrigger.ts b/src/select/SelectTrigger.ts index 5e69ba218..1ab2358d3 100644 --- a/src/select/SelectTrigger.ts +++ b/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< diff --git a/src/select/__utils.ts b/src/select/__utils.ts index e706bc0af..1d6f6a13c 100644 --- a/src/select/__utils.ts +++ b/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 { diff --git a/src/toast/ToastProvider.tsx b/src/toast/ToastProvider.tsx index c1949208b..811f8fb29 100644 --- a/src/toast/ToastProvider.tsx +++ b/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 }, diff --git a/src/toast/ToastState.ts b/src/toast/ToastState.ts index 81148a93b..1bbc3db48 100644 --- a/src/toast/ToastState.ts +++ b/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; diff --git a/src/toast/stories/BasicToast.stories.tsx b/src/toast/stories/BasicToast.stories.tsx index 1c044e537..16b59efcf 100644 --- a/src/toast/stories/BasicToast.stories.tsx +++ b/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",