@tcn/ui 0.0.1

package/src/inputs/color_input/color_input.stories.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { ColorInput as Component, ColorInputProps } from './color_input.js';
+import styles from '../__storybook__/stories.module.css';
+
+function Base(props: ColorInputProps) {
+  const [value, setValue] = useState(props.value || '#000000');
+  return <Component onChange={setValue} {...props} value={value} />;
+}
+
+export default {
+  title: 'Color Input',
+};
+
+export function ColorInput() {
+  return (
+    <table className={styles.story}>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Component</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Basic</td>
+          <td>
+            <Base />
+          </td>
+        </tr>
+        <tr>
+          <td>Disabled</td>
+          <td>
+            <Base disabled />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/src/inputs/color_input/color_input.tsx

@@ -0,0 +1,153 @@
+import { Box } from '../../stacks/box/box.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import classNames from 'classnames';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { HTMLAttributes } from 'react';
+import { ColorState } from 'react-color';
+import { Button } from '../../actions/index.js';
+import { ColorPicker } from './color_picker.js';
+import { Input } from '../input/input.js';
+import styles from './color_input.module.css';
+
+import { Popper } from '../../overlay/popper/popper.js';
+
+export interface ColorInputProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {
+  value?: string;
+  disabled?: boolean;
+  onChange?: (color: string) => void;
+  onError?: (error: string | null) => void;
+  width?: string;
+  maxWidth?: string;
+  minWidth?: string;
+  hierarchy?: 'primary' | 'secondary' | 'tertiary';
+}
+
+export function ColorInput({
+  value = '#000',
+  onChange,
+  onError,
+  disabled,
+  width = '100%',
+  maxWidth,
+  minWidth,
+  hierarchy = 'secondary',
+  ...props
+}: ColorInputProps) {
+  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);
+  const isOpen = anchorElement != null;
+  const pickerRef = useRef<HTMLDivElement | null>(null);
+
+  function openPicker(e: React.MouseEvent<HTMLButtonElement>) {
+    setAnchorElement(e.currentTarget);
+  }
+
+  function closePicker() {
+    setAnchorElement(null);
+  }
+
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      if (anchorElement != null) {
+        pickerRef.current && pickerRef.current.focus();
+      }
+    });
+  }, [anchorElement]);
+
+  function processKeyInput(event: React.KeyboardEvent) {
+    if (event.key === 'Escape') {
+      closePicker();
+    }
+  }
+
+  function updateColor(value: ColorState) {
+    const rgb = value.rgb;
+    let color = value.hex;
+
+    if (rgb.a != null) {
+      color = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;
+    } else {
+      color = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
+    }
+
+    onChange && onChange(color);
+  }
+
+  return (
+    <>
+      <HStack
+        height="auto"
+        width={width}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+        className="color-input-wrapper"
+        {...props}
+      >
+        <ZStack width="flex">
+          <Input
+            disabled={disabled}
+            value={value}
+            style={{
+              borderEndEndRadius: 0,
+              borderStartEndRadius: 0,
+              textAlign: 'start',
+              paddingInlineEnd: '8px',
+            }}
+            className="color-input"
+            onChange={onChange}
+          />
+        </ZStack>
+        <Button
+          disabled={disabled}
+          hierarchy={hierarchy}
+          onClick={openPicker}
+          width="70px"
+          maxWidth="70px"
+          className={classNames(
+            styles['color-input-select'],
+            'color-input-select',
+            'select'
+          )}
+          style={{
+            borderStartStartRadius: 0,
+            borderEndStartRadius: 0,
+            paddingInlineEnd: 0,
+          }}
+        >
+          <HStack height="14px" gap="4px" hAlign="start">
+            <Spacer width="4px" />
+            <Box
+              width="flex"
+              height="30px"
+              className={styles['checker-board']}
+              style={{ borderRadius: '2px', overflow: 'hidden' }}
+            >
+              <Box
+                height="100%"
+                style={{ backgroundColor: value, borderRadius: '2px' }}
+              ></Box>
+            </Box>
+            <Spacer />
+          </HStack>
+          <Spacer width="4px" />
+        </Button>
+      </HStack>
+      <Popper
+        anchorElement={anchorElement}
+        onClose={closePicker}
+        open={isOpen}
+        restoreFocus
+        horizontalAnchor="end"
+        horizontalOrigin="end"
+      >
+        <ColorPicker
+          color={value}
+          onKeyDown={processKeyInput}
+          onColorChange={updateColor}
+        />
+      </Popper>
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+.color-picker {
+  box-shadow: none;
+  border-radius: 8px;
+  outline: none;
+  background-color: #fff;
+  box-shadow: var(--drop-shadow-depth-3, 0 2px 10px 0 rgba(0, 0, 0, 0.1));
+}
+
+.color-picker > .chrome-picker {
+  box-shadow: none !important;
+  border-radius: 4px !important;
+  overflow: hidden;
+}

package/src/inputs/color_input/color_picker.tsx

@@ -0,0 +1,41 @@
+import { useForkRef } from '../../utils/index.js';
+import { ZStack } from '../../stacks/z_stack.js';
+import classNames from 'classnames';
+import React, { HTMLAttributes, useLayoutEffect, useRef } from 'react';
+import { ChromePicker, Color, type ColorResult } from 'react-color';
+import styles from './color_picker.module.css';
+
+export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+  color: Color;
+  onColorChange: (color: ColorResult) => void;
+}
+
+export const ColorPicker = React.forwardRef(function ColorPicker(
+  { color, onColorChange, className, ...props }: ColorPickerProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const padRef = useRef<HTMLDivElement | null>(null);
+  const forkedRef = useForkRef(padRef, ref);
+
+  useLayoutEffect(() => {
+    padRef.current && padRef.current.focus();
+  }, []);
+
+  return (
+    <ZStack
+      tabIndex={0}
+      ref={forkedRef}
+      padding="8px"
+      height="auto"
+      width="auto"
+      className={classNames(styles['color-picker'], className)}
+      {...props}
+    >
+      <ChromePicker
+        className={styles['chrome-picker']}
+        color={color}
+        onChange={onColorChange}
+      />
+    </ZStack>
+  );
+});

