@addev-be/ui 1.1.7 → 1.2.0

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/styled/typography.ts

@@ -1,25 +1,25 @@
-import styled, { css } from 'styled-components';
-
-export type TypographyProps = {
-  ellipsis?: boolean;
-  bold?: boolean;
-  italic?: boolean;
-  underline?: boolean;
-  lineClamp?: number;
-};
-
-export const typography = css<TypographyProps>`
-  ${({ ellipsis }) =>
-    ellipsis &&
-    'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'}
-  ${({ bold }) => bold && 'font-weight: bold;'}
-  ${({ italic }) => italic && 'font-style: italic;'}
-  ${({ underline }) => underline && 'text-decoration: underline;'}
-  ${({ lineClamp }) =>
-    lineClamp &&
-    `display: -webkit-box; -webkit-line-clamp: ${lineClamp}; -webkit-box-orient: vertical; overflow: hidden;`}
-`;
-
-export const StyledTypography = styled.span<TypographyProps>`
-  ${typography}
-`;
+import styled, { css } from 'styled-components';
+
+export type TypographyProps = {
+  ellipsis?: boolean;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  lineClamp?: number;
+};
+
+export const typography = css<TypographyProps>`
+  ${({ ellipsis }) =>
+    ellipsis &&
+    'white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'}
+  ${({ bold }) => bold && 'font-weight: bold;'}
+  ${({ italic }) => italic && 'font-style: italic;'}
+  ${({ underline }) => underline && 'text-decoration: underline;'}
+  ${({ lineClamp }) =>
+    lineClamp &&
+    `display: -webkit-box; -webkit-line-clamp: ${lineClamp}; -webkit-box-orient: vertical; overflow: hidden;`}
+`;
+
+export const StyledTypography = styled.span<TypographyProps>`
+  ${typography}
+`;

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/helpers/types.ts

@@ -1,9 +1,9 @@
-import * as z from 'zod';
-
-export const isMatchingSchema = <S extends z.ZodType>(
-  obj: unknown,
-  schema: S
-): obj is z.infer<S> => {
-  const result = schema.safeParse(obj);
-  return result.success;
-};
+import * as z from 'zod';
+
+export const isMatchingSchema = <S extends z.ZodType>(
+  obj: unknown,
+  schema: S
+): obj is z.infer<S> => {
+  const result = schema.safeParse(obj);
+  return result.success;
+};

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';

package/src/hooks/useContainerMediaQuery.ts

@@ -1,7 +1,7 @@
-import { useElementSize } from './useElementSize';
-import { useMediaQueryForWidth } from './useMediaQueryForWidth';
-
-export const useContainerMediaQuery = (element: HTMLElement) => {
-  const { width } = useElementSize(element);
-  return useMediaQueryForWidth(width);
-};
+import { useElementSize } from './useElementSize';
+import { useMediaQueryForWidth } from './useMediaQueryForWidth';
+
+export const useContainerMediaQuery = (element: HTMLElement) => {
+  const { width } = useElementSize(element);
+  return useMediaQueryForWidth(width);
+};

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/useMediaQuery.ts

@@ -1,9 +1,9 @@
-import { useMediaQueryForWidth } from './useMediaQueryForWidth';
-import { useWindowSize } from './useWindowSize';
-
-export const useMediaQuery = () => {
-  const { width } = useWindowSize();
-  const realWidth = width ?? 0;
-
-  return useMediaQueryForWidth(realWidth);
-};
+import { useMediaQueryForWidth } from './useMediaQueryForWidth';
+import { useWindowSize } from './useWindowSize';
+
+export const useMediaQuery = () => {
+  const { width } = useWindowSize();
+  const realWidth = width ?? 0;
+
+  return useMediaQueryForWidth(realWidth);
+};

package/src/hooks/useMediaQueryForWidth.ts

