@tcn/ui 0.0.1

package/src/inputs/mask_input/mask_presenter.ts

@@ -0,0 +1,306 @@
+import { Signal } from '@tcn/state';
+import { Mask } from './mask.js';
+import { MaskConfig } from './mask_config.js';
+
+function areMasksUniqueLengths(masks: Mask[]) {
+  const set = new Set();
+  masks.forEach(m => set.add(m.getCharacterLength()));
+
+  return set.size === masks.length;
+}
+
+function maskSort(a: Mask, b: Mask) {
+  if (a.getInsertableSlotLength() > b.getInsertableSlotLength()) {
+    return 1;
+  } else if (a.getInsertableSlotLength() > b.getInsertableSlotLength()) {
+    return -1;
+  } else {
+    return a.getCharacterLength() - b.getCharacterLength();
+  }
+}
+
+interface SelectionRange {
+  start: number;
+  end: number;
+}
+
+export class MaskPresenter {
+  private _masks: Mask[];
+  private _currentMaskIndex: number;
+  private _value: Signal<string>;
+  private _filledValue: Signal<string>;
+  private _cursorPosition: Signal<number>;
+  private _selection: Signal<SelectionRange | null>;
+  private _maskConfigs: Signal<MaskConfig[]>;
+
+  get valueBroadcast() {
+    return this._value.broadcast;
+  }
+
+  get filledValueBroadcast() {
+    return this._filledValue.broadcast;
+  }
+
+  get cursorPositionBroadcast() {
+    return this._cursorPosition.broadcast;
+  }
+
+  get selectionBroadcast() {
+    return this._selection.broadcast;
+  }
+
+  get currentMask() {
+    return this._masks[this._currentMaskIndex];
+  }
+
+  get maskConfigsBroadcast() {
+    return this._maskConfigs.broadcast;
+  }
+
+  constructor(maskConfigs: MaskConfig[]) {
+    this._masks = this._createMasks(maskConfigs);
+    this._currentMaskIndex = 0;
+    this._cursorPosition = new Signal(0);
+    this._value = new Signal(this._masks[this._currentMaskIndex].getValue());
+    this._filledValue = new Signal(this._masks[this._currentMaskIndex].getFilledValue());
+    this._selection = new Signal<SelectionRange | null>(null);
+    this._maskConfigs = new Signal(maskConfigs);
+  }
+
+  private _createMasks(maskConfigs: MaskConfig[]) {
+    const masks = maskConfigs.map(c => new Mask(c));
+
+    if (maskConfigs.length < 1) {
+      throw new Error('Have to have at least one mask.');
+    }
+
+    if (!areMasksUniqueLengths(masks)) {
+      throw new Error('Masks need to be different lengths.');
+    }
+
+    masks.sort(maskSort);
+    return masks;
+  }
+
+  initialize() {
+    this.moveCursorTo(0);
+  }
+
+  isComplete() {
+    return this.currentMask.ifFilled();
+  }
+
+  setMaskConfigs(maskConfigs: MaskConfig[]) {
+    const oldValue = this._value.get();
+
+    this._masks = this._createMasks(maskConfigs);
+    this._currentMaskIndex = 0;
+
+    this.moveCursorTo(0);
+    this.insertText(oldValue);
+    this._maskConfigs.set(maskConfigs);
+  }
+
+  setValue(value: string) {
+    if (this._value.get() === value) {
+      return;
+    }
+    this.selectAll();
+    this.backspace();
+    const cursorPosition = this._cursorPosition.get();
+    this.moveCursorTo(0);
+    this.insertText(value);
+    this.moveCursorTo(cursorPosition);
+  }
+
+  insertText(text: string) {
+    const characters = [...text];
+    const selection = this._selection.get();
+
+    if (selection != null) {
+      this._removeCharactersWithinSelection(selection);
+    }
+
+    if (characters.length < 1) {
+      const newValue = this.currentMask.getValue();
+      const newFilledValue = this.currentMask.getFilledValue();
+      this._transitionToPreviousMaskIfNecessary();
+      this._value.set(newValue);
+      this._filledValue.set(newFilledValue);
+      this._cursorPosition.set(this.currentMask.getCursorPosition());
+      return;
+    }
+
+    for (let character of characters) {
+      const needsToTransitionToNextMask =
+        this.currentMask.ifFilled() && this._currentMaskIndex + 1 < this._masks.length;
+      if (needsToTransitionToNextMask) {
+        const isOnLast =
+          this.currentMask.getCursorPosition() >= this.currentMask.getCharacterLength();
+        const insertableSlotIndex = this.currentMask.getInsertableSlotIndexForCharacter(
+          this.currentMask.getCursorPosition()
+        );
+        const insertedText = this.currentMask.getInsertableSlotValues();
+
+        this._currentMaskIndex += 1;
+        this.currentMask.clearAll();
+
+        this.insertText(insertedText);
+
+        const cursorPosition =
+          this.currentMask.getCharacterIndexforInsertableSlotIndex(insertableSlotIndex);
+
+        if (isOnLast) {
+          this.currentMask.moveTo(cursorPosition + 1);
+        } else {
+          this.currentMask.moveTo(cursorPosition);
+        }
+      }
+
+      const inserted = this.currentMask.insert(character);
+      inserted && this.currentMask.moveRight();
+    }
+
+    const newValue = this.currentMask.getValue();
+    const newFilledValue = this.currentMask.getFilledValue();
+    this._value.set(newValue);
+    this._filledValue.set(newFilledValue);
+    this._cursorPosition.set(this.currentMask.getCursorPosition());
+  }
+
+  delete() {
+    const selection = this._selection.get();
+    if (selection != null) {
+      this._removeCharactersWithinSelection(selection);
+    } else {
+      this.currentMask.deleteCharacter();
+    }
+
+    this._transitionToPreviousMaskIfNecessary();
+    this._value.set(this.currentMask.getValue());
+    this._filledValue.set(this.currentMask.getFilledValue());
+    this._cursorPosition.set(this.currentMask.getCursorPosition());
+  }
+
+  private _transitionToPreviousMaskIfNecessary() {
+    const prevMask = this._masks[this._currentMaskIndex - 1];
+
+    const needsToTransitionToPrevMask =
+      prevMask &&
+      this.currentMask.getInsertableSlotValues().length <=
+        prevMask.getInsertableSlotLength();
+
+    if (needsToTransitionToPrevMask) {
+      const insertableSlotIndex = this.currentMask.getInsertableSlotIndexForCharacter(
+        this.currentMask.getCursorPosition()
+      );
+      const text = this.currentMask.getInsertableSlotValues();
+
+      this._currentMaskIndex -= 1;
+
+      prevMask.clearAll();
+
+      this.currentMask.moveTo(0);
+      this.insertText(text);
+
+      const cursorPosition =
+        this.currentMask.getCharacterIndexforInsertableSlotIndex(insertableSlotIndex);
+      this.currentMask.moveTo(cursorPosition);
+    }
+  }
+
+  private _removeCharactersWithinSelection(selection: SelectionRange) {
+    this.currentMask.clearRange(selection.start, selection.end);
+    this.currentMask.moveTo(selection.start);
+    this.removeSelection();
+  }
+
+  backspace() {
+    const selection = this._selection.get();
+    if (selection != null) {
+      this._removeCharactersWithinSelection(selection);
+    } else {
+      this.currentMask.moveTo(this.currentMask.getCursorPosition() - 1);
+      this.currentMask.deleteCharacter();
+    }
+
+    this._transitionToPreviousMaskIfNecessary();
+    this._value.set(this.currentMask.getValue());
+    this._filledValue.set(this.currentMask.getFilledValue());
+    this._cursorPosition.set(this.currentMask.getCursorPosition());
+
+    if (this.currentMask.getFilledLength() === 0) {
+      this._currentMaskIndex = 0;
+      this.currentMask.clearAll();
+    }
+  }
+
+  moveCursorRight() {
+    this.removeSelection();
+    this.currentMask.moveRight();
+
+    this._cursorPosition.set(this.currentMask.getCursorPosition());
+  }
+
+  moveCursorLeft() {
+    this.removeSelection();
+    this.currentMask.moveLeft();
+
+    this._cursorPosition.set(this.currentMask.getCursorPosition());
+  }
+
+  moveCursorTo(position: number) {
+    const finalPosition = Math.min(this.currentMask.getValueLength(), position);
+
+    this.removeSelection();
+    this.currentMask.moveTo(finalPosition);
+
+    this._cursorPosition.set(this.currentMask.getCursorPosition());
+  }
+
+  forceMoveCursorTo(position: number) {
+    this.currentMask.forceMoveTo(position);
+  }
+
+  clearRange(start: number, end: number) {
+    this.currentMask.clearRange(start, end);
+    this.currentMask.moveTo(start);
+
+    this._value.set(this.currentMask.getValue());
+    this._filledValue.set(this.currentMask.getFilledValue());
+    this._cursorPosition.set(this.currentMask.getCursorPosition());
+  }
+
+  clearAll() {
+    this.selectAll();
+    this.backspace();
+  }
+
+  getLength() {
+    return this.currentMask.getValueLength();
+  }
+
+  selectAll() {
+    this.setSelection(0, this.currentMask.getValueLength());
+  }
+
+  setSelection(start: number, end: number) {
+    this._selection.set({ start: Math.min(start, end), end: Math.max(start, end) });
+    this._cursorPosition.set(start);
+  }
+
+  removeSelection() {
+    this._selection.transform(_ => {
+      return null;
+    });
+  }
+
+  getSelectedValue() {
+    const selection = this._selection.get();
+    if (selection != null) {
+      return this.currentMask.getValueWithinRange(selection.start, selection.end);
+    }
+
+    return '';
+  }
+}

