@addev-be/ui 0.17.2 → 0.17.4

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

@@ -1,57 +1,57 @@
-import * as styles from './styles';
-
-import {
-  CircleCheckIcon,
-  CircleInfoIcon,
-  CircleXMarkIcon,
-  TriangleExclamationIcon,
-} from '../../../Icons';
-import { FC, PropsWithChildren } from 'react';
-
-import { ThemeColor } from '../../../providers';
-
-type MessageType = 'success' | 'info' | 'warning' | 'error';
-
-type MessageProps = PropsWithChildren<{
-  className?: string;
-  title?: string;
-  type: MessageType;
-}>;
-
-const colorsMap: Record<
-  MessageType,
-  {
-    baseColor: ThemeColor;
-    iconComponent: FC<{ className?: string }>;
-  }
-> = {
-  success: {
-    baseColor: 'green',
-    iconComponent: CircleCheckIcon,
-  },
-  info: {
-    baseColor: 'sky',
-    iconComponent: CircleInfoIcon,
-  },
-  warning: {
-    baseColor: 'amber',
-    iconComponent: TriangleExclamationIcon,
-  },
-  error: {
-    baseColor: 'red',
-    iconComponent: CircleXMarkIcon,
-  },
-};
-
-export const Message: FC<MessageProps> = ({ children, title, type }) => {
-  const { iconComponent: Icon, baseColor = 'neutral' } = colorsMap[type];
-  return (
-    <styles.MessageContainer $baseColor={baseColor}>
-      <Icon className="MessageIcon" />
-      <styles.MessageContent>
-        {title && <h3>{title}</h3>}
-        <div>{children}</div>
-      </styles.MessageContent>
-    </styles.MessageContainer>
-  );
-};
+import * as styles from './styles';
+
+import {
+  CircleCheckIcon,
+  CircleInfoIcon,
+  CircleXMarkIcon,
+  TriangleExclamationIcon,
+} from '../../../Icons';
+import { FC, PropsWithChildren } from 'react';
+
+import { ThemeColor } from '../../../providers';
+
+type MessageType = 'success' | 'info' | 'warning' | 'error';
+
+type MessageProps = PropsWithChildren<{
+  className?: string;
+  title?: string;
+  type: MessageType;
+}>;
+
+const colorsMap: Record<
+  MessageType,
+  {
+    baseColor: ThemeColor;
+    iconComponent: FC<{ className?: string }>;
+  }
+> = {
+  success: {
+    baseColor: 'green',
+    iconComponent: CircleCheckIcon,
+  },
+  info: {
+    baseColor: 'sky',
+    iconComponent: CircleInfoIcon,
+  },
+  warning: {
+    baseColor: 'amber',
+    iconComponent: TriangleExclamationIcon,
+  },
+  error: {
+    baseColor: 'red',
+    iconComponent: CircleXMarkIcon,
+  },
+};
+
+export const Message: FC<MessageProps> = ({ children, title, type }) => {
+  const { iconComponent: Icon, baseColor = 'neutral' } = colorsMap[type];
+  return (
+    <styles.MessageContainer $baseColor={baseColor}>
+      <Icon className="MessageIcon" />
+      <styles.MessageContent>
+        {title && <h3>{title}</h3>}
+        <div>{children}</div>
+      </styles.MessageContent>
+    </styles.MessageContainer>
+  );
+};

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

