willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-form/src/index.ts

@@ -0,0 +1,176 @@
+export { Calendar, ScheduleCalendar } from "#form/components/Calendar";
+export { Checkbox } from "#form/components/Checkbox";
+export { ColorPicker } from "#form/components/ColorPicker";
+export { DatePicker } from "#form/components/DatePicker";
+export { TimePicker } from "#form/components/TimePicker";
+export { Form } from "#form/components/Form";
+export { FormActions } from "#form/components/FormActions";
+export { FormField } from "#form/components/FormField";
+export { FormGroup } from "#form/components/FormGroup";
+export { FormMessage } from "#form/components/FormMessage";
+export { FilterBar } from "#form/components/FilterBar";
+export { Input } from "#form/components/Input";
+export { NumberInput } from "#form/components/NumberInput";
+export { Picker } from "#form/components/Picker";
+export { Radio } from "#form/components/Radio";
+export { Rate } from "#form/components/Rate";
+export { RangeInput } from "#form/components/RangeInput";
+export { SearchInput } from "#form/components/SearchInput";
+export { Select } from "#form/components/Select";
+export { Switch } from "#form/components/Switch";
+export { TagInput } from "#form/components/TagInput";
+export { TextArea } from "#form/components/TextArea";
+export { TreeSelect } from "#form/components/TreeSelect";
+export { Upload } from "#form/components/Upload";
+
+export type {
+  CalendarMarker,
+  CalendarMarkerContext,
+  CalendarMarkerTone,
+  CalendarCellContext,
+  CalendarHeaderRenderContext,
+  CalendarMode,
+  CalendarProps,
+  CalendarRangeValue,
+  CalendarSelectContext,
+  CalendarValue,
+  ScheduleCalendarEvent,
+  ScheduleCalendarEventContext,
+  ScheduleCalendarProps,
+  ScheduleCalendarTone,
+  ScheduleCalendarView,
+} from "#form/components/Calendar";
+export type { CheckboxProps, CheckboxSize } from "#form/components/Checkbox";
+export type {
+  ColorPickerColor,
+  ColorPickerFormat,
+  ColorPickerHsb,
+  ColorPickerPanelRenderInfo,
+  ColorPickerPreset,
+  ColorPickerProps,
+  ColorPickerRgb,
+  ColorPickerSize,
+  ColorPickerTrigger,
+} from "#form/components/ColorPicker";
+export type {
+  DatePickerMode,
+  DatePickerMarker,
+  DatePickerMarkerContext,
+  DatePickerMarkerTone,
+  DatePickerPicker,
+  DatePickerProps,
+  DatePickerRangeValue,
+  DatePickerSize,
+  DatePickerValue,
+  DatePickerVariant,
+  DatePickerWheelColumn,
+  DatePickerWheelColumns,
+} from "#form/components/DatePicker";
+export type {
+  TimePickerProps,
+  TimePickerSize,
+  TimePickerDisabledTime,
+  TimePickerPreset,
+  TimePickerVariant,
+  TimePickerWheelColumn,
+  TimePickerWheelColumns,
+} from "#form/components/TimePicker";
+export type { FormGap, FormProps } from "#form/components/Form";
+export type {
+  FormActionsAlign,
+  FormActionsDirection,
+  FormActionsGap,
+  FormActionsProps,
+} from "#form/components/FormActions";
+export type {
+  FormFieldOrientation,
+  FormFieldProps,
+  FormFieldSize,
+} from "#form/components/FormField";
+export type {
+  FormGroupColumns,
+  FormGroupGap,
+  FormGroupProps,
+} from "#form/components/FormGroup";
+export type {
+  FormMessageProps,
+  FormMessageTone,
+} from "#form/components/FormMessage";
+export type {
+  FilterBarAlign,
+  FilterBarDensity,
+  FilterBarItem,
+  FilterBarProps,
+} from "#form/components/FilterBar";
+export type {
+  InputProps,
+  InputSize,
+  InputVariant,
+} from "#form/components/Input";
+export type {
+  NumberInputBehaviorOptions,
+  NumberInputConstraints,
+  NumberInputControlOptions,
+  NumberInputControls,
+  NumberInputFormatOptions,
+  NumberInputProps,
+  NumberInputSlots,
+  NumberInputStatus,
+  NumberInputStepInfo,
+  NumberInputStepperOptions,
+  NumberInputValue,
+  NumberInputVariant,
+} from "#form/components/NumberInput";
+export type {
+  PickerItem,
+  PickerMode,
+  PickerProps,
+  PickerSize,
+  PickerVariant,
+} from "#form/components/Picker";
+export type { RadioProps, RadioSize } from "#form/components/Radio";
+export type {
+  RateCharacterRenderContext,
+  RateProps,
+  RateRef,
+  RateSize,
+} from "#form/components/Rate";
+export type { RangeInputProps } from "#form/components/RangeInput";
+export type { SearchInputProps } from "#form/components/SearchInput";
+export type {
+  SelectOption,
+  SelectProps,
+  SelectSize,
+  SelectVariant,
+} from "#form/components/Select";
+export type { SwitchProps, SwitchSize } from "#form/components/Switch";
+export type {
+  TagInputProps,
+  TagInputRejectReason,
+  TagInputRenderContext,
+  TagInputSize,
+  TagInputVariant,
+} from "#form/components/TagInput";
+export type {
+  TextAreaProps,
+  TextAreaResize,
+  TextAreaSize,
+  TextAreaVariant,
+} from "#form/components/TextArea";
+export type {
+  TreeSelectItem,
+  TreeSelectMode,
+  TreeSelectProps,
+  TreeSelectSize,
+  TreeSelectVariant,
+} from "#form/components/TreeSelect";
+export type {
+  UploadErrorHandler,
+  UploadFileKind,
+  UploadHandler,
+  UploadItem,
+  UploadPreviewMode,
+  UploadProps,
+  UploadSize,
+  UploadStatusHandler,
+} from "#form/components/Upload";

