refactor: common path pull up

src/components/common/Checkbox/checkbox.test.tsx → src/components/Checkbox/checkbox.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Checkbox, Label } from '../../';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Checkbox', () => {
   it('Checkbox icon must be customizable and work when clicked.', () => {

src/components/common/Dialog/dialog.test.tsx → src/components/Dialog/dialog.test.tsx

@@ -17,7 +17,7 @@ import {
   InputGroup,
   Label,
 } from '../../';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Dialog', () => {
   it('Should appear DialogContent when click DialogToggle', () => {

src/components/common/Dropdown/Dropdown.tsx → src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { PortalProvider } from '@/components/portal/PortalProvider';
+import { PortalProvider } from '@/components/Portal/PortalProvider';
 import { AlignType } from '@/types/align';
 
 interface DropdownProps extends React.PropsWithChildren {

src/components/common/Dropdown/DropdownContent.tsx → src/components/Dropdown/DropdownContent.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 
-import { PortalContent } from '@/components/portal/PortalContent';
+import { PortalContent } from '@/components/Portal/PortalContent';
 
 interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
   width?: React.CSSProperties['width'];

src/components/common/Dropdown/DropdownItem.tsx → src/components/Dropdown/DropdownItem.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import * as React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 

src/components/common/Dropdown/DropdownToggle.tsx → src/components/Dropdown/DropdownToggle.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
+import { PortalContext } from '@/components/Portal/PortalContext';
 import Slot from '@/components/Slot';
-import { PortalContext } from '@/components/portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';

src/components/common/Dropdown/dropdown.test.tsx → src/components/Dropdown/dropdown.test.tsx

@@ -10,10 +10,10 @@ import {
   DropdownLabel,
   DropdownShortcut,
   DropdownToggle,
-} from '../../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+} from '../';
+import { fireEvent, render, screen } from '../../libs/test';
 
-describe('UI test', () => {
+describe('Dropdown', () => {
   it('Should appear DropdownContent when click DropdownToggle', () => {
     render(
       <Dropdown>

src/components/common/HoverCard/HoverCard.tsx → src/components/HoverCard/HoverCard.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PortalProvider } from '@/components/portal/PortalProvider';
+import { PortalProvider } from '@/components/Portal/PortalProvider';
 import { AlignType } from '@/types/align';
 
 import HoverCardContext from './HoverCardContext';

src/components/common/HoverCard/HoverCardContent.tsx → src/components/HoverCard/HoverCardContent.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PortalContent } from '@/components/portal/PortalContent';
+import { PortalContent } from '@/components/Portal/PortalContent';
 import { composeEventHandlers, excludeTouchEventHandler } from '@/libs/event';
 
 import useHoverWaiting from './useHoverWaiting';

src/components/common/HoverCard/HoverCardToggle.tsx → src/components/HoverCard/HoverCardToggle.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers, excludeTouchEventHandler } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';

src/components/common/HoverCard/useHoverWaiting.ts → src/components/HoverCard/useHoverWaiting.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 
 import HoverCardContext from './HoverCardContext';

src/components/common/Input/input.test.tsx → src/components/Input/input.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { expect, it } from 'vitest';
 
 import { Input, InputGroup, Label } from '../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Input', () => {
   it('Fill out the Input', async () => {

src/components/Portal/PortalContent.tsx

@@ -0,0 +1,79 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+import { usePortal } from '@/components/Portal/usePortal';
+import useContext from '@/hooks/useContext';
+import { composeRefs } from '@/libs/ref';
+import { PositionType } from '@/types/position';
+
+import { PortalContext } from './PortalContext';
+
+interface ModalContentProps extends React.ComponentProps<'div'> {
+  ref: React.ForwardedRef<HTMLDivElement>;
+  width?: React.CSSProperties['width'];
+  disabledBG?: boolean;
+}
+
+export const PortalContent = ({ children, ref, width, disabledBG = false, ...props }: ModalContentProps) => {
+  const { showModal, setShowModal, toggleElement } = useContext(PortalContext)!;
+  const modalRef = React.useRef<HTMLDivElement>(null);
+  const { reorgPos } = usePortal({ modalRef });
+
+  const close = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      {showModal &&
+        createPortal(
+          <>
+            {!disabledBG && <ModalBG onClick={close} id="bmates-portal-bg" className="bmates-portal-bg" />}
+            <Modal
+              ref={composeRefs(modalRef, ref)}
+              width={width || toggleElement?.getBoundingClientRect().width}
+              position={reorgPos}
+              {...props}
+            >
+              {children}
+            </Modal>
+          </>,
+          document.body,
+        )}
+    </>
+  );
+};
+
+const enter = keyframes`
+    0% { opacity: 0; }
+    100% { opacity: 1; } 
+  `;
+
+const ModalBG = styled.div`
+  position: fixed;
+  background-color: transparent;
+  pointer-events: auto;
+  z-index: 50;
+  inset: 0;
+`;
+
+const Modal = styled.div<{ width?: React.CSSProperties['width']; position: PositionType }>`
+  display: grid;
+  min-width: max-content;
+  ${({ width }) => width && `width: ${typeof width === 'string' ? width : `${width}px`};`}
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  transform: ${({ position }) => `translate(${position.x}px, ${position.y}px)`};
+  background-color: white;
+  pointer-events: auto;
+  z-index: 50;
+  animation-name: ${enter};
+  animation-duration: 0.15s;
+  border: 1px solid ${({ theme }) => theme.colors.gray['300']};
+  box-shadow: 0px 2px 2px 0px ${({ theme }) => theme.colors.gray['300']};
+`;

src/components/Portal/PortalContext.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { AlignType } from '@/types/align';
+
+export interface PortalContextType {
+  /*
+   * Modal
+   */
+  showModal: boolean;
+  setShowModal: (value: boolean) => void;
+
+  /*
+   * Toggle Rect
+   * - to calcurate element size
+   */
+  toggleElement: HTMLElement | undefined;
+  setToggleElment: (value: HTMLElement) => void;
+
+  /*
+   * Align
+   */
+  align: AlignType;
+
+  /*
+   * Space Size
+   */
+  space?: number;
+}
+export const PortalContext = React.createContext<PortalContextType | null>(null);

src/components/Portal/PortalProvider.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import useModal from '@/hooks/useModal';
+
+import { PortalContext } from './PortalContext';
+import { PortalType } from './type';
+
+export interface PortalProviderProps extends React.PropsWithChildren, PortalType {
+  enableScroll?: boolean;
+}
+
+export const PortalProvider = ({ align, space, enableScroll, children }: PortalProviderProps) => {
+  const [showModal, setShowModal] = useModal(enableScroll);
+  const [toggleElement, setToggleElment] = React.useState<HTMLElement>();
+
+  return (
+    <PortalContext.Provider
+      value={{
+        showModal,
+        setShowModal,
+        toggleElement,
+        setToggleElment,
+        align,
+        space,
+      }}
+    >
+      {children}
+    </PortalContext.Provider>
+  );
+};

src/components/Portal/index.tsx

@@ -0,0 +1,3 @@
+export * from './PortalContent';
+export * from './PortalProvider';
+export * from './usePortal';

src/components/Portal/type.ts

@@ -0,0 +1,6 @@
+import { AlignType } from '@/types/align';
+
+export interface PortalType {
+  align: AlignType;
+  space: number;
+}

src/components/Portal/usePortal.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { PortalContext } from '@/components/Portal/PortalContext';
+import { PositionType } from '@/types/position';
+
+export const usePortal = ({ modalRef }: { modalRef: React.RefObject<HTMLDivElement> }) => {
+  const {
+    showModal,
+    align,
+    space = 0,
+    toggleElement,
+    setShowModal,
+    setToggleElment,
+  } = React.useContext(PortalContext)!;
+  const [reorgPos, setReorgPos] = React.useState<PositionType>({ x: 0, y: 0 });
+
+  React.useEffect(() => {
+    const adjustmentPos = () => {
+      if (modalRef.current && toggleElement && showModal) {
+        const rect = modalRef.current;
+        const toggleRect = toggleElement.getBoundingClientRect();
+
+        const isOverflowing = rect.offsetHeight + toggleRect.bottom + space >= window.innerHeight;
+        const reorgPos = { x: 0, y: 0 };
+
+        switch (align) {
+          case 'center':
+            reorgPos.x = toggleRect.x + toggleRect.width / 2 - rect.clientWidth / 2;
+            break;
+          case 'start':
+            reorgPos.x = toggleRect.x;
+            break;
+          case 'end':
+            reorgPos.x = toggleRect.x + toggleRect.width - rect.clientWidth;
+            break;
+        }
+
+        if (isOverflowing) {
+          reorgPos.y = toggleRect.y - rect.offsetHeight - space;
+        } else {
+          reorgPos.y = toggleRect.y + toggleRect.height + space;
+        }
+
+        if (reorgPos.x <= 0) reorgPos.x = space;
+        else if (reorgPos.x + rect.offsetWidth >= window.innerWidth)
+          reorgPos.x = window.innerWidth - rect.offsetWidth - space;
+
+        setReorgPos(reorgPos);
+      }
+    };
+    adjustmentPos();
+
+    window.addEventListener('resize', adjustmentPos);
+    return () => {
+      window.removeEventListener('resize', adjustmentPos);
+    };
+  }, [align, showModal, toggleElement, modalRef, space]);
+
+  return { showModal, align, toggleElement, setShowModal, setToggleElment, reorgPos };
+};

src/components/Provider/StyledProvider.tsx

@@ -0,0 +1,14 @@
+import GlobalStyle from '@/styles/GlobalStyle.tsx';
+import theme from '@/styles/theme.ts';
+import { ThemeProvider } from '@emotion/react';
+import { PropsWithChildren } from 'react';
+
+const StyledProvider = ({ children }: PropsWithChildren) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      {children}
+    </ThemeProvider>
+  );
+};
+export default StyledProvider;

src/components/common/Select/Select.tsx → src/components/Select/Select.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { PortalProvider } from '@/components/portal/PortalProvider';
+import { PortalProvider } from '@/components/Portal/PortalProvider';
 import { AlignType } from '@/types/align';
 
 import SelectContext from './SelectContext';

src/components/common/Select/SelectContent.tsx → src/components/Select/SelectContent.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 
-import { PortalContent } from '@/components/portal/PortalContent';
+import { PortalContent } from '@/components/Portal/PortalContent';
 
 interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
   width?: React.CSSProperties['width'];

src/components/common/Select/SelectItem.tsx → src/components/Select/SelectItem.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import * as React from 'react';
 
-import { PortalContext } from '@/components/portal/PortalContext';
+import { PortalContext } from '@/components/Portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 

src/components/common/Select/SelectToggle.tsx → src/components/Select/SelectToggle.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 
+import { PortalContext } from '@/components/Portal/PortalContext';
 import Slot from '@/components/Slot';
-import { PortalContext } from '@/components/portal/PortalContext';
 import useContext from '@/hooks/useContext';
 import { composeEventHandlers } from '@/libs/event';
 import { composeRefs } from '@/libs/ref';

src/components/common/Select/select.test.tsx → src/components/Select/select.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '../';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 const items = [
   {

src/components/common/Switch/switch.test.tsx → src/components/Switch/switch.test.tsx

@@ -2,8 +2,8 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import { expect, it } from 'vitest';
 
-import { Switch } from '../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { Switch } from '..';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Switch', () => {
   it('Should be change checked value when click the Switch', async () => {

src/components/common/Textarea/textarea.test.tsx → src/components/Textarea/textarea.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { expect, it } from 'vitest';
 
 import { InputDesc, InputGroup, Label, Textarea } from '../..';
-import { fireEvent, render, screen } from '../../../libs/test';
+import { fireEvent, render, screen } from '../../libs/test';
 
 describe('Textarea', () => {
   it('Fill out the Textarea', async () => {