polpo 0.1.7 → 0.1.9

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

@@ -1,79 +0,0 @@
-import { Button } from '../../buttons';
-import { ModalBackdrop } from '../modal';
-
-import { Menu } from './menu';
-
-import { PositionContainer } from '@polpo/helpers';
-import { useModal } from '@polpo/hooks';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Menu> = {
-  title: 'Modals/Menu',
-  component: Menu,
-  argTypes: {
-    closeOnClickOutside: { control: 'boolean' },
-    transitionDuration: { control: false },
-    windowOffset: { control: { type: 'range', min: 0, max: 100 } },
-    position: { control: 'inline-radio', options: Object.values(PositionContainer) },
-    offset: { control: { type: 'range', min: 0, max: 100 } },
-  },
-  args: {
-    offset: 5,
-    windowOffset: 10,
-    children: 'Menu content',
-    position: PositionContainer.BOTTOM_RIGHT,
-    backdrop: ModalBackdrop.TRANSPARENT,
-  },
-  decorators: [
-    (Story, { args }) => {
-      const { openModal, closeModal, isOpen, containerRef } = useModal<HTMLButtonElement>();
-
-      return (
-        <>
-          <Button width='full' leftIcon={isOpen ? 'door-open' : 'door-closed'} ref={containerRef} onClick={openModal}>
-            Menu
-          </Button>
-          <Story
-            args={{
-              ...args,
-              isOpen,
-              offset: 10,
-              style: { height: 300, minWidth: 200 },
-              onClose: closeModal,
-              containerRef,
-              children: (
-                <>
-                  <Menu.GroupLabel>Checkbox</Menu.GroupLabel>
-                  <Menu.Option asCheckbox icon='house' disabled label='Option 1' />
-                  <Menu.Option asCheckbox icon='magnifying-glass' selected label='Option 2' />
-                  <Menu.Option asCheckbox icon='document' label='Option 3' />
-                  <Menu.Option asCheckbox icon='spinner' disabled selected label='Option 4' />
-                  <Menu.Divider />
-                  <Menu.GroupLabel>Options disabled</Menu.GroupLabel>
-                  <Menu.Option icon='instagram' label='Option 5' />
-                  <Menu.Option icon='airplane' disabled label='Option 6' />
-                  <Menu.Option icon='whatsapp' disabled selected label='Option 7' />
-                  <Menu.Option icon='order-list' label='Option 8' />
-                  <Menu.Divider />
-                  <Menu.GroupLabel>Options</Menu.GroupLabel>
-                  <Menu.Option icon='thinking' label='Option 9' />
-                  <Menu.Option icon='game-control' label='Option 10' />
-                  <Menu.Option icon='bicycle' selected label='Option 11' />
-                  <Menu.Option icon='link' label='Option 12' />
-                </>
-              ),
-            }}
-          />
-        </>
-      );
-    },
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Menu>;
-
-export const Default: Story = {
-  args: {},
-};

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

@@ -1,103 +0,0 @@
-import styled from 'styled-components';
-
-import { Modal } from '../modal';
-
-export const MenuModalStyle = styled(Modal)`
-  border-radius: 0.5em;
-  border: 1px solid ${props => props.theme.colors.border.main};
-  background: ${props => props.theme.colors.background.main};
-  box-shadow: 0 0 25px ${props => props.theme.colors.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: ${props => props.theme.colors.border.main};
-  }
-`;
-
-export const LabelStyle = styled.li`
-  background: ${props => props.theme.colors.background.light};
-  color: ${props => props.theme.colors.text.light};
-  font-weight: lighter;
-  padding: 0.5em 1.2em;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  pointer-events: none;
-`;
-
-export const OptionStyle = styled.li`
-  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: ${props => props.theme.colors.text.main}55;
-  }
-
-  &: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: ${props => props.theme.colors.background.paper}44;
-  }
-
-  &.is-selected {
-    background: ${props => props.theme.colors.background.paper};
-
-    &:focus,
-    &:hover {
-      background: ${props => props.theme.colors.background.paper}AA;
-    }
-  }
-`;
-
-export const GroupStyle = styled.li`
-  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/menu/menu.tsx

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

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

@@ -1,70 +0,0 @@
-import React, { useMemo } from 'react';
-import { useTheme } from 'styled-components';
-
-import { BackdropStyle } from './modal.style';
-
-import { ModalState, useClassNames } from '@polpo/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 theme = useTheme();
-  const backdropClassName = useClassNames({
-    'backdrop-close': modalState === ModalState.CLOSING || modalState === ModalState.CLOSED,
-  });
-
-  const backgroundStyles = useMemo(() => {
-    const backdropStyles = {
-      [ModalBackdrop.OPAQUE]: {
-        background: `${theme.colors.background.paper}${(opacity * 255)?.toString(16)}`,
-      },
-      [ModalBackdrop.TRANSPARENT]: {
-        background: 'transparent',
-      },
-      [ModalBackdrop.BLUR]: {
-        background: `${theme.colors.background.paper}${(opacity * 255)?.toString(16)}`,
-        backdropFilter: 'blur(5px)',
-      },
-      [ModalBackdrop.NONE]: {
-        display: 'none',
-      },
-    };
-
-    return backdropStyles[backdrop] ?? {};
-  }, [backdrop, theme.colors.background.paper, opacity]);
-
-  if (backdrop === ModalBackdrop.NONE) {
-    return null;
-  }
-
-  return (
-    <BackdropStyle
-      tabIndex={-1}
-      onClick={backdropOnClick}
-      className={backdropClassName}
-      style={{
-        zIndex,
-        ...backgroundStyles,
-      }}
-    />
-  );
-};

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

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