polpo 0.1.0 → 0.1.2

package/src/components/modals/modal/modal.stories.tsx

@@ -0,0 +1,325 @@
+import { Button } from '../../buttons';
+
+import { Modal as ModalComponent, ModalProps } from './modal';
+
+import { PositionContainer } from '@polpo/helpers';
+import { useModal } from '@polpo/hooks';
+import { Grid, Line, ModalBackdrop, Typography } from '@polpo/ui';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const Modal = ({ children, ...props }: ModalProps) => (
+  <ModalComponent backdrop='none' {...props} style={{ borderRadius: '1em' }}>
+    <Grid style={{ width: '400px', maxWidth: '100%', padding: '1em' }}>
+      <Typography variant='header4' color='primary'>
+        {children}
+      </Typography>
+      <Line />
+      <Typography>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, commodi dolore, doloremque doloribus esse
+        excepturi impedit in, ipsam ipsum iste magni nihil officiis quasi quia quod similique tenetur? Aliquid cum dolor
+        incidunt nihil?
+      </Typography>
+    </Grid>
+  </ModalComponent>
+);
+
+const meta: Meta<typeof ModalComponent> = {
+  title: 'Modals/Modal',
+  component: ModalComponent,
+  argTypes: {
+    animation: { control: { type: 'inline-radio', options: ['none', 'fade-down', 'bounce'] } },
+    windowOffset: { control: { type: 'range', min: 0, max: 100 } },
+    offset: { control: { type: 'range', min: 0, max: 100 } },
+    position: { control: 'inline-radio', options: Object.values(PositionContainer) },
+    closeOnClickOutside: { control: 'boolean' },
+    opacity: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
+    backdrop: { control: { type: 'inline-radio', options: Object.values(ModalBackdrop) } },
+    transitionDuration: { control: false },
+    backdropOnClick: { control: false },
+    zIndex: { control: false },
+    id: { control: false },
+    children: { control: false },
+    isOpen: { control: false },
+    onClose: { control: false },
+    className: { control: false },
+    style: { control: false },
+    rootStyle: { control: false },
+    closeAnimationClassName: { control: false },
+    containerRef: { control: false },
+    modalRef: { control: false },
+  },
+  args: {
+    offset: 20,
+    windowOffset: 10,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ModalComponent>;
+
+export const AllContainerPositions: Story = {
+  argTypes: {
+    position: { control: false },
+  },
+  render: args => {
+    const modal1 = useModal<HTMLButtonElement>();
+    const modal2 = useModal<HTMLButtonElement>();
+    const modal3 = useModal<HTMLButtonElement>();
+    const modal4 = useModal<HTMLButtonElement>();
+    const modal5 = useModal<HTMLButtonElement>();
+    const modal6 = useModal<HTMLButtonElement>();
+    const modal7 = useModal<HTMLButtonElement>();
+    const modal8 = useModal<HTMLButtonElement>();
+    const modal9 = useModal<HTMLButtonElement>();
+    const modal10 = useModal<HTMLButtonElement>();
+    const modal11 = useModal<HTMLButtonElement>();
+    const modal12 = useModal<HTMLButtonElement>();
+
+    return (
+      <Grid gtc='repeat(3, 1fr)' gap='20px'>
+        <Button width='full' ref={modal1.containerRef} onClick={modal1.openModal}>
+          top left
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal1.containerRef}
+          id='container-modal'
+          isOpen={modal1.isOpen}
+          onClose={modal1.closeModal}
+          position='top left'
+        >
+          top left
+        </Modal>
+        <Button width='full' ref={modal2.containerRef} onClick={modal2.openModal}>
+          top center
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal2.containerRef}
+          id='container-modal'
+          isOpen={modal2.isOpen}
+          onClose={modal2.closeModal}
+          position='top center'
+        >
+          top center
+        </Modal>
+        <Button width='full' ref={modal3.containerRef} onClick={modal3.openModal}>
+          top right
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal3.containerRef}
+          id='container-modal'
+          isOpen={modal3.isOpen}
+          onClose={modal3.closeModal}
+          position='top right'
+        >
+          top right
+        </Modal>
+
+        <Button width='full' ref={modal4.containerRef} onClick={modal4.openModal}>
+          left top
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal4.containerRef}
+          id='container-modal'
+          isOpen={modal4.isOpen}
+          onClose={modal4.closeModal}
+          position='left top'
+        >
+          left top
+        </Modal>
+        <span />
+        <Button width='full' ref={modal5.containerRef} onClick={modal5.openModal}>
+          right top
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal5.containerRef}
+          id='container-modal'
+          isOpen={modal5.isOpen}
+          onClose={modal5.closeModal}
+          position='right top'
+        >
+          right top
+        </Modal>
+
+        <Button width='full' ref={modal6.containerRef} onClick={modal6.openModal}>
+          left center
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal6.containerRef}
+          id='container-modal'
+          isOpen={modal6.isOpen}
+          onClose={modal6.closeModal}
+          position='left center'
+        >
+          left center
+        </Modal>
+        <span />
+        <Button width='full' ref={modal7.containerRef} onClick={modal7.openModal}>
+          right center
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal7.containerRef}
+          id='container-modal'
+          isOpen={modal7.isOpen}
+          onClose={modal7.closeModal}
+          position='right center'
+        >
+          right center
+        </Modal>
+
+        <Button width='full' ref={modal8.containerRef} onClick={modal8.openModal}>
+          left bottom
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal8.containerRef}
+          id='container-modal'
+          isOpen={modal8.isOpen}
+          onClose={modal8.closeModal}
+          position='left bottom'
+        >
+          left bottom
+        </Modal>
+        <span />
+        <Button width='full' ref={modal9.containerRef} onClick={modal9.openModal}>
+          right bottom
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal9.containerRef}
+          id='container-modal'
+          isOpen={modal9.isOpen}
+          onClose={modal9.closeModal}
+          position='right bottom'
+        >
+          right bottom
+        </Modal>
+
+        <Button width='full' ref={modal10.containerRef} onClick={modal10.openModal}>
+          bottom left
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal10.containerRef}
+          id='container-modal'
+          isOpen={modal10.isOpen}
+          onClose={modal10.closeModal}
+          position='bottom left'
+        >
+          bottom left
+        </Modal>
+        <Button width='full' ref={modal11.containerRef} onClick={modal11.openModal}>
+          bottom center
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal11.containerRef}
+          id='container-modal'
+          isOpen={modal11.isOpen}
+          onClose={modal11.closeModal}
+          position='bottom center'
+        >
+          bottom center
+        </Modal>
+        <Button width='full' ref={modal12.containerRef} onClick={modal12.openModal}>
+          bottom right
+        </Button>
+        <Modal
+          {...args}
+          containerRef={modal12.containerRef}
+          id='container-modal'
+          isOpen={modal12.isOpen}
+          onClose={modal12.closeModal}
+          position='bottom right'
+        >
+          bottom right
+        </Modal>
+      </Grid>
+    );
+  },
+};
+
+export const AllScreenPositions: Story = {
+  argTypes: {
+    position: { control: false },
+  },
+  render: args => {
+    const modal1 = useModal();
+    const modal2 = useModal();
+    const modal3 = useModal();
+    const modal4 = useModal();
+    const modal5 = useModal();
+    const modal6 = useModal();
+    const modal7 = useModal();
+    const modal8 = useModal();
+    const modal9 = useModal();
+
+    return (
+      <Grid gtc='repeat(3, 1fr)' gap='20px'>
+        <Button width='full' onClick={modal1.openModal}>
+          top left
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal1.isOpen} onClose={modal1.closeModal} position='top left'>
+          top left
+        </Modal>
+        <Button width='full' onClick={modal2.openModal}>
+          top center
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal2.isOpen} onClose={modal2.closeModal} position='top center'>
+          top center
+        </Modal>
+        <Button width='full' onClick={modal3.openModal}>
+          top right
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal3.isOpen} onClose={modal3.closeModal} position='top right'>
+          top right
+        </Modal>
+
+        <Button width='full' onClick={modal4.openModal}>
+          left center
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal4.isOpen} onClose={modal4.closeModal} position='left center'>
+          left center
+        </Modal>
+        <Button width='full' onClick={modal5.openModal}>
+          center
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal5.isOpen} onClose={modal5.closeModal} position='center'>
+          center
+        </Modal>
+        <Button width='full' onClick={modal6.openModal}>
+          right center
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal6.isOpen} onClose={modal6.closeModal} position='right center'>
+          right center
+        </Modal>
+
+        <Button width='full' onClick={modal7.openModal}>
+          bottom left
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal7.isOpen} onClose={modal7.closeModal} position='bottom left'>
+          bottom left
+        </Modal>
+        <Button width='full' onClick={modal8.openModal}>
+          bottom center
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal8.isOpen} onClose={modal8.closeModal} position='bottom center'>
+          bottom center
+        </Modal>
+        <Button width='full' onClick={modal9.openModal}>
+          bottom right
+        </Button>
+        <Modal {...args} id='screen-modal' isOpen={modal9.isOpen} onClose={modal9.closeModal} position='bottom right'>
+          bottom right
+        </Modal>
+      </Grid>
+    );
+  },
+};

