@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

package/components/elements/addons/lists/table/TuiTableBody.tsx

@@ -0,0 +1,77 @@
+import { Collapse } from '@mui/material';
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import { get } from 'lodash-es';
+import { useCallback } from 'react';
+import type { TuiTableCellRenderer, TuiTableColumn, TuiTableRowDetailRenderer } from '.';
+import type { TuiListItemOnSelect, TuiListItemProps, TuiListMenuRenderer } from '..';
+import { TuiListElement } from '..';
+import TuiListBase from '../TuiListBase';
+import type TuiTableLayout from './TuiTableLayout';
+
+type TuiTableBodyProps<T> = {
+  keyboard?: boolean;
+  layout: TuiTableLayout;
+  columns: TuiTableColumn[];
+  onRowSelect?: TuiListItemOnSelect<T>;
+  menuRenderer?: TuiListMenuRenderer<T>;
+  detailRenderer?: TuiTableRowDetailRenderer<T>;
+  children?: TuiTableCellRenderer<T>;
+};
+
+const TuiTableBody = <T,>({
+  keyboard,
+  layout,
+  columns,
+  onRowSelect,
+  menuRenderer,
+  detailRenderer,
+  children
+}: TuiTableBodyProps<T>) => {
+  const trowRenderer = useCallback(
+    (props: TuiListItemProps<T>, classRenderer) => {
+      return (
+        <div className={`tui-table-row ${classRenderer()}`}>
+          <div style={{ display: 'flex', position: 'relative' }}>
+            {columns.map((column, columnIndex) => {
+              const value = get(props.item.item, column.path || column.column, '');
+              return (
+                <div
+                  key={column.column}
+                  className="tui-table-cell"
+                  style={{ minWidth: layout.getWidth(column.column) }}
+                >
+                  {children ? children(value, columnIndex, column, props) : <div>{value as any}</div>}
+                </div>
+              );
+            })}
+            {menuRenderer && menuRenderer(props)}
+          </div>
+          {detailRenderer && (
+            <Collapse in={props.item.details} unmountOnExit>
+              {detailRenderer(props)}
+            </Collapse>
+          )}
+        </div>
+      );
+    },
+    [layout, columns, menuRenderer, detailRenderer, children]
+  );
+
+  return (
+    <TuiListBase keyboard={keyboard} onSelect={onRowSelect}>
+      {(items, onClick) => {
+        return items.length > 0 ? (
+          items.map((item, index) => (
+            <TuiListElement key={item.id} item={item} position={index} onSelect={onClick}>
+              {trowRenderer}
+            </TuiListElement>
+          ))
+        ) : (
+          <AppListEmpty mt={4} />
+        );
+      }}
+    </TuiListBase>
+  );
+};
+
+export default TuiTableBody;

package/components/elements/addons/lists/table/TuiTableHead.tsx

@@ -0,0 +1,29 @@
+import { VSBoxContext } from 'components/elements/addons/layout/vsbox/VSBox';
+import { useContext } from 'react';
+import type { TuiTableColumn } from '.';
+import TuiTableHeader from './TuiTableHeader';
+import type TuiTableLayout from './TuiTableLayout';
+
+type TuiTableHeaderProps = {
+  layout: TuiTableLayout;
+  columns: TuiTableColumn[];
+};
+
+const TuiTableHead = ({ layout, columns }: TuiTableHeaderProps) => {
+  const {
+    state: { scrollTop }
+  } = useContext(VSBoxContext);
+  return (
+    <div
+      data-tuitable-header="true"
+      className="tui-table-head tui-table-divider"
+      style={{ position: scrollTop ? 'sticky' : null, top: scrollTop || null }}
+    >
+      {columns.map(column => (
+        <TuiTableHeader key={column.column} width={layout.getWidth(column.column, true)} column={column} />
+      ))}
+    </div>
+  );
+};
+
+export default TuiTableHead;

package/components/elements/addons/lists/table/TuiTableHeader.tsx

@@ -0,0 +1,15 @@
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { TuiTableColumn } from '.';
+
+const TuiTableHeader = ({ width, column }: { width: number; column: TuiTableColumn }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="tui-table-header" style={{ minWidth: width }}>
+      <div>{column.i18nKey ? t(column.i18nKey) : column.label}</div>
+    </div>
+  );
+};
+
+export default memo(TuiTableHeader);

