@tcn/ui 0.0.1

package/src/inputs/suggestions/suggestion_list.tsx

@@ -0,0 +1,411 @@
+import { BodyText } from '../../typography/index.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import classNames from 'classnames';
+import React, { useLayoutEffect, Children, isValidElement } from 'react';
+import { useRef, useState } from 'react';
+import { FocusRedirect } from '../../utils/index.js';
+import { SuggestionItem } from './suggestion_item.js';
+import { OptionProps, Option } from '../options/option.js';
+import styles from './suggestion_list.module.css';
+
+import { Button } from '../../actions/index.js';
+import { Popper } from '../../overlay/popper/popper.js';
+
+const MAX_RESULTS = 50;
+const BATCH_SIZE = 50;
+
+export interface SuggestionListProps
+  extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+  value?: string;
+  scrollToValue?: string;
+  anchorElement: HTMLElement | null;
+  children?: React.ReactNode;
+  onChange?: (value: string) => void;
+  onOptionSelect?: (
+    value: string,
+    label: string | undefined,
+    isSuggestion: boolean
+  ) => void;
+  noSuggestionMessage?: React.ReactNode;
+  trimCustomInput?: boolean;
+  haveValueAsOption?: boolean;
+  onClose?: (
+    inputValue: string,
+    cursorStartPosition: number | null,
+    cursorEndPosition: number | null
+  ) => void;
+}
+
+export function SuggestionList({
+  value = '',
+  scrollToValue,
+  anchorElement,
+  children,
+  onOptionSelect,
+  noSuggestionMessage = '-- No Matches --',
+  onClose,
+  onChange,
+  onKeyUp,
+  onKeyDown,
+  trimCustomInput = false,
+  haveValueAsOption = false,
+  ...props
+}: SuggestionListProps) {
+  // Extract valid Option components from children
+  const suggestions = Children.toArray(children).filter(
+    (child): child is React.ReactElement<OptionProps> =>
+      isValidElement(child) && child.type === Option
+  );
+
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    if (scrollToValue != null) {
+      const index = suggestions.findIndex(option => option.props.value === scrollToValue);
+      if (index !== -1) {
+        return index;
+      }
+    }
+    return -1;
+  });
+
+  const keyPressedDownRef = useRef('');
+  const [maxResults, setMaxResults] = useState(MAX_RESULTS);
+  const [focusedIndex, setFocusedIndex] = useState(selectedIndex);
+  const [internalValue, setInternalValue] = useState(value);
+  const internalInputRef = useRef<HTMLInputElement | null>(null);
+  const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);
+  const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(
+    () => getMatchedOptions(value, MAX_RESULTS)
+  );
+  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();
+  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();
+
+  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
+    const key = event.key;
+    const input = event.currentTarget;
+
+    const isSameKey = (keyPressedDownRef.current = key);
+    keyPressedDownRef.current = '';
+
+    // Enter and Escape remove the popover, so we want to handle this on keyup.
+    // This prevents from another element from getting the key events.
+    if (isSameKey) {
+      switch (key) {
+        case 'Enter': {
+          if (matchedOptions[focusedIndex] == null) {
+            const value = trimCustomInput ? input.value.trim() : input.value;
+
+            if (value === '') {
+              return;
+            }
+
+            const lowercaseValue = value.toLocaleLowerCase();
+            const option = suggestions.find(
+              option =>
+                option.props.value.toLocaleLowerCase() === lowercaseValue ||
+                (option.props.label != null &&
+                  option.props.label.toLocaleLowerCase() === lowercaseValue)
+            );
+
+            const isSuggestion = option != null;
+            const label = option?.props.label || value;
+            const optionValue = option?.props.value || value;
+
+            requestAnimationFrame(() => {
+              onOptionSelect && onOptionSelect(optionValue, label, isSuggestion);
+            });
+
+            break;
+          }
+          const selectedOption = matchedOptions[focusedIndex];
+          const optionProps = selectedOption.props;
+
+          // Don't select disabled options
+          if (optionProps.disabled) {
+            break;
+          }
+
+          requestAnimationFrame(() => {
+            onOptionSelect && onOptionSelect(optionProps.value, optionProps.label, true);
+          });
+          break;
+        }
+        case 'Escape': {
+          onClose && onClose(input.value, input.selectionStart, input.selectionEnd);
+          break;
+        }
+      }
+    }
+
+    onKeyUp && onKeyUp(event);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    const key = event.key;
+    keyPressedDownRef.current = key;
+
+    // We handle these key events on keydown to be responsive navigation.
+    switch (key) {
+      case 'ArrowDown': {
+        let newIndex = focusedIndex + 1;
+
+        // Skip disabled options
+        while (
+          newIndex < matchedOptions.length &&
+          matchedOptions[newIndex]?.props.disabled
+        ) {
+          newIndex++;
+        }
+
+        if (newIndex === matchedOptions.length) {
+          // Wrap around to first non-disabled option
+          newIndex = 0;
+          while (
+            newIndex < matchedOptions.length &&
+            matchedOptions[newIndex]?.props.disabled
+          ) {
+            newIndex++;
+          }
+          // If all options are disabled, stay at -1
+          if (newIndex === matchedOptions.length) {
+            newIndex = -1;
+          }
+        }
+
+        setFocusedIndex(newIndex);
+        event.preventDefault();
+        break;
+      }
+      case 'Tab': {
+        let step = 1;
+        if (event.shiftKey) {
+          step = -1;
+        }
+        let newIndex = focusedIndex + step;
+        // Skip disabled options
+        if (step > 0) {
+          while (
+            newIndex < matchedOptions.length &&
+            matchedOptions[newIndex]?.props.disabled
+          ) {
+            newIndex++;
+          }
+        } else {
+          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {
+            newIndex--;
+          }
+        }
+
+        if (newIndex === matchedOptions.length) {
+          // Wrap around to first non-disabled option
+          newIndex = 0;
+          while (
+            newIndex < matchedOptions.length &&
+            matchedOptions[newIndex]?.props.disabled
+          ) {
+            newIndex++;
+          }
+          // If all options are disabled, stay at -1
+          if (newIndex === matchedOptions.length) {
+            newIndex = -1;
+          }
+        } else if (newIndex <= -1) {
+          // Wrap around to last non-disabled option
+          newIndex = matchedOptions.length - 1;
+          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {
+            newIndex--;
+          }
+          // If all options are disabled, stay at -1
+          if (newIndex === -1) {
+            newIndex = -1;
+          }
+        }
+
+        setFocusedIndex(newIndex);
+        event.preventDefault();
+        break;
+      }
+      case 'ArrowUp': {
+        let newIndex = focusedIndex - 1;
+
+        // Skip disabled options
+        while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {
+          newIndex--;
+        }
+
+        if (newIndex === -1) {
+          // Wrap around to last non-disabled option
+          newIndex = matchedOptions.length - 1;
+          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {
+            newIndex--;
+          }
+          // If all options are disabled, stay at -1
+          if (newIndex === -1) {
+            newIndex = -1;
+          }
+        }
+
+        setFocusedIndex(newIndex);
+        event.preventDefault();
+        break;
+      }
+    }
+    onKeyDown && onKeyDown(event);
+  }
+
+  function getMatchedOptions(value: string, maxResults: number) {
+    const results = suggestions.filter(option => {
+      const props = option.props;
+      const label = String(props.label).toLocaleLowerCase();
+      const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];
+      const optionValue = String(props.value).toLocaleLowerCase();
+      const searchValue = value.toLocaleLowerCase();
+
+      return (
+        label.includes(searchValue) ||
+        keywords.some(k => k.includes(searchValue)) ||
+        optionValue.includes(searchValue)
+      );
+    });
+
+    if (
+      haveValueAsOption &&
+      value.trim().length > 0 &&
+      !results.some(r => r.props.value === value)
+    ) {
+      results.unshift(
+        <Option key="value" value={value} label={value} keywords={[value]}>
+          {value}
+        </Option>
+      );
+    }
+
+    setTotalMatchedLength(results.length);
+    return results.slice(0, maxResults);
+  }
+
+  function focusInput() {
+    const input = internalInputRef.current;
+    if (input != null) {
+      input.focus();
+    }
+  }
+
+  function handleUseClose() {
+    const input = internalInputRef.current;
+    if (input != null) {
+      onClose && onClose(input.value, input.selectionStart, input.selectionEnd);
+    }
+  }
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const input = event.currentTarget;
+
+    setMaxResults(MAX_RESULTS);
+    setInternalValue(event.target.value);
+
+    const newMatches = getMatchedOptions(input.value, MAX_RESULTS);
+    setMatchedOptions(newMatches);
+
+    onChange && onChange(event.target.value);
+  }
+
+  function handleShowMore() {
+    const newMaxResults = maxResults + BATCH_SIZE;
+    setMaxResults(newMaxResults);
+    const newMatches = getMatchedOptions(internalValue, newMaxResults);
+    setMatchedOptions(newMatches);
+  }
+
+  useLayoutEffect(() => {
+    const input = internalInputRef.current;
+
+    if (input != null && input.value.length > 0) {
+      input.select();
+    } else if (input != null) {
+      input.focus();
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    if (anchorElement != null) {
+      const rect = anchorElement.getBoundingClientRect();
+      setSuggestionsWidth(`${rect.width}px`);
+      setSuggestionsHeight(`${rect.height}px`);
+
+      if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {
+        internalInputRef.current.value = anchorElement.value;
+        internalInputRef.current.selectionStart = anchorElement.selectionStart;
+        internalInputRef.current.selectionEnd = anchorElement.selectionEnd;
+      }
+    }
+  }, [anchorElement]);
+
+  useLayoutEffect(() => {
+    if (scrollToValue != null) {
+      const index = matchedOptions.findIndex(
+        option => option.props.value === scrollToValue
+      );
+      setSelectedIndex(index);
+    }
+  }, [matchedOptions, scrollToValue]);
+
+  useLayoutEffect(() => {
+    setFocusedIndex(internalValue === '' ? selectedIndex : -1);
+  }, [internalValue, selectedIndex]);
+
+  return (
+    <Popper
+      open
+      anchorElement={anchorElement}
+      onClose={handleUseClose}
+      verticalAnchor="top"
+      verticalOrigin="top"
+      verticalOffset={-4}
+    >
+      <VStack
+        minHeight={`calc(${suggestionsHeight}, 8px)`}
+        maxHeight="300px"
+        minWidth={suggestionsWidth}
+        width="auto"
+        hAlign="start"
+        className={classNames(styles['suggestion-list'], 'suggestion-list')}
+      >
+        <input
+          ref={internalInputRef}
+          key={-1}
+          value={internalValue}
+          onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          onChange={handleChange}
+          className={classNames(styles.input, 'suggestion-list-search-input')}
+          {...props}
+        />
+        <VStack>
+          {matchedOptions.map((option, index) => (
+            <SuggestionItem
+              key={index}
+              option={option}
+              isSelected={index === selectedIndex && internalValue !== ''}
+              isFocused={index === focusedIndex}
+              onClick={onOptionSelect}
+            />
+          ))}
+          {totalMatchedLength > matchedOptions.length && (
+            <>
+              <Button marginBlock="8px" hierarchy="tertiary" onClick={handleShowMore}>
+                Show More
+              </Button>
+            </>
+          )}
+        </VStack>
+        {matchedOptions.length === 0 && (
+          <ZStack padding="8px" className={styles['no-results']}>
+            <BodyText>{noSuggestionMessage}</BodyText>
+          </ZStack>
+        )}
+        <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />
+      </VStack>
+    </Popper>
+  );
+}

