@addev-be/ui 2.4.0 → 2.4.2

package/src/components/search/types.ts

@@ -1,29 +1,29 @@
-import { ConditionDTO, OrderByDTO } from '../../services/sqlRequests';
-import { FC, ReactNode } from 'react';
-
-export type SearchTypeDefinition<T> = {
-  title: string;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-  quickRenderer: (result: T, term: string) => ReactNode;
-  titleRenderer: (result: T, term: string) => ReactNode;
-  detailsRenderer: (result: T, term: string) => ReactNode;
-  onClick?: (result: T) => void;
-};
-
-export type SearchTypeDefinitions<R> = {
-  [K in keyof R]: SearchTypeDefinition<R[K]>;
-};
-
-export type SearchResults<R> = {
-  [K in keyof R]: Array<R[K]>;
-};
-
-export type SearchDetailsFC<T> = FC<{
-  searchResult: T;
-}>;
-
-export type ResultArray<R> = {
-  result: R[keyof R];
-  type: keyof R;
-}[];
+import { ConditionDTO, OrderByDTO } from '../../services/sqlRequests';
+import { FC, ReactNode } from 'react';
+
+export type SearchTypeDefinition<T> = {
+  title: string;
+  orderBy?: OrderByDTO[];
+  conditions?: ConditionDTO[];
+  quickRenderer: (result: T, term: string) => ReactNode;
+  titleRenderer: (result: T, term: string) => ReactNode;
+  detailsRenderer: (result: T, term: string) => ReactNode;
+  onClick?: (result: T) => void;
+};
+
+export type SearchTypeDefinitions<R> = {
+  [K in keyof R]: SearchTypeDefinition<R[K]>;
+};
+
+export type SearchResults<R> = {
+  [K in keyof R]: Array<R[K]>;
+};
+
+export type SearchDetailsFC<T> = FC<{
+  searchResult: T;
+}>;
+
+export type ResultArray<R> = {
+  result: R[keyof R];
+  type: keyof R;
+}[];

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

@@ -1,54 +1,54 @@
-import * as styles from './styles';
-
-import { FC, PropsWithChildren, useMemo } from 'react';
-
-import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
-import { sha256 } from 'hash.js';
-
-type AvatarProps = PropsWithChildren<
-  {
-    className?: string;
-    name?: string;
-    color?: ThemeColorWithIntensity;
-  } & styles.AvatarContainerProps
->;
-
-const getInitials = (name: string) => {
-  const matches = name.matchAll(/(?:^|\s+)([A-Z0-9])/g);
-  return Array.from(matches)
-    .slice(0, 2)
-    .map((m) => m[1])
-    .join('');
-};
-
-export const Avatar: FC<AvatarProps> = ({
-  children,
-  className,
-  color,
-  name,
-  size = 'md',
-}) => {
-  const initials = useMemo(() => getInitials(name || ''), [name]);
-  const backgroundColor = useMemo(() => {
-    if (color) return `var(--color-${color})`;
-    const h =
-      parseInt(
-        sha256()
-          .update(name || '')
-          .digest('hex')
-          .substring(0, 4),
-        16
-      ) % 360;
-    return `hsl(${h}, 50%, 50%)`;
-  }, [color, name]);
-
-  return (
-    <styles.AvatarContainer
-      size={size}
-      className={className}
-      style={{ backgroundColor }}
-    >
-      {initials || children}
-    </styles.AvatarContainer>
-  );
-};
+import * as styles from './styles';
+
+import { FC, PropsWithChildren, useMemo } from 'react';
+
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider/types';
+import { sha256 } from 'hash.js';
+
+type AvatarProps = PropsWithChildren<
+  {
+    className?: string;
+    name?: string;
+    color?: ThemeColorWithIntensity;
+  } & styles.AvatarContainerProps
+>;
+
+const getInitials = (name: string) => {
+  const matches = name.matchAll(/(?:^|\s+)([A-Z0-9])/g);
+  return Array.from(matches)
+    .slice(0, 2)
+    .map((m) => m[1])
+    .join('');
+};
+
+export const Avatar: FC<AvatarProps> = ({
+  children,
+  className,
+  color,
+  name,
+  size = 'md',
+}) => {
+  const initials = useMemo(() => getInitials(name || ''), [name]);
+  const backgroundColor = useMemo(() => {
+    if (color) return `var(--color-${color})`;
+    const h =
+      parseInt(
+        sha256()
+          .update(name || '')
+          .digest('hex')
+          .substring(0, 4),
+        16
+      ) % 360;
+    return `hsl(${h}, 50%, 50%)`;
+  }, [color, name]);
+
+  return (
+    <styles.AvatarContainer
+      size={size}
+      className={className}
+      style={{ backgroundColor }}
+    >
+      {initials || children}
+    </styles.AvatarContainer>
+  );
+};

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