package/packages/willa-form/src/internal/colorUtils.ts

@@ -0,0 +1,206 @@
+import { hexToRgb, rgbToHex } from "aidly";
+import { clampNumber } from "@willa-ui/shared";
+
+import type {
+  ColorPickerColor,
+  ColorPickerHsb,
+  ColorPickerRgb,
+} from "#form/components/ColorPicker/types";
+
+export const colorPickerFallbackColor = "#1677ff";
+
+export function normalizeColor(
+  value: string | null = colorPickerFallbackColor,
+) {
+  if (!value) return hexToHsb(colorPickerFallbackColor);
+
+  return parseColor(value) ?? hexToHsb(colorPickerFallbackColor);
+}
+
+export function parseColor(value: string) {
+  return parseHex(value) ?? parseRgb(value) ?? parseHsb(value);
+}
+
+export function retainColorContext(
+  parsedValue: ColorPickerHsb,
+  retainedValue: ColorPickerHsb,
+) {
+  const normalizedValue = normalizeHsb(parsedValue);
+  const normalizedRetainedValue = normalizeHsb(retainedValue);
+
+  if (normalizedValue.s > 0 && normalizedValue.b > 0) {
+    return normalizedValue;
+  }
+
+  return {
+    ...normalizedValue,
+    h: normalizedRetainedValue.h,
+  };
+}
+
+export function createColor(value: ColorPickerHsb): ColorPickerColor {
+  const hsb = normalizeHsb(value);
+  const rgb = hsbToRgb(hsb);
+
+  return {
+    hsb,
+    rgb,
+    toHexString: () => `#${rgbToHex([rgb.r, rgb.g, rgb.b]).toLowerCase()}`,
+    toRgbString: () => formatRgb(rgb),
+    toHsbString: () => formatHsb(hsb),
+  };
+}
+
+export function formatColor(
+  color: ColorPickerColor,
+  format: "hex" | "rgb" | "hsb",
+  disabledAlpha: boolean,
+) {
+  if (format === "rgb") return formatRgb(color.rgb, disabledAlpha);
+  if (format === "hsb") return formatHsb(color.hsb, disabledAlpha);
+  return disabledAlpha || color.rgb.a >= 1
+    ? color.toHexString()
+    : formatRgb(color.rgb);
+}
+
+export function normalizeHsb(value: ColorPickerHsb) {
+  return {
+    h: clampNumber(value.h, 0, 360),
+    s: clampNumber(value.s, 0, 100),
+    b: clampNumber(value.b, 0, 100),
+    a: clampNumber(value.a, 0, 1),
+  };
+}
+
+const parseHex = (value: string) => {
+  const raw = value.trim().replace(/^#/, "");
+  if (![3, 4, 6, 8].includes(raw.length)) return null;
+  const normalized =
+    raw.length === 3 || raw.length === 4
+      ? raw
+          .split("")
+          .map((item) => item + item)
+          .join("")
+      : raw;
+  if (!/^[\da-f]+$/i.test(normalized)) return null;
+
+  const [r, g, b, parsedAlpha] = hexToRgb(normalized);
+  const alpha =
+    normalized.length === 8
+      ? Number.parseInt(normalized.slice(6, 8), 16) / 255
+      : (parsedAlpha ?? 1);
+
+  return rgbToHsb({ r, g, b, a: alpha });
+};
+
+const parseRgb = (value: string) => {
+  const match = value
+    .trim()
+    .match(/^rgba?\(([^,]+),([^,]+),([^,]+)(?:,([^,]+))?\)$/i);
+  if (!match) return null;
+
+  return rgbToHsb({
+    r: clampNumber(Number.parseFloat(match[1]), 0, 255),
+    g: clampNumber(Number.parseFloat(match[2]), 0, 255),
+    b: clampNumber(Number.parseFloat(match[3]), 0, 255),
+    a:
+      match[4] === undefined
+        ? 1
+        : clampNumber(Number.parseFloat(match[4]), 0, 1),
+  });
+};
+
+const parseHsb = (value: string) => {
+  const match = value
+    .trim()
+    .match(/^hsba?\(([^,]+),([^,]+)%,([^,]+)%(?:,([^,]+))?\)$/i);
+  if (!match) return null;
+
+  return normalizeHsb({
+    h: Number.parseFloat(match[1]),
+    s: Number.parseFloat(match[2]),
+    b: Number.parseFloat(match[3]),
+    a:
+      match[4] === undefined
+        ? 1
+        : clampNumber(Number.parseFloat(match[4]), 0, 1),
+  });
+};
+
+const hexToHsb = (value: string) => {
+  return parseHex(value) ?? rgbToHsb({ r: 22, g: 119, b: 255, a: 1 });
+};
+
+const hsbToRgb = (value: ColorPickerHsb): ColorPickerRgb => {
+  const h = clampNumber(value.h, 0, 360);
+  const s = clampNumber(value.s, 0, 100) / 100;
+  const v = clampNumber(value.b, 0, 100) / 100;
+  const c = v * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = v - c;
+  const [r1, g1, b1] =
+    h < 60
+      ? [c, x, 0]
+      : h < 120
+        ? [x, c, 0]
+        : h < 180
+          ? [0, c, x]
+          : h < 240
+            ? [0, x, c]
+            : h < 300
+              ? [x, 0, c]
+              : [c, 0, x];
+
+  return {
+    r: Math.round((r1 + m) * 255),
+    g: Math.round((g1 + m) * 255),
+    b: Math.round((b1 + m) * 255),
+    a: clampNumber(value.a, 0, 1),
+  };
+};
+
+const rgbToHsb = (value: ColorPickerRgb): ColorPickerHsb => {
+  const r = clampNumber(value.r, 0, 255) / 255;
+  const g = clampNumber(value.g, 0, 255) / 255;
+  const b = clampNumber(value.b, 0, 255) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  const hue =
+    delta === 0
+      ? 0
+      : max === r
+        ? 60 * (((g - b) / delta) % 6)
+        : max === g
+          ? 60 * ((b - r) / delta + 2)
+          : 60 * ((r - g) / delta + 4);
+
+  return {
+    h: hue < 0 ? hue + 360 : hue,
+    s: max === 0 ? 0 : (delta / max) * 100,
+    b: max * 100,
+    a: clampNumber(value.a, 0, 1),
+  };
+};
+
+const formatRgb = (value: ColorPickerRgb, withoutAlpha = false) => {
+  if (withoutAlpha || value.a >= 1) {
+    return `rgb(${value.r}, ${value.g}, ${value.b})`;
+  }
+
+  return `rgba(${value.r}, ${value.g}, ${value.b}, ${trimNumber(value.a)})`;
+};
+
+const formatHsb = (value: ColorPickerHsb, withoutAlpha = false) => {
+  const content = `${Math.round(value.h)}, ${Math.round(value.s)}%, ${Math.round(
+    value.b,
+  )}%`;
+
+  return withoutAlpha || value.a >= 1
+    ? `hsb(${content})`
+    : `hsba(${content}, ${trimNumber(value.a)})`;
+};
+
+const trimNumber = (value: number) => {
+  return Number(value.toFixed(2));
+};

package/packages/willa-form/src/internal/comboboxField.tsx

@@ -0,0 +1,114 @@
+import type {
+  ButtonHTMLAttributes,
+  CSSProperties,
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactNode,
+  Ref,
+} from "react";
+
+import {
+  SelectablePanelClearButton,
+  SelectablePanelHiddenInput,
+  SelectablePanelTrigger,
+} from "#form/internal/selectablePanelParts";
+
+export type ComboboxFieldProps = {
+  style?: CSSProperties;
+  disabled?: boolean;
+  controls?: string;
+  hiddenName?: string;
+  onTriggerBlur?: FocusEventHandler<HTMLButtonElement>;
+  triggerProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
+  rootRef: Ref<HTMLSpanElement>;
+  buttonRef: Ref<HTMLButtonElement>;
+  popupRole: "listbox" | "tree";
+  invalid: boolean;
+  expanded: boolean;
+  hasValue: boolean;
+  hasClear: boolean;
+  panelId: string;
+  buttonId: string;
+  className: string;
+  clearLabel: string;
+  hiddenValue: string;
+  iconClassName: string;
+  valueClassName: string;
+  clearClassName: string;
+  triggerClassName: string;
+  placeholderClassName: string;
+  children: ReactNode;
+  displayValue: ReactNode;
+  triggerRef: { current: HTMLElement | null };
+  onTriggerClick: MouseEventHandler<HTMLButtonElement>;
+  onTriggerKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+  onClear: () => void;
+};
+
+export function ComboboxField(props: ComboboxFieldProps) {
+  const {
+    children,
+    className,
+    style,
+    rootRef,
+    triggerProps,
+    buttonId,
+    buttonRef,
+    popupRole,
+    expanded,
+    hasValue,
+    invalid,
+    disabled,
+    controls,
+    displayValue,
+    placeholderClassName,
+    triggerClassName,
+    valueClassName,
+    iconClassName,
+    hasClear,
+    clearClassName,
+    clearLabel,
+    triggerRef,
+    hiddenName,
+    hiddenValue,
+    onClear,
+    onTriggerBlur,
+    onTriggerClick,
+    onTriggerKeyDown,
+  } = props;
+
+  return (
+    <span ref={rootRef} className={className} style={style}>
+      <SelectablePanelTrigger
+        {...triggerProps}
+        buttonRef={buttonRef}
+        id={buttonId}
+        triggerClassName={triggerClassName}
+        valueClassName={valueClassName}
+        placeholderClassName={placeholderClassName}
+        iconClassName={iconClassName}
+        disabled={disabled}
+        popupRole={popupRole}
+        expanded={expanded}
+        controls={controls}
+        invalid={invalid}
+        hasValue={hasValue}
+        displayValue={displayValue}
+        onBlur={onTriggerBlur}
+        onClick={onTriggerClick}
+        onKeyDown={onTriggerKeyDown}
+      />
+      {hasClear ? (
+        <SelectablePanelClearButton
+          className={clearClassName}
+          ariaLabel={clearLabel}
+          onClear={onClear}
+          triggerRef={triggerRef}
+        />
+      ) : null}
+      <SelectablePanelHiddenInput name={hiddenName} value={hiddenValue} />
+      {children}
+    </span>
+  );
+}

package/packages/willa-form/src/internal/floatingPanelParts.tsx

@@ -0,0 +1,80 @@
+import {
+  type AriaRole,
+  type KeyboardEventHandler,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { createPortal } from "react-dom";
+
+import type { FloatingPanelPosition } from "#form/internal/useFloatingPanel";
+
+export type FloatingPanelPortalProps = {
+  children: ReactNode;
+  open: boolean;
+};
+
+export function FloatingPanelPortal(props: FloatingPanelPortalProps) {
+  if (!props.open || typeof document === "undefined") return null;
+  return createPortal(props.children, document.body);
+}
+
+export type FloatingPanelShellProps = {
+  children: ReactNode;
+  className: string;
+  id: string;
+  panelRef: Ref<HTMLDivElement>;
+  position: FloatingPanelPosition | null;
+  role: AriaRole;
+  ariaDescribedBy?: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  ariaModal?: boolean;
+  ariaMultiselectable?: boolean;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+};
+
+export function FloatingPanelShell(props: FloatingPanelShellProps) {
+  const {
+    ariaDescribedBy,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaModal,
+    ariaMultiselectable,
+    children,
+    className,
+    id,
+    panelRef,
+    position,
+    role,
+    onKeyDown,
+  } = props;
+
+  return (
+    <div
+      ref={panelRef}
+      id={id}
+      className={className}
+      role={role}
+      aria-describedby={ariaDescribedBy}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-modal={ariaModal ? true : undefined}
+      aria-multiselectable={ariaMultiselectable ? true : undefined}
+      onKeyDown={onKeyDown}
+      style={getFloatingPanelStyle(position)}
+    >
+      {children}
+    </div>
+  );
+}
+
+const getFloatingPanelStyle = (position: FloatingPanelPosition | null) => {
+  if (!position) {
+    return { left: 0, top: 0, visibility: "hidden" as const };
+  }
+  return {
+    left: position.left,
+    top: position.top,
+    width: position.width,
+  };
+};

package/packages/willa-form/src/internal/selectablePanelKeyboard.ts

@@ -0,0 +1,93 @@
+import type { KeyboardEvent } from "react";
+
+export type SelectablePanelFocusTarget = "first" | "last";
+
+export function focusSelectablePanelItem(
+  panel: HTMLElement | null,
+  selector: string,
+  target: SelectablePanelFocusTarget,
+) {
+  const items = getSelectablePanelItems(panel, selector);
+  const item = target === "last" ? items[items.length - 1] : items[0];
+
+  item?.focus();
+}
+
+export function handleSelectablePanelKeyDown(
+  event: KeyboardEvent<HTMLElement>,
+  options: {
+    panel: HTMLElement | null;
+    selector: string;
+    onClose: () => void;
+    trigger: HTMLElement | null;
+  },
+) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    options.onClose();
+    options.trigger?.focus();
+    return;
+  }
+
+  if (!isSelectablePanelMoveKey(event.key)) return;
+
+  if (
+    isTextInputTarget(event) &&
+    (event.key === "Home" || event.key === "End")
+  ) {
+    return;
+  }
+
+  event.preventDefault();
+
+  const items = getSelectablePanelItems(options.panel, options.selector);
+  if (items.length === 0) return;
+
+  const currentItem =
+    event.target instanceof HTMLElement
+      ? event.target.closest<HTMLElement>(options.selector)
+      : null;
+  const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+  let nextIndex = currentIndex;
+
+  if (event.key === "Home") {
+    nextIndex = 0;
+  } else if (event.key === "End") {
+    nextIndex = items.length - 1;
+  } else if (event.key === "ArrowDown") {
+    nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+  } else if (event.key === "ArrowUp") {
+    nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+  }
+
+  items[nextIndex]?.focus();
+}
+
+const isSelectablePanelMoveKey = (key: string) => {
+  return (
+    key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End"
+  );
+};
+
+const isTextInputTarget = (event: KeyboardEvent<HTMLElement>) => {
+  const target = event.target;
+
+  return (
+    target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement
+  );
+};
+
+const getSelectablePanelItems = (
+  panel: HTMLElement | null,
+  selector: string,
+) => {
+  const elements = Array.from(
+    panel?.querySelectorAll<HTMLElement>(selector) ?? [],
+  );
+
+  return elements.filter((element) => {
+    if (element.getAttribute("aria-hidden") === "true") return false;
+    if ("disabled" in element && element.disabled === true) return false;
+    return element.tabIndex >= 0;
+  });
+};