polpo 0.1.13 → 0.1.16

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

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

package/src/components/modals/index.ts

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

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

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

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

@@ -0,0 +1,194 @@
+import React, { RefObject, useCallback, useMemo } from 'react';
+import { IconType } from 'react-icons';
+
+import { useClassNames } from '../../../hooks';
+import { Checkbox } from '../../form';
+import { Line } from '../../line';
+import { Ripple } from '../../ripple';
+import { Typography, TypographyProps } from '../../typography';
+import { Modal, ModalProps } from '../modal';
+
+import './menu.styles.css';
+
+type MenuProps = ModalProps & {
+  children: React.ReactNode;
+  contentClassName?: string;
+  contentStyle?: React.CSSProperties;
+  menuContentRef?: RefObject<HTMLUListElement>;
+};
+
+export const Menu = ({
+  children,
+  isOpen,
+  onClose,
+  id,
+  menuContentRef,
+  contentClassName = '',
+  contentStyle = {},
+  className = '',
+  ...modalProps
+}: MenuProps) => {
+  const modalClassName = useClassNames({
+    'menu-modal': true,
+    [className]: Boolean(className),
+  });
+
+  return (
+    <Modal className={modalClassName} {...modalProps} id={`menu-${id}`} isOpen={isOpen} onClose={onClose}>
+      <ul className={`menu-content ${contentClassName}`} role='listbox' style={contentStyle} ref={menuContentRef}>
+        {children}
+      </ul>
+    </Modal>
+  );
+};
+
+export type MenuOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> & {
+  id?: string;
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  disabled?: boolean;
+  selected?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  asCheckbox?: boolean;
+  icon?: IconType;
+  onClick?: (newValue: boolean) => void;
+};
+
+const MenuOption = ({
+  children,
+  label = '',
+  asCheckbox,
+  icon: Icon,
+  id,
+  disabled = false,
+  selected = false,
+  className = '',
+  style = {},
+  onClick = () => null,
+  ...liProps
+}: MenuOptionProps) => {
+  const menuOptionClassName = useClassNames({
+    'menu-option': true,
+    [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'
+          style={{ pointerEvents: 'none' }}
+          size='small'
+          label={
+            <>
+              {Icon !== undefined && <Icon className='option-icon' />}
+              <Typography variant='label'>{label}</Typography>
+            </>
+          }
+        />
+      );
+    }
+
+    return (
+      <>
+        {Icon !== undefined && <Icon className='option-icon' />}
+        {typeof label === 'string' ? <Typography variant='label'>{label}</Typography> : label}
+      </>
+    );
+  }, [asCheckbox, children, disabled, Icon, label, onClick, selected]);
+
+  return (
+    <li
+      {...liProps}
+      id={id}
+      role='option'
+      tabIndex={-1}
+      aria-selected={selected}
+      aria-disabled={disabled}
+      onClick={handleClick}
+      className={menuOptionClassName}
+      style={style}
+    >
+      <Ripple zIndex={10} />
+      {menuOptionContent}
+    </li>
+  );
+};
+
+const Divider = () => {
+  return (
+    <li>
+      <Line className='divider' />
+    </li>
+  );
+};
+
+const Label = ({ children, className = '', ...props }: Omit<TypographyProps, 'variant'>) => {
+  return (
+    <li tabIndex={-1} className='menu-label'>
+      <Typography {...props} variant='small' className={`menu-group-label ${className}`}>
+        {children}
+      </Typography>
+    </li>
+  );
+};
+
+type MenuGroupProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> & {
+  children: React.ReactNode;
+  label: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  contentClassName?: string;
+  contentStyle?: React.CSSProperties;
+};
+
+const Group = ({
+  children,
+  label,
+  className = '',
+  style = {},
+  contentClassName = '',
+  contentStyle = {},
+  ...props
+}: MenuGroupProps) => {
+  const groupClassName = useClassNames({
+    'menu-group': true,
+    [className]: Boolean(className),
+  });
+
+  return (
+    <li tabIndex={-1} {...props} className={groupClassName} style={style}>
+      {label && <Label>{label}</Label>}
+      <ul className={`menu-group-content ${contentClassName}`} role='listbox' style={contentStyle}>
+        {children}
+      </ul>
+    </li>
+  );
+};
+
+Menu.Option = MenuOption;
+Menu.Divider = Divider;
+Menu.GroupLabel = Label;
+Menu.Group = Group;

package/src/components/modals/menu/menu.styles.css

