scrabble-solver 2.18.10-alpha.2 → 2.19.0-alpha.0

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

@@ -1,96 +0,0 @@
-@use 'styles/mixins' as *;
-
-.button {
-  @include button-reset;
-  @include focus-effect;
-
-  display: inline-block;
-  padding: var(--spacing--m) var(--spacing--l);
-  border: var(--border);
-  border-radius: var(--border--radius);
-  text-transform: uppercase;
-  transition: var(--transition);
-  cursor: pointer;
-
-  &,
-  &:active,
-  &:focus,
-  &:hover {
-    box-shadow: var(--box-shadow);
-    text-decoration: none;
-
-    &.primary {
-      background-color: var(--color--primary);
-      color: var(--color--primary--opposite);
-    }
-
-    &.default {
-      background-color: var(--color--background--element);
-      color: var(--color--foreground);
-
-      .icon {
-        color: var(--color--inactive);
-      }
-    }
-  }
-
-  &:focus,
-  &:hover {
-    &.default:not(:disabled) {
-      .icon {
-        color: var(--color--foreground--secondary);
-      }
-    }
-  }
-
-  &:active {
-    &:not(:disabled) {
-      .content {
-        position: relative;
-        top: 1px;
-      }
-    }
-  }
-
-  &[disabled] {
-    @include disabled;
-  }
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing--l);
-  line-height: var(--button--icon--size);
-
-  @include media('<l') {
-    gap: var(--spacing--m);
-  }
-}
-
-.icon {
-  flex: 0 0 auto;
-  width: var(--button--icon--size);
-  height: var(--button--icon--size);
-  transition: var(--transition);
-}
-
-.label {
-  @include ellipsis;
-
-  font-size: var(--font--size--h3);
-  transition: var(--transition);
-  text-align: start;
-}
-
-.wide {
-  .content {
-    justify-content: normal;
-    gap: var(--spacing--l);
-  }
-
-  .label {
-    flex: 1;
-  }
-}

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

@@ -1,12 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly button: string;
-  readonly content: string;
-  readonly default: string;
-  readonly icon: string;
-  readonly label: string;
-  readonly primary: string;
-  readonly wide: string;
-};
-
-export default styles;

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

@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode, type SVGAttributes } from 'react';
-
-import { Tooltip } from '../Tooltip';
-
-import styles from './Button.module.scss';
-import { Link } from './Link';
-
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  'aria-label': string;
-  Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
-  iconClassName?: string;
-  tooltip?: ReactNode;
-  variant?: 'default' | 'primary';
-  wide?: boolean;
-}
-
-const ButtonBase: FunctionComponent<Props> = ({
-  children,
-  className,
-  Icon,
-  iconClassName,
-  tooltip,
-  variant = 'default',
-  wide,
-  ...props
-}) => {
-  return (
-    <Tooltip tooltip={tooltip}>
-      <button
-        className={classNames(styles.button, className, {
-          [styles.default]: variant === 'default',
-          [styles.primary]: variant === 'primary',
-          [styles.wide]: wide,
-        })}
-        type="button"
-        {...props}
-      >
-        <span className={styles.content}>
-          {Icon && <Icon aria-hidden="true" className={classNames(styles.icon, iconClassName)} role="img" />}
-          {children && <span className={styles.label}>{children}</span>}
-        </span>
-      </button>
-    </Tooltip>
-  );
-};
-
-export const Button = Object.assign(ButtonBase, {
-  Link,
-});

package/packages/scrabble-solver/src/components/Button/Link.tsx

