@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

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

@@ -1,77 +0,0 @@
-import { Collapse } from '@mui/material';
-import AppListEmpty from '@cccsaurora/howler-ui/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

@@ -1,29 +0,0 @@
-import { VSBoxContext } from '@cccsaurora/howler-ui/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

@@ -1,15 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,175 +0,0 @@
-import {
-  ClickAwayListener,
-  InputAdornment,
-  ListItemText,
-  MenuItem,
-  MenuList,
-  Paper,
-  Popper,
-  TextField,
-  type TextFieldProps
-} from '@mui/material';
-import { parseEvent } from '@cccsaurora/howler-ui/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

@@ -1,35 +0,0 @@
-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

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