@@ -1,35 +1,35 @@
-import {
-  findBreakpoint,
-  isGreaterThanOrEqual,
-  isSmallerThanOrEqual,
-} from '../helpers/responsive';
-
-import { useMemo } from 'react';
-
-export const useMediaQueryForWidth = (width: number) => {
-  const breakpoint = findBreakpoint(width);
-
-  return useMemo(
-    () => ({
-      breakpoint,
-
-      isXs: breakpoint === 'xs',
-      isSm: breakpoint === 'sm',
-      isMd: breakpoint === 'md',
-      isLg: breakpoint === 'lg',
-      isXl: breakpoint === 'xl',
-      isXxl: breakpoint === 'xxl',
-
-      isSmDown: isSmallerThanOrEqual('sm', breakpoint),
-      isMdDown: isSmallerThanOrEqual('md', breakpoint),
-      isLgDown: isSmallerThanOrEqual('lg', breakpoint),
-      isXlDown: isSmallerThanOrEqual('xl', breakpoint),
-
-      isSmUp: isGreaterThanOrEqual('sm', breakpoint),
-      isMdUp: isGreaterThanOrEqual('md', breakpoint),
-      isLgUp: isGreaterThanOrEqual('lg', breakpoint),
-      isXlUp: isGreaterThanOrEqual('xl', breakpoint),
-    }),
-    [breakpoint]
-  );
-};
+import {
+  findBreakpoint,
+  isGreaterThanOrEqual,
+  isSmallerThanOrEqual,
+} from '../helpers/responsive';
+
+import { useMemo } from 'react';
+
+export const useMediaQueryForWidth = (width: number) => {
+  const breakpoint = findBreakpoint(width);
+
+  return useMemo(
+    () => ({
+      breakpoint,
+
+      isXs: breakpoint === 'xs',
+      isSm: breakpoint === 'sm',
+      isMd: breakpoint === 'md',
+      isLg: breakpoint === 'lg',
+      isXl: breakpoint === 'xl',
+      isXxl: breakpoint === 'xxl',
+
+      isSmDown: isSmallerThanOrEqual('sm', breakpoint),
+      isMdDown: isSmallerThanOrEqual('md', breakpoint),
+      isLgDown: isSmallerThanOrEqual('lg', breakpoint),
+      isXlDown: isSmallerThanOrEqual('xl', breakpoint),
+
+      isSmUp: isGreaterThanOrEqual('sm', breakpoint),
+      isMdUp: isGreaterThanOrEqual('md', breakpoint),
+      isLgUp: isGreaterThanOrEqual('lg', breakpoint),
+      isXlUp: isGreaterThanOrEqual('xl', breakpoint),
+    }),
+    [breakpoint]
+  );
+};

package/src/hooks/useMutableState.ts

@@ -1,17 +1,17 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { DeepPartial } from '../typings';
-import { defaultsDeep } from 'lodash';
-
-export const useMutableState = <T>(initialValue: T | (() => T) = {} as T) => {
-  const [value, setValue] = useState<T>(initialValue);
-
-  const setPartialValue = useCallback((partialValue: DeepPartial<T>) => {
-    setValue((value) => defaultsDeep({}, partialValue, value));
-  }, []);
-
-  return useMemo(
-    () => [value, setValue, setPartialValue] as const,
-    [setPartialValue, value]
-  );
-};
+import { useCallback, useMemo, useState } from 'react';
+
+import { DeepPartial } from '../typings';
+import { defaultsDeep } from 'lodash';
+
+export const useMutableState = <T>(initialValue: T | (() => T) = {} as T) => {
+  const [value, setValue] = useState<T>(initialValue);
+
+  const setPartialValue = useCallback((partialValue: DeepPartial<T>) => {
+    setValue((value) => defaultsDeep({}, partialValue, value));
+  }, []);
+
+  return useMemo(
+    () => [value, setValue, setPartialValue] as const,
+    [setPartialValue, value]
+  );
+};

package/src/hooks/useShowArchived.ts

@@ -1,28 +1,28 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { ConditionDTO } from '../services/sqlRequests';
-
-export const useShowArchived = (initialValue?: boolean) => {
-  const [showArchived, setShowArchived] = useState(initialValue ?? false);
-
-  const toggleShowArchived = useCallback((value?: boolean) => {
-    setShowArchived((prev) => (value === undefined ? !prev : value));
-  }, []);
-
-  const archivedConditions = useMemo<ConditionDTO[]>(
-    () =>
-      showArchived
-        ? []
-        : [{ field: 'Archived', operator: 'notEquals', value: 1 }],
-    [showArchived]
-  );
-
-  return useMemo(
-    () => ({
-      archivedConditions,
-      showArchived,
-      toggleShowArchived,
-    }),
-    [archivedConditions, showArchived, toggleShowArchived]
-  );
-};
+import { useCallback, useMemo, useState } from 'react';
+
+import { ConditionDTO } from '../services/sqlRequests';
+
+export const useShowArchived = (initialValue?: boolean) => {
+  const [showArchived, setShowArchived] = useState(initialValue ?? false);
+
+  const toggleShowArchived = useCallback((value?: boolean) => {
+    setShowArchived((prev) => (value === undefined ? !prev : value));
+  }, []);
+
+  const archivedConditions = useMemo<ConditionDTO[]>(
+    () =>
+      showArchived
+        ? []
+        : [{ field: 'Archived', operator: 'notEquals', value: 1 }],
+    [showArchived]
+  );
+
+  return useMemo(
+    () => ({
+      archivedConditions,
+      showArchived,
+      toggleShowArchived,
+    }),
+    [archivedConditions, showArchived, toggleShowArchived]
+  );
+};