@scrabble-solver/scrabble-solver 2.10.3 → 2.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.3",
+  "version": "2.10.5",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,14 +31,16 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.2",
-    "@scrabble-solver/configs": "^2.10.3",
-    "@scrabble-solver/constants": "^2.10.3",
-    "@scrabble-solver/dictionaries": "^2.10.3",
-    "@scrabble-solver/logger": "^2.10.3",
-    "@scrabble-solver/solver": "^2.10.3",
-    "@scrabble-solver/types": "^2.10.3",
-    "@scrabble-solver/word-definitions": "^2.10.3",
+    "@scrabble-solver/configs": "^2.10.5",
+    "@scrabble-solver/constants": "^2.10.5",
+    "@scrabble-solver/dictionaries": "^2.10.5",
+    "@scrabble-solver/logger": "^2.10.5",
+    "@scrabble-solver/solver": "^2.10.5",
+    "@scrabble-solver/types": "^2.10.5",
+    "@scrabble-solver/word-definitions": "^2.10.5",
     "classnames": "^2.3.2",
+    "include-media": "^2.0.0",
+    "include-media-query-builder": "^1.1.0",
     "next": "^13.1.6",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
@@ -74,5 +76,5 @@
     "sass": "^1.57.1",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "50a961d5f3fe68c6b646a3cd1a3fb28f9e9b5252"
+  "gitHead": "c998db150c41bf76febd1c9a2650950cd0b449c4"
 }

package/src/components/Badge/Badge.module.scss

@@ -2,12 +2,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing--xs) var(--spacing--s);
+  padding: var(--spacing--xs) var(--spacing--m);
+  border: var(--border);
   border-radius: var(--border--radius);
-  background-color: var(--color--foreground--secondary);
-  box-shadow: va(--box-shadow);
+  background-color: var(--color--background--overlay);
   line-height: var(--line-height);
-  font-size: var(--font--size--s);
+  font-size: var(--font--size--m);
   font-weight: bold;
-  color: white;
 }

package/src/components/Board/BoardPure.tsx

