polpo 0.1.7 → 0.1.8

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

@@ -1,117 +0,0 @@
-import { styled } from 'styled-components';
-
-import { Modal } from '../modal';
-
-export const ModalStyle = styled(Modal)`
-  background: transparent;
-
-  .modal-content {
-    &.shake-animation {
-      animation: headShake 600ms linear;
-    }
-  }
-`;
-
-export const ActionModalStyle = styled.section`
-  position: relative;
-
-  .action-modal-body {
-    box-shadow: 0 0 10px -5px;
-    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: 1em;
-    height: 1em;
-    border-radius: 50%;
-    cursor: pointer;
-    background: ${props => props.theme.colors.background.main};
-    position: absolute;
-    top: 10px;
-    right: 5px;
-    font-size: ${props => props.theme.constants.typography.header3.fontSize};
-    opacity: 0;
-    transition: opacity 300ms ease;
-    z-index: 1;
-  }
-
-  &.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

@@ -1,148 +0,0 @@
-import { createContext, useCallback, useContext, useRef, useState } from 'react';
-
-import { Button, ButtonProps } from '../../buttons';
-import { Icon, IconNameT } from '../../icon';
-import { Typography } from '../../typography';
-import { ModalProps } from '../modal';
-
-import { ModalStyle, ActionModalStyle } from './action-modal.style';
-
-import { PositionContainer } from '@polpo/helpers';
-import { useClassNames } from '@polpo/hooks';
-
-type ActionModalContextType = {
-  onClose: () => void;
-  isActionInProgress: boolean;
-  setIsActionInProgress: (isActionInProgress: boolean) => void;
-};
-
-const ActionModalContext = createContext<ActionModalContextType | null>(null);
-
-const useActionModalContext = () => {
-  const context = useContext(ActionModalContext);
-
-  if (!context) {
-    throw new Error('useActionModalContext must be used within a ActionModal');
-  }
-
-  return context;
-};
-
-export type ActionModalProps = Omit<
-  ModalProps,
-  'id' | 'animation' | 'closeAnimationClassName' | 'position' | 'rootStyle' | 'className' | 'style'
-> & {
-  actionRequired?: boolean;
-  icon?: IconNameT;
-  noCloseButton?: boolean;
-  lineOnTop?: boolean;
-  backCard?: boolean;
-  noPadding?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-export const ActionModal = ({
-  children,
-  isOpen,
-  onClose,
-  actionRequired,
-  icon,
-  noCloseButton,
-  lineOnTop = false,
-  backCard = false,
-  noPadding = false,
-  className = '',
-  style = {},
-  ...modalProps
-}: ActionModalProps) => {
-  const [isActionInProgress, setIsActionInProgress] = useState(false);
-  const ref = useRef<HTMLElement>(null);
-
-  const remainAction = useCallback(() => {
-    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,
-  });
-
-  return (
-    <ActionModalContext.Provider value={{ onClose, isActionInProgress, setIsActionInProgress }}>
-      <ModalStyle
-        id='action-modal'
-        animation='bounce'
-        opacity={0.8}
-        isOpen={isOpen}
-        onClose={onClose}
-        {...modalProps}
-        backdropOnClick={actionRequired ? remainAction : onClose}
-        position={PositionContainer.CENTER}
-      >
-        <section ref={ref} className='modal-content'>
-          <ActionModalStyle className={actionModalClassName}>
-            {!noCloseButton && !actionRequired && (
-              <section className='close-modal-button' onClick={() => onClose()}>
-                <Icon name='cross' inCircle scale={2} />
-              </section>
-            )}
-            {icon ? (
-              <Typography variant='header4' className='action-modal-icon'>
-                <Icon name={icon} />
-              </Typography>
-            ) : null}
-            <section className='action-modal-body'>
-              <section className={`action-modal-content ${className}`} style={style}>
-                {children}
-              </section>
-            </section>
-          </ActionModalStyle>
-        </section>
-      </ModalStyle>
-    </ActionModalContext.Provider>
-  );
-};
-
-type ActionButtonProps = Omit<ButtonProps, 'onClick'> & {
-  onClick: (() => Promise<void>) | (() => void);
-};
-
-const ActionButton = ({ onClick, children, isLoading: manualIsLoading, ...buttonProps }: ActionButtonProps) => {
-  const { onClose, isActionInProgress, setIsActionInProgress } = useActionModalContext();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleAction = useCallback(() => {
-    setIsLoading(true);
-    setIsActionInProgress(true);
-    const result = onClick();
-
-    if (result instanceof Promise) {
-      result.then(() => {
-        onClose();
-        setIsLoading(false);
-        setIsActionInProgress(false);
-      });
-    } else {
-      onClose();
-      setIsLoading(false);
-      setIsActionInProgress(false);
-    }
-  }, [onClick, onClose, setIsActionInProgress]);
-
-  if (!isLoading && isActionInProgress) {
-    return null;
-  }
-
-  return (
-    <Button {...buttonProps} onClick={handleAction} isLoading={manualIsLoading || isLoading}>
-      {children}
-    </Button>
-  );
-};
-
-ActionModal.ActionButton = ActionButton;

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

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

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

@@ -1,81 +0,0 @@
-import { useState } from 'react';
-
-import { Button } from '../../buttons';
-import { Image } from '../../image';
-import { Typography } from '../../typography';
-
-import { AsideModal } from './aside-modal';
-
-import { PositionContainer } from '@polpo/helpers';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof AsideModal> = {
-  title: 'Modals/AsideModal',
-  component: AsideModal,
-  argTypes: {
-    position: {
-      control: 'inline-radio',
-      options: [PositionContainer.TOP, PositionContainer.LEFT, PositionContainer.RIGHT, PositionContainer.BOTTOM],
-    },
-    children: { control: 'text' },
-    size: { control: { type: 'range', min: 100, max: 500, step: 10 } },
-    className: { control: false },
-    style: { control: false },
-  },
-  decorators: [
-    (Story, { args }) => {
-      const [isOpen, setIsOpen] = useState(false);
-
-      return (
-        <>
-          <Button onClick={() => setIsOpen(true)}>Open modal</Button>
-          <Story args={{ ...args, isOpen, onClose: () => setIsOpen(false) }} />
-        </>
-      );
-    },
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof AsideModal>;
-
-export const Aside: Story = {
-  argTypes: {
-    children: { control: false },
-  },
-  args: {
-    size: 500,
-  },
-  render: args => {
-    return (
-      <AsideModal {...args}>
-        <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

@@ -1,88 +0,0 @@
-import styled from 'styled-components';
-
-import { Modal } from '../modal';
-
-export const AsideModalStyle = styled(Modal)`
-  color: ${props => props.theme.colors.text.main};
-  overflow: auto;
-  height: 100%;
-
-  .aside-modal-content {
-    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 {
-    border-right: 4px solid ${props => props.theme.colors.primary.main};
-    animation: slideIn-left 300ms ease;
-
-    &.modal-close {
-      animation: slideOut-left 300ms ease;
-      transform: translateX(-100%);
-    }
-
-    .close-modal-button {
-      top: 2em;
-      left: 100%;
-      transform: translate(calc(-50% + 2px));
-    }
-  }
-
-  &.right {
-    border-left: 4px solid ${props => props.theme.colors.primary.main};
-    animation: slideIn-right 300ms ease;
-
-    &.modal-close {
-      animation: slideOut-right 300ms ease;
-      transform: translateX(100%);
-    }
-
-    .close-modal-button {
-      top: 2em;
-      right: 100%;
-      transform: translate(calc(50% - 2px));
-    }
-  }
-
-  &.top {
-    border-bottom: 4px solid ${props => props.theme.colors.primary.main};
-    animation: slideIn-top 300ms ease;
-
-    &.modal-close {
-      animation: slideOut-top 300ms ease;
-      transform: translateY(-100%);
-    }
-
-    .close-modal-button {
-      bottom: 0;
-      right: 2em;
-      transform: translate(0, calc(50% - 2px));
-    }
-  }
-
-  &.bottom {
-    border-top: 4px solid ${props => props.theme.colors.primary.main};
-    animation: slideIn-bottom 300ms ease;
-
-    &.modal-close {
-      animation: slideOut-bottom 300ms ease;
-      transform: translateY(100%);
-    }
-
-    .close-modal-button {
-      top: 0;
-      right: 2em;
-      transform: translate(0, calc(-50% + 2px));
-    }
-  }
-`;

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

@@ -1,64 +0,0 @@
-import { CSSProperties, useMemo } from 'react';
-
-import { Icon } from '../../icon';
-import { ModalProps } from '../modal';
-
-import { AsideModalStyle } from './aside-modal.style';
-
-import { PositionContainer } from '@polpo/helpers';
-
-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;
-};
-
-export const AsideModal = ({
-  children,
-  isOpen,
-  onClose,
-  position = PositionContainer.LEFT,
-  size,
-  className = '',
-  ...modalProps
-}: AsideModalProps) => {
-  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%' },
-    };
-
-    return computedSize[position];
-  }, [position, size]);
-
-  return (
-    <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/aside-modal/index.ts

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

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

@@ -1,62 +0,0 @@
-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> = {
-  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, { args }) => {
-      const { isOpen, openModal, closeModal } = useModal();
-
-      return (
-        <>
-          <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);
-                }),
-            }}
-          />
-        </>
-      );
-    },
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof ConfirmationModal>;
-
-export const Default: Story = {
-  args: {},
-};

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

@@ -1,17 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

package/src/components/modals/index.ts

@@ -1,6 +0,0 @@
-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

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