scrabble-solver 2.18.10-alpha.1 → 2.18.10-alpha.2

package/packages/scrabble-solver/src/components/Table/Row.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import {
+  type CSSProperties,
+  type FocusEventHandler,
+  type FunctionComponent,
+  type MouseEventHandler,
+  type ReactNode,
+} from 'react';
+
+import styles from './Table.module.scss';
+
+interface Props {
+  'aria-label': string;
+  children: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+  highlighted: boolean;
+  inactive: boolean;
+  style?: CSSProperties;
+  onBlur?: FocusEventHandler;
+  onClick?: MouseEventHandler;
+  onFocus?: FocusEventHandler;
+  onMouseEnter?: MouseEventHandler;
+}
+
+export const Row: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
+  children,
+  className,
+  'data-testid': dataTestId,
+  highlighted,
+  inactive,
+  style,
+  onBlur,
+  onClick,
+  onFocus,
+  onMouseEnter,
+}) => {
+  return (
+    <button
+      aria-current={highlighted ? 'true' : undefined}
+      aria-hidden={inactive ? 'true' : undefined}
+      aria-label={ariaLabel}
+      className={classNames(styles.row, className, {
+        [styles.clickable]: Boolean(onClick),
+        [styles.highlighted]: highlighted,
+      })}
+      data-testid={dataTestId}
+      style={style}
+      type="button"
+      onBlur={onBlur}
+      onClick={onClick}
+      onFocus={onFocus}
+      onMouseEnter={onMouseEnter}
+    >
+      <span className={styles.rowContent}>{children}</span>
+    </button>
+  );
+};

package/packages/scrabble-solver/src/components/Table/Search.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { type ChangeEvent, type FunctionComponent, type SubmitEventHandler, useState } from 'react';
+
+import { isRegExp } from '@/lib/isRegExp';
+
+import styles from './Table.module.scss';
+
+interface Props {
+  className?: string;
+  placeholder: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const Search: FunctionComponent<Props> = ({ className, placeholder, value, onChange }) => {
+  const [localValue, setLocalValue] = useState(value);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+
+    setLocalValue(newValue);
+
+    if (isRegExp(newValue)) {
+      onChange(newValue);
+    }
+  };
+
+  const handleSubmit: SubmitEventHandler = (event) => {
+    event.preventDefault();
+  };
+
+  return (
+    <form className={classNames(styles.search, className)} onSubmit={handleSubmit}>
+      <input
+        className={styles.searchField}
+        placeholder={placeholder}
+        type="text"
+        value={localValue}
+        onChange={handleChange}
+      />
+    </form>
+  );
+};

package/packages/scrabble-solver/src/components/Table/Table.module.scss

@@ -0,0 +1,147 @@
+@use 'styles/mixins' as *;
+
+$row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
+
+.header {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: var(--border);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.headerButton {
+  @include button-reset;
+  @include focus-effect;
+
+  cursor: pointer;
+
+  text-transform: uppercase;
+  transition:
+    background-color var(--transition--duration) var(--transition--easing),
+    color var(--transition--duration) var(--transition--easing);
+  background-color: var(--color--background);
+  height: 100%;
+
+  &:first-child {
+    border-start-start-radius: inherit;
+  }
+
+  &:last-child {
+    border-start-end-radius: inherit;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: var(--color--primary);
+    color: var(--color--primary--opposite);
+  }
+
+  &.primary {
+    flex: 1 1 0;
+    min-width: 0;
+    text-transform: uppercase;
+  }
+}
+
+.headerButtonLabel {
+  @include ellipsis;
+
+  flex: 0 1 auto;
+  text-align: start;
+}
+
+.headerButtonIcon {
+  flex: 0 0 auto;
+  width: var(--results--icon--size);
+  height: var(--results--icon--size);
+}
+
+.row {
+  @include button-reset;
+
+  user-select: none;
+  font-weight: 400;
+
+  /**
+   * :focus-visible rather than :focus - a row left focused by click/hover on another row
+   * must not keep looking highlighted.
+   */
+  &:focus-visible,
+  &:hover,
+  &.highlighted {
+    &:not(:disabled) {
+      background-color: var(--color--primary);
+      color: var(--color--primary--opposite);
+    }
+  }
+
+  &[aria-hidden='true'] {
+    color: var(--color--inactive);
+
+    &:focus-visible,
+    &:hover,
+    &.highlighted {
+      &:not(:disabled) {
+        background-color: var(--color--primary--light);
+        color: var(--color--primary--opposite);
+      }
+    }
+  }
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.rowContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--spacing--s);
+  line-height: var(--results--item--height);
+
+  &.primary {
+    flex: 1 1 0;
+    min-width: 0;
+    text-transform: uppercase;
+    justify-content: flex-start;
+    padding-inline-start: $row-padding-horizontal;
+  }
+}
+
+.cellValue {
+  @include ellipsis;
+
+  min-width: 0;
+}
+
+.search {
+  @include focus-effect;
+}
+
+.searchField {
+  @include text-input;
+
+  border: none;
+  border-radius: inherit;
+}
+
+.sortIcon {
+  $size: 19px;
+
+  flex: 0 0 auto;
+  width: $size;
+  height: $size;
+}

