@addev-be/ui 3.3.0 → 3.3.3

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

@@ -1,54 +1,54 @@
-import * as styles from './styles';
-
-import { FC, PropsWithChildren, useMemo } from 'react';
-
-import { ThemeColorWithIntensity } from '@theme';
-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 '@theme';
+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/common/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/common/Card/index.tsx

@@ -1,17 +1,17 @@
-import { CardContainer, CardFooter, CardHeader } from './styles';
-import { FC, HTMLAttributes } from 'react';
-
-import { SizeProps } from '../../../helpers/styled/size';
-import { SpaceProps } from '../../../helpers/styled/space';
-
-type CardFC = FC<HTMLAttributes<HTMLDivElement> & SpaceProps & SizeProps> & {
-  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';
+
+import { SizeProps } from '../../../helpers/styled/size';
+import { SpaceProps } from '../../../helpers/styled/space';
+
+type CardFC = FC<HTMLAttributes<HTMLDivElement> & SpaceProps & SizeProps> & {
+  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/common/Card/styles.ts

@@ -1,38 +1,38 @@
-import { SizeProps, size } from '../../../helpers/styled/size';
-import { SpaceProps, space } from '../../../helpers/styled/space';
-
-import styled from 'styled-components';
-
-export const CardContainer = styled.div<SpaceProps & SizeProps>`
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-base-50);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-4);
-  border: 1px solid var(--color-base-200);
-  box-sizing: border-box;
-
-  ${space}
-  ${size}
-`;
-
-export const CardHeader = styled.div`
-  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`
-  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 { SizeProps, size } from '../../../helpers/styled/size';
+import { SpaceProps, space } from '../../../helpers/styled/space';
+
+import styled from 'styled-components';
+
+export const CardContainer = styled.div<SpaceProps & SizeProps>`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-base-50);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-4);
+  border: 1px solid var(--color-base-200);
+  box-sizing: border-box;
+
+  ${space}
+  ${size}
+`;
+
+export const CardHeader = styled.div`
+  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`
+  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/common/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;