@@ -1,4 +1,4 @@
-import { Cell } from '@scrabble-solver/types';
+import { Cell as CellModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
   ChangeEventHandler,
@@ -13,16 +13,16 @@ import {
 import { Direction } from 'types';
 
 import styles from './Board.module.scss';
-import { Cell as CellComponent } from './components';
+import { Cell } from './components';
 
 interface Props {
   className?: string;
   cellSize: number;
-  center: Cell;
+  center: CellModel;
   direction: Direction;
   innerRef?: Ref<HTMLDivElement>;
   refs: RefObject<HTMLInputElement>[][];
-  rows: Cell[][];
+  rows: CellModel[][];
   onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
@@ -48,7 +48,7 @@ const BoardPure: FunctionComponent<Props> = ({
     {rows.map((cells, y) => (
       <div className={styles.row} key={y}>
         {cells.map((cell, x) => (
-          <CellComponent
+          <Cell
             className={styles.cell}
             cell={cell}
             direction={direction}

package/src/components/Board/components/Cell/Cell.module.scss

@@ -35,69 +35,69 @@ $icon-size: 16px;
   }
 
   &.bonusStart {
-    &:before {
+    &::before {
       background-color: var(--color--violet--light);
     }
   }
 
   &.bonusCharacter1 {
-    &:before {
+    &::before {
       background-color: var(--color--yellow--light);
     }
   }
 
   &.bonusCharacter2 {
-    &:before {
+    &::before {
       background-color: var(--color--green--light);
     }
   }
 
   &.bonusCharacter3 {
-    &:before {
+    &::before {
       background-color: var(--color--blue--light);
     }
   }
 
   &.bonusCharacter5 {
-    &:before {
+    &::before {
       background-color: var(--color--red--light);
     }
   }
 
   &.bonusCharacterMultiplier2 {
-    &:before {
+    &::before {
       background-color: var(--color--light-blue--light);
     }
   }
 
   &.bonusCharacterMultiplier3 {
-    &:before {
+    &::before {
       background-color: var(--color--dark-blue--light);
     }
   }
 
   &.bonusWord2 {
-    &:before {
+    &::before {
       content: 'x2';
       background-color: var(--color--orange);
     }
   }
 
   &.bonusWord3 {
-    &:before {
+    &::before {
       content: 'x3';
       background-color: var(--color--pink);
     }
   }
 
   &.candidate {
-    &:before {
+    &::before {
       content: ' ';
       background-color: var(--color--primary);
     }
   }
 
-  &:before {
+  &::before {
     $size: 80%;
 
     display: flex;

package/src/components/Button/Button.module.scss

@@ -1,26 +1,47 @@
 @import 'styles/mixins';
 
-$size: 32px;
-
 .button {
   @include button-reset;
   @include focus-effect;
 
   display: inline-block;
-  transition: var(--transition);
+  padding: var(--spacing--m) var(--spacing--l);
+  border: var(--border);
   border-radius: var(--border--radius);
-  box-shadow: none;
   color: var(--color--inactive);
+  text-transform: uppercase;
+  transition: var(--transition);
   cursor: pointer;
-  opacity: 0.9;
 
   &,
   &:active,
   &:focus,
   &:hover {
-    background-color: var(--color--primary);
     box-shadow: var(--box-shadow);
-    color: white;
+    text-decoration: none;
+
+    &.primary {
+      background-color: var(--color--primary);
+      color: white;
+    }
+
+    &.default {
+      background-color: var(--color--background--overlay);
+      color: var(--color--foreground);
+
+      .icon {
+        color: var(--color--inactive);
+      }
+    }
+  }
+
+  &:focus,
+  &:hover {
+    &.default {
+      .icon {
+        color: var(--color--foreground--secondary);
+      }
+    }
   }
 
   &:active {
@@ -32,53 +53,26 @@ $size: 32px;
     }
   }
 
-  &:disabled {
-    background-color: var(--color--background);
-    color: var(--color--inactive);
+  &[disabled] {
+    opacity: var(--opacity--disabled);
     box-shadow: none;
     cursor: not-allowed;
-
-    .icon {
-      transform: scale(1);
-    }
-  }
-
-  &:hover {
-    opacity: 1;
-
-    &:not(:disabled) {
-      .icon {
-        transform: scale(1.1);
-      }
-    }
   }
 }
 
 .content {
   display: flex;
   align-items: center;
-  padding: var(--spacing--xs) var(--spacing--m);
-}
-
-.icon,
-.label {
-  transition: var(--transition);
+  gap: 20px;
 }
 
 .icon {
-  width: $size;
-  height: $size;
-  pointer-events: none;
+  width: var(--button--icon--size);
+  height: var(--button--icon--size);
   transition: var(--transition);
-  transform: scale(1);
-  color: inherit;
 }
 
 .label {
-  padding: 0 var(--spacing--m);
+  font-size: var(--font--size--h3);
   transition: var(--transition);
-  font-size: var(--font--size--m);
-  text-transform: uppercase;
-  pointer-events: none;
-  user-select: none;
 }

package/src/components/Button/Button.tsx

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

package/src/components/Button/Link.tsx

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

package/src/components/Dictionary/Dictionary.module.scss

@@ -1,10 +1,9 @@
 .dictionary {
   position: relative;
-  min-height: calc(var(--dictionary--height) - var(--text-input--height));
+  height: var(--dictionary--height);
   overflow-y: auto;
   word-break: break-word;
   transition: var(--transition);
-  font-size: var(--font--size--s);
 }
 
 .result {

package/src/components/Dictionary/Dictionary.tsx

@@ -25,11 +25,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
         [styles.isNotAllowed]: isFirstAllowed === false,
       })}
     >
-      {typeof error !== 'undefined' && (
-        <EmptyState className={styles.emptyState} type="error">
-          {error.message}
-        </EmptyState>
-      )}
+      {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
 
       {results.map(({ definitions, exists, isAllowed, word }) => (
         <div
@@ -40,7 +36,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
           key={word}
         >
           {typeof word === 'undefined' && (
-            <EmptyState type="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
+            <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
           )}
 
           {typeof word !== 'undefined' && (

package/src/components/DictionaryInput/DictionaryInput.module.scss

@@ -1,9 +1,7 @@
 @import 'styles/mixins';
 
 .dictionaryInput {
-  &:focus-within {
-    @include focus-effect;
-  }
+  @include focus-effect;
 }
 
 .input {

package/src/components/EmptyState/EmptyState.module.scss

@@ -1,15 +1,14 @@
 .emptyState {
-  margin: 0 auto;
-  max-width: calc(2 * var(--sidebar--width) / 3);
   padding: var(--spacing--xl);
   font-family: var(--font--family);
   color: var(--color--foreground--secondary);
   text-align: center;
   text-transform: none;
+}
 
-  .tiles {
-    margin-bottom: var(--spacing--m);
-    height: 32px;
-    overflow: visible;
-  }
+.tiles {
+  display: inline-block;
+  margin-bottom: var(--spacing--m);
+  height: 40px;
+  overflow: visible;
 }

package/src/components/EmptyState/EmptyState.tsx

@@ -13,34 +13,34 @@ import styles from './EmptyState.module.scss';
 interface Props {
   children: ReactNode;
   className?: string;
-  type: 'error' | 'info' | 'success' | 'warning';
+  variant: 'error' | 'info' | 'success' | 'warning';
 }
 
-const TITLE_KEY_PER_TYPE: Record<Props['type'], keyof Translations> = {
+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['type'], string> = {
+const COLORS_PER_TYPE: Record<Props['variant'], string> = {
   error: COLOR_RED,
   info: COLOR_BLUE,
   success: COLOR_GREEN,
   warning: COLOR_YELLOW,
 };
 
-const EmptyState: FunctionComponent<Props> = ({ className, children, type }) => {
+const EmptyState: FunctionComponent<Props> = ({ children, className, variant }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
-  const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[type]), [translate]);
+  const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[variant]), [translate]);
   const message = direction === 'ltr' ? title : title.split('').reverse().join('');
   const content = useMemo(() => [[message.toUpperCase()]], [title]);
 
   return (
     <div className={classNames(styles.emptyState, className)}>
-      <PlainTiles className={styles.tiles} color={COLORS_PER_TYPE[type]} content={content} />
+      <PlainTiles className={styles.tiles} color={COLORS_PER_TYPE[variant]} content={content} />
 
       <div className={styles.content}>{children}</div>
     </div>

package/src/components/Key/Key.module.scss

@@ -13,7 +13,6 @@ $icon-size: 15px;
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--monospace);
-  font-size: var(--font--size--s);
   line-height: calc(#{$key-size} - 2 * (var(--spacing--s) + var(--border--width)));
   vertical-align: middle;
   text-align: center;

package/src/components/{Splash/Splash.module.scss → LogoSplashScreen/LogoSplashScreen.module.scss}

@@ -4,7 +4,7 @@ $loading-duration: 250ms;
 $loaded-duration: 100ms;
 $hiding-duration: 200ms;
 
-.splash {
+.logoSplashScreen {
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/{Splash/Splash.tsx → LogoSplashScreen/LogoSplashScreen.tsx}

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import { AnimationEventHandler, FunctionComponent } from 'react';
 
 import Logo from '../Logo';
-import Screen from '../Screen';
+import SplashScreen from '../SplashScreen';
 
-import styles from './Splash.module.scss';
+import styles from './LogoSplashScreen.module.scss';
 
 interface Props {
   className?: string;
@@ -12,9 +12,9 @@ interface Props {
   onAnimationEnd?: AnimationEventHandler<HTMLDivElement>;
 }
 
-const Splash: FunctionComponent<Props> = ({ className, forceShow, onAnimationEnd }) => (
-  <Screen
-    className={classNames(styles.splash, className, {
+const LogoSplashScreen: FunctionComponent<Props> = ({ className, forceShow, onAnimationEnd }) => (
+  <SplashScreen
+    className={classNames(styles.logoSplashScreen, className, {
       [styles.animated]: !forceShow,
     })}
     onAnimationEnd={onAnimationEnd}
@@ -25,7 +25,7 @@ const Splash: FunctionComponent<Props> = ({ className, forceShow, onAnimationEnd
     </div>
 
     <h1 className={styles.author}>by Kamil Mielnik</h1>
-  </Screen>
+  </SplashScreen>
 );
 
-export default Splash;
+export default LogoSplashScreen;

package/src/components/LogoSplashScreen/index.ts

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

package/src/components/{Sidebar/Sidebar.module.scss → Modal/Modal.module.scss}

@@ -1,8 +1,5 @@
 @import 'styles/mixins';
 
-$z-index: 100;
-$width: 370px;
-
 .modal,
 .closeButton {
   top: 0;
@@ -18,9 +15,9 @@ $width: 370px;
 
 .modal {
   position: fixed;
-  z-index: $z-index;
+  z-index: var(--z-index--modal);
   height: 100vh;
-  width: $width;
+  width: var(--modal--width);
   padding: 0;
   border-radius: 0;
   border: none;
@@ -28,10 +25,14 @@ $width: 370px;
   &:focus {
     outline: none;
   }
+
+  @include media('<s') {
+    --modal--width: 100%;
+  }
 }
 
 .afterOpen {
-  .sidebar {
+  .container {
     [dir='ltr'] &,
     [dir='rtl'] & {
       transform: translateX(0);
@@ -41,15 +42,15 @@ $width: 370px;
 }
 
 .beforeClose {
-  .sidebar {
+  .container {
     opacity: 0;
 
     [dir='ltr'] & {
-      transform: translateX($width);
+      transform: translateX(var(--modal--width));
     }
 
     [dir='rtl'] & {
-      transform: translateX(-$width);
+      transform: translateX(calc(-1 * var(--modal--width)));
     }
   }
 }
@@ -58,30 +59,34 @@ $width: 370px;
   background-color: transparent;
 }
 
-.sidebar {
+.container {
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: var(--color--background);
-  box-shadow: var(--box-shadow--left);
   transition: var(--transition);
   transition-duration: var(--transition--duration--long);
-  transform: translateX($width);
+  transform: translateX(var(--modal--width));
   opacity: 0;
 
   [dir='ltr'] & {
-    transform: translateX($width);
+    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(-$width);
+    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 {
-  flex: 0 0 auto;
   position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
   padding: var(--spacing--l);
+  background-color: var(--color--background);
 }
 
 .title {
@@ -89,24 +94,24 @@ $width: 370px;
   font-weight: 300;
 
   [dir='ltr'] & {
-    padding-right: calc(var(--square-button-size) + var(--spacing--s));
+    padding-right: calc(var(--square-button--size) + var(--spacing--s));
   }
 
   [dir='rtl'] & {
-    padding-left: calc(var(--square-button-size) + var(--spacing--s));
+    padding-left: calc(var(--square-button--size) + var(--spacing--s));
   }
 }
 
 .closeButton {
   position: absolute !important;
-  z-index: $z-index + 1;
+  z-index: var(--z-index--close-button);
   margin: var(--spacing--l);
 }
 
 .content {
-  flex: 1;
   position: relative;
+  flex: 1;
+  margin-top: calc(-1 * var(--spacing--l));
   padding: var(--spacing--l);
-  padding-top: 0;
   overflow: auto;
 }