scrabble-solver 2.18.8 → 2.18.10-alpha.0

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

@@ -1,13 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, type ReactNode } from 'react';
-
-import styles from './Key.module.scss';
-
-interface Props {
-  children: ReactNode;
-  className?: string;
-}
-
-export const Key: FunctionComponent<Props> = ({ children, className }) => (
-  <kbd className={classNames(styles.key, className)}>{children}</kbd>
-);

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

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

package/packages/scrabble-solver/src/components/Keys/Arrows/Arrows.module.scss

@@ -1,41 +0,0 @@
-.arrows {
-  display: inline-grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  gap: var(--spacing--xs);
-  gap: 1px;
-}
-
-.arrow {
-  margin-inline-start: 0 !important;
-  max-width: var(--key--height--small);
-  padding: 0;
-}
-
-.up {
-  grid-row: 1;
-  grid-column: 2;
-}
-
-.left {
-  grid-row: 2;
-  grid-column: 1;
-
-  [dir='rtl'] & {
-    grid-column: 3;
-  }
-}
-
-.right {
-  grid-row: 2;
-  grid-column: 3;
-
-  [dir='rtl'] & {
-    grid-column: 1;
-  }
-}
-
-.down {
-  grid-row: 2;
-  grid-column: 2;
-}

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

@@ -1,11 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly arrow: string;
-  readonly arrows: string;
-  readonly down: string;
-  readonly left: string;
-  readonly right: string;
-  readonly up: string;
-};
-
-export default styles;

package/packages/scrabble-solver/src/components/Keys/Arrows/Arrows.tsx

@@ -1,32 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent } from 'react';
-
-import ArrowDown from '@/icons/ArrowDown.svg';
-import ArrowLeft from '@/icons/ArrowLeft.svg';
-import ArrowRight from '@/icons/ArrowRight.svg';
-import ArrowUp from '@/icons/ArrowUp.svg';
-
-import { Key } from '../../Key';
-
-import styles from './Arrows.module.scss';
-
-interface Props {
-  className?: string;
-}
-
-export const Arrows: FunctionComponent<Props> = ({ className }) => (
-  <div className={classNames(styles.arrows, className)}>
-    <Key className={classNames(styles.arrow, styles.left)}>
-      <ArrowLeft aria-hidden="true" role="img" />
-    </Key>
-    <Key className={classNames(styles.arrow, styles.up)}>
-      <ArrowUp aria-hidden="true" role="img" />
-    </Key>
-    <Key className={classNames(styles.arrow, styles.right)}>
-      <ArrowRight aria-hidden="true" role="img" />
-    </Key>
-    <Key className={classNames(styles.arrow, styles.down)}>
-      <ArrowDown aria-hidden="true" role="img" />
-    </Key>
-  </div>
-);

package/packages/scrabble-solver/src/components/Keys/Arrows/index.ts

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

package/packages/scrabble-solver/src/components/Keys/index.tsx

@@ -1,28 +0,0 @@
-import { type FunctionComponent } from 'react';
-
-import { isMac } from '@/lib/isMac';
-import { useTranslate } from '@/state';
-
-import { Key } from '../Key';
-
-interface Props {
-  className?: string;
-}
-
-export const Backspace: FunctionComponent<Props> = ({ className }) => <Key className={className}>← Backspace</Key>;
-
-export const Ctrl: FunctionComponent<Props> = ({ className }) => (
-  <Key className={className}>{isMac() ? '⌘' : 'Ctrl'}</Key>
-);
-
-export const Del: FunctionComponent<Props> = ({ className }) => <Key className={className}>Del</Key>;
-
-export const Enter: FunctionComponent<Props> = ({ className }) => <Key className={className}>Enter ⏎</Key>;
-
-export const Space: FunctionComponent<Props> = ({ className }) => {
-  const translate = useTranslate();
-
-  return <Key className={className}>{` ${translate('common.space')} `}</Key>;
-};
-
-export { Arrows } from './Arrows';

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

@@ -1,33 +0,0 @@
-.loading,
-.dim {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-}
-
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dim {
-  background-color: var(--color--background--overlay);
-  z-index: 1;
-  backdrop-filter: blur(2px);
-}
-
-.text {
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tiles {
-  width: calc(100% * 2 / 3);
-  height: 100%;
-}

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

@@ -1,9 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly dim: string;
-  readonly loading: string;
-  readonly text: string;
-  readonly tiles: string;
-};
-
-export default styles;

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

