# Tesseract Web

## Rationale

- Every component library makes their own conventions of component organization
- Graceful degradation through backwards compatibility with HTML controls is not the main focus
  - In return, aspects such as accessibility may suffer since HTML controls are generally compliant to accessibility
    considerations suggested by approved standards
  - Emerging Web applications are at risk of deviating through said standards which can fragment the Web platform
    implementation
- Hopefully we can inspire component development through the component organization we are proposing;
  everyone can have their own implementations
  - cf. Authoring (publishing interfaces) vs Dependency (coercing consumers to adapt to concrete implementations)

## Ground Rules

- Each component is an enhanced version of an HTML control (see [HTML enhancement](#html-enhancement))
- Each component should only do one thing and one thing only in terms of purpose and appearance (contrast to HTML's
  `<input>` where its function is overloaded depending on its `type` attribute)
- Each component has decoupled styling, wherein each styling has their own API
  - This styling API is then made cross-framework compatible
  - This styling API allows use of dynamic styles (which then requires CSS-in-JS way of application)

## HTML enhancement

| HTML element                                                                                                  | Tesseract counterpart         | Remarks                                                                       |
|---------------------------------------------------------------------------------------------------------------|-------------------------------|-------------------------------------------------------------------------------|
| `<button>`                                                                                                    | `action/ActionButton`         |                                                                               |
| `<input type="button">`                                                                                       | `action/ActionButton`         |                                                                               |
| `<input type="reset">`                                                                                        | `action/ActionButton`         |                                                                               |
| `<input type="submit">`                                                                                       | `action/ActionButton`         |                                                                               |
| `<textarea>`                                                                                                  | `freeform/MultilineTextInput` |                                                                               |
| `<input type="text">`                                                                                         | `freeform/TextInput`          |                                                                               |
| `<input type="search">`                                                                                       | `freeform/TextInput`          | The consumer may choose to add a search icon (magnifying glass) as indicator. |
| `<input type="password">`                                                                                     | `freeform/MaskedTextInput`    |                                                                               |
| `<a>` with button appearance                                                                                  | `navigation/LinkButton`       |                                                                               |
| `<select>` without `multiple` attribute and with dropdown appearance                                          | `option/DropdownSelect`       |                                                                               |
| `<select>` with list box appearance                                                                           | `option/MenuSelect`           | The `multiple` prop can be set here.                                          |
| `<input type="checkbox">` with `indeterminate` state                                                          | `option/ToggleTickBox`        |                                                                               |
| `<input type="checkbox">` with `indeterminate` state and button appearance                                    | `option/ToggleButton`         |                                                                               |
| `<input type="checkbox">` without `indeterminate` state                                                       | `option/ToggleSwitch`         | Prefer using this component when indeterminate state is not expected.         |
| `<input type="radio">`                                                                                        | `option/RadioTickBox`         |                                                                               |
| `<input type="radio">` with button appearance                                                                 | `option/RadioButton`          |                                                                               |
| `<input type="number">`                                                                                       | `numeric/Spinner`             | Use this component for discrete values.                                       |
| `<input type="range">`                                                                                        | `numeric/Slider`              | Use this component for continuous values.                                     |
| `<input type="date">` with dropdown calendar                                                                  | `temporal/DateDropdown`       |                                                                               |
| `<input type="date">` as inline calendar                                                                      | `temporal/Calendar`           | Falls back to native date input.                                              |
| `<input type="time">` with spinners for hour, minute, seconds, and milliseconds; switch for (AM/PM) selection | `temporal/TimeSpinner`        | Optional seconds and milliseconds.                                            |
| `<input type="time">` with clock face                                                                         | `temporal/Clock`              | Falls back to native time input.                                              |

## Additional components

| Component             | Tesseract implementation | Remarks                                                                                                                      |
|-----------------------|--------------------------|------------------------------------------------------------------------------------------------------------------------------|
| Tag input             | `option/TagInput`        | Can specify predefined options (like `<input>` with `list` attribute).                                                       |
| X-Y select (2D range) | `numeric/Range2D`        |                                                                                                                              |
| Knob                  | `numeric/Knob`           |                                                                                                                              |
| Duration input        | `temporal/DurationInput` | Can specify precision up to milliseconds, falls back to native number input (always returns milliseconds for compatibility). |