package/src/inputs/mask_input/numeric_character.ts

@@ -0,0 +1,13 @@
+import { RegexCharacter } from './regex_character.js';
+
+export class NumericCharacter extends RegexCharacter {
+  /**
+   *
+   * @param character The character supplied to the mask.
+   * @param placeholder The placeholder supplied to the mask.
+   */
+  constructor(character: string, placeholder: string) {
+    super(character, /[0-9]/, placeholder);
+    this.type = 'numeric';
+  }
+}

package/src/inputs/mask_input/regex_character.ts

@@ -0,0 +1,62 @@
+import { MaskCursor } from './mask_cursor.js';
+import { Character } from './character.js';
+
+export class RegexCharacter extends Character {
+  private regex: RegExp;
+  private isValueSet = false;
+
+  constructor(character: string, regex: RegExp, placeholderCharacter?: string) {
+    super(character, placeholderCharacter);
+    this.type = 'regex';
+    this.regex = regex;
+    this.value = placeholderCharacter == null ? '_' : placeholderCharacter;
+    this.placeholder = this.value;
+  }
+
+  enter(cursor: MaskCursor) {
+    if (!this.isFilled() && cursor.isPreviousCharacterEmpty()) {
+      cursor.moveLeft();
+    }
+  }
+
+  enterFromRight(cursor: MaskCursor): void {
+    const position = cursor.getCursorPosition();
+    const isFilledBeyondCurrentPosition = cursor.isFilledBeyondIndex(position);
+    if (!this.isFilled() && !isFilledBeyondCurrentPosition) {
+      cursor.moveLeft();
+    }
+
+    if (this.isFilled()) {
+      cursor.moveRight();
+    }
+  }
+
+  insert(value: string, cursor: MaskCursor): boolean {
+    const passed = this.regex.test(value);
+
+    if (passed && this.isValueSet) {
+      const position = cursor.getCursorPosition();
+      cursor.moveRight();
+      cursor.insertPush(this.value);
+
+      cursor.moveTo(position);
+    }
+
+    if (passed) {
+      this.isValueSet = true;
+      this.value = value;
+      return true;
+    }
+
+    return false;
+  }
+
+  delete() {
+    this.isValueSet = false;
+    this.value = this.placeholder;
+  }
+
+  isFilled() {
+    return this.isValueSet;
+  }
+}