@@ -1,61 +1,61 @@
-import styled, { css } from 'styled-components';
-
-export type AvatarContainerProps = {
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-
-const stylesMap: Record<
-  AvatarContainerProps['size'],
-  ReturnType<typeof css>
-> = {
-  xs: css`
-    width: var(--size-6);
-    height: var(--size-6);
-    min-width: var(--size-6);
-    min-height: var(--size-6);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs);
-  `,
-  sm: css`
-    width: var(--size-8);
-    height: var(--size-8);
-    min-width: var(--size-8);
-    min-height: var(--size-8);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm);
-  `,
-  md: css`
-    width: var(--size-10);
-    height: var(--size-10);
-    min-width: var(--size-10);
-    min-height: var(--size-10);
-    font-size: var(--text-md);
-    line-height: var(--text-md);
-  `,
-  lg: css`
-    width: var(--size-12);
-    height: var(--size-12);
-    min-width: var(--size-12);
-    min-height: var(--size-12);
-    font-size: var(--text-lg);
-    line-height: var(--text-lg);
-  `,
-  xl: css`
-    width: var(--size-14);
-    height: var(--size-14);
-    min-width: var(--size-14);
-    min-height: var(--size-14);
-    font-size: var(--text-2xl);
-    line-height: var(--text-2xl);
-  `,
-};
-
-export const AvatarContainer = styled.div<AvatarContainerProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--rounded-full);
-  user-select: none;
-
-  ${({ size }) => stylesMap[size]}
-`;
+import styled, { css } from 'styled-components';
+
+export type AvatarContainerProps = {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+const stylesMap: Record<
+  AvatarContainerProps['size'],
+  ReturnType<typeof css>
+> = {
+  xs: css`
+    width: var(--size-6);
+    height: var(--size-6);
+    min-width: var(--size-6);
+    min-height: var(--size-6);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs);
+  `,
+  sm: css`
+    width: var(--size-8);
+    height: var(--size-8);
+    min-width: var(--size-8);
+    min-height: var(--size-8);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm);
+  `,
+  md: css`
+    width: var(--size-10);
+    height: var(--size-10);
+    min-width: var(--size-10);
+    min-height: var(--size-10);
+    font-size: var(--text-md);
+    line-height: var(--text-md);
+  `,
+  lg: css`
+    width: var(--size-12);
+    height: var(--size-12);
+    min-width: var(--size-12);
+    min-height: var(--size-12);
+    font-size: var(--text-lg);
+    line-height: var(--text-lg);
+  `,
+  xl: css`
+    width: var(--size-14);
+    height: var(--size-14);
+    min-width: var(--size-14);
+    min-height: var(--size-14);
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl);
+  `,
+};
+
+export const AvatarContainer = styled.div<AvatarContainerProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rounded-full);
+  user-select: none;
+
+  ${({ size }) => stylesMap[size]}
+`;

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

@@ -1,14 +1,14 @@
-import { CardContainer, CardFooter, CardHeader } from './styles';
-import { FC, HTMLAttributes } from 'react';
-
-type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
-  Header: typeof CardHeader;
-  Footer: typeof CardFooter;
-};
-
-export const Card: CardFC = ({ children, ...props }) => {
-  return <CardContainer {...props}>{children}</CardContainer>;
-};
-
-Card.Header = CardHeader;
-Card.Footer = CardFooter;
+import { CardContainer, CardFooter, CardHeader } from './styles';
+import { FC, HTMLAttributes } from 'react';
+
+type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
+  Header: typeof CardHeader;
+  Footer: typeof CardFooter;
+};
+
+export const Card: CardFC = ({ children, ...props }) => {
+  return <CardContainer {...props}>{children}</CardContainer>;
+};
+
+Card.Header = CardHeader;
+Card.Footer = CardFooter;

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

