@addev-be/ui 0.2.13 → 0.2.15

package/src/components/layout/Dropdown/index.tsx

@@ -1,79 +0,0 @@
-import * as styles from './styles';
-
-import { CSSProperties, FC, PropsWithChildren, useMemo } from 'react';
-
-import { usePortals } from '../../../providers';
-
-type DropdownProps = PropsWithChildren<
-  styles.DropdownContainerProps & {
-    $sourceRect: DOMRect;
-    $autoPositionX?: boolean;
-    $autoPositionY?: boolean;
-    onClose?: () => void;
-    style?: CSSProperties;
-  }
->;
-
-const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
-  const minHeight = Array.isArray(dropdown.$height)
-    ? dropdown.$height[0]
-    : dropdown.$height;
-  const maxHeight = Array.isArray(dropdown.$height)
-    ? dropdown.$height[1]
-    : dropdown.$height;
-  const bottomSpace = document.body.scrollHeight - dropdown.$sourceRect.bottom;
-  const topSpace = dropdown.$sourceRect.top;
-  const isDropdownBelow =
-    !dropdown.$autoPositionY ||
-    bottomSpace > topSpace ||
-    bottomSpace >= minHeight;
-  const height = Math.max(
-    Math.min(maxHeight, isDropdownBelow ? bottomSpace : topSpace),
-    minHeight
-  );
-
-  const rightSpace = document.body.scrollWidth - dropdown.$sourceRect.right;
-  const leftSpace = dropdown.$sourceRect.left;
-  const isDropdownRight =
-    !dropdown.$autoPositionX ||
-    rightSpace > leftSpace ||
-    rightSpace >= dropdown.$width;
-
-  const dropdownStyle: CSSProperties = {
-    ...(isDropdownBelow
-      ? { top: topSpace + dropdown.$sourceRect.height }
-      : { bottom: bottomSpace + dropdown.$sourceRect.height }),
-    ...(isDropdownRight ? { left: leftSpace } : { right: rightSpace }),
-    width: dropdown.$width,
-    height,
-    minHeight,
-    maxHeight,
-    boxSizing: 'border-box',
-    ...dropdown.style,
-  };
-  return dropdownStyle;
-};
-
-export const Dropdown: FC<DropdownProps> = ({
-  children,
-  onClose,
-  ...props
-}) => {
-  const { createPortal } = usePortals();
-
-  const style = useMemo(() => getDropdownStyle(props), [props]);
-
-  const modalPortal = useMemo(
-    () =>
-      createPortal(
-        <styles.DropdownBackdrop onClick={onClose}>
-          <styles.DropdownContainer {...props} style={style}>
-            {children}
-          </styles.DropdownContainer>
-        </styles.DropdownBackdrop>
-      ),
-    [children, createPortal, onClose, props, style]
-  );
-
-  return <>{modalPortal}</>;
-};

package/src/components/layout/Dropdown/styles.ts

