@addev-be/ui 0.3.2 → 0.3.5

package/src/components/layout/Modal/styles.ts

@@ -1,110 +1,110 @@
-import styled, { css } from 'styled-components';
-
-export const ModalBackdrop = styled.div.attrs({
-  className: 'ModalBackdrop',
-})`
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export type ModalContainerProps = {
-  $width?: number;
-  $height?: number;
-  $zIndex?: number;
-  $fullscreen?: boolean;
-};
-
-export const ModalContainer = styled.div.attrs({
-  className: 'ModalContainer',
-})<ModalContainerProps>`
-  background: var(--color-neutral-100);
-  border-radius: var(--rounded-lg);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  max-height: 100vh;
-  overflow: hidden;
-
-  position: fixed;
-  z-index: 1001;
-  ${({ $fullscreen, $width, $height }) =>
-    $fullscreen
-      ? css`
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          margin: var(--space-4);
-        `
-      : css`
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: ${$width ? `${$width}px` : 'auto'};
-          height: ${$height ? `${$height}px` : 'auto'};
-        `}
-`;
-
-export const ModalHeader = styled.div.attrs({ className: 'ModalHeader' })`
-  font-weight: bold;
-  font-size: var(--text-lg);
-  padding: var(--space-2);
-  background-color: var(--color-neutral-200);
-  padding: var(--space-4);
-`;
-
-export const ModalMessage = styled.p.attrs({ className: 'ModalMessage' })`
-  margin-bottom: 1rem;
-`;
-
-export const ModalContent = styled.div.attrs({ className: 'ModalContent' })`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-  padding: var(--space-4);
-`;
-
-export const ModalContentWithIcon = styled.div.attrs({
-  className: 'ModalContentWithIcon',
-})`
-  display: flex;
-  flex-direction: row;
-  padding: var(--space-4);
-  gap: var(--space-2);
-
-  & > svg {
-    margin: var(--space-2);
-    width: var(--space-8);
-    height: var(--space-8);
-  }
-`;
-
-export const ModalFooter = styled.div.attrs({ className: 'ModalFooter' })`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: var(--space-2);
-  background-color: var(--color-neutral-200);
-  padding: var(--space-4);
-`;
-
-export const ModalButtons = styled(ModalFooter).attrs({
-  className: 'ModalButtons',
-})`
-  display: flex;
-  flex-direction: row;
-  gap: var(--space-2);
-
-  button.right:first-of-type {
-    margin-left: auto;
-  }
-`;
+import styled, { css } from 'styled-components';
+
+export const ModalBackdrop = styled.div.attrs({
+  className: 'ModalBackdrop',
+})`
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export type ModalContainerProps = {
+  $width?: number;
+  $height?: number;
+  $zIndex?: number;
+  $fullscreen?: boolean;
+};
+
+export const ModalContainer = styled.div.attrs({
+  className: 'ModalContainer',
+})<ModalContainerProps>`
+  background: var(--color-neutral-100);
+  border-radius: var(--rounded-lg);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
+  overflow: hidden;
+
+  position: fixed;
+  z-index: 1001;
+  ${({ $fullscreen, $width, $height }) =>
+    $fullscreen
+      ? css`
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          margin: var(--space-4);
+        `
+      : css`
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: ${$width ? `${$width}px` : 'auto'};
+          height: ${$height ? `${$height}px` : 'auto'};
+        `}
+`;
+
+export const ModalHeader = styled.div.attrs({ className: 'ModalHeader' })`
+  font-weight: bold;
+  font-size: var(--text-lg);
+  padding: var(--space-2);
+  background-color: var(--color-neutral-200);
+  padding: var(--space-4);
+`;
+
+export const ModalMessage = styled.p.attrs({ className: 'ModalMessage' })`
+  margin-bottom: 1rem;
+`;
+
+export const ModalContent = styled.div.attrs({ className: 'ModalContent' })`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-4);
+`;
+
+export const ModalContentWithIcon = styled.div.attrs({
+  className: 'ModalContentWithIcon',
+})`
+  display: flex;
+  flex-direction: row;
+  padding: var(--space-4);
+  gap: var(--space-2);
+
+  & > svg {
+    margin: var(--space-2);
+    width: var(--space-8);
+    height: var(--space-8);
+  }
+`;
+
+export const ModalFooter = styled.div.attrs({ className: 'ModalFooter' })`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: var(--space-2);
+  background-color: var(--color-neutral-200);
+  padding: var(--space-4);
+`;
+
+export const ModalButtons = styled(ModalFooter).attrs({
+  className: 'ModalButtons',
+})`
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-2);
+
+  button.right:first-of-type {
+    margin-left: auto;
+  }
+`;

