@addev-be/ui 0.3.2 → 0.3.5

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

@@ -1,119 +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;
-`;
+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 +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>;
+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 +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) : '';
-};
+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 +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;
-};
+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/index.ts

@@ -0,0 +1,2 @@
+export * from './dates';
+export * from './numbers';

package/src/helpers/numbers.ts

@@ -1,26 +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);
+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 +1,2 @@
-export * from './useElementSize';
-export * from './useWindowSize';
+export * from './useElementSize';
+export * from './useWindowSize';

package/src/hooks/useElementSize.ts

@@ -1,24 +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;
-};
+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 +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;
-};
+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 +1,8 @@
-export * from './components';
-export * from './providers';
-
-export * from './Icons';
-
-export * from './config';
-export * from './services';
+export * from './components';
+export * from './providers';
+
+export * from './Icons';
+
+export * from './config';
+export * from './helpers';
+export * from './services';