@addev-be/ui 0.3.3 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "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/data/DataGrid/DataGridRowTemplate.tsx

@@ -0,0 +1,69 @@
+import * as styles from './styles';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridRowTemplateProps } from './types';
+import { useContext } from 'react';
+
+export const DataGridRowTemplate = <R,>({
+  row,
+  rowIndex,
+  context,
+}: DataGridRowTemplateProps<R>) => {
+  const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
+    useContext(context);
+
+  if (!row) {
+    return (
+      <styles.DataGridRow key={`loading-row-${rowIndex}`}>
+        {!!props.selectable && (
+          <styles.LoadingCell className="animate-pulse">
+            <div />
+          </styles.LoadingCell>
+        )}
+        {visibleColumns.map((_, index) => (
+          <styles.LoadingCell
+            className="animate-pulse"
+            key={`loading-${rowIndex}-${index}`}
+          >
+            <div />
+          </styles.LoadingCell>
+        ))}
+      </styles.DataGridRow>
+    );
+  }
+  const key = rowKeyGetter(row);
+  const selected = props.selectedKeys.includes(key);
+  const { className, style } = props.rowClassNameGetter?.(row) ?? {
+    className: '',
+    style: undefined,
+  };
+  return (
+    <styles.DataGridRow key={key}>
+      {!!props.selectable && (
+        <styles.SelectionCell
+          key="__select_checkbox__"
+          onClick={() => toggleSelection(key)}
+        >
+          <input
+            type="checkbox"
+            value={key as string}
+            checked={selected}
+            readOnly
+          />
+        </styles.SelectionCell>
+      )}
+      {visibleColumns.map(([key, col], index) => (
+        <DataGridCell
+          key={`loading-${rowIndex}-${index}`}
+          {...(index === 0 ? { className, style } : {})}
+          row={row}
+          rowIndex={rowIndex}
+          column={col}
+          columnIndex={index}
+          context={context}
+          columnKey={key}
+        />
+      ))}
+    </styles.DataGridRow>
+  );
+};

package/src/components/data/DataGrid/VirtualScroller.tsx

@@ -1,12 +1,11 @@
 import * as styles from './styles';
 
-import { ReactNode, useContext } from 'react';
-
-import { DataGridContext } from './types';
+import { DataGridContext, DataGridRowTemplateProps } from './types';
+import { FC, useContext } from 'react';
 
 type VirtualScrollerProps<R> = {
   showAllRows?: boolean;
-  rowTemplate: (row: R, index: number) => ReactNode;
+  rowTemplate: FC<DataGridRowTemplateProps<R>>;
   hasFooter?: boolean;
   context: DataGridContext<R>;
   onRangeChange?: (startIndex: number, length: number) => void;
@@ -22,7 +21,7 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
     gridTemplateColumns,
   } = useContext(props.context);
   const {
-    rowTemplate,
+    rowTemplate: RowTemplate,
     // hasFooter, onRangeChange
   } = props;
 
@@ -39,7 +38,9 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
         $topPadding={topPadding}
         $rowHeight={rowHeight}
       >
-        {visibleRows.map(rowTemplate)}
+        {visibleRows.map((row, index) => (
+          <RowTemplate row={row} rowIndex={index} context={props.context} />
+        ))}
       </styles.VirtualScrollerRowsContainer>
     </styles.VirtualScrollerContainer>
   );

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -92,6 +92,17 @@ export const useDataGrid = <R,>(
     onSelectionChange?.(selectedKeys);
   }, [onSelectionChange, selectedKeys]);
 
+  const toggleSelection = useCallback(
+    (key: string) => {
+      if (selectedKeys.includes(key)) {
+        setSelectedKeys(selectedKeys.filter((p) => p !== key));
+      } else {
+        setSelectedKeys([...selectedKeys, key]);
+      }
+    },
+    [selectedKeys, setSelectedKeys]
+  );
+
   /** ROWS FILTERING **/
 
   const [filters, setFilters] = useState<DataGridFilters>({});
@@ -240,6 +251,7 @@ export const useDataGrid = <R,>(
       footers,
       setFooters,
       footerFunctions,
+      toggleSelection,
       ...override,
     }),
     [
@@ -265,6 +277,7 @@ export const useDataGrid = <R,>(
       gridTemplateColumns,
       footers,
       footerFunctions,
+      toggleSelection,
       override,
     ]
   );
@@ -298,6 +311,7 @@ export const useDataGrid = <R,>(
         gridTemplateColumns: '',
         footers: {},
         setFooters: () => {},
+        toggleSelection: () => {},
       }),
     []
   );