package/packages/scrabble-solver/src/components/Table/Table.module.scss.d.ts

@@ -0,0 +1,19 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly cell: string;
+  readonly cellValue: string;
+  readonly clickable: string;
+  readonly header: string;
+  readonly headerButton: string;
+  readonly headerButtonIcon: string;
+  readonly headerButtonLabel: string;
+  readonly highlighted: string;
+  readonly primary: string;
+  readonly row: string;
+  readonly rowContent: string;
+  readonly search: string;
+  readonly searchField: string;
+  readonly sortIcon: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Table/index.ts

@@ -0,0 +1,5 @@
+export { Cell } from './Cell';
+export { Header } from './Header';
+export { HeaderButton } from './HeaderButton';
+export { Row } from './Row';
+export { Search } from './Search';

package/packages/scrabble-solver/src/components/Tile/Tile.module.scss

@@ -0,0 +1,129 @@
+@use 'styles/mixins' as *;
+
+.tile {
+  --background-color: transparent;
+
+  position: relative;
+  width: var(--tile-size, auto);
+  height: var(--tile-size, auto);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background-color: var(--background-color);
+  border-radius: var(--border--radius);
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  user-select: none;
+
+  @include media('<xs') {
+    --border--radius: 3px;
+  }
+
+  &.points1 {
+    --background-color: var(--color--yellow);
+  }
+
+  &.points2 {
+    --background-color: var(--color--green);
+  }
+
+  &.points3,
+  &.points4 {
+    --background-color: var(--color--blue);
+  }
+
+  &.points5 {
+    --background-color: var(--color--red);
+  }
+
+  &.raised {
+    box-shadow: var(--box-shadow--raised);
+
+    @include media('<xs') {
+      box-shadow: var(--box-shadow--raised--subtle);
+    }
+  }
+
+  &.blank {
+    --background-color: var(--color--white);
+
+    color: var(--color--foreground);
+  }
+
+  &.empty {
+    color: var(--color--inactive);
+  }
+
+  &.invalid {
+    --background-color: var(--color--foreground);
+    --shadow--color: var(--box-shadow--color--inverse);
+
+    color: var(--color--white);
+  }
+
+  &.highlighted {
+    --background-color: var(--color--primary);
+
+    color: var(--color--primary--opposite);
+
+    .points {
+      color: inherit;
+    }
+  }
+}
+
+.input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font-size: 16px; // prevent iOS from automatically zooming in on focus
+  outline: none;
+  user-select: none;
+
+  &::selection {
+    background-color: transparent;
+  }
+}
+
+.points {
+  @include text-stroke(var(--background-color), 1px);
+
+  font-size: max(10px, calc(var(--tile-size) * 0.25));
+  position: absolute;
+  inset-block-end: 1%;
+  inset-inline-end: 9%;
+  font-weight: bold;
+  user-select: none;
+  pointer-events: none;
+  letter-spacing: -1px;
+
+  @include media('<xs') {
+    display: none;
+  }
+}
+
+.alert {
+  --size: 30%;
+
+  position: absolute;
+  width: var(--size);
+  height: var(--size);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  border-start-end-radius: inherit;
+  background: radial-gradient(
+    var(--color--error--opposite),
+    var(--color--error--opposite) 85%,
+    transparent 85%,
+    transparent
+  );
+  color: var(--color--error);
+  pointer-events: none;
+}