@@ -1,40 +1,40 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../providers';
-
-export const MessageContainer = styled.div.attrs({
-  className: 'MessageContainer',
-})<{
-  $baseColor: ThemeColor;
-}>`
-  display: flex;
-  flex-direction: row;
-  box-shadow: var(--shadow-md);
-  border-radius: var(--rounded-md);
-  padding: var(--space-4);
-  gap: var(--space-4);
-
-  ${({ $baseColor }) => css`
-    border: 1px solid var(--color-${$baseColor}-300);
-    background-color: var(--color-${$baseColor}-100);
-    color: var(--color-${$baseColor}-600);
-
-    .MessageIcon {
-      fill: var(--color-${$baseColor}-600);
-    }
-  `}
-
-  .MessageIcon {
-    width: var(--space-5);
-    height: var(--space-5);
-    flex-shrink: 0;
-  }
-`;
-
-export const MessageContent = styled.div.attrs({
-  className: 'MessageContent',
-})`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`;
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../providers';
+
+export const MessageContainer = styled.div.attrs({
+  className: 'MessageContainer',
+})<{
+  $baseColor: ThemeColor;
+}>`
+  display: flex;
+  flex-direction: row;
+  box-shadow: var(--shadow-md);
+  border-radius: var(--rounded-md);
+  padding: var(--space-4);
+  gap: var(--space-4);
+
+  ${({ $baseColor }) => css`
+    border: 1px solid var(--color-${$baseColor}-300);
+    background-color: var(--color-${$baseColor}-100);
+    color: var(--color-${$baseColor}-600);
+
+    .MessageIcon {
+      fill: var(--color-${$baseColor}-600);
+    }
+  `}
+
+  .MessageIcon {
+    width: var(--space-5);
+    height: var(--space-5);
+    flex-shrink: 0;
+  }
+`;
+
+export const MessageContent = styled.div.attrs({
+  className: 'MessageContent',
+})`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;

package/src/components/ui/index.ts

@@ -1,6 +1,6 @@
-export * from './Avatar';
-export * from './Card';
-export * from './ContextMenu';
-export * from './Ellipsis';
-export * from './Label';
-export * from './Message';
+export * from './Avatar';
+export * from './Card';
+export * from './ContextMenu';
+export * from './Ellipsis';
+export * from './Label';
+export * from './Message';

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,17 +1,17 @@
-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) : '';
-};
-
-export const formatDateTime = (
-  date: moment.MomentInput,
-  format: string = 'DD/MM/YYYY HH:mm:ss'
-): 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) : '';
+};
+
+export const formatDateTime = (
+  date: moment.MomentInput,
+  format: string = 'DD/MM/YYYY HH:mm:ss'
+): 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

@@ -1,4 +1,4 @@
-export * from './dates';
-export * from './numbers';
-export * from './text';
-export * from './responsive';
+export * from './dates';
+export * from './numbers';
+export * from './text';
+export * from './responsive';

package/src/helpers/numbers.ts

@@ -1,63 +1,63 @@
-export const formatMoney = (number: number, decimals = 2, currency = 'EUR') =>
-  new Intl.NumberFormat(navigator.language, {
-    style: 'currency',
-    currency,
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals,
-    currencyDisplay: 'narrowSymbol',
-  }).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);
-
-const getDecimalSeparator = () => {
-  const numberWithDecimal = 1.1; // A number with a decimal point
-  const formattedNumber = new Intl.NumberFormat().format(numberWithDecimal);
-  return formattedNumber.replace(/\d/g, ''); // Remove all digits to isolate the separator
-};
-
-export const decimalSeparator = getDecimalSeparator();
-
-export const parseNumber = (value: string) => {
-  const number = value
-    .replace(new RegExp(`[^\\d${decimalSeparator}]`, 'g'), '')
-    .replace(decimalSeparator, '.');
-  return parseFloat(number);
-};
-
-export const getCurrencySymbol = (currency: string) => {
-  const formatter = new Intl.NumberFormat(navigator.language, {
-    style: 'currency',
-    currency,
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
-    currencyDisplay: 'narrowSymbol',
-  });
-
-  // Format a number and extract the currency symbol
-  const parts = formatter.formatToParts(1);
-  const currencySymbol = parts.find((part) => part.type === 'currency')?.value;
-
-  // Determine if the currency symbol is a prefix or suffix
-  const isPrefix =
-    parts.findIndex((part) => part.type === 'currency') <
-    parts.findIndex((part) => part.type === 'integer');
-
-  return isPrefix ? [currencySymbol, undefined] : [undefined, currencySymbol];
-};
+export const formatMoney = (number: number, decimals = 2, currency = 'EUR') =>
+  new Intl.NumberFormat(navigator.language, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+    currencyDisplay: 'narrowSymbol',
+  }).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);
+
+const getDecimalSeparator = () => {
+  const numberWithDecimal = 1.1; // A number with a decimal point
+  const formattedNumber = new Intl.NumberFormat().format(numberWithDecimal);
+  return formattedNumber.replace(/\d/g, ''); // Remove all digits to isolate the separator
+};
+
+export const decimalSeparator = getDecimalSeparator();
+
+export const parseNumber = (value: string) => {
+  const number = value
+    .replace(new RegExp(`[^\\d${decimalSeparator}]`, 'g'), '')
+    .replace(decimalSeparator, '.');
+  return parseFloat(number);
+};
+
+export const getCurrencySymbol = (currency: string) => {
+  const formatter = new Intl.NumberFormat(navigator.language, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+    currencyDisplay: 'narrowSymbol',
+  });
+
+  // Format a number and extract the currency symbol
+  const parts = formatter.formatToParts(1);
+  const currencySymbol = parts.find((part) => part.type === 'currency')?.value;
+
+  // Determine if the currency symbol is a prefix or suffix
+  const isPrefix =
+    parts.findIndex((part) => part.type === 'currency') <
+    parts.findIndex((part) => part.type === 'integer');
+
+  return isPrefix ? [currencySymbol, undefined] : [undefined, currencySymbol];
+};

package/src/helpers/responsive.ts

@@ -1,83 +1,83 @@
-const XS_BREAKPOINT = 320;
-const SM_BREAKPOINT = 480;
-const MD_BREAKPOINT = 768;
-const LG_BREAKPOINT = 992;
-const XL_BREAKPOINT = 1200;
-
-type MediaQueryKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-const boundaries: Record<MediaQueryKey, [number, number]> = {
-  xs: [0, XS_BREAKPOINT - 1],
-  sm: [XS_BREAKPOINT, SM_BREAKPOINT - 1],
-  md: [SM_BREAKPOINT, MD_BREAKPOINT - 1],
-  lg: [MD_BREAKPOINT, LG_BREAKPOINT - 1],
-  xl: [LG_BREAKPOINT, XL_BREAKPOINT - 1],
-  xxl: [XL_BREAKPOINT, 999999],
-};
-
-export const findBreakpoint = (width: number): MediaQueryKey =>
-  ((Object.keys(boundaries) as MediaQueryKey[]).find(
-    (bp) => width >= boundaries[bp][0] && width < boundaries[bp][1]
-  ) as MediaQueryKey) ?? 'xs';
-
-export const isSmallerThanOrEqual = (
-  mq: MediaQueryKey,
-  currentMq: MediaQueryKey
-) => boundaries[currentMq][0] <= boundaries[mq][0];
-export const isGreaterThanOrEqual = (
-  mq: MediaQueryKey,
-  currentMq: MediaQueryKey
-) => boundaries[currentMq][0] >= boundaries[mq][0];
-
-export const mediaQueries = {
-  xs: `@media screen and (max-width: ${XS_BREAKPOINT - 1}px)`,
-  sm: `@media screen and (min-width: ${XS_BREAKPOINT}px) and (max-width: ${
-    SM_BREAKPOINT - 1
-  }px)`,
-  md: `@media screen and (min-width: ${SM_BREAKPOINT}px) and (max-width: ${
-    MD_BREAKPOINT - 1
-  }px)`,
-  lg: `@media screen and (min-width: ${MD_BREAKPOINT}px) and (max-width: ${
-    LG_BREAKPOINT - 1
-  }px)`,
-  xl: `@media screen and (min-width: ${LG_BREAKPOINT}px) and (max-width: ${
-    XL_BREAKPOINT - 1
-  }px)`,
-  xxl: `@media screen and (min-width: ${XL_BREAKPOINT}px)`,
-
-  smDown: `@media screen and (max-width: ${SM_BREAKPOINT - 1}px)`,
-  mdDown: `@media screen and (max-width: ${MD_BREAKPOINT - 1}px)`,
-  lgDown: `@media screen and (max-width: ${LG_BREAKPOINT - 1}px)`,
-  xlDown: `@media screen and (max-width: ${XL_BREAKPOINT - 1}px)`,
-
-  smUp: `@media screen and (min-width: ${XS_BREAKPOINT}px)`,
-  mdUp: `@media screen and (min-width: ${SM_BREAKPOINT}px)`,
-  lgUp: `@media screen and (min-width: ${MD_BREAKPOINT}px)`,
-  xlUp: `@media screen and (min-width: ${LG_BREAKPOINT}px)`,
-};
-
-export const containerQueries = {
-  xs: `@container (width <= ${XS_BREAKPOINT - 1}px)`,
-  sm: `@container (width >= ${XS_BREAKPOINT}px) and (width <= ${
-    SM_BREAKPOINT - 1
-  }px)`,
-  md: `@container (width >= ${SM_BREAKPOINT}px) and (width <= ${
-    MD_BREAKPOINT - 1
-  }px)`,
-  lg: `@container (width >= ${MD_BREAKPOINT}px) and (width <= ${
-    LG_BREAKPOINT - 1
-  }px)`,
-  xl: `@container (width >= ${LG_BREAKPOINT}px) and (width <= ${
-    XL_BREAKPOINT - 1
-  }px)`,
-  xxl: `@container (width >= ${XL_BREAKPOINT}px)`,
-
-  smDown: `@container (width <= ${SM_BREAKPOINT - 1}px)`,
-  mdDown: `@container (width <= ${MD_BREAKPOINT - 1}px)`,
-  lgDown: `@container (width <= ${LG_BREAKPOINT - 1}px)`,
-  xlDown: `@container (width <= ${XL_BREAKPOINT - 1}px)`,
-
-  smUp: `@container (width >= ${XS_BREAKPOINT}px)`,
-  mdUp: `@container (width >= ${SM_BREAKPOINT}px)`,
-  lgUp: `@container (width >= ${MD_BREAKPOINT}px)`,
-  xlUp: `@container (width >= ${LG_BREAKPOINT}px)`,
-};
+const XS_BREAKPOINT = 320;
+const SM_BREAKPOINT = 480;
+const MD_BREAKPOINT = 768;
+const LG_BREAKPOINT = 992;
+const XL_BREAKPOINT = 1200;
+
+type MediaQueryKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+const boundaries: Record<MediaQueryKey, [number, number]> = {
+  xs: [0, XS_BREAKPOINT - 1],
+  sm: [XS_BREAKPOINT, SM_BREAKPOINT - 1],
+  md: [SM_BREAKPOINT, MD_BREAKPOINT - 1],
+  lg: [MD_BREAKPOINT, LG_BREAKPOINT - 1],
+  xl: [LG_BREAKPOINT, XL_BREAKPOINT - 1],
+  xxl: [XL_BREAKPOINT, 999999],
+};
+
+export const findBreakpoint = (width: number): MediaQueryKey =>
+  ((Object.keys(boundaries) as MediaQueryKey[]).find(
+    (bp) => width >= boundaries[bp][0] && width < boundaries[bp][1]
+  ) as MediaQueryKey) ?? 'xs';
+
+export const isSmallerThanOrEqual = (
+  mq: MediaQueryKey,
+  currentMq: MediaQueryKey
+) => boundaries[currentMq][0] <= boundaries[mq][0];
+export const isGreaterThanOrEqual = (
+  mq: MediaQueryKey,
+  currentMq: MediaQueryKey
+) => boundaries[currentMq][0] >= boundaries[mq][0];
+
+export const mediaQueries = {
+  xs: `@media screen and (max-width: ${XS_BREAKPOINT - 1}px)`,
+  sm: `@media screen and (min-width: ${XS_BREAKPOINT}px) and (max-width: ${
+    SM_BREAKPOINT - 1
+  }px)`,
+  md: `@media screen and (min-width: ${SM_BREAKPOINT}px) and (max-width: ${
+    MD_BREAKPOINT - 1
+  }px)`,
+  lg: `@media screen and (min-width: ${MD_BREAKPOINT}px) and (max-width: ${
+    LG_BREAKPOINT - 1
+  }px)`,
+  xl: `@media screen and (min-width: ${LG_BREAKPOINT}px) and (max-width: ${
+    XL_BREAKPOINT - 1
+  }px)`,
+  xxl: `@media screen and (min-width: ${XL_BREAKPOINT}px)`,
+
+  smDown: `@media screen and (max-width: ${SM_BREAKPOINT - 1}px)`,
+  mdDown: `@media screen and (max-width: ${MD_BREAKPOINT - 1}px)`,
+  lgDown: `@media screen and (max-width: ${LG_BREAKPOINT - 1}px)`,
+  xlDown: `@media screen and (max-width: ${XL_BREAKPOINT - 1}px)`,
+
+  smUp: `@media screen and (min-width: ${XS_BREAKPOINT}px)`,
+  mdUp: `@media screen and (min-width: ${SM_BREAKPOINT}px)`,
+  lgUp: `@media screen and (min-width: ${MD_BREAKPOINT}px)`,
+  xlUp: `@media screen and (min-width: ${LG_BREAKPOINT}px)`,
+};
+
+export const containerQueries = {
+  xs: `@container (width <= ${XS_BREAKPOINT - 1}px)`,
+  sm: `@container (width >= ${XS_BREAKPOINT}px) and (width <= ${
+    SM_BREAKPOINT - 1
+  }px)`,
+  md: `@container (width >= ${SM_BREAKPOINT}px) and (width <= ${
+    MD_BREAKPOINT - 1
+  }px)`,
+  lg: `@container (width >= ${MD_BREAKPOINT}px) and (width <= ${
+    LG_BREAKPOINT - 1
+  }px)`,
+  xl: `@container (width >= ${LG_BREAKPOINT}px) and (width <= ${
+    XL_BREAKPOINT - 1
+  }px)`,
+  xxl: `@container (width >= ${XL_BREAKPOINT}px)`,
+
+  smDown: `@container (width <= ${SM_BREAKPOINT - 1}px)`,
+  mdDown: `@container (width <= ${MD_BREAKPOINT - 1}px)`,
+  lgDown: `@container (width <= ${LG_BREAKPOINT - 1}px)`,
+  xlDown: `@container (width <= ${XL_BREAKPOINT - 1}px)`,
+
+  smUp: `@container (width >= ${XS_BREAKPOINT}px)`,
+  mdUp: `@container (width >= ${SM_BREAKPOINT}px)`,
+  lgUp: `@container (width >= ${MD_BREAKPOINT}px)`,
+  xlUp: `@container (width >= ${LG_BREAKPOINT}px)`,
+};

package/src/helpers/text.ts

@@ -1,13 +1,13 @@
-export const escapeForRegExp = (text: string) =>
-  text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
-
-export const extractTextFromHTML = (html: string) => {
-  const div = document.createElement('div');
-  div.style.display = 'block';
-  div.style.whiteSpace = 'normal';
-  div.innerHTML = html;
-  document.body.appendChild(div);
-  const text = div.innerText || '';
-  document.body.removeChild(div);
-  return text;
-};
+export const escapeForRegExp = (text: string) =>
+  text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+
+export const extractTextFromHTML = (html: string) => {
+  const div = document.createElement('div');
+  div.style.display = 'block';
+  div.style.whiteSpace = 'normal';
+  div.innerHTML = html;
+  document.body.appendChild(div);
+  const text = div.innerText || '';
+  document.body.removeChild(div);
+  return text;
+};

package/src/hooks/index.ts

@@ -1,7 +1,7 @@
-export * from './useElementSize';
-export * from './useShowArchived';
-export * from './useWindowSize';
-export * from './useMediaQuery';
-export * from './useContainerMediaQuery';
-export * from './useMediaQueryForWidth';
-export * from './useMutableState';
+export * from './useElementSize';
+export * from './useShowArchived';
+export * from './useWindowSize';
+export * from './useMediaQuery';
+export * from './useContainerMediaQuery';
+export * from './useMediaQueryForWidth';
+export * from './useMutableState';