@@ -1,44 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const DropdownBackdrop = styled.div.attrs({
-  className: 'DropdownBackdrop',
-})`
-  position: absolute;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export type DropdownContainerProps = {
-  $width: number;
-  $height: number | number[];
-  $zIndex?: number;
-};
-
-export const DropdownContainer = styled.div.attrs({
-  className: 'DropdownContainer',
-})<DropdownContainerProps>`
-  background: var(--color-neutral-0);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-lg);
-  outline: 1px solid var(--color-neutral-200);
-
-  position: absolute;
-  z-index: 1001;
-  ${({ $width }) => ($width ? `${$width}px` : 'auto')};
-  ${({ $height }) =>
-    Array.isArray($height)
-      ? css`
-          min-height: ${$height[0]}px;
-          max-height: ${$height[1]}px;
-        `
-      : css`
-          height: ${$height ? `${$height}px` : 'auto'};
-        `}
-`;

package/src/components/layout/Loading/index.tsx

@@ -1,29 +0,0 @@
-import * as styles from './styles';
-
-import { FC, PropsWithChildren, useMemo } from 'react';
-
-import { LoadingIcon } from '../../../Icons';
-import { usePortals } from '../../../providers';
-
-type LoadingProps = PropsWithChildren<{
-  visible?: boolean;
-}>;
-
-export const Loading: FC<LoadingProps> = ({ visible, children }) => {
-  const { createPortal } = usePortals();
-  const loadingPortal = useMemo(
-    () =>
-      visible
-        ? createPortal(
-            <styles.LoadingBackdrop>
-              <LoadingIcon />
-              <styles.LoadingContainer>
-                {children || 'Loading ...'}
-              </styles.LoadingContainer>
-            </styles.LoadingBackdrop>
-          )
-        : null,
-    [children, createPortal, visible]
-  );
-  return <>{loadingPortal}</>;
-};

package/src/components/layout/Loading/styles.ts

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-
-export const LoadingContainer = styled.div.attrs({
-  className: 'LoadingContent',
-})`
-  padding: var(--space-4);
-`;
-
-export const LoadingBackdrop = styled.div.attrs({
-  className: 'LoadingBackdrop',
-})`
-  position: fixed;
-  z-index: 1100;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: var(--color-gray-50);
-  fill: var(--color-gray-50);
-  & > svg {
-    width: var(--space-8);
-    height: var(--space-8);
-  }
-`;

package/src/components/layout/Modal/index.tsx

@@ -1,51 +0,0 @@
-import * as styles from './styles';
-
-import { FC, PropsWithChildren, useMemo } from 'react';
-
-import { usePortals } from '../../../providers';
-
-type ModalProps = PropsWithChildren<
-  styles.ModalContainerProps & {
-    closeOnBackdropClick?: boolean;
-    onClose?: () => void;
-  }
->;
-
-type ModalFC = FC<ModalProps> & {
-  Header: typeof styles.ModalHeader;
-  Message: typeof styles.ModalMessage;
-  Content: typeof styles.ModalContent;
-  ContentWithIcon: typeof styles.ModalContentWithIcon;
-  Footer: typeof styles.ModalFooter;
-  Buttons: typeof styles.ModalButtons;
-};
-
-export const Modal: ModalFC = ({
-  children,
-  closeOnBackdropClick,
-  onClose,
-  ...props
-}) => {
-  const { createPortal } = usePortals();
-
-  const modalPortal = useMemo(
-    () =>
-      createPortal(
-        <styles.ModalBackdrop
-          onClick={closeOnBackdropClick ? onClose : undefined}
-        >
-          <styles.ModalContainer {...props}>{children}</styles.ModalContainer>
-        </styles.ModalBackdrop>
-      ),
-    [children, closeOnBackdropClick, createPortal, onClose, props]
-  );
-
-  return <>{modalPortal}</>;
-};
-
-Modal.Header = styles.ModalHeader;
-Modal.Message = styles.ModalMessage;
-Modal.Content = styles.ModalContent;
-Modal.ContentWithIcon = styles.ModalContentWithIcon;
-Modal.Footer = styles.ModalFooter;
-Modal.Buttons = styles.ModalButtons;

package/src/components/layout/Modal/styles.ts

@@ -1,110 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const ModalBackdrop = styled.div.attrs({
-  className: 'ModalBackdrop',
-})`
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export type ModalContainerProps = {
-  $width?: number;
-  $height?: number;
-  $zIndex?: number;
-  $fullscreen?: boolean;
-};
-
-export const ModalContainer = styled.div.attrs({
-  className: 'ModalContainer',
-})<ModalContainerProps>`
-  background: var(--color-neutral-100);
-  border-radius: var(--rounded-lg);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  max-height: 100vh;
-  overflow: hidden;
-
-  position: fixed;
-  z-index: 1001;
-  ${({ $fullscreen, $width, $height }) =>
-    $fullscreen
-      ? css`
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          margin: var(--space-4);
-        `
-      : css`
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: ${$width ? `${$width}px` : 'auto'};
-          height: ${$height ? `${$height}px` : 'auto'};
-        `}
-`;
-
-export const ModalHeader = styled.div.attrs({ className: 'ModalHeader' })`
-  font-weight: bold;
-  font-size: var(--text-lg);
-  padding: var(--space-2);
-  background-color: var(--color-neutral-200);
-  padding: var(--space-4);
-`;
-
-export const ModalMessage = styled.p.attrs({ className: 'ModalMessage' })`
-  margin-bottom: 1rem;
-`;
-
-export const ModalContent = styled.div.attrs({ className: 'ModalContent' })`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-  padding: var(--space-4);
-`;
-
-export const ModalContentWithIcon = styled.div.attrs({
-  className: 'ModalContentWithIcon',
-})`
-  display: flex;
-  flex-direction: row;
-  padding: var(--space-4);
-  gap: var(--space-2);
-
-  & > svg {
-    margin: var(--space-2);
-    width: var(--space-8);
-    height: var(--space-8);
-  }
-`;
-
-export const ModalFooter = styled.div.attrs({ className: 'ModalFooter' })`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: var(--space-2);
-  background-color: var(--color-neutral-200);
-  padding: var(--space-4);
-`;
-
-export const ModalButtons = styled(ModalFooter).attrs({
-  className: 'ModalButtons',
-})`
-  display: flex;
-  flex-direction: row;
-  gap: var(--space-2);
-
-  button.right:first-of-type {
-    margin-left: auto;
-  }
-`;