package/packages/scrabble-solver/src/components/Tile/Tile.module.scss.d.ts

@@ -0,0 +1,19 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly alert: string;
+  readonly blank: string;
+  readonly empty: string;
+  readonly highlighted: string;
+  readonly input: string;
+  readonly invalid: string;
+  readonly points: string;
+  readonly points1: string;
+  readonly points2: string;
+  readonly points3: string;
+  readonly points4: string;
+  readonly points5: string;
+  readonly raised: string;
+  readonly tile: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Tile/Tile.tsx

@@ -0,0 +1,101 @@
+import { useMergeRefs } from '@floating-ui/react';
+import { EMPTY_CELL } from '@scrabble-solver/constants';
+import { type Locale } from '@scrabble-solver/types';
+import {
+  type ChangeEventHandler,
+  type FocusEventHandler,
+  type FunctionComponent,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type Ref,
+  type TouchEventHandler,
+  useCallback,
+  useRef,
+} from 'react';
+
+import { noop } from '@/lib/noop';
+
+import { TilePure } from './TilePure';
+
+interface Props {
+  'aria-label': string;
+  autoFocus?: boolean;
+  character?: string;
+  className?: string;
+  disabled?: boolean;
+  highlighted?: boolean;
+  inputRef?: Ref<HTMLInputElement | null>;
+  isBlank?: boolean;
+  isValid?: boolean;
+  locale: Locale;
+  placeholder?: string;
+  points?: number;
+  raised?: boolean;
+  tabIndex?: number;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onMouseDown?: MouseEventHandler<HTMLInputElement>;
+  onTouchStart?: TouchEventHandler<HTMLInputElement>;
+}
+
+export const Tile: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
+  autoFocus,
+  className,
+  character = '',
+  disabled,
+  highlighted,
+  inputRef,
+  isBlank,
+  isValid,
+  locale,
+  placeholder,
+  points,
+  raised,
+  tabIndex,
+  onChange,
+  onFocus = noop,
+  onKeyDown = noop,
+  onMouseDown = noop,
+  onTouchStart = noop,
+}) => {
+  const ref = useRef<HTMLInputElement>(null);
+  const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);
+  const isEmpty = !character || character === EMPTY_CELL;
+  const canShowPoints = (!isEmpty || isBlank) && typeof points !== 'undefined';
+  const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
+
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      ref.current?.select();
+      onKeyDown(event);
+    },
+    [onKeyDown],
+  );
+
+  return (
+    <TilePure
+      aria-label={ariaLabel}
+      autoFocus={autoFocus}
+      canShowPoints={canShowPoints}
+      character={character}
+      className={className}
+      disabled={disabled}
+      highlighted={highlighted}
+      inputRef={mergedRef}
+      isBlank={isBlank}
+      isValid={isValid}
+      placeholder={placeholder}
+      points={points}
+      pointsFormatted={pointsFormatted}
+      raised={raised}
+      tabIndex={tabIndex}
+      onChange={onChange}
+      onFocus={onFocus}
+      onKeyDown={handleKeyDown}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
+    />
+  );
+};

package/packages/scrabble-solver/src/components/Tile/TilePure.tsx

