polpo 0.1.1 → 0.1.2

package/src/components/form/select/select.types.ts

@@ -29,7 +29,6 @@ export type SharedSelectProps<T extends SelectItem> = InputFieldProps<{
 
 export type MultiSelectProps<T extends SelectItem> = SharedSelectProps<T> & {
   multiselect: true;
-  optionVariant?: `${SelectOptionVariant}`;
 };
 
 export type SingleSelectProps<T extends SelectItem> = SharedSelectProps<T> & {
@@ -49,7 +48,7 @@ export type ControllerGeneratorSelectProps<T extends SelectItem> =
 
 export type OptionsProps<T extends SelectItem> = {
   isOpen: boolean;
-  style?: React.CSSProperties;
+  onClose: () => void;
   onSearchQuery?: (value: string) => void;
   searchQueryValue?: string;
   searchQueryPlaceholder?: string;
@@ -60,34 +59,18 @@ export type OptionsProps<T extends SelectItem> = {
   options: Array<T>;
   selectOption: (option: T) => void;
   unselectOption: (option: T) => void;
-  modalRef: React.RefObject<HTMLElement>;
+  containerRef: React.RefObject<HTMLElement>;
   Component: React.FC<OptionComponentProps<T>>;
   multiselect?: boolean;
   value: SelectValue<T>;
-  variant: `${SelectOptionVariant}`;
+  emptyMessage?: string;
+  maxHeight?: number;
 };
 
 // SELECT OPTION
 
-export enum SelectOptionVariant {
-  CHECKBOX = 'checkbox',
-  ICON = 'icon',
-  DEFAULT = 'default',
-}
-
 export type OptionComponentProps<T extends SelectItem> = {
   data: T;
   isSelected: boolean;
   multiselect: boolean;
 };
-
-export type SelectOptionProps<T extends SelectItem> = {
-  id: string;
-  selected: boolean;
-  selectOption: (value: T) => void;
-  unselectOption: (value: T) => void;
-  data: T;
-  multiselect: boolean;
-  Component: React.FC<OptionComponentProps<T>>;
-  variant: `${SelectOptionVariant}`;
-};

package/src/components/form/slider/slider.style.ts

@@ -45,12 +45,14 @@ export const SliderStyle = styled.section<SliderStyleProps>`
       &::-webkit-slider-thumb {
         background: ${props => props.theme.colors.primary.main};
         box-shadow: 0 0 0 6px ${props => props.theme.colors.primary.main}88;
+        cursor: grab;
       }
     }
 
     &:active {
       &::-webkit-slider-thumb {
         box-shadow: 0 0 0 12px ${props => props.theme.colors.primary.main}55;
+        cursor: grabbing;
       }
     }
 

package/src/components/icon/icons/social.tsx

@@ -1,6 +1,9 @@
 import { IconT } from '.';
 
-export type SocialIconsT = Record<'codepen' | 'facebook' | 'github' | 'instagram' | 'linkedin' | 'whatsapp', IconT>;
+export type SocialIconsT = Record<
+  'codepen' | 'facebook' | 'github' | 'instagram' | 'linkedin' | 'npm' | 'whatsapp',
+  IconT
+>;
 
 export const SocialIcons: SocialIconsT = {
   codepen: {
@@ -58,6 +61,19 @@ export const SocialIcons: SocialIconsT = {
       </g>
     ),
   },
+  npm: {
+    viewBox: '0 0 32 32',
+    svg: fill => (
+      <g>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M0 9.93333C0 9.41787 0.421379 9 0.941176 9H31.0588C31.5786 9 32 9.41787 32 9.93333V19.3704C32 19.8858 31.5786 20.3037 31.0588 20.3037H15.5722V22.0667C15.5722 22.5821 15.1508 23 14.631 23H9.15508C8.63528 23 8.2139 22.5821 8.2139 22.0667V20.3037H0.941176C0.421379 20.3037 0 19.8858 0 19.3704V9.93333ZM5.9893 18.437V13.9778C5.9893 13.4623 5.56793 13.0444 5.04813 13.0444C4.52833 13.0444 4.10695 13.4623 4.10695 13.9778V18.437H1.88235V10.8667H8.2139V18.437H5.9893ZM10.0963 10.8667L10.0963 21.1333H13.6898V19.3704C13.6898 18.8549 14.1112 18.437 14.631 18.437H17.7968V10.8667H10.0963ZM19.6791 10.8667V18.437H21.9037V13.9778C21.9037 13.4623 22.3251 13.0444 22.8449 13.0444C23.3647 13.0444 23.7861 13.4623 23.7861 13.9778V18.437H26.0107V13.9778C26.0107 13.4623 26.4321 13.0444 26.9519 13.0444C27.4717 13.0444 27.893 13.4623 27.893 13.9778V18.437H30.1176V10.8667H19.6791ZM14.631 13.0444C15.1508 13.0444 15.5722 13.4623 15.5722 13.9778V15.3259C15.5722 15.8414 15.1508 16.2593 14.631 16.2593C14.1112 16.2593 13.6898 15.8414 13.6898 15.3259V13.9778C13.6898 13.4623 14.1112 13.0444 14.631 13.0444Z'
+          fill={fill}
+        />
+      </g>
+    ),
+  },
   whatsapp: {
     viewBox: '0 0 32 32',
     svg: fill => (

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './buttons';
 export * from './cards';
+export * from './cursor';
 export * from './form';
 export * from './icon';
 export * from './image';

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

@@ -6,7 +6,7 @@ import { InfinityScrollFooterStyle } from './infinity-scroll.style';
 
 import { useDebounce, useInView } from '@polpo/hooks';
 
-type InfinityScrollProps<T> = {
+export type InfinityScrollProps<T> = {
   isLoading: boolean;
   hasNextPage: boolean;
   loadMore: () => void;

package/src/components/line/line.stories.tsx

@@ -22,18 +22,17 @@ const meta: Meta<typeof Line> = {
   args: {
     color: 'currentColor',
   },
-  render: (args, { orientation }) => <Line {...args} orientation={orientation} />,
   decorators: [
-    Story => (
+    (Story, { args }) => (
       <Grid ac='start' gtr='auto 1fr auto auto' gap='0.5em' style={{ width: '300px', height: '300px' }}>
         <Typography variant='small' noPadding>
           Vertical
         </Typography>
-        <Story orientation={LineOrientation.VERTICAL} />
+        <Story args={{ ...args, orientation: LineOrientation.VERTICAL }} />
         <Typography variant='small' noPadding>
           Horizontal
         </Typography>
-        <Story orientation={LineOrientation.HORIZONTAL} />
+        <Story args={{ ...args, orientation: LineOrientation.HORIZONTAL }} />
       </Grid>
     ),
   ],

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

@@ -1,21 +1,15 @@
 import { useState } from 'react';
 
-import { Grid } from '../../../layouts';
-import { Button } from '../../buttons';
-import { IconNames } from '../../icon';
-import { Line } from '../../line';
-import { Typography } from '../../typography';
-
 import { ActionModal } from './action-modal';
 
+import { Button, Grid, IconNames, Line, Typography } from '@polpo/ui';
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof ActionModal> = {
   title: 'Modals/ActionModal',
   component: ActionModal,
   argTypes: {
-    isOpen: { control: false },
-    onClose: { control: false },
     actionRequired: { control: 'boolean' },
     icon: { options: [undefined, ...IconNames.toSorted()] },
     noCloseButton: { control: 'boolean' },
@@ -30,51 +24,58 @@ const meta: Meta<typeof ActionModal> = {
     children: 'Action modal content',
   },
   decorators: [
-    Story => {
+    (Story, { args }) => {
       const [isOpen, setIsOpen] = useState(false);
 
       return (
         <>
           <Button onClick={() => setIsOpen(true)}>Open modal</Button>
-          <Story isOpen={isOpen} onClose={() => setIsOpen(false)} />
+          <Story args={{ ...args, isOpen, onClose: () => setIsOpen(false) }} />
         </>
       );
     },
   ],
-  render: (args, { isOpen, onClose }) => {
-    return <ActionModal {...args} isOpen={isOpen} onClose={onClose} />;
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof ActionModal>;
 
-export const Default: Story = {
-  args: {},
-};
-
-export const Confirmation: Story = {
+export const Classic: Story = {
   argTypes: {
     children: { control: false },
   },
   args: {
-    backCard: true,
     lineOnTop: true,
-    icon: 'user',
+    noPadding: true,
   },
-  render: (args, { isOpen, onClose }) => {
+  render: args => {
     return (
-      <ActionModal {...args} isOpen={isOpen} onClose={onClose}>
-        <Typography variant='header4' align='center' noPadding>
+      <ActionModal {...args}>
+        <Typography variant='header4' noPadding style={{ padding: '0 1rem' }}>
           Action modal
         </Typography>
-        <Typography>Are you sure want to execute an action?</Typography>
-        <Grid ai='center' gtc='repeat(2, minmax(100px, 1fr))' jc='center' gap='1em' style={{ margin: 'auto' }}>
+        <Line />
+        <Grid gap='1em' style={{ padding: '0 1rem 1rem' }}>
+          <Typography>Are you sure want to execute an action?</Typography>
+        </Grid>
+        <Grid
+          ai='center'
+          columnSize='80px'
+          ji='center'
+          flow='column'
+          jc='end'
+          gap='1em'
+          style={{ padding: '0 1rem 1rem' }}
+        >
           <ActionModal.ActionButton
             size='small'
             width='full'
             variant='ghost'
-            onClick={() => alert('Action button clicked')}
+            onClick={() =>
+              new Promise(resolve => {
+                setTimeout(resolve, 2000);
+              })
+            }
           >
             No
           </ActionModal.ActionButton>
@@ -82,7 +83,11 @@ export const Confirmation: Story = {
             size='small'
             width='full'
             color='primary'
-            onClick={() => alert('Action button clicked')}
+            onClick={() =>
+              new Promise(resolve => {
+                setTimeout(resolve, 2000);
+              })
+            }
           >
             Yes
           </ActionModal.ActionButton>
@@ -92,30 +97,40 @@ export const Confirmation: Story = {
   },
 };
 
-export const Classic: Story = {
+export const Confirmation: Story = {
   argTypes: {
     children: { control: false },
   },
   args: {
+    backCard: true,
     lineOnTop: true,
-    noPadding: true,
+    icon: 'user',
   },
-  render: (args, { isOpen, onClose }) => {
+  render: args => {
     return (
-      <ActionModal {...args} isOpen={isOpen} onClose={onClose}>
-        <Typography variant='header4' noPadding style={{ padding: '0 1rem' }}>
+      <ActionModal {...args}>
+        <Typography variant='header4' align='center' noPadding>
           Action modal
         </Typography>
-        <Line />
-        <Grid gap='1em' style={{ padding: '0 1rem 1rem' }}>
-          <Typography>Are you sure want to execute an action?</Typography>
-        </Grid>
-        <Grid ai='center' gtc='repeat(2, 80px)' jc='end' gap='1em' style={{ padding: '0 1rem 1rem' }}>
+        <Typography>Are you sure want to execute an action?</Typography>
+        <Grid
+          ai='center'
+          columnSize='minmax(100px, 1fr)'
+          ji='center'
+          flow='column'
+          jc='center'
+          gap='1em'
+          style={{ margin: 'auto' }}
+        >
           <ActionModal.ActionButton
             size='small'
             width='full'
             variant='ghost'
-            onClick={() => alert('Action button clicked')}
+            onClick={() =>
+              new Promise(resolve => {
+                setTimeout(resolve, 2000);
+              })
+            }
           >
             No
           </ActionModal.ActionButton>
@@ -123,7 +138,11 @@ export const Classic: Story = {
             size='small'
             width='full'
             color='primary'
-            onClick={() => alert('Action button clicked')}
+            onClick={() =>
+              new Promise(resolve => {
+                setTimeout(resolve, 2000);
+              })
+            }
           >
             Yes
           </ActionModal.ActionButton>

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

@@ -1,23 +1,14 @@
 import { styled } from 'styled-components';
 
-export const ActionModalContainerStyle = styled.section`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 10000;
+import { Modal } from '../modal';
 
-  .open-animation {
-    animation: bounceIn 500ms ease;
-    position: relative;
-  }
-
-  .close-animation {
-    animation: bounceOut 500ms ease;
-  }
+export const ModalStyle = styled(Modal)`
+  background: transparent;
 
-  .shake-animation {
-    animation: headShake 600ms linear;
+  .modal-content {
+    &.shake-animation {
+      animation: headShake 600ms linear;
+    }
   }
 `;
 
@@ -25,6 +16,7 @@ export const ActionModalStyle = styled.section`
   position: relative;
 
   .action-modal-body {
+    box-shadow: 0 0 10px -5px;
     border-radius: 10px;
     overflow: hidden;
     display: grid;
@@ -85,22 +77,18 @@ export const ActionModalStyle = styled.section`
   }
 
   .close-modal-button {
-    width: 2em;
-    height: 2em;
+    width: 1em;
+    height: 1em;
     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};
+    top: 10px;
+    right: 5px;
+    font-size: ${props => props.theme.constants.typography.header3.fontSize};
     opacity: 0;
     transition: opacity 300ms ease;
     z-index: 1;
-    transform: translate(-50%, 50%);
   }
 
   &.line-on-top {

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

@@ -3,42 +3,45 @@ 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 { ModalProps } from '../modal';
 
-import { ActionModalContainerStyle, ActionModalStyle } from './action-modal.style';
+import { ModalStyle, ActionModalStyle } from './action-modal.style';
 
+import { PositionContainer } from '@polpo/helpers';
 import { useClassNames } from '@polpo/hooks';
 
-export type ActionModalProps = {
-  children: React.ReactNode;
-  isOpen: boolean;
+type ActionModalContextType = {
   onClose: () => void;
-  actionRequired?: boolean;
-  icon?: IconNameT;
-  noCloseButton?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  lineOnTop?: boolean;
-  backCard?: boolean;
-  noPadding?: boolean;
+  isActionInProgress: boolean;
+  setIsActionInProgress: (isActionInProgress: boolean) => void;
 };
 
-type ActionModalContextEntity = {
-  onClose: () => void;
-};
-
-const ActionModalContext = createContext<ActionModalContextEntity | null>(null);
+const ActionModalContext = createContext<ActionModalContextType | null>(null);
 
-const useActionModal = () => {
+const useActionModalContext = () => {
   const context = useContext(ActionModalContext);
 
-  if (context === null) {
-    throw new Error('useActionModal must be used with in a ActionModal');
+  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,
@@ -46,25 +49,17 @@ export const ActionModal = ({
   actionRequired,
   icon,
   noCloseButton,
-  className = '',
-  style = {},
   lineOnTop = false,
   backCard = false,
   noPadding = false,
+  className = '',
+  style = {},
+  ...modalProps
 }: ActionModalProps) => {
+  const [isActionInProgress, setIsActionInProgress] = useState(false);
   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');
@@ -77,43 +72,39 @@ export const ActionModal = ({
     '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>
+    <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>
-            </ActionModalStyle>
-          </section>
-        </ActionModalContainerStyle>
-      </ActionModalContext.Provider>
-    </Modal>
+            </section>
+          </ActionModalStyle>
+        </section>
+      </ModalStyle>
+    </ActionModalContext.Provider>
   );
 };
 
@@ -122,23 +113,30 @@ type ActionButtonProps = Omit<ButtonProps, 'onClick'> & {
 };
 
 const ActionButton = ({ onClick, children, isLoading: manualIsLoading, ...buttonProps }: ActionButtonProps) => {
-  const { onClose } = useActionModal();
+  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]);
+  }, [onClick, onClose, setIsActionInProgress]);
+
+  if (!isLoading && isActionInProgress) {
+    return null;
+  }
 
   return (
     <Button {...buttonProps} onClick={handleAction} isLoading={manualIsLoading || isLoading}>

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

@@ -1,10 +1,9 @@
 import { useState } from 'react';
 
-import { Button } from '../../buttons';
-import { Image } from '../../image';
-import { Typography } from '../../typography';
+import { AsideModal } from './aside-modal';
 
-import { AsideModal, AsidePosition } from './aside-modal';
+import { PositionContainer } from '@polpo/helpers';
+import { Button, Image, Typography } from '@polpo/ui';
 
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -12,30 +11,27 @@ 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) },
+    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 },
-    zIndex: { control: false },
   },
   decorators: [
-    Story => {
+    (Story, { args }) => {
       const [isOpen, setIsOpen] = useState(false);
 
       return (
         <>
           <Button onClick={() => setIsOpen(true)}>Open modal</Button>
-          <Story isOpen={isOpen} onClose={() => setIsOpen(false)} />
+          <Story args={{ ...args, isOpen, onClose: () => setIsOpen(false) }} />
         </>
       );
     },
   ],
-  render: (args, { isOpen, onClose }) => {
-    return <AsideModal {...args} isOpen={isOpen} onClose={onClose} />;
-  },
 };
 
 export default meta;
@@ -48,9 +44,9 @@ export const Aside: Story = {
   args: {
     size: 500,
   },
-  render: (args, { isOpen, onClose }) => {
+  render: args => {
     return (
-      <AsideModal {...args} isOpen={isOpen} onClose={onClose}>
+      <AsideModal {...args}>
         <Typography variant='header4'>Aside modal</Typography>
         <Typography>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet at cupiditate dolorum eaque eligendi