package/src/inputs/combo_box/combo_box.stories.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { ComboBox } from '../combo_box/combo_box.js';
+import { Option } from '../options/option.js';
+
+export default {
+  title: 'ComboBox',
+};
+
+export function Default() {
+  const [value, setValue] = useState('');
+  function onSuggestionSelect(value: string) {
+    setValue(value);
+  }
+  return (
+    <ComboBox
+      value={value}
+      onChange={setValue}
+      onOptionSelect={onSuggestionSelect}
+      noOptionMatchedMessage="Press Enter For Custom Input"
+    >
+      <Option
+        label="John Doe"
+        value="John Doe"
+        keywords={['john', 'doe', 'john doe', 'developer', 'engineer']}
+      >
+        John Doe
+      </Option>
+      <Option
+        label="Jane Smith"
+        value="Jane Smith"
+        keywords={['jane', 'smith', 'jane smith', 'designer', 'creative']}
+      >
+        Jane Smith
+      </Option>
+      <Option
+        label="Robert Brown"
+        value="Robert Brown"
+        keywords={['robert', 'brown', 'robert brown', 'manager', 'lead']}
+      >
+        Robert Brown
+      </Option>
+      <Option
+        label="Emily Clark"
+        value="Emily Clark"
+        keywords={['emily', 'clark', 'emily clark', 'analyst', 'data']}
+      >
+        Emily Clark
+      </Option>
+      <Option
+        label="Michael Johnson"
+        value="Michael Johnson"
+        keywords={['michael', 'johnson', 'michael johnson', 'architect', 'senior']}
+      >
+        Michael Johnson
+      </Option>
+      <Option
+        label="Sarah Davis"
+        value="Sarah Davis"
+        keywords={['sarah', 'davis', 'sarah davis', 'product', 'owner']}
+      >
+        Sarah Davis
+      </Option>
+      <Option
+        label="David Wilson"
+        value="David Wilson"
+        keywords={['david', 'wilson', 'david wilson', 'tester', 'qa']}
+      >
+        David Wilson
+      </Option>
+      <Option
+        label="Lisa Taylor"
+        value="Lisa Taylor"
+        keywords={['lisa', 'taylor', 'lisa taylor', 'ux', 'researcher']}
+      >
+        Lisa Taylor
+      </Option>
+      <Option
+        label="Kevin Martin"
+        value="Kevin Martin"
+        keywords={['kevin', 'martin', 'kevin martin', 'devops', 'infrastructure']}
+      >
+        Kevin Martin
+      </Option>
+      <Option
+        label="Laura White"
+        value="Laura White"
+        keywords={['laura', 'white', 'laura white', 'frontend', 'react']}
+      >
+        Laura White
+      </Option>
+    </ComboBox>
+  );
+}