package/components/elements/addons/lists/table/TuiTableLayout.ts

@@ -0,0 +1,53 @@
+import type { TuiTableColumn } from '.';
+
+export default class TuiTableLayout {
+  private tableWidth: number;
+
+  private bodyWidth: number;
+
+  private columns: TuiTableColumn[] = [];
+
+  private widths: { [column: string]: number };
+
+  constructor(tableWidth: number, bodyWidth: number, columns: TuiTableColumn[]) {
+    this.tableWidth = tableWidth;
+    this.bodyWidth = bodyWidth;
+    this.columns = columns;
+    this.compute();
+  }
+
+  public getWidth(column?: string, header?: boolean) {
+    if (column) {
+      const extra = column && header && this.isLast(column) ? this.tableWidth - this.bodyWidth : 0;
+      return extra > 0 ? this.widths[column] + extra : this.widths[column];
+    }
+    return this.bodyWidth;
+  }
+
+  private isLast(column: string): boolean {
+    const index = this.columns.findIndex(c => c.column === column);
+    return index === this.columns.length - 1;
+  }
+
+  private columnWidth(ratio: number) {
+    return (ratio / 12) * this.bodyWidth;
+  }
+
+  private compute(): void {
+    let _rw = this.bodyWidth;
+    const _nw = this.columns.filter(c => !c.width);
+    const _ww = this.columns.filter(c => !!c.width);
+
+    this.widths = {};
+    _ww.forEach(c => {
+      const cw = this.columnWidth(c.width);
+      this.widths[c.column] = cw;
+      _rw -= cw;
+    });
+
+    const cw = _rw / _nw.length;
+    _nw.forEach(c => {
+      this.widths[c.column] = cw;
+    });
+  }
+}

