polpo 0.1.0

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

@@ -0,0 +1,129 @@
+import { styled } from 'styled-components';
+
+export const ActionModalContainerStyle = styled.section`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10000;
+
+  .open-animation {
+    animation: bounceIn 500ms ease;
+    position: relative;
+  }
+
+  .close-animation {
+    animation: bounceOut 500ms ease;
+  }
+
+  .shake-animation {
+    animation: headShake 600ms linear;
+  }
+`;
+
+export const ActionModalStyle = styled.section`
+  position: relative;
+
+  .action-modal-body {
+    border-radius: 10px;
+    overflow: hidden;
+    display: grid;
+  }
+
+  .action-modal-content {
+    background: ${props => props.theme.colors.background.main};
+    padding: 3em 4em 2em;
+    display: grid;
+    gap: 1em;
+  }
+
+  &.no-padding .action-modal-content {
+    padding: 2em 0 0;
+  }
+
+  &:has(.action-modal-icon) .action-modal-content {
+    padding-top: 4em;
+  }
+
+  &.back-card {
+    &::before {
+      content: '';
+      position: absolute;
+      width: 90%;
+      height: 100%;
+      top: 8px;
+      left: 50%;
+      transform: translate(-50%);
+      z-index: -1;
+      background: ${props => props.theme.colors.primary.main};
+      border-radius: 10px;
+      display: block;
+      transition: top 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
+    }
+  }
+
+  .action-modal-icon {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: ${props => props.theme.colors.primary.main};
+    color: ${props => props.theme.colors.primary.contrast};
+    padding: 0;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    display: grid;
+    place-content: center;
+    transition: box-shadow 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
+    z-index: 1;
+    box-shadow:
+      0 0 0 0 ${props => props.theme.colors.primary.main}88,
+      0 0 0 0 ${props => props.theme.colors.primary.main}66,
+      0 0 0 0 ${props => props.theme.colors.primary.main}44,
+      0 0 0 0 ${props => props.theme.colors.primary.main}22;
+  }
+
+  .close-modal-button {
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    border: 1px solid;
+    cursor: pointer;
+    display: grid;
+    place-content: center;
+    background: ${props => props.theme.colors.background.main};
+    position: absolute;
+    left: 100%;
+    bottom: 100%;
+    font-size: ${props => props.theme.constants.typography.small.fontSize};
+    opacity: 0;
+    transition: opacity 300ms ease;
+    z-index: 1;
+    transform: translate(-50%, 50%);
+  }
+
+  &.line-on-top {
+    .action-modal-content {
+      border-top: 5px solid ${props => props.theme.colors.primary.main};
+    }
+  }
+
+  &:hover {
+    .action-modal-icon {
+      box-shadow:
+        0 0 0 7px ${props => props.theme.colors.primary.main}88,
+        0 0 0 14px ${props => props.theme.colors.primary.main}66,
+        0 0 0 21px ${props => props.theme.colors.primary.main}44,
+        0 0 0 28px ${props => props.theme.colors.primary.main}22;
+    }
+
+    .close-modal-button {
+      opacity: 1;
+    }
+
+    &::before {
+      top: 15px;
+    }
+  }
+`;

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

