@addev-be/ui 0.2.2 → 0.2.6

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

@@ -1,110 +1,110 @@
-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;
-  }
-`;
+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 +1,3 @@
-export * from './Dropdown';
-export * from './Modal';
-export * from './Loading';
+export * from './Dropdown';
+export * from './Modal';
+export * from './Loading';

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

@@ -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

@@ -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/numbers.ts

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

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,7 @@
-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 './services';

package/src/providers/PortalsProvider/index.tsx

@@ -1,54 +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>
-  );
-};
+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

@@ -1,27 +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',
-})``;
+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',
+})``;