package/src/components/layout/index.ts

@@ -1,3 +1,3 @@
-export * from './Dropdown';
-export * from './Modal';
-export * from './Loading';
+export * from './Dropdown';
+export * from './Modal';
+export * from './Loading';

package/src/components/search/HighlightedText.tsx

@@ -0,0 +1,30 @@
+import { FC, HTMLAttributes } from 'react';
+
+export const HighlightedText: FC<
+  {
+    text: string;
+    highlight?: string;
+    style?: React.CSSProperties;
+  } & HTMLAttributes<HTMLSpanElement>
+> = ({ text, highlight, ...props }) => {
+  const parts = text?.split(new RegExp(`(${highlight})`, 'gi')) ?? [];
+  if (!highlight) return <span {...props}>{text}</span>;
+  return (
+    <span {...props}>
+      {parts
+        .filter((part) => !!part)
+        .map((part, index) => (
+          <span
+            key={index}
+            style={
+              part.toLowerCase() === highlight.toLowerCase()
+                ? { backgroundColor: 'gold' }
+                : {}
+            }
+          >
+            {part}
+          </span>
+        ))}
+    </span>
+  );
+};

package/src/components/search/QuickSearchBar.tsx

@@ -0,0 +1,78 @@
+import { SearchResults, SearchTypeDefinitions } from './types';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { Dropdown } from '../layout';
+import { QuickSearchBarInput } from './styles';
+import { QuickSearchResults } from './QuickSearchResults';
+import { useDebounce } from '@uidotdev/usehooks';
+import { useGlobalSearchRequestHandler } from '../../services';
+
+type QuickSearchBarProps<R> = {
+  definitions: SearchTypeDefinitions<R>;
+};
+
+export const QuickSearchBar = <R,>({ definitions }: QuickSearchBarProps<R>) => {
+  const [term, setTerm] = useState('');
+  const [dropdownVisible, setDropdownVisible] = useState(false);
+  const debouncedTerm = useDebounce(term, 300);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [results, setResults] = useState<SearchResults<R> | null>(null);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const rect = inputRef.current?.getBoundingClientRect() ?? new DOMRect();
+  const globalSearch = useGlobalSearchRequestHandler();
+
+  useEffect(() => {
+    if (debouncedTerm) {
+      globalSearch({
+        types: ['Customer', 'ScanGroup'],
+        searchTerm: debouncedTerm,
+        limit: 5,
+      }).then((response) => {
+        setResults(response.data as SearchResults<R>);
+        setDropdownVisible(true);
+      });
+    }
+  }, [globalSearch, debouncedTerm]);
+
+  const onFocus = useCallback(() => {
+    if (term) {
+      setDropdownVisible(true);
+    }
+  }, [term]);
+
+  useEffect(() => {
+    const input = inputRef.current;
+    input?.addEventListener('focus', onFocus);
+    return () => {
+      input?.removeEventListener('focus', onFocus);
+    };
+  }, [onFocus]);
+
+  return (
+    <>
+      <QuickSearchBarInput
+        type="text"
+        value={term}
+        onChange={(e) => setTerm(e.target.value)}
+        ref={inputRef}
+        $opened={dropdownVisible}
+      />
+      {results && dropdownVisible && rect && (
+        <Dropdown
+          $sourceRect={rect}
+          onClose={() => setDropdownVisible(false)}
+          $width={rect.width}
+          $height={[250, 400]}
+          $autoPositionY={false}
+        >
+          <QuickSearchResults
+            results={results}
+            definitions={definitions}
+            term={debouncedTerm}
+          />
+        </Dropdown>
+      )}
+    </>
+  );
+};

package/src/components/search/QuickSearchResults.tsx

