@addev-be/ui 0.2.16 → 0.2.18

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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,26 @@
+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

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

package/src/hooks/useElementSize.ts

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,20 @@
+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

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

package/src/providers/PortalsProvider/index.tsx

@@ -0,0 +1,54 @@
+import * as styles from './styles';
+
+import {
+  FC,
+  PropsWithChildren,
+  ReactNode,
+  ReactPortal,
+  createContext,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { createPortal } from 'react-dom';
+
+export type PortalProps = {
+  key: string;
+  children: ReactNode;
+};
+
+export type PortalsContextType = {
+  createPortal: (children: ReactNode) => ReactPortal | null;
+};
+
+export const PortalsContext = createContext<PortalsContextType>({
+  createPortal: () => null,
+});
+
+export const PortalsProvider: FC<PropsWithChildren> = ({ children }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const createLocalPortal = useCallback(
+    (children: ReactNode) =>
+      createPortal(
+        <styles.PortalContainer>{children}</styles.PortalContainer>,
+        containerRef.current!
+      ) ?? null,
+    []
+  );
+
+  const value = useMemo(
+    () => ({
+      createPortal: createLocalPortal,
+    }),
+    [createLocalPortal]
+  );
+
+  return (
+    <PortalsContext.Provider value={value}>
+      {children}
+      <styles.PortalsWrapper ref={containerRef} />
+    </PortalsContext.Provider>
+  );
+};

package/src/providers/PortalsProvider/styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const BackdropContainer = styled.div.attrs({
+  className: 'BackdropContainer',
+})`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const PortalsWrapper = styled.div.attrs({
+  className: 'PortalsWrapper',
+})`
+  width: 0;
+  height: 0;
+`;
+
+export const PortalContainer = styled.div.attrs({
+  className: 'PortalContainer',
+})``;

package/src/providers/SettingsProvider/index.tsx

@@ -0,0 +1,70 @@
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+export type Settings = Record<string, string | undefined>;
+
+export type SettingsContextProps = {
+  settings: Settings;
+  updateSettings: (partialSettings: Settings) => void;
+};
+
+export const SettingsContext = createContext<SettingsContextProps>({
+  settings: {},
+  updateSettings: () => {},
+});
+
+export const SettingsProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [settings, setSettings] = useState({});
+  const getSettings = useCallback(() => {
+    try {
+      const settingsJson = localStorage.getItem('settings');
+      return settingsJson ? JSON.parse(settingsJson) : {};
+    } catch (error) {
+      console.warn('Settings load error', error);
+      return {};
+    }
+  }, []);
+
+  const saveSettings = useCallback((settingsToSave: Settings) => {
+    try {
+      localStorage.setItem('settings', JSON.stringify(settingsToSave));
+    } catch (error) {
+      console.error('Settings save error', error);
+    }
+  }, []);
+
+  const updateSettings = useCallback(
+    (partialSettings: Settings) => {
+      const newSettings = {
+        ...settings,
+        ...partialSettings,
+      };
+      setSettings(newSettings);
+      saveSettings(newSettings);
+    },
+    [saveSettings, settings]
+  );
+
+  useEffect(() => {
+    const readSettings = getSettings();
+    setSettings(readSettings);
+  }, [getSettings]);
+
+  const contextValue = useMemo(
+    () => ({ settings, updateSettings }),
+    [settings, updateSettings]
+  );
+
+  return (
+    <SettingsContext.Provider value={contextValue}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};

package/src/providers/ThemeProvider/ThemeProvider.ts

@@ -0,0 +1,55 @@
+import { Theme } from './types';
+import { defaultTheme } from './defaultTheme';
+import styled from 'styled-components';
+
+type ThemeProviderProps = {
+  $theme?: Theme;
+  $darkMode?: boolean;
+};
+
+const getThemeValuesCss = (
+  prefix: string,
+  obj: Record<string, string> | undefined
+) => {
+  return Object.entries(obj ?? {})
+    .map(([key, value]) => {
+      return `--${prefix}-${key}: ${value};`;
+    })
+    .join('');
+};
+
+const getThemeColorsCss = (colors: Theme['colors'], darkMode = false) => {
+  return Object.entries(colors ?? {})
+    .map(([color, intensities]) =>
+      Object.entries(
+        (typeof intensities === 'string'
+          ? (colors ?? {})[intensities] ??
+            (defaultTheme.colors ?? {})[intensities]
+          : intensities) ?? {}
+      )
+        .map(
+          ([intensity, value]) =>
+            `--color-${color}-${
+              darkMode ? 1000 - Number(intensity) : intensity
+            }: ${value};`
+        )
+        .join('')
+    )
+    .join('');
+};
+
+export const ThemeProvider = styled.div<ThemeProviderProps>`
+  display: contents;
+  ${({ $theme = {}, $darkMode }) => {
+    return [
+      getThemeColorsCss($theme.colors, $darkMode),
+      getThemeValuesCss('font', $theme.fonts),
+      getThemeValuesCss('text', $theme.texts),
+      getThemeValuesCss('weight', $theme.weights),
+      getThemeValuesCss('space', $theme.spaces),
+      getThemeValuesCss('size', $theme.sizes),
+      getThemeValuesCss('rounded', $theme.rounded),
+      getThemeValuesCss('shadow', $theme.shadows),
+    ].join('');
+  }}
+`;