package/src/inputs/combo_box/combo_box.tsx

@@ -0,0 +1,153 @@
+import { useForkRef } from '../../utils/index.js';
+import classNames from 'classnames';
+import React, { useRef, useState } from 'react';
+import { SuggestionList } from '../suggestions/suggestion_list.js';
+import { Input, InputProps } from '../input/input.js';
+import { OptionProps } from '../options/option.js';
+
+export interface ComboBoxProps extends InputProps {
+  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;
+  onOptionSelect?: (value: string) => void;
+  noOptionMatchedMessage?: React.ReactNode;
+  trimCustomInput?: boolean;
+}
+
+export const ComboBox = React.forwardRef(function ComboBox(
+  {
+    onOptionSelect: onSuggestionSelect,
+    children = [],
+    onKeyDown,
+    onKeyUp,
+    value,
+    noOptionMatchedMessage,
+    trimCustomInput = false,
+    className,
+    onMouseDown,
+    onMouseUp,
+    ...props
+  }: ComboBoxProps,
+  ref: React.Ref<HTMLInputElement>
+) {
+  const isAlreadyFocusedRef = useRef(false);
+  const valueRef = useRef(value);
+  const isClosingRef = useRef(false);
+  const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);
+  const internalInputRef = useRef<HTMLInputElement | null>(null);
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
+  const forkedRef = useForkRef(ref, internalInputRef);
+
+  function openSuggestions() {
+    setIsSuggestionsOpen(true);
+  }
+
+  function closeSuggestions() {
+    isClosingRef.current = false;
+    setIsSuggestionsOpen(false);
+  }
+
+  function handleClose(
+    value: string,
+    selectionStart: number | null,
+    selectionEnd: number | null
+  ) {
+    isClosingRef.current = true;
+    const input = internalInputRef.current;
+
+    requestAnimationFrame(() => {
+      if (input != null) {
+        input.value = value;
+        input.focus();
+        input.setSelectionRange(selectionStart, selectionEnd);
+      }
+    });
+    props.onChange && props.onChange(value);
+    closeSuggestions();
+  }
+
+  function handleSelection(value: string) {
+    isClosingRef.current = true;
+    const input = internalInputRef.current;
+
+    if (input != null) {
+      input.focus();
+    }
+
+    closeSuggestions();
+    onSuggestionSelect && onSuggestionSelect(value);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    valueRef.current = event.currentTarget.value;
+
+    if (isClosingRef.current) {
+      isClosingRef.current = false;
+      onKeyDown && onKeyDown(event);
+      return;
+    }
+
+    onKeyDown && onKeyDown(event);
+  }
+
+  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
+    const key = event.key;
+
+    if (key === 'Enter') {
+      if (isSuggestionsOpen) {
+        closeSuggestions();
+      } else {
+        openSuggestions();
+        event.preventDefault();
+      }
+    }
+
+    if (valueRef.current !== event.currentTarget.value) {
+      openSuggestions();
+    }
+
+    onKeyUp && onKeyUp(event);
+  }
+
+  function handlMouseDown(event: React.MouseEvent<HTMLInputElement>) {
+    setAnchorElement(event.currentTarget);
+    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;
+    onMouseDown && onMouseDown(event);
+  }
+
+  function handleMouseUp(event: React.MouseEvent<HTMLInputElement>) {
+    if (isClosingRef.current) {
+      isClosingRef.current = false;
+      closeSuggestions();
+    }
+
+    openSuggestions();
+    onMouseUp && onMouseUp(event);
+  }
+
+  return (
+    <>
+      <Input
+        ref={forkedRef}
+        className={classNames(className, 'combo-box-input')}
+        {...props}
+        value={value}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        onMouseDown={handlMouseDown}
+        onMouseUp={handleMouseUp}
+      />
+      {isSuggestionsOpen && (
+        <SuggestionList
+          anchorElement={anchorElement}
+          onClose={handleClose}
+          value={value}
+          trimCustomInput={trimCustomInput}
+          onOptionSelect={handleSelection}
+          noSuggestionMessage={noOptionMatchedMessage}
+          haveValueAsOption={true}
+        >
+          {children}
+        </SuggestionList>
+      )}
+    </>
+  );
+});

