@tcn/ui 0.0.1

package/src/inputs/input/input.stories.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Input as Component, InputProps } from './input.js';
+import styles from '../__storybook__/stories.module.css';
+import { VStack } from '../../stacks/v_stack.js';
+
+export default {
+  title: 'Input',
+};
+
+function Base(props: InputProps) {
+  const [value, setValue] = React.useState(props.value || '');
+
+  return <Component onChange={setValue} {...props} value={value} />;
+}
+
+export function Input() {
+  return (
+    <table className={styles.story}>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Component</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Baseline</td>
+          <td>
+            <Base value={'hello world!'} />
+          </td>
+        </tr>
+        <tr>
+          <td>Placeholder</td>
+          <td>
+            <Base placeholder="Enter text here..." />
+          </td>
+        </tr>
+        <tr>
+          <td>disabled</td>
+          <td>
+            <Base disabled />
+          </td>
+        </tr>
+        <tr>
+          <td>disabled with value</td>
+          <td>
+            <Base disabled value="i can't move" />
+          </td>
+        </tr>
+        <tr>
+          <td>Time input (native)</td>
+          <td>
+            <Base type="time" />
+          </td>
+        </tr>
+        <tr>
+          <td>Time input with value</td>
+          <td>
+            <Base type="time" value="14:30" />
+          </td>
+        </tr>
+        <tr>
+          <td>Time input with min/max</td>
+          <td>
+            <Base type="time" min="09:00" max="17:00" value="12:00" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}
+
+export function NativeInputTypes() {
+  const inputTypes = [
+    { type: 'text', value: 'Hello World', description: 'Text input' },
+    { type: 'password', value: 'secret123', description: 'Password input' },
+    { type: 'email', value: 'user@example.com', description: 'Email input' },
+    { type: 'url', value: 'https://example.com', description: 'URL input' },
+    { type: 'tel', value: '+1-555-123-4567', description: 'Telephone input' },
+    { type: 'number', value: '42', description: 'Number input' },
+    { type: 'range', value: '50', description: 'Range slider' },
+    { type: 'date', value: '2024-01-15', description: 'Date picker' },
+    { type: 'time', value: '14:30', description: 'Time picker' },
+    {
+      type: 'datetime-local',
+      value: '2024-01-15T14:30',
+      description: 'Date and time picker',
+    },
+    { type: 'month', value: '2024-01', description: 'Month picker' },
+    { type: 'week', value: '2024-W03', description: 'Week picker' },
+    { type: 'color', value: '#ff0000', description: 'Color picker' },
+    { type: 'search', value: 'search term', description: 'Search input' },
+    { type: 'file', description: 'File upload' },
+    { type: 'checkbox', description: 'Checkbox' },
+    { type: 'radio', description: 'Radio button' },
+    { type: 'submit', value: 'Submit', description: 'Submit button' },
+    { type: 'reset', value: 'Reset', description: 'Reset button' },
+    { type: 'button', value: 'Button', description: 'Button' },
+    { type: 'image', description: 'Image button' },
+    { type: 'hidden', value: 'hidden value', description: 'Hidden input' },
+  ];
+
+  return (
+    <VStack overflowY="auto">
+      <table className={styles.story}>
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Component</th>
+          </tr>
+        </thead>
+        <tbody>
+          {inputTypes.map(({ type, value, description }) => (
+            <tr key={type}>
+              <td>
+                <code>{type}</code>
+              </td>
+              <td>{description}</td>
+              <td>
+                <Base type={type} value={value} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </VStack>
+  );
+}

package/src/inputs/input/input.tsx

@@ -0,0 +1,36 @@
+import classnames from 'classnames';
+import React from 'react';
+import { HTMLAttributes } from 'react';
+import styles from './input.module.css';
+
+export interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
+  type?: React.HTMLInputTypeAttribute;
+  width?: string;
+  height?: string;
+  value?: string;
+  disabled?: boolean;
+  min?: string;
+  max?: string;
+  placeholder?: string;
+  onChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Input = React.forwardRef(function Input(
+  { type = 'text', style, className, width, height, onChange, ...props }: InputProps,
+  ref: React.Ref<HTMLInputElement>
+) {
+  return (
+    <input
+      className={classnames(styles.input, className, 'input')}
+      type={type}
+      ref={ref}
+      data-is-disabled={props.disabled || false}
+      aria-disabled={props.disabled || false}
+      onChange={e => {
+        onChange && onChange(e.currentTarget.value, e);
+      }}
+      {...props}
+      style={{ width, height, ...style }}
+    />
+  );
+});

package/src/inputs/mask_input/__tests__/mask_presenter.test.ts

@@ -0,0 +1,131 @@
+import { MaskPresenter } from '../mask_presenter.js';
+import { describe, expect, test } from 'vitest';
+
+describe('MaskPresenter', () => {
+  test('Empty Mask', () => {
+    expect(() => {
+      new MaskPresenter([{ mask: '' }]);
+    }).toThrow();
+  });
+
+  test('All Constants', () => {
+    expect(() => {
+      new MaskPresenter([{ mask: '()' }]);
+    }).toThrow();
+  });
+
+  test('Valid Mask', () => {
+    const maskPresenter = new MaskPresenter([{ mask: '(9)' }]);
+    maskPresenter.insertText('(1)');
+    expect(maskPresenter.valueBroadcast.get()).toBe('(1)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(3);
+    maskPresenter.insertText('2');
+    expect(maskPresenter.valueBroadcast.get()).toBe('(1)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(3);
+    maskPresenter.moveCursorLeft();
+    maskPresenter.clearAll();
+    expect(maskPresenter.valueBroadcast.get()).toBe('(_)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(0);
+    maskPresenter.insertText('3');
+    expect(maskPresenter.valueBroadcast.get()).toBe('(3)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(2);
+    maskPresenter.setSelection(0, 3);
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(0);
+    maskPresenter.insertText('4');
+    expect(maskPresenter.valueBroadcast.get()).toBe('(4)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(2);
+  });
+
+  test('Pasting around constants', () => {
+    const maskPresenter = new MaskPresenter([{ mask: '(9)(9)' }]);
+    maskPresenter.insertText('(1)');
+    expect(maskPresenter.valueBroadcast.get()).toBe('(1)(_)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(3);
+    maskPresenter.insertText('2');
+    expect(maskPresenter.valueBroadcast.get()).toBe('(1)(2)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(5);
+    maskPresenter.setSelection(0, 6);
+    maskPresenter.insertText('34');
+    expect(maskPresenter.valueBroadcast.get()).toBe('(3)(4)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(5);
+    maskPresenter.setSelection(0, 6);
+    maskPresenter.insertText('(5)(6)');
+    expect(maskPresenter.valueBroadcast.get()).toBe('(5)(6)');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(6);
+  });
+
+  test('Date', () => {
+    const maskPresenter = new MaskPresenter([{ mask: '99/99/99' }]);
+    maskPresenter.insertText('01/aa/90');
+    expect(maskPresenter.valueBroadcast.get()).toBe('01/90/__');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(5);
+    maskPresenter.insertText('77');
+    expect(maskPresenter.valueBroadcast.get()).toBe('01/90/77');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(8);
+  });
+
+  test('Initialize', () => {
+    const maskPresenter = new MaskPresenter([{ mask: '99/99/99' }]);
+    expect(maskPresenter.valueBroadcast.get()).toBe('__/__/__');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(0);
+  });
+
+  test('Move Cursor and set slots.', () => {
+    const maskPresenter = new MaskPresenter([{ mask: '99/99/99' }]);
+    maskPresenter.moveCursorTo(2);
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(0);
+    maskPresenter.insertText('4');
+    expect(maskPresenter.valueBroadcast.get()).toBe('4_/__/__');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(1);
+    maskPresenter.moveCursorTo(5);
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(2);
+    maskPresenter.insertText('6');
+    expect(maskPresenter.valueBroadcast.get()).toBe('4_/6_/__');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(4);
+  });
+
+  test('Escaping characters.', () => {
+    const maskPresenter = new MaskPresenter([{ mask: '\\99/99/99' }]);
+    maskPresenter.insertText('4');
+    expect(maskPresenter.cursorPositionBroadcast.get()).toBe(2);
+    expect(maskPresenter.valueBroadcast.get()).toBe('94/__/__');
+  });
+
+  test.skip('Escaping characters all escaped.', () => {
+    expect(() => {
+      new MaskPresenter([{ mask: '\\9\\9' }]);
+    }).toThrow();
+  });
+
+  test('Invalid Mask Overlay.', () => {
+    expect(() => {
+      new MaskPresenter([{ mask: '99/99/9999', placeholder: '' }]);
+    }).toThrow();
+  });
+
+  test('Valid mask overlay', () => {
+    const maskPresenter = new MaskPresenter([
+      { mask: '99/99/9999', placeholder: 'mm/dd/yyyy' },
+    ]);
+    maskPresenter.insertText('0');
+    expect(maskPresenter.valueBroadcast.get()).toBe('0m/dd/yyyy');
+    maskPresenter.insertText('9');
+    expect(maskPresenter.valueBroadcast.get()).toBe('09/dd/yyyy');
+  });
+
+  test('Insert past the end', () => {
+    const maskPresenter = new MaskPresenter([
+      { mask: '99/99/9999', placeholder: 'mm/dd/yyyy' },
+    ]);
+    maskPresenter.insertText('000099998888');
+    expect(maskPresenter.valueBroadcast.get()).toBe('00/00/9999');
+    maskPresenter.insertText('5');
+    expect(maskPresenter.valueBroadcast.get()).toBe('00/00/9999');
+  });
+
+  test('Using an emoji in the mask.', () => {
+    const maskPresenter = new MaskPresenter([{ mask: '😀9😃9😄9😁' }]);
+    maskPresenter.insertText('0000');
+    expect(maskPresenter.valueBroadcast.get()).toBe('😀0😃0😄0😁');
+  });
+});

package/src/inputs/mask_input/alpha_character.ts

@@ -0,0 +1,13 @@
+import { RegexCharacter } from './regex_character.js';
+
+export class AlphaCharacter 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, /[a-zA-Z]/, placeholder);
+    this.type = 'alpha';
+  }
+}

package/src/inputs/mask_input/alpha_numeric_character.ts

@@ -0,0 +1,13 @@
+import { RegexCharacter } from './regex_character.js';
+
+export class AlphaNumericCharacter 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, /[a-zA-Z0-9]/, placeholder);
+    this.type = 'alpha-numeric';
+  }
+}

package/src/inputs/mask_input/character.ts

@@ -0,0 +1,31 @@
+import { MaskCursor } from './mask_cursor.js';
+
+export abstract class Character {
+  type: string;
+  value: string;
+  placeholder: string;
+
+  constructor(_character: string, _placeholderCharacter?: string) {
+    this.type = 'character';
+    this.value = _character;
+    this.placeholder = _placeholderCharacter == null ? _character : _placeholderCharacter;
+  }
+  enterFromRight(_cursor: MaskCursor) {
+    return;
+  }
+  enterFromLeft(_cursor: MaskCursor) {
+    return;
+  }
+  enter(_cursor: MaskCursor) {
+    return;
+  }
+  insert(_value: string, _cursor: MaskCursor): boolean {
+    return false;
+  }
+  delete() {
+    return;
+  }
+  isFilled() {
+    return false;
+  }
+}

package/src/inputs/mask_input/constant_character.ts

@@ -0,0 +1,46 @@
+import { MaskCursor } from './mask_cursor.js';
+import { Character } from './character.js';
+
+export class ConstantCharacter extends Character {
+  constructor(character: string, placeholderCharacter?: string) {
+    super(character, placeholderCharacter);
+    this.type = 'constant';
+    this.value = character;
+    this.placeholder = placeholderCharacter == null ? character : placeholderCharacter;
+  }
+
+  enterFromRight(cursor: MaskCursor): void {
+    const position = cursor.getCursorPosition();
+    const isEmptyBeforeCurrentPosition = cursor.isEmptyBeforeIndex(position);
+    if (isEmptyBeforeCurrentPosition) {
+      cursor.moveLeft();
+    }
+
+    if (cursor.arePreviousCharactersAllConstants() || position === 0) {
+      cursor.moveRight();
+    }
+  }
+
+  enter(cursor: MaskCursor) {
+    if (cursor.isPreviousCharacterEmpty()) {
+      cursor.moveLeft();
+    }
+  }
+
+  insert(value: string, cursor: MaskCursor): boolean {
+    if (value === this.value) {
+      return true;
+    }
+
+    cursor.moveRight();
+    if (cursor.getCursorPosition() !== cursor.getCharacterLength() - 1) {
+      return cursor.insert(value);
+    }
+
+    return false;
+  }
+
+  isFilled(): boolean {
+    return true;
+  }
+}

package/src/inputs/mask_input/key_capture_input.stories.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { BodyText } from '../../typography/index.js';
+import { Box } from '../../stacks/box/box.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import { KeyCaptureInput as Component, Range } from './key_capture_input.js';
+
+export default {
+  title: 'Key Capture Input',
+};
+
+export function KeyCaptureInput() {
+  const [value, setValue] = useState('');
+  const [key, setKey] = useState('');
+  const [meta, setMeta] = useState('');
+
+  function record(
+    input: string,
+    key: string,
+    selection: Range | null,
+    cursorPosition: number,
+    finalCursorPosition: number
+  ) {
+    setKey(input);
+    setMeta(
+      `input: "${input}", key: ${key}, selection: ${selection?.start}-${selection?.end}, cursor: ${cursorPosition}, finalCursor: ${finalCursorPosition}`
+    );
+  }
+
+  return (
+    <VStack>
+      <Component
+        onKeyCapture={record}
+        value={value}
+        onChange={(value, _event) => {
+          setValue(value);
+        }}
+      />
+      <Spacer height="10px" />
+      <ZStack
+        width="auto"
+        minWidth="50px"
+        paddingInline="8px"
+        height="50px"
+        style={{ borderRadius: '8px', boxShadow: '0 0 10px rgba(0, 0, 0, 0.25)' }}
+      >
+        <BodyText size="lg" emphasis="strong">
+          {key}
+        </BodyText>
+      </ZStack>
+      <Spacer />
+      <Box
+        width="auto"
+        minWidth="50px"
+        height="auto"
+        minHeight="50px"
+        style={{ borderRadius: '8px' }}
+        padding="8px"
+      >
+        <ZStack>
+          <BodyText size="lg" emphasis="strong">
+            {meta}
+          </BodyText>
+        </ZStack>
+      </Box>
+    </VStack>
+  );
+}

package/src/inputs/mask_input/key_capture_input.tsx

@@ -0,0 +1,144 @@
+import { useForkRef } from '../../utils/index.js';
+import React from 'react';
+import { useRef } from 'react';
+import { Input, InputProps } from '../input/input.js';
+
+export interface Range {
+  start: number;
+  end: number;
+}
+
+export interface KeyCaptureInputProps extends InputProps {
+  onKeyCapture?: (
+    input: string,
+    key: string,
+    selection: Range | null,
+    cursorPosition: number,
+    finalCursorPosition: number,
+    inputElement: HTMLInputElement
+  ) => void;
+}
+
+export const KeyCaptureInput = React.forwardRef(function InputCapture(
+  { onKeyCapture, onKeyDown, onInput, ...props }: KeyCaptureInputProps,
+  ref
+) {
+  const valueLengthRef = useRef(0);
+  const selectionStartRef = useRef(0);
+  const selectionEndRef = useRef(0);
+  const minCursorPositionRef = useRef(0);
+  const maxCursorPositionRef = useRef(0);
+  const cursorPositionRef = useRef(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const forkedRef = useForkRef(ref, inputRef);
+
+  function handleKeydown(event: React.KeyboardEvent<HTMLInputElement>) {
+    const inputElement = inputRef.current;
+
+    if (inputElement == null) {
+      return;
+    }
+
+    valueLengthRef.current = inputElement.value.length;
+    selectionStartRef.current =
+      inputElement.selectionStart == null ? 0 : inputElement.selectionStart;
+    selectionEndRef.current =
+      inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;
+    cursorPositionRef.current = selectionEndRef.current;
+    minCursorPositionRef.current = Math.min(
+      selectionStartRef.current,
+      selectionEndRef.current
+    );
+
+    maxCursorPositionRef.current = Math.max(
+      selectionStartRef.current,
+      selectionEndRef.current
+    );
+
+    onKeyDown && onKeyDown(event);
+  }
+
+  function handleInput(event: React.ChangeEvent<HTMLInputElement>) {
+    const inputElement = inputRef.current;
+
+    if (inputElement == null) {
+      return;
+    }
+
+    const valueLength = inputElement.value.length;
+    const hadSelection = selectionStartRef.current !== selectionEndRef.current;
+    const inputSelectionStart =
+      inputElement.selectionStart == null ? 0 : inputElement.selectionStart;
+    const inputSelectionEnd =
+      inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;
+    const minCursorPosition = Math.min(inputSelectionStart, inputSelectionEnd);
+    const maxCursorPosition = Math.max(inputSelectionStart, inputSelectionEnd);
+    const cursorPosition = inputSelectionEnd;
+
+    if (hadSelection) {
+      const input = inputElement.value.slice(
+        minCursorPositionRef.current,
+        maxCursorPosition
+      );
+      const selection = {
+        start: selectionStartRef.current,
+        end: selectionEndRef.current,
+      };
+      onKeyCapture &&
+        onKeyCapture(
+          input,
+          '',
+          selection,
+          cursorPositionRef.current,
+          cursorPosition,
+          inputElement
+        );
+    } else {
+      const collapsed = valueLengthRef.current > valueLength;
+      if (collapsed) {
+        const deleted = minCursorPositionRef.current === minCursorPosition;
+
+        if (deleted) {
+          onKeyCapture &&
+            onKeyCapture(
+              '',
+              'Delete',
+              null,
+              cursorPositionRef.current,
+              cursorPosition,
+              inputElement
+            );
+        } else {
+          onKeyCapture &&
+            onKeyCapture(
+              '',
+              'Backspace',
+              null,
+              cursorPositionRef.current,
+              cursorPosition,
+              inputElement
+            );
+        }
+      } else {
+        const input = inputElement.value.slice(
+          minCursorPositionRef.current,
+          maxCursorPosition
+        );
+        onKeyCapture &&
+          onKeyCapture(
+            input,
+            '',
+            null,
+            cursorPositionRef.current,
+            cursorPosition,
+            inputElement
+          );
+      }
+    }
+    onInput && onInput(event);
+  }
+
+  return (
+    <Input ref={forkedRef} onKeyDown={handleKeydown} onInput={handleInput} {...props} />
+  );
+});

package/src/inputs/mask_input/language_character.ts

@@ -0,0 +1,13 @@
+import { RegexCharacter } from './regex_character.js';
+
+export class LanguageCharacter 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, /[\p{L}]/u, placeholder);
+    this.type = 'language-character';
+  }
+}