package/src/inputs/switch/TODO.md

@@ -0,0 +1,3 @@
+* Only one size
+* Make 16px height
+* Remove option with no check 

package/src/inputs/switch/switch.module.css

@@ -0,0 +1,110 @@
+/*** wrapper ************************************************************/
+.switch-wrapper {
+  position: relative;
+  display: inline-block;
+  width: calc(36px * var(--scalar, 1));
+  height: calc(18px * var(--scalar, 1));
+  border-radius: 13px;
+  cursor: pointer;
+  box-sizing: border-box;
+  background-color: #aaa;
+  border: 1px solid #aaa;
+  transition:
+    background-color 200ms ease-out,
+    border-color 200ms ease-out;
+}
+
+.switch-wrapper[data-focused="true"][data-is-checked="false"],
+.switch-wrapper[data-focused="true"][data-is-checked="true"] {
+  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+}
+
+/* wrapper end*/
+
+.switch {
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+  outline: 0 !important;
+  height: 100% !important;
+  width: 100% !important;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/*** track ***************************************************************/
+
+.switch-wrapper[data-is-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.switch-wrapper[data-is-disabled="true"] {
+  background-color: #d3d3d3;
+  border-color: #d3d3d3;
+}
+
+.switch-wrapper[data-is-checked="true"][data-is-disabled="false"] {
+  background-color: var(--accent-color);
+  border-color: var(--accent-color);
+}
+
+/*** switch ***************************************************************/
+.switch::after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  transition: transform 200ms ease-out;
+  width: calc(16px * var(--scalar, 1));
+  height: calc(16px * var(--scalar, 1));
+  border-radius: 12px;
+  background-color: var(--surface, #fff);
+  box-sizing: border-box;
+}
+
+.switch-wrapper[data-is-disabled="true"] > .switch::after,
+.switch-wrapper[data-is-disabled="true"] > .switch,
+.switch-wrapper[data-is-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.switch-wrapper[data-is-disabled="false"] > .switch::after,
+.switch-wrapper[data-is-disabled="false"] > .switch,
+.switch-wrapper[data-is-disabled="false"] {
+  cursor: pointer;
+}
+
+.switch:dir(ltr)::after {
+  transform: translate(0%, 0px);
+  left: 0;
+}
+
+.switch:dir(rtl)::after {
+  transform: translate(0%, 0px);
+  right: 0;
+}
+
+.switch-wrapper[data-is-checked="true"] .switch:dir(ltr)::after {
+  transform: translate(112%, 0px);
+}
+
+.switch-wrapper[data-is-checked="true"] .switch:dir(rtl)::after {
+  transform: translate(-112%, 0px);
+}
+
+/*** icon ********************************************************************/
+.switch-icon {
+  position: absolute;
+  display: inline-block;
+  color: #fff;
+  top: 50%;
+  left: calc(3px * var(--scalar, 1) - 1px);
+  height: calc(16px * var(--scalar, 1) - 2px);
+  width: calc(16px * var(--scalar, 1) - 2px);
+  pointer-events: none;
+  translate: 0 -50%;
+}
+
+.switch-icon[data-is-checked="false"]:dir(ltr),
+.switch-icon[data-is-checked="true"]:dir(rtl) {
+  translate: calc(16px * var(--scalar, 1)) -50%;
+}

package/src/inputs/switch/switch.stories.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { Switch as Component, SwitchProps } from './switch.js';
+import styles from '../__storybook__/stories.module.css';
+
+export default {
+  title: 'Switch',
+};
+
+function Base(props: SwitchProps) {
+  const [checked, setChecked] = useState(props.checked ?? false);
+  return <Component checked={checked} onChange={setChecked} {...props} />;
+}
+
+export function Switch() {
+  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>Omit Icons</td>
+          <td>
+            <Base omitIcons />
+          </td>
+        </tr>
+        <tr>
+          <td>Disabled</td>
+          <td>
+            <Base disabled />
+          </td>
+        </tr>
+        <tr>
+          <td>Disabled checked</td>
+          <td>
+            <Base disabled checked />
+          </td>
+        </tr>
+        <tr>
+          <td>disabled Omit Icons</td>
+          <td>
+            <Base disabled omitIcons />
+          </td>
+        </tr>
+        <tr>
+          <td>disabled Omit Icons checked</td>
+          <td>
+            <Base disabled omitIcons checked />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/src/inputs/switch/switch.tsx

@@ -0,0 +1,82 @@
+import React, { useRef, useState, HTMLAttributes, ChangeEvent } from 'react';
+import { useForkRef } from '../../utils/index.js';
+import classnames from 'classnames';
+import styles from './switch.module.css';
+import { CheckIcon } from '@tcn/icons/check_icon.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+
+export interface SwitchProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {
+  checked?: boolean;
+  backgroundColor?: string;
+  inputRef?: React.Ref<HTMLInputElement>;
+  disabled?: boolean;
+  onChange?: (value: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+  omitIcons?: boolean;
+}
+
+export const Switch = React.forwardRef(function Switch(
+  {
+    checked,
+    backgroundColor: onColor,
+    style,
+    className,
+    inputRef,
+    omitIcons = false,
+    onChange,
+    ...props
+  }: SwitchProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const [isFocused, setIsFocused] = useState(false);
+  const internalInputRef = useRef<HTMLInputElement | null>(null);
+  const forkedInputRef = useForkRef(inputRef, internalInputRef);
+  const customStyles: any = {};
+
+  function blur(event: React.FocusEvent<HTMLInputElement>) {
+    props.onBlur && props.onBlur(event);
+    setIsFocused(false);
+  }
+
+  function focus(event: React.FocusEvent<HTMLInputElement>) {
+    props.onFocus && props.onFocus(event);
+    setIsFocused(true);
+  }
+
+  if (onColor != null) {
+    customStyles['--accent-color'] = onColor;
+  }
+
+  const Icon = checked ? CheckIcon : CrossIcon;
+
+  return (
+    <div
+      ref={ref}
+      data-focused={isFocused}
+      data-is-checked={Boolean(checked)}
+      data-is-disabled={props.disabled || false}
+      data-width="fixed"
+      className={classnames(styles['switch-wrapper'], className, 'switch-wrapper')}
+    >
+      {!omitIcons && (
+        <Icon
+          className={classnames(styles['switch-icon'], 'switch-icon')}
+          data-is-checked={checked}
+        />
+      )}
+      <input
+        ref={forkedInputRef}
+        type="checkbox"
+        className={classnames(styles.switch, 'switch')}
+        onBlur={blur}
+        onFocus={focus}
+        style={{ ...style, ...customStyles }}
+        checked={checked}
+        data-is-disabled={props.disabled || false}
+        onChange={e => {
+          onChange && onChange(Boolean(e.currentTarget.checked), e);
+        }}
+        {...props}
+      />
+    </div>
+  );
+});

package/src/inputs/switch/switch_row.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { useSignalValue } from '@tcn/state';
+import { FieldPresenter } from '../../form/field_presenters/field_presenter.js';
+import { Switch, SwitchProps } from './switch.js';
+import { HField } from '../../form/field/h_field/h_field.js';
+
+export interface SwitchRowProps
+  extends Omit<
+    SwitchProps,
+    'onChange' | 'checked' | 'label' | 'description' | 'errorMessage'
+  > {
+  presenter?: FieldPresenter<boolean>;
+  id: string;
+}
+
+export function SwitchRow({ presenter, id, ...props }: SwitchRowProps) {
+  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}>
+      <Switch {...props} checked={value} onChange={finalPresenter.setValue} />
+    </HField>
+  );
+}