package/src/components/modals/modal/modal.style.ts

@@ -1,10 +1,70 @@
 import styled from 'styled-components';
 
-export const ModalOverlayStyle = styled.section`
-  animation: fadeIn 300ms ease;
+export const ModalStyle = styled.section`
+  position: fixed;
+  z-index: 1001;
+  pointer-events: none;
+`;
+
+export const ModalContentStyle = styled.section`
+  background: ${props => props.theme.colors.background.paper};
+  pointer-events: initial;
+
+  &.animation-fade-down {
+    animation: fadeInDown 200ms ease;
+
+    &.modal-close {
+      animation: fadeOutUp 200ms ease;
+      transform: translateY(-10px);
+      opacity: 0;
+    }
+  }
+
+  &.animation-bounce {
+    animation: bounceIn 500ms ease;
+
+    &.modal-close {
+      animation: bounceOut 500ms ease;
+      transform: scale3d(0.3, 0.3, 0.3);
+      opacity: 0;
+    }
+  }
+`;
+
+export const BackdropStyle = styled.section`
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+  z-index: 1000;
+  animation: backdropOpen 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
+
+  &.backdrop-close {
+    animation: backdropClose 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  @keyframes backdropOpen {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes backdropClose {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+  }
 `;

package/src/components/modals/modal/modal.tsx

@@ -1,132 +1,91 @@
-import React, { ForwardedRef, forwardRef, useEffect, useMemo } from 'react';
-import ReactDOM from 'react-dom';
-import { useTheme } from 'styled-components';
-
-import { ModalOverlayStyle } from './modal.style';
-
-import { useConstant } from '@polpo/hooks';
-
-export enum ModalBackdrop {
-  OPAQUE = 'opaque',
-  TRANSPARENT = 'transparent',
-  BLUR = 'blur',
-  NONE = 'none',
-}
-
-export type ModalCommonProps = {
-  isOpen: boolean;
-  children: React.ReactNode;
-  id: string;
-};
-
-export type ModalNoOverlayProps = ModalCommonProps & {
-  opacity?: never;
-  backdrop?: never;
-  onClick?: never;
-  zIndex?: never;
-  className?: never;
-  style?: never;
-};
-
-export type ModalOverlayProps = ModalCommonProps & {
-  opacity?: number;
-  backdrop?: `${ModalBackdrop}`;
-  onClick?: () => void;
-  zIndex?: React.CSSProperties['zIndex'];
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-export type ModalProps = ModalOverlayProps | ModalNoOverlayProps;
-
-export const ModalComponent = (
-  {
-    isOpen,
-    children,
-    id,
-    opacity = 0.6,
-    backdrop = ModalBackdrop.BLUR,
-    onClick,
-    zIndex,
-    className = '',
-    style = {},
-  }: ModalProps,
-  ref: ForwardedRef<HTMLElement>,
-) => {
-  const containerID = useConstant(`modal-${id}`);
-  const theme = useTheme();
-
-  useEffect(() => {
-    let modalContainer = document.getElementById(containerID);
-
-    if (!modalContainer) {
-      modalContainer = document.createElement('div');
-      modalContainer.setAttribute('id', containerID);
-
-      if (typeof ref === 'function') {
-        ref(modalContainer);
-      } else if (ref) {
-        ref.current = modalContainer;
-      }
-
-      document.body.appendChild(modalContainer);
+import React, { CSSProperties, useLayoutEffect, useRef } from 'react';
+
+import { Backdrop, BackdropProps } from './backdrop';
+import { ModalContentStyle, ModalStyle } from './modal.style';
+
+import { ModalState, useClassNames, useModalInContainer, UseModalInContainerParams } from '@polpo/hooks';
+import { Portal } from '@polpo/ui';
+
+export type ModalProps = Omit<BackdropProps, 'modalState'> &
+  Omit<UseModalInContainerParams, 'modalRef' | 'onClose'> & {
+    id: string;
+    children: React.ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    rootStyle?: CSSProperties;
+    animation?: 'none' | 'fade-down' | 'bounce';
+    closeAnimationClassName?: string;
+    modalRef?: React.RefObject<HTMLElement>;
+  };
+
+export const Modal = ({
+  id,
+  children,
+  isOpen,
+  onClose,
+  className = '',
+  style = {},
+  rootStyle = {},
+  animation = 'fade-down',
+  closeAnimationClassName = 'modal-close',
+  modalRef: modalRefProp,
+  closeOnClickOutside,
+  transitionDuration = 300,
+  windowOffset = 10,
+  offset = 20,
+  position,
+  containerRef,
+  zIndex = 1000,
+  ...backdropProps
+}: ModalProps) => {
+  const modalRef = useRef<HTMLElement>(null);
+  const { openModal, closeModal, modalState, isVisible } = useModalInContainer({
+    modalRef: modalRefProp ?? modalRef,
+    containerRef,
+    closeOnClickOutside,
+    offset,
+    windowOffset,
+    position,
+    transitionDuration,
+    onClose,
+  });
+
+  const modalContentClassName = useClassNames({
+    [className]: true,
+    [`animation-${animation}`]: Boolean(animation) && animation !== 'none',
+    [closeAnimationClassName]: modalState === ModalState.CLOSING || modalState === ModalState.CLOSED,
+  });
+
+  useLayoutEffect(() => {
+    if (modalState === ModalState.CLOSED && isOpen) {
+      openModal();
+    } else if (modalState === ModalState.OPEN && !isOpen) {
+      closeModal();
     }
+  }, [isOpen, openModal, closeModal, modalState]);
 
-    /*
-     * return () => {
-     *   if (modalContainer.parentNode === document.body) {
-     *     document.body.removeChild(modalContainer);
-     *   }
-     * };
-     */
-  }, [containerID, ref]);
-
-  const backgroundStyles = useMemo(() => {
-    switch (backdrop) {
-      case ModalBackdrop.OPAQUE:
-        return {
-          background: `${theme.colors.background.paper}${(opacity * 255)?.toString(16)}`,
-        };
-      case ModalBackdrop.TRANSPARENT:
-        return {
-          background: 'transparent',
-        };
-      case ModalBackdrop.BLUR:
-        return {
-          background: `${theme.colors.background.paper}${(opacity * 255)?.toString(16)}`,
-          backdropFilter: 'blur(5px)',
-        };
-      case ModalBackdrop.NONE:
-        return {
-          display: 'none',
-        };
-      default:
-        return {};
-    }
-  }, [backdrop, theme.colors.background.paper, opacity]);
-
-  const root = document.getElementById(containerID);
-
-  if (!isOpen || !root) {
+  if (!isVisible) {
     return null;
   }
 
-  return ReactDOM.createPortal(
-    <>
-      <ModalOverlayStyle
-        tabIndex={-1}
-        onClick={onClick}
-        className={className}
+  return (
+    <Portal id={`modal-${id}`}>
+      <Backdrop {...backdropProps} modalState={modalState} zIndex={zIndex} />
+      <ModalStyle
+        ref={modalRefProp ?? modalRef}
         style={{
-          zIndex,
-          ...backgroundStyles,
-          ...style,
+          maxWidth: `calc(100dvw - ${windowOffset * 2}px)`,
+          maxHeight: `calc(100dvh - ${windowOffset * 2}px)`,
+          ...rootStyle,
+          zIndex: +zIndex + 1,
         }}
-      />
-      {children}
-    </>,
-    root,
+      >
+        <ModalContentStyle style={style} className={modalContentClassName}>
+          {children}
+        </ModalContentStyle>
+      </ModalStyle>
+    </Portal>
   );
 };
-
-export const Modal = forwardRef(ModalComponent);

package/src/components/modals/portal/index.ts

@@ -0,0 +1 @@
+export * from './portal';

package/src/components/modals/portal/portal.tsx

@@ -0,0 +1,18 @@
+import { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useDomContainer } from '@polpo/hooks';
+
+type PortalProps = {
+  id: string;
+  children: ReactNode;
+};
+
+const PortalComponent = ({ children, id }: PortalProps, ref: ForwardedRef<HTMLElement>) => {
+  const uuid = useMemo(() => crypto.randomUUID(), []);
+  const root = useDomContainer(`${id}-${uuid}`, ref);
+
+  return createPortal(children, root);
+};
+
+export const Portal = forwardRef(PortalComponent);

package/src/components/tabs/tabs-list.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useTheme } from 'styled-components';
 
-import { ThemeColor } from '../../contexts';
-import { RadiusVariants, SizeVariants, useRadiusClassName, useSizeClassName } from '../../core/variants';
+import { RadiusVariants, SizeVariants } from '../../core/variants';
 
 import { Tabs } from './tabs';
-import { TabListStyle, TabListStyleProps } from './tabs.style';
+import { TabListStyle, TabListColorStyle } from './tabs.style';
 
 import { useClassNames } from '@polpo/hooks';
+import { ThemeColor } from '@polpo/ui';
 
 const DefaultRect = {
   top: 0,
@@ -34,7 +34,7 @@ export enum TabListDirection {
   VERTICAL = 'vertical',
 }
 
-const getColor = (color?: ThemeColor): TabListStyleProps | null => {
+const getColor = (color?: ThemeColor): TabListColorStyle | null => {
   if (color) {
     return {
       $color: color.main,
@@ -78,11 +78,7 @@ export const TabsList = ({
   const selectedTabRef = useRef<HTMLSpanElement>(null);
   const [isSelectorActive, setIsSelectorActive] = useState(false);
   const [selector, setSelector] = useState(DefaultRect);
-  const tabRadius = useRadiusClassName(radius);
-  const tabSize = useSizeClassName(size);
   const containerClassNames = useClassNames({
-    [tabRadius]: true,
-    [tabSize]: true,
     'solid-variant': variant === TabListVariant.SOLID,
     'ghost-variant': variant === TabListVariant.GHOST,
     'flat-variant': variant === TabListVariant.FLAT,
@@ -112,13 +108,20 @@ export const TabsList = ({
     }
   }, [isSelectorActive, variant, openTab]);
 
-  const containerColors: TabListStyleProps = (color && getColor(theme.colors[color])) || {
+  const containerColors: TabListColorStyle = (color && getColor(theme.colors[color])) || {
     $color: theme.colors.text.main,
     $colorContrast: theme.colors.background.main,
   };
 
   return (
-    <TabListStyle {...containerColors} className={containerClassNames} ref={containerRef} style={style}>
+    <TabListStyle
+      {...containerColors}
+      className={containerClassNames}
+      ref={containerRef}
+      style={style}
+      $size={size}
+      $radius={radius}
+    >
       {Boolean(variant) && <span className={`tabs-selector ${isSelectorActive ? 'active' : ''}`} style={selector} />}
       {tabs.map(({ id, label }) => (
         <Tabs.Tab key={id} id={id} ref={id === openTab ? selectedTabRef : null}>