@addev-be/ui 2.6.0 → 2.7.0

package/src/helpers/styled/space.ts

@@ -1,114 +1,114 @@
-import {
-  ThemeSpace,
-  ThemeSpaceWithNegative,
-} from '../../providers/ThemeProvider/types';
-
-import { css } from 'styled-components';
-
-export type MarginProps = {
-  m?: ThemeSpace | ThemeSpaceWithNegative;
-  mx?: ThemeSpace | ThemeSpaceWithNegative;
-  my?: ThemeSpace | ThemeSpaceWithNegative;
-  mt?: ThemeSpace | ThemeSpaceWithNegative;
-  mr?: ThemeSpace | ThemeSpaceWithNegative;
-  mb?: ThemeSpace | ThemeSpaceWithNegative;
-  ml?: ThemeSpace | ThemeSpaceWithNegative;
-};
-
-export const margins = css<MarginProps>`
-  ${({ m }) =>
-    m && m.startsWith('-')
-      ? `margin: calc(0 - var(--space-${m.substring(1)}));`
-      : `margin: var(--space-${m});`}
-  ${({ mx }) =>
-    mx && mx.startsWith('-')
-      ? `margin-left: calc(0 - var(--space-${mx.substring(
-          1
-        )})); margin-right: calc(0 - var(--space-${mx.substring(1)}));`
-      : `margin-left: var(--space-${mx}); margin-right: var(--space-${mx});`}
-  ${({ my }) =>
-    my && my.startsWith('-')
-      ? `margin-top: calc(0 - var(--space-${my.substring(
-          1
-        )})); margin-bottom: calc(0 - var(--space-${my.substring(1)}));`
-      : `margin-top: var(--space-${my}); margin-bottom: var(--space-${my});`}
-  ${({ mt }) =>
-    mt && mt.startsWith('-')
-      ? `margin-top: calc(0 - var(--space-${mt.substring(1)}));`
-      : `margin-top: var(--space-${mt});`}
-  ${({ mr }) =>
-    mr && mr.startsWith('-')
-      ? `margin-right: calc(0 - var(--space-${mr.substring(1)}));`
-      : `margin-right: var(--space-${mr});`}
-  ${({ mb }) =>
-    mb && mb.startsWith('-')
-      ? `margin-bottom: calc(0 - var(--space-${mb.substring(1)}));`
-      : `margin-bottom: var(--space-${mb});`}
-  ${({ ml }) =>
-    ml && ml.startsWith('-')
-      ? `margin-left: calc(0 - var(--space-${ml.substring(1)}));`
-      : `margin-left: var(--space-${ml});`}
-`;
-
-export type PaddingProps = {
-  p?: ThemeSpace;
-  px?: ThemeSpace;
-  py?: ThemeSpace;
-  pt?: ThemeSpace;
-  pr?: ThemeSpace;
-  pb?: ThemeSpace;
-  pl?: ThemeSpace;
-};
-
-export const paddings = css<PaddingProps>`
-  ${({ p }) => p && `padding: var(--space-${p});`}
-  ${({ px }) =>
-    px &&
-    `padding-left: var(--space-${px}); padding-right: var(--space-${px});`}
-  ${({ py }) =>
-    py &&
-    `padding-top: var(--space-${py}); padding-bottom: var(--space-${py});`}
-  ${({ pt }) => pt && `padding-top: var(--space-${pt});`}
-  ${({ pr }) => pr && `padding-right: var(--space-${pr});`}
-  ${({ pb }) => pb && `padding-bottom: var(--space-${pb});`}
-  ${({ pl }) => pl && `padding-left: var(--space-${pl});`}
-`;
-
-export type SpaceProps = MarginProps & PaddingProps;
-
-export const extractSpaceProps = ({
-  m,
-  mx,
-  my,
-  mt,
-  mr,
-  mb,
-  ml,
-  p,
-  px,
-  py,
-  pt,
-  pr,
-  pb,
-  pl,
-}: SpaceProps) => ({
-  m,
-  mx,
-  my,
-  mt,
-  mr,
-  mb,
-  ml,
-  p,
-  px,
-  py,
-  pt,
-  pr,
-  pb,
-  pl,
-});
-
-export const space = css<SpaceProps>`
-  ${margins}
-  ${paddings}
-`;
+import {
+  ThemeSpace,
+  ThemeSpaceWithNegative,
+} from '../../providers/ThemeProvider/types';
+
+import { css } from 'styled-components';
+
+export type MarginProps = {
+  m?: ThemeSpace | ThemeSpaceWithNegative;
+  mx?: ThemeSpace | ThemeSpaceWithNegative;
+  my?: ThemeSpace | ThemeSpaceWithNegative;
+  mt?: ThemeSpace | ThemeSpaceWithNegative;
+  mr?: ThemeSpace | ThemeSpaceWithNegative;
+  mb?: ThemeSpace | ThemeSpaceWithNegative;
+  ml?: ThemeSpace | ThemeSpaceWithNegative;
+};
+
+export const margins = css<MarginProps>`
+  ${({ m }) =>
+    m && m.startsWith('-')
+      ? `margin: calc(0 - var(--space-${m.substring(1)}));`
+      : `margin: var(--space-${m});`}
+  ${({ mx }) =>
+    mx && mx.startsWith('-')
+      ? `margin-left: calc(0 - var(--space-${mx.substring(
+          1
+        )})); margin-right: calc(0 - var(--space-${mx.substring(1)}));`
+      : `margin-left: var(--space-${mx}); margin-right: var(--space-${mx});`}
+  ${({ my }) =>
+    my && my.startsWith('-')
+      ? `margin-top: calc(0 - var(--space-${my.substring(
+          1
+        )})); margin-bottom: calc(0 - var(--space-${my.substring(1)}));`
+      : `margin-top: var(--space-${my}); margin-bottom: var(--space-${my});`}
+  ${({ mt }) =>
+    mt && mt.startsWith('-')
+      ? `margin-top: calc(0 - var(--space-${mt.substring(1)}));`
+      : `margin-top: var(--space-${mt});`}
+  ${({ mr }) =>
+    mr && mr.startsWith('-')
+      ? `margin-right: calc(0 - var(--space-${mr.substring(1)}));`
+      : `margin-right: var(--space-${mr});`}
+  ${({ mb }) =>
+    mb && mb.startsWith('-')
+      ? `margin-bottom: calc(0 - var(--space-${mb.substring(1)}));`
+      : `margin-bottom: var(--space-${mb});`}
+  ${({ ml }) =>
+    ml && ml.startsWith('-')
+      ? `margin-left: calc(0 - var(--space-${ml.substring(1)}));`
+      : `margin-left: var(--space-${ml});`}
+`;
+
+export type PaddingProps = {
+  p?: ThemeSpace;
+  px?: ThemeSpace;
+  py?: ThemeSpace;
+  pt?: ThemeSpace;
+  pr?: ThemeSpace;
+  pb?: ThemeSpace;
+  pl?: ThemeSpace;
+};
+
+export const paddings = css<PaddingProps>`
+  ${({ p }) => p && `padding: var(--space-${p});`}
+  ${({ px }) =>
+    px &&
+    `padding-left: var(--space-${px}); padding-right: var(--space-${px});`}
+  ${({ py }) =>
+    py &&
+    `padding-top: var(--space-${py}); padding-bottom: var(--space-${py});`}
+  ${({ pt }) => pt && `padding-top: var(--space-${pt});`}
+  ${({ pr }) => pr && `padding-right: var(--space-${pr});`}
+  ${({ pb }) => pb && `padding-bottom: var(--space-${pb});`}
+  ${({ pl }) => pl && `padding-left: var(--space-${pl});`}
+`;
+
+export type SpaceProps = MarginProps & PaddingProps;
+
+export const extractSpaceProps = ({
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+}: SpaceProps) => ({
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+});
+
+export const space = css<SpaceProps>`
+  ${margins}
+  ${paddings}
+`;

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/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]
+  );
+};