@addev-be/ui 0.12.2 → 0.13.0

package/src/components/search/HighlightedText.tsx

@@ -1,37 +1,37 @@
-import { FC, HTMLAttributes, useMemo } from 'react';
-import { escapeForRegExp, extractTextFromHTML } from '../../helpers';
-
-export const HighlightedText: FC<
-  {
-    text: string;
-    highlight?: string;
-  } & HTMLAttributes<HTMLSpanElement>
-> = ({ text, highlight, ...props }) => {
-  const textWithoutHtml = useMemo(() => extractTextFromHTML(text), [text]);
-  console.log('textWithoutHtml', textWithoutHtml);
-  if (!highlight) return <span {...props}>{textWithoutHtml}</span>;
-
-  const parts =
-    textWithoutHtml?.split(
-      new RegExp(`(${escapeForRegExp(highlight)})`, 'gi')
-    ) ?? [];
-
-  return (
-    <span {...props}>
-      {parts
-        .filter((part) => !!part)
-        .map((part, index) => (
-          <span
-            key={index}
-            style={
-              part.toLowerCase() === highlight.toLowerCase()
-                ? { backgroundColor: 'gold' }
-                : {}
-            }
-          >
-            {part}
-          </span>
-        ))}
-    </span>
-  );
-};
+import { FC, HTMLAttributes, useMemo } from 'react';
+import { escapeForRegExp, extractTextFromHTML } from '../../helpers';
+
+export const HighlightedText: FC<
+  {
+    text: string;
+    highlight?: string;
+  } & HTMLAttributes<HTMLSpanElement>
+> = ({ text, highlight, ...props }) => {
+  const textWithoutHtml = useMemo(() => extractTextFromHTML(text), [text]);
+  console.log('textWithoutHtml', textWithoutHtml);
+  if (!highlight) return <span {...props}>{textWithoutHtml}</span>;
+
+  const parts =
+    textWithoutHtml?.split(
+      new RegExp(`(${escapeForRegExp(highlight)})`, 'gi')
+    ) ?? [];
+
+  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

@@ -1,86 +1,86 @@
-import * as styles from './styles';
-
-import { SearchResults, SearchTypeDefinitions } from './types';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { Dropdown } from '../layout';
-import { Input } from '../forms';
-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 fakeInputRef = useRef<HTMLInputElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const rect = fakeInputRef.current?.getBoundingClientRect() ?? new DOMRect();
-  const destRect = new DOMRect(rect.x, rect.y, rect.width, 0);
-  const globalSearch = useGlobalSearchRequestHandler();
-
-  useEffect(() => {
-    if (debouncedTerm) {
-      globalSearch({
-        types: ['Customer', 'ScanGroup'],
-        searchTerm: debouncedTerm,
-        limit: 5,
-        conditions: [
-          {
-            field: 'DeletedAt',
-            operator: 'isNull',
-          },
-        ],
-      }).then((response) => {
-        setResults(response.data as SearchResults<R>);
-        setDropdownVisible(true);
-      });
-    }
-  }, [globalSearch, debouncedTerm]);
-
-  const onFocus = useCallback(() => {
-    setDropdownVisible(true);
-    requestAnimationFrame(() => {
-      inputRef.current?.focus();
-    });
-  }, []);
-
-  return (
-    <>
-      <Input type="text" ref={fakeInputRef} value={term} onFocus={onFocus} />
-      {dropdownVisible && rect && (
-        <Dropdown
-          $sourceRect={destRect}
-          onClose={() => setDropdownVisible(false)}
-          $width={rect.width}
-          $height={[results ? 250 : rect.height, 400]}
-          $autoPositionY={false}
-        >
-          <styles.QuickSearchDropdownContainer>
-            <Input
-              type="text"
-              ref={inputRef}
-              value={term}
-              onChange={(e) => setTerm(e.target.value)}
-              onClick={(e) => e.stopPropagation()}
-            />
-            {results && (
-              <QuickSearchResults
-                results={results}
-                definitions={definitions}
-                term={debouncedTerm}
-              />
-            )}
-          </styles.QuickSearchDropdownContainer>
-        </Dropdown>
-      )}
-    </>
-  );
-};
+import * as styles from './styles';
+
+import { SearchResults, SearchTypeDefinitions } from './types';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { Dropdown } from '../layout';
+import { Input } from '../forms';
+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 fakeInputRef = useRef<HTMLInputElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const rect = fakeInputRef.current?.getBoundingClientRect() ?? new DOMRect();
+  const destRect = new DOMRect(rect.x, rect.y, rect.width, 0);
+  const globalSearch = useGlobalSearchRequestHandler();
+
+  useEffect(() => {
+    if (debouncedTerm) {
+      globalSearch({
+        types: ['Customer', 'ScanGroup'],
+        searchTerm: debouncedTerm,
+        limit: 5,
+        conditions: [
+          {
+            field: 'DeletedAt',
+            operator: 'isNull',
+          },
+        ],
+      }).then((response) => {
+        setResults(response.data as SearchResults<R>);
+        setDropdownVisible(true);
+      });
+    }
+  }, [globalSearch, debouncedTerm]);
+
+  const onFocus = useCallback(() => {
+    setDropdownVisible(true);
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  }, []);
+
+  return (
+    <>
+      <Input type="text" ref={fakeInputRef} value={term} onFocus={onFocus} />
+      {dropdownVisible && rect && (
+        <Dropdown
+          $sourceRect={destRect}
+          onClose={() => setDropdownVisible(false)}
+          $width={rect.width}
+          $height={[results ? 250 : rect.height, 400]}
+          $autoPositionY={false}
+        >
+          <styles.QuickSearchDropdownContainer>
+            <Input
+              type="text"
+              ref={inputRef}
+              value={term}
+              onChange={(e) => setTerm(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+            />
+            {results && (
+              <QuickSearchResults
+                results={results}
+                definitions={definitions}
+                term={debouncedTerm}
+              />
+            )}
+          </styles.QuickSearchDropdownContainer>
+        </Dropdown>
+      )}
+    </>
+  );
+};

package/src/components/search/QuickSearchResults.tsx

@@ -1,86 +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>
-  );
-};
+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

@@ -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);
+`;