polpo 0.1.7 → 0.1.8

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

@@ -1,328 +0,0 @@
-import { Grid } from '../../../layouts';
-import { Button } from '../../buttons';
-import { Line } from '../../line';
-import { Typography } from '../../typography';
-
-import { ModalBackdrop } from './backdrop';
-import { Modal as ModalComponent, ModalProps } from './modal';
-
-import { PositionContainer } from '@polpo/helpers';
-import { useModal } from '@polpo/hooks';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const Modal = ({ children, ...props }: ModalProps) => (
-  <ModalComponent backdrop='none' {...props} style={{ borderRadius: '1em' }}>
-    <Grid style={{ width: '400px', maxWidth: '100%', padding: '1em' }}>
-      <Typography variant='header4' color='primary'>
-        {children}
-      </Typography>
-      <Line />
-      <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, commodi dolore, doloremque doloribus esse
-        excepturi impedit in, ipsam ipsum iste magni nihil officiis quasi quia quod similique tenetur? Aliquid cum dolor
-        incidunt nihil?
-      </Typography>
-    </Grid>
-  </ModalComponent>
-);
-
-const meta: Meta<typeof ModalComponent> = {
-  title: 'Modals/Modal',
-  component: ModalComponent,
-  argTypes: {
-    animation: { control: { type: 'inline-radio', options: ['none', 'fade-down', 'bounce'] } },
-    windowOffset: { control: { type: 'range', min: 0, max: 100 } },
-    offset: { control: { type: 'range', min: 0, max: 100 } },
-    position: { control: 'inline-radio', options: Object.values(PositionContainer) },
-    closeOnClickOutside: { control: 'boolean' },
-    opacity: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
-    backdrop: { control: { type: 'inline-radio', options: Object.values(ModalBackdrop) } },
-    transitionDuration: { control: false },
-    backdropOnClick: { control: false },
-    zIndex: { control: false },
-    id: { control: false },
-    children: { control: false },
-    isOpen: { control: false },
-    onClose: { control: false },
-    className: { control: false },
-    style: { control: false },
-    rootStyle: { control: false },
-    closeAnimationClassName: { control: false },
-    containerRef: { control: false },
-    modalRef: { control: false },
-  },
-  args: {
-    offset: 20,
-    windowOffset: 10,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ModalComponent>;
-
-export const AllContainerPositions: Story = {
-  argTypes: {
-    position: { control: false },
-  },
-  render: args => {
-    const modal1 = useModal<HTMLButtonElement>();
-    const modal2 = useModal<HTMLButtonElement>();
-    const modal3 = useModal<HTMLButtonElement>();
-    const modal4 = useModal<HTMLButtonElement>();
-    const modal5 = useModal<HTMLButtonElement>();
-    const modal6 = useModal<HTMLButtonElement>();
-    const modal7 = useModal<HTMLButtonElement>();
-    const modal8 = useModal<HTMLButtonElement>();
-    const modal9 = useModal<HTMLButtonElement>();
-    const modal10 = useModal<HTMLButtonElement>();
-    const modal11 = useModal<HTMLButtonElement>();
-    const modal12 = useModal<HTMLButtonElement>();
-
-    return (
-      <Grid gtc='repeat(3, 1fr)' gap='20px'>
-        <Button width='full' ref={modal1.containerRef} onClick={modal1.openModal}>
-          top left
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal1.containerRef}
-          id='container-modal'
-          isOpen={modal1.isOpen}
-          onClose={modal1.closeModal}
-          position='top left'
-        >
-          top left
-        </Modal>
-        <Button width='full' ref={modal2.containerRef} onClick={modal2.openModal}>
-          top center
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal2.containerRef}
-          id='container-modal'
-          isOpen={modal2.isOpen}
-          onClose={modal2.closeModal}
-          position='top center'
-        >
-          top center
-        </Modal>
-        <Button width='full' ref={modal3.containerRef} onClick={modal3.openModal}>
-          top right
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal3.containerRef}
-          id='container-modal'
-          isOpen={modal3.isOpen}
-          onClose={modal3.closeModal}
-          position='top right'
-        >
-          top right
-        </Modal>
-
-        <Button width='full' ref={modal4.containerRef} onClick={modal4.openModal}>
-          left top
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal4.containerRef}
-          id='container-modal'
-          isOpen={modal4.isOpen}
-          onClose={modal4.closeModal}
-          position='left top'
-        >
-          left top
-        </Modal>
-        <span />
-        <Button width='full' ref={modal5.containerRef} onClick={modal5.openModal}>
-          right top
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal5.containerRef}
-          id='container-modal'
-          isOpen={modal5.isOpen}
-          onClose={modal5.closeModal}
-          position='right top'
-        >
-          right top
-        </Modal>
-
-        <Button width='full' ref={modal6.containerRef} onClick={modal6.openModal}>
-          left center
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal6.containerRef}
-          id='container-modal'
-          isOpen={modal6.isOpen}
-          onClose={modal6.closeModal}
-          position='left center'
-        >
-          left center
-        </Modal>
-        <span />
-        <Button width='full' ref={modal7.containerRef} onClick={modal7.openModal}>
-          right center
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal7.containerRef}
-          id='container-modal'
-          isOpen={modal7.isOpen}
-          onClose={modal7.closeModal}
-          position='right center'
-        >
-          right center
-        </Modal>
-
-        <Button width='full' ref={modal8.containerRef} onClick={modal8.openModal}>
-          left bottom
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal8.containerRef}
-          id='container-modal'
-          isOpen={modal8.isOpen}
-          onClose={modal8.closeModal}
-          position='left bottom'
-        >
-          left bottom
-        </Modal>
-        <span />
-        <Button width='full' ref={modal9.containerRef} onClick={modal9.openModal}>
-          right bottom
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal9.containerRef}
-          id='container-modal'
-          isOpen={modal9.isOpen}
-          onClose={modal9.closeModal}
-          position='right bottom'
-        >
-          right bottom
-        </Modal>
-
-        <Button width='full' ref={modal10.containerRef} onClick={modal10.openModal}>
-          bottom left
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal10.containerRef}
-          id='container-modal'
-          isOpen={modal10.isOpen}
-          onClose={modal10.closeModal}
-          position='bottom left'
-        >
-          bottom left
-        </Modal>
-        <Button width='full' ref={modal11.containerRef} onClick={modal11.openModal}>
-          bottom center
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal11.containerRef}
-          id='container-modal'
-          isOpen={modal11.isOpen}
-          onClose={modal11.closeModal}
-          position='bottom center'
-        >
-          bottom center
-        </Modal>
-        <Button width='full' ref={modal12.containerRef} onClick={modal12.openModal}>
-          bottom right
-        </Button>
-        <Modal
-          {...args}
-          containerRef={modal12.containerRef}
-          id='container-modal'
-          isOpen={modal12.isOpen}
-          onClose={modal12.closeModal}
-          position='bottom right'
-        >
-          bottom right
-        </Modal>
-      </Grid>
-    );
-  },
-};
-
-export const AllScreenPositions: Story = {
-  argTypes: {
-    position: { control: false },
-  },
-  render: args => {
-    const modal1 = useModal();
-    const modal2 = useModal();
-    const modal3 = useModal();
-    const modal4 = useModal();
-    const modal5 = useModal();
-    const modal6 = useModal();
-    const modal7 = useModal();
-    const modal8 = useModal();
-    const modal9 = useModal();
-
-    return (
-      <Grid gtc='repeat(3, 1fr)' gap='20px'>
-        <Button width='full' onClick={modal1.openModal}>
-          top left
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal1.isOpen} onClose={modal1.closeModal} position='top left'>
-          top left
-        </Modal>
-        <Button width='full' onClick={modal2.openModal}>
-          top center
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal2.isOpen} onClose={modal2.closeModal} position='top center'>
-          top center
-        </Modal>
-        <Button width='full' onClick={modal3.openModal}>
-          top right
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal3.isOpen} onClose={modal3.closeModal} position='top right'>
-          top right
-        </Modal>
-
-        <Button width='full' onClick={modal4.openModal}>
-          left center
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal4.isOpen} onClose={modal4.closeModal} position='left center'>
-          left center
-        </Modal>
-        <Button width='full' onClick={modal5.openModal}>
-          center
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal5.isOpen} onClose={modal5.closeModal} position='center'>
-          center
-        </Modal>
-        <Button width='full' onClick={modal6.openModal}>
-          right center
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal6.isOpen} onClose={modal6.closeModal} position='right center'>
-          right center
-        </Modal>
-
-        <Button width='full' onClick={modal7.openModal}>
-          bottom left
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal7.isOpen} onClose={modal7.closeModal} position='bottom left'>
-          bottom left
-        </Modal>
-        <Button width='full' onClick={modal8.openModal}>
-          bottom center
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal8.isOpen} onClose={modal8.closeModal} position='bottom center'>
-          bottom center
-        </Modal>
-        <Button width='full' onClick={modal9.openModal}>
-          bottom right
-        </Button>
-        <Modal {...args} id='screen-modal' isOpen={modal9.isOpen} onClose={modal9.closeModal} position='bottom right'>
-          bottom right
-        </Modal>
-      </Grid>
-    );
-  },
-};

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