@@ -1,37 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, useMemo } from 'react';
-
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import { selectLocale, useTranslate, useTypedSelector } from '@/state';
-
-import { PlainTiles } from '../PlainTiles';
-
-import styles from './Loading.module.scss';
-
-interface Props {
-  children?: never;
-  className?: string;
-  wave?: boolean;
-}
-
-export const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
-  const translate = useTranslate();
-  const locale = useTypedSelector(selectLocale);
-  const { direction } = LOCALE_FEATURES[locale];
-  const translation = translate('common.loading');
-  const message = direction === 'ltr' ? translation : translation.split('').reverse().join('');
-  const content = useMemo(() => {
-    const uppercased = message.toLocaleUpperCase();
-    const parts = uppercased.split(' ');
-    return [parts];
-  }, [message]);
-
-  return (
-    <div aria-label={translation} className={classNames(styles.loading, className)} data-testid="loading" role="status">
-      <div className={styles.dim} />
-      <div className={styles.text}>
-        <PlainTiles className={classNames(styles.tiles)} content={content} dropShadow wave={wave} />
-      </div>
-    </div>
-  );
-};

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

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

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

@@ -1,12 +0,0 @@
-import Image from 'next/image';
-import { forwardRef } from 'react';
-
-import { LOGO_HEIGHT, LOGO_SRC, LOGO_WIDTH } from '@/parameters';
-
-interface Props {
-  className?: string;
-}
-
-export const Logo = forwardRef<HTMLImageElement, Props>((props, ref) => (
-  <Image {...props} alt="Scrabble Solver 2" height={LOGO_HEIGHT} priority ref={ref} src={LOGO_SRC} width={LOGO_WIDTH} />
-));

package/packages/scrabble-solver/src/components/Logo/LogoBlueprint.tsx

@@ -1,22 +0,0 @@
-/**
- * This component is unused, but it serves as a blueprint for the Logo.svg.
- * Logo.svg is what this component generates with all text nodes:
- * - using font-family: Open Sans
- * - transformed into paths (manually with Inkscape)
- * - arranged (centered vertically against respective rows)
- * - tile fills substituted with concrete colors
- */
-import { type CSSProperties, type FunctionComponent } from 'react';
-
-import { PlainTiles } from '../PlainTiles';
-
-interface Props {
-  className?: string;
-  style?: CSSProperties;
-}
-
-const CONTENT = [['SCRABBLE'], ['SOLVER', '2']];
-
-export const LogoBlueprint: FunctionComponent<Props> = ({ className, style }) => (
-  <PlainTiles className={className} content={CONTENT} style={style} />
-);

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

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

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

@@ -1,119 +0,0 @@
-@use 'styles/mixins' as *;
-
-.modal,
-.closeButton {
-  top: 0;
-  inset-inline-end: 0;
-}
-
-.modal {
-  position: fixed;
-  bottom: 0;
-  z-index: var(--z-index--modal);
-  width: var(--modal--width);
-  padding: 0;
-  border-radius: 0;
-  border: none;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.afterOpen {
-  .container {
-    [dir='ltr'] &,
-    [dir='rtl'] & {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-}
-
-.beforeClose {
-  .container {
-    opacity: 0;
-
-    [dir='ltr'] & {
-      transform: translateX(var(--modal--width));
-    }
-
-    [dir='rtl'] & {
-      transform: translateX(calc(-1 * var(--modal--width)));
-    }
-  }
-}
-
-.overlay {
-  background-color: transparent;
-}
-
-.container {
-  --box-shadow--offset: 1px;
-  --box-shadow--offset--negative: calc(-1 * var(--box-shadow--offset));
-
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: var(--color--background);
-  transition: var(--transition--long);
-  transform: translateX(var(--modal--width));
-  overflow: hidden;
-  opacity: 0;
-
-  [dir='ltr'] & {
-    transform: translateX(var(--modal--width));
-    box-shadow: var(--box-shadow--offset--negative) 0 var(--box-shadow--blur) var(--box-shadow--spread)
-      var(--box-shadow--color);
-  }
-
-  [dir='rtl'] & {
-    transform: translateX(calc(-1 * var(--modal--width)));
-    box-shadow: var(--box-shadow--offset) 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--box-shadow--color);
-  }
-}
-
-.header {
-  position: relative;
-  z-index: 1;
-  flex: 0 0 auto;
-  padding: var(--spacing--l);
-  padding-bottom: 0;
-  background-color: var(--color--background);
-}
-
-.title {
-  font-size: var(--font--size--h1);
-  font-weight: 300;
-  padding-inline-end: calc(var(--square-button--size) + var(--spacing--s));
-}
-
-.closeButton {
-  position: absolute !important;
-  z-index: var(--z-index--close-button);
-  margin: var(--spacing--l);
-}
-
-.content {
-  @include scrollbars;
-
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: var(--spacing--l);
-}
-
-.footer {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row-reverse;
-  gap: var(--spacing--l);
-  padding: var(--spacing--l);
-  padding-top: 0;
-
-  > * {
-    min-width: 0;
-    flex: 1;
-  }
-}

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

@@ -1,15 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly afterOpen: string;
-  readonly beforeClose: string;
-  readonly closeButton: string;
-  readonly container: string;
-  readonly content: string;
-  readonly footer: string;
-  readonly header: string;
-  readonly modal: string;
-  readonly overlay: string;
-  readonly title: string;
-};
-
-export default styles;

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

@@ -1,105 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, type ReactNode, useCallback, useEffect, useState } from 'react';
-import ReactModal from 'react-modal';
-
-import CrossSquareFill from '@/icons/CrossSquareFill.svg';
-import { TRANSITION_DURATION_LONG } from '@/parameters';
-import { useTranslate } from '@/state';
-
-import { IconButton } from '../IconButton';
-
-import { Section } from './components';
-import styles from './Modal.module.scss';
-
-if (typeof document !== 'undefined') {
-  ReactModal.setAppElement('#__next');
-}
-
-export interface Props {
-  children: ReactNode;
-  className?: string;
-  footer?: ReactNode;
-  isOpen: boolean;
-  modalClassName?: string;
-  title: string;
-  onClose: () => void;
-}
-
-const ModalBase: FunctionComponent<Props> = ({
-  children,
-  className,
-  footer,
-  isOpen,
-  modalClassName,
-  title,
-  onClose,
-}) => {
-  const translate = useTranslate();
-  const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
-
-  const handleEscape = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setShouldReturnFocusAfterClose(false);
-        setTimeout(() => {
-          onClose();
-        }, 0);
-      }
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleEscape);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-    };
-  }, [handleEscape]);
-
-  useEffect(() => {
-    if (isOpen) {
-      setShouldReturnFocusAfterClose(true);
-    }
-  }, [isOpen]);
-
-  return (
-    <ReactModal
-      aria={{ modal: true }}
-      className={{
-        afterOpen: styles.afterOpen,
-        base: classNames(styles.modal, modalClassName),
-        beforeClose: styles.beforeClose,
-      }}
-      closeTimeoutMS={TRANSITION_DURATION_LONG}
-      contentLabel={title}
-      isOpen={isOpen}
-      overlayClassName={styles.overlay}
-      role="dialog"
-      shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}
-      onRequestClose={onClose}
-    >
-      <div className={classNames(styles.container, className)}>
-        <div className={styles.header}>
-          <h1 className={styles.title}>{title}</h1>
-
-          <IconButton
-            aria-label={translate('common.close')}
-            className={styles.closeButton}
-            Icon={CrossSquareFill}
-            tooltip={translate('common.close')}
-            onClick={onClose}
-          />
-        </div>
-
-        <div className={styles.content}>{children}</div>
-
-        {footer && <div className={styles.footer}>{footer}</div>}
-      </div>
-    </ReactModal>
-  );
-};
-
-export const Modal = Object.assign(ModalBase, {
-  Section,
-});

