polpo 0.1.13 → 0.1.16

package/src/components/infinity-scroll/infinity-scroll.component.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+
+import { useDebounce, useInView } from '../../hooks';
+
+import './infinity-scroll.styles.css';
+
+interface InfinityScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+  isLoading: boolean;
+  hasNextPage: boolean;
+  loadMore: () => void;
+  customLoadMoreElement?: (ref: React.RefObject<HTMLElement | null>) => React.ReactNode;
+  emptyMessage?: string;
+  children?: React.ReactNode;
+}
+
+export const InfinityScroll = ({
+  isLoading: isLoadingProp = false,
+  hasNextPage = false,
+  loadMore,
+  customLoadMoreElement,
+  emptyMessage,
+  children,
+}: InfinityScrollProps) => {
+  const { ref, inView } = useInView();
+  const isLoading = useDebounce(isLoadingProp, 100);
+
+  useEffect(() => {
+    if (hasNextPage && inView && !isLoading) {
+      loadMore();
+    }
+  }, [hasNextPage, isLoading, loadMore, inView]);
+
+  const childrenExists = Array.isArray(children) ? children.length > 0 : Boolean(children);
+
+  return (
+    <>
+      {children}
+      <section className='infinity-scroll'>
+        {Boolean(emptyMessage) && !childrenExists && !isLoading && <p className='empty-message'>{emptyMessage}</p>}
+        {(hasNextPage || isLoading) &&
+          (customLoadMoreElement ? (
+            customLoadMoreElement(ref)
+          ) : (
+            <section ref={ref} className='loading'>
+              {isLoading && <span className='loading--icon'>:D</span>}
+            </section>
+          ))}
+      </section>
+    </>
+  );
+};

package/src/components/infinity-scroll/infinity-scroll.styles.css

@@ -0,0 +1,25 @@
+@reference "polpo-tailwind-config/styles";
+
+.infinity-scroll {
+    display: grid;
+    place-content: start center;
+    place-items: start center;
+
+    .loading {
+        width: 100%;
+        height: 30px;
+        display: grid;
+        place-content: center;
+
+        .loading--icon {
+            animation: spin 0.5s linear infinite;
+            font-size: 20px;
+        }
+    }
+
+    .empty-message {
+        font-size: 0.8em;
+        text-align: center;
+        color: #a6a6a6;
+    }
+}

package/src/components/line/index.ts

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

package/src/components/line/line.component.tsx

@@ -0,0 +1,77 @@
+import { useClassNames } from '../../hooks';
+
+import './line.styles.css';
+
+export enum LineOrientation {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+}
+
+export enum LineStyle {
+  SOLID = 'solid',
+  DOTTED = 'dotted',
+  DASHED = 'dashed',
+}
+
+type LineCommonProps = {
+  orientation?: `${LineOrientation}`;
+  className?: string;
+  style?: React.CSSProperties;
+  color?: string;
+};
+
+type LineSolidProps = LineCommonProps & {
+  lineStyle?: `${LineStyle.SOLID}`;
+  spacing?: never;
+  dashedSize?: never;
+  size?: number;
+};
+
+type LineDottedProps = LineCommonProps & {
+  lineStyle: `${LineStyle.DOTTED}`;
+  spacing?: number;
+  size?: number;
+  dashedSize?: never;
+};
+
+type LineDashedProps = LineCommonProps & {
+  lineStyle: `${LineStyle.DASHED}`;
+  spacing?: number;
+  dashedSize?: number;
+  size?: number;
+};
+
+type LineProps = LineSolidProps | LineDottedProps | LineDashedProps;
+
+export const Line = ({
+  orientation = LineOrientation.HORIZONTAL,
+  className = '',
+  style = {},
+  color = 'currentColor',
+  size = 1,
+  lineStyle = LineStyle.SOLID,
+  dashedSize = 1,
+  spacing = 1,
+}: LineProps) => {
+  const classNames = useClassNames({
+    'custom-line': true,
+    [orientation]: true,
+    [className]: !!className,
+    [lineStyle]: true,
+  });
+
+  return (
+    <span
+      className={classNames}
+      style={
+        {
+          ...style,
+          '--color': color,
+          '--size': `${size}px`,
+          '--spacing': `${spacing}px`,
+          '--dashSize': `${dashedSize}px`,
+        } as React.CSSProperties
+      }
+    />
+  );
+};

