Updates for new packages

app/components/Buttons.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, ReactNode } from 'react';
 import { CSSInterpolation } from '@emotion/serialize';
+import { css } from '@emotion/react';
 
 interface ButtonBaseProps {
   text: ReactNode;
@@ -49,7 +50,7 @@ export function ButtonReset({
   return (
     <button
       type="button"
-      css={[
+      css={css([
         ButtonResetCSS,
         subCSS,
         {
@@ -65,7 +66,7 @@ export function ButtonReset({
             },
           }),
         },
-      ]}
+      ])}
       {...props}
     >
       <span>{text}</span>

app/components/ClueMode.tsx

@@ -34,7 +34,6 @@ import { COVER_PIC } from '../lib/style';
 import { Timestamp } from '../lib/timestamp';
 import { ToolTipText } from './ToolTipText';
 import { FaInfoCircle, FaRegNewspaper } from 'react-icons/fa';
-import lightFormat from 'date-fns/lightFormat';
 import { PublishOverlay } from './PublishOverlay';
 import { Overlay } from './Overlay';
 import dynamic from 'next/dynamic';
@@ -49,6 +48,7 @@ import { markdownToHast } from '../lib/markdown/markdown';
 import { Markdown } from './Markdown';
 import { GridContext } from './GridContext';
 import { addClues } from '../lib/viewableGrid';
+import { lightFormat } from 'date-fns/lightFormat';
 
 export const MAX_STRING_LENGTH = 2048;
 export const MAX_BLOG_LENGTH = 20000;

app/components/DateTimePicker.tsx

@@ -1,5 +1,5 @@
-import lightFormat from 'date-fns/lightFormat';
-import set from 'date-fns/set';
+import { lightFormat } from 'date-fns/lightFormat';
+import { set } from 'date-fns/set';
 
 interface DateTimePickerProps {
   picked: Date | number;
@@ -32,7 +32,7 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
           ) {
             throw new Error('bad date ' + e.target.value);
           }
-          const newDate = set(props.picked, {
+          const newDate: Date = set(props.picked, {
             year: parseInt(split[0]),
             month: parseInt(split[1]) - 1,
             date: parseInt(split[2]),

app/components/EmbedOverlay.tsx

@@ -448,12 +448,12 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
       />
       <h4 css={{ marginTop: '2em' }}>Preview</h4>
       {customFontEnabled && fontStyles.length ? (
-        <Global styles={fontStyles} />
+        <Global styles={css(fontStyles)} />
       ) : (
         ''
       )}
       <div
-        css={[
+        css={css([
           {
             display: 'flex',
             flexWrap: 'wrap',
@@ -473,7 +473,7 @@ const ThemePicker = (props: EmbedOptionsT & { userId: string }) => {
             darkMode: isDark,
             preservePrimary,
           }),
-        ]}
+        ])}
       >
         <div css={{ width: 200, height: 200 }}>
           <GridView

app/components/EmbedStyling.tsx

@@ -1,4 +1,4 @@
-import { Global } from '@emotion/react';
+import { Global, css } from '@emotion/react';
 import { colorTheme } from '../lib/style';
 import type { CSSInterpolation } from '@emotion/serialize';
 
@@ -56,15 +56,15 @@ export function EmbedStyling(props: EmbedStylingProps) {
   }
   return (
     <Global
-      styles={[
+      styles={css([
         fontStyles,
         {
           body: {
             backgroundColor: 'transparent !important',
           },
           'html, body.light-mode, body.dark-mode': colorTheme(props),
         },
-      ]}
+      ])}
     />
   );
 }

app/components/Link.tsx

@@ -2,6 +2,7 @@ import NextLink from 'next/link';
 import { ReactNode, useContext } from 'react';
 import { ButtonResetCSS, ButtonCSS } from './Buttons';
 import { EmbedContext } from './EmbedContext';
+import { css } from '@emotion/react';
 
 interface LinkProps {
   href: string;
@@ -16,13 +17,13 @@ export function LinkButton(props: LinkProps) {
   return (
     /* eslint-disable-next-line jsx-a11y/anchor-has-content */
     <Link
-      css={[
+      css={css([
         ButtonResetCSS,
         ButtonCSS,
         {
           display: 'inline-block',
         },
-      ]}
+      ])}
       {...props}
     />
   );
@@ -36,13 +37,13 @@ export function LinkButtonSimpleA(props: {
   return (
     <a
       className={props.className}
-      css={[
+      css={css([
         ButtonResetCSS,
         ButtonCSS,
         {
           display: 'inline-block',
         },
-      ]}
+      ])}
       target="_blank"
       rel="noopener noreferrer"
       href={props.href}

app/components/Markdown.tsx

@@ -8,8 +8,6 @@ import type { Root } from 'hast';
 import { ReferenceData } from '../lib/markdown/clueReferencer';
 
 import * as prod from 'react/jsx-runtime';
-// @ts-expect-error: the react types are missing.
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };
 
 export const Markdown = (props: {
@@ -58,6 +56,8 @@ export const Markdown = (props: {
   };
 
   const reactContent = unified()
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
     .use(rehypeReact, {
       ...production,
       passNode: true,

app/components/PublishOverlay.tsx

@@ -8,7 +8,7 @@ import { Emoji } from './Emoji';
 import { getDocRef } from '../lib/firebaseWrapper';
 import { DBPuzzleT } from '../lib/dbtypes';
 import { slugify, STORAGE_KEY } from '../lib/utils';
-import lightFormat from 'date-fns/lightFormat';
+import { lightFormat } from 'date-fns/lightFormat';
 import { ButtonAsLink, Button } from './Buttons';
 import { serverTimestamp, setDoc } from 'firebase/firestore';
 

app/components/PuzzleOverlay.tsx

@@ -11,7 +11,7 @@ import {
 import type { User } from 'firebase/auth';
 import { Comments } from './Comments';
 import { EmbedColorMode, EmbedContext } from './EmbedContext';
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
 import { NextPuzzleLink } from './Puzzle';
 import { Overlay } from './Overlay';
 import { PuzzleHeading } from './PuzzleHeading';

app/components/SlateOverlays.tsx

@@ -5,7 +5,7 @@ import { ButtonResetCSS } from './Buttons';
 import { SlateHeader, SlateLogo } from './SlateHeader';
 import { Illustration, Pause, Play } from './SlateIcons';
 import { Link } from './Link';
-import { Global } from '@emotion/react';
+import { Global, css } from '@emotion/react';
 import { FULLSCREEN_CSS, LARGE_AND_UP, SMALL_AND_UP } from '../lib/style';
 import { SlateColorTheme } from './SlateColorTheme';
 import { PuzzleResultWithAugmentedComments } from '../lib/types';
@@ -166,7 +166,7 @@ const BigButton = ({
 }) => {
   return (
     <button
-      css={[
+      css={css([
         ButtonResetCSS,
         {
           backgroundColor: 'var(--primary)',
@@ -178,7 +178,7 @@ const BigButton = ({
             backgroundColor: 'var(--slate-primary-hover)',
           },
         },
-      ]}
+      ])}
       onClick={() => {
         window.parent.postMessage({ type: 'resume' }, '*');
         dispatch({ type: 'RESUMEACTION' });

app/components/TimeDisplay.tsx

@@ -1,7 +1,7 @@
-import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
 import { Trans } from '@lingui/macro';
 import { useRouter } from 'next/router';
-import { es, it } from 'date-fns/locale';
+import { Locale, es, it } from 'date-fns/locale';
 import { ToolTipText } from './ToolTipText';
 import { useEffect, useState } from 'react';
 

app/components/TopBar.tsx

@@ -492,14 +492,14 @@ export const TopBar = ({
                   setShowingNotifications(true);
                   e.stopPropagation();
                 }}
-                css={[
+                css={css([
                   ButtonResetCSS,
                   {
                     flexGrow: 1,
                     display: 'flex',
                     alignItems: 'center',
                   },
-                ]}
+                ])}
                 title="View Notifications"
               >
                 <Logo

app/lib/__mocks__/WordDB.ts

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 export {};
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const WordDB = jest.genMockFromModule('../WordDB');
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
+const WordDB: any = jest.genMockFromModule('../WordDB');
 
 WordDB.useWordDB = () => {
   return [
@@ -18,4 +19,5 @@ WordDB.wordDB = true;
 
 WordDB.matchingWords = () => [];
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 module.exports = WordDB;

app/lib/converter.ts

@@ -182,9 +182,8 @@ class PuzReader {
 
     let notes = this.readString().trim() || null;
     notes =
-      notes
-        ?.replace(/(- )?created (on|with) \w+\.(com|org|net)/i, '')
-        ?.trim() || null;
+      notes?.replace(/(- )?created (on|with) \w+\.(com|org|net)/i, '').trim() ||
+      null;
 
     let tryAnotherExtension = true;
     while (tryAnotherExtension) {

app/lib/dbUtils.ts

@@ -68,7 +68,7 @@ export async function mapEachResult<N, A>(
     } else {
       console.error('bad doc: ', doc.id);
       console.error(PathReporter.report(validationResult).join(','));
-      return Promise.reject('Malformed content');
+      return Promise.reject(new Error('Malformed content'));
     }
   }
   return results;
@@ -89,7 +89,7 @@ export async function getValidatedAndDelete<A>(
       deletes.push(deleteDoc(doc.ref));
     } else {
       console.error(PathReporter.report(validationResult).join(','));
-      return Promise.reject('Malformed content');
+      return Promise.reject(new Error('Malformed content'));
     }
   }
   await Promise.all(deletes);
@@ -103,14 +103,14 @@ export async function getFromDB<A>(
 ): Promise<A> {
   const dbres = await getDoc(getDocRef(collection, docId));
   if (!dbres.exists()) {
-    return Promise.reject('Missing doc');
+    return Promise.reject(new Error('Missing doc'));
   }
   const validationResult = validator.decode(dbres.data());
   if (isRight(validationResult)) {
     return validationResult.right;
   } else {
     console.error(PathReporter.report(validationResult).join(','));
-    return Promise.reject('Malformed content');
+    return Promise.reject(new Error('Malformed content'));
   }
 }
 
@@ -170,6 +170,6 @@ export async function getFromSessionOrDB<A>({
     return validationResult.right;
   } else {
     console.error(PathReporter.report(validationResult).join(','));
-    return Promise.reject('Malformed content');
+    return Promise.reject(new Error('Malformed content'));
   }
 }

app/lib/firebaseAdminWrapper.ts

@@ -62,7 +62,7 @@ export async function mapEachResult<N, A>(
     } else {
       console.error('bad doc: ', doc.id);
       console.error(PathReporter.report(validationResult).join(','));
-      return Promise.reject('Malformed content');
+      return Promise.reject(new Error('Malformed content'));
     }
   }
   return results;

app/lib/firebaseWrapper.ts

@@ -23,6 +23,7 @@ import cloneDeepWith from 'lodash/cloneDeepWith';
 import { isTimestamp } from './timestamp';
 import { isRight } from 'fp-ts/lib/Either';
 import { PathReporter } from 'io-ts/lib/PathReporter';
+import { CollectionReference } from 'firebase/firestore';
 
 // Initialize Firebase
 let App: FirebaseApp;
@@ -77,7 +78,7 @@ export function getValidatedCollection<V>(
   collectionName: string,
   validator: t.Decoder<unknown, V>,
   idField: string | null = null
-) {
+): CollectionReference<V, Record<string, unknown>> {
   return collection(db, collectionName).withConverter({
     toFirestore: convertTimestamps,
     fromFirestore: (s: QueryDocumentSnapshot, options: SnapshotOptions): V => {
@@ -95,7 +96,8 @@ export function getValidatedCollection<V>(
         throw new Error('Malformed content');
       }
     },
-  });
+    // TODO not sure why this cast became necessary w/ the latest firebase+typescript upgrade. Try reverting next update.
+  }) as CollectionReference<V, Record<string, unknown>>;
 }
 
 export const getDocRef = (collectionName: string, docId: string) =>

app/lib/notificationTypes.ts

@@ -2,7 +2,7 @@ import * as t from 'io-ts';
 import { timestamp } from './timestamp';
 import { DBPuzzleT, CommentWithRepliesT } from './dbtypes';
 import { Timestamp } from './timestamp';
-import add from 'date-fns/add';
+import { add } from 'date-fns/add';
 
 const NotificationBaseV = t.type({
   /** doc id for this notification. should be idempotent since function might trigger multiple times */

app/lib/plays.ts

@@ -110,7 +110,7 @@ export async function getPlayFromDB(
     return play;
   } else {
     console.error(PathReporter.report(playResult).join(','));
-    return Promise.reject('Malformed play');
+    return Promise.reject(new Error('Malformed play'));
   }
 }
 
@@ -119,14 +119,14 @@ export async function writePlayToDB(
   puzzleId: string
 ): Promise<void> {
   if (!isDirty(user, puzzleId)) {
-    return Promise.reject('trying to write to db but play is clean');
+    return Promise.reject(new Error('trying to write to db but play is clean'));
   }
 
   const storageKey = getStorageKey(user);
   const store = getStore(storageKey);
   const play: PlayWithoutUserT | null | undefined = store[puzzleId];
   if (!play) {
-    return Promise.reject('no cached play!');
+    return Promise.reject(new Error('no cached play!'));
   }
 
   const docId = puzzleId + '-' + user.uid;

app/lib/usePagination.ts

@@ -79,7 +79,7 @@ export function usePaginatedQuery<A, N>(
             }
           } else {
             console.error(PathReporter.report(validationResult).join(','));
-            return Promise.reject('Malformed content');
+            return Promise.reject(new Error('Malformed content'));
           }
         }
         setLoading(false);

app/pages/articles/[slug]/edit.tsx

@@ -61,7 +61,7 @@ const ArticleLoader = ({ slug }: { slug: string }) => {
       </ErrorPage>
     );
   }
-  const article = articles?.[0];
+  const article: (ArticleT & { i: string }) | undefined = articles?.[0];
   if (!article) {
     return (
       <div>