package/components/elements/addons/lists/table/index.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { TuiListItemProps } from '..';
+
+export const MATCHERS = ['like', 'in', 'is', '>=', '<=', '='] as const;
+export type TuiSearchMatcher = (typeof MATCHERS)[number];
+
+export type TuiTableColumn = {
+  column: string;
+  label?: string;
+  i18nKey?: string;
+  operators?: TuiSearchMatcher[];
+  path?: string;
+  sortable?: boolean;
+  width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+
+export type TuiTableRowDetailRenderer<T> = (props: TuiListItemProps<T>) => ReactNode;
+
+export type TuiTableCellRenderer<T> = (
+  value: any,
+  columnIndex: number,
+  column: TuiTableColumn,
+  props: TuiListItemProps<T>
+) => ReactNode;

package/components/elements/addons/search/SearchPagination.tsx

@@ -0,0 +1,26 @@
+import type { PaginationProps } from '@mui/material';
+import { Pagination } from '@mui/material';
+import { useCallback } from 'react';
+
+type SearchPaginationProps = Omit<PaginationProps, 'onChange'> & {
+  limit: number;
+  offset: number;
+  total: number;
+  onChange: (nextOffset: number) => void;
+};
+
+const SearchPagination = ({ limit, offset, total, onChange, ...paginationProps }: SearchPaginationProps) => {
+  const onPageChange = useCallback(
+    (_event, nextPage) => {
+      onChange(nextPage === 1 ? 0 : (nextPage - 1) * limit);
+    },
+    [limit, onChange]
+  );
+  const count = Math.ceil(total / limit);
+  const page = Math.floor((offset + 1) / limit) + 1;
+  return limit && total && limit < total ? (
+    <Pagination count={count} page={page} onChange={onPageChange} {...paginationProps} />
+  ) : null;
+};
+
+export default SearchPagination;

package/components/elements/addons/search/SearchTotal.tsx

@@ -0,0 +1,35 @@
+import type { TypographyProps } from '@mui/material';
+import { Typography } from '@mui/material';
+import { Trans } from 'react-i18next';
+
+type SearchTotalProps = TypographyProps & {
+  total: number;
+  offset: number;
+  pageLength: number;
+};
+
+const SearchTotal = ({ total, offset, pageLength, ...typographyProps }: SearchTotalProps) => {
+  return (
+    <Typography {...typographyProps}>
+      {total <= 1 ? (
+        <Trans
+          i18nKey="search.result.showing.single"
+          values={{
+            total: total
+          }}
+        />
+      ) : (
+        <Trans
+          i18nKey="search.result.showing"
+          values={{
+            total: total,
+            offset: offset + 1,
+            length: pageLength + offset
+          }}
+        />
+      )}
+    </Typography>
+  );
+};
+
+export default SearchTotal;

package/components/elements/addons/search/phrase/Phrase.tsx

@@ -0,0 +1,175 @@
+import {
+  ClickAwayListener,
+  InputAdornment,
+  ListItemText,
+  MenuItem,
+  MenuList,
+  Paper,
+  Popper,
+  TextField,
+  type TextFieldProps
+} from '@mui/material';
+import { parseEvent } from 'commons/components/utils/keyboard';
+import { type ChangeEvent, type KeyboardEvent, type ReactElement, useEffect, useRef, useState } from 'react';
+import type { PhraseAnalysis, PhraseSuggester } from '.';
+import type PhraseLexer from './PhraseLexer';
+import WordLexer from './word/WordLexer';
+import WordSuggestor from './word/WordSuggester';
+
+export type PhraseProps = Omit<TextFieldProps, 'onChange' | 'onKeyDown' | 'variant'> & {
+  value: string;
+  variant?: 'filled' | 'outlined' | 'standard';
+  suggestions?: string[];
+  lexer?: PhraseLexer;
+  suggester?: PhraseSuggester;
+  debug?: boolean;
+  startAdornment?: ReactElement | ReactElement[];
+  endAdornment?: ReactElement | ReactElement[];
+  onChange: (phrase: string) => void;
+  onKeyDown?: (event: ReturnType<typeof parseEvent>) => void;
+};
+
+const Phrase = ({
+  value = '',
+  variant = 'outlined',
+  suggestions = [],
+  lexer,
+  suggester,
+  debug,
+  startAdornment,
+  endAdornment,
+  onChange,
+  onKeyDown,
+  ...props
+}: PhraseProps) => {
+  const containerRef = useRef<HTMLDivElement>();
+  const inputRef = useRef<HTMLDivElement>();
+  const menuRef = useRef<HTMLUListElement>();
+  const lexerRef = useRef<PhraseLexer>(lexer || new WordLexer());
+  const analysisRef = useRef<PhraseAnalysis>();
+  const suggesterRef = useRef<PhraseSuggester>(suggester || new WordSuggestor(suggestions));
+  const [optionsOpen, setOptionsOpen] = useState<boolean>(false);
+  const [options, setOptions] = useState<string[]>(suggestions);
+
+  useEffect(() => {
+    suggesterRef.current = suggester || new WordSuggestor(suggestions);
+  }, [suggester, suggestions]);
+
+  const lex = (inputValue: string, offset = 0): PhraseAnalysis => {
+    let cursor = inputRef.current.querySelector('input').selectionStart + offset;
+    cursor = cursor < 0 ? 0 : cursor > inputValue.length ? inputValue.length : cursor;
+    analysisRef.current = lexerRef.current.parse(inputValue, cursor);
+    return analysisRef.current;
+  };
+
+  const onWordClick = (word: string) => {
+    const { suggest } = analysisRef.current;
+
+    const inputEl = inputRef.current.querySelector('input');
+
+    // NOTE: this is the only thing that works well with UNDO/REDO
+    // NOTE: the 'deprecated' insertText has no proper replacement to support this yet.
+    inputEl.focus();
+    inputEl.setSelectionRange(suggest.token.startIndex, suggest.token.endIndex + 1);
+    document.execCommand('insertText', false, word);
+    // NOTE: setRangeText does not work with UNDO/REDO [CTRL+Z|CTRL+SHIFT+Z]
+    // inputEl.setRangeText(word, current.startIndex, current.endIndex + 1, 'end');
+
+    setOptionsOpen(false);
+  };
+
+  const _suggest = (inputValue: string, offset = 0) => {
+    const _suggestions = suggesterRef.current.suggest(lex(inputValue, offset));
+    setOptions(_suggestions?.length > 0 ? _suggestions : [...suggestions]);
+  };
+
+  const _onChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
+
+  const _onInputKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    const parsedEvent = parseEvent(event);
+    const { isEnter, isCtrl, isSpace, isEscape, isArrowDown } = parsedEvent;
+    if (isArrowDown) {
+      event.preventDefault(); // prevent native scroll.
+      menuRef.current.focus(); // ensure suggestion menu gets focus.
+    } else if (isCtrl && isSpace) {
+      setOptionsOpen(true);
+      _suggest(value);
+    } else if (isEscape) {
+      setOptionsOpen(!optionsOpen);
+    }
+    if (isEnter && optionsOpen && options.length === 1) {
+      onWordClick(options[0]);
+      event.preventDefault();
+    } else if (onKeyDown) {
+      onKeyDown(parsedEvent);
+    }
+  };
+
+  const _onSelectCapture = event => {
+    if (optionsOpen) {
+      _suggest(event.target.value);
+    }
+  };
+
+  const _onMenuKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    const { isEscape } = parseEvent(event);
+    if (isEscape) {
+      inputRef.current.focus();
+      setOptionsOpen(false);
+    }
+  };
+
+  return (
+    <ClickAwayListener onClickAway={() => setOptionsOpen(false)}>
+      <div ref={containerRef} style={{ position: 'relative' }}>
+        <TextField
+          ref={inputRef}
+          {...props}
+          fullWidth
+          autoComplete="off"
+          value={value}
+          variant={variant}
+          onChange={_onChange}
+          onKeyDown={_onInputKeyDown}
+          InputProps={{
+            ...props.InputProps,
+            onSelectCapture: _onSelectCapture,
+            startAdornment: startAdornment && <InputAdornment position="start">{startAdornment}</InputAdornment>,
+            endAdornment: endAdornment && <InputAdornment position="end">{endAdornment}</InputAdornment>
+          }}
+        />
+        <Popper
+          anchorEl={containerRef.current}
+          style={{ width: '100%', zIndex: 100 }}
+          open={optionsOpen && (options.length > 0 || (debug && analysisRef.current?.tokens.length > 0))}
+          disablePortal
+        >
+          <Paper
+            elevation={2}
+            sx={{ maxHeight: 200, overflow: 'auto', borderTopRightRadius: 0, borderTopLeftRadius: 0 }}
+          >
+            <MenuList
+              ref={menuRef}
+              onKeyDown={_onMenuKeyDown}
+              sx={{
+                '&:focus': {
+                  outline: 'none'
+                }
+              }}
+            >
+              {options?.map(o => (
+                <MenuItem key={o} onClick={() => onWordClick(o)}>
+                  <ListItemText>{o}</ListItemText>
+                </MenuItem>
+              ))}
+            </MenuList>
+          </Paper>
+        </Popper>
+      </div>
+    </ClickAwayListener>
+  );
+};
+
+export default Phrase;

