chore(dependencies): bump unified libraries (#230)

* chore(dependencies): bump 1/2

* chore(dependencies): bump 2/2

* fix(dependencies): downgrade prettier 3.0.0 -> 2.8.8

.prettierrc.json

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "all"
 }

markdown/articles/2021/01/07/history-of-doomsday.md

@@ -256,7 +256,7 @@ decks found the answer did the Legacy deck truly form.
 Moving sideways for the time being, storm decks were viable from the onset of
 Legacy with the most well known list at the time being known as _Iggy Pop_,
 designed by Michael Bomholt whose original primer can be found
-[here](https://web.archive.org/web/20090104201512/http://www.starcitygames.com/php/news/article/10989.html).
+[here](https://web.archive.org/web/20090104201512/http:/www.starcitygames.com/php/news/article/10989.html).
 Iggy was a {U}{B} storm list based around the engine of :card[Ill-Gotten Gains]
 coupled with rituals effects, other fast mana, Lion's Eye Diamonds and
 :card[Tendrils of Agony] with tools like Mystical Tutor and :card[Intuition] to

package.json

@@ -28,15 +28,15 @@
     "@fontsource/libre-baskerville": "5.0.5",
     "@mdi/js": "7.2.96",
     "@mdi/react": "1.6.1",
-    "@mui/material": "5.13.7",
-    "@mui/system": "5.13.7",
-    "@mui/utils": "5.13.7",
+    "@mui/material": "5.14.1",
+    "@mui/system": "5.14.1",
+    "@mui/utils": "5.14.1",
     "@vercel/analytics": "1.0.1",
     "async-sema": "3.1.1",
     "gray-matter": "4.0.3",
-    "mana-font": "1.15.7",
+    "mana-font": "1.15.8",
     "memfs": "4.2.0",
-    "next": "13.4.9",
+    "next": "13.4.12",
     "plaiceholder": "3.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -49,39 +49,39 @@
     "remark-parse": "10.0.2",
     "remark-slug": "7.0.1",
     "remark-toc": "8.0.1",
-    "sharp": "0.32.3",
-    "simple-icons": "9.5.0",
+    "sharp": "0.32.4",
+    "simple-icons": "9.6.0",
     "unified": "10.1.2",
-    "unist-util-select": "4.0.3",
-    "unist-util-visit": "4.1.2"
+    "unist-util-select": "5.0.0",
+    "unist-util-visit": "5.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
-    "@types/mdast": "3.0.11",
-    "@types/node": "20.4.1",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
+    "@types/mdast": "4.0.0",
+    "@types/node": "20.4.3",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "@types/react-syntax-highlighter": "15.5.7",
-    "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "6.0.0",
-    "@typescript-eslint/parser": "6.0.0",
+    "@types/unist": "3.0.0",
+    "@typescript-eslint/eslint-plugin": "6.1.0",
+    "@typescript-eslint/parser": "6.1.0",
     "concurrently": "8.2.0",
-    "eslint": "8.44.0",
+    "eslint": "8.45.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.8.0",
     "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
     "jest": "29.6.1",
     "jest-environment-jsdom": "29.6.1",
     "lint-staged": "13.2.3",
     "markdownlint-cli": "0.35.0",
-    "mdast-util-directive": "2.2.4",
-    "msw": "1.2.2",
+    "mdast-util-directive": "3.0.0",
+    "msw": "1.2.3",
     "prettier": "2.8.8",
     "ts-prune": "0.10.3",
     "typescript": "5.1.6"

scryfall/server.js

@@ -46,5 +46,5 @@ const PORT = '3333';
 http
   .createServer(handler)
   .listen(PORT, HOST, () =>
-    console.info(`Cache server is running on http://${HOST}:${PORT}`)
+    console.info(`Cache server is running on http://${HOST}:${PORT}`),
   );

src/components/ArticleCard/ArticleCard.test.tsx

@@ -13,7 +13,7 @@ describe(ArticleCard.name, () => {
     props = {
       banner: {
         art: '',
-        artThumbnail: '',
+        artPreview: '',
         flavor: null,
         title: '',
       },
@@ -46,7 +46,7 @@ describe(ArticleCard.name, () => {
     // Given
     props.banner = {
       art: 'protocol://domain.tld/path/to/art',
-      artThumbnail: 'protocol://domain.tld/path/to/thumbnail',
+      artPreview: 'protocol://domain.tld/path/to/preview',
       flavor: null,
       title: 'Banner title',
     };

src/components/Banner/Banner.tsx

@@ -38,7 +38,7 @@ export const Banner: FunctionComponent<Props> = ({
       >
         <Image
           alt={banner.title}
-          blurDataURL={banner.artThumbnail}
+          blurDataURL={banner.artPreview}
           fill
           placeholder="blur"
           priority

src/components/Layout/Layout.tsx

@@ -77,7 +77,7 @@ export const Layout: FunctionComponent<Props> = ({
         withProgress={withProgress}
       />
       <Sidebar
-        category={`${router.query.category}`}
+        category={router.query.category && (router.query.category as string)}
         menu={menu}
         isClear={isClear}
         isMobile={!isDesktop}

src/components/Remark/renderers/RemarkAccordion.tsx

@@ -22,15 +22,13 @@ import type { Partial } from '@/tools/markdown/types';
 //      Remark -> Remark/constants -> RemarkAccordion -> Remark
 
 interface Props extends ReactMarkdownProps {
-  decklists: Decklists;
+  decklists?: Decklists;
   partial?: Partial;
 }
 
-// TODO Make a re-usable accordion component for the decklists as well
-
 export const RemarkAccordion: FunctionComponent<Props> = ({
   children: [title, ...content] = [],
-  decklists,
+  decklists = {},
   partial,
 }) => (
   <Accordion

src/components/Remark/renderers/RemarkDecklist.tsx

@@ -7,12 +7,11 @@ import type {
 } from '@/tools/decklists/types';
 
 interface Props extends ReactMarkdownProps {
-  node: ReactMarkdownProps['node'] & {
-    properties: DecklistModel & DecklistExtra;
-  };
+  decklist?: DecklistModel & DecklistExtra;
 }
 
-export const RemarkDecklist: FunctionComponent<Props> = ({ node }) => {
+export const RemarkDecklist: FunctionComponent<Props> = ({ decklist }) => {
+  if (!decklist) return null;
   const {
     authors,
     colors,
@@ -23,8 +22,7 @@ export const RemarkDecklist: FunctionComponent<Props> = ({ node }) => {
     sideCount,
     title,
     titleAsFile,
-  } = node.properties;
-  if (!main) return null;
+  } = decklist;
   return (
     <Decklist
       authors={authors}

src/components/Remark/renderers/RemarkLink.tsx

@@ -2,9 +2,7 @@ import type { Components } from 'react-markdown';
 import { Link } from '@/components/Link/Link';
 
 export const RemarkLink: Components['a'] = ({ children, href }) => {
-  if (!href) {
-    return <>{children}</>;
-  }
+  if (!href) return <>{children}</>;
   return (
     <Link external={href.startsWith('http')} href={href}>
       {children}

src/components/Remark/renderers/RemarkRow.tsx

@@ -35,16 +35,19 @@ const variantStyles: Record<
 };
 
 interface Props extends ReactMarkdownProps {
+  variant?: string;
   node: ReactMarkdownProps['node'] & {
     properties: {
-      cards: { data: ScryCard[]; id?: string }[];
-      variant?: string;
+      cards?: { data: ScryCard[]; id?: string }[];
     };
   };
 }
 
-export const RemarkRow: FunctionComponent<Props> = ({ node }) => {
-  const { cards = [], variant } = node.properties;
+export const RemarkRow: FunctionComponent<Props> = ({ node, variant }) => {
+  // NOTE We retrieve cards from the Hast properties which support complex
+  //      objects as opposed to inline properties which get converted to a
+  //      string of `[object Object] [object Object] ...`.
+  const { cards = [] } = node.properties;
   const variantKey = variant as keyof typeof VARIANTS;
   const variantStyle = VARIANTS[variantKey] || VARIANTS.CENTERED;
   return (

src/components/Remark/renderers/RemarkSoundcloud.tsx

@@ -3,13 +3,10 @@ import { Box } from '@mui/material';
 import type { ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
 
 interface Props extends ReactMarkdownProps {
-  node: ReactMarkdownProps['node'] & {
-    properties: { url?: string };
-  };
+  url?: string;
 }
 
-export const RemarkSoundcloud: FunctionComponent<Props> = ({ node }) => {
-  const { url } = node.properties;
+export const RemarkSoundcloud: FunctionComponent<Props> = ({ url }) => {
   if (!url) return null;
   // TODO Explore more customization options here
   //      https://developers.soundcloud.com/docs/api/html5-widget

src/components/Remark/renderers/RemarkTweet.tsx

@@ -7,7 +7,7 @@ import { Box, CircularProgress, Typography } from '@mui/material';
 type CreateTweet = (
   id: string,
   anchor: Element,
-  options: { align: string; dnt: boolean; theme: string }
+  options: { align: string; dnt: boolean; theme: string },
 ) => Promise<Element>;
 
 declare global {
@@ -16,14 +16,11 @@ declare global {
   }
 }
 
-interface Props {
-  node: ReactMarkdownProps['node'] & {
-    properties: { id?: string };
-  };
+interface Props extends ReactMarkdownProps {
+  id?: string;
 }
 
-export const RemarkTweet: FunctionComponent<Props> = ({ node }) => {
-  const { id } = node.properties;
+export const RemarkTweet: FunctionComponent<Props> = ({ id }) => {
   const [hasError, setHasError] = useState<boolean>(false);
   const [height, setHeight] = useState<number>(400);
   const [isLoading, setIsLoading] = useState<boolean>(true);

src/components/Remark/renderers/RemarkYoutube.tsx

@@ -3,14 +3,10 @@ import type { ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
 import { Box } from '@mui/material';
 
 interface Props extends ReactMarkdownProps {
-  node: ReactMarkdownProps['node'] & {
-    properties: { id?: string };
-  };
+  id?: string;
 }
 
-export const RemarkYoutube: FunctionComponent<Props> = ({ node }) => {
-  const { id } = node.properties;
-
+export const RemarkYoutube: FunctionComponent<Props> = ({ id }) => {
   if (!id) return null;
 
   const allow = [

src/components/Sidebar/Sidebar.tsx

@@ -18,7 +18,7 @@ import { darkTheme } from '@/theme/theme';
 import type { MenuEntry } from '@/tools/markdown/types';
 
 interface Props {
-  category: string;
+  category: string | undefined;
   isClear: boolean;
   isMobile?: boolean;
   isOpen?: boolean;

src/components/Sidebar/SidebarRosetta.tsx

@@ -14,7 +14,7 @@ import { getRosetta } from '@/tools/game/getRosetta';
 import type { Rosetta } from '@/tools/game/getRosetta';
 
 interface Props {
-  category: string;
+  category: string | undefined;
   sx?: SxProps<Theme>;
 }
 

src/mocks/handlers.ts

@@ -15,7 +15,7 @@ export const handlers: RestHandler<MockedRequest>[] = [
       card.name = name || card.name;
       card.set = set || card.set;
       return response(context.json(card));
-    }
+    },
   ),
 
   rest.get<ScryDataList>(
@@ -28,7 +28,7 @@ export const handlers: RestHandler<MockedRequest>[] = [
         card.data[0].name = name || query;
       }
       return response(context.json(card));
-    }
+    },
   ),
 
   rest.get<ScryDataItem>(
@@ -39,6 +39,6 @@ export const handlers: RestHandler<MockedRequest>[] = [
       const name = `${set.toUpperCase()}#${number}`;
       const card: ScryDataItem = { ...SET, name };
       return response(context.json(card));
-    }
+    },
   ),
 ];

src/pages/index.tsx

@@ -30,7 +30,7 @@ const HomePage: NextPage<Props> = ({ articles, decklists, menu, welcome }) => {
 
   const showMore = (count?: number) => () =>
     setSize((previous) =>
-      count === undefined ? articles.length : previous + count
+      count === undefined ? articles.length : previous + count,
     );
 
   useEffect(() => {

src/pages/sandbox.tsx

@@ -38,7 +38,7 @@ const SandboxPage: NextPage<Props> = ({ menu }) => {
         if (!value.length) return accumulator;
         return [...accumulator, { id, text: value.replace(/ +/g, ',') }];
       },
-      []
+      [],
     );
     setOutput(result);
   }, [input]);
@@ -96,7 +96,7 @@ const SandboxPage: NextPage<Props> = ({ menu }) => {
                     >
                       |{scripture.text}.
                     </Box>
-                  )
+                  ),
               )
             ) : (
               <Typography color="text.secondary" sx={{ fontStyle: 'italic' }}>

src/theme/theme.ts

@@ -171,7 +171,7 @@ const customizeTheme = (options: ThemeOptions): Theme => {
         h5: { fontSize: typography.pxToRem(26) },
         h6: { fontSize: typography.pxToRem(22) },
       },
-    })
+    }),
   );
 };
 

src/tools/decklists/parse.test.ts

@@ -65,7 +65,7 @@ describe(parse.name, () => {
         mainCount: 2,
         side: 'SIDE',
         sideCount: 4,
-      })
+      }),
     );
   });
 });

src/tools/decklists/parseCards.ts

@@ -7,7 +7,7 @@ import type { Card } from '@/tools/decklists/types';
  * order to accomodate for multi-column rendering.
  */
 export const parseCards = (
-  text: string
+  text: string,
 ): { cards: Card[][]; count: number } => {
   let count = 0;
   const cards: Card[][] = text
@@ -20,7 +20,7 @@ export const parseCards = (
         const quantityValue = parseInt(quantity, 10);
         count += quantityValue;
         return [quantityValue, name];
-      })
+      }),
     );
   return { cards, count };
 };

src/tools/decklists/parseHeader.ts

@@ -6,7 +6,7 @@ import { toArray } from '@/tools/mana/toArray';
  * It usually looks like this:
  */
 export const parseHeader = (
-  text: string
+  text: string,
 ): {
   authors: string | null;
   colors: string[] | null;