polpo 0.1.0 → 0.1.2

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

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
-export const AsideModalStyle = styled.section`
-  position: absolute;
-  background: ${props => props.theme.colors.background.main};
+import { Modal } from '@polpo/ui';
+
+export const AsideModalStyle = styled(Modal)`
   color: ${props => props.theme.colors.text.main};
+  overflow: auto;
+  height: 100%;
 
   .aside-modal-content {
-    overflow: auto;
-    height: 100%;
     padding: 2em;
   }
 
@@ -23,17 +23,12 @@ export const AsideModalStyle = styled.section`
   }
 
   &.left {
-    height: 100%;
-    top: 0;
-    left: 0;
     border-right: 4px solid ${props => props.theme.colors.primary.main};
+    animation: slideIn-left 300ms ease;
 
-    &.open-animation {
-      animation: slideIn-left 300ms ease;
-    }
-
-    &.close-animation {
+    &.modal-close {
       animation: slideOut-left 300ms ease;
+      transform: translateX(-100%);
     }
 
     .close-modal-button {
@@ -44,17 +39,12 @@ export const AsideModalStyle = styled.section`
   }
 
   &.right {
-    height: 100%;
-    top: 0;
-    right: 0;
     border-left: 4px solid ${props => props.theme.colors.primary.main};
+    animation: slideIn-right 300ms ease;
 
-    &.open-animation {
-      animation: slideIn-right 300ms ease;
-    }
-
-    &.close-animation {
+    &.modal-close {
       animation: slideOut-right 300ms ease;
+      transform: translateX(100%);
     }
 
     .close-modal-button {
@@ -65,17 +55,12 @@ export const AsideModalStyle = styled.section`
   }
 
   &.top {
-    top: 0;
-    right: 0;
-    width: 100%;
     border-bottom: 4px solid ${props => props.theme.colors.primary.main};
+    animation: slideIn-top 300ms ease;
 
-    &.open-animation {
-      animation: slideIn-top 300ms ease;
-    }
-
-    &.close-animation {
+    &.modal-close {
       animation: slideOut-top 300ms ease;
+      transform: translateY(-100%);
     }
 
     .close-modal-button {
@@ -86,17 +71,12 @@ export const AsideModalStyle = styled.section`
   }
 
   &.bottom {
-    bottom: 0;
-    right: 0;
-    width: 100%;
     border-top: 4px solid ${props => props.theme.colors.primary.main};
+    animation: slideIn-bottom 300ms ease;
 
-    &.open-animation {
-      animation: slideIn-bottom 300ms ease;
-    }
-
-    &.close-animation {
+    &.modal-close {
       animation: slideOut-bottom 300ms ease;
+      transform: translateY(100%);
     }
 
     .close-modal-button {

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

@@ -1,66 +1,64 @@
-import { useCallback, useRef } from 'react';
+import { CSSProperties, useMemo } from 'react';
 
 import { Icon } from '../../icon';
-import { Modal } from '../modal';
+import { ModalProps } from '../modal';
 
 import { AsideModalStyle } from './aside-modal.style';
 
-export enum AsidePosition {
-  LEFT = 'left',
-  RIGHT = 'right',
-  TOP = 'top',
-  BOTTOM = 'bottom',
-}
+import { PositionContainer } from '@polpo/helpers';
 
-type AsideModalProps = {
-  children: React.ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
-  position?: `${AsidePosition}`;
+type AsideModalProps = Omit<
+  ModalProps,
+  'id' | 'animation' | 'closeAnimationClassName' | 'position' | 'rootStyle' | 'className' | 'style'
+> & {
+  position?:
+    | `${PositionContainer.TOP}`
+    | `${PositionContainer.LEFT}`
+    | `${PositionContainer.RIGHT}`
+    | `${PositionContainer.BOTTOM}`;
   size?: number | `${number}px` | `${number}em`;
   className?: string;
   style?: React.CSSProperties;
-  zIndex?: number;
 };
 
 export const AsideModal = ({
   children,
   isOpen,
   onClose,
-  position = AsidePosition.LEFT,
+  position = PositionContainer.LEFT,
   size,
   className = '',
-  zIndex = 100,
-  style = {},
+  ...modalProps
 }: AsideModalProps) => {
-  const ref = useRef<HTMLElement>(null);
+  const modalRootStyles = useMemo<CSSProperties>(() => {
+    const computedSize = {
+      [PositionContainer.TOP]: { height: size, width: '100%' },
+      [PositionContainer.LEFT]: { height: '100%', width: size },
+      [PositionContainer.RIGHT]: { height: '100%', width: size },
+      [PositionContainer.BOTTOM]: { height: size, width: '100%' },
+    };
 
-  const handleOnClose = useCallback((callback: () => void) => {
-    ref.current?.classList.remove('open-animation');
-    ref.current?.classList.add('close-animation');
-    setTimeout(() => {
-      callback();
-      ref.current?.classList.remove('close-animation');
-    }, 290);
-  }, []);
+    return computedSize[position];
+  }, [position, size]);
 
   return (
-    <Modal id='aside' isOpen={isOpen} opacity={0.6} onClick={() => handleOnClose(onClose)} zIndex={100}>
-      <AsideModalStyle
-        className={`open-animation ${position} ${className}`}
-        ref={ref}
-        style={{
-          ...style,
-          zIndex,
-          width: position === 'left' || position === 'right' ? size : undefined,
-          height: position === 'top' || position === 'bottom' ? size : undefined,
-        }}
-      >
-        <span className='close-modal-button' onClick={() => handleOnClose(onClose)}>
-          <Icon name='cross' />
-        </span>
-        <section className='aside-modal-content'>{children}</section>
-      </AsideModalStyle>
-    </Modal>
+    <AsideModalStyle
+      id='aside'
+      isOpen={isOpen}
+      onClose={onClose}
+      opacity={0.6}
+      windowOffset={0}
+      animation='none'
+      className={`${className} ${position}`}
+      rootStyle={modalRootStyles}
+      backdropOnClick={onClose}
+      position={position}
+      {...modalProps}
+    >
+      <span className='close-modal-button' onClick={onClose}>
+        <Icon name='cross' />
+      </span>
+      <section className='aside-modal-content'>{children}</section>
+    </AsideModalStyle>
   );
 };

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

@@ -1,10 +1,10 @@
-import { useState } from 'react';
-
 import { Button } from '../../buttons';
 import ActionModalStory from '../action-modal/action-modal.stories';
 
 import { ConfirmationModal } from './confirmation-modal';
 
+import { useModal } from '@polpo/hooks';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof ConfirmationModal> = {
@@ -26,20 +26,32 @@ const meta: Meta<typeof ConfirmationModal> = {
     children: 'Are you sure want to execute an action?',
   },
   decorators: [
-    Story => {
-      const [isOpen, setIsOpen] = useState(false);
+    (Story, { args }) => {
+      const { isOpen, openModal, closeModal } = useModal();
 
       return (
         <>
-          <Button onClick={() => setIsOpen(true)}>Open modal</Button>
-          <Story isOpen={isOpen} onClose={() => setIsOpen(false)} />
+          <Button onClick={openModal}>Open modal</Button>
+          <Story
+            args={{
+              ...args,
+              isOpen,
+              onClose: closeModal,
+              onAccept: () =>
+                new Promise(resolve => {
+                  setTimeout(resolve, 1000);
+                }),
+
+              onReject: () =>
+                new Promise(resolve => {
+                  setTimeout(resolve, 1000);
+                }),
+            }}
+          />
         </>
       );
     },
   ],
-  render: (args, { isOpen, onClose }) => {
-    return <ConfirmationModal {...args} isOpen={isOpen} onClose={onClose} />;
-  },
 };
 
 export default meta;

package/src/components/modals/index.ts

@@ -2,3 +2,5 @@ export * from './action-modal';
 export * from './aside-modal';
 export * from './confirmation-modal';
 export * from './modal';
+export * from './menu';
+export * from './portal';

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

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

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

@@ -0,0 +1,69 @@
+import { Button } from '../../buttons';
+
+import { Menu } from './menu';
+
+import { PositionContainer } from '@polpo/helpers';
+import { useModal } from '@polpo/hooks';
+import { ModalBackdrop } from '@polpo/ui';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Menu> = {
+  title: 'Modals/Menu',
+  component: Menu,
+  argTypes: {
+    closeOnClickOutside: { control: 'boolean' },
+    transitionDuration: { control: false },
+    windowOffset: { control: { type: 'range', min: 0, max: 100 } },
+    position: { control: 'inline-radio', options: Object.values(PositionContainer) },
+    offset: { control: { type: 'range', min: 0, max: 100 } },
+  },
+  args: {
+    offset: 5,
+    windowOffset: 10,
+    children: 'Menu content',
+    position: PositionContainer.BOTTOM_RIGHT,
+    backdrop: ModalBackdrop.TRANSPARENT,
+  },
+  decorators: [
+    (Story, { args }) => {
+      const { openModal, closeModal, isOpen, containerRef } = useModal<HTMLButtonElement>();
+
+      return (
+        <>
+          <Button width='full' leftIcon={isOpen ? 'door-open' : 'door-closed'} ref={containerRef} onClick={openModal}>
+            Menu
+          </Button>
+          <Story
+            args={{
+              ...args,
+              isOpen,
+              onClose: closeModal,
+              containerRef,
+              children: (
+                <>
+                  <Menu.Option asCheckbox icon='house' disabled label='Option 1' />
+                  <Menu.Option asCheckbox icon='magnifying-glass' selected label='Option 2' />
+                  <Menu.Option asCheckbox icon='document' label='Option 3' />
+                  <Menu.Option asCheckbox icon='spinner' disabled selected label='Option 4' />
+                  <Menu.Divider />
+                  <Menu.Option icon='instagram' label='Option 5' />
+                  <Menu.Option icon='airplane' disabled label='Option 6' />
+                  <Menu.Option icon='whatsapp' disabled selected label='Option 7' />
+                  <Menu.Option icon='order-list' label='Option 8' />
+                </>
+              ),
+            }}
+          />
+        </>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Menu>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+import { Modal } from '@polpo/ui';
+
+export const MenuModalStyle = styled(Modal)`
+  border-radius: 0.5em;
+  border: 1px solid ${props => props.theme.colors.border.main};
+  background: ${props => props.theme.colors.background.main};
+  box-shadow: 0 0 25px ${props => props.theme.colors.background.paper};
+  user-select: none;
+
+  .menu-content {
+    display: grid;
+    gap: 2px;
+    padding: 5px;
+    margin: 0;
+    list-style: none;
+    align-content: start;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .divider {
+    margin: 0.4em 0;
+    color: ${props => props.theme.colors.border.main};
+  }
+`;
+
+export const MenuOptionStyle = styled.li`
+  padding: 0.1em 0.5em;
+  border-radius: 0.3em;
+  border: 1px solid transparent;
+  transition: all 300ms ease;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  outline: 0;
+
+  .option-icon {
+    margin-right: 0.5em;
+  }
+
+  .menu-checkbox {
+    width: 100%;
+  }
+
+  &.is-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  &.is-selected,
+  &:hover {
+    background: ${props => props.theme.colors.background.paper};
+  }
+
+  &:focus,
+  &:hover {
+    border: 1px solid ${props => props.theme.colors.border.main};
+  }
+`;

package/src/components/modals/menu/menu.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { MenuModalStyle, MenuOptionStyle } from './menu.style';
+
+import { useClassNames } from '@polpo/hooks';
+import {
+  Checkbox,
+  Icon,
+  IconNameT,
+  InfinityScroll,
+  InfinityScrollProps,
+  Line,
+  ModalProps,
+  Typography,
+} from '@polpo/ui';
+
+export type MenuOptionProps = {
+  id?: string;
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  asCheckbox?: boolean;
+  icon?: IconNameT;
+  onClick?: (newValue: boolean) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+};
+
+const MenuOption = ({
+  children,
+  label = '',
+  asCheckbox,
+  icon,
+  id,
+  disabled = false,
+  selected = false,
+  className = '',
+  style = {},
+  onClick = () => null,
+  onKeyDown = () => null,
+}: MenuOptionProps) => {
+  const menuOptionClassName = useClassNames({
+    [className]: true,
+    'is-disabled': disabled,
+    'is-selected': selected,
+  });
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+
+      if (!disabled) {
+        onClick(!selected);
+      }
+    },
+    [disabled, onClick, selected],
+  );
+
+  const menuOptionContent = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (asCheckbox) {
+      return (
+        <Checkbox
+          className='menu-checkbox'
+          disabled={disabled}
+          value={selected}
+          setValue={n => onClick(n)}
+          name='option'
+          label={
+            <>
+              {icon !== undefined && <Icon className='option-icon' name={icon} />}
+              <Typography variant='label'>{label}</Typography>
+            </>
+          }
+        />
+      );
+    }
+
+    return (
+      <>
+        {icon !== undefined && <Icon className='option-icon' name={icon} />}
+        <Typography variant='label'>{label}</Typography>
+      </>
+    );
+  }, [asCheckbox, children, disabled, icon, label, onClick, selected]);
+
+  return (
+    <MenuOptionStyle
+      id={id}
+      role='option'
+      tabIndex={-1}
+      aria-selected={selected}
+      aria-disabled={disabled}
+      onClick={handleClick}
+      onKeyDown={onKeyDown}
+      className={menuOptionClassName}
+      style={style}
+    >
+      {menuOptionContent}
+    </MenuOptionStyle>
+  );
+};
+
+type MenuProps = ModalProps & {
+  children: React.ReactNode;
+};
+
+export const Menu = ({ children, isOpen, onClose, id, ...modalProps }: MenuProps) => {
+  return (
+    <MenuModalStyle {...modalProps} id={`menu-${id}`} isOpen={isOpen} onClose={onClose}>
+      {children}
+    </MenuModalStyle>
+  );
+};
+
+Menu.Option = MenuOption;
+
+const MenuDivider = () => {
+  return <Line className='divider' />;
+};
+
+Menu.Divider = MenuDivider;
+
+type MenuOptionsGroupProps<T> = InfinityScrollProps<T> & {
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const MenuOptionsGroup = <T,>({ className = '', style = {}, ...infinityScrollProps }: MenuOptionsGroupProps<T>) => {
+  return (
+    <ul className={`menu-content ${className}`} role='listbox' style={style}>
+      <InfinityScroll {...infinityScrollProps} />
+    </ul>
+  );
+};
+
+Menu.OptionsGroup = MenuOptionsGroup;

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

@@ -0,0 +1,70 @@
+import React, { useMemo } from 'react';
+import { useTheme } from 'styled-components';
+
+import { BackdropStyle } from './modal.style';
+
+import { ModalState, useClassNames } from '@polpo/hooks';
+
+export enum ModalBackdrop {
+  OPAQUE = 'opaque',
+  TRANSPARENT = 'transparent',
+  BLUR = 'blur',
+  NONE = 'none',
+}
+
+export type BackdropProps = {
+  opacity?: number;
+  backdrop?: `${ModalBackdrop}`;
+  zIndex?: React.CSSProperties['zIndex'];
+  backdropOnClick?: () => void;
+  modalState?: ModalState;
+};
+
+export const Backdrop = ({
+  opacity = 0.6,
+  backdrop = ModalBackdrop.BLUR,
+  zIndex,
+  backdropOnClick,
+  modalState,
+}: BackdropProps) => {
+  const theme = useTheme();
+  const backdropClassName = useClassNames({
+    'backdrop-close': modalState === ModalState.CLOSING || modalState === ModalState.CLOSED,
+  });
+
+  const backgroundStyles = useMemo(() => {
+    const backdropStyles = {
+      [ModalBackdrop.OPAQUE]: {
+        background: `${theme.colors.background.paper}${(opacity * 255)?.toString(16)}`,
+      },
+      [ModalBackdrop.TRANSPARENT]: {
+        background: 'transparent',
+      },
+      [ModalBackdrop.BLUR]: {
+        background: `${theme.colors.background.paper}${(opacity * 255)?.toString(16)}`,
+        backdropFilter: 'blur(5px)',
+      },
+      [ModalBackdrop.NONE]: {
+        display: 'none',
+      },
+    };
+
+    return backdropStyles[backdrop] ?? {};
+  }, [backdrop, theme.colors.background.paper, opacity]);
+
+  if (backdrop === ModalBackdrop.NONE) {
+    return null;
+  }
+
+  return (
+    <BackdropStyle
+      tabIndex={-1}
+      onClick={backdropOnClick}
+      className={backdropClassName}
+      style={{
+        zIndex,
+        ...backgroundStyles,
+      }}
+    />
+  );
+};

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

@@ -1 +1,2 @@
 export * from './modal';
+export * from './backdrop';