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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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