kitchen-sink-server/docs/philosophy.md

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)
• 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).