@@ -0,0 +1,150 @@
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
+
+import { Button, ButtonProps } from '../../buttons';
+import { Icon, IconNameT } from '../../icon';
+import { Typography } from '../../typography';
+import { Modal } from '../modal';
+
+import { ActionModalContainerStyle, ActionModalStyle } from './action-modal.style';
+
+import { useClassNames } from '@polpo/hooks';
+
+export type ActionModalProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  actionRequired?: boolean;
+  icon?: IconNameT;
+  noCloseButton?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  lineOnTop?: boolean;
+  backCard?: boolean;
+  noPadding?: boolean;
+};
+
+type ActionModalContextEntity = {
+  onClose: () => void;
+};
+
+const ActionModalContext = createContext<ActionModalContextEntity | null>(null);
+
+const useActionModal = () => {
+  const context = useContext(ActionModalContext);
+
+  if (context === null) {
+    throw new Error('useActionModal must be used with in a ActionModal');
+  }
+
+  return context;
+};
+
+export const ActionModal = ({
+  children,
+  isOpen,
+  onClose,
+  actionRequired,
+  icon,
+  noCloseButton,
+  className = '',
+  style = {},
+  lineOnTop = false,
+  backCard = false,
+  noPadding = false,
+}: ActionModalProps) => {
+  const ref = useRef<HTMLElement>(null);
+
+  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');
+    }, 490);
+  }, []);
+
+  const remainAction = useCallback(() => {
+    ref.current?.classList.remove('open-animation');
+    ref.current?.classList.add('shake-animation');
+    setTimeout(() => {
+      ref.current?.classList.remove('shake-animation');
+    }, 500);
+  }, []);
+
+  const actionModalClassName = useClassNames({
+    'back-card': backCard,
+    'line-on-top': lineOnTop,
+    'no-padding': noPadding,
+  });
+
+  const contentClassName = useClassNames({
+    'action-modal-content': true,
+    [className]: Boolean(className),
+  });
+
+  return (
+    <Modal
+      id='action-modal'
+      opacity={0.8}
+      isOpen={isOpen}
+      zIndex={9999}
+      onClick={actionRequired ? remainAction : () => handleOnClose(onClose)}
+    >
+      <ActionModalContext.Provider value={{ onClose: () => handleOnClose(onClose) }}>
+        <ActionModalContainerStyle>
+          <section ref={ref} className='open-animation'>
+            <ActionModalStyle className={actionModalClassName}>
+              {!noCloseButton && !actionRequired && (
+                <section className='close-modal-button' onClick={() => handleOnClose(onClose)}>
+                  <Icon name='cross' />
+                </section>
+              )}
+              {icon ? (
+                <Typography variant='header4' className='action-modal-icon'>
+                  <Icon name={icon} />
+                </Typography>
+              ) : null}
+              <section className='action-modal-body'>
+                <section className={contentClassName} style={style}>
+                  {children}
+                </section>
+              </section>
+            </ActionModalStyle>
+          </section>
+        </ActionModalContainerStyle>
+      </ActionModalContext.Provider>
+    </Modal>
+  );
+};
+
+type ActionButtonProps = Omit<ButtonProps, 'onClick'> & {
+  onClick: (() => Promise<void>) | (() => void);
+};
+
+const ActionButton = ({ onClick, children, isLoading: manualIsLoading, ...buttonProps }: ActionButtonProps) => {
+  const { onClose } = useActionModal();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleAction = useCallback(() => {
+    setIsLoading(true);
+    const result = onClick();
+
+    if (result instanceof Promise) {
+      result.then(() => {
+        onClose();
+        setIsLoading(false);
+      });
+    } else {
+      onClose();
+      setIsLoading(false);
+    }
+  }, [onClick, onClose]);
+
+  return (
+    <Button {...buttonProps} onClick={handleAction} isLoading={manualIsLoading || isLoading}>
+      {children}
+    </Button>
+  );
+};
+
+ActionModal.ActionButton = ActionButton;

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

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

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

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+
+import { Button } from '../../buttons';
+import { Image } from '../../image';
+import { Typography } from '../../typography';
+
+import { AsideModal, AsidePosition } from './aside-modal';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof AsideModal> = {
+  title: 'Modals/AsideModal',
+  component: AsideModal,
+  argTypes: {
+    isOpen: { control: false },
+    onClose: { control: false },
+    position: { control: 'inline-radio', options: Object.values(AsidePosition) },
+    children: { control: 'text' },
+    size: { control: { type: 'range', min: 100, max: 500, step: 10 } },
+    className: { control: false },
+    style: { control: false },
+    zIndex: { control: false },
+  },
+  decorators: [
+    Story => {
+      const [isOpen, setIsOpen] = useState(false);
+
+      return (
+        <>
+          <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+          <Story isOpen={isOpen} onClose={() => setIsOpen(false)} />
+        </>
+      );
+    },
+  ],
+  render: (args, { isOpen, onClose }) => {
+    return <AsideModal {...args} isOpen={isOpen} onClose={onClose} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AsideModal>;
+
+export const Aside: Story = {
+  argTypes: {
+    children: { control: false },
+  },
+  args: {
+    size: 500,
+  },
+  render: (args, { isOpen, onClose }) => {
+    return (
+      <AsideModal {...args} isOpen={isOpen} onClose={onClose}>
+        <Typography variant='header4'>Aside modal</Typography>
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet at cupiditate dolorum eaque eligendi
+          error est fugit harum illo incidunt ipsum itaque labore nulla quaerat quam recusandae repellat sequi
+          similique, sit unde vel veniam? Aliquam dicta ipsum voluptates voluptatum.
+        </Typography>
+        <Image src='https://picsum.photos/500/300' />
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque illum quas recusandae? Adipisci alias
+          corporis, cumque doloribus ducimus ea enim, et hic id non nulla quae quis sed temporibus vero.
+        </Typography>
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor doloribus error excepturi minima quae, quia
+          quod voluptatem? Consectetur, enim exercitationem hic illo iusto obcaecati odio?
+        </Typography>
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus necessitatibus officiis optio
+          quaerat qui, reiciendis tempora totam ut veniam. At blanditiis cupiditate dolor dolorum ipsum laboriosam natus
+          quisquam quo soluta ut? Accusamus aspernatur at beatae neque nisi possimus rerum!
+        </Typography>
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores aspernatur at debitis delectus
+          error excepturi fuga, harum in laboriosam laudantium minus, neque omnis, optio praesentium quidem recusandae
+          reiciendis reprehenderit rerum sunt voluptatem.
+        </Typography>
+      </AsideModal>
+    );
+  },
+};

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

@@ -0,0 +1,108 @@
+import styled from 'styled-components';
+
+export const AsideModalStyle = styled.section`
+  position: absolute;
+  background: ${props => props.theme.colors.background.main};
+  color: ${props => props.theme.colors.text.main};
+
+  .aside-modal-content {
+    overflow: auto;
+    height: 100%;
+    padding: 2em;
+  }
+
+  .close-modal-button {
+    border-radius: 50%;
+    cursor: pointer;
+    display: grid;
+    place-content: center;
+    background: ${props => props.theme.colors.background.main};
+    border: 4px solid ${props => props.theme.colors.primary.main};
+    position: absolute;
+    padding: 0.5em;
+  }
+
+  &.left {
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-right: 4px solid ${props => props.theme.colors.primary.main};
+
+    &.open-animation {
+      animation: slideIn-left 300ms ease;
+    }
+
+    &.close-animation {
+      animation: slideOut-left 300ms ease;
+    }
+
+    .close-modal-button {
+      top: 2em;
+      left: 100%;
+      transform: translate(calc(-50% + 2px));
+    }
+  }
+
+  &.right {
+    height: 100%;
+    top: 0;
+    right: 0;
+    border-left: 4px solid ${props => props.theme.colors.primary.main};
+
+    &.open-animation {
+      animation: slideIn-right 300ms ease;
+    }
+
+    &.close-animation {
+      animation: slideOut-right 300ms ease;
+    }
+
+    .close-modal-button {
+      top: 2em;
+      right: 100%;
+      transform: translate(calc(50% - 2px));
+    }
+  }
+
+  &.top {
+    top: 0;
+    right: 0;
+    width: 100%;
+    border-bottom: 4px solid ${props => props.theme.colors.primary.main};
+
+    &.open-animation {
+      animation: slideIn-top 300ms ease;
+    }
+
+    &.close-animation {
+      animation: slideOut-top 300ms ease;
+    }
+
+    .close-modal-button {
+      bottom: 0;
+      right: 2em;
+      transform: translate(0, calc(50% - 2px));
+    }
+  }
+
+  &.bottom {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    border-top: 4px solid ${props => props.theme.colors.primary.main};
+
+    &.open-animation {
+      animation: slideIn-bottom 300ms ease;
+    }
+
+    &.close-animation {
+      animation: slideOut-bottom 300ms ease;
+    }
+
+    .close-modal-button {
+      top: 0;
+      right: 2em;
+      transform: translate(0, calc(-50% + 2px));
+    }
+  }
+`;

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

@@ -0,0 +1,66 @@
+import { useCallback, useRef } from 'react';
+
+import { Icon } from '../../icon';
+import { Modal } from '../modal';
+
+import { AsideModalStyle } from './aside-modal.style';
+
+export enum AsidePosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}
+
+type AsideModalProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  position?: `${AsidePosition}`;
+  size?: number | `${number}px` | `${number}em`;
+  className?: string;
+  style?: React.CSSProperties;
+  zIndex?: number;
+};
+
+export const AsideModal = ({
+  children,
+  isOpen,
+  onClose,
+  position = AsidePosition.LEFT,
+  size,
+  className = '',
+  zIndex = 100,
+  style = {},
+}: AsideModalProps) => {
+  const ref = useRef<HTMLElement>(null);
+
+  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 (
+    <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>
+  );
+};

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

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

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

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+import { Button } from '../../buttons';
+import ActionModalStory from '../action-modal/action-modal.stories';
+
+import { ConfirmationModal } from './confirmation-modal';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ConfirmationModal> = {
+  title: 'Modals/ConfirmationModal',
+  component: ConfirmationModal,
+  argTypes: {
+    ...ActionModalStory.argTypes,
+    title: { control: 'text' },
+    onAccept: { control: false },
+    onReject: { control: false },
+    acceptText: { control: 'text' },
+    rejectText: { control: 'text' },
+    isLoading: { control: 'boolean' },
+  },
+  args: {
+    title: 'Are you sure?',
+    acceptText: 'Accept',
+    rejectText: 'Reject',
+    children: 'Are you sure want to execute an action?',
+  },
+  decorators: [
+    Story => {
+      const [isOpen, setIsOpen] = useState(false);
+
+      return (
+        <>
+          <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+          <Story isOpen={isOpen} onClose={() => setIsOpen(false)} />
+        </>
+      );
+    },
+  ],
+  render: (args, { isOpen, onClose }) => {
+    return <ConfirmationModal {...args} isOpen={isOpen} onClose={onClose} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationModal>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,17 @@
+import { styled } from 'styled-components';
+
+export const ConfirmationModalStyle = styled.section`
+  display: grid;
+  max-width: 450px;
+  gap: 1em;
+  place-content: center;
+  justify-items: center;
+  text-align: center;
+
+  .confirmation-modal-actions {
+    display: grid;
+    grid-auto-flow: column;
+    justify-content: center;
+    gap: 1em;
+  }
+`;

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

@@ -0,0 +1,43 @@
+import { Typography } from '../../typography';
+import { ActionModal, ActionModalProps } from '../action-modal';
+
+import { ConfirmationModalStyle } from './confirmation-modal.style';
+
+type ConfirmationModalProps = ActionModalProps & {
+  title: string;
+  onAccept: (() => Promise<void>) | (() => void);
+  onReject?: (() => Promise<void>) | (() => void);
+  acceptText: string;
+  rejectText: string;
+  isLoading?: boolean;
+};
+
+export const ConfirmationModal = ({
+  title,
+  onAccept,
+  onReject = () => null,
+  acceptText,
+  rejectText,
+  children,
+  isLoading,
+  ...actionModalProps
+}: ConfirmationModalProps) => {
+  return (
+    <ActionModal {...actionModalProps} backCard>
+      <ConfirmationModalStyle>
+        <Typography variant='header4'>{title}</Typography>
+        <section>{children}</section>
+        <section className='confirmation-modal-actions'>
+          {!isLoading && (
+            <ActionModal.ActionButton variant='ghost' onClick={onReject}>
+              {rejectText}
+            </ActionModal.ActionButton>
+          )}
+          <ActionModal.ActionButton isLoading={isLoading} onClick={onAccept}>
+            {acceptText}
+          </ActionModal.ActionButton>
+        </section>
+      </ConfirmationModalStyle>
+    </ActionModal>
+  );
+};

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

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

package/src/components/modals/index.ts

@@ -0,0 +1,4 @@
+export * from './action-modal';
+export * from './aside-modal';
+export * from './confirmation-modal';
+export * from './modal';

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

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

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const ModalOverlayStyle = styled.section`
+  animation: fadeIn 300ms ease;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+`;