@@ -1,70 +0,0 @@
-import styled from 'styled-components';
-
-export const ModalStyle = styled.section`
-  position: fixed;
-  z-index: 1001;
-  pointer-events: none;
-`;
-
-export const ModalContentStyle = styled.section`
-  background: ${props => props.theme.colors.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;
-    }
-  }
-`;
-
-export const BackdropStyle = styled.section`
-  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/modal/modal.tsx

@@ -1,106 +0,0 @@
-import React, { CSSProperties, useMemo, useRef } from 'react';
-
-import { Portal } from '../portal';
-
-import { Backdrop, BackdropProps } from './backdrop';
-import { ModalContentStyle, ModalStyle } from './modal.style';
-
-import {
-  ModalState,
-  useClassNames,
-  useClickOutside,
-  useModalInContainer,
-  UseModalInContainerParams,
-  useModalTransition,
-  UseModalTransitionParams,
-} from '@polpo/hooks';
-
-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>;
-    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({
-    [className]: true,
-    [`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} />
-      <ModalStyle
-        ref={modalRefProp ?? modalRef}
-        style={{
-          maxWidth: `calc(100dvw - ${windowOffset * 2}px)`,
-          maxHeight: `calc(100dvh - ${windowOffset * 2}px)`,
-          ...rootStyle,
-          zIndex: +zIndex + 1,
-        }}
-      >
-        <ModalContentStyle
-          style={{ ...style, animationDuration: `${transitionDuration}ms` }}
-          className={modalContentClassName}
-        >
-          {children}
-        </ModalContentStyle>
-      </ModalStyle>
-    </Portal>
-  );
-};

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

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

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

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