@@ -1,37 +1,37 @@
-import styled from 'styled-components';
-
-export const CardContainer = styled.div.attrs({
-  className: 'CardContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-base-0);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-4);
-  border: 1px solid var(--color-base-100);
-`;
-
-export const CardHeader = styled.div.attrs({
-  className: 'CardHeader',
-})`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-base-200);
-  margin-bottom: var(--space-2);
-  gap: var(--space-2);
-`;
-
-export const CardFooter = styled.div.attrs({
-  className: 'CardFooter',
-})`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-top: var(--space-2);
-  border-top: 1px solid var(--color-base-200);
-  margin-top: var(--space-2);
-  gap: var(--space-2);
-`;
+import styled from 'styled-components';
+
+export const CardContainer = styled.div.attrs({
+  className: 'CardContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-base-0);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-4);
+  border: 1px solid var(--color-base-100);
+`;
+
+export const CardHeader = styled.div.attrs({
+  className: 'CardHeader',
+})`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-base-200);
+  margin-bottom: var(--space-2);
+  gap: var(--space-2);
+`;
+
+export const CardFooter = styled.div.attrs({
+  className: 'CardFooter',
+})`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--color-base-200);
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+`;

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

@@ -1,79 +1,79 @@
-import { Divider, MenuContainer, MenuItemContainer, SubMenu } from './styles';
-import {
-  FC,
-  HTMLAttributes,
-  PropsWithChildren,
-  useCallback,
-  useRef,
-  useState,
-} from 'react';
-
-type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
-  Item: typeof MenuItemContainer;
-  ParentItem: typeof ParentMenuItem;
-  Divider: typeof Divider;
-  SubMenu: typeof SubMenu;
-};
-
-export const ContextMenu: ContextMenuFC = ({ children }) => {
-  return (
-    <MenuContainer onClick={(e) => e.stopPropagation()}>
-      {children}
-    </MenuContainer>
-  );
-};
-
-export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  ...props
-}) => {
-  const [isOpened, setIsOpened] = useState(false);
-  const [isSubMenuLeft, setIsSubMenuLeft] = useState(false);
-  const [currentTimeout, setCurrentTimeout] = useState<number | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const stopTimeout = useCallback(() => {
-    if (currentTimeout) {
-      clearTimeout(currentTimeout);
-    }
-    setCurrentTimeout(null);
-  }, [currentTimeout]);
-
-  const startTimeout = useCallback(
-    (open: boolean) => {
-      stopTimeout();
-      setCurrentTimeout(
-        window.setTimeout(
-          () => {
-            const rect = containerRef.current?.getBoundingClientRect();
-            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
-            setIsOpened(open);
-          },
-          open ? 100 : 300
-        )
-      );
-    },
-    [stopTimeout]
-  );
-
-  const open = useCallback(() => startTimeout(true), [startTimeout]);
-  const close = useCallback(() => startTimeout(false), [startTimeout]);
-
-  return (
-    <MenuItemContainer
-      ref={containerRef}
-      {...props}
-      className={`${isOpened ? 'opened' : ''} ${isSubMenuLeft ? 'left' : ''}`}
-      onMouseEnter={open}
-      onMouseLeave={close}
-      $withArrow
-    >
-      {children}
-    </MenuItemContainer>
-  );
-};
-
-ContextMenu.Item = MenuItemContainer;
-ContextMenu.ParentItem = ParentMenuItem;
-ContextMenu.Divider = Divider;
-ContextMenu.SubMenu = SubMenu;
+import { Divider, MenuContainer, MenuItemContainer, SubMenu } from './styles';
+import {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
+
+type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
+  Item: typeof MenuItemContainer;
+  ParentItem: typeof ParentMenuItem;
+  Divider: typeof Divider;
+  SubMenu: typeof SubMenu;
+};
+
+export const ContextMenu: ContextMenuFC = ({ children }) => {
+  return (
+    <MenuContainer onClick={(e) => e.stopPropagation()}>
+      {children}
+    </MenuContainer>
+  );
+};
+
+export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  ...props
+}) => {
+  const [isOpened, setIsOpened] = useState(false);
+  const [isSubMenuLeft, setIsSubMenuLeft] = useState(false);
+  const [currentTimeout, setCurrentTimeout] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const stopTimeout = useCallback(() => {
+    if (currentTimeout) {
+      clearTimeout(currentTimeout);
+    }
+    setCurrentTimeout(null);
+  }, [currentTimeout]);
+
+  const startTimeout = useCallback(
+    (open: boolean) => {
+      stopTimeout();
+      setCurrentTimeout(
+        window.setTimeout(
+          () => {
+            const rect = containerRef.current?.getBoundingClientRect();
+            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
+            setIsOpened(open);
+          },
+          open ? 100 : 300
+        )
+      );
+    },
+    [stopTimeout]
+  );
+
+  const open = useCallback(() => startTimeout(true), [startTimeout]);
+  const close = useCallback(() => startTimeout(false), [startTimeout]);
+
+  return (
+    <MenuItemContainer
+      ref={containerRef}
+      {...props}
+      className={`${isOpened ? 'opened' : ''} ${isSubMenuLeft ? 'left' : ''}`}
+      onMouseEnter={open}
+      onMouseLeave={close}
+      $withArrow
+    >
+      {children}
+    </MenuItemContainer>
+  );
+};
+
+ContextMenu.Item = MenuItemContainer;
+ContextMenu.ParentItem = ParentMenuItem;
+ContextMenu.Divider = Divider;
+ContextMenu.SubMenu = SubMenu;