package/src/components/data/DataGrid/index.tsx

@@ -2,11 +2,10 @@ import * as styles from './styles';
 
 import { DataGridContextProps, DataGridProps } from './types';
 
-import { DataGridCell } from './DataGridCell';
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
+import { DataGridRowTemplate } from './DataGridRowTemplate';
 import { VirtualScroller } from './VirtualScroller';
-import { useCallback } from 'react';
 import { useDataGrid } from './hooks';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -25,95 +24,16 @@ export const DataGrid = <R,>({
   } = props;
   const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
   const {
-    selectedKeys,
-    setSelectedKeys,
     columns,
-    visibleColumns,
     rowHeight = 32,
     headerRowHeight = 40,
     scrollableRef,
     onScroll,
-    rowKeyGetter,
   } = contextProps;
 
   const hasFooter = Object.values(columns).some((col) => col.footer);
 
-  const toggleSelection = useCallback(
-    (key: string) => {
-      if (selectedKeys.includes(key)) {
-        setSelectedKeys(selectedKeys.filter((p) => p !== key));
-      } else {
-        setSelectedKeys([...selectedKeys, key]);
-      }
-    },
-    [selectedKeys, setSelectedKeys]
-  );
-
-  const rowTemplate = useCallback(
-    (row: R, rowIndex: number) => {
-      if (!row) {
-        return (
-          <styles.DataGridRow key={`loading-row-${rowIndex}`}>
-            {!!props.selectable && (
-              <styles.LoadingCell className="animate-pulse">
-                <div />
-              </styles.LoadingCell>
-            )}
-            {visibleColumns.map((_, index) => (
-              <styles.LoadingCell
-                className="animate-pulse"
-                key={`loading-${rowIndex}-${index}`}
-              >
-                <div />
-              </styles.LoadingCell>
-            ))}
-          </styles.DataGridRow>
-        );
-      }
-      const key = rowKeyGetter(row);
-      const { className, style } = props.rowClassNameGetter?.(row) ?? {
-        className: '',
-        style: undefined,
-      };
-      return (
-        <styles.DataGridRow key={key}>
-          {!!props.selectable && (
-            <styles.SelectionCell
-              key="__select_checkbox__"
-              onClick={() => toggleSelection(key)}
-            >
-              <input
-                type="checkbox"
-                value={key as string}
-                checked={selectedKeys.includes(key)}
-                readOnly
-              />
-            </styles.SelectionCell>
-          )}
-          {visibleColumns.map(([key, col], index) => (
-            <DataGridCell
-              key={`loading-${rowIndex}-${index}`}
-              {...(index === 0 ? { className, style } : {})}
-              row={row}
-              rowIndex={rowIndex}
-              column={col}
-              columnIndex={index}
-              context={DataGridContext}
-              columnKey={key}
-            />
-          ))}
-        </styles.DataGridRow>
-      );
-    },
-    [
-      DataGridContext,
-      props,
-      rowKeyGetter,
-      selectedKeys,
-      toggleSelection,
-      visibleColumns,
-    ]
-  );
+  const rowTemplate = DataGridRowTemplate;
 
   return (
     <DataGridContext.Provider value={contextProps}>

package/src/components/data/DataGrid/types.ts

@@ -131,6 +131,7 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   length: number;
   rowKeyGetter: (row: R) => string;
   gridTemplateColumns: string;
+  toggleSelection: (key: string) => void;
 };
 
 export type DataGridContext<R> = Context<DataGridContextProps<R>>;
@@ -265,3 +266,11 @@ export type DataGridFilterCheckbox = {
   values: DataGridFilterValue[];
   level: number;
 };
+
+export type DataGridRowTemplateProps<R> = {
+  row: R | null;
+  rowIndex: number;
+  selected?: boolean;
+  toggleSelection?: () => void;
+  context: DataGridContext<R>;
+};

package/src/components/forms/styles.ts

@@ -15,6 +15,8 @@ export const inputStyle = css`
   }
 `;
 
-export const Input = styled.input`
+export const Input = styled.input.attrs({
+  className: 'Input',
+})`
   ${inputStyle}
 `;

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,80 @@
+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,
+      }).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

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

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/WebSocketService.ts

@@ -45,6 +45,7 @@ export class WebSocketService {
         if (this.socket && this.socket.readyState === 1) {
           clearInterval(interval);
           this.setStatus(true);
+          this.sendQueue();
           this.onOpen?.();
         }
       }, 100);

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';