refactor: rename hooks

Signed-off-by: Théo Mesnil <[email protected]>
WTTJ · Jun 28, 2023 · 9337f40 · 9337f40
1 parent 4b4a274
commit 9337f40
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 43 deletions.
diff --git a/docs/pages/components/accordion.mdx b/docs/pages/components/accordion.mdx
@@ -23,8 +23,8 @@ Built with [Ariakit](https://ariakit.org/components/disclosure) for a better acc
 
 ```jsx
 function () {
-  const store = useAccordionStore()
-  const store2 = useAccordionStore()
+  const store = useAccordion()
+  const store2 = useAccordion()
 
   return (
     <>
@@ -53,11 +53,11 @@ function () {
 
 ## Open at start
 
-Add `defaultOpen` options on `useAccordionStore` to open at start the accordion
+Add `defaultOpen` options on `useAccordion` to open at start the accordion
 
 ```jsx
 function () {
-  const store = useAccordionStore({ defaultOpen: true })
+  const store = useAccordion({ defaultOpen: true })
 
   return (
     <Accordion store={store} title="Accordion title">
@@ -77,7 +77,7 @@ Note that the custom icon's size property will be set to small
 
 ```jsx
 function () {
-  const store = useAccordionStore()
+  const store = useAccordion()
 
   return (
     <Accordion store={store} title="Accordion title" icon={<PlayIcon />}>

diff --git a/docs/pages/components/popover.mdx b/docs/pages/components/popover.mdx
@@ -22,11 +22,11 @@ Popover from [Ariakit](https://ariakit.org/components/popover) with a really nic
 
 ## Usage
 
-Use `usePopoverStore`, `Popover`, `Popover.Content` and `Popover.Trigger` to create a simple Popover.
+Use `usePopover`, `Popover`, `Popover.Content` and `Popover.Trigger` to create a simple Popover.
 
 ```jsx
 function() {
-  const store = usePopoverStore()
+  const store = usePopover()
 
   return (
     <>
@@ -50,7 +50,7 @@ Use `Popover.Title` props to create a predefined title block.
 
 ```jsx
 function() {
-  const store = usePopoverStore({ placement: 'top' })
+  const store = usePopover({ placement: 'top' })
 
   return (
     <>
@@ -75,7 +75,7 @@ function() {
 
 ```jsx
 function() {
-  const store = usePopoverStore({ withCloseButton: true })
+  const store = usePopover({ withCloseButton: true })
 
   return (
     <>
@@ -97,11 +97,11 @@ function() {
 
 ## Hover to open
 
-Use `triggerMethod: 'hover'` on `usePopoverStore` to open and close the popover by hovering it.
+Use `triggerMethod: 'hover'` on `usePopover` to open and close the popover by hovering it.
 
 ```jsx
 function() {
-  const store = usePopoverStore({ triggerMethod: 'hover' })
+  const store = usePopover({ triggerMethod: 'hover' })
 
   return (
     <>
@@ -121,13 +121,13 @@ function() {
 }
 ```
 
-## usePopoverStore
+## usePopover
 
-We use `usePopoverStore` from [Ariakit Popover](https://ariakit.org/components/popover) for the state of the popover.
+We use `usePopover` from [Ariakit Popover](https://ariakit.org/components/popover) for the state of the popover.
 
-Pass options to `usePopoverStore` :
+Pass options to `usePopover` :
 
-- `defaultOpen`: e.g. `const store = usePopoverStore({ defaultOpen: true })`
+- `defaultOpen`: e.g. `const store = usePopover({ defaultOpen: true })`
 - `triggerMethod` : `click` or `hover`
 - `withCloseButton` : `bool`, show/hide cross to close popover
 

diff --git a/packages/Accordion/src/index.tsx b/packages/Accordion/src/index.tsx
@@ -10,7 +10,7 @@ export interface AccordionOptions {
   title: string | JSX.Element
   icon?: JSX.Element
   /**
-   * store from useAccordionStore()
+   * store from useAccordion()
    */
   store: Ariakit.DisclosureStore
 }
@@ -41,8 +41,8 @@ export const Accordion = forwardRef<'div', AccordionProps>(
   }
 )
 
-export function useAccordionStore(options?: Ariakit.DisclosureStoreProps): Ariakit.DisclosureStore {
-  const disclosureStore = Ariakit.useDisclosureStore({ ...options, animated: true })
+export function useAccordion(options?: Ariakit.DisclosureStoreProps): Ariakit.DisclosureStore {
+  const accordion = Ariakit.useDisclosureStore({ ...options, animated: true })
 
-  return disclosureStore
+  return accordion
 }
diff --git a/packages/Accordion/tests/index.test.tsx b/packages/Accordion/tests/index.test.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 
 import { render, renderHook } from '../../../utils/tests'
-import { Accordion, useAccordionStore } from '../src'
+import { Accordion, useAccordion } from '../src'
 
 const content = 'content'
 const title = 'title'
@@ -11,7 +11,7 @@ describe('<Accordion />', () => {
   it('should have correct attribute on click on element', () => {
     const {
       result: { current: store },
-    } = renderHook(() => useAccordionStore())
+    } = renderHook(() => useAccordion())
 
     render(
       <Accordion dataTestId="accordion" store={store} title={title}>
@@ -36,7 +36,7 @@ describe('<Accordion />', () => {
   it('should have correct attribute on open at start', () => {
     const {
       result: { current: store },
-    } = renderHook(() => useAccordionStore({ defaultOpen: true }))
+    } = renderHook(() => useAccordion({ defaultOpen: true }))
 
     render(
       <Accordion dataTestId="accordion" store={store} title={title}>

diff --git a/packages/EmojiPicker/src/index.tsx b/packages/EmojiPicker/src/index.tsx
@@ -1,11 +1,6 @@
 import React, { Children, cloneElement, useCallback, useMemo } from 'react'
 import { useTabState } from '@welcome-ui/tabs'
-import {
-  Popover,
-  usePopoverStore,
-  UsePopoverStoreOptions,
-  UsePopoverStoreReturn,
-} from '@welcome-ui/popover'
+import { Popover, usePopover, UsePopoverOptions, UsePopoverReturn } from '@welcome-ui/popover'
 import { Tab } from '@welcome-ui/tabs'
 import { TabInitialState } from 'reakit'
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
@@ -24,7 +19,7 @@ export interface EmojiPickerOptions {
   popoverAriaLabel?: string
   tabListAriaLabel?: string
   value: string | null
-  store: UsePopoverStoreReturn
+  store: UsePopoverReturn
 }
 
 export type EmojiPickerProps = CreateWuiProps<'div', EmojiPickerOptions>
@@ -137,8 +132,8 @@ const EmojiPickerComponent = forwardRef<'div', EmojiPickerProps>(
 
 EmojiPickerComponent.displayName = 'EmojiPicker'
 
-export function useEmojiPicker(options?: UsePopoverStoreOptions): UsePopoverStoreReturn {
-  return usePopoverStore({
+export function useEmojiPicker(options?: UsePopoverOptions): UsePopoverReturn {
+  return usePopover({
     placement: 'bottom-start',
     ...options,
   })

diff --git a/packages/Popover/package.json b/packages/Popover/package.json
@@ -59,6 +59,6 @@
   },
   "gitHead": "974e7bfd71f8cfe846cbffd678c3860a8952f9e9",
   "sideEffects": false,
-  "component": "Popover, usePopoverStore",
+  "component": "Popover, usePopover",
   "homepage": "https://welcome-ui.com/components/popover"
 }
diff --git a/packages/Popover/src/Trigger.tsx b/packages/Popover/src/Trigger.tsx
@@ -1,10 +1,10 @@
 import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 import React, { useLayoutEffect } from 'react'
 
-import { UsePopoverStoreReturn } from './usePopoverStore'
+import { UsePopoverReturn } from './usePopover'
 import * as S from './styles'
 
-export type TriggerProps = CreateWuiProps<'button', { store: UsePopoverStoreReturn }>
+export type TriggerProps = CreateWuiProps<'button', { store: UsePopoverReturn }>
 
 export const Trigger = forwardRef<'button', TriggerProps>(({ as, store, ...rest }, ref) => {
   const { triggerMethod } = store

diff --git a/packages/Popover/src/index.tsx b/packages/Popover/src/index.tsx
@@ -6,12 +6,12 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 
 import * as S from './styles'
 import { Trigger } from './Trigger'
-import { UsePopoverStoreReturn } from './usePopoverStore'
+import { UsePopoverReturn } from './usePopover'
 
 export interface PopoverOptions {
   /** call a function when popover closed */
   onClose?: () => void
-  store: UsePopoverStoreReturn
+  store: UsePopoverReturn
 }
 
 export type PopoverProps = CreateWuiProps<'div', PopoverOptions>
@@ -73,4 +73,4 @@ export const Popover = Object.assign(PopoverComponent, {
   Trigger: Trigger,
 })
 
-export * from './usePopoverStore'
+export * from './usePopover'
diff --git a/packages/Popover/src/usePopoverStore.ts → packages/Popover/src/usePopover.ts b/packages/Popover/src/usePopoverStore.ts → packages/Popover/src/usePopover.ts
@@ -1,15 +1,15 @@
 import { useCallback, useRef } from 'react'
 import * as Ariakit from '@ariakit/react'
 
-export interface UsePopoverStoreOptions extends Ariakit.PopoverStoreProps {
+export interface UsePopoverOptions extends Ariakit.PopoverStoreProps {
   hideTimeout?: number
   showTimeout?: number
   triggerMethod?: 'hover' | 'click'
   withCloseButton?: boolean
 }
 
-export type UsePopoverStoreReturn = Ariakit.PopoverStore &
-  Pick<UsePopoverStoreOptions, 'triggerMethod' | 'withCloseButton'> & {
+export type UsePopoverReturn = Ariakit.PopoverStore &
+  Pick<UsePopoverOptions, 'triggerMethod' | 'withCloseButton'> & {
     /**
      * Custom hide function who call ariakit hide after a timeout if is hoverable, or not
      **/
@@ -20,7 +20,7 @@ export type UsePopoverStoreReturn = Ariakit.PopoverStore &
     show: () => void
   }
 
-export const usePopoverStore: (props?: UsePopoverStoreOptions) => UsePopoverStoreReturn = ({
+export const usePopover: (props?: UsePopoverOptions) => UsePopoverReturn = ({
   animated = 150,
   hideTimeout = 300,
   showTimeout = 500,

diff --git a/packages/Popover/tests/index.test.tsx b/packages/Popover/tests/index.test.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 
 import { render } from '../../../utils/tests'
-import { Popover, usePopoverStore } from '../src'
+import { Popover, usePopover } from '../src'
 
 const contentText = 'Popover open'
 const buttonText = 'open'
 
 const PopoverWrapper = () => {
-  const store = usePopoverStore()
+  const store = usePopover()
 
   return (
     <>