package/src/components/ripple/index.ts

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

package/src/components/ripple/ripple.stories.tsx

@@ -1,38 +0,0 @@
-import { Ripple } from './ripple';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Ripple> = {
-  title: 'Ripple',
-  component: Ripple,
-  argTypes: {
-    color: { control: 'color' },
-    duration: { control: { type: 'range', min: 500, max: 5000, step: 100 } },
-    timingFunction: { options: ['ease', 'ease-out', 'ease-in', 'ease-in-out', 'cubic-bezier(0.81, -0.52, 0.42, 2.5)'] },
-    times: { control: { type: 'range', min: 1, max: 5 } },
-    className: { control: false },
-    style: { control: false },
-  },
-  args: {
-    color: '#FFFFFF',
-  },
-  render: args => (
-    <section
-      style={{
-        background: 'linear-gradient(35deg, rgba(230,96,255,1) 0%, rgba(91,170,255,1) 100%)',
-        width: '300px',
-        height: '300px',
-        borderRadius: '10px',
-      }}
-    >
-      <Ripple {...args} />
-    </section>
-  ),
-};
-
-export default meta;
-type Story = StoryObj<typeof Ripple>;
-
-export const Default: Story = {
-  args: {},
-};

package/src/components/ripple/ripple.style.ts

@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-export const RippleStyle = styled.span`
-  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/ripple/ripple.tsx

@@ -1,65 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-import { RippleStyle } from './ripple.style';
-
-type 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<HTMLSpanElement>(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;
-
-    const ripple = document.createElement('span');
-    ripple.classList.add('ripple-effect');
-    color && (ripple.style.background = color);
-    ripple.style.animationDuration = `${duration}ms`;
-    ripple.style.animationTimingFunction = timingFunction;
-    ripple.style.left = `${x}%`;
-    ripple.style.top = `${y}%`;
-
-    currentTarget.appendChild(ripple);
-
-    setTimeout(
-      () => {
-        ripple.remove();
-      },
-      Math.max(duration, 500) * Math.max(times, 1),
-    );
-  };
-
-  return <RippleStyle ref={ref} onMouseDown={handleClick} className={className} style={{ ...style, zIndex }} />;
-};

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

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