@@ -0,0 +1,101 @@
+@reference "polpo-tailwind-config/styles";
+
+.menu-modal {
+    border-radius: 0.5em;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    box-shadow: 0 0 25px var(--color-background-paper);
+    user-select: none;
+    position: relative;
+    overflow-y: auto;
+
+    .menu-content {
+        display: grid;
+        gap: 0.2em;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        align-content: start;
+        height: 100%;
+        position: relative;
+        overflow-y: auto;
+    }
+
+    .divider {
+        margin: 0.4em 0;
+        color: var(--color-border);
+    }
+}
+
+.menu-label {
+    background: var(--color-background);
+    color: var(--color-foreground);
+    font-weight: lighter;
+    padding: 0.5em 1.2em;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    pointer-events: none;
+}
+
+.menu-option {
+    padding: 0.2em 1em;
+    border-radius: 0.3em;
+    transition: all 300ms ease;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    outline: 0;
+    margin: 0 0.2em;
+    position: relative;
+
+    .ripple-effect {
+        background: hsl(from var(--color-foreground) h s l / 31%);
+    }
+
+    &:first-child {
+        margin-top: 5px;
+    }
+
+    .option-icon {
+        margin-right: 0.5em;
+    }
+
+    .menu-checkbox {
+        width: 100%;
+    }
+
+    &.is-disabled {
+        opacity: 0.4;
+        pointer-events: none;
+        cursor: default;
+    }
+
+    &:focus,
+    &:hover {
+        background: hsl(from var(--color-background-paper) h s l / 25%);
+    }
+
+    &.is-selected {
+        background: var(--color-background-paper);
+
+        &:focus,
+        &:hover {
+            background: hsl(from var(--color-background-paper) h s l / 75%);
+        }
+    }
+}
+
+.menu-group {
+    position: relative;
+
+    .menu-group-content {
+        display: grid;
+        gap: 0.2em;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        align-content: start;
+        position: relative;
+    }
+}

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

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

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

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+
+import { ModalState, useClassNames } from '../../../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 backdropClassName = useClassNames({
+    'modal-backdrop': true,
+    'backdrop-close': modalState === ModalState.CLOSING || modalState === ModalState.CLOSED,
+  });
+
+  const backgroundStyles = useMemo(() => {
+    const backdropStyles = {
+      [ModalBackdrop.OPAQUE]: {
+        background: `hsl(from var(--color-background-paper) h s l / ${opacity * 100}%)`,
+      },
+      [ModalBackdrop.TRANSPARENT]: {
+        background: 'transparent',
+      },
+      [ModalBackdrop.BLUR]: {
+        background: `hsl(from var(--color-background-paper) h s l / ${opacity * 100}%)`,
+        backdropFilter: 'blur(5px)',
+      },
+      [ModalBackdrop.NONE]: {
+        display: 'none',
+      },
+    };
+
+    return backdropStyles[backdrop] ?? {};
+  }, [backdrop, opacity]);
+
+  if (backdrop === ModalBackdrop.NONE) {
+    return null;
+  }
+
+  return (
+    <section
+      tabIndex={-1}
+      onClick={backdropOnClick}
+      className={backdropClassName}
+      style={{
+        zIndex,
+        ...backgroundStyles,
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,104 @@
+import React, { CSSProperties, useMemo, useRef } from 'react';
+
+import {
+  ModalState,
+  useClassNames,
+  useClickOutside,
+  useModalInContainer,
+  UseModalInContainerParams,
+  useModalTransition,
+  UseModalTransitionParams,
+} from '../../../hooks';
+import { Portal } from '../portal';
+
+import { Backdrop, BackdropProps } from './modal.backdrop';
+import './modal.styles.css';
+
+export type ModalProps = Omit<BackdropProps, 'modalState'> &
+  UseModalTransitionParams &
+  Omit<UseModalInContainerParams, 'modalRef'> & {
+    id: string;
+    children: React.ReactNode;
+    onClose: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    rootStyle?: CSSProperties;
+    animation?: 'none' | 'fade-down' | 'bounce';
+    closeAnimationClassName?: string;
+    modalRef?: React.RefObject<HTMLElement | null>;
+    closeOnClickOutside?: boolean;
+  };
+
+export const Modal = ({
+  id,
+  children,
+  isOpen,
+  onClose,
+  className = '',
+  style = {},
+  rootStyle = {},
+  animation = 'fade-down',
+  closeAnimationClassName = 'modal-close',
+  modalRef: modalRefProp,
+  closeOnClickOutside = true,
+  transitionDuration = 300,
+  windowOffset = 10,
+  offset = 20,
+  position,
+  containerRef,
+  zIndex = 1000,
+  ...backdropProps
+}: ModalProps) => {
+  const uuid = useMemo(() => crypto.randomUUID(), []);
+  const modalRef = useRef<HTMLElement>(null);
+  const { modalState, isVisible } = useModalTransition({
+    transitionDuration,
+    isOpen,
+  });
+
+  useModalInContainer({
+    modalRef: modalRefProp ?? modalRef,
+    containerRef,
+    offset,
+    windowOffset,
+    position,
+    isOpen: isVisible,
+  });
+
+  useClickOutside<HTMLElement>(modalRefProp ?? modalRef, () => {
+    if (isOpen && closeOnClickOutside) {
+      onClose();
+    }
+  });
+
+  const modalContentClassName = useClassNames({
+    'modal-content': true,
+    [className]: Boolean(className),
+    [`animation-${animation}`]: Boolean(animation) && animation !== 'none',
+    [closeAnimationClassName]: modalState === ModalState.CLOSING || modalState === ModalState.CLOSED,
+  });
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <Portal id={`modal-${id}-${uuid}`}>
+      <Backdrop {...backdropProps} modalState={modalState} zIndex={zIndex} />
+      <section
+        className='modal'
+        ref={modalRefProp ?? modalRef}
+        style={{
+          maxWidth: `calc(100dvw - ${windowOffset * 2}px)`,
+          maxHeight: `calc(100dvh - ${windowOffset * 2}px)`,
+          ...rootStyle,
+          zIndex: +zIndex + 1,
+        }}
+      >
+        <section style={{ ...style, animationDuration: `${transitionDuration}ms` }} className={modalContentClassName}>
+          {children}
+        </section>
+      </section>
+    </Portal>
+  );
+};

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

@@ -0,0 +1,70 @@
+@reference "polpo-tailwind-config/styles";
+
+.modal {
+    position: fixed;
+    z-index: 1001;
+    pointer-events: none;
+}
+
+.modal-content {
+    background: var(--color-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;
+        }
+    }
+}
+
+.modal-backdrop {
+    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/portal/index.ts

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

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useDomContainer } from '../../../hooks';
+
+type PortalProps = {
+  id: string;
+  children: ReactNode;
+};
+
+export const Portal = ({ children, id }: PortalProps) => {
+  const root = useDomContainer(id);
+
+  if (root === null) {
+    return null;
+  }
+
+  return createPortal(children, root);
+};

package/src/components/ripple/index.ts

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

package/src/components/ripple/ripple.component.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useRef } from 'react';
+
+import './ripple.styles.css';
+
+interface RippleProps {
+  color?: string;
+  duration?: number;
+  timingFunction?: React.CSSProperties['animationTimingFunction'];
+  times?: number;
+  className?: string;
+  style?: React.CSSProperties;
+  zIndex?: React.CSSProperties['zIndex'];
+}
+
+export const Ripple = ({
+  color,
+  duration = 1000,
+  timingFunction = 'ease-out',
+  times = 1,
+  className = '',
+  style = {},
+  zIndex = 1,
+}: RippleProps) => {
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!ref.current?.parentElement) {
+      return;
+    }
+
+    const computedPosition = getComputedStyle(ref.current.parentElement).position;
+
+    if (!['absolute', 'fixed', 'sticky', 'relative'].includes(computedPosition)) {
+      ref.current.parentElement.style.position = 'relative';
+    }
+  }, []);
+
+  const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => {
+    const { pageX, pageY, currentTarget } = e;
+
+    const rect = currentTarget.getBoundingClientRect();
+
+    const x = ((pageX - rect.left) * 100) / rect.width;
+    const y = ((pageY - rect.top) * 100) / rect.height;
+
+    console.log({ y, pageY, rectTop: rect.top, rectHeight: rect.height });
+
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple-effect');
+    ripple.style.animationDuration = `${duration}ms`;
+    ripple.style.animationTimingFunction = timingFunction;
+    ripple.style.left = `${x}%`;
+    ripple.style.top = `${y}%`;
+
+    if (color) {
+      ripple.style.background = color;
+    }
+
+    currentTarget.appendChild(ripple);
+
+    setTimeout(
+      () => {
+        ripple.remove();
+      },
+      Math.max(duration, 500) * Math.max(times, 1),
+    );
+  };
+
+  return <span ref={ref} onMouseDown={handleClick} className={`ripple ${className}`} style={{ ...style, zIndex }} />;
+};

package/src/components/ripple/ripple.styles.css

@@ -0,0 +1,33 @@
+@reference "polpo-tailwind-config/styles";
+
+.ripple {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    z-index: 1;
+
+    .ripple-effect {
+        position: absolute;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        width: 0;
+        height: 0;
+        pointer-events: none;
+        animation: ripple-effect infinite;
+        opacity: 0.4;
+    }
+}
+
+@keyframes ripple-effect {
+    to {
+        width: 300px;
+        height: 300px;
+        opacity: 0;
+        filter: blur(5px);
+    }
+}

package/src/components/smart-table/index.ts

@@ -0,0 +1,2 @@
+export * from './smart-table.types';
+export * from './smart-table.component';