package/src/components/line/line.styles.css

@@ -0,0 +1,61 @@
+@reference "polpo-tailwind-config/styles";
+
+.custom-line {
+    --color: attr(data-color, 'currentColor');
+    --size: attr(data-size, 1px);
+    --spacing: attr(data-spacing, 1px);
+    --dashSize: attr(data-dash-size, 1px);
+
+    &.horizontal,
+    &.vertical {
+        background: var(--color);
+        display: inline-block;
+        border-radius: 100px;
+    }
+
+    &.horizontal {
+        width: 100%;
+        height: var(--size);
+
+        &.dotted {
+            background: radial-gradient(
+                    calc(var(--size) / 2) calc(var(--size) / 2),
+                    var(--color) 100%,
+                    transparent
+            ) 0 0 / calc(var(--spacing) + var(--size)) 100%;
+        }
+
+        &.dashed {
+            background: repeating-linear-gradient(
+                    90deg,
+                    var(--color),
+                    var(--color) var(--dashSize),
+                    transparent var(--dashSize),
+                    transparent calc(var(--spacing) + var(--dashSize))
+            );
+        }
+    }
+
+    &.vertical {
+        height: 100%;
+        width: var(--size);
+
+        &.dotted {
+            background: radial-gradient(
+                    calc(var(--size) / 2) calc(var(--size) / 2),
+                    var(--color) 100%,
+                    transparent
+            ) 0 0 / 100% calc(var(--spacing) + var(--size));
+        }
+
+        &.dashed {
+            background: repeating-linear-gradient(
+                    0deg,
+                    var(--color),
+                    var(--color) var(--dashSize),
+                    transparent var(--dashSize),
+                    transparent calc(var(--spacing) + var(--dashSize))
+            );
+        }
+    }
+}

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

