@addev-be/ui 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -41,6 +41,7 @@
     "vite-plugin-svgr": "^4.2.0"
   },
   "dependencies": {
+    "@uidotdev/usehooks": "^2.4.1",
     "fp-ts": "^2.16.9",
     "io-ts": "^2.2.21",
     "lodash": "^4.17.21",

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './data';
 export * from './forms';
 export * from './layout';
+export * from './search';

package/src/components/layout/Dropdown/index.tsx

@@ -57,6 +57,7 @@ const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
 export const Dropdown: FC<DropdownProps> = ({
   children,
   onClose,
+  $backdropAlpha,
   ...props
 }) => {
   const { createPortal } = usePortals();
@@ -66,13 +67,13 @@ export const Dropdown: FC<DropdownProps> = ({
   const modalPortal = useMemo(
     () =>
       createPortal(
-        <styles.DropdownBackdrop onClick={onClose}>
+        <styles.DropdownBackdrop onClick={onClose} $alpha={$backdropAlpha}>
           <styles.DropdownContainer {...props} style={style}>
             {children}
           </styles.DropdownContainer>
         </styles.DropdownBackdrop>
       ),
-    [children, createPortal, onClose, props, style]
+    [$backdropAlpha, children, createPortal, onClose, props, style]
   );
 
   return <>{modalPortal}</>;

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-export const DropdownBackdrop = styled.div.attrs({
+export const DropdownBackdrop = styled.div.attrs<{ $alpha?: number }>({
   className: 'DropdownBackdrop',
 })`
   position: absolute;
@@ -9,7 +9,7 @@ export const DropdownBackdrop = styled.div.attrs({
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, ${({ $alpha = 0.5 }) => $alpha});
   display: flex;
   justify-content: center;
   align-items: center;
@@ -19,6 +19,7 @@ export type DropdownContainerProps = {
   $width: number;
   $height: number | number[];
   $zIndex?: number;
+  $backdropAlpha?: number;
 };
 
 export const DropdownContainer = styled.div.attrs({

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/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './dates';
+export * from './numbers';

package/src/index.ts

@@ -4,4 +4,5 @@ export * from './providers';
 export * from './Icons';
 
 export * from './config';
+export * from './helpers';
 export * from './services';

package/src/providers/ThemeProvider/index.ts

@@ -1,4 +1,4 @@
 export { ThemeProvider } from './ThemeProvider';
 
-export { type Theme } from './types';
+export * from './types';
 export { defaultTheme } from './defaultTheme';

package/src/services/index.ts

@@ -2,6 +2,7 @@ export * from './WebSocketService';
 export * from './hooks';
 
 export * from './requests/auth';
+export * from './globalSearch';
 
 export * from './types/auth';
 export * from './types/base';