package/src/components/layout/index.ts

@@ -1,3 +0,0 @@
-export * from './Dropdown';
-export * from './Modal';
-export * from './Loading';

package/src/components/ui/ContextMenu/index.tsx

@@ -1,79 +0,0 @@
-import { Divider, MenuContainer, MenuItemContainer, SubMenu } from './styles';
-import {
-  FC,
-  HTMLAttributes,
-  PropsWithChildren,
-  useCallback,
-  useRef,
-  useState,
-} from 'react';
-
-type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
-  Item: typeof MenuItemContainer;
-  ParentItem: typeof ParentMenuItem;
-  Divider: typeof Divider;
-  SubMenu: typeof SubMenu;
-};
-
-export const ContextMenu: ContextMenuFC = ({ children }) => {
-  return (
-    <MenuContainer onClick={(e) => e.stopPropagation()}>
-      {children}
-    </MenuContainer>
-  );
-};
-
-export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  ...props
-}) => {
-  const [isOpened, setIsOpened] = useState(false);
-  const [isSubMenuLeft, setIsSubMenuLeft] = useState(false);
-  const [currentTimeout, setCurrentTimeout] = useState<number | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const stopTimeout = useCallback(() => {
-    if (currentTimeout) {
-      clearTimeout(currentTimeout);
-    }
-    setCurrentTimeout(null);
-  }, [currentTimeout]);
-
-  const startTimeout = useCallback(
-    (open: boolean) => {
-      stopTimeout();
-      setCurrentTimeout(
-        window.setTimeout(
-          () => {
-            const rect = containerRef.current?.getBoundingClientRect();
-            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
-            setIsOpened(open);
-          },
-          open ? 100 : 300
-        )
-      );
-    },
-    [stopTimeout]
-  );
-
-  const open = useCallback(() => startTimeout(true), [startTimeout]);
-  const close = useCallback(() => startTimeout(false), [startTimeout]);
-
-  return (
-    <MenuItemContainer
-      ref={containerRef}
-      {...props}
-      className={`${isOpened ? 'opened' : ''} ${isSubMenuLeft ? 'left' : ''}`}
-      onMouseEnter={open}
-      onMouseLeave={close}
-      $withArrow
-    >
-      {children}
-    </MenuItemContainer>
-  );
-};
-
-ContextMenu.Item = MenuItemContainer;
-ContextMenu.ParentItem = ParentMenuItem;
-ContextMenu.Divider = Divider;
-ContextMenu.SubMenu = SubMenu;

package/src/components/ui/ContextMenu/styles.ts

