@tcn/ui 0.0.1

package/src/form/field_presenters/field_presenter.ts

@@ -0,0 +1,162 @@
+import { ISubscription, Runner, Signal, WeakPromise } from '@tcn/state';
+
+function fastCopy<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value));
+}
+
+function fastDeepEqual<T>(a: T, b: T): boolean {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+export interface FieldState<T> {
+  label: string;
+  value: T;
+  error: string | null;
+  hasError: boolean;
+  description?: string;
+  isDirty: boolean;
+}
+
+export interface FieldOptions<T> {
+  description?: string;
+  validate?: (value: T) => Promise<void> | void;
+  validateOnChange?: boolean;
+  equalityCheck?: (a: T, b: T) => boolean;
+  copyInitialValue?: (value: T) => T;
+}
+
+const noop = () => {};
+const defaultCopy = <T>(value: T): T => fastCopy(value);
+
+export class FieldPresenter<T> {
+  protected _state: Signal<FieldState<T>>;
+  private _initialValue: T;
+  private _equalityCheck: (a: T, b: T) => boolean;
+  private _cloneInitialValue: (v: T) => T;
+
+  private _validationRunner: Runner<void>;
+  private _validate: (value: T) => Promise<void> | void | WeakPromise<void>;
+  private _subscriptions: ISubscription<any>[];
+  private _validateOnChange: boolean;
+  private _cancelToken = 'field_presenter_cancel';
+
+  get stateBroadcast() {
+    return this._state.broadcast;
+  }
+
+  get state() {
+    return this._state.get();
+  }
+
+  constructor(label: string, value: T, options: FieldOptions<T> = {}) {
+    this._validate = options.validate || noop;
+    this._validationRunner = new Runner<void>(undefined);
+    this._subscriptions = [];
+    this._cloneInitialValue = options.copyInitialValue || defaultCopy;
+    this._initialValue = this._cloneInitialValue(value);
+    this._equalityCheck = options.equalityCheck || ((a, b) => fastDeepEqual(a, b));
+    this._state = new Signal<FieldState<T>>({
+      label,
+      value,
+      error: null,
+      hasError: false,
+      description: options.description,
+      isDirty: false,
+    });
+
+    this._validateOnChange = options.validateOnChange ?? false;
+  }
+
+  setLabel = (label: string) => {
+    this._state.transform(s => {
+      s.label = label;
+      return s;
+    });
+  };
+
+  setDescription = (description: string) => {
+    this._state.transform(s => {
+      s.description = description;
+      return s;
+    });
+  };
+
+  setValue = (value: T) => {
+    if (this._equalityCheck(this.state.value, value)) {
+      return;
+    }
+
+    this._state.transform(s => {
+      if (this._validateOnChange) {
+        s.error = null;
+        s.hasError = false;
+      }
+
+      s.value = value;
+      s.isDirty = !this._equalityCheck(value, this._initialValue);
+      return s;
+    });
+
+    if (this._validateOnChange) {
+      this.validate();
+    }
+  };
+
+  setError = (error: string | null) => {
+    this._validationRunner.cancel(this._cancelToken);
+
+    this._state.transform(s => {
+      s.error = error;
+      s.hasError = error != null;
+      return s;
+    });
+  };
+
+  validate = async () => {
+    try {
+      this._validationRunner.cancel(this._cancelToken);
+      await this._validationRunner.execute(() => {
+        return this._validate(this.state.value);
+      });
+
+      this._state.transform(s => {
+        s.error = null;
+        s.hasError = false;
+        return s;
+      });
+    } catch (e: any) {
+      const message = e.message || e.toString();
+      if (message === this._cancelToken) {
+        return;
+      }
+
+      this._state.transform(s => {
+        s.error = message;
+        s.hasError = true;
+        return s;
+      });
+      throw e;
+    }
+  };
+
+  upgrade = () => {
+    if (this._equalityCheck(this.state.value, this._initialValue)) {
+      return;
+    }
+
+    this._initialValue = this._cloneInitialValue(this.state.value);
+    this._state.transform(s => {
+      s.isDirty = false;
+      return s;
+    });
+  };
+
+  clearError = () => {
+    this.setError(null);
+  };
+
+  dispose() {
+    this._validationRunner.cancel(this._cancelToken);
+    this._subscriptions.forEach(s => s.unsubscribe());
+  }
+}

package/src/form/field_presenters/options_field_presenter.ts

@@ -0,0 +1,36 @@
+import { Signal } from '@tcn/state';
+import { FieldOptions, FieldPresenter, FieldState } from './field_presenter.js';
+
+export interface OptionsFieldState<TValue = string, TOption = string>
+  extends FieldState<TValue> {
+  options: TOption[];
+}
+
+export interface OptionsFieldOptions<TValue = string, TOption = string>
+  extends FieldOptions<TValue> {
+  options?: TOption[];
+}
+
+export class OptionsFieldPresenter<
+  TValue = string,
+  TOption = TValue,
+> extends FieldPresenter<TValue> {
+  protected _options: Signal<TOption[]>;
+
+  get optionsBroadcast() {
+    return this._options.broadcast;
+  }
+
+  constructor(
+    label: string,
+    value: TValue,
+    options: OptionsFieldOptions<TValue, TOption>
+  ) {
+    super(label, value, options);
+    this._options = new Signal(options.options || []);
+  }
+
+  setOptions(options: TOption[]) {
+    this._options.set(options);
+  }
+}

package/src/form/field_set/field_set.module.css

@@ -0,0 +1,17 @@
+.field-set {
+  position: relative;
+  border-radius: 4px;
+}
+
+.field-set {
+  gap: 4px;
+}
+
+.field-set > .field-set-body {
+  background: #ffffff; /* tcn neutral white */
+  width: 100%;
+  max-width: 100%;
+  border-radius: 4px;
+  gap: 8px;
+  padding: 8px;
+}

package/src/form/field_set/field_set.stories.tsx

@@ -0,0 +1,102 @@
+import { Divider } from '../../layouts/divider/divider.js';
+import React, { useState } from 'react';
+import { FieldSet } from './field_set.js';
+import {
+  Input,
+  MaskInput,
+  MultiComboBox,
+  Multiselect,
+  PhoneNumberInput,
+  Select,
+  Textarea,
+  UnitInput,
+  Option,
+} from '../../inputs/index.js';
+import { HField } from '../field/h_field/h_field.js';
+
+export default {
+  title: 'Fieldset',
+};
+
+export function Baseline() {
+  const [multiselectValues, setMultiselectValues] = useState<string[]>([]);
+  const [freeformMultiselectValues, setFreeformMultiselectValues] = useState<string[]>(
+    []
+  );
+
+  return (
+    <FieldSet maxWidth="600px" minWidth="300px" legend="Fieldset" gap="8px" padding="8px">
+      <HField label="Input" id="field-1">
+        <Input />
+      </HField>
+      <Divider />
+      <HField label="Textarea" id="field-2">
+        <Textarea />
+      </HField>
+      <Divider />
+      <HField label="Mask" id="field-3">
+        <MaskInput mask={{ mask: '99/99/9999' }} />
+      </HField>
+      <Divider />
+      <HField label="Phone Number" id="field-4">
+        <PhoneNumberInput />
+      </HField>
+      <Divider />
+      <HField label="Unit" id="field-5">
+        <UnitInput>
+          <Option value="miles" label="Miles">
+            Miles
+          </Option>
+          <Option value="kilometers" label="Kilometers">
+            Kilometers
+          </Option>
+        </UnitInput>
+      </HField>
+      <Divider />
+      <HField label="Select" id="field-6">
+        <Select>
+          <Option value="option-1" label="Option 1">
+            Option 1
+          </Option>
+          <Option value="option-2" label="Option 2">
+            Option 2
+          </Option>
+          <Option value="option-3" label="Option 3">
+            Option 3
+          </Option>
+        </Select>
+      </HField>
+      <Divider />
+      <HField label="Multiselect" id="field-7">
+        <Multiselect value={multiselectValues} onChange={setMultiselectValues}>
+          <Option value="option-1" label="Option 1">
+            Option 1
+          </Option>
+          <Option value="option-2" label="Option 2">
+            Option 2
+          </Option>
+          <Option value="option-3" label="Option 3">
+            Option 3
+          </Option>
+        </Multiselect>
+      </HField>
+      <Divider />
+      <HField label="Multi Combo Box" id="field-8">
+        <MultiComboBox
+          value={freeformMultiselectValues}
+          onChange={setFreeformMultiselectValues}
+        >
+          <Option value="option-1" label="Option 1">
+            Option 1
+          </Option>
+          <Option value="option-2" label="Option 2">
+            Option 2
+          </Option>
+          <Option value="option-3" label="Option 3">
+            Option 3
+          </Option>
+        </MultiComboBox>
+      </HField>
+    </FieldSet>
+  );
+}

package/src/form/field_set/field_set.tsx

@@ -0,0 +1,65 @@
+import { Title } from '../../typography/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import type { VStackProps } from '../../stacks/v_stack.js';
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import styles from './field_set.module.css';
+
+let fieldsetIdCount = 0;
+
+export type FieldSetProps = VStackProps<HTMLFieldSetElement> & {
+  legend?: string;
+  startAdornments?: React.ReactNode;
+  endAdornments?: React.ReactNode;
+};
+
+export const FieldSet = React.forwardRef(function FieldSet(
+  {
+    legend,
+    startAdornments,
+    endAdornments,
+    className,
+    children,
+    ...props
+  }: FieldSetProps,
+  ref: React.Ref<HTMLFieldSetElement>
+) {
+  const id = useMemo(() => {
+    return fieldsetIdCount++;
+  }, []);
+
+  const labelId = `field-set-${id}`;
+
+  return (
+    <VStack
+      as="fieldset"
+      aria-labelledby={labelId}
+      ref={ref}
+      className={classnames(styles['field-set'], className, 'field-set')}
+      {...props}
+    >
+      {legend && (
+        <HStack
+          id={labelId}
+          className={classnames('legend', 'field-set-legend')}
+          hAlign="start"
+          height={props.height}
+        >
+          {startAdornments}
+          {startAdornments && <Spacer width="8px" />}
+          <Title className="field-set-legend-text">{legend}</Title>
+          {endAdornments && <Spacer />}
+          {endAdornments}
+        </HStack>
+      )}
+      <VStack
+        className={classnames('field-set-body', styles['field-set-body'])}
+        {...props}
+      >
+        {children}
+      </VStack>
+    </VStack>
+  );
+});

package/src/form/form_field.tsx

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { useSignalValue } from '@tcn/state';
+import { FieldPresenter, FieldState } from './field_presenters/field_presenter.js';
+
+export function FormField<T>({
+  field,
+  children,
+}: {
+  field: FieldPresenter<T>;
+  children: (
+    state: FieldState<T>,
+    setValue: (value: T) => void,
+    validate: () => Promise<void>
+  ) => React.ReactElement;
+}) {
+  const state = useSignalValue(field.stateBroadcast);
+  const setValue = useCallback(
+    (value: T) => {
+      field.setValue(value);
+    },
+    [field]
+  );
+
+  const validate = useCallback(() => {
+    return field.validate();
+  }, [field]);
+
+  return children(state, setValue, validate);
+}

package/src/form/index.ts

@@ -0,0 +1,5 @@
+export * from './form_field.js';
+export * from './field_presenters/field_presenter.js';
+export * from './field_presenters/options_field_presenter.js';
+export * from './field_set/field_set.js';
+export * from './form_field.js';

package/src/inputs/__storybook__/stories.module.css

@@ -0,0 +1,5 @@
+.story th,
+.story td {
+  padding: 8px;
+  border: 1px solid #ccc;
+}

package/src/inputs/checkbox/checkbox.module.css

@@ -0,0 +1,51 @@
+.checkbox {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  appearance: none;
+  cursor: pointer;
+  width: calc(var(--scalar, 1) * 15px);
+  height: calc(var(--scalar, 1) * 15px);
+  border-radius: 4px;
+  outline: none;
+  outline-offset: 0;
+  border: 1px solid var(--accent-color);
+  margin: 0;
+  background-color: #fff;
+  box-sizing: border-box;
+  background-size: calc(12px * var(--scalar, 1)) calc(12px * var(--scalar, 1));
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.checkbox[data-is-disabled="false"]:active {
+  background-color: var(--accent-color);
+}
+
+.checkbox[data-is-disabled="true"] {
+  background-color: rgba(0, 0, 0, 0.05);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.checkbox:focus {
+  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+}
+
+.checkbox[data-checked="true"] {
+  background-color: var(--accent-color);
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
+}
+
+.checkbox[data-is-disabled="false"]:active {
+  background-color: var(--accent-color);
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
+}
+
+.checkbox[data-is-disabled="true"] {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.checkbox[data-checked="true"][data-is-disabled="true"] {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='rgba(255,255,255,0.3)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='rgba(255,255,255,0.3)' stroke-width='2'/%3E%3C/svg%3E");
+}

package/src/inputs/checkbox/checkbox.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Checkbox as Component, CheckboxProps } from './checkbox.js';
+import styles from '../__storybook__/stories.module.css';
+
+function Base(props: CheckboxProps) {
+  const [checked, setChecked] = React.useState(props.checked ?? false);
+
+  return (
+    <Component
+      checked={checked}
+      onChange={v => {
+        setChecked(v);
+      }}
+      {...props}
+    />
+  );
+}
+
+export default {
+  title: 'Checkbox',
+};
+
+export function Checkbox() {
+  return (
+    <table className={styles.story}>
+      <thead>
+        <tr>
+          <th>Baseline</th>
+          <th>Disabled</th>
+          <th>Disabled Checked</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <Base />
+          </td>
+          <td>
+            <Base disabled />
+          </td>
+          <td>
+            <Base disabled checked />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/src/inputs/checkbox/checkbox.tsx

@@ -0,0 +1,43 @@
+import classnames from 'classnames';
+import React, { HTMLAttributes } from 'react';
+import styles from './checkbox.module.css';
+
+export interface CheckboxProps
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
+  width?: string;
+  height?: string;
+  checked?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
+  disabled?: boolean;
+  onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Checkbox = React.forwardRef(function Checkbox(
+  {
+    style,
+    className,
+    width,
+    height,
+    checked,
+    inputRef,
+    onChange,
+    ...props
+  }: CheckboxProps,
+  ref: React.Ref<HTMLInputElement>
+) {
+  return (
+    <input
+      ref={ref}
+      data-checked={checked}
+      data-is-disabled={props.disabled || false}
+      checked={checked}
+      type="checkbox"
+      onChange={e => {
+        onChange && onChange(Boolean(e.currentTarget.checked), e);
+      }}
+      {...props}
+      className={classnames(className, styles.checkbox, 'checkbox')}
+      style={{ width, height, ...style }}
+    />
+  );
+});

package/src/inputs/checkbox/checkbox_row.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { useSignalValue } from '@tcn/state';
+import { Checkbox, CheckboxProps } from './checkbox.js';
+import { FieldPresenter } from '../../form/field_presenters/field_presenter.js';
+import { HField } from '../../form/field/h_field/h_field.js';
+
+export interface CheckboxRowProps extends Omit<CheckboxProps, 'onChange' | 'checked'> {
+  presenter?: FieldPresenter<boolean>;
+  id: string;
+}
+
+export function CheckboxRow({ presenter, id, ...props }: CheckboxRowProps) {
+  const [finalPresenter] = useState(() => {
+    if (presenter == null) {
+      return new FieldPresenter<boolean>('Label', false);
+    }
+    return presenter;
+  });
+
+  const { label, value, description, error } = useSignalValue(
+    finalPresenter.stateBroadcast
+  );
+
+  return (
+    <HField id={id} label={label} description={description} errorMessage={error}>
+      <Checkbox {...props} checked={value} onChange={finalPresenter.setValue} />
+    </HField>
+  );
+}

package/src/inputs/color_input/color_input.module.css

@@ -0,0 +1,62 @@
+.checker-board {
+  background-color: white;
+  background-image:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
+    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ccc 75%),
+    linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 10px 10px; /* Adjusting the size to 5px squares */
+  background-position:
+    0 0,
+    0 5px,
+    5px -5px,
+    -5px 0px;
+}
+
+.color-input-select:dir(ltr)::after {
+  content: "";
+  position: absolute;
+  right: calc(4px * var(--scalar, 1));
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(18px * var(--scalar, 1));
+  height: calc(18px * var(--scalar, 1));
+  background-color: #808080;
+  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+}
+
+.color-input-select:dir(rtl)::after {
+  content: "";
+  position: absolute;
+  left: calc(4px * var(--scalar, 1));
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(18px * var(--scalar, 1));
+  height: calc(18px * var(--scalar, 1));
+  background-color: #808080;
+  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+}
+
+.color-input-select[data-hierarchy="secondary"] {
+  height: calc(16px * var(--scalar, 1));
+  border: 1px solid #aaa;
+  color: var(--font-color);
+}
+
+.color-input-select:hover::after {
+  background-color: var(--accent-color);
+}
+
+.color-input-select[data-hierarchy="secondary"]:hover {
+  color: var(--accent-color);
+  border-color: var(--accent-color);
+  background-color: transparent;
+}