package/components/elements/addons/search/phrase/PhraseConsumer.ts

@@ -0,0 +1,35 @@
+import type { PhraseToken } from '.';
+import type PhraseLexer from './PhraseLexer';
+
+export default abstract class PhraseConsumer<L extends PhraseLexer> {
+  protected _buffer = [];
+
+  public reset(): void {
+    this._buffer = [];
+  }
+
+  public init(buffer: string[], _lexer?: L): void {
+    this._buffer = [...buffer];
+  }
+
+  public append(next: string, _lexer?: L): void {
+    this._buffer.push(next);
+  }
+
+  public bufferValue(): string {
+    return this._buffer.join('');
+  }
+
+  public endsWithAny(...values: string[]): boolean {
+    const _bufferValue = this.bufferValue();
+    return values.some(v => _bufferValue.endsWith(v));
+  }
+
+  public test(regex: RegExp): boolean {
+    return regex.test(this.bufferValue());
+  }
+
+  abstract lock(lexer: L): boolean;
+
+  abstract consume(lexer: L): PhraseToken;
+}

package/components/elements/addons/search/phrase/PhraseLexer.ts

@@ -0,0 +1,167 @@
+import type { PhraseAnalysis, PhraseToken } from '.';
+import type PhraseConsumer from './PhraseConsumer';
+
+export default abstract class PhraseLexer {
+  private _phrase: string = null;
+
+  private _buffer: string[] = null;
+
+  private _tokens: PhraseToken[] = null;
+
+  private _consumers: PhraseConsumer<PhraseLexer>[] = null;
+
+  private _consumer: PhraseConsumer<PhraseLexer> = null;
+
+  private _startIndex: number = 0;
+
+  private _endIndex: number = -1;
+
+  private find(cursor: number, tokens: PhraseToken[]): { token: PhraseToken; index: number } {
+    const index = tokens.findIndex(t => t.startIndex <= cursor && cursor <= t.endIndex);
+    const token = tokens.at(index);
+    return { index, token };
+  }
+
+  public parse(phrase: string, cursor: number = 0): PhraseAnalysis {
+    this._phrase = phrase;
+    this._buffer = [];
+    this._tokens = [];
+    this._consumers = this.consumers();
+    this._consumer = null;
+    this._startIndex = 0;
+    this._endIndex = -1;
+
+    for (let i = 0; i < this._phrase.length; i++) {
+      this._endIndex += 1;
+
+      const next = this._phrase[i];
+      this._buffer.push(next);
+
+      // console.log(this._buffer.join(''));
+
+      // Prevent duplication of next character
+      //  when aquiring new consumer lock.
+      let newLock = false;
+
+      // Try to find a consumer to lock on.
+      if (!this._consumer) {
+        this._consumer = this.lock();
+        if (this._consumer) {
+          newLock = true;
+          // console.log('new lock...');
+          // console.log(this._consumer);
+          this._consumer.init(this._buffer, this);
+        }
+      }
+
+      // If we have a consumer, write next character into it
+      //  and then see if it can consume the buffer.
+      if (this._consumer) {
+        if (newLock) {
+          newLock = false;
+        } else {
+          this._consumer.append(next, this);
+        }
+
+        const token = this._consumer.consume(this);
+        if (token) {
+          this._tokens.push(token);
+          this._buffer = [];
+          this._consumer = null;
+          this._startIndex = this._endIndex + 1;
+        }
+      }
+    }
+
+    // Always add a EOP (end-of-phrase) token.
+    this._tokens.push({ type: 'eop', startIndex: phrase.length, endIndex: phrase.length, value: '' });
+
+    // Flatten token structure.
+    // By collapsing all children token, we can find the exact token for the current cursor position.
+    const flatTokens = this._tokens.flatMap(t => (t.children && t.children.length > 0 ? t.children : [t]));
+
+    // Find the index of the token within range or cursor.
+    const { token: parent, index: parentIndex } = this.find(cursor, this._tokens);
+    const { token: current, index: currentIndex } = this.find(cursor, flatTokens);
+
+    // Figure out which token to use to generate suggestions.
+    // When at the start of a token, use the previous one.
+    // console.log(currentIndex);
+    // console.log(flatTokens[currentIndex - 1]);
+    const filter =
+      cursor === current.startIndex && flatTokens[currentIndex - 1] ? flatTokens[currentIndex - 1] : current;
+
+    return {
+      cursor,
+      parentIndex,
+      parent,
+      currentIndex,
+      current,
+      suggest: {
+        token: filter,
+        parent: this.find(filter.startIndex, this._tokens).token,
+        value: filter.value.substring(0, cursor - filter.startIndex)
+      },
+      tokens: this._tokens
+    };
+  }
+
+  public lock(): PhraseConsumer<PhraseLexer> {
+    return this._consumers.find(c => c.lock(this));
+  }
+
+  public buffer(): string[] {
+    return this._buffer;
+  }
+
+  public bufferValue(): string {
+    return this._buffer.join('');
+  }
+
+  public start(): number {
+    return this._startIndex;
+  }
+
+  public end(): number {
+    return this._endIndex;
+  }
+
+  public ahead(inc?: number): string {
+    const start = this._endIndex + 1;
+    if (inc) {
+      return this._phrase.slice(start, start + inc);
+    }
+    return this._phrase.substring(start);
+  }
+
+  public behind(inc?: number): string {
+    if (inc) {
+      return this.bufferValue().slice(-inc);
+    }
+    return this.bufferValue();
+  }
+
+  public behindEndsWithAny(trim: boolean, ...values: string[]): boolean {
+    const behind = trim ? this.behind().trimEnd() : this.behind();
+    return values.some(v => behind.endsWith(v));
+  }
+
+  public testBehind(regex: RegExp): boolean {
+    return regex.test(this.behind());
+  }
+
+  public aheadStartsWithAny(trim: boolean, ...values: string[]): boolean {
+    const ahead = trim ? this.ahead().trimStart() : this.ahead();
+    return values.some(v => ahead.startsWith(v));
+  }
+
+  public aheadIsEmpty(trim: boolean = false): boolean {
+    return trim ? this.ahead().trim().length === 0 : this.ahead().length === 0;
+  }
+
+  public testAhead(regex: RegExp): boolean {
+    return regex.test(this.ahead());
+  }
+
+  abstract consumers(): PhraseConsumer<PhraseLexer>[];
+}