@@ -1,119 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../providers/ThemeProvider/types';
-
-const menuContainerCss = css`
-  position: absolute;
-  color: var(--color-neutral-900);
-  border-radius: var(--rounded-md);
-  padding: var(--space-1) 0;
-  box-shadow: var(--shadow-lg);
-  background-color: var(--color-neutral-100);
-  min-width: 20em;
-  outline: 1px solid var(--color-neutral-200);
-  display: flex;
-  flex-direction: column;
-`;
-
-export const MenuContainer = styled.div.attrs({
-  className: 'MenuContainer',
-})`
-  ${menuContainerCss}
-  inset: 0;
-`;
-MenuContainer.displayName = 'MenuContainer';
-
-export const SubMenu = styled.div.attrs({
-  className: 'SubMenu',
-})`
-  ${menuContainerCss}
-  top: 0;
-  left: 100%;
-  margin-top: -var(--space-1);
-`;
-SubMenu.displayName = 'SubMenu';
-
-export const MenuItemContainer = styled.div.attrs({
-  className: 'MenuItemContainer',
-})<{
-  $color?: ThemeColor;
-  disabled?: boolean;
-  $withArrow?: boolean;
-  $opened?: boolean;
-}>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-family: var(--font-sans);
-  font-weight: normal;
-  text-align: left;
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--text-base);
-  line-height: var(--leading-6);
-  border: none;
-  cursor: pointer;
-
-  ${({ $withArrow }) =>
-    $withArrow &&
-    css`
-      &::after {
-        content: '';
-        position: absolute;
-        right: var(--space-2);
-        top: 50%;
-        transform: translateY(-50%);
-        border: 4px solid transparent;
-        border-left-color: var(--color-neutral-600);
-      }
-    `}
-
-  ${({ $color, disabled }) =>
-    disabled
-      ? css`
-          color: var(--color-neutral-300);
-          background-color: var(--color-neutral-100);
-          cursor: default;
-        `
-      : $color
-      ? css`
-          color: var(--color-${$color}-600);
-          background-color: var(--color-neutral-100);
-          &:hover {
-            background-color: var(--color-${$color}-200);
-          }
-        `
-      : css`
-          color: var(--color-neutral-900);
-          background-color: var(--color-neutral-100);
-          &:hover {
-            background-color: var(--color-neutral-200);
-          }
-        `}
-
-  svg {
-    fill: currentColor;
-    width: var(--space-4);
-    height: var(--space-4);
-    margin-right: var(--space-2);
-  }
-
-  & > ${SubMenu} {
-    display: none;
-    margin-top: calc(0px - var(--space-1));
-  }
-  &.opened > ${SubMenu} {
-    display: block;
-  }
-  &.opened.left > ${SubMenu} {
-    left: auto;
-    right: 100%;
-  }
-`;
-MenuItemContainer.displayName = 'MenuItemContainer';
-
-export const Divider = styled.div.attrs({
-  className: 'Divider',
-})`
-  border-top: 1px solid var(--color-neutral-200);
-  margin: var(--space-1) 0;
-`;

package/src/config/index.ts

@@ -1,14 +0,0 @@
-export type EnvType = 'dev' | 'test' | 'staging' | 'prod';
-
-export type Config = {
-  webSocketUrl: string;
-  httpServerUrl: `${string}/`;
-};
-
-type DeepPartial<T> = T extends object
-  ? {
-      [P in keyof T]?: DeepPartial<T[P]>;
-    }
-  : T;
-
-export type PartialConfig = DeepPartial<Config>;

package/src/helpers/dates.ts

@@ -1,9 +0,0 @@
-import moment from 'moment';
-
-export const formatDate = (
-  date: moment.MomentInput,
-  format: string = 'DD/MM/YYYY'
-): string => {
-  const m = moment.utc(date);
-  return m.isValid() ? m.format(format) : '';
-};

package/src/helpers/getScrollbarSize.ts

@@ -1,14 +0,0 @@
-let scrollBarSize: number[] | undefined = undefined;
-
-export const getScrollBarSize = () => {
-  if (!scrollBarSize) {
-    const el = document.createElement('div');
-    el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
-    document.body.appendChild(el);
-    const width = el.offsetWidth - el.clientWidth;
-    const height = el.offsetHeight - el.clientHeight;
-    el.remove();
-    scrollBarSize = [width, height];
-  }
-  return scrollBarSize;
-};

package/src/helpers/numbers.ts

@@ -1,26 +0,0 @@
-export const formatMoney = (number: number, decimals = 2, currency = 'EUR') =>
-  new Intl.NumberFormat(navigator.language, {
-    style: 'currency',
-    currency,
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(number);
-
-export const formatPercentage = (number: number, decimals = 2) =>
-  new Intl.NumberFormat(navigator.language, {
-    style: 'percent',
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(number);
-
-export const formatNumber = (number: number, decimals = 2) =>
-  new Intl.NumberFormat(navigator.language, {
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(number);
-
-export const formatNumberInvariant = (number: number, decimals = 2) =>
-  new Intl.NumberFormat('es-US', {
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-  }).format(number);

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from './useElementSize';
-export * from './useWindowSize';

package/src/hooks/useElementSize.ts

@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useElementSize = (element: HTMLElement | null) => {
-  const [size, setSize] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    if (!element) {
-      return;
-    }
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      const { width, height } = entry.contentRect;
-      setSize({ width, height });
-    });
-
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [element]);
-
-  return size;
-};

package/src/hooks/useWindowSize.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useWindowSize = () => {
-  const [size, setSize] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    const handleResize = () => {
-      setSize({ width: window.outerWidth, height: window.outerHeight });
-    };
-
-    window.addEventListener('resize', handleResize);
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  return size;
-};

package/src/index.ts

@@ -1,7 +0,0 @@
-export * from './components';
-export * from './providers';
-
-export * from './Icons';
-
-export * from './config';
-export * from './services';