@@ -0,0 +1,150 @@
+import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import { IconType } from 'react-icons';
+import { ImCross } from 'react-icons/im';
+
+import { PositionContainer } from '../../../helpers';
+import { useClassNames } from '../../../hooks';
+import { Button, ButtonProps } from '../../button';
+import { Typography } from '../../typography';
+import { Modal, ModalProps } from '../modal';
+
+import './action-modal.styles.css';
+
+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?: IconType;
+  noCloseButton?: boolean;
+  lineOnTop?: boolean;
+  backCard?: boolean;
+  noPadding?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const ActionModal = ({
+  children,
+  isOpen,
+  onClose,
+  actionRequired,
+  icon: 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({
+    'action-modal-content': true,
+    'back-card': backCard,
+    'line-on-top': lineOnTop,
+    'no-padding': noPadding,
+  });
+
+  return (
+    <ActionModalContext.Provider value={{ onClose, isActionInProgress, setIsActionInProgress }}>
+      <Modal
+        className='action-modal'
+        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'>
+          <section className={actionModalClassName}>
+            {!noCloseButton && !actionRequired && (
+              <section className='close-modal-button' onClick={() => onClose()}>
+                <ImCross />
+              </section>
+            )}
+            {Icon ? (
+              <Typography variant='header4' className='action-modal-icon'>
+                <Icon />
+              </Typography>
+            ) : null}
+            <section className='action-modal-body'>
+              <section className={`action-modal-content ${className}`} style={style}>
+                {children}
+              </section>
+            </section>
+          </section>
+        </section>
+      </Modal>
+    </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/action-modal.styles.css

@@ -0,0 +1,115 @@
+@reference "polpo-tailwind-config/styles";
+
+.action-modal {
+    background: transparent;
+
+    .modal-content {
+        &.shake-animation {
+            animation: headShake 600ms linear;
+        }
+    }
+}
+
+.action-modal-content {
+    position: relative;
+
+    .action-modal-body {
+        box-shadow: 0 0 10px -5px;
+        border-radius: 10px;
+        overflow: hidden;
+        display: grid;
+    }
+
+    .action-modal-content {
+        background: var(--color-background);
+        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: var(--color-primary-500);
+            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: var(--color-primary-500);
+        color: var(--color-primary-50);
+        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 hsl(from var(--color-primary-500) h s l / 53%),
+                0 0 0 0 hsl(from var(--color-primary-500) h s l / 40%),
+                0 0 0 0 hsl(from var(--color-primary-500) h s l / 27%),
+                0 0 0 0 hsl(from var(--color-primary-500) h s l / 14%);
+    }
+
+    .close-modal-button {
+        width: 1em;
+        height: 1em;
+        border-radius: 50%;
+        cursor: pointer;
+        background: var(--color-background);
+        position: absolute;
+        top: 10px;
+        right: 5px;
+        @apply text-label;
+        opacity: 0;
+        transition: opacity 300ms ease;
+        z-index: 1;
+    }
+
+    &.line-on-top {
+        .action-modal-content {
+            border-top: 5px solid var(--color-primary-500);
+        }
+    }
+
+    &:hover {
+        .action-modal-icon {
+            box-shadow:
+                    0 0 0 7px hsl(from var(--color-primary-500) h s l / 53%),
+                    0 0 0 14px hsl(from var(--color-primary-500) h s l / 40%),
+                    0 0 0 21px hsl(from var(--color-primary-500) h s l / 27%),
+                    0 0 0 28px hsl(from var(--color-primary-500) h s l / 14%);
+        }
+
+        .close-modal-button {
+            opacity: 1;
+        }
+
+        &::before {
+            top: 15px;
+        }
+    }
+}

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

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

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

@@ -0,0 +1,63 @@
+import { CSSProperties, useMemo } from 'react';
+import { ImCross } from 'react-icons/im';
+
+import { PositionContainer } from '../../../helpers';
+import { Modal, ModalProps } from '../modal';
+
+import './aside-modal.styles.css';
+
+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 (
+    <Modal
+      id='aside'
+      isOpen={isOpen}
+      onClose={onClose}
+      opacity={0.6}
+      windowOffset={0}
+      animation='none'
+      className={`aside-modal ${className} ${position}`}
+      rootStyle={modalRootStyles}
+      backdropOnClick={onClose}
+      position={position}
+      {...modalProps}
+    >
+      <span className='close-modal-button' onClick={onClose}>
+        <ImCross />
+      </span>
+      <section className='aside-modal-content'>{children}</section>
+    </Modal>
+  );
+};

package/src/components/modals/aside-modal/aside-modal.styles.css

@@ -0,0 +1,86 @@
+@reference "polpo-tailwind-config/styles";
+
+.aside-modal {
+    color: var(--color-foreground);
+    overflow: auto;
+    height: 100%;
+
+    .aside-modal-content {
+        padding: 2em;
+    }
+
+    .close-modal-button {
+        border-radius: 50%;
+        cursor: pointer;
+        display: grid;
+        place-content: center;
+        background: var(--color-background);
+        border: 4px solid var(--color-primary-500);
+        position: absolute;
+        padding: 0.5em;
+    }
+
+    &.left {
+        border-right: 4px solid var(--color-primary-500);
+        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 var(--color-primary-500);
+        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 var(--color-primary-500);
+        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 var(--color-primary-500);
+        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/index.ts

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

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

@@ -0,0 +1,43 @@
+import { Typography } from '../../typography';
+import { ActionModal, ActionModalProps } from '../action-modal';
+
+import './confirmation-modal.styles.css';
+
+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>
+      <section className='confirmation-modal'>
+        <Typography variant='header4'>{title}</Typography>
+        <section>{children}</section>
+        <section className='confirmation-modal-actions'>
+          {!isLoading && (
+            <ActionModal.ActionButton variant='flat' onClick={onReject}>
+              {rejectText}
+            </ActionModal.ActionButton>
+          )}
+          <ActionModal.ActionButton isLoading={isLoading} onClick={onAccept}>
+            {acceptText}
+          </ActionModal.ActionButton>
+        </section>
+      </section>
+    </ActionModal>
+  );
+};

package/src/components/modals/confirmation-modal/confirmation-modal.styles.css

@@ -0,0 +1,17 @@
+@reference "polpo-tailwind-config/styles";
+
+.confirmation-modal {
+    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;
+    }
+}