package/packages/scrabble-solver/src/components/Modal/components/Section/Section.module.scss

@@ -1,11 +0,0 @@
-.section {
-  & + & {
-    margin-top: var(--spacing--xl);
-  }
-}
-
-.heading {
-  margin-bottom: var(--spacing--m);
-  font-size: var(--font--size--h2);
-  font-weight: 300;
-}

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

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

package/packages/scrabble-solver/src/components/Modal/components/Section/Section.tsx

@@ -1,18 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, type ReactNode } from 'react';
-
-import styles from './Section.module.scss';
-
-interface Props {
-  children: ReactNode;
-  className?: string;
-  label: string;
-  title: ReactNode;
-}
-
-export const Section: FunctionComponent<Props> = ({ children, className, label, title }) => (
-  <section aria-label={label} className={classNames(styles.section, className)}>
-    <h2 className={styles.heading}>{title}</h2>
-    <div>{children}</div>
-  </section>
-);

package/packages/scrabble-solver/src/components/Modal/components/Section/index.ts

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

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

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

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

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

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

@@ -1,53 +0,0 @@
-@use 'styles/mixins' as *;
-
-.navButtons {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing--l);
-  gap: calc(var(--spacing--l) - var(--spacing--xs));
-}
-
-.button,
-.separator {
-  &:last-child {
-    margin-right: 0;
-  }
-}
-
-.group {
-  display: flex;
-  gap: var(--spacing--l);
-}
-
-.separator {
-  border-right: var(--border);
-  border-color: var(--color--inactive);
-  height: 32px;
-}
-
-.error {
-  &,
-  &:active,
-  &:focus,
-  &:hover {
-    color: var(--color--error);
-  }
-}
-
-.fullNav {
-  @include media('<s') {
-    display: none;
-  }
-}
-
-.shortNav {
-  @include media('>=s') {
-    display: none;
-  }
-}
-
-.keyMapButton {
-  @include media('touch') {
-    display: none;
-  }
-}

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

@@ -1,13 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly button: string;
-  readonly error: string;
-  readonly fullNav: string;
-  readonly group: string;
-  readonly keyMapButton: string;
-  readonly navButtons: string;
-  readonly separator: string;
-  readonly shortNav: string;
-};
-
-export default styles;