fix: migrate the hooks file path in esm (#603)

* fix: move use-input to root-layer

* chore: move all hooks to root-layer

* test: fix test utils path for hooks

components/modal/__tests__/index.test.tsx

@@ -2,7 +2,10 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { Modal } from 'components'
 import { nativeEvent, updateWrapper } from 'tests/utils'
-import { expectModalIsClosed, expectModalIsOpened } from './use-modal.test'
+import {
+  expectModalIsClosed,
+  expectModalIsOpened,
+} from '../../use-modal/__tests__/use-modal.test'
 import userEvent from '@testing-library/user-event'
 
 describe('Modal', () => {

components/modal/__tests__/use-modal.test.tsx

@@ -1,37 +0,0 @@
-import React, { useEffect } from 'react'
-import { mount, ReactWrapper } from 'enzyme'
-import { Modal, useModal } from 'components'
-import { updateWrapper } from 'tests/utils'
-
-export const expectModalIsOpened = (wrapper: ReactWrapper) => {
-  expect(wrapper.find('.content').length).not.toBe(0)
-}
-
-export const expectModalIsClosed = (wrapper: ReactWrapper) => {
-  expect(wrapper.find('.content').length).toBe(0)
-}
-
-describe('UseModal', () => {
-  it('should follow change with use-modal', async () => {
-    const MockModal: React.FC<{ show?: boolean }> = ({ show }) => {
-      const { setVisible, bindings } = useModal()
-      useEffect(() => {
-        if (show !== undefined) setVisible(show)
-      }, [show])
-      return (
-        <Modal {...bindings}>
-          <Modal.Title>Modal</Modal.Title>
-        </Modal>
-      )
-    }
-
-    const wrapper = mount(<MockModal />)
-    wrapper.setProps({ show: true })
-    await updateWrapper(wrapper, 300)
-    expectModalIsOpened(wrapper)
-
-    wrapper.setProps({ show: false })
-    await updateWrapper(wrapper, 500)
-    expectModalIsClosed(wrapper)
-  })
-})

components/modal/index.ts

@@ -20,5 +20,4 @@ export type { ModalTitleProps } from './modal-title'
 export type { ModalSubtitleProps } from './modal-subtitle'
 export type { ModalActionProps } from './modal-action'
 export type { ModalContentProps } from './modal-content'
-export type { ModalHooksBindings } from './use-modal'
 export default Modal as ModalComponentType

components/modal/use-modal.ts

@@ -1,28 +0,0 @@
-import { Dispatch, MutableRefObject, SetStateAction } from 'react'
-import useCurrentState from '../utils/use-current-state'
-import { ModalProps } from '../modal'
-
-export type ModalHooksBindings = Pick<ModalProps, 'visible' | 'onClose'>
-
-const useModal = (
-  initialVisible: boolean = false,
-): {
-  visible: boolean
-  setVisible: Dispatch<SetStateAction<boolean>>
-  currentRef: MutableRefObject<boolean>
-  bindings: ModalHooksBindings
-} => {
-  const [visible, setVisible, currentRef] = useCurrentState<boolean>(initialVisible)
-
-  return {
-    visible,
-    setVisible,
-    currentRef,
-    bindings: {
-      visible,
-      onClose: () => setVisible(false),
-    },
-  }
-}
-
-export default useModal