@@ -0,0 +1,86 @@
+import * as styles from './styles';
+
+import { ReactNode, useMemo, useState } from 'react';
+import { ResultArray, SearchResults, SearchTypeDefinitions } from './types';
+
+import { pickBy } from 'lodash';
+
+type QuickSearchResultsProps<R> = {
+  definitions: SearchTypeDefinitions<R>;
+  results: SearchResults<R>;
+  term: string;
+};
+
+export const QuickSearchResults = <R,>(props: QuickSearchResultsProps<R>) => {
+  const { definitions, results: allResults, term } = props;
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+  const notEmptyResults = pickBy<R[keyof R][]>(
+    allResults,
+    (results) => results.length > 0
+  );
+  const resultsArray = useMemo(
+    () =>
+      Object.keys(notEmptyResults).reduce(
+        (acc, type) => [
+          ...acc,
+          ...notEmptyResults[type].map((result) => ({
+            result,
+            type: type as keyof R,
+          })),
+        ],
+        [] as ResultArray<R>
+      ),
+    [notEmptyResults]
+  );
+
+  const elements = useMemo(() => {
+    const elements: ReactNode[] = [];
+    let currentType: keyof R | null = null;
+    resultsArray.forEach(({ result, type }, index) => {
+      const definition = definitions[type];
+      if (currentType !== type) {
+        currentType = type;
+        elements.push(
+          <styles.QuickSearchResultsTitle key={`title-${String(type)}`}>
+            {definition.title}
+          </styles.QuickSearchResultsTitle>
+        );
+      }
+      elements.push(
+        <styles.QuickSearchResultsItem
+          key={`result-${index}`}
+          onClick={() => definition.onClick?.(result)}
+          onMouseEnter={() => setHighlightedIndex(index)}
+          className={highlightedIndex === index ? 'highlighted' : ''}
+        >
+          {definition.quickRenderer(result, term)}
+        </styles.QuickSearchResultsItem>
+      );
+    });
+    return elements;
+  }, [definitions, highlightedIndex, resultsArray, term]);
+
+  const highlightedResult = resultsArray[highlightedIndex];
+  const highlightedDefinition = highlightedResult
+    ? definitions[highlightedResult?.type]
+    : null;
+
+  return (
+    <styles.QuickSearchResultsContainer>
+      <styles.QuickSearchResultsListContainer>
+        {elements}
+      </styles.QuickSearchResultsListContainer>
+      {highlightedDefinition && (
+        <styles.QuickSearchResultsDetailsContainer>
+          {highlightedDefinition.titleRenderer(highlightedResult.result, term)}
+          <styles.QuickSearchResultsDetailsDivider />
+          {highlightedDefinition.detailsRenderer(
+            highlightedResult.result,
+            term
+          )}
+        </styles.QuickSearchResultsDetailsContainer>
+      )}
+    </styles.QuickSearchResultsContainer>
+  );
+};

package/src/components/search/index.ts

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

package/src/components/search/styles.ts

@@ -0,0 +1,60 @@
+import { Input } from '../forms';
+import styled from 'styled-components';
+
+export const QuickSearchResultsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+`;
+
+export const QuickSearchResultsListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-2);
+  border-right: 1px solid var(--color-gray-200);
+  flex: 3;
+  overflow: auto;
+`;
+
+export const QuickSearchResultsTitle = styled.div`
+  margin: 0;
+  margin-bottom: var(--space-1);
+  &:not(:first-child) {
+    margin-top: var(--space-2);
+  }
+  font-weight: bold;
+  font-size: var(--text-lg);
+`;
+
+export const QuickSearchResultsItem = styled.div`
+  padding: var(--space-2) var(--space-3);
+  cursor: pointer;
+  border-radius: 4px;
+  &:hover {
+    background-color: var(--color-gray-100);
+  }
+`;
+
+export const QuickSearchResultsDetailsContainer = styled.div`
+  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-gray-200);
+`;
+
+export const QuickSearchResultDetailsTitle = styled.div`
+  margin: 0;
+`;
+
+export const QuickSearchBarInput = styled(Input)<{ $opened?: boolean }>`
+  position: relative;
+  width: 100%;
+  z-index: ${({ $opened }) => ($opened ? 10000 : 0)};
+`;

package/src/components/search/types.ts

@@ -0,0 +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;
+}[];

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;