scrabble-solver 2.18.9 → 2.18.10-alpha.0

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

@@ -1,59 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,147 +0,0 @@
-@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

@@ -1,19 +0,0 @@
-// 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

@@ -1,5 +0,0 @@
-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

@@ -1,129 +0,0 @@
-@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

@@ -1,19 +0,0 @@
-// 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

@@ -1,101 +0,0 @@
-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

@@ -1,106 +0,0 @@
-import classNames from 'classnames';
-import {
-  type ChangeEventHandler,
-  type FocusEventHandler,
-  type FunctionComponent,
-  type KeyboardEventHandler,
-  memo,
-  type MouseEventHandler,
-  type Ref,
-  type TouchEventHandler,
-} 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

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

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

@@ -1,15 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-// 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

@@ -1,42 +0,0 @@
-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>
-  );
-};