@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-import { type AnchorHTMLAttributes, type FunctionComponent, type ReactNode, type SVGAttributes } from 'react';
-
-import { Tooltip } from '../Tooltip';
-
-import styles from './Button.module.scss';
-
-interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  'aria-label': string;
-  href: string;
-  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  iconClassName?: string;
-  tooltip?: ReactNode;
-  variant?: 'default' | 'primary';
-  wide?: boolean;
-}
-
-export const Link: FunctionComponent<Props> = ({
-  children,
-  className,
-  Icon,
-  iconClassName,
-  tooltip,
-  variant = 'default',
-  wide,
-  ...props
-}) => {
-  return (
-    <Tooltip tooltip={tooltip}>
-      <a
-        className={classNames(styles.button, className, {
-          [styles.default]: variant === 'default',
-          [styles.primary]: variant === 'primary',
-          [styles.wide]: wide,
-        })}
-        {...props}
-      >
-        <span className={styles.content}>
-          {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
-          {children && <span className={styles.label}>{children}</span>}
-        </span>
-      </a>
-    </Tooltip>
-  );
-};

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

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

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

@@ -1,65 +0,0 @@
-@use 'styles/mixins' as *;
-
-.dictionary {
-  position: relative;
-  min-height: 0;
-  word-break: break-word;
-
-  &:focus-within {
-    @include focus-effect;
-  }
-}
-
-.content {
-  @include scrollbars;
-
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-  border-radius: inherit;
-
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.result {
-  flex-shrink: 0;
-
-  &:last-child {
-    flex-grow: 1;
-  }
-
-  &.isAllowed {
-    background-color: var(--color--green--light);
-  }
-
-  &.isNotAllowed {
-    background-color: var(--color--red--light);
-  }
-}
-
-.resultContent {
-  padding: var(--spacing--l);
-}
-
-.word {
-  margin-bottom: var(--spacing--m);
-  font-size: var(--font--size--h2);
-  text-transform: uppercase;
-}
-
-.definitions {
-  margin: 0;
-  padding-inline-start: var(--spacing--l);
-}
-
-.definition {
-  margin-bottom: var(--spacing--s);
-  white-space: pre-wrap;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}

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

@@ -1,14 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly content: string;
-  readonly definition: string;
-  readonly definitions: string;
-  readonly dictionary: string;
-  readonly isAllowed: string;
-  readonly isNotAllowed: string;
-  readonly result: string;
-  readonly resultContent: string;
-  readonly word: string;
-};
-
-export default styles;

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

@@ -1,78 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent } from 'react';
-
-import {
-  selectDictionaryError,
-  selectDictionaryIsLoading,
-  selectDictionaryResults,
-  useTranslate,
-  useTypedSelector,
-} from '@/state';
-
-import { EmptyState } from '../EmptyState';
-import { Loading } from '../Loading';
-
-import styles from './Dictionary.module.scss';
-
-interface Props {
-  className?: string;
-}
-
-export const Dictionary: FunctionComponent<Props> = ({ className }) => {
-  const translate = useTranslate();
-  const results = useTypedSelector(selectDictionaryResults);
-  const isLoading = useTypedSelector(selectDictionaryIsLoading);
-  const error = useTypedSelector(selectDictionaryError);
-
-  return (
-    <div className={classNames(styles.dictionary, className)}>
-      <div className={styles.content}>
-        {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
-
-        {typeof error === 'undefined' && !isLoading && results.length === 0 && (
-          <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
-        )}
-
-        {results.map(({ definitions, exists, isAllowed, word }) => (
-          <div
-            className={classNames(styles.result, {
-              [styles.isAllowed]: isAllowed === true,
-              [styles.isNotAllowed]: isAllowed === false,
-            })}
-            key={word}
-          >
-            <div className={styles.resultContent}>
-              {word && <h2 className={styles.word}>{word}</h2>}
-
-              {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
-
-              {isAllowed === true && definitions.length === 0 && (
-                <>
-                  <div>
-                    {exists
-                      ? translate('dictionary.empty-state.no-definitions')
-                      : translate('dictionary.empty-state.no-results')}
-                  </div>
-                </>
-              )}
-
-              {isAllowed === true && definitions.length > 0 && (
-                <ul className={styles.definitions}>
-                  {definitions.map((result, index) => (
-                    <li className={styles.definition} key={index}>
-                      {result}
-                    </li>
-                  ))}
-                </ul>
-              )}
-
-              {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {isLoading && <Loading />}
-    </div>
-  );
-};

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

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

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

@@ -1,12 +0,0 @@
-@use 'styles/mixins' as *;
-
-.dictionaryInput {
-  @include focus-effect;
-}
-
-.input {
-  @include text-input;
-
-  border: none;
-  border-radius: inherit;
-}

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

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

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

@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-import { type ChangeEvent, type FunctionComponent, type SubmitEvent } from 'react';
-import { useDispatch } from 'react-redux';
-
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import { dictionarySlice, selectDictionary, selectLocale, useTranslate, useTypedSelector } from '@/state';
-
-import styles from './DictionaryInput.module.scss';
-
-interface Props {
-  className?: string;
-}
-
-export const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
-  const dispatch = useDispatch();
-  const translate = useTranslate();
-  const locale = useTypedSelector(selectLocale);
-  const { input } = useTypedSelector(selectDictionary);
-  const { comma } = LOCALE_FEATURES[locale];
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    dispatch(dictionarySlice.actions.changeInput(event.target.value));
-  };
-
-  const handleSubmit = (event: SubmitEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    dispatch(dictionarySlice.actions.submit());
-  };
-
-  return (
-    <form className={classNames(styles.dictionaryInput, className)} onSubmit={handleSubmit}>
-      <input
-        aria-label={translate('dictionary.input.title')}
-        className={styles.input}
-        pattern={`.*[^\\s${comma}].*`}
-        placeholder={translate('dictionary.input.placeholder')}
-        required
-        title={translate('dictionary.input.title')}
-        type="text"
-        value={input}
-        onChange={handleChange}
-      />
-    </form>
-  );
-};

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

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

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

@@ -1,14 +0,0 @@
-.emptyState {
-  padding: var(--spacing--xl);
-  color: var(--color--foreground--secondary);
-  text-align: center;
-  text-transform: none;
-}
-
-.tiles {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: var(--spacing--m);
-  height: 48px;
-  overflow: visible;
-}

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

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

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

@@ -1,55 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, type ReactNode, useMemo } from 'react';
-
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from '@/parameters';
-import { selectLocale, useTranslate, useTypedSelector } from '@/state';
-import { type Translations } from '@/types';
-
-import { PlainTiles } from '../PlainTiles';
-
-import styles from './EmptyState.module.scss';
-
-interface Props {
-  children: ReactNode;
-  className?: string;
-  variant: 'error' | 'info' | 'success' | 'warning';
-}
-
-const TITLE_KEY_PER_TYPE: Record<Props['variant'], keyof Translations> = {
-  error: 'empty-state.error',
-  info: 'empty-state.info',
-  success: 'empty-state.success',
-  warning: 'empty-state.warning',
-};
-
-const COLORS_PER_TYPE: Record<Props['variant'], string> = {
-  error: COLOR_RED,
-  info: COLOR_BLUE,
-  success: COLOR_GREEN,
-  warning: COLOR_YELLOW,
-};
-
-const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
-
-const reverseGraphemes = (value: string): string => {
-  return Array.from(graphemeSegmenter.segment(value), (segment) => segment.segment)
-    .reverse()
-    .join('');
-};
-
-export const EmptyState: FunctionComponent<Props> = ({ children, className, variant }) => {
-  const translate = useTranslate();
-  const locale = useTypedSelector(selectLocale);
-  const { direction } = LOCALE_FEATURES[locale];
-  const title = translate(TITLE_KEY_PER_TYPE[variant]);
-  const message = direction === 'ltr' ? title : reverseGraphemes(title);
-  const content = useMemo(() => [message.toUpperCase().split(' ')], [message]);
-
-  return (
-    <div className={classNames(styles.emptyState, className)}>
-      <PlainTiles className={styles.tiles} color={COLORS_PER_TYPE[variant]} content={content} />
-      <div>{children}</div>
-    </div>
-  );
-};

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

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

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

@@ -1,39 +0,0 @@
-@use 'styles/mixins' as *;
-
-.iconButton {
-  @include button-reset;
-  @include focus-effect;
-
-  display: inline-block;
-  color: var(--color--inactive);
-  cursor: pointer;
-  transition: var(--transition);
-
-  &:focus,
-  &:hover {
-    text-decoration: none;
-    color: var(--color--foreground--secondary);
-  }
-
-  &:active {
-    color: var(--color--foreground);
-  }
-
-  &[disabled] {
-    @include disabled;
-  }
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon {
-  width: var(--square-button--size);
-  height: var(--square-button--size);
-  pointer-events: none;
-  color: inherit;
-  transition: var(--transition);
-}

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

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

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

@@ -1,31 +0,0 @@
-import classNames from 'classnames';
-import { type ButtonHTMLAttributes, type FunctionComponent, type MouseEventHandler, type SVGAttributes } from 'react';
-
-import { Tooltip } from '../Tooltip';
-
-import styles from './IconButton.module.scss';
-import { Link } from './Link';
-
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  'aria-label': string;
-  children?: never;
-  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  tooltip: string;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-}
-
-const IconButtonBase: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
-  return (
-    <Tooltip tooltip={tooltip}>
-      <button className={classNames(styles.iconButton, className)} type="button" {...props}>
-        <span className={styles.content}>
-          <Icon aria-hidden="true" className={styles.icon} role="img" />
-        </span>
-      </button>
-    </Tooltip>
-  );
-};
-
-export const IconButton = Object.assign(IconButtonBase, {
-  Link,
-});

package/packages/scrabble-solver/src/components/IconButton/Link.tsx

@@ -1,26 +0,0 @@
-import classNames from 'classnames';
-import { type AnchorHTMLAttributes, type FunctionComponent, type SVGAttributes } from 'react';
-
-import { Tooltip } from '../Tooltip';
-
-import styles from './IconButton.module.scss';
-
-interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  'aria-label': string;
-  children?: never;
-  href: string;
-  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  tooltip: string;
-}
-
-export const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props }) => {
-  return (
-    <Tooltip tooltip={tooltip}>
-      <a className={classNames(styles.iconButton, className)} {...props}>
-        <span className={styles.content}>
-          <Icon aria-hidden="true" className={styles.icon} role="img" />
-        </span>
-      </a>
-    </Tooltip>
-  );
-};

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

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

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

@@ -1,29 +0,0 @@
-.key {
-  position: relative;
-  display: inline-block;
-  min-width: var(--key--height);
-  height: var(--key--height);
-  padding: var(--spacing--s) var(--spacing--m);
-  background-color: var(--color--white);
-  color: var(--color--foreground);
-  border: var(--border);
-  border-radius: var(--border--radius);
-  box-shadow: var(--box-shadow);
-  font-family: var(--font--family--monospace);
-  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
-  vertical-align: middle;
-  text-align: center;
-  white-space: pre-wrap;
-
-  & + & {
-    margin-inline-start: var(--spacing--xs);
-  }
-
-  :global(svg) {
-    position: absolute;
-    top: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
-    left: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
-    width: var(--key--icon--size);
-    height: var(--key--icon--size);
-  }
-}

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

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