package/src/inputs/date_picker/date_picker.module.css

@@ -0,0 +1,20 @@
+.date-picker {
+  outline: none;
+}
+
+.date-picker-box {
+  font-size: 14px;
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.9);
+  border: 0;
+  border-radius: 4px;
+  padding: 4px;
+  box-sizing: border-box;
+  color: var(--font-color);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.date-picker-box[data-is-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}

package/src/inputs/date_picker/date_picker.stories.tsx

@@ -0,0 +1,126 @@
+import { useSignalValue } from '@tcn/state';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import React from 'react';
+import { Button } from '../../actions/index.js';
+import { DatePicker } from './date_picker.js';
+import { DatePickerPresenter } from './date_picker_presenter.js';
+
+export default {
+  title: 'Date Picker',
+};
+
+export function Baseline() {
+  return <DatePicker value={new Date()} />;
+}
+
+export function BoundedTime() {
+  return (
+    <DatePicker
+      showTime
+      value={new Date()}
+      minVisibleTimeInMilliseconds={8 * 1000 * 60 * 60}
+      maxVisibleTimeInMilliseconds={17 * 1000 * 60 * 60}
+    />
+  );
+}
+
+export function SmallValidRange() {
+  const min = new Date();
+  const max = new Date();
+  min.setDate(min.getDate() - 1);
+  max.setDate(max.getDate() + 1);
+
+  min.setHours(10, 0, 0, 0);
+  max.setHours(12, 0, 0, 0);
+  return (
+    <DatePicker
+      showTime
+      value={new Date()}
+      min={min}
+      max={max}
+      minVisibleTimeInMilliseconds={8 * 1000 * 60 * 60}
+      maxVisibleTimeInMilliseconds={17 * 1000 * 60 * 60}
+    />
+  );
+}
+
+export function MidValidRange() {
+  const min = new Date();
+  const max = new Date();
+  min.setFullYear(min.getFullYear() - 10);
+  max.setFullYear(max.getFullYear() + 10);
+
+  return (
+    <DatePicker
+      showTime
+      value={new Date()}
+      min={min}
+      max={max}
+      minVisibleTimeInMilliseconds={8 * 1000 * 60 * 60}
+      maxVisibleTimeInMilliseconds={17 * 1000 * 60 * 60}
+    />
+  );
+}
+
+export function CountryCode() {
+  return <DatePicker countryCode="fr-FR" value={new Date()} />;
+}
+
+function DatePickerActions({ presenter }: { presenter: DatePickerPresenter }) {
+  const value = useSignalValue(presenter.valueBroadcast);
+
+  function showToday() {
+    const date = new Date();
+    presenter.setVisibleYear(date.getFullYear());
+    presenter.setVisibleMonth(date.getMonth());
+  }
+
+  function showSelected() {
+    if (value != null) {
+      presenter.setVisibleYear(value.getFullYear());
+      presenter.setVisibleMonth(value.getMonth());
+    }
+  }
+
+  function clear() {
+    presenter.clear();
+  }
+
+  return (
+    <VStack height="auto">
+      <Spacer height="8px" />
+      <HStack height="auto" width="auto">
+        <Spacer />
+        <Button hierarchy="tertiary" onClick={showToday}>
+          Show Today
+        </Button>
+        <Spacer width="4px" />
+        <Button hierarchy="tertiary" disabled={value == null} onClick={showSelected}>
+          Show Selected
+        </Button>
+        <Spacer />
+      </HStack>
+      <Spacer height="8px" />
+      <Button width="100%" onClick={clear}>
+        Clear
+      </Button>
+    </VStack>
+  );
+}
+
+export function Actions() {
+  return (
+    <DatePicker
+      value={new Date()}
+      renderActions={presenter => {
+        return <DatePickerActions presenter={presenter} />;
+      }}
+    />
+  );
+}
+
+export function Disabled() {
+  return <DatePicker disabled value={new Date()} />;
+}