@addev-be/ui 0.11.7 → 0.12.0

package/src/components/search/index.ts

@@ -1,9 +1,9 @@
-export * from './QuickSearchBar';
-export * from './QuickSearchResults';
-export * from './HighlightedText';
-export * from './types';
-export {
-  QuickSearchResultDetailsTitle,
-  QuickSearchResultsDetailsList,
-  QuickSearchResultsDetailsTerm,
-} from './styles';
+export * from './QuickSearchBar';
+export * from './QuickSearchResults';
+export * from './HighlightedText';
+export * from './types';
+export {
+  QuickSearchResultDetailsTitle,
+  QuickSearchResultsDetailsList,
+  QuickSearchResultsDetailsTerm,
+} from './styles';

package/src/components/search/styles.ts

@@ -1,96 +1,96 @@
-import styled from 'styled-components';
-
-export const QuickSearchDropdownContainer = styled.div.attrs({
-  className: 'QuickSearchDropdownContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-export const QuickSearchResultsContainer = styled.div.attrs({
-  className: 'QuickSearchResultsContainer',
-})`
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-  flex: 1;
-  padding: var(--space-2) 0;
-  overflow: hidden;
-`;
-
-export const QuickSearchResultsListContainer = styled.div.attrs({
-  className: 'QuickSearchResultsListContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-2);
-  border-right: 1px solid var(--color-neutral-200);
-  flex: 1;
-  overflow: auto;
-`;
-
-export const QuickSearchResultsTitle = styled.div.attrs({
-  className: 'QuickSearchResultsTitle',
-})`
-  margin: 0;
-  margin-bottom: var(--space-1);
-  &:not(:first-child) {
-    margin-top: var(--space-2);
-  }
-  font-weight: bold;
-  font-size: var(--text-sm);
-  text-transform: uppercase;
-  letter-spacing: 120%;
-  color: var(--color-neutral-500);
-`;
-
-export const QuickSearchResultsItem = styled.div.attrs({
-  className: 'QuickSearchResultsItem',
-})`
-  padding: var(--space-2) var(--space-3);
-  cursor: pointer;
-  border-radius: 4px;
-  &:hover {
-    background-color: var(--color-neutral-100);
-  }
-`;
-
-export const QuickSearchResultsDetailsContainer = styled.div.attrs({
-  className: 'QuickSearchResultsDetailsContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-2);
-  flex: 1;
-`;
-
-export const QuickSearchResultsDetailsDivider = styled.hr`
-  margin: var(--space-2) 0;
-  height: 1px;
-  border: none;
-  background-color: var(--color-neutral-200);
-`;
-
-export const QuickSearchResultDetailsTitle = styled.div.attrs({
-  className: 'QuickSearchResultDetailsTitle',
-})`
-  margin: 0;
-`;
-
-export const QuickSearchResultsDetailsList = styled.dl.attrs({
-  className: 'QuickSearchResultsDetailsList',
-})`
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-gap: var(--space-2);
-`;
-
-export const QuickSearchResultsDetailsTerm = styled.dt.attrs({
-  className: 'QuickSearchResultsDetailsTerm',
-})`
-  text-transform: uppercase;
-  font-size: var(--text-sm);
-  font-weight: bold;
-  color: var(--color-neutral-500);
-`;
+import styled from 'styled-components';
+
+export const QuickSearchDropdownContainer = styled.div.attrs({
+  className: 'QuickSearchDropdownContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const QuickSearchResultsContainer = styled.div.attrs({
+  className: 'QuickSearchResultsContainer',
+})`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  flex: 1;
+  padding: var(--space-2) 0;
+  overflow: hidden;
+`;
+
+export const QuickSearchResultsListContainer = styled.div.attrs({
+  className: 'QuickSearchResultsListContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-2);
+  border-right: 1px solid var(--color-neutral-200);
+  flex: 1;
+  overflow: auto;
+`;
+
+export const QuickSearchResultsTitle = styled.div.attrs({
+  className: 'QuickSearchResultsTitle',
+})`
+  margin: 0;
+  margin-bottom: var(--space-1);
+  &:not(:first-child) {
+    margin-top: var(--space-2);
+  }
+  font-weight: bold;
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  letter-spacing: 120%;
+  color: var(--color-neutral-500);
+`;
+
+export const QuickSearchResultsItem = styled.div.attrs({
+  className: 'QuickSearchResultsItem',
+})`
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  border-radius: 4px;
+  &:hover {
+    background-color: var(--color-neutral-100);
+  }
+`;
+
+export const QuickSearchResultsDetailsContainer = styled.div.attrs({
+  className: 'QuickSearchResultsDetailsContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-2);
+  flex: 1;
+`;
+
+export const QuickSearchResultsDetailsDivider = styled.hr`
+  margin: var(--space-2) 0;
+  height: 1px;
+  border: none;
+  background-color: var(--color-neutral-200);
+`;
+
+export const QuickSearchResultDetailsTitle = styled.div.attrs({
+  className: 'QuickSearchResultDetailsTitle',
+})`
+  margin: 0;
+`;
+
+export const QuickSearchResultsDetailsList = styled.dl.attrs({
+  className: 'QuickSearchResultsDetailsList',
+})`
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-gap: var(--space-2);
+`;
+
+export const QuickSearchResultsDetailsTerm = styled.dt.attrs({
+  className: 'QuickSearchResultsDetailsTerm',
+})`
+  text-transform: uppercase;
+  font-size: var(--text-sm);
+  font-weight: bold;
+  color: var(--color-neutral-500);
+`;

package/src/components/search/types.ts

@@ -1,26 +1,26 @@
-import { FC, ReactNode } from 'react';
-
-export type SearchTypeDefinition<T> = {
-  title: string;
-  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 { FC, ReactNode } from 'react';
+
+export type SearchTypeDefinition<T> = {
+  title: string;
+  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';
-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';
+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/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-neutral-0);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-4);
-  border: 1px solid var(--color-neutral-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-neutral-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-neutral-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-neutral-0);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-4);
+  border: 1px solid var(--color-neutral-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-neutral-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-neutral-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;