@@ -0,0 +1,106 @@
+import classNames from 'classnames';
+import {
+  type ChangeEventHandler,
+  type FocusEventHandler,
+  type FunctionComponent,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type Ref,
+  type TouchEventHandler,
+  memo,
+} from 'react';
+
+import ExclamationSquareFill from '@/icons/ExclamationSquareFill.svg';
+
+import styles from './Tile.module.scss';
+
+interface Props {
+  'aria-label': string;
+  autoFocus?: boolean;
+  canShowPoints?: boolean;
+  character?: string;
+  className?: string;
+  disabled?: boolean;
+  highlighted?: boolean;
+  inputRef: Ref<HTMLInputElement>;
+  isBlank?: boolean;
+  isValid?: boolean;
+  placeholder?: string;
+  points?: number;
+  pointsFormatted?: string;
+  raised?: boolean;
+  tabIndex?: number;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onFocus?: FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onMouseDown?: MouseEventHandler<HTMLInputElement>;
+  onTouchStart?: TouchEventHandler<HTMLInputElement>;
+}
+
+const TilePureBase: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
+  autoFocus,
+  canShowPoints,
+  character,
+  className,
+  disabled,
+  highlighted,
+  inputRef,
+  isBlank,
+  isValid,
+  placeholder,
+  points,
+  pointsFormatted,
+  raised,
+  tabIndex,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onMouseDown,
+  onTouchStart,
+}) => (
+  <div
+    className={classNames(styles.tile, className, {
+      [styles.blank]: isBlank,
+      [styles.empty]: !character,
+      [styles.invalid]: !isValid,
+      [styles.highlighted]: highlighted,
+      [styles.points1]: points === 1,
+      [styles.points2]: points === 2,
+      [styles.points3]: points === 3,
+      [styles.points4]: points === 4,
+      [styles.points5]: typeof points === 'number' && points >= 5,
+      [styles.raised]: raised,
+    })}
+    role={highlighted ? 'mark' : undefined}
+  >
+    {character || placeholder}
+
+    {!disabled && (
+      <input
+        aria-label={ariaLabel}
+        autoCapitalize="none"
+        autoComplete="off"
+        autoCorrect="off"
+        autoFocus={autoFocus}
+        className={styles.input}
+        disabled={disabled}
+        ref={inputRef}
+        spellCheck={false}
+        tabIndex={tabIndex}
+        value={character || ''}
+        onChange={onChange}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
+      />
+    )}
+
+    {canShowPoints && <span className={styles.points}>{pointsFormatted}</span>}
+
+    {!isValid && <ExclamationSquareFill aria-hidden="true" className={styles.alert} role="img" />}
+  </div>
+);
+
+export const TilePure = memo(TilePureBase);

package/packages/scrabble-solver/src/components/Tile/index.ts

@@ -0,0 +1 @@
+export { Tile } from './Tile';

package/packages/scrabble-solver/src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,15 @@
+.tooltip {
+  max-width: var(--tooltip--max-width);
+  padding: var(--spacing--s) var(--spacing--m);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
+  background-color: var(--color--tooltip--background);
+  color: var(--color--tooltip--foreground);
+  z-index: var(--z-index--tooltip);
+  text-align: center;
+  pointer-events: none;
+}
+
+.arrow {
+  fill: var(--color--tooltip--background);
+}

package/packages/scrabble-solver/src/components/Tooltip/Tooltip.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly arrow: string;
+  readonly tooltip: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,42 @@
+import type { Placement } from '@floating-ui/react';
+import { type FunctionComponent, type ReactNode } from 'react';
+
+import { useDeferredRender } from '@/hooks/useDeferredRender';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
+
+import { TooltipContext } from './context';
+import { TooltipContent } from './TooltipContent';
+import { TooltipTrigger } from './TooltipTrigger';
+import { useTooltip } from './useTooltip';
+
+interface Props {
+  children: ReactNode;
+  placement?: Placement;
+  tooltip?: ReactNode;
+}
+
+export const Tooltip: FunctionComponent<Props> = ({ children, placement, tooltip }) => {
+  const canRenderTooltip = useDeferredRender();
+  const isTouchDevice = useIsTouchDevice();
+
+  if (!tooltip || !canRenderTooltip || isTouchDevice) {
+    return children;
+  }
+
+  return (
+    <TooltipBase placement={placement} tooltip={tooltip}>
+      {children}
+    </TooltipBase>
+  );
+};
+
+const TooltipBase: FunctionComponent<Props> = ({ children, placement, tooltip }) => {
+  const state = useTooltip({ placement });
+
+  return (
+    <TooltipContext.Provider value={state}>
+      <TooltipTrigger>{children}</TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </TooltipContext.Provider>
+  );
+};