@addev-be/ui 0.1.18

package/src/components/forms/IndeterminateCheckbox.tsx

@@ -0,0 +1,46 @@
+import {
+  ChangeEvent,
+  FC,
+  InputHTMLAttributes,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+import { join } from 'lodash';
+
+type IndeterminateCheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
+  className?: string;
+  checked: boolean | undefined;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = ({
+  className,
+  checked,
+  onChange,
+  ...props
+}) => {
+  const checkbox = useRef<HTMLInputElement>(null);
+
+  useLayoutEffect(() => {
+    if (checkbox.current)
+      checkbox.current.indeterminate = checked === undefined;
+  }, [checked]);
+
+  return (
+    <input
+      type="checkbox"
+      className={join(
+        [
+          'h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600',
+          className,
+        ],
+        ' '
+      )}
+      ref={checkbox}
+      checked={checked}
+      onChange={onChange}
+      {...props}
+    />
+  );
+};

package/src/components/forms/Select.tsx

@@ -0,0 +1,40 @@
+import { SelectHTMLAttributes } from 'react';
+import { inputStyle } from './styles';
+import styled from 'styled-components';
+
+type SelectProps<T> = {
+  items: T[];
+  itemKey: keyof T | ((item: T) => string);
+  itemLabel: keyof T | ((item: T) => string);
+};
+
+const StyledSelect = styled.select`
+  ${inputStyle}
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Select = <T extends { [k: string]: any }>({
+  items,
+  itemKey,
+  itemLabel,
+  ...props
+}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => {
+  const keyGetter =
+    typeof itemKey === 'function' ? itemKey : (item: T) => item[itemKey];
+  const labelGetter =
+    typeof itemLabel === 'function' ? itemLabel : (item: T) => item[itemLabel];
+
+  return (
+    <StyledSelect {...props}>
+      {items.map((item) => {
+        const key = keyGetter(item);
+        const label = labelGetter(item);
+        return (
+          <option key={key} value={key}>
+            {label}
+          </option>
+        );
+      })}
+    </StyledSelect>
+  );
+};

package/src/components/forms/index.ts

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Select';
+export * from './IconButton';
+export * from './IndeterminateCheckbox';
+export { Input } from './styles';

package/src/components/forms/styles.ts

@@ -0,0 +1,20 @@
+import styled, { css } from 'styled-components';
+
+export const inputStyle = css`
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--rounded-md);
+  padding: var(--space-1);
+  width: 100%;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: 2px solid var(--color-primary-500);
+  }
+`;
+
+export const Input = styled.input`
+  ${inputStyle}
+`;

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './data';
+export * from './forms';
+export * from './layout';

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

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

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

@@ -0,0 +1,28 @@
+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();
+  return useMemo(
+    () =>
+      visible
+        ? createPortal(
+            <styles.LoadingBackdrop>
+              <LoadingIcon />
+              <styles.LoadingContainer>
+                {children || 'Loading ...'}
+              </styles.LoadingContainer>
+            </styles.LoadingBackdrop>
+          )
+        : null,
+    [children, createPortal, visible]
+  );
+};

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

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

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

@@ -0,0 +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;
+  }
+`;

package/src/components/layout/index.ts

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

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/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,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);

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 | undefined;
+};
+
+export const PortalsContext = createContext<PortalsContextType>({
+  createPortal: () => undefined,
+});
+
+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!
+      ),
+    []
+  );
+
+  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',
+})``;