package/src/inputs/multi_combo_box/multi_combo_box.module.css

@@ -0,0 +1,3 @@
+.multi-combo-box-container {
+  gap: 1px;
+}

package/src/inputs/multi_combo_box/multi_combo_box.stories.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { MultiComboBox as Component } from './multi_combo_box.js';
+import { Option } from '../options/option.js';
+import styles from '../__storybook__/stories.module.css';
+
+export default {
+  title: 'Multi Combo Box',
+};
+
+function Base(props: Omit<React.ComponentProps<typeof Component>, 'children'>) {
+  const [values, setValues] = useState<string[]>(props.value || []);
+
+  return (
+    <Component onChange={setValues} {...props} value={values}>
+      <Option value="1" label="First">
+        First
+      </Option>
+      <Option value="2" label="Second">
+        Second
+      </Option>
+      <Option value="3" label="Third">
+        Third
+      </Option>
+      <Option value="4" label="Fourth">
+        Fourth
+      </Option>
+      <Option value="5" label="Fifth">
+        Fifth
+      </Option>
+    </Component>
+  );
+}
+
+export function FreeformMultiselect() {
+  return (
+    <table className={styles.story}>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Component</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Baseline</td>
+          <td>
+            <Base />
+          </td>
+        </tr>
+        <tr>
+          <td>Disabled</td>
+          <td>
+            <Base disabled />
+          </td>
+        </tr>
+        <tr>
+          <td>With Value</td>
+          <td>
+            <Base value={['1', '3']} />
+          </td>
+        </tr>
+        <tr>
+          <td>Inline</td>
+          <td>
+            <Base width="200px" inline />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/src/inputs/multi_combo_box/multi_combo_box.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import { ComboBox } from '../combo_box/combo_box.js';
+import { InputProps } from '../input/input.js';
+import { MultiselectInlineValues } from '../multiselect/multiselect_inline_values.js';
+import { MultiselectValues } from '../multiselect/multiselect_values.js';
+import { makeAvailableOptions } from '../options/utils.js';
+import { OptionProps } from '../options/option.js';
+import { Option } from '../options/option.js';
+
+import styles from './multi_combo_box.module.css';
+import classNames from 'classnames';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+
+export interface MultiComboBoxProps extends Omit<VStackProps, 'onChange'> {
+  children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
+  onChange?: (values: string[]) => void;
+  value?: string[];
+  disabled?: boolean;
+  inline?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
+  inputProps?: InputProps;
+  trimCustomInput?: boolean;
+}
+
+export const MultiComboBox = React.forwardRef(function MultiComboBox(
+  {
+    value: values = [],
+    children,
+    disabled = false,
+    className,
+    onChange,
+    inline = false,
+    inputRef,
+    trimCustomInput = false,
+    inputProps,
+    ...props
+  }: MultiComboBoxProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const [intervalValue, setInternalValue] = useState('');
+  const childrenArray = React.Children.toArray(
+    children
+  ) as React.ReactElement<OptionProps>[];
+
+  const availableOptions = makeAvailableOptions(childrenArray, values);
+  const valuesAsOptions = values.map(v => {
+    const option = childrenArray.find(o => o.props.value === v);
+    if (option == null) {
+      return (
+        <Option value={v} label={v}>
+          {v}
+        </Option>
+      );
+    }
+    return option;
+  });
+
+  function removeValue(option: React.ReactElement<OptionProps>) {
+    const index = values.indexOf(option.props.value);
+
+    if (index > -1) {
+      const newValues = values.filter(v => v !== option.props.value);
+      onChange && onChange(newValues);
+    }
+  }
+
+  function addValue(newValue: string) {
+    if (newValue.trim() === '') {
+      return;
+    }
+
+    const index = values.indexOf(newValue);
+
+    if (index === -1) {
+      onChange && onChange([...values, newValue]);
+    }
+
+    setInternalValue('');
+  }
+
+  if (inline) {
+    return (
+      <>
+        <ComboBox
+          ref={inputRef}
+          value={intervalValue}
+          onChange={setInternalValue}
+          onOptionSelect={addValue}
+          trimCustomInput={trimCustomInput}
+          disabled={disabled}
+          noOptionMatchedMessage="Press Enter To Add"
+          placeholder="Type to Add"
+          {...inputProps}
+        >
+          {availableOptions}
+        </ComboBox>
+        <MultiselectInlineValues
+          values={valuesAsOptions}
+          disabled={disabled}
+          onRemove={removeValue}
+        />
+      </>
+    );
+  }
+
+  return (
+    <VStack
+      ref={ref}
+      {...props}
+      className={classNames(styles['multi-combo-box-container'], className)}
+    >
+      <ComboBox
+        ref={inputRef}
+        value={intervalValue}
+        onChange={setInternalValue}
+        onOptionSelect={addValue}
+        trimCustomInput={trimCustomInput}
+        disabled={disabled}
+        noOptionMatchedMessage="No Options Matched"
+        placeholder="Type to Search or Add"
+        {...inputProps}
+      >
+        {availableOptions}
+      </ComboBox>
+      <MultiselectValues
+        values={valuesAsOptions}
+        onRemove={removeValue}
+        disabled={disabled}
+        className="multi-combo-box-values-container"
+      />
+    </VStack>
+  );
+});

package/src/inputs/multiselect/multiselect.module.css

@@ -0,0 +1,3